create a skin picker in Manager, with possibility to set a custom skin name (#221)

modules/lemonldap-ng-manager/example/skins/default/manager.css

@@ -310,3 +310,15 @@ div.category ul {
 	-webkit-box-shadow:1px 1px 15px #555;
 }
 
+/* Skin selection */
+input#skinText {
+	text-align: center;
+}
+
+#content_skin img, #skinImagePicker img {
+	margin: 5px;
+}
+
+#skinImagePicker {
+	text-align: center;
+}

modules/lemonldap-ng-manager/example/skins/default/manager.js

@@ -24,6 +24,23 @@ $(document).ready(function(){
 		$("#help_content").slideToggle('fast');
 	});
 
+	/* Skin selector dialog */
+	$('#skinImagePicker').dialog({
+		autoOpen: false,
+		minWidth: 500,
+		modal: true
+	});
+	$('#content_skin button.current').click(function(){
+		$('#skinImagePicker').dialog( "open" );
+		return false;
+	});
+	$('#skinImagePicker button').click(function(){
+		var skin = $("img",this).attr('title');
+		changeSkinImage(skin);
+		$('#skinImagePicker').dialog( "close" );
+		return false;
+	});
+
 	/* Load default help */
 	$('#help_content').load(scriptname+'?help=default');
 
@@ -419,18 +436,28 @@ function formateSelectPassword(id,value){
 }
 function skinSelect(id) {
 	currentId=id;
-	formateSelect('skinText',[
-		'pastel=Pastel',
-		'impact=Impact',
-		'dark=Dark',
-		],lmdata(id));
 	changeSkinImage(lmdata(id));
 	display('skin',lmtext(id));
 }
+/* Change current skin */
 function changeSkinImage(skin) {
-	var imgsrc = imagepath + skin + '.png';
-	$('#content_skin>img').attr('src', imgsrc);
-	$('#content_skin>img').attr('alt', skin);
+	// Set field value
+	$('#skinText').val(skin);
+	// Set skin to custom if not a registered skin
+	// Custom field can the be edited
+	if ((skin!='pastel') && (skin!='dark') && (skin!='impact')){
+		skin = 'custom';
+		$('#skinText').attr('readonly','');
+	} else {
+		$('#skinText').attr('readonly','readonly');
+	}
+	// Set image source
+	var imgsrc = imagepath + 'images/portal-skins/' + skin + '.png';
+	$('#content_skin img.current').attr('src', imgsrc);
+	$('#content_skin img.current').attr('alt', skin);
+}
+/* Display skin selector */
+function skinImagePicker() {
 }
 function nameIdFormatParams(id) {
 	currentId=id;

modules/lemonldap-ng-manager/example/skins/default/manager.tpl

@@ -43,6 +43,13 @@
 <div id="popup" title="<lang en="Command result" fr="Résultat de la commande" />">
 </div>
 
+<!-- Skin picker-->
+<div id="skinImagePicker" title="<lang en="Choose a skin" fr="Choisir un thème" />">
+     <button><img src="<TMPL_VAR NAME="DIR">/images/portal-skins/pastel.png" alt="Pastel" title="pastel" /></button>
+     <button><img src="<TMPL_VAR NAME="DIR">/images/portal-skins/impact.png" alt="Impact" title="impact" /></button>
+     <button><img src="<TMPL_VAR NAME="DIR">/images/portal-skins/dark.png" alt="Dark" title="dark" /></button>
+     <button><img src="<TMPL_VAR NAME="DIR">/images/portal-skins/custom.png" alt="Custom" title="custom" /></button>
+</div>
 <!-- Container -->
 <div id="container" class="ui-widget ui-helper-clearfix">
 
@@ -356,9 +363,9 @@
 
     <!-- Skin -->
     <div id="content_skin" class="hidden">
-     <img src="" alt="" />
+     <button class="current"><img src="" alt="" class="current" /></button>
      <br /> 
-     <select id="skinText" onchange="changeSkinImage(this.value);return false;"></select>
+     <input id="skinText" type="text" readonly="readonly" />
      <br />
      <button onclick="setlminputdata(currentId,skinText);return false;" class="ui-state-default ui-corner-all">
      <lang en="Apply" fr="Appliquer" />