From 8118b4aea1e89610314df3348815e726b7c07e1f Mon Sep 17 00:00:00 2001 From: Kostiantyn Pashura Date: Tue, 20 Sep 2016 10:59:12 +0300 Subject: [PATCH] aui select and checkbox added --- .gitignore | 1 + css/_side_toolbar_container.scss | 31 ++---- css/_variables.scss | 11 ++- css/aui-components/dropdown.scss | 32 ++++++ css/main.scss | 1 + index.html | 68 +++++++------ .../UI/side_pannels/settings/SettingsMenu.js | 97 +++++++++++++------ 7 files changed, 162 insertions(+), 79 deletions(-) create mode 100644 css/aui-components/dropdown.scss diff --git a/.gitignore b/.gitignore index 43994faa9..2ce8b14d9 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,7 @@ deploy-local.sh libs/ all.css *css.map +*js.map unsupported_browser.css .remote-sync.json .sync-config.cson diff --git a/css/_side_toolbar_container.scss b/css/_side_toolbar_container.scss index cb7d7c0b6..53163ea95 100644 --- a/css/_side_toolbar_container.scss +++ b/css/_side_toolbar_container.scss @@ -2,9 +2,10 @@ * Toolbar side panel main container element. */ #sideToolbarContainer { - display: inline-block; - position:absolute; - top: 0px; + position: absolute; + top: 0; + //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.subTitle { + div.title, + 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; -} diff --git a/css/_variables.scss b/css/_variables.scss index 1a6ad3d56..171112130 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -87,4 +87,13 @@ $auiPrimaryButtonBg: #3572b0; $auiPrimaryButtonHoverBg: #57647b; $auiPrimaryButtonColor: #fff; $auiIconColor: #707070; -$inputControlEmColor: #f29424; \ No newline at end of file +$inputControlEmColor: #f29424; +$linkFontColor: #489afe; +$linkHoverFontColor: #287ade; + +/** + * Forms + */ +$inputBg: #505F79; +$inputBgHover: #505F79; +$inputFontColor: #ECEEF1; \ No newline at end of file diff --git a/css/aui-components/dropdown.scss b/css/aui-components/dropdown.scss new file mode 100644 index 000000000..2b66c5644 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index cb9c295ed..cbe6ccc5f 100644 --- a/css/main.scss +++ b/css/main.scss @@ -61,5 +61,6 @@ @import 'shortcuts/main'; @import 'buttons/button-control'; @import "modals/invite/invite"; +@import 'aui-components/dropdown'; /* Modules END */ \ No newline at end of file diff --git a/index.html b/index.html index 46462e14b..c91ab1e31 100644 --- a/index.html +++ b/index.html @@ -179,37 +179,49 @@
- -
-
-
- - +
+
+
-
- - +
+
+
+ + +
+
+ + +
+
+ + +
-
- - +
+
+
+
+ +

+ + +
+
+ +

+ + +
+
+
+ +

+ + +
-
-
-
-
- - -
-
- - -
-
-
- - -
+
diff --git a/modules/UI/side_pannels/settings/SettingsMenu.js b/modules/UI/side_pannels/settings/SettingsMenu.js index 3c1e80067..990b66093 100644 --- 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, $, 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 ``; - }).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("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 +137,17 @@ export default { }); // FOLLOW ME - $("#followMeOptions").change(function () { - let isFollowMeEnabled = $("#followMeCheckBox").is(":checked"); + let followMeToggle = document.getElementById('followMeCheckBox'); + 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'), - $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 +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')); } };