From e59761baa28231c9f521018800bdd16952169bb8 Mon Sep 17 00:00:00 2001
From: Bettenbuk Zoltan <zoltan.bettenbuk@gmail.com>
Date: Thu, 28 Jun 2018 15:25:58 +0200
Subject: [PATCH] Implement ToolboxItem features: disabled, tooltip with label

---
 css/_toolbars.scss                            |  6 +++
 .../base/toolbox/components/AbstractButton.js |  2 +-
 .../toolbox/components/AbstractToolboxItem.js |  2 +-
 .../toolbox/components/ToolboxItem.web.js     | 41 +++++++++++--------
 4 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/css/_toolbars.scss b/css/_toolbars.scss
index a58700a4c..b1907d275 100644
--- a/css/_toolbars.scss
+++ b/css/_toolbars.scss
@@ -120,6 +120,12 @@
             height: 22px;
             padding: 5px 12px;
 
+            div {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+            }
+
             &:hover {
                 background: #313D52;
             }
diff --git a/react/features/base/toolbox/components/AbstractButton.js b/react/features/base/toolbox/components/AbstractButton.js
index 3e8c365e6..1bae56c1e 100644
--- a/react/features/base/toolbox/components/AbstractButton.js
+++ b/react/features/base/toolbox/components/AbstractButton.js
@@ -114,7 +114,7 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
      *
      * @abstract
      */
-    tooltip: string;
+    tooltip: ?string;
 
     /**
      * Initializes a new {@code AbstractButton} instance.
diff --git a/react/features/base/toolbox/components/AbstractToolboxItem.js b/react/features/base/toolbox/components/AbstractToolboxItem.js
index bc801d7fe..dad9371fd 100644
--- a/react/features/base/toolbox/components/AbstractToolboxItem.js
+++ b/react/features/base/toolbox/components/AbstractToolboxItem.js
@@ -75,7 +75,7 @@ export type Props = {
     /**
      * The text to display in the tooltip. Used only on web.
      */
-    tooltip: string,
+    tooltip: ?string,
 
     /**
      * From which direction the tooltip should appear, relative to the
diff --git a/react/features/base/toolbox/components/ToolboxItem.web.js b/react/features/base/toolbox/components/ToolboxItem.web.js
index bf5c48c5d..ddf6806d7 100644
--- a/react/features/base/toolbox/components/ToolboxItem.web.js
+++ b/react/features/base/toolbox/components/ToolboxItem.web.js
@@ -21,23 +21,40 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
      */
     _renderItem() {
         const {
+            disabled,
             onClick,
-            showLabel
+            showLabel,
+            tooltipPosition
         } = this.props;
+        const className = showLabel ? 'overflow-menu-item' : 'toolbox-button';
         const props = {
             'aria-label': this.accessibilityLabel,
-            className: showLabel ? 'overflow-menu-item' : 'toolbox-button',
-            onClick
+            className: className + (disabled ? ' disabled' : ''),
+            onClick: disabled ? undefined : onClick
         };
         const elementType = showLabel ? 'li' : 'div';
+        const useTooltip = this.tooltip && this.tooltip.length > 0;
         // eslint-disable-next-line no-extra-parens
-        const children = (
+        let children = (
             <Fragment>
                 { this._renderIcon() }
-                { showLabel && this.label }
+                { showLabel && <span>
+                    { this.label }
+                </span> }
             </Fragment>
         );
 
+        if (useTooltip) {
+            // eslint-disable-next-line no-extra-parens
+            children = (
+                <Tooltip
+                    content = { this.tooltip }
+                    position = { tooltipPosition }>
+                    { children }
+                </Tooltip>
+            );
+        }
+
         return React.createElement(elementType, props, children);
     }
 
@@ -48,25 +65,13 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
      * @returns {ReactElement}
      */
     _renderIcon() {
-        const { iconName, tooltipPosition, showLabel } = this.props;
+        const { iconName, showLabel } = this.props;
         const icon = <i className = { iconName } />;
         const elementType = showLabel ? 'span' : 'div';
         const className
             = showLabel ? 'overflow-menu-item-icon' : 'toolbox-icon';
         const iconWrapper
             = React.createElement(elementType, { className }, icon);
-        const tooltip = this.tooltip;
-        const useTooltip = !showLabel && tooltip && tooltip.length > 0;
-
-        if (useTooltip) {
-            return (
-                <Tooltip
-                    content = { tooltip }
-                    position = { tooltipPosition }>
-                    { iconWrapper }
-                </Tooltip>
-            );
-        }
 
         return iconWrapper;
     }