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

the commit.
2016-10-20 12:39:23 -05:00 · 2016-10-20 12:39:23 -05:00 · e1c5ea11bc
parent 0fa5aa48af 55b741d11b
commit e1c5ea11bc
6 changed files with 203 additions and 102 deletions
--- a/css/_side_toolbar_container.scss
+++ b/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;
--- a/css/_variables.scss
+++ b/css/_variables.scss
@ -93,3 +93,12 @@ $auiPrimaryButtonHoverBg: #57647b;
 $auiPrimaryButtonColor: #fff;
 $auiIconColor: #707070;
 $inputControlEmColor: #f29424;
+$linkFontColor: #489afe;
+$linkHoverFontColor: #287ade;
+
+/**
+ * Forms
+ */
+$inputBg: #505F79;
+$inputBgHover: #505F79;
+$inputFontColor: #ECEEF1;
--- a/css/aui-components/dropdown.scss
+++ b/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;
+}
--- a/css/main.scss
+++ b/css/main.scss
@ -62,5 +62,6 @@
@import 'buttons/button-control';
@import "modals/invite/invite";
@import "connection-info";
+@import 'aui-components/dropdown';

 /* Modules END */
--- a/index.html
+++ b/index.html
@ -180,9 +180,12 @@
                </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="languagesSelectWrapper" class="first hide">
+                            <select id="languagesSelect" style="width: 80%; margin-left: 10%"></select>
+                        </div>
+                        <div id="deviceOptionsWrapper" class="hide">
                            <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>
@ -196,8 +199,9 @@
                                <select id="selectAudioOutput"></select>
                            </div>
                        </div>
+                        <div id="moderatorOptionsWrapper" class="hide">
                            <div id="moderatorOptionsTitle" class="subTitle hide" data-i18n="settings.moderator"></div>
-                    <div id = "startMutedOptions" class="hide">
+                            <div id="startMutedOptions" class="hide">
                                <div class="sideToolbarBlock first">
                                    <input type="checkbox" id="startAudioMuted">
                                    <label class="startMutedLabel" for="startAudioMuted" data-i18n="settings.startAudioMuted"></label>
@ -207,12 +211,16 @@
                                    <label class="startMutedLabel" for="startVideoMuted" data-i18n="settings.startVideoMuted"></label>
                                </div>
                            </div>
-                    <div id="followMeOptions" class="sideToolbarBlock hide">
+                            <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>
+                    </form>
+                </div>
+            </div>
        </div>
        <div id="videospace">
            <div id="largeVideoContainer" class="videocontainer">
--- a/modules/UI/side_pannels/settings/SettingsMenu.js
+++ b/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) {
-        if (UIUtil.isSettingEnabled('devices')) {
+        //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')) {
+            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("devicesOptions");
+
+            UIUtil.showElement(wrapperId);
        }
-
-        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");
-        }
-
+        // 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'));
    }
 };