haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

the commit.
This commit is contained in:
Lyubomir Marinov 2016-10-20 12:39:23 -05:00
parent 0fa5aa48af 55b741d11b
commit e1c5ea11bc
6 changed files with 203 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
css/_side_toolbar_container.scss
View File

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

11
css/_variables.scss
View File

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

48
css/aui-components/dropdown.scss Normal file
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;
}

3
css/main.scss
View File

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

78
index.html
View File

@ -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>
<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.selectMic"></label>
<select id="selectMic"></select>
<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">
<label data-i18n="settings.selectAudioOutput"></label>
<select id="selectAudioOutput"></select>
<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="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>
</form>
</div>
</div>
</div>

107
modules/UI/side_pannels/settings/SettingsMenu.js
View File

@ -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");
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'));
}
};