Merge pull request #3014 from saghul/toolbox-toggled-labels

[RN] Toolbox toggled item labels

lang/main.json

@@ -74,6 +74,8 @@
     "toolbar": {
         "addPeople": "Add people to your call",
         "audioonly": "Enable / Disable audio only mode (saves bandwidth)",
+        "audioOnlyOn": "Enable audio only mode (saves bandwidth)",
+        "audioOnlyOff": "Disable audio only mode",
         "audioRoute": "Select the audio route",
         "callQuality": "Manage call quality",
         "enterFullScreen": "View full screen",
@@ -278,6 +280,7 @@
         "reservationError": "Reservation system error",
         "reservationErrorMsg": "Error code: __code__, message: __msg__",
         "password": "Enter password",
+        "unlockRoom": "Unlock room",
         "userPassword": "user password",
         "token": "token",
         "tokenAuthFailedTitle": "Authentication failed",

react/features/base/toolbox/components/AbstractButton.js

@@ -74,6 +74,11 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
      */
     label: string;
 
+    /**
+     * The label for this button, when toggled.
+     */
+    toggledLabel: string;
+
     /**
      * The name of the icon of this button, when toggled.
      *
@@ -125,6 +130,19 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
             || this.iconName;
     }
 
+    /**
+     * Gets the current label, taking the toggled state into account. If no
+     * toggled label is provided, the regular label will also be used in the
+     * toggled state.
+     *
+     * @private
+     * @returns {string}
+     */
+    _getLabel() {
+        return (this._isToggled() ? this.toggledLabel : this.label)
+            || this.label;
+    }
+
     /**
      * Gets the current styles, taking the toggled state into account. If no
      * toggled styles are provided, the regular styles will also be used in the
@@ -188,7 +206,7 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
             ...this.props,
             accessibilityLabel: this.accessibilityLabel,
             iconName: this._getIconName(),
-            label: this.label,
+            label: this._getLabel(),
             styles: this._getStyles(),
             tooltip: this.tooltip
         };

react/features/room-lock/components/RoomLockButton.js

@@ -34,8 +34,9 @@ type Props = AbstractButtonProps & {
 class RoomLockButton extends AbstractButton<Props, *> {
     accessibilityLabel = 'Room lock';
     iconName = 'security';
-    label = 'toolbar.lock';
+    label = 'dialog.lockRoom';
     toggledIconName = 'security-locked';
+    toggledLabel = 'dialog.unlockRoom';
 
     /**
      * Handles clicking / pressing the button.

react/features/toolbox/components/native/AudioOnlyButton.js

@@ -29,8 +29,9 @@ type Props = AbstractButtonProps & {
 class AudioOnlyButton extends AbstractButton<Props, *> {
     accessibilityLabel = 'Audio only mode';
     iconName = 'visibility';
-    label = 'toolbar.audioonly';
+    label = 'toolbar.audioOnlyOn';
     toggledIconName = 'visibility-off';
+    toggledLabel = 'toolbar.audioOnlyOff';
 
     /**
      * Handles clicking / pressing the button.