convert whiteboard-toolbar component

2021-11-02 20:05:49 +00:00 · 2021-11-02 20:05:49 +00:00 · 1c084c6b8f
commit 1c084c6b8f
parent e7b282a127
6 changed files with 102 additions and 34 deletions
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/component.jsx
@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
 import { HEXToINTColor, INTToHEXColor } from '/imports/utils/hexInt';
 import { defineMessages, injectIntl } from 'react-intl';
 import KEY_CODES from '/imports/utils/keyCodes';
 import injectWbResizeEvent from '/imports/ui/components/presentation/resize-wrapper/component';
 import { styles } from './styles.scss';
+import Styled from './styles';
 import ToolbarMenuItem from './toolbar-menu-item/component';
 import ToolbarSubmenu from './toolbar-submenu/component';

@ -505,7 +505,6 @@ class WhiteboardToolbar extends Component {
          icon="hand"
          label={intl.formatMessage(intlMessages.toolbarItemPan)}
          onItemClick={() => { }}
-          className={styles.toolbarButton}
        />
      ) : (
        <ToolbarMenuItem
@ -517,7 +516,6 @@ class WhiteboardToolbar extends Component {
          onItemClick={this.displaySubMenu}
          objectToReturn="annotationList"
          onBlur={this.closeSubMenu}
-          className={cx(styles.toolbarButton, currentSubmenuOpen === 'annotationList' ? styles.toolbarActive : null)}
          showCornerTriangle
        >
          {currentSubmenuOpen === 'annotationList' && annotations.length > 1
@ -552,7 +550,6 @@ class WhiteboardToolbar extends Component {
        onItemClick={this.displaySubMenu}
        objectToReturn="fontSizeList"
        onBlur={this.closeSubMenu}
-        className={cx(styles.toolbarButton, currentSubmenuOpen === 'fontSizeList' ? styles.toolbarActive : null)}
        showCornerTriangle
      >
        {currentSubmenuOpen === 'fontSizeList'
@ -577,8 +574,7 @@ class WhiteboardToolbar extends Component {
  renderFontItemIcon() {
    const { fontSizeSelected, colorSelected } = this.state;
    return (
-      <p
-        className={styles.textThickness}
+      <Styled.TextThickness
        style={{
          fontSize: fontSizeSelected.value <= 32 ? fontSizeSelected.value : 32,
          color: colorSelected.value,
@ -587,7 +583,7 @@ class WhiteboardToolbar extends Component {
        }}
      >
        Aa
-      </p>
+      </Styled.TextThickness>
    );
  }

@ -616,7 +612,6 @@ class WhiteboardToolbar extends Component {
        onItemClick={this.displaySubMenu}
        objectToReturn="thicknessList"
        onBlur={this.closeSubMenu}
-        className={cx(styles.toolbarButton, currentSubmenuOpen === 'thicknessList' ? styles.toolbarActive : null)}
        customIcon={this.renderThicknessItemIcon()}
        showCornerTriangle
      >
@ -648,7 +643,7 @@ class WhiteboardToolbar extends Component {
    } = this.state;

    return (
-      <svg className={styles.customSvgIcon} shapeRendering="geometricPrecision">
+      <Styled.CustomSvgIcon shapeRendering="geometricPrecision">
        <circle
          shapeRendering="geometricPrecision"
          cx="50%"
@ -681,7 +676,7 @@ class WhiteboardToolbar extends Component {
            fill="freeze"
          />
        </circle>
-      </svg>
+      </Styled.CustomSvgIcon>
    );
  }

@ -710,7 +705,6 @@ class WhiteboardToolbar extends Component {
        onItemClick={this.displaySubMenu}
        objectToReturn="colorList"
        onBlur={this.closeSubMenu}
-        className={cx(styles.toolbarButton, currentSubmenuOpen === 'colorList' ? styles.toolbarActive : null)}
        customIcon={this.renderColorItemIcon()}
        showCornerTriangle
      >
@ -740,7 +734,7 @@ class WhiteboardToolbar extends Component {
    } = this.state;

    return (
-      <svg className={styles.customSvgIcon}>
+      <Styled.CustomSvgIcon>
        <rect x="25%" y="25%" width="50%" height="50%" stroke="black" strokeWidth="1" fill={colorSelected.value}>
          <animate
            ref={(ref) => { this.colorListIconColor = ref; }}
@ -754,7 +748,7 @@ class WhiteboardToolbar extends Component {
            fill="freeze"
          />
        </rect>
-      </svg>
+      </Styled.CustomSvgIcon>
    );
  }

@ -767,7 +761,6 @@ class WhiteboardToolbar extends Component {
        label={intl.formatMessage(intlMessages.toolbarUndoAnnotation)}
        icon="undo"
        onItemClick={this.handleUndo}
-        className={styles.toolbarButton}
      />
    );
  }
@ -781,7 +774,6 @@ class WhiteboardToolbar extends Component {
        label={intl.formatMessage(intlMessages.toolbarClearAnnotations)}
        icon="delete"
        onItemClick={this.handleClearAll}
-        className={styles.toolbarButton}
      />
    );
  }
@ -795,8 +787,8 @@ class WhiteboardToolbar extends Component {
    } = this.props;

    return (
-      <span className={styles.multiUserToolItem} data-test={multiUser ? 'multiWhiteboardTool' : 'whiteboardTool'}>
-        {multiUser && <span className={styles.multiUserTool}>{multiUserSize}</span>}
+      <span data-test={multiUser ? 'multiWhiteboardTool' : 'whiteboardTool'}>
+        {multiUser && <Styled.MultiUserTool>{multiUserSize}</Styled.MultiUserTool>}
        <ToolbarMenuItem
          disabled={!isMeteorConnected}
          label={multiUser
@ -805,7 +797,6 @@ class WhiteboardToolbar extends Component {
          }
          icon={multiUser ? 'multi_whiteboard' : 'whiteboard'}
          onItemClick={this.handleSwitchWhiteboardMode}
-          className={styles.toolbarButton}
        />
      </span>
    );
@ -825,7 +816,6 @@ class WhiteboardToolbar extends Component {
        }
        icon={palmRejection ? 'palm_rejection' : 'no_palm_rejection'}
        onItemClick={this.handleSwitchPalmRejectionMode}
-        className={styles.toolbarButton}
      />
    );
  }
@ -834,7 +824,7 @@ class WhiteboardToolbar extends Component {
    const { annotationSelected } = this.state;
    const { isPresenter, intl } = this.props;
    return (
-      <div className={styles.toolbarContainer} role="region" aria-label={intl.formatMessage(intlMessages.toolbarAriaLabel)}>
+      <Styled.ToolbarContainer role="region" aria-label={intl.formatMessage(intlMessages.toolbarAriaLabel)}>
        <div className={styles.toolbarWrapper}>
          {this.renderToolItem()}
          {annotationSelected.value === 'text' ? this.renderFontItem() : this.renderThicknessItem()}
@ -844,7 +834,7 @@ class WhiteboardToolbar extends Component {
          {window.PointerEvent ? this.renderPalmRejectionItem() : null}
          {isPresenter ? this.renderMultiUserItem() : null}
        </div>
-      </div>
+      </Styled.ToolbarContainer>
    );
  }
 }
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/styles.js
@ -0,0 +1,82 @@
+import styled from 'styled-components';
+
+import {
+  toolbarListColor,
+  toolbarListBgFocus,
+  colorDanger,
+  colorWhite,
+  colorGrayDark,
+} from '/imports/ui/stylesheets/styled-components/palette';
+import {
+  toolbarButtonWidth,
+  toolbarButtonHeight,
+  lgPaddingX,
+  borderSizeLarge,
+  smPaddingX,
+  toolbarMargin,
+} from '/imports/ui/stylesheets/styled-components/general';
+import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints';
+
+const TextThickness = styled.p`
+  font-family: Arial, sans-serif;
+  font-weight: normal;
+  text-shadow: -1px 0 ${toolbarListBgFocus}, 0 1px ${toolbarListBgFocus}, 1px 0 ${toolbarListBgFocus}, 0 -1px ${toolbarListBgFocus};
+  margin: auto;
+  color: ${toolbarListColor};
+`;
+
+const CustomSvgIcon = styled.svg`
+  position: absolute;
+  width: ${toolbarButtonWidth};
+  height: ${toolbarButtonHeight};
+  left: 0;
+  top: 0;
+`;
+
+const MultiUserTool = styled.span`
+  background-color: ${colorDanger};
+  border-radius: 50%;
+  width: ${lgPaddingX};
+  height: ${lgPaddingX};
+  position: absolute;
+  z-index: 2;
+  right: 0px;
+  color: ${colorWhite};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 1px 1px ${borderSizeLarge} ${colorGrayDark};
+  font-size: ${smPaddingX};
+`;
+
+const ToolbarContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 0 ${toolbarMargin} 0 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: auto;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 3;
+
+  [dir="rtl"] & {
+    margin: 0 0 0 ${toolbarMargin};
+    right: auto;
+    left: 0;
+  }
+
+  @media ${smallOnly} {
+    transform: scale(.75);
+    transform-origin: right;
+  }
+`;
+
+export default {
+  TextThickness,
+  CustomSvgIcon,
+  MultiUserTool,
+  ToolbarContainer,
+};
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/toolbar-menu-item/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/toolbar-menu-item/component.jsx
@ -71,7 +71,6 @@ export default class ToolbarMenuItem extends Component {
      icon,
      customIcon,
      onBlur,
-      toolbarActive,
      children,
      showCornerTriangle,
      expanded,
@ -84,7 +83,7 @@ export default class ToolbarMenuItem extends Component {
        hidden={disabled}
      >
        <Styled.ToolbarButton
-          state={toolbarActive ? 'active' : 'inactive'}
+          state={expanded ? 'active' : 'inactive'}
          aria-expanded={expanded}
          aria-haspopup={haspopup}
          hideLabel
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/toolbar-submenu-item/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/toolbar-submenu-item/component.jsx
@ -50,13 +50,13 @@ export default class ToolbarSubmenuItem extends Component {
      customIcon,
      icon,
      label,
-      selected,
+      toolbarActive,
    } = this.props;

    return (
      <Styled.ButtonWrapper>
        <Styled.SubmenuButton
-          state={selected ? 'selected' : 'unselected'}
+          state={toolbarActive ? 'selected' : 'unselected'}
          hideLabel
          role="button"
          color="default"
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/toolbar-submenu-item/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/toolbar-submenu-item/styles.js
@ -11,7 +11,7 @@ import {
  toolbarButtonBorderColor,
  toolbarListColor,
  toolbarButtonColor,
-  toolbarButtonBg,
+  toolbarListBg,
  toolbarListBgFocus,
 } from '/imports/ui/stylesheets/styled-components/palette';
 import { toolbarButtonFontSize } from '/imports/ui/stylesheets/styled-components/typography';
@ -31,13 +31,7 @@ const ButtonWrapper = styled.div`

  &:first-child > button {
    border-top-left-radius: ${toolbarButtonBorderRadius};
-    border-top-right-radius: ${toolbarButtonBorderRadius};
-  }
-
-  &:last-child > button {
-    border-bottom: 0;
    border-bottom-left-radius: ${toolbarButtonBorderRadius};
-    border-bottom-right-radius: ${toolbarButtonBorderRadius};
  }
 `;

@ -56,8 +50,8 @@ const SubmenuButton = styled(Button)`
  z-index: 1;
  font-size: ${toolbarButtonFontSize};
  color: ${toolbarButtonColor};
-  background-color: ${toolbarButtonBg};
  border-color: ${toolbarButtonBorderColor};
+  background-color: ${toolbarListBg};

  &:focus,
  &:hover {
@ -65,11 +59,12 @@ const SubmenuButton = styled(Button)`
  }

  & > i {
-    color: ${toolbarButtonColor};
+    color: ${toolbarListColor};
  }

  ${({ state }) => state === 'selected' && `
    background-color: ${toolbarListColor} !important;
+    background:red;

    & > i {
      color: ${toolbarListBgFocus} !important;
--- a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/general.js
+++ b/bigbluebutton-html5/imports/ui/stylesheets/styled-components/general.js
@ -37,6 +37,7 @@ const toolbarItemOutlineOffset = '-.19rem';
 const toolbarButtonBorder = '1px';
 const toolbarButtonBorderRadius = '5px';
 const toolbarItemTrianglePadding = '2px';
+const toolbarMargin = '.8rem';

 export {
  borderSizeSmall,
@ -75,4 +76,5 @@ export {
  toolbarButtonBorder,
  toolbarButtonBorderRadius,
  toolbarItemTrianglePadding,
+  toolbarMargin,
 };