Ulms 2812 whiteboard rebrand (#258)

* feat: updated create shape method and snap to grid * fix: cleanup * feat: drawing-toolbar redesign * fix: button size * fix: design review fixes * fix: design review fixes-2 * fix: QA Fixes * Minifix * fix: font icon in toolbar * feat: new Keyboard constants * fix: design review * aftermerge * fix: codereview * fix: react-floater * fix: react-floater * Prod versions * fix: css vars
foxford · Mar 13, 2024 · 90e69c2 · 90e69c2
1 parent 1403788
commit 90e69c2
Show file tree

Hide file tree

Showing 78 changed files with 7,265 additions and 1,856 deletions.
diff --git a/packages/drawing-toolbar/lang/ru.json b/packages/drawing-toolbar/lang/ru.json
@@ -2,7 +2,7 @@
   "ERASER": "Ластик (E)",
   "GRID": "Фоновая сетка (G)",
   "HAND": "Перемещение доски",
-  "HIGHLIGHTER": "Маркер (H)",
+  "HIGHLIGHTER": "Кисть (H)",
   "LIB": "Библиотека (B)",
   "DASHED_LINE": "Пунктирная линия (N)",
   "LINE": "Линия (L)",

diff --git a/packages/drawing-toolbar/package-lock.json b/packages/drawing-toolbar/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.3.6",
+  "version": "2.4.0",
   "description": "",
   "keywords": [
     "lerna"
@@ -30,9 +30,13 @@
     "react-floater": "^0.6.5"
   },
   "peerDependencies": {
-    "@ulms/ui-drawing": "^3.3.x",
+    "@ulms/ui-drawing": "^3.4.x",
     "react": "^16.14",
     "react-dom": "^16.14",
     "react-intl": "^5.20 || 5.21"
+  },
+  "devDependencies": {
+    "@rollup/plugin-url": "^8.0.2",
+    "@svgr/rollup": "^8.1.0"
   }
 }
diff --git a/packages/drawing-toolbar/rollup.config.js b/packages/drawing-toolbar/rollup.config.js
@@ -40,7 +40,7 @@ const processAsCssModule = function(){
 
 const rollupPlugins = [ // order matters
   json(),
-  svgr(),
+  svgr({ dimensions: false }), // Исправляем ошибку, когда из svg удаляется viewBox
   postcss({
     extract: true,
     plugins: [

diff --git a/packages/drawing-toolbar/src/components/color-settings.jsx b/packages/drawing-toolbar/src/components/color-settings.jsx
@@ -32,6 +32,7 @@ export const ColorItem = ({
     dataTestId={dataTestId}
     innerRef={innerRef}
     onClick={() => handleClick(color)}
+    style={{ padding: '10px' }}
   >
     <div
       className={css.colorCircle}

diff --git a/packages/drawing-toolbar/src/components/divider.module.css b/packages/drawing-toolbar/src/components/divider.module.css
@@ -1,10 +1,10 @@
 .horizontalDivider {
-  border-bottom: 1px solid #E9E9E9;
-  margin: 5px 0;
+  border-bottom: 1px solid #D5D7E1;
+  margin: 12px 0;
   width: 100%;
 }
 
 .verticalDivider {
-  border-left: 1px solid #E9E9E9;
-  margin: 5px 6px;
+  border-left: 1px solid #D5D7E1;
+  margin: 0;
 }
diff --git a/packages/drawing-toolbar/src/components/font-settings.jsx b/packages/drawing-toolbar/src/components/font-settings.jsx
@@ -1,46 +1,38 @@
 import React from 'react'
 
-import { ToolbarButton } from './toolbar-button'
+import IconText32 from '../icons/text-settings-32-icon.svg'
+import IconText48 from '../icons/text-settings-48-icon.svg'
+import IconText64 from '../icons/text-settings-64-icon.svg'
 
-import css from './settings.module.css'
+import { IconGroupSettings } from './icon-group-settings'
 
 const fontSizes = [32, 48, 64]
-const testAttributes = ['board-panel-popup-font-size-s', 'board-panel-popup-font-size-m', 'board-panel-popup-font-size-l']
+const testAttributes = {
+  [fontSizes[0]]: 'board-panel-popup-font-size-s',
+  [fontSizes[1]]: 'board-panel-popup-font-size-m',
+  [fontSizes[2]]: 'board-panel-popup-font-size-l',
+}
 
-export const FontItem = ({
-  active = false,
-  dataTestId,
-  fontSize,
-  handleClick,
-  innerRef,
-}) => (
-  <ToolbarButton
-    active={active}
-    dataTestId={dataTestId}
-    innerRef={innerRef}
-    onClick={() => handleClick(fontSize)}
-  >
-    <div
-      className={css.fontItem}
-      style={{ fontSize: `${fontSize / 2}px` }}
-    >
-      a
-    </div>
-  </ToolbarButton>
-)
+export const FontSettings = ({
+  currentFontSize, handleClick,
+}) => {
+  const fontIcons = {
+    [fontSizes[0]]: (<IconText32 />),
+    [fontSizes[1]]: (<IconText48 />),
+    [fontSizes[2]]: (<IconText64 />),
+  }
 
-export const FontSettings = ({ currentFontSize, handleClick }) => (
-  <div className={css.wrapper}>
-    <div className={css.row}>
-      {fontSizes.map((itemFontSize, index) => (
-        <FontItem
-          active={currentFontSize === itemFontSize}
-          dataTestId={testAttributes[index]}
-          fontSize={itemFontSize}
-          handleClick={handleClick}
-          key={itemFontSize}
-        />
-      ))}
-    </div>
-  </div>
-)
+  const iconsSet = fontSizes.map(size => ({
+    dataTestId: testAttributes[size],
+    key: size,
+    icon: fontIcons[size],
+  }))
+
+  return (
+    <IconGroupSettings
+      iconsSet={iconsSet}
+      currentSelection={currentFontSize}
+      handleClick={handleClick}
+    />
+  )
+}
diff --git a/packages/drawing-toolbar/src/components/line-group.jsx b/packages/drawing-toolbar/src/components/line-group.jsx
@@ -7,8 +7,8 @@ import IconDashedLine from '../icons/dashed-line-tool-icon.svg'
 import IconArrow from '../icons/arrow-tool-icon.svg'
 
 import { intlID } from '../../lang/constants'
-
 import { HEXtoRGB } from '../utils'
+import { settingsGroupContainerStyles } from '../constants'
 
 import { IconGroupSettings } from './icon-group-settings'
 import { ToolbarButton } from './toolbar-button'
@@ -123,7 +123,7 @@ export class LineGroup extends React.Component {
     return (
       <SettingsGroup
         direction='right-start'
-        containerStyles={{ marginTop: '-12px', marginLeft: '4px' }}
+        containerStyles={settingsGroupContainerStyles}
         isOpen={opened}
         handleClose={handleClose}
         target={this.buttonRef.current}
@@ -152,6 +152,7 @@ export class LineGroup extends React.Component {
           active={tool === toolEnum.LINE}
           dataTestId='board-panel-group-line-button'
           group
+          groupColor={color}
           onClick={() => handleOpen(this.getOptions())}
           innerRef={this.buttonRef}
           title={this._getTitle(brushMode)}

diff --git a/packages/drawing-toolbar/src/components/line-settings.jsx b/packages/drawing-toolbar/src/components/line-settings.jsx
@@ -18,6 +18,7 @@ const lineSizes = {
   EIGHT: 8,
 }
 
+
 export const LineSettings = ({
   currentSize, handleClick, dashed = false,
 }) => {

diff --git a/packages/drawing-toolbar/src/components/pen-group.jsx b/packages/drawing-toolbar/src/components/pen-group.jsx
@@ -130,7 +130,7 @@ export class PenGroup extends React.Component {
       handleClose,
       handleOpen,
       className,
-      containerStyles = { marginTop: '-12px', marginLeft: '4px' },
+      containerStyles = { marginTop: '-16px', marginLeft: '-2px' },
       direction = 'right-start',
       orientation = 'vertical',
     } = this.props
@@ -172,7 +172,7 @@ export class PenGroup extends React.Component {
               handleClick={value => (brushMode === penToolModeEnum.MARKER)
                 ? this.handleClick('markerColor', value)
                 : this.handleClick('penColor', value)}
-              rows={orientation === 'horizontal' ? 1 : 3}
+              rows={orientation === 'horizontal' ? 2 : 3}
             />
           </div>
         )}
@@ -181,6 +181,7 @@ export class PenGroup extends React.Component {
           active={tool === toolEnum.PEN}
           dataTestId='board-panel-group-pen-button'
           group
+          groupColor={brushMode === penToolModeEnum.MARKER ? markerColor : penColor}
           title={this._getTitle(brushMode)}
           onClick={() => handleOpen(this.getOptions())}
           innerRef={this.buttonRef}

diff --git a/packages/drawing-toolbar/src/components/settings-group.jsx b/packages/drawing-toolbar/src/components/settings-group.jsx
@@ -16,12 +16,14 @@ export const SettingsGroup = ({
       placement={direction}
       hideArrow
       styles={{
-        floater: { filter: 'none', maxWidth: 'auto' },
+        floater: {
+          filter: 'none', maxWidth: 'auto',
+        },
         container: {
-          padding: 0,
           backgroundColor: '#fff',
-          border: '1px solid #E9E9E9',
-          borderRadius: 5,
+          border: '1px solid #BABCC9',
+          borderRadius: 12,
+          padding: '16px',
           minWidth: 0,
           minHeight: 0,
           ...containerStyles,

diff --git a/packages/drawing-toolbar/src/components/settings-group.module.css b/packages/drawing-toolbar/src/components/settings-group.module.css
@@ -1,6 +1,6 @@
 .floater {
   user-select: none;
-  padding: 8px;
+  padding: 0;
 }
 
 .anchor {

diff --git a/packages/drawing-toolbar/src/components/settings.module.css b/packages/drawing-toolbar/src/components/settings.module.css
@@ -3,11 +3,15 @@
   height: 100%;
   padding: 0;
   margin: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 4px;
 }
 
 .row {
   padding: 0;
   margin: 0;
+  gap: 4px;
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
@@ -17,6 +21,7 @@
   display: grid;
   grid-template-columns: repeat(auto-fill, 36px);
   grid-gap: 0 4px;
+  max-width: 240px;
 }
 
 .horizontal .colorRow > div {
@@ -45,19 +50,19 @@
 
 .colorCircle {
   border-radius: 50%;
-  width: 16px;
-  height: 16px;
-}
-
-.fontItem {
-  width: 100%;
-  text-align: center;
-  line-height: 1;
-  margin-top: -2px;
+  width: 20px;
+  height: 20px;
 }
 
 .lineItem {
   width: 20px;
   height: 0;
   transform: rotate(-45deg);
 }
+
+@media screen and (max-width: 1899px) {
+  .colorCircle {
+    width: 16px;
+    height: 16px;
+  }
+}
diff --git a/packages/drawing-toolbar/src/components/shape-group.jsx b/packages/drawing-toolbar/src/components/shape-group.jsx
@@ -12,8 +12,8 @@ import IconSolidTriangle from '../icons/solid-triangle-tool-icon.svg'
 import IconSolidRightTriangle from '../icons/solid-right-triangle-tool-icon.svg'
 
 import { intlID } from '../../lang/constants'
-
 import { HEXtoRGB } from '../utils'
+import { settingsGroupContainerStyles } from '../constants'
 
 import { IconGroupSettings } from './icon-group-settings'
 import { ToolbarButton } from './toolbar-button'
@@ -160,7 +160,7 @@ export class ShapeGroup extends React.Component {
     return (
       <SettingsGroup
         direction='right-start'
-        containerStyles={{ marginTop: '-12px', marginLeft: '4px' }}
+        containerStyles={settingsGroupContainerStyles}
         isOpen={opened}
         handleClose={handleClose}
         target={this.buttonRef.current}
@@ -189,6 +189,7 @@ export class ShapeGroup extends React.Component {
           active={tool === toolEnum.SHAPE}
           dataTestId='board-panel-group-shape-button'
           group
+          groupColor={color}
           title={intl.formatMessage({ id: intlID.SHAPE })}
           onClick={() => handleOpen(this.getOptions())}
           innerRef={this.buttonRef}

diff --git a/packages/drawing-toolbar/src/components/text-group.jsx b/packages/drawing-toolbar/src/components/text-group.jsx
@@ -5,8 +5,8 @@ import { toolEnum, defaultToolSettings } from '@ulms/ui-drawing'
 import IconText from '../icons/text-tool-icon.svg'
 
 import { intlID } from '../../lang/constants'
-
 import { HEXtoRGB } from '../utils'
+import { settingsGroupContainerStyles } from '../constants'
 
 import { ToolbarButton } from './toolbar-button'
 import { SettingsGroup } from './settings-group'
@@ -70,7 +70,7 @@ export class TextGroup extends React.Component {
     return (
       <SettingsGroup
         direction='right-start'
-        containerStyles={{ marginTop: '-12px', marginLeft: '4px' }}
+        containerStyles={settingsGroupContainerStyles}
         isOpen={opened}
         handleClose={handleClose}
         target={this.buttonRef.current}
@@ -93,6 +93,7 @@ export class TextGroup extends React.Component {
           dataTestId='board-panel-text-button'
           title={intl.formatMessage({ id: intlID.TEXT })}
           group
+          groupColor={color}
           onClick={() => handleOpen(this.getOptions())}
           innerRef={this.buttonRef}
         >

diff --git a/packages/drawing-toolbar/src/components/toolbar-button.jsx b/packages/drawing-toolbar/src/components/toolbar-button.jsx
@@ -9,29 +9,40 @@ export const ToolbarButton = ({
   dataTestId,
   fillWidth = false,
   group = false,
+  groupColor = '#fff',
   innerRef,
   onClick,
   padded = false,
   title = '',
+  style = {},
 }) => (
-  <div className={css.wrapper}>
-    {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
-    <div
-      ref={innerRef}
-      className={cn(
-        css.button,
-        fillWidth && css.button_fillWidth,
-        active && css.button_active,
-        padded && css.button_padded,
-        group && css.group,
-      )}
-      data-testid={dataTestId}
-      onClick={onClick}
-      role='button'
-      tabIndex='0'
-      title={title}
-    >
-      {children}
-    </div>
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+  <div
+    ref={innerRef}
+    className={cn(
+      css.button,
+      fillWidth && css.button_fillWidth,
+      active && css.button_active,
+      padded && css.button_padded,
+    )}
+    data-testid={dataTestId}
+    onClick={onClick}
+    role='button'
+    tabIndex='0'
+    title={title}
+    style={style}
+  >
+    {group && (
+      <div className={css.colorIndicatorWrapper}>
+        <div
+          className={css.colorIndicator}
+          style={{
+            backgroundColor: groupColor,
+            borderColor: groupColor === '#FFFFFF' ? 'rgba(37, 38, 44, 0.55)' : groupColor,
+          }}
+        />
+      </div>
+    )}
+    {children}
   </div>
 )