From f5e0a97c3d580c179ac5adb38a55d1e4ebaa4803 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ram=C3=B3n=20Souza?= Date: Tue, 2 Nov 2021 17:11:41 +0000 Subject: [PATCH] convert toolbar-menu-item component --- .../toolbar-menu-item/component.jsx | 19 ++- .../toolbar-menu-item/styles.js | 136 ++++++++++++++++++ .../stylesheets/styled-components/general.js | 13 ++ .../stylesheets/styled-components/palette.js | 10 ++ .../styled-components/typography.js | 2 + 5 files changed, 170 insertions(+), 10 deletions(-) create mode 100644 bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/toolbar-menu-item/styles.js diff --git 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 index b8d6f9d7d2..63d3fd8f79 100755 --- 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 @@ -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 ( - + ); } } @@ -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, }; diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/toolbar-menu-item/styles.js b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/toolbar-menu-item/styles.js new file mode 100644 index 0000000000..9bf902facf --- /dev/null +++ b/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, +}; diff --git a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/general.js b/bigbluebutton-html5/imports/ui/stylesheets/styled-components/general.js index e57037e338..ca3019b68c 100644 --- a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/general.js +++ b/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, }; diff --git a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js b/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js index 017947c9b5..f4f7a68d65 100644 --- a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js +++ b/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, }; diff --git a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/typography.js b/bigbluebutton-html5/imports/ui/stylesheets/styled-components/typography.js index 7d9945446a..53de2fc891 100644 --- a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/typography.js +++ b/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, };