ref(settings): convert panel to react

The goal is to reduce usage on atlassian/aui. New components have been created to display the settings panel. Language selection will reach into i18n for state whereas moderator options will keep state in redux.
allanbritos · Dec 4, 2017 · c9b5484 · c9b5484
1 parent 0eafee2
commit c9b5484
Show file tree

Hide file tree

Showing 19 changed files with 746 additions and 309 deletions.
diff --git a/conference.js b/conference.js
@@ -29,6 +29,7 @@ import {
     dataChannelOpened,
     EMAIL_COMMAND,
     lockStateChanged,
+    onStartMutedPolicyChanged,
     p2pStatusChanged,
     sendLocalParticipant
 } from './react/features/base/conference';
@@ -2078,18 +2079,11 @@ export default {
         APP.UI.addListener(UIEvents.NICKNAME_CHANGED,
             this.changeLocalDisplayName.bind(this));
 
-        APP.UI.addListener(UIEvents.START_MUTED_CHANGED,
-            (startAudioMuted, startVideoMuted) => {
-                room.setStartMutedPolicy({
-                    audio: startAudioMuted,
-                    video: startVideoMuted
-                });
-            }
-        );
         room.on(
             JitsiConferenceEvents.START_MUTED_POLICY_CHANGED,
             ({ audio, video }) => {
-                APP.UI.onStartMutedChanged(audio, video);
+                APP.store.dispatch(
+                    onStartMutedPolicyChanged(audio, video));
             }
         );
         room.on(JitsiConferenceEvents.STARTED_MUTED, () => {
@@ -2373,10 +2367,6 @@ export default {
 
         APP.UI.initConference();
 
-        APP.UI.addListener(
-            UIEvents.LANG_CHANGED,
-            language => APP.translation.setLanguage(language));
-
         APP.keyboardshortcut.init();
 
         if (config.requireDisplayName

diff --git a/css/_side_toolbar_container.scss b/css/_side_toolbar_container.scss
@@ -22,8 +22,10 @@
     /**
      * Form elements and blocks.
      */
-    input, select, a,
-    .sideToolbarBlock, .form-control, .button-control {
+    input,
+    a,
+    .sideToolbarBlock,
+    .form-control {
         display: block;
         margin-top: 15px;
         margin-left: 10%;
@@ -34,19 +36,11 @@
      * Specify styling of elements inside a block.
      */
     .sideToolbarBlock {
-        input, button, a, select {
+        input, a {
             margin-left: 0;
             margin-top: 5px;
             width: 100%;
         }
-        input[type='checkbox'] {
-            display: inline;
-            width: auto !important;
-            > label {
-                margin-top: 5px;
-                width: 80%;
-            }
-        }
     }
 
     /**
@@ -80,42 +74,35 @@
             font-size: $toolbarTitleFontSize;
         }
 
-        /**
-         * Subtitle specific properties.
-         */
-        div.subTitle {
-            color: $defaultSideBarFontColor !important;
-            font-size: 11px;
-            font-weight: 500;
-            margin-left: 10%;
-            text-align: left;
-        }
-
         /**
          * First element after a title.
          */
         .first {
             margin-top: 0 !important;
         }
+    }
 
-        /**
-         * Buttons in the side toolbar container.
-         */
-        .button-control {
-            margin: 9px 0;
-            width: 100%;
+    .settings-menu {
+        display: flex;
+        flex-direction: column;
+        padding-left: 10%;
+        padding-right: 10%;
+
+        .moderator-checkbox {
+            display: inline-block;
+            margin: 0 5px 0;
+            width: auto;
         }
-    }
-}
 
-#device_settings {
-    width : auto !important;
-    text-align: center;
-}
+        .moderator-option {
+            margin-top: 15px;
+        }
 
-#deviceOptionsWrapper {
-    button {
-        float: none;
+        .subTitle {
+            color: $defaultSideBarFontColor;
+            font-size: 11px;
+            font-weight: 500;
+        }
     }
 }
 

diff --git a/modules/UI/UI.js b/modules/UI/UI.js
@@ -17,7 +17,6 @@ import Recording from './recording/Recording';
 
 import VideoLayout from './videolayout/VideoLayout';
 import Filmstrip from './videolayout/Filmstrip';
-import SettingsMenu from './side_pannels/settings/SettingsMenu';
 import Profile from './side_pannels/profile/Profile';
 
 import {
@@ -541,8 +540,6 @@ UI.updateLocalRole = isModerator => {
     APP.store.dispatch(showSharedVideoButton());
 
     Recording.showRecordingButton(isModerator);
-    SettingsMenu.showStartMutedOptions(isModerator);
-    SettingsMenu.showFollowMeOptions(isModerator);
 
     if (isModerator) {
         if (!interfaceConfig.DISABLE_FOCUS_INDICATOR) {
@@ -1017,10 +1014,6 @@ UI.updateAuthInfo = function(isAuthEnabled, login) {
     }
 };
 
-UI.onStartMutedChanged = function(startAudioMuted, startVideoMuted) {
-    SettingsMenu.updateStartMutedBox(startAudioMuted, startVideoMuted);
-};
-
 /**
  * Notifies interested listeners that the raise hand property has changed.
  *