Improve language selection usability

assets/webconfig/content/about.html

@@ -18,7 +18,7 @@
 	performTranslation();
 
 	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 lang = [];
 	var dcount = 0;

assets/webconfig/css/hyperion.css

@@ -168,6 +168,12 @@ table label{margin:0}
     border-color: #602060;
 }
 
+.btn-lang-select {
+  color: #337ab7;
+  background-color: transparent;
+  border-style: none;
+}
+
 /*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;}
 .led { display:inline-block; border: 1px solid black; position:absolute; opacity:0.8; text-align:center; vertical-align:middle; padding:4px;  border-radius:2px;}

assets/webconfig/index.html

@@ -53,12 +53,15 @@
 
 	<!-- Bootstrap Core CSS -->
 	<link href="css/bootstrap.min.css" rel="stylesheet">
+	
 	<link href="css/bootstrap-colorpicker.min.css" rel="stylesheet">
 
 	<!-- BSToggle -->
-  <script src="js/lib/bootstrap-toggle.min.js"></script>
 	<link href="css/bootstrap-toggle.min.css" rel="stylesheet">
 
+	<!-- BSSelect -->
+	<link href="css/bootstrap-select.min.css" rel="stylesheet">
+
 	<!-- MetisMenu CSS -->
 	<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>
 					</a>
 					<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">
 							<a>
 								<div>
@@ -197,6 +191,11 @@
 						</li>
 					</ul>
 				</li>
+				<!-- /.language selector -->
+        			<li>
+			     		<select id="language-select" class="selectpicker" data-width="fit" data-style="btn-lang-select" > </select>
+		        	</li>
+
 				<!-- /.lock-ui -->
 				<li class="dropdown" id="btn_lock_ui" style="display:none">
 					<a>
@@ -343,6 +342,12 @@
 	<!-- Bootstrap Core JavaScript -->
 	<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 -->
 	<script src="js/lib/metisMenu.min.js"></script>
 

assets/webconfig/js/content_index.js

@@ -56,6 +56,18 @@ $(document).ready(function () {
 		updateSessions();
 	}); // 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.serverInfo.sessions = event.response.data;
 		updateSessions();

assets/webconfig/js/settings.js

@@ -1,6 +1,7 @@
 var storedAccess;
 var storedLang;
 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'];
 //$.i18n.debug = true;
 
@@ -69,33 +70,7 @@ $(document).ready( function() {
 		$('#btn_setaccess').attr("disabled", true);
 	}
 
-	$('#btn_setlang').off().on('click',function() {
-		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');
-	});
+	initLanguageSelection();
 
 	//access
 	storedAccess = getStorage("accesslevel");

assets/webconfig/js/ui_utils.js

@@ -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)
 {
 	if(inst != 0)