From 1c084c6b8fa21b3ca150595d87f3e43b304f4e41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ram=C3=B3n=20Souza?= Date: Tue, 2 Nov 2021 20:05:49 +0000 Subject: [PATCH] convert whiteboard-toolbar component --- .../whiteboard-toolbar/component.jsx | 32 +++----- .../whiteboard/whiteboard-toolbar/styles.js | 82 +++++++++++++++++++ .../toolbar-menu-item/component.jsx | 3 +- .../toolbar-submenu-item/component.jsx | 4 +- .../toolbar-submenu-item/styles.js | 13 +-- .../stylesheets/styled-components/general.js | 2 + 6 files changed, 102 insertions(+), 34 deletions(-) create mode 100644 bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/styles.js diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/component.jsx index 6a849d750e..8c9f879001 100755 --- 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} /> ) : ( {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 ( -

Aa -

+ ); } @@ -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 ( - + - + ); } @@ -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 ( - + { this.colorListIconColor = ref; }} @@ -754,7 +748,7 @@ class WhiteboardToolbar extends Component { fill="freeze" /> - + ); } @@ -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 ( - - {multiUser && {multiUserSize}} + + {multiUser && {multiUserSize}} ); @@ -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 ( -
+
{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}
-
+ ); } } diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/styles.js b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/styles.js new file mode 100644 index 0000000000..0e93f8107b --- /dev/null +++ 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, +}; 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 63d3fd8f79..d371b0eab3 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 @@ -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} > 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; diff --git a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/general.js b/bigbluebutton-html5/imports/ui/stylesheets/styled-components/general.js index ca3019b68c..e915fc569a 100644 --- 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, };