Browse Source

fix(live-streaming): add beta tag to toolbar button (#3263)

master
virtuacoplenny 7 years ago
parent
commit
b9f28a1beb
No account linked to committer's email address

+ 12
- 0
react/features/base/toolbox/components/AbstractButton.js View File

140
         // To be implemented by subclass.
140
         // To be implemented by subclass.
141
     }
141
     }
142
 
142
 
143
+    /**
144
+     * Helper function to be implemented by subclasses, which may return a new
145
+     * React Element to be appended at the end of the button.
146
+     *
147
+     * @protected
148
+     * @returns {ReactElement|null}
149
+     */
150
+    _getElementAfter() {
151
+        return null;
152
+    }
153
+
143
     /**
154
     /**
144
      * Gets the current icon name, taking the toggled state into account. If no
155
      * Gets the current icon name, taking the toggled state into account. If no
145
      * toggled icon is provided, the regular icon will also be used in the
156
      * toggled icon is provided, the regular icon will also be used in the
243
         const props = {
254
         const props = {
244
             ...this.props,
255
             ...this.props,
245
             accessibilityLabel: this.accessibilityLabel,
256
             accessibilityLabel: this.accessibilityLabel,
257
+            elementAfter: this._getElementAfter(),
246
             iconName: this._getIconName(),
258
             iconName: this._getIconName(),
247
             label: this._getLabel(),
259
             label: this._getLabel(),
248
             styles: this._getStyles(),
260
             styles: this._getStyles(),

+ 5
- 0
react/features/base/toolbox/components/AbstractToolboxItem.js View File

41
      */
41
      */
42
     disabled: boolean,
42
     disabled: boolean,
43
 
43
 
44
+    /**
45
+     * A React Element to display at the end of {@code ToolboxItem}.
46
+     */
47
+    elementAfter?: React$Node,
48
+
44
     /**
49
     /**
45
      * The name of the icon of this {@code ToolboxItem}.
50
      * The name of the icon of this {@code ToolboxItem}.
46
      */
51
      */

+ 2
- 0
react/features/base/toolbox/components/ToolboxItem.web.js View File

22
     _renderItem() {
22
     _renderItem() {
23
         const {
23
         const {
24
             disabled,
24
             disabled,
25
+            elementAfter,
25
             onClick,
26
             onClick,
26
             showLabel,
27
             showLabel,
27
             tooltipPosition
28
             tooltipPosition
41
                 { showLabel && <span>
42
                 { showLabel && <span>
42
                     { this.label }
43
                     { this.label }
43
                 </span> }
44
                 </span> }
45
+                { elementAfter }
44
             </Fragment>
46
             </Fragment>
45
         );
47
         );
46
 
48
 

+ 17
- 0
react/features/recording/components/LiveStream/LiveStreamButton.web.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
+import React from 'react';
3
 import { connect } from 'react-redux';
4
 import { connect } from 'react-redux';
4
 
5
 
5
 import { translate } from '../../../base/i18n';
6
 import { translate } from '../../../base/i18n';
56
         this.tooltip = newProps._liveStreamDisabledTooltipKey;
57
         this.tooltip = newProps._liveStreamDisabledTooltipKey;
57
     }
58
     }
58
 
59
 
60
+    /**
61
+     * Helper function to be implemented by subclasses, which returns a React
62
+     * Element to display (a beta tag) at the end of the button.
63
+     *
64
+     * @override
65
+     * @protected
66
+     * @returns {boolean}
67
+     */
68
+    _getElementAfter() {
69
+        return (
70
+            <span className = 'beta-tag'>
71
+                { this.props.t('recording.beta') }
72
+            </span>
73
+        );
74
+    }
75
+
59
     /**
76
     /**
60
      * Helper function to be implemented by subclasses, which must return a
77
      * Helper function to be implemented by subclasses, which must return a
61
      * boolean value indicating if this button is disabled or not.
78
      * boolean value indicating if this button is disabled or not.

Loading…
Cancel
Save