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

the commit.
This commit is contained in:
Lyubomir Marinov 2016-10-20 12:39:23 -05:00
commit e1c5ea11bc
6 changed files with 203 additions and 102 deletions

View File

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

View File

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

View File

@ -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;
}

View File

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

View File

@ -30,15 +30,15 @@
<a class="poweredby" href="http://jitsi.org" target="_new" ><span data-i18n="poweredby"></span> jitsi.org</a> <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_container">
<div id="enter_room_form" > <div id="enter_room_form" >
<div id="domain_name"></div> <div id="domain_name"></div>
<div id="enter_room"> <div id="enter_room">
<input id="enter_room_field" type="text" autofocus/> <input id="enter_room_field" type="text" autofocus/>
<div class="icon-reload" id="reload_roomname"></div> <div class="icon-reload" id="reload_roomname"></div>
<input id="enter_room_button" type="button" data-i18n="[value]welcomepage.go" value="GO" /> <input id="enter_room_button" type="button" data-i18n="[value]welcomepage.go" value="GO" />
</div>
</div> </div>
</div>
</div> </div>
<div id="brand_header"></div> <div id="brand_header"></div>
<input type='checkbox' name='checkbox' id="disable_welcome"/> <input type='checkbox' name='checkbox' id="disable_welcome"/>
@ -180,37 +180,45 @@
</div> </div>
<div id="settings_container" class="sideToolbarContainer__inner"> <div id="settings_container" class="sideToolbarContainer__inner">
<div class="title" data-i18n="settings.title"></div> <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>
<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>
<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">
<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> </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> </div>
</div> </div>

View File

@ -1,4 +1,5 @@
/* global APP, $, JitsiMeetJS */ /* global $, APP, AJS, interfaceConfig, JitsiMeetJS */
import UIUtil from "../../util/UIUtil"; import UIUtil from "../../util/UIUtil";
import UIEvents from "../../../../service/UI/UIEvents"; import UIEvents from "../../../../service/UI/UIEvents";
import languages from "../../../../service/translation/languages"; import languages from "../../../../service/translation/languages";
@ -24,7 +25,7 @@ function generateLanguagesOptions(items, currentLang) {
let attrsStr = UIUtil.attrsToString(attrs); let attrsStr = UIUtil.attrsToString(attrs);
return `<option ${attrsStr}></option>`; return `<option ${attrsStr}></option>`;
}).join('\n'); }).join('');
} }
/** /**
@ -61,11 +62,57 @@ function generateDevicesOptions(items, selectedId, permissionGranted) {
return options.join(''); 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 { export default {
init (emitter) { 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')) { if (UIUtil.isSettingEnabled('devices')) {
// DEVICES LIST const wrapperId = 'deviceOptionsWrapper';
JitsiMeetJS.mediaDevices.isDeviceListAvailable() JitsiMeetJS.mediaDevices.isDeviceListAvailable()
.then((isDeviceListAvailable) => { .then((isDeviceListAvailable) => {
if (isDeviceListAvailable && if (isDeviceListAvailable &&
@ -73,31 +120,21 @@ export default {
this._initializeDeviceSelectionSettings(emitter); 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')) { if (UIUtil.isSettingEnabled('moderator')) {
const wrapperId = 'moderatorOptionsWrapper';
// START MUTED // START MUTED
$("#startMutedOptions").change(function () { $("#startMutedOptions").change(function () {
let startAudioMuted = $("#startAudioMuted").is(":checked"); let startAudioMuted = $("#startAudioMuted").is(":checked");
let startVideoMuted = $("#startVideoMuted").is(":checked"); let startVideoMuted = $("#startVideoMuted").is(":checked");
emitter.emit( emitter.emit(
UIEvents.START_MUTED_CHANGED, UIEvents.START_MUTED_CHANGED,
startAudioMuted, startAudioMuted,
@ -106,13 +143,13 @@ export default {
}); });
// FOLLOW ME // FOLLOW ME
$("#followMeOptions").change(function () { const followMeToggle = document.getElementById('followMeCheckBox');
let isFollowMeEnabled = $("#followMeCheckBox").is(":checked"); followMeToggle.addEventListener('change', () => {
emitter.emit( const isFollowMeEnabled = followMeToggle.checked;
UIEvents.FOLLOW_ME_ENABLED, emitter.emit(UIEvents.FOLLOW_ME_ENABLED, isFollowMeEnabled);
isFollowMeEnabled
);
}); });
UIUtil.showElement(wrapperId);
} }
}, },
@ -147,7 +184,8 @@ export default {
showStartMutedOptions (show) { showStartMutedOptions (show) {
if (show && UIUtil.isSettingEnabled('moderator')) { if (show && UIUtil.isSettingEnabled('moderator')) {
// Only show the subtitle if this isn't the only setting section. // 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("moderatorOptionsTitle");
UIUtil.showElement("startMutedOptions"); UIUtil.showElement("startMutedOptions");
@ -214,9 +252,9 @@ export default {
* @param {{ deviceId, label, kind }[]} devices list of available devices * @param {{ deviceId, label, kind }[]} devices list of available devices
*/ */
changeDevicesList (devices) { changeDevicesList (devices) {
let $selectCamera= $('#selectCamera'), let $selectCamera= AJS.$('#selectCamera'),
$selectMic = $('#selectMic'), $selectMic = AJS.$('#selectMic'),
$selectAudioOutput = $('#selectAudioOutput'), $selectAudioOutput = AJS.$('#selectAudioOutput'),
$selectAudioOutputParent = $selectAudioOutput.parent(); $selectAudioOutputParent = $selectAudioOutput.parent();
let audio = devices.filter(device => device.kind === 'audioinput'), let audio = devices.filter(device => device.kind === 'audioinput'),
@ -241,6 +279,8 @@ export default {
videoPermissionGranted)) videoPermissionGranted))
.prop('disabled', !video.length || !videoPermissionGranted); .prop('disabled', !video.length || !videoPermissionGranted);
initSelect2($selectCamera);
$selectMic $selectMic
.html(generateDevicesOptions( .html(generateDevicesOptions(
audio, audio,
@ -248,6 +288,8 @@ export default {
audioPermissionGranted)) audioPermissionGranted))
.prop('disabled', !audio.length || !audioPermissionGranted); .prop('disabled', !audio.length || !audioPermissionGranted);
initSelect2($selectMic);
if (JitsiMeetJS.mediaDevices.isDeviceChangeAvailable('output')) { if (JitsiMeetJS.mediaDevices.isDeviceChangeAvailable('output')) {
$selectAudioOutput $selectAudioOutput
.html(generateDevicesOptions( .html(generateDevicesOptions(
@ -258,14 +300,13 @@ export default {
videoPermissionGranted || audioPermissionGranted)) videoPermissionGranted || audioPermissionGranted))
.prop('disabled', !audioOutput.length || .prop('disabled', !audioOutput.length ||
(!videoPermissionGranted && !audioPermissionGranted)); (!videoPermissionGranted && !audioPermissionGranted));
initSelect2($selectAudioOutput);
$selectAudioOutputParent.show(); $selectAudioOutputParent.show();
} else { } else {
$selectAudioOutputParent.hide(); $selectAudioOutputParent.hide();
} }
$('#devicesOptions').show();
APP.translation.translateElement($('#settings_container option')); APP.translation.translateElement($('#settings_container option'));
} }
}; };