Restyles the toolbar button toggle state

conference.js

@@ -543,11 +543,11 @@ export default {
                 // if user didn't give access to mic or camera or doesn't have
                 // them at all, we disable corresponding toolbar buttons
                 if (!tracks.find((t) => t.isAudioTrack())) {
-                    APP.UI.disableMicrophoneButton();
+                    APP.UI.disableMicrophoneButton(true);
                 }
 
                 if (!tracks.find((t) => t.isVideoTrack())) {
-                    APP.UI.disableCameraButton();
+                    APP.UI.disableCameraButton(true);
                 }
 
                 this._initDeviceList();
@@ -930,7 +930,8 @@ export default {
 
                 APP.UI.addLocalStream(stream);
 
-                stream.videoType === 'camera' && APP.UI.enableCameraButton();
+                stream.videoType === 'camera'
+                && APP.UI.disableCameraButton(false);
             } else {
                 this.videoMuted = false;
                 this.isSharingScreen = false;
@@ -970,7 +971,7 @@ export default {
                 this.audioMuted = false;
             }
 
-            APP.UI.enableMicrophoneButton();
+            APP.UI.disableMicrophoneButton(false);
             APP.UI.setAudioMuted(this.getMyUserId(), this.audioMuted);
         });
     },

css/_base.scss

@@ -81,10 +81,6 @@ form {
     display: block;
 }
 
-.active {
-    background-color: #00ccff;
-}
-
 .watermark {
     display: block;
     position: absolute;

css/_toolbars.scss

@@ -42,7 +42,7 @@
     margin-left: auto;
     margin-right: auto;
     width: auto;
-    border-radius: 4px;
+    border-radius: 3px;
 
     .first {
         border-bottom-left-radius: 4px;
@@ -111,9 +111,8 @@
     cursor: default;
 }
 
-.button.glow
-{
-    text-shadow: 0px 0px 5px $toolbarToggleBackground;
+.button.toggled {
+    background: $toolbarToggleBackground !important;
 }
 
 a.button.unclickable:hover,

css/_variables.scss

@@ -30,7 +30,7 @@ $toolbarSelectBackground: rgba(0, 0, 0, .6);
 
 $toolbarBadgeBackground: #165ECC;
 $toolbarBadgeColor: #FFFFFF;
-$toolbarToggleBackground: #165ECC;
+$toolbarToggleBackground: #12499C;
 
 // Main controls
 $inputBackground: rgba(132, 132, 132, .5);

modules/UI/UI.js

@@ -820,7 +820,7 @@ UI.askForNickname = function () {
 UI.setAudioMuted = function (id, muted) {
     VideoLayout.onAudioMute(id, muted);
     if (APP.conference.isLocalId(id)) {
-        Toolbar.markAudioIconAsMuted(muted);
+        Toolbar.toggleAudioIcon(muted);
     }
 };
 
@@ -830,7 +830,7 @@ UI.setAudioMuted = function (id, muted) {
 UI.setVideoMuted = function (id, muted) {
     VideoLayout.onVideoMute(id, muted);
     if (APP.conference.isLocalId(id)) {
-        Toolbar.markVideoIconAsMuted(muted);
+        Toolbar.toggleVideoIcon(muted);
     }
 };
 
@@ -1460,30 +1460,22 @@ UI.onSharedVideoStop = function (id, attributes) {
 
 /**
  * Disables camera toolbar button.
+ *
+ * @param {boolean} disable indicates if the camera button should be disabled
+ * or enabled
  */
-UI.disableCameraButton = function () {
-    Toolbar.markVideoIconAsDisabled(true);
-};
-
-/**
- * Enables camera toolbar button.
- */
-UI.enableCameraButton = function () {
-    Toolbar.markVideoIconAsDisabled(false);
+UI.disableCameraButton = function (disable) {
+    Toolbar.disableVideoIcon(disable);
 };
 
 /**
  * Disables microphone toolbar button.
+ *
+ * @param {boolean} disable indicates if the microphone button should be
+ * disabled or enabled
  */
-UI.disableMicrophoneButton = function () {
-    Toolbar.markAudioIconAsDisabled(true);
-};
-
-/**
- * Enables microphone toolbar button.
- */
-UI.enableMicrophoneButton = function () {
-    Toolbar.markAudioIconAsDisabled(false);
+UI.disableMicrophoneButton = function (disable) {
+    Toolbar.disableAudioIcon(disable);
 };
 
 UI.showRingOverLay = function () {

modules/UI/recording/Recording.js

@@ -422,7 +422,6 @@ var Recording = {
      * @param recordingState gives us the current recording state
      */
     updateRecordingUI (recordingState) {
-        let buttonSelector = $('#toolbar_button_record');
 
         let oldState = this.currentState;
         this.currentState = recordingState;
@@ -431,8 +430,7 @@ var Recording = {
         if (recordingState === Status.ON ||
             recordingState === Status.RETRYING) {
 
-            buttonSelector.removeClass(this.baseClass);
-            buttonSelector.addClass(this.baseClass + " active");
+            this._setToolbarButtonToggled(true);
 
             this._updateStatusLabel(this.recordingOnKey, false);
         }
@@ -447,8 +445,7 @@ var Recording = {
                 && !isStartingStatus(oldState))
                 return;
 
-            buttonSelector.removeClass(this.baseClass + " active");
-            buttonSelector.addClass(this.baseClass);
+            this._setToolbarButtonToggled(false);
 
             let messageKey;
             if (isStartingStatus(oldState))
@@ -464,15 +461,14 @@ var Recording = {
         }
         else if (recordingState === Status.PENDING) {
 
-            buttonSelector.removeClass(this.baseClass + " active");
-            buttonSelector.addClass(this.baseClass);
+            this._setToolbarButtonToggled(false);
 
             this._updateStatusLabel(this.recordingPendingKey, true);
         }
         else if (recordingState === Status.ERROR
                     || recordingState === Status.FAILED) {
-            buttonSelector.removeClass(this.baseClass + " active");
-            buttonSelector.addClass(this.baseClass);
+
+            this._setToolbarButtonToggled(false);
 
             this._updateStatusLabel(this.recordingErrorKey, true);
         }
@@ -513,6 +509,16 @@ var Recording = {
 
         labelTextSelector.attr("data-i18n", textKey);
         labelTextSelector.text(APP.translation.translateString(textKey));
+    },
+
+    /**
+     * Sets the toggled state of the recording toolbar button.
+     *
+     * @param {boolean} isToggled indicates if the button should be toggled
+     * or not
+     */
+    _setToolbarButtonToggled(isToggled) {
+        ("#toolbar_button_record").toggleClass("toggled", isToggled);
     }
 };
 

modules/UI/toolbars/Toolbar.js

@@ -413,14 +413,14 @@ const Toolbar = {
         );
 
         APP.UI.addListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
-            function(containerId, isVisible) {
+            (containerId, isVisible) => {
                 Toolbar._handleSideToolbarContainerToggled( containerId,
                                                             isVisible);
             });
 
         APP.UI.addListener(UIEvents.LOCAL_RAISE_HAND_CHANGED,
-            function(isRaisedHand) {
-                Toolbar._toggleRaiseHand(isRaisedHand);
+            (isRaisedHand) => {
+                this._setToggledState("toolbar_button_raisehand", isRaisedHand);
             });
 
         if(!APP.tokenData.isGuest) {
@@ -582,34 +582,26 @@ const Toolbar = {
      * streaming is active.
      */
     updateDesktopSharingButtonState () {
-        let button = $("#toolbar_button_desktopsharing");
-        if (APP.conference.isSharingScreen) {
-            button.addClass("glow");
-        } else {
-            button.removeClass("glow");
-        }
-    },
-
-    /**
-     * Toggles / untoggles the view for raised hand.
-     */
-    _toggleRaiseHand(isRaisedHand) {
-        $('#toolbar_button_raisehand').toggleClass("glow", isRaisedHand);
+        this._setToggledState(  "toolbar_button_desktopsharing",
+                                APP.conference.isSharingScreen);
     },
 
     /**
      * Marks video icon as muted or not.
+     *
      * @param {boolean} muted if icon should look like muted or not
      */
-    markVideoIconAsMuted (muted) {
+    toggleVideoIcon (muted) {
         $('#toolbar_button_camera').toggleClass("icon-camera-disabled", muted);
+
+        this._setToggledState("toolbar_button_camera", muted);
     },
 
     /**
      * Marks video icon as disabled or not.
      * @param {boolean} disabled if icon should look like disabled or not
      */
-    markVideoIconAsDisabled (disabled) {
+    disableVideoIcon (disabled) {
         var $btn = $('#toolbar_button_camera');
 
         $btn
@@ -625,23 +617,26 @@ const Toolbar = {
 
         APP.translation.translateElement($btn);
 
-        disabled && this.markVideoIconAsMuted(disabled);
+        disabled && this.toggleVideoIcon(disabled);
     },
 
     /**
      * Marks audio icon as muted or not.
+     *
      * @param {boolean} muted if icon should look like muted or not
      */
-    markAudioIconAsMuted (muted) {
+    toggleAudioIcon(muted) {
         $('#toolbar_button_mute').toggleClass("icon-microphone",
             !muted).toggleClass("icon-mic-disabled", muted);
+
+        this._setToggledState("toolbar_button_mute", muted);
     },
 
     /**
      * Marks audio icon as disabled or not.
      * @param {boolean} disabled if icon should look like disabled or not
      */
-    markAudioIconAsDisabled (disabled) {
+    disableAudioIcon (disabled) {
         var $btn = $('#toolbar_button_mute');
 
         $btn
@@ -657,7 +652,7 @@ const Toolbar = {
 
         APP.translation.translateElement($btn);
 
-        disabled && this.markAudioIconAsMuted(disabled);
+        disabled && this.toggleAudioIcon(disabled);
     },
 
     /**
@@ -819,6 +814,17 @@ const Toolbar = {
             popupElement.appendChild(liElement);
             buttonElement.appendChild(popupElement);
         });
+    },
+
+    /**
+     * Sets the toggled state of the given element depending on the isToggled
+     * parameter.
+     *
+     * @param elementId the element identifier
+     * @param isToggled indicates if the element should be toggled or untoggled
+     */
+        _setToggledState(elementId, isToggled) {
+        $("#" + elementId).toggleClass("toggled", isToggled);
     }
 };
 

modules/devices/mediaDeviceHelper.js

@@ -58,7 +58,7 @@ function getNewAudioInputDevice(newDevices, localAudio) {
         // Otherwise we assume that we don't have any audio input devices
         // to use and that's why disable microphone button on UI.
         else {
-            APP.UI.disableMicrophoneButton();
+            APP.UI.disableMicrophoneButton(true);
         }
     } else {
         // And here we handle case when we already have some device working,
@@ -100,7 +100,7 @@ function getNewVideoInputDevice(newDevices, localVideo) {
         // Otherwise we assume that we don't have any video input devices
         // to use and that's why disable microphone button on UI.
         else {
-            APP.UI.disableCameraButton();
+            APP.UI.disableCameraButton(true);
         }
     } else {
         // And here we handle case when we already have some device working,