convert whiteboard-toolbar component

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
+      <Styled.TextThickness
-        className={styles.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'}>
+      <span data-test={multiUser ? 'multiWhiteboardTool' : 'whiteboardTool'}>
-        {multiUser && <span className={styles.multiUserTool}>{multiUserSize}</span>}
+        {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>
     );
   }
 }

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

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

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"

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;

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