convert toolbar-menu-item component

bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/toolbar-menu-item/component.jsx

@@ -1,9 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Button from '/imports/ui/components/button/component';
 import _ from 'lodash';
-import cx from 'classnames';
-import { styles } from '../styles';
+import Styled from './styles';
 
 export default class ToolbarMenuItem extends Component {
   constructor() {
@@ -73,7 +71,7 @@ export default class ToolbarMenuItem extends Component {
       icon,
       customIcon,
       onBlur,
-      className,
+      toolbarActive,
       children,
       showCornerTriangle,
       expanded,
@@ -81,11 +79,12 @@ export default class ToolbarMenuItem extends Component {
     } = this.props;
 
     return (
-      <div
-        className={cx(styles.buttonWrapper, !showCornerTriangle || styles.cornerTriangle)}
+      <Styled.ButtonWrapper
+        showCornerTriangle={showCornerTriangle}
         hidden={disabled}
       >
-        <Button
+        <Styled.ToolbarButton
+          state={toolbarActive ? 'active' : 'inactive'}
           aria-expanded={expanded}
           aria-haspopup={haspopup}
           hideLabel
@@ -100,12 +99,11 @@ export default class ToolbarMenuItem extends Component {
           onKeyPress={this.handleOnMouseDown}
           onKeyUp={this.handleOnMouseUp}
           onBlur={onBlur}
-          className={className}
           setRef={this.setRef}
           disabled={disabled}
         />
         {children}
-      </div>
+      </Styled.ButtonWrapper>
     );
   }
 }
@@ -126,7 +124,7 @@ ToolbarMenuItem.propTypes = {
   icon: PropTypes.string,
   customIcon: PropTypes.node,
   label: PropTypes.string.isRequired,
-  className: PropTypes.string.isRequired,
+  toolbarActive: PropTypes.bool,
   disabled: PropTypes.bool,
   showCornerTriangle: PropTypes.bool,
 };
@@ -139,4 +137,5 @@ ToolbarMenuItem.defaultProps = {
   children: null,
   disabled: false,
   showCornerTriangle: false,
+  toolbarActive: false,
 };

bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/toolbar-menu-item/styles.js

@@ -0,0 +1,136 @@
+import styled from 'styled-components';
+
+import {
+  toolbarButtonWidth,
+  toolbarButtonHeight,
+  toolbarItemOutlineOffset,
+  toolbarButtonBorder,
+  toolbarButtonBorderRadius,
+  toolbarItemTrianglePadding,
+} from '/imports/ui/stylesheets/styled-components/general';
+import {
+  toolbarButtonBorderColor,
+  toolbarListColor,
+  toolbarButtonColor,
+  toolbarButtonBg,
+  toolbarListBg,
+} from '/imports/ui/stylesheets/styled-components/palette';
+import { toolbarButtonFontSize } from '/imports/ui/stylesheets/styled-components/typography';
+import Button from '/imports/ui/components/button/component';
+
+const ButtonWrapper = styled.div`
+  width: ${toolbarButtonWidth};
+  min-width: ${toolbarButtonWidth};
+  height: ${toolbarButtonHeight};
+  min-height: ${toolbarButtonHeight};
+  position: relative;
+
+  & > button {
+    outline-offset: ${toolbarItemOutlineOffset};
+    border-bottom: ${toolbarButtonBorder} solid ${toolbarButtonBorderColor};
+  }
+
+  &:first-child > button {
+    border-top-left-radius: ${toolbarButtonBorderRadius};
+    border-top-right-radius: ${toolbarButtonBorderRadius};
+
+    &.toolbarActive {
+      border-top-left-radius: 0;
+      border-top-right-radius: ${toolbarButtonBorderRadius};
+
+      [dir="rtl"] & {
+        border-top-left-radius: ${toolbarButtonBorderRadius};
+        border-top-right-radius: 0;
+      }
+    }
+  }
+
+  &:last-child > button {
+    border-bottom: 0;
+    border-bottom-left-radius: ${toolbarButtonBorderRadius};
+    border-bottom-right-radius: ${toolbarButtonBorderRadius};
+
+    &.toolbarActive {
+      border-bottom-left-radius: 0;
+      border-top-right-radius: ${toolbarButtonBorderRadius};
+
+      [dir="rtl"] & {
+        border-bottom-left-radius: ${toolbarButtonBorderRadius};
+        border-top-right-radius: 0;
+      }
+    }
+  }
+
+  ${({ showCornerTriangle }) => showCornerTriangle && `
+    &::before {
+      content: '';
+      position: absolute;
+      border-color: transparent;
+      border-style: solid;
+      z-index: 2;
+      border-radius: 0;
+      border-width: 0.35em;
+      bottom: ${toolbarItemTrianglePadding};
+      left: ${toolbarItemTrianglePadding};
+      border-left-color: ${toolbarListColor};
+      border-bottom-color: ${toolbarListColor};
+
+      [dir="rtl"] & {
+        left: auto;
+        right: ${toolbarItemTrianglePadding};
+
+        border-left-color: transparent;
+        border-right-color: ${toolbarListColor};
+      }
+    }
+  `}
+`;
+
+const ToolbarButton = styled(Button)`
+  padding: 0;
+  border: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center !important;
+  justify-content: center !important;
+  position: relative;
+  border-radius: 0;
+  box-shadow: none !important;
+  z-index: 1;
+  font-size: ${toolbarButtonFontSize};
+  color: ${toolbarButtonColor};
+  background-color: ${toolbarButtonBg};
+  border-color: ${toolbarButtonBorderColor};
+
+  &:focus,
+  &:hover {
+    border: 0;
+  }
+
+  i {
+    color: ${toolbarButtonColor};
+  }
+
+  ${({ state }) => state === 'active' && `
+    background-color: ${toolbarListBg};
+
+    & > i {
+      color: ${toolbarListColor};
+    }
+
+    border-top-left-radius: 0;
+    border-top-right-radius: ${toolbarButtonBorderRadius};
+
+    [dir="rtl"] & {
+      border-top-left-radius: ${toolbarButtonBorderRadius};
+      border-top-right-radius: 0;
+    }
+  `}
+`;
+
+export default {
+  ButtonWrapper,
+  ToolbarButton,
+};

bigbluebutton-html5/imports/ui/stylesheets/styled-components/general.js

@@ -31,6 +31,13 @@ const talkerMaxWidth = '10rem';
 const talkerMarginSm = '.5rem';
 const spokeOpacity = '.5';
 
+const toolbarButtonWidth = '3rem';
+const toolbarButtonHeight = '3rem';
+const toolbarItemOutlineOffset = '-.19rem';
+const toolbarButtonBorder = '1px';
+const toolbarButtonBorderRadius = '5px';
+const toolbarItemTrianglePadding = '2px';
+
 export {
   borderSizeSmall,
   borderSize,
@@ -62,4 +69,10 @@ export {
   talkerMarginSm,
   spokeOpacity,
   talkerPaddingXl,
+  toolbarButtonWidth,
+  toolbarButtonHeight,
+  toolbarItemOutlineOffset,
+  toolbarButtonBorder,
+  toolbarButtonBorderRadius,
+  toolbarItemTrianglePadding,
 };

bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js

@@ -30,6 +30,7 @@ const itemFocusBorder = colorBlueLighter;
 
 const btnDefaultColor = colorGray;
 const btnPrimaryBorder = colorPrimary;
+const btnDefaultBg = colorWhite;
 
 const toolbarButtonColor = btnDefaultColor;
 const userThumbnailBorder = colorGrayLight;
@@ -43,6 +44,11 @@ const colorHeading = colorGrayDark;
 const palettePlaceholderText = '#787675';
 const pollAnnotationGray = '#333333';
 
+const toolbarButtonBorderColor = colorGrayLighter;
+const toolbarListColor = colorGray;
+const toolbarButtonBg = btnDefaultBg;
+const toolbarListBg = '#DDD';
+
 export {
   colorWhite,
   colorOffWhite,
@@ -79,4 +85,8 @@ export {
   colorHeading,
   palettePlaceholderText,
   pollAnnotationGray,
+  toolbarButtonBorderColor,
+  toolbarListColor,
+  toolbarButtonBg,
+  toolbarListBg,
 };

bigbluebutton-html5/imports/ui/stylesheets/styled-components/typography.js

@@ -11,6 +11,7 @@ const fontSizeMD = '0.95rem';
 const headingsFontWeight = '500';
 const btnFontWeight = '600';
 const talkerFontWeight = '400';
+const toolbarButtonFontSize = '1.75rem';
 
 export {
   lineHeightComputed,
@@ -25,4 +26,5 @@ export {
   headingsFontWeight,
   btnFontWeight,
   talkerFontWeight,
+  toolbarButtonFontSize,
 };