Ulms 2812 whiteboard rebrand

packages/drawing-toolbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulms/ui-drawing-toolbar",
-  "version": "2.3.6",
+  "version": "2.4.0-dev.0",
   "description": "",
   "keywords": [
     "lerna"
@@ -27,12 +27,16 @@
   "dependencies": {
     "classnames-es": "^2.2.6",
     "prop-types": "^15.8.1",
-    "react-floater": "^0.6.5"
+    "react-floater": "^0.9.3"
   },
   "peerDependencies": {
-    "@ulms/ui-drawing": "^3.3.x",
+    "@ulms/ui-drawing": "^3.3.x || 3.4.0-dev.0",
     "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"
   }
 }

packages/drawing-toolbar/rollup.config.js

@@ -4,14 +4,14 @@ const cssnext = require('postcss-cssnext')
 const cssurl = require('postcss-url')
 const Debug = require('debug')
 const env = require('postcss-preset-env')
-const svgr = require('@svgr/rollup')
 import strip from '@rollup/plugin-strip';
 import terser from '@rollup/plugin-terser';
 import json from '@rollup/plugin-json';
 import { nodeResolve as npm } from '@rollup/plugin-node-resolve';
 import { babel } from '@rollup/plugin-babel';
 import commonjs from '@rollup/plugin-commonjs';
 import postcss from 'rollup-plugin-postcss';
+import svgr from '@svgr/rollup';
 import cssnano from 'cssnano';
 
 const { name, peerDependencies } = require('./package.json')
@@ -40,7 +40,7 @@ const processAsCssModule = function(){
 
 const rollupPlugins = [ // order matters
   json(),
-  svgr(),
+  svgr({ dimensions: false }),
   postcss({
     extract: true,
     plugins: [

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}

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;
 }

packages/drawing-toolbar/src/components/font-settings.jsx

@@ -1,10 +1,20 @@
 import React from 'react'
 
+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 { ToolbarButton } from './toolbar-button'
 
 import css from './settings.module.css'
 
 const fontSizes = [32, 48, 64]
+const fontIcons = {
+  [fontSizes[0]]: <IconText32 />,
+  [fontSizes[1]]: <IconText48 />,
+  [fontSizes[2]]: <IconText64 />,
+}
+
 const testAttributes = ['board-panel-popup-font-size-s', 'board-panel-popup-font-size-m', 'board-panel-popup-font-size-l']
 
 export const FontItem = ({
@@ -20,12 +30,7 @@ export const FontItem = ({
     innerRef={innerRef}
     onClick={() => handleClick(fontSize)}
   >
-    <div
-      className={css.fontItem}
-      style={{ fontSize: `${fontSize / 2}px` }}
-    >
-      a
-    </div>
+    {fontIcons[fontSize]}
   </ToolbarButton>
 )
 

packages/drawing-toolbar/src/components/line-group.jsx

@@ -123,7 +123,7 @@ export class LineGroup extends React.Component {
     return (
       <SettingsGroup
         direction='right-start'
-        containerStyles={{ marginTop: '-12px', marginLeft: '4px' }}
+        containerStyles={{ marginTop: '-16px', marginLeft: '-2px' }}
         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)}

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
@@ -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}

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,

packages/drawing-toolbar/src/components/settings-group.module.css

@@ -1,6 +1,6 @@
 .floater {
   user-select: none;
-  padding: 8px;
+  padding: 0;
 }
 
 .anchor {

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;
@@ -45,19 +49,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;
+  }
+}

packages/drawing-toolbar/src/components/shape-group.jsx

@@ -160,7 +160,7 @@ export class ShapeGroup extends React.Component {
     return (
       <SettingsGroup
         direction='right-start'
-        containerStyles={{ marginTop: '-12px', marginLeft: '4px' }}
+        containerStyles={{ marginTop: '-16px', marginLeft: '-2px' }}
         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}

packages/drawing-toolbar/src/components/text-group.jsx

@@ -70,7 +70,7 @@ export class TextGroup extends React.Component {
     return (
       <SettingsGroup
         direction='right-start'
-        containerStyles={{ marginTop: '-12px', marginLeft: '4px' }}
+        containerStyles={{ marginTop: '-16px', marginLeft: '-2px' }}
         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}
         >

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>
 )

packages/drawing-toolbar/src/components/toolbar-button.module.css

@@ -1,18 +1,18 @@
-.wrapper {
-  padding: 5px 4px;
-}
-
 .button {
-  width: 36px;
-  height: 36px;
-  border-radius: 5px;
-
+  border-radius: 8px;
+  padding: 8px;
   outline: none;
 
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  position: relative;
+}
+
+.button svg {
+  width: 28px;
+  height: 28px;
 }
 
 .button.button_fillWidth {
@@ -32,22 +32,37 @@
   background-color: #E9E9E999;
 }
 
-.group {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
+.colorIndicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border-width: 1px;
+  border-style: solid;
 }
 
-.group::after {
-  width: 0;
-  height: 0;
+.colorIndicatorWrapper {
   position: absolute;
-  content: "";
-  border: 4px solid transparent;
-  border-right-color: #4A4A4A;
-  border-bottom-color:#4A4A4A;
-  bottom: 0;
-  right: 0;
-  border-bottom-right-radius: 2px;
+  content: '';
+  right: 2px;
+  bottom: 2px;
+  padding: 2px;
+  border-radius: 50%;
+  background-color: #FFFFFF;
+  z-index: 0;
+}
+
+@media screen and (max-width: 1899px) {
+  .button {
+    padding: 6px;
+  }
+
+  .button svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  .colorIndicator {
+    width: 6px;
+    height: 6px;
+  }
 }