From 91de33550d2bf38175e1ebe4e805d463d53baf93 Mon Sep 17 00:00:00 2001 From: Horatiu Muresan <39557534+horymury@users.noreply.github.com> Date: Thu, 10 Aug 2023 16:30:14 +0300 Subject: [PATCH] feat(toolbar-buttons) Add optional background color (#13691) --- config.js | 2 +- react/features/base/config/configType.ts | 2 +- .../base/toolbox/components/AbstractButton.tsx | 12 ++++++++++++ .../base/toolbox/components/ToolboxItem.web.tsx | 15 +++++++++++++-- .../base/ui/components/web/ContextMenuItem.tsx | 9 ++++++++- .../toolbox/components/web/CustomOptionButton.tsx | 2 ++ react/features/toolbox/components/web/Toolbox.tsx | 2 +- react/features/toolbox/functions.web.ts | 4 +++- 8 files changed, 41 insertions(+), 7 deletions(-) diff --git a/config.js b/config.js index 6e47095b85..5ddf66c98b 100644 --- a/config.js +++ b/config.js @@ -871,7 +871,7 @@ var config = { // customParticipantMenuButtons: [], // An array with custom option buttons for the toolbar - // type: Array<{ icon: string; id: string; text: string; }> + // type: Array<{ icon: string; id: string; text: string; backgroundColor?: string; }> // customToolbarButtons: [], // Stats diff --git a/react/features/base/config/configType.ts b/react/features/base/config/configType.ts index 67170ae917..b3a6f18d04 100644 --- a/react/features/base/config/configType.ts +++ b/react/features/base/config/configType.ts @@ -270,7 +270,7 @@ export interface IConfig { }; corsAvatarURLs?: Array; customParticipantMenuButtons?: Array<{ icon: string; id: string; text: string; }>; - customToolbarButtons?: Array<{ icon: string; id: string; text: string; }>; + customToolbarButtons?: Array<{ backgroundColor?: string; icon: string; id: string; text: string; }>; deeplinking?: IDeeplinkingConfig; defaultLanguage?: string; defaultLocalDisplayName?: string; diff --git a/react/features/base/toolbox/components/AbstractButton.tsx b/react/features/base/toolbox/components/AbstractButton.tsx index 8f86a1cb80..7472163bc5 100644 --- a/react/features/base/toolbox/components/AbstractButton.tsx +++ b/react/features/base/toolbox/components/AbstractButton.tsx @@ -16,6 +16,11 @@ export interface IProps extends WithTranslation { */ afterClick?: Function; + /** + * The button's background color. + */ + backgroundColor?: string; + /** * The button's key. */ @@ -108,6 +113,13 @@ export default class AbstractButton

extends Component

{ */ _renderItem() { const { + backgroundColor, contextMenu, disabled, elementAfter, @@ -90,6 +96,7 @@ export default class ToolboxItem extends AbstractToolboxItem { return ( { * @returns {ReactElement} */ _renderIcon() { - const { customClass, disabled, icon, showLabel, toggled } = this.props; + const { backgroundColor, customClass, disabled, icon, showLabel, toggled } = this.props; const iconComponent = (); const elementType = showLabel ? 'span' : 'div'; const className = `${showLabel ? 'overflow-menu-item-icon' : 'toolbox-icon'} ${ toggled ? 'toggled' : ''} ${disabled ? 'disabled' : ''} ${customClass ?? ''}`; + const style = backgroundColor && !showLabel ? { backgroundColor } : {}; - return React.createElement(elementType, { className }, iconComponent); + return React.createElement(elementType, { + className, + style + }, iconComponent); } } diff --git a/react/features/base/ui/components/web/ContextMenuItem.tsx b/react/features/base/ui/components/web/ContextMenuItem.tsx index 1ecc676157..51b17e92be 100644 --- a/react/features/base/ui/components/web/ContextMenuItem.tsx +++ b/react/features/base/ui/components/web/ContextMenuItem.tsx @@ -16,6 +16,11 @@ export interface IProps { */ accessibilityLabel: string; + /** + * The context menu item background color. + */ + backgroundColor?: string; + /** * Component children. */ @@ -163,6 +168,7 @@ const useStyles = makeStyles()(theme => { const ContextMenuItem = ({ accessibilityLabel, + backgroundColor, children, className, controls, @@ -181,7 +187,7 @@ const ContextMenuItem = ({ textClassName }: IProps) => { const { classes: styles, cx } = useStyles(); const _overflowDrawer: boolean = useSelector(showOverflowDrawer); - + const style = backgroundColor ? { backgroundColor } : {}; const onKeyPressHandler = useCallback(e => { // only trigger the fallback behavior (onClick) if we dont have any explicit keyboard event handler if (onClick && !onKeyPress && !onKeyDown && (e.key === 'Enter' || e.key === ' ')) { @@ -223,6 +229,7 @@ const ContextMenuItem = ({ onKeyDown = { disabled ? undefined : onKeyDown } onKeyPress = { disabled ? undefined : onKeyPressHandler } role = { onClick ? role : undefined } + style = { style } tabIndex = { onClick ? tabIndex : undefined }> {customIcon ? customIcon : icon && { iconSrc = this.props.icon; id = this.props.id; text = this.props.text; + backgroundColor = this.props.backgroundColor; accessibilityLabel = this.text; diff --git a/react/features/toolbox/components/web/Toolbox.tsx b/react/features/toolbox/components/web/Toolbox.tsx index 3c0ec26181..3ba1723d2e 100644 --- a/react/features/toolbox/components/web/Toolbox.tsx +++ b/react/features/toolbox/components/web/Toolbox.tsx @@ -63,7 +63,7 @@ interface IProps extends WithTranslation { /** * Custom Toolbar buttons. */ - _customToolbarButtons?: Array<{ icon: string; id: string; text: string; }>; + _customToolbarButtons?: Array<{ backgroundColor?: string; icon: string; id: string; text: string; }>; /** * Whether or not a dialog is displayed. diff --git a/react/features/toolbox/functions.web.ts b/react/features/toolbox/functions.web.ts index 54454cdc2c..4e65f96b6c 100644 --- a/react/features/toolbox/functions.web.ts +++ b/react/features/toolbox/functions.web.ts @@ -199,6 +199,7 @@ export function getToolbarTimeout(state: IReduxState) { * @returns {Object} The button maps mainMenuButtons and overflowMenuButtons. */ export function getAllToolboxButtons(_customToolbarButtons?: { + backgroundColor?: string; icon: string; id: string; text: string; @@ -395,10 +396,11 @@ export function getAllToolboxButtons(_customToolbarButtons?: { group: 4 }; - const customButtons = _customToolbarButtons?.reduce((prev, { icon, id, text }) => { + const customButtons = _customToolbarButtons?.reduce((prev, { backgroundColor, icon, id, text }) => { return { ...prev, [id]: { + backgroundColor, key: id, Content: CustomOptionButton, group: 4,