mirror of
https://github.com/hyperion-project/hyperion.ng.git
synced 2023-10-10 13:36:59 +02:00
Improve language selection usability
This commit is contained in:
parent
85e2bc9fb8
commit
6c7b1813a7
@ -18,7 +18,7 @@
|
|||||||
performTranslation();
|
performTranslation();
|
||||||
|
|
||||||
var si = sysInfo.hyperion;
|
var si = sysInfo.hyperion;
|
||||||
var libs = { "Bootstrap 3": "http://getbootstrap.com/", "JQuery": "https://jquery.com/", "Bootstrap Colorpicker": "https://itsjavi.com/bootstrap-colorpicker/", "Bootstrap Toggle": "https://www.bootstraptoggle.com/", "JSON-Editor": "http://jeremydorn.com/json-editor/", "jQuery.i18n": "https://github.com/wikimedia/jquery.i18n", "metisMenu": "http://mm.onokumus.com/index.html", "download.js": "http://danml.com/download.html", "gijgo": "http://gijgo.com/" };
|
var libs = { "Bootstrap 3": "http://getbootstrap.com/", "JQuery": "https://jquery.com/", "Bootstrap Colorpicker": "https://itsjavi.com/bootstrap-colorpicker/", "Bootstrap Toggle": "https://www.bootstraptoggle.com/", "Bootstrap Select": "https://developer.snapappointments.com/bootstrap-select/", "JSON-Editor": "http://jeremydorn.com/json-editor/", "jQuery.i18n": "https://github.com/wikimedia/jquery.i18n", "metisMenu": "http://mm.onokumus.com/index.html", "download.js": "http://danml.com/download.html", "gijgo": "http://gijgo.com/" };
|
||||||
var libh = "";
|
var libh = "";
|
||||||
var lang = [];
|
var lang = [];
|
||||||
var dcount = 0;
|
var dcount = 0;
|
||||||
|
6
assets/webconfig/css/bootstrap-select.min.css
vendored
Normal file
6
assets/webconfig/css/bootstrap-select.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -168,6 +168,12 @@ table label{margin:0}
|
|||||||
border-color: #602060;
|
border-color: #602060;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-lang-select {
|
||||||
|
color: #337ab7;
|
||||||
|
background-color: transparent;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
/*led preview & led visualisation*/
|
/*led preview & led visualisation*/
|
||||||
#leds_canvas {background-color:#AAAAAA; position:absolute; margin:15px; background-image:url(/img/hyperion/hyperionlogo.png); background-repeat:no-repeat; background-position: center;}
|
#leds_canvas {background-color:#AAAAAA; position:absolute; margin:15px; background-image:url(/img/hyperion/hyperionlogo.png); background-repeat:no-repeat; background-position: center;}
|
||||||
.led { display:inline-block; border: 1px solid black; position:absolute; opacity:0.8; text-align:center; vertical-align:middle; padding:4px; border-radius:2px;}
|
.led { display:inline-block; border: 1px solid black; position:absolute; opacity:0.8; text-align:center; vertical-align:middle; padding:4px; border-radius:2px;}
|
||||||
|
@ -53,12 +53,15 @@
|
|||||||
|
|
||||||
<!-- Bootstrap Core CSS -->
|
<!-- Bootstrap Core CSS -->
|
||||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
|
||||||
<link href="css/bootstrap-colorpicker.min.css" rel="stylesheet">
|
<link href="css/bootstrap-colorpicker.min.css" rel="stylesheet">
|
||||||
|
|
||||||
<!-- BSToggle -->
|
<!-- BSToggle -->
|
||||||
<script src="js/lib/bootstrap-toggle.min.js"></script>
|
|
||||||
<link href="css/bootstrap-toggle.min.css" rel="stylesheet">
|
<link href="css/bootstrap-toggle.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- BSSelect -->
|
||||||
|
<link href="css/bootstrap-select.min.css" rel="stylesheet">
|
||||||
|
|
||||||
<!-- MetisMenu CSS -->
|
<!-- MetisMenu CSS -->
|
||||||
<link href="css/metisMenu.css" rel="stylesheet">
|
<link href="css/metisMenu.css" rel="stylesheet">
|
||||||
|
|
||||||
@ -169,15 +172,6 @@
|
|||||||
<i class="fa fa-wrench fa-fw"></i> <i class="fa fa-caret-down"></i>
|
<i class="fa fa-wrench fa-fw"></i> <i class="fa fa-caret-down"></i>
|
||||||
</a>
|
</a>
|
||||||
<ul class="dropdown-menu dropdown-alerts">
|
<ul class="dropdown-menu dropdown-alerts">
|
||||||
<li id="btn_setlang">
|
|
||||||
<a>
|
|
||||||
<div>
|
|
||||||
<i class="fa fa-globe fa-fw"></i>
|
|
||||||
<span data-i18n="InfoDialog_lang_title"></span>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="divider"></li>
|
|
||||||
<li id="btn_setaccess">
|
<li id="btn_setaccess">
|
||||||
<a>
|
<a>
|
||||||
<div>
|
<div>
|
||||||
@ -197,6 +191,11 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
<!-- /.language selector -->
|
||||||
|
<li>
|
||||||
|
<select id="language-select" class="selectpicker" data-width="fit" data-style="btn-lang-select" > </select>
|
||||||
|
</li>
|
||||||
|
|
||||||
<!-- /.lock-ui -->
|
<!-- /.lock-ui -->
|
||||||
<li class="dropdown" id="btn_lock_ui" style="display:none">
|
<li class="dropdown" id="btn_lock_ui" style="display:none">
|
||||||
<a>
|
<a>
|
||||||
@ -343,6 +342,12 @@
|
|||||||
<!-- Bootstrap Core JavaScript -->
|
<!-- Bootstrap Core JavaScript -->
|
||||||
<script src="js/lib/bootstrap.min.js"></script>
|
<script src="js/lib/bootstrap.min.js"></script>
|
||||||
|
|
||||||
|
<!-- BSToggle -->
|
||||||
|
<script src="js/lib/bootstrap-toggle.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Bootstrap Select JavaScript -->
|
||||||
|
<script src="js/lib/bootstrap-select.min.js"></script>
|
||||||
|
|
||||||
<!-- Metis Menu Plugin JavaScript -->
|
<!-- Metis Menu Plugin JavaScript -->
|
||||||
<script src="js/lib/metisMenu.min.js"></script>
|
<script src="js/lib/metisMenu.min.js"></script>
|
||||||
|
|
||||||
|
@ -56,6 +56,18 @@ $(document).ready(function () {
|
|||||||
updateSessions();
|
updateSessions();
|
||||||
}); // end cmd-serverinfo
|
}); // end cmd-serverinfo
|
||||||
|
|
||||||
|
// Update language
|
||||||
|
$('.selectpicker').on('changed.bs.select',function (e, clickedIndex, isSelected, previousValue){
|
||||||
|
|
||||||
|
var newLang = availLang[clickedIndex];
|
||||||
|
if (newLang !== storedLang)
|
||||||
|
{
|
||||||
|
setStorage("langcode", newLang);
|
||||||
|
reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
$(window.hyperion).on("cmd-sessions-update", function (event) {
|
$(window.hyperion).on("cmd-sessions-update", function (event) {
|
||||||
window.serverInfo.sessions = event.response.data;
|
window.serverInfo.sessions = event.response.data;
|
||||||
updateSessions();
|
updateSessions();
|
||||||
|
9
assets/webconfig/js/lib/bootstrap-select.min.js
vendored
Normal file
9
assets/webconfig/js/lib/bootstrap-select.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -1,6 +1,7 @@
|
|||||||
var storedAccess;
|
var storedAccess;
|
||||||
var storedLang;
|
var storedLang;
|
||||||
var availLang = ['en','de','es','it','cs','sv','nl','pl','ro'];
|
var availLang = ['en','de','es','it','cs','sv','nl','pl','ro'];
|
||||||
|
var availLangText = ['English','Deutsch','Español','Italiano','Čeština','Svenska','Nederlands','Polski','Română'];
|
||||||
var availAccess = ['default','advanced','expert'];
|
var availAccess = ['default','advanced','expert'];
|
||||||
//$.i18n.debug = true;
|
//$.i18n.debug = true;
|
||||||
|
|
||||||
@ -69,33 +70,7 @@ $(document).ready( function() {
|
|||||||
$('#btn_setaccess').attr("disabled", true);
|
$('#btn_setaccess').attr("disabled", true);
|
||||||
}
|
}
|
||||||
|
|
||||||
$('#btn_setlang').off().on('click',function() {
|
initLanguageSelection();
|
||||||
var newLang;
|
|
||||||
showInfoDialog('select', $.i18n('InfoDialog_lang_title'), $.i18n('InfoDialog_lang_text'));
|
|
||||||
|
|
||||||
for (var lcx = 0; lcx<availLang.length; lcx++)
|
|
||||||
{
|
|
||||||
$('#id_select').append(createSelOpt(availLang[lcx], $.i18n('general_speech_'+availLang[lcx])))
|
|
||||||
}
|
|
||||||
|
|
||||||
if (storedLang != "auto")
|
|
||||||
$('#id_select').val(storedLang);
|
|
||||||
|
|
||||||
$('#id_select').off().on('change',function() {
|
|
||||||
newLang = $('#id_select').val();
|
|
||||||
if (newLang == storedLang)
|
|
||||||
$('#id_btn_saveset').attr('disabled', true);
|
|
||||||
else
|
|
||||||
$('#id_btn_saveset').attr('disabled', false);
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#id_btn_saveset').off().on('click',function() {
|
|
||||||
setStorage("langcode", newLang);
|
|
||||||
reload();
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#id_select').trigger('change');
|
|
||||||
});
|
|
||||||
|
|
||||||
//access
|
//access
|
||||||
storedAccess = getStorage("accesslevel");
|
storedAccess = getStorage("accesslevel");
|
||||||
|
@ -178,6 +178,17 @@ function updateHyperionInstanceListing()
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function initLanguageSelection()
|
||||||
|
{
|
||||||
|
for (var i = 0; i < availLang.length; i++)
|
||||||
|
{
|
||||||
|
$("#language-select").append('<option value="'+i+'" selected="">'+availLangText[i]+'</option>');
|
||||||
|
}
|
||||||
|
|
||||||
|
$("#language-select").val(availLang.indexOf(storedLang));
|
||||||
|
$("#language-select").selectpicker("refresh");
|
||||||
|
}
|
||||||
|
|
||||||
function updateUiOnInstance(inst)
|
function updateUiOnInstance(inst)
|
||||||
{
|
{
|
||||||
if(inst != 0)
|
if(inst != 0)
|
||||||
|
Loading…
Reference in New Issue
Block a user