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

aui select and checkbox added

This commit is contained in:
Kostiantyn Pashura 2016-09-20 10:59:12 +03:00
parent f62d7dbdf7
commit 8118b4aea1
7 changed files with 162 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -4,6 +4,7 @@ deploy-local.sh
libs/
all.css
*css.map
*js.map
unsupported_browser.css
.remote-sync.json
.sync-config.cson

31
css/_side_toolbar_container.scss
View File

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

9
css/_variables.scss
View File

@ -88,3 +88,12 @@ $auiPrimaryButtonHoverBg: #57647b;
$auiPrimaryButtonColor: #fff;
$auiIconColor: #707070;
$inputControlEmColor: #f29424;
$linkFontColor: #489afe;
$linkHoverFontColor: #287ade;
/**
* Forms
*/
$inputBg: #505F79;
$inputBgHover: #505F79;
$inputFontColor: #ECEEF1;

32
css/aui-components/dropdown.scss Normal file
View File

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

1
css/main.scss
View File

@ -61,5 +61,6 @@
@import 'shortcuts/main';
@import 'buttons/button-control';
@import "modals/invite/invite";
@import 'aui-components/dropdown';
/* Modules END */

68
index.html
View File

@ -179,37 +179,49 @@
</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">
<aui-label for="startAudioMuted">
<p data-i18n="settings.startAudioMuted"></p>
</aui-label>
<aui-toggle id="startAudioMuted" label="Audio muted"></aui-toggle>
</div>
<div class="sideToolbarBlock">
<aui-label for="startVideoMuted" >
<p data-i18n="settings.startVideoMuted"></p>
</aui-label>
<aui-toggle id="startVideoMuted" label="Video muted"></aui-toggle>
</div>
</div>
<div id="followMeOptions" class="sideToolbarBlock hide">
<aui-label for="followMeCheckBox">
<p data-i18n="settings.followMe"></p>
</aui-label>
<aui-toggle id="followMeCheckBox" label="Follow Me"></aui-toggle>
</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>

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

@ -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 `<option ${attrsStr}></option>`;
}).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'));
}
};