aui select and checkbox added

.gitignore

@@ -4,6 +4,7 @@ deploy-local.sh
 libs/
 all.css
 *css.map
+*js.map
 unsupported_browser.css
 .remote-sync.json
 .sync-config.cson

css/_side_toolbar_container.scss

@@ -2,9 +2,10 @@
  * Toolbar side panel main container element.
  */
 #sideToolbarContainer {
-    display: inline-block;
+    position: absolute;
-    position:absolute;
+    top: 0;
-    top: 0px;
+    //magic 10px for toolbar height. TODO: fix it
+    bottom: 10px;
     left: $defaultToolbarSize;
     width: 0;
     background-color: rgba(0,0,0,0.8);
@@ -50,12 +51,6 @@
             margin-left: 0;
             width: 100%;
         }
-
-        .startMutedLabel,
-        .followMeLabel {
-            display: inline;
-            margin-top: 0;
-        }
     }
 
     /**
@@ -72,16 +67,16 @@
         /**
          * Titles and subtitles of inner containers.
          */
-        > div.title,
+         div.title,
-          div.subTitle {
+         div.subTitle {
             text-align: left;
-            margin: 10px 0px 10px 0px;
+            margin: 10px 0;
         }
 
         /**
          * Main title size.
          */
-        > div.title {
+        div.title {
             color: $defaultColor !important;
             text-align: center;
             font-size: 16px;
@@ -90,7 +85,7 @@
         /**
          * Subtitle specific properties.
          */
-        > div.subTitle {
+        div.subTitle {
             font-size: 11px;
             font-weight: 500;
             color: $defaultSideBarFontColor !important;
@@ -101,7 +96,7 @@
          * First element after a title.
          */
         .first {
-            margin-top: 0px !important;
+            margin-top: 0 !important;
         }
 
         /**
@@ -118,9 +113,3 @@
     width : auto !important;
     text-align: center;
 }
-
-#startAudioMuted,
-#startVideoMuted,
-#followMeCheckBox {
-    width: 13px !important;
-}

css/_variables.scss

@@ -88,3 +88,12 @@ $auiPrimaryButtonHoverBg: #57647b;
 $auiPrimaryButtonColor: #fff;
 $auiIconColor: #707070;
 $inputControlEmColor: #f29424;
+$linkFontColor: #489afe;
+$linkHoverFontColor: #287ade;
+
+/**
+ * Forms
+ */
+$inputBg: #505F79;
+$inputBgHover: #505F79;
+$inputFontColor: #ECEEF1;

css/aui-components/dropdown.scss

@@ -0,0 +1,32 @@
+form.aui {
+    .aui-select2-container {
+        background-color: transparent;
+
+        > a{
+            margin: 0 auto !important;
+            width: 100% !important;
+        }
+    }
+
+}
+.aui-select2-drop{
+    z-index: 901;
+}
+.select2-drop-mask{
+    z-index: 900;
+}
+
+//Dark theme
+form.aui{
+    //Placeholder
+    .aui-select2-container.input-container-dark {
+        a.select2-choice {
+            text-shadow: none;
+        }
+    }
+}
+//
+.aui-dropdown2.aui-style-default.dropdown-dark{
+    background-color: $defaultBackground;
+    border-color: transparent;
+}

css/main.scss

@@ -61,5 +61,6 @@
 @import 'shortcuts/main';
 @import 'buttons/button-control';
 @import "modals/invite/invite";
+@import 'aui-components/dropdown';
 
 /* Modules END */

index.html

@@ -179,37 +179,49 @@
                 </div>
                 <div id="settings_container" class="sideToolbarContainer__inner">
                     <div class="title" data-i18n="settings.title"></div>
-                    <select id="languages_selectbox" class="first hide"></select>
+                    <form class="aui">
-                    <div id="deviceOptionsTitle" class="subTitle hide" data-i18n="settings.audioVideo"></div>
+                        <div id="languagesSelectWrapper" class="first hide">
-                    <div id="devicesOptions" class="hide">
+                            <select id="languagesSelect" style="width: 80%; margin-left: 10%"></select>
-                        <div class="sideToolbarBlock first">
-                            <label class="first" data-i18n="settings.selectCamera"></label>
-                            <select id="selectCamera"></select>
                         </div>
-                        <div class="sideToolbarBlock">
+                        <div id="deviceOptionsWrapper" class="hide">
-                            <label data-i18n="settings.selectMic"></label>
+                            <div id="deviceOptionsTitle" class="subTitle hide" data-i18n="settings.audioVideo"></div>
-                            <select  id="selectMic"></select>
+                            <div class="sideToolbarBlock first">
+                                <label class="first" data-i18n="settings.selectCamera"></label>
+                                <select id="selectCamera"></select>
+                            </div>
+                            <div class="sideToolbarBlock">
+                                <label data-i18n="settings.selectMic"></label>
+                                <select id="selectMic"></select>
+                            </div>
+                            <div class="sideToolbarBlock">
+                                <label data-i18n="settings.selectAudioOutput"></label>
+                                <select id="selectAudioOutput"></select>
+                            </div>
                         </div>
-                        <div class="sideToolbarBlock">
+                        <div id="moderatorOptionsWrapper" class="hide">
-                            <label data-i18n="settings.selectAudioOutput"></label>
+                            <div id="moderatorOptionsTitle" class="subTitle hide" data-i18n="settings.moderator"></div>
-                            <select  id="selectAudioOutput"></select>
+                            <div id="startMutedOptions" class="hide">
+                                <div class="sideToolbarBlock first">
+                                    <aui-label for="startAudioMuted">
+                                        <p data-i18n="settings.startAudioMuted"></p>
+                                    </aui-label>
+                                    <aui-toggle id="startAudioMuted" label="Audio muted"></aui-toggle>
+                                </div>
+                                <div class="sideToolbarBlock">
+                                    <aui-label for="startVideoMuted" >
+                                        <p data-i18n="settings.startVideoMuted"></p>
+                                    </aui-label>
+                                    <aui-toggle id="startVideoMuted" label="Video muted"></aui-toggle>
+                                </div>
+                            </div>
+                            <div id="followMeOptions" class="sideToolbarBlock hide">
+                                <aui-label for="followMeCheckBox">
+                                    <p data-i18n="settings.followMe"></p>
+                                </aui-label>
+                                <aui-toggle id="followMeCheckBox" label="Follow Me"></aui-toggle>
+                            </div>
                         </div>
-                    </div>
+                    </form>
-                    <div id="moderatorOptionsTitle" class="subTitle hide" data-i18n="settings.moderator"></div>
-                    <div id = "startMutedOptions" class="hide">
-                        <div class="sideToolbarBlock first">
-                            <input type="checkbox" id="startAudioMuted">
-                            <label class="startMutedLabel" for="startAudioMuted" data-i18n="settings.startAudioMuted"></label>
-                        </div>
-                        <div class="sideToolbarBlock">
-                            <input type="checkbox" id="startVideoMuted">
-                            <label class="startMutedLabel" for="startVideoMuted" data-i18n="settings.startVideoMuted"></label>
-                        </div>
-                    </div>
-                    <div id="followMeOptions" class="sideToolbarBlock hide">
-                        <input type="checkbox" id="followMeCheckBox">
-                        <label class="followMeLabel" for="followMeCheckBox" data-i18n="settings.followMe"></label>
-                    </div>
                 </div>
             </div>
         </div>

modules/UI/side_pannels/settings/SettingsMenu.js

@@ -1,4 +1,5 @@
-/* global APP, $, JitsiMeetJS */
+/* global APP, $, JitsiMeetJS, interfaceConfig, AJS */
+
 import UIUtil from "../../util/UIUtil";
 import UIEvents from "../../../../service/UI/UIEvents";
 import languages from "../../../../service/translation/languages";
@@ -24,7 +25,7 @@ function generateLanguagesOptions(items, currentLang) {
 
         let attrsStr = UIUtil.attrsToString(attrs);
         return `<option ${attrsStr}></option>`;
-    }).join('\n');
+    }).join('');
 }
 
 /**
@@ -61,11 +62,51 @@ function generateDevicesOptions(items, selectedId, permissionGranted) {
     return options.join('');
 }
 
+function initSelect2($el, onSelectedCb) {
+    $el.auiSelect2({
+        minimumResultsForSearch: Infinity,
+        dropdownCssClass: 'dropdown-dark',
+        containerCssClass: 'input-container-dark',
+    });
+    if (typeof onSelectedCb === 'function'){
+        $el.change(onSelectedCb);
+    }
+}
 
 export default {
     init (emitter) {
+        //LANGUAGES BOX
+        if (UIUtil.isSettingEnabled('language')) {
+            const wrapperId = 'languagesSelectWrapper';
+            const selectId = 'languagesSelect';
+            const selectEl = AJS.$(`#${selectId}`);
+            let selectInput;
+
+            selectEl.html(generateLanguagesOptions(
+                languages.getLanguages(),
+                APP.translation.getCurrentLanguage()
+            ));
+            initSelect2(selectEl, () => {
+                const val = selectEl.val();
+
+                selectInput[0].dataset.i18n = `languages:${val}`;
+                APP.translation.translateElement(selectInput);
+                emitter.emit(UIEvents.LANG_CHANGED, val);
+            });
+            //find new selectInput element
+            selectInput = $(`#s2id_${selectId} .select2-chosen`);
+            //first select fix for languages options
+            selectInput[0].dataset.i18n =
+                `languages:${APP.translation.getCurrentLanguage()}`;
+
+            APP.translation.translateElement(selectEl);
+
+            UIUtil.showElement(wrapperId);
+        }
+        // DEVICES LIST
         if (UIUtil.isSettingEnabled('devices')) {
-            // DEVICES LIST
+            const wrapperId = 'deviceOptionsWrapper';
+
             JitsiMeetJS.mediaDevices.isDeviceListAvailable()
                 .then((isDeviceListAvailable) => {
                     if (isDeviceListAvailable &&
@@ -73,31 +114,21 @@ export default {
                         this._initializeDeviceSelectionSettings(emitter);
                     }
                 });
+            // Only show the subtitle if this isn't the only setting section.
+            if (interfaceConfig.SETTINGS_SECTIONS.length > 1)
+                UIUtil.showElement("deviceOptionsTitle");
 
-            UIUtil.showElement("deviceOptionsTitle");
+            UIUtil.showElement(wrapperId);
-            UIUtil.showElement("devicesOptions");
         }
-
+        // MODERATOR
-        if (UIUtil.isSettingEnabled('language')) {
-            //LANGUAGES BOX
-            let languagesBox = $("#languages_selectbox");
-            languagesBox.html(generateLanguagesOptions(
-                languages.getLanguages(),
-                APP.translation.getCurrentLanguage()
-            ));
-            APP.translation.translateElement(languagesBox);
-            languagesBox.change(function () {
-                emitter.emit(UIEvents.LANG_CHANGED, languagesBox.val());
-            });
-
-            UIUtil.showElement("languages_selectbox");
-        }
-
         if (UIUtil.isSettingEnabled('moderator')) {
+            const wrapperId = 'moderatorOptionsWrapper';
+
             // START MUTED
             $("#startMutedOptions").change(function () {
                 let startAudioMuted = $("#startAudioMuted").is(":checked");
                 let startVideoMuted = $("#startVideoMuted").is(":checked");
+
                 emitter.emit(
                     UIEvents.START_MUTED_CHANGED,
                     startAudioMuted,
@@ -106,13 +137,17 @@ export default {
             });
 
             // FOLLOW ME
-            $("#followMeOptions").change(function () {
+            let followMeToggle = document.getElementById('followMeCheckBox');
-                let isFollowMeEnabled = $("#followMeCheckBox").is(":checked");
+            followMeToggle.addEventListener('change', function() {
+                let isFollowMeEnabled = followMeToggle.checked;
+
                 emitter.emit(
                     UIEvents.FOLLOW_ME_ENABLED,
                     isFollowMeEnabled
                 );
             });
+
+            UIUtil.showElement(wrapperId);
         }
     },
 
@@ -147,7 +182,8 @@ export default {
     showStartMutedOptions (show) {
         if (show && UIUtil.isSettingEnabled('moderator')) {
             // Only show the subtitle if this isn't the only setting section.
-            if (!$("#moderatorOptionsTitle").is(":visible"))
+            if (!$("#moderatorOptionsTitle").is(":visible")
+                && interfaceConfig.SETTINGS_SECTIONS.length > 1)
                 UIUtil.showElement("moderatorOptionsTitle");
 
             UIUtil.showElement("startMutedOptions");
@@ -214,9 +250,9 @@ export default {
      * @param {{ deviceId, label, kind }[]} devices list of available devices
      */
     changeDevicesList (devices) {
-        let $selectCamera= $('#selectCamera'),
+        let $selectCamera= AJS.$('#selectCamera'),
-            $selectMic = $('#selectMic'),
+            $selectMic = AJS.$('#selectMic'),
-            $selectAudioOutput = $('#selectAudioOutput'),
+            $selectAudioOutput = AJS.$('#selectAudioOutput'),
             $selectAudioOutputParent = $selectAudioOutput.parent();
 
         let audio = devices.filter(device => device.kind === 'audioinput'),
@@ -241,6 +277,8 @@ export default {
                 videoPermissionGranted))
             .prop('disabled', !video.length || !videoPermissionGranted);
 
+        initSelect2($selectCamera);
+
         $selectMic
             .html(generateDevicesOptions(
                 audio,
@@ -248,6 +286,8 @@ export default {
                 audioPermissionGranted))
             .prop('disabled', !audio.length || !audioPermissionGranted);
 
+        initSelect2($selectMic);
+
         if (JitsiMeetJS.mediaDevices.isDeviceChangeAvailable('output')) {
             $selectAudioOutput
                 .html(generateDevicesOptions(
@@ -258,14 +298,13 @@ export default {
                     videoPermissionGranted || audioPermissionGranted))
                 .prop('disabled', !audioOutput.length ||
                     (!videoPermissionGranted && !audioPermissionGranted));
+            initSelect2($selectAudioOutput);
 
             $selectAudioOutputParent.show();
         } else {
             $selectAudioOutputParent.hide();
         }
 
-        $('#devicesOptions').show();
-
         APP.translation.translateElement($('#settings_container option'));
     }
 };