Implemented compact mode for the drawing-toolbar

foxford · Jul 24, 2024 · 7113f0c · 7113f0c
1 parent aaba244
commit 7113f0c
Show file tree

Hide file tree

Showing 17 changed files with 526 additions and 197 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/drawing-toolbar/package.json b/packages/drawing-toolbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ulms/ui-drawing-toolbar",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "license": "MIT",
   "main": "index.js",
   "module": "es/index.js",

diff --git a/packages/drawing-toolbar/src/components/color-settings.jsx b/packages/drawing-toolbar/src/components/color-settings.jsx
@@ -20,20 +20,29 @@ const colors = [
   { dataTestId: 'board-panel-popup-color-aquamarine-button', value: '#9DF1F7' },
 ]
 
+const colorsForCompactMode = [
+  { dataTestId: 'board-panel-popup-color-black-button', value: '#000000' },
+  { dataTestId: 'board-panel-popup-color-red-button', value: '#F94B28' },
+  { dataTestId: 'board-panel-popup-color-blue-button', value: '#1A96F6' },
+  { dataTestId: 'board-panel-popup-color-green-button', value: '#7FC92E' },
+]
+
 export function ColorItem({
   active = false,
   color,
+  compact,
   dataTestId,
   handleClick,
   innerRef,
 }) {
   return (
     <ToolbarButton
       active={active}
+      compact={compact}
       dataTestId={dataTestId}
       innerRef={innerRef}
       onClick={() => handleClick(color)}
-      style={{ padding: '10px' }}
+      style={{ padding: compact ? '6px' : '10px' }}
     >
       <div
         className={css.colorCircle}
@@ -47,8 +56,17 @@ export function ColorItem({
   )
 }
 
-export function ColorSettings({ currentColor, handleClick, rows = 3 }) {
+export function ColorSettings({
+  compact,
+  currentColor,
+  handleClick,
+  rows = 3,
+}) {
   const splitColors = useMemo(() => {
+    if (compact) {
+      return [colorsForCompactMode]
+    }
+
     const chunkSize = Math.max(colors.length / rows, 1)
     const result = []
 
@@ -57,7 +75,7 @@ export function ColorSettings({ currentColor, handleClick, rows = 3 }) {
     }
 
     return result
-  }, [rows])
+  }, [compact, rows])
 
   return (
     <div className={css.wrapper}>
@@ -68,6 +86,7 @@ export function ColorSettings({ currentColor, handleClick, rows = 3 }) {
             <ColorItem
               active={currentColor.toLowerCase() === color.value.toLowerCase()}
               color={color.value}
+              compact={compact}
               dataTestId={color.dataTestId}
               handleClick={handleClick}
               key={color.value}

diff --git a/packages/drawing-toolbar/src/components/divider.jsx b/packages/drawing-toolbar/src/components/divider.jsx
@@ -1,12 +1,13 @@
+import cn from 'classnames-es'
 import React from 'react'
 
 import css from './divider.module.css'
 
 // eslint-disable-next-line import/prefer-default-export
-export function Divider({ horizontal = false }) {
+export function Divider({ className, horizontal = false }) {
   return horizontal ? (
-    <div className={css.horizontalDivider} />
+    <div className={cn(css.horizontalDivider, className)} />
   ) : (
-    <div className={css.verticalDivider} />
+    <div className={cn(css.verticalDivider, className)} />
   )
 }
diff --git a/packages/drawing-toolbar/src/components/font-settings.jsx b/packages/drawing-toolbar/src/components/font-settings.jsx
@@ -14,7 +14,7 @@ const testAttributes = {
 }
 
 // eslint-disable-next-line import/prefer-default-export
-export function FontSettings({ currentFontSize, handleClick }) {
+export function FontSettings({ compact, currentFontSize, gap, handleClick }) {
   const fontIcons = {
     [fontSizes[0]]: <IconText32 />,
     [fontSizes[1]]: <IconText48 />,
@@ -30,7 +30,9 @@ export function FontSettings({ currentFontSize, handleClick }) {
   return (
     <IconGroupSettings
       iconsSet={iconsSet}
+      compact={compact}
       currentSelection={currentFontSize}
+      gap={gap}
       handleClick={handleClick}
     />
   )

diff --git a/packages/drawing-toolbar/src/components/icon-group-settings.jsx b/packages/drawing-toolbar/src/components/icon-group-settings.jsx
@@ -1,3 +1,4 @@
+import cn from 'classnames-es'
 import React from 'react'
 
 import { ToolbarButton } from './toolbar-button'
@@ -7,16 +8,19 @@ import css from './settings.module.css'
 // eslint-disable-next-line import/prefer-default-export
 export function IconGroupSettings({
   iconsSet,
+  compact,
   currentSelection,
+  gap = 4,
   handleClick,
   fillWidth,
 }) {
   return (
     <div className={css.wrapper}>
-      <div className={css.row}>
+      <div className={cn(css.row, css[`gap-${gap}`], compact && css.compact)}>
         {iconsSet.map(({ dataTestId, key, icon, title = '' }) => (
           <ToolbarButton
             active={currentSelection === key}
+            compact={compact}
             dataTestId={dataTestId}
             onClick={() => handleClick(key)}
             title={title}

diff --git a/packages/drawing-toolbar/src/components/line-group.jsx b/packages/drawing-toolbar/src/components/line-group.jsx
@@ -11,8 +11,12 @@ import IconDashedLine from '../icons/dashed-line-tool-icon.svg'
 import IconArrow from '../icons/arrow-tool-icon.svg'
 
 import { intlID } from '../../lang/constants'
+
+import {
+  compactSettingsGroupContainerStyles,
+  settingsGroupContainerStyles,
+} from '../constants'
 import { HEXtoRGB, RGBtoHEX } from '../utils'
-import { settingsGroupContainerStyles } from '../constants'
 
 import { IconGroupSettings } from './icon-group-settings'
 import { ToolbarButton } from './toolbar-button'
@@ -112,39 +116,77 @@ export class LineGroup extends React.Component {
   }
 
   render() {
-    const { opened, tool, handleClose, handleOpen, className } = this.props
+    const { compact, opened, tool, handleClose, handleOpen, className } =
+      this.props
     const { brushMode, size, color } = this.state
 
     return (
       <SettingsGroup
-        direction="right-start"
-        containerStyles={settingsGroupContainerStyles}
+        direction={compact ? 'top' : 'right-start'}
+        compact={compact}
+        containerStyles={
+          compact
+            ? compactSettingsGroupContainerStyles
+            : settingsGroupContainerStyles
+        }
         isOpen={opened}
         handleClose={handleClose}
-        target={this.buttonRef.current}
+        offset={compact ? 4 : undefined}
+        target={compact ? '.drawing-toolbar' : this.buttonRef.current}
         content={
-          <div className={cn(css.column, className)}>
+          <div
+            className={cn(
+              css['settings-group'],
+              {
+                [css.column]: !compact,
+                [css.compact]: compact,
+                [css.row]: compact,
+              },
+              className,
+            )}
+          >
             <IconGroupSettings
+              compact={compact}
               iconsSet={this.iconsSet}
               currentSelection={brushMode}
+              gap={compact ? 12 : 4}
               handleClick={(value) => this.handleClick('brushMode', value)}
             />
-            <Divider horizontal />
-            <LineSettings
-              currentSize={size}
-              dashed={brushMode === lineToolModeEnum.DASHED_LINE}
-              handleClick={(value) => this.handleClick('size', value)}
-            />
-            <Divider horizontal />
-            <ColorSettings
-              currentColor={color}
-              handleClick={(value) => this.handleClick('color', value)}
-            />
+
+            {compact && (
+              <>
+                <Divider
+                  className={cn(compact && css['divider-with-margin'])}
+                />
+                <ColorSettings
+                  compact={compact}
+                  currentColor={color}
+                  handleClick={(value) => this.handleClick('color', value)}
+                />
+              </>
+            )}
+
+            {!compact && (
+              <>
+                <Divider horizontal />
+                <LineSettings
+                  currentSize={size}
+                  dashed={brushMode === lineToolModeEnum.DASHED_LINE}
+                  handleClick={(value) => this.handleClick('size', value)}
+                />
+                <Divider horizontal />
+                <ColorSettings
+                  currentColor={color}
+                  handleClick={(value) => this.handleClick('color', value)}
+                />
+              </>
+            )}
           </div>
         }
       >
         <ToolbarButton
           active={tool === toolEnum.LINE}
+          compact={compact}
           dataTestId="board-panel-group-line-button"
           group
           groupColor={color}