Merge branch 'kkrisstoff-task/dropdown-aui-changes'

 the commit.

css/_side_toolbar_container.scss

@@ -2,16 +2,15 @@
  * Toolbar side panel main container element.
  */
 #sideToolbarContainer {
-    display: inline-block;
-    position:absolute;
-    top: 0px;
-    left: $defaultToolbarSize;
-    width: 0;
     background-color: rgba(0,0,0,0.8);
     height: 100%;
+    left: $defaultToolbarSize;
     max-width: $sidebarWidth;
-    z-index: 800;
     overflow: hidden;
+    position: absolute;
+    top: 0;
+    width: 0;
+    z-index: 800;
 
     /**
      * Labels inside the side panel.
@@ -23,7 +22,7 @@
     /**
      * Form elements and blocks.
      */
-    input, label, select, a,
+    input, select, a,
     .sideToolbarBlock, .input-control, .button-control {
         display: block;
         margin-top: 15px;
@@ -34,8 +33,8 @@
     /**
      * Specify colors for edit elements.
      */
-    select, input[type="button"], input[type="text"],
-    input[type="reset"], input[type="submit"] {
+    select, input[type="button"], input[type="text"], input[type="reset"],
+    input[type="submit"] {
         color: $inputColor;
         background: $inputBackground;
         border: none;
@@ -45,16 +44,18 @@
      * Specify styling of elements inside a block.
      */
     .sideToolbarBlock {
-        input, label, button, a, select {
-            margin-top: 5px;
+        input, button, a, select {
             margin-left: 0;
+            margin-top: 5px;
             width: 100%;
         }
-
-        .startMutedLabel,
-        .followMeLabel {
+        input[type='checkbox'] {
             display: inline;
-            margin-top: 0;
+            width: auto !important;
+            > label {
+                margin-top: 5px;
+                width: 80%;
+            }
         }
     }
 
@@ -72,36 +73,35 @@
         /**
          * Titles and subtitles of inner containers.
          */
-        > div.title,
-          div.subTitle {
-            text-align: left;
-            margin: 10px 0px 10px 0px;
+        div.title, div.subTitle {
+            margin: 10px 0;
         }
 
         /**
          * Main title size.
          */
-        > div.title {
+        div.title {
             color: $defaultColor !important;
-            text-align: center;
             font-size: 16px;
+            text-align: center;
         }
 
         /**
          * Subtitle specific properties.
          */
-        > div.subTitle {
+        div.subTitle {
+            color: $defaultSideBarFontColor !important;
             font-size: 11px;
             font-weight: 500;
-            color: $defaultSideBarFontColor !important;
             margin-left: 10%;
+            text-align: left;
         }
 
         /**
          * First element after a title.
          */
         .first {
-            margin-top: 0px !important;
+            margin-top: 0 !important;
         }
 
         /**
@@ -119,12 +119,6 @@
     text-align: center;
 }
 
-#startAudioMuted,
-#startVideoMuted,
-#followMeCheckBox {
-    width: 13px !important;
-}
-
 /**
  * Profile
  */
@@ -135,7 +129,7 @@
         li {
             list-style-type: none;
 
-            a.authButton{
+            a.authButton {
                 width: 160px;
                 margin: 10px 20px;
                 padding: 3px 29px;
@@ -149,4 +143,4 @@
             }
         }
     }
-}
+}

css/_variables.scss

@@ -92,4 +92,13 @@ $auiPrimaryButtonBg: #3572b0;
 $auiPrimaryButtonHoverBg: #57647b;
 $auiPrimaryButtonColor: #fff;
 $auiIconColor: #707070;
-$inputControlEmColor: #f29424;
+$inputControlEmColor: #f29424;
+$linkFontColor: #489afe;
+$linkHoverFontColor: #287ade;
+
+/**
+ * Forms
+ */
+$inputBg: #505F79;
+$inputBgHover: #505F79;
+$inputFontColor: #ECEEF1;

css/aui-components/dropdown.scss

@@ -0,0 +1,48 @@
+form.aui {
+    .aui-select2-container {
+        background-color: transparent;
+
+        > a {
+            margin: 0 auto !important;
+            width: 100% !important;
+        }
+    }
+}
+
+.select2-results{
+    &::-webkit-scrollbar {
+        background-color: transparent;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+    &::-webkit-scrollbar-track-piece {
+        background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: #3572b0;
+    }
+}
+
+.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

@@ -62,5 +62,6 @@
 @import 'buttons/button-control';
 @import "modals/invite/invite";
 @import "connection-info";
+@import 'aui-components/dropdown';
 
-/* Modules END */
+/* Modules END */

index.html

@@ -30,15 +30,15 @@
             <a class="poweredby" href="http://jitsi.org" target="_new" ><span data-i18n="poweredby"></span> jitsi.org</a>
 
             <div id="enter_room_container">
-                    <div id="enter_room_form" >
-                        <div id="domain_name"></div>
-                        <div id="enter_room">
-                            <input id="enter_room_field" type="text" autofocus/>
-                            <div class="icon-reload" id="reload_roomname"></div>
-                            <input id="enter_room_button" type="button" data-i18n="[value]welcomepage.go" value="GO" />
+                <div id="enter_room_form" >
+                    <div id="domain_name"></div>
+                    <div id="enter_room">
+                        <input id="enter_room_field" type="text" autofocus/>
+                        <div class="icon-reload" id="reload_roomname"></div>
+                        <input id="enter_room_button" type="button" data-i18n="[value]welcomepage.go" value="GO" />
 
-                        </div>
                     </div>
+                </div>
             </div>
             <div id="brand_header"></div>
             <input type='checkbox' name='checkbox' id="disable_welcome"/>
@@ -180,37 +180,45 @@
                 </div>
                 <div id="settings_container" class="sideToolbarContainer__inner">
                     <div class="title" data-i18n="settings.title"></div>
-                    <select id="languages_selectbox" class="first hide"></select>
-                    <div id="deviceOptionsTitle" class="subTitle hide" data-i18n="settings.audioVideo"></div>
-                    <div id="devicesOptions" class="hide">
-                        <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>
+                    <form class="aui">
+                        <div id="languagesSelectWrapper" class="first hide">
+                            <select id="languagesSelect" style="width: 80%; margin-left: 10%"></select>
                         </div>
-                        <div class="sideToolbarBlock">
-                            <label data-i18n="settings.selectAudioOutput"></label>
-                            <select  id="selectAudioOutput"></select>
-                        </div>
-                    </div>
-                    <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 id="deviceOptionsWrapper" class="hide">
+                            <div id="deviceOptionsTitle" class="subTitle hide" data-i18n="settings.audioVideo"></div>
+                            <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">
-                            <input type="checkbox" id="startVideoMuted">
-                            <label class="startMutedLabel" for="startVideoMuted" data-i18n="settings.startVideoMuted"></label>
+                        <div id="moderatorOptionsWrapper" class="hide">
+                            <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="hide">
+                                <div class="sideToolbarBlock">
+                                    <input type="checkbox" id="followMeCheckBox">
+                                    <label class="followMeLabel" for="followMeCheckBox" data-i18n="settings.followMe"></label>
+                                </div>
+                            </div>
                         </div>
-                    </div>
-                    <div id="followMeOptions" class="sideToolbarBlock hide">
-                        <input type="checkbox" id="followMeCheckBox">
-                        <label class="followMeLabel" for="followMeCheckBox" data-i18n="settings.followMe"></label>
-                    </div>
+                    </form>
                 </div>
             </div>
         </div>

modules/UI/side_pannels/settings/SettingsMenu.js

@@ -1,4 +1,5 @@
-/* global APP, $, JitsiMeetJS */
+/* global $, APP, AJS, interfaceConfig, JitsiMeetJS */
+
 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,57 @@ function generateDevicesOptions(items, selectedId, permissionGranted) {
     return options.join('');
 }
 
+/**
+ * Replace html select element to select2 custom dropdown
+ *
+ * @param {jQueryElement} $el native select element
+ * @param {function} onSelectedCb fired if item is selected
+ */
+function initSelect2($el, onSelectedCb) {
+    $el.auiSelect2({
+        containerCssClass: 'input-container-dark',
+        dropdownCssClass: 'dropdown-dark',
+        minimumResultsForSearch: Infinity
+    });
+    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 +120,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("devicesOptions");
-        }
-
-        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");
+            UIUtil.showElement(wrapperId);
         }
-
+        // MODERATOR
         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 +143,13 @@ export default {
             });
 
             // FOLLOW ME
-            $("#followMeOptions").change(function () {
-                let isFollowMeEnabled = $("#followMeCheckBox").is(":checked");
-                emitter.emit(
-                    UIEvents.FOLLOW_ME_ENABLED,
-                    isFollowMeEnabled
-                );
+            const followMeToggle = document.getElementById('followMeCheckBox');
+            followMeToggle.addEventListener('change', () => {
+                const isFollowMeEnabled = followMeToggle.checked;
+                emitter.emit(UIEvents.FOLLOW_ME_ENABLED, isFollowMeEnabled);
             });
+
+            UIUtil.showElement(wrapperId);
         }
     },
 
@@ -147,7 +184,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 +252,9 @@ export default {
      * @param {{ deviceId, label, kind }[]} devices list of available devices
      */
     changeDevicesList (devices) {
-        let $selectCamera= $('#selectCamera'),
-            $selectMic = $('#selectMic'),
-            $selectAudioOutput = $('#selectAudioOutput'),
+        let $selectCamera= AJS.$('#selectCamera'),
+            $selectMic = AJS.$('#selectMic'),
+            $selectAudioOutput = AJS.$('#selectAudioOutput'),
             $selectAudioOutputParent = $selectAudioOutput.parent();
 
         let audio = devices.filter(device => device.kind === 'audioinput'),
@@ -241,6 +279,8 @@ export default {
                 videoPermissionGranted))
             .prop('disabled', !video.length || !videoPermissionGranted);
 
+        initSelect2($selectCamera);
+
         $selectMic
             .html(generateDevicesOptions(
                 audio,
@@ -248,6 +288,8 @@ export default {
                 audioPermissionGranted))
             .prop('disabled', !audio.length || !audioPermissionGranted);
 
+        initSelect2($selectMic);
+
         if (JitsiMeetJS.mediaDevices.isDeviceChangeAvailable('output')) {
             $selectAudioOutput
                 .html(generateDevicesOptions(
@@ -258,14 +300,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'));
     }
 };