Use jQuery UI dialog for Manager popup (#218)

modules/lemonldap-ng-manager/MANIFEST

@@ -5,11 +5,7 @@ example/mrtg/mrtg.cfg.example
 example/scripts/lmConfigEditor
 example/sessions.pl
 example/skins/default/accordion.css
-example/skins/default/application_side_list.png
-example/skins/default/application_side_tree.png
 example/skins/default/arrow_refresh.png
-example/skins/default/bullet_orange.png
-example/skins/default/close_window.png
 example/skins/default/collapsable-last.gif
 example/skins/default/collapsable.gif
 example/skins/default/cross.png
@@ -20,10 +16,17 @@ example/skins/default/expandable.gif
 example/skins/default/folder_add.png
 example/skins/default/folder_delete.png
 example/skins/default/folder_edit.png
-example/skins/default/help.png
 example/skins/default/hframe.png
+example/skins/default/images/1downarrow_16x16.png
+example/skins/default/images/1rightarrow_16x16.png
+example/skins/default/images/application_side_list.png
+example/skins/default/images/application_side_tree.png
+example/skins/default/images/bullet_green.png
+example/skins/default/images/bullet_orange.png
+example/skins/default/images/bullet_red.png
+example/skins/default/images/help.png
+example/skins/default/images/information.png
 example/skins/default/impact.png
-example/skins/default/information.png
 example/skins/default/jquery-1.4.2.min.js
 example/skins/default/jquery-ui-1.8.5.custom.min.js
 example/skins/default/jquery.ajaxfileupload.js

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

@@ -172,18 +172,18 @@ option
 
 #css-switch a[alt=tree]
 {
-	background:url("application_side_tree.png") no-repeat;
+	background:url("images/application_side_tree.png") no-repeat;
 }
 
 #css-switch a[alt=accordion]
 {
-	background:url("application_side_list.png") no-repeat;
+	background:url("images/application_side_list.png") no-repeat;
 }
 
 #query-switch a
 {
     /* REPLACE IMAGE */
-    background:url("application_side_tree.png") no-repeat;
+    background:url("images/application_side_tree.png") no-repeat;
 }
 
 /* Help messages */
@@ -199,7 +199,7 @@ option
 #help ul
 {
 	list-style-position:inside;
-	list-style-image:url("bullet_orange.png");
+	list-style-image:url("images/bullet_orange.png");
 }
 
 #help pre
@@ -222,12 +222,12 @@ option
 
 #help .info
 {
-	background:#ddd url("information.png") no-repeat 5px;
+	background:#ddd url("images/information.png") no-repeat 5px;
 }
 
 #help .default
 {
-	background:#ddd url("help.png") no-repeat 5px;
+	background:#ddd url("images/help.png") no-repeat 5px;
 }
 
 #help tt
@@ -275,24 +275,32 @@ div.category h2 {
 div.category ul {
 	text-align: left;
 	list-style-position:inside;
-	list-style-image:url("bullet_orange.png");
-}
-.dragpopup {
-	position:absolute;
-	top:100px;
-	left:100px;
-	background-color:#fff;
-	border: solid 1px #f00;
-	border-top: solid 20px #f00;
-	padding: 5px 20px;
-	display:none;
-	cursor:move;
+	list-style-image:url("images/bullet_orange.png");
 }
-.closepopup{
-	position:absolute;
-	font-style:bold;
-	color:#fff;
-	top:-18px;
-	left:2px;
-	cursor:default;
+
+/* Popup */
+#popup h3
+{
+	text-align:center;
+	letter-spacing:2px;
+	border-bottom:1px solid #aaa;
+	padding:5px;
+	margin:5px 50px;
 }
+
+#popup ul
+{
+	list-style-position:inside;
+	list-style-image:url("images/bullet_green.png");
+	margin:0;
+	padding:0;
+}
+
+#popup ul.warning {
+	list-style-image:url("images/bullet_orange.png");
+}
+
+#popup ul.error {
+	list-style-image:url("images/bullet_red.png");
+}
+

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

@@ -10,8 +10,6 @@ if (treeautoclose.match('true')){ treeautoclose = true; } else { treeautoclose =
 if (treejquerycss.match('true')){ treejquerycss = true; } else { treejquerycss = false; }
 
 $(document).ready(function(){
-	/* Prepare popup */
-	$('#dragpopup').draggable();
 	/* Display/hide divs */
 	$("#buttons h1").click(function(){
 		$('#buttons h1 img').toggle();
@@ -217,7 +215,7 @@ function setlmfile(id,input){
 		dataType:'json',
 		success:function(data,status){
 			if(typeof(data.errors) != 'undefined' && data.errors != ''){
-				popup('<h3>Request failed</h3> Error code: '+data.errors+', ');
+				popup('<h3>Request failed</h3><ul class="error"><li><strong>Error code:</strong> '+data.errors+'</li></ul>');
 			}else{
 				data.content = data.content.replace(/&lt;/g,'<').replace(/&gt;/g,'>');
 				setlmdata(id,data.content);
@@ -226,7 +224,7 @@ function setlmfile(id,input){
 			}
 		},
 		error:function(xhr, ajaxOptions, thrownError){
-			popup('<h3>Request failed</h3> Error code: '+xhr.status+', '+thrownError);
+			popup('<h3>Request failed</h3><ul class="error"><li><strong>Error code:</strong> '+xhr.status+', '+thrownError+'</li></ul>');
 		}
 	});
 	/* Remove global event on loading image */
@@ -716,7 +714,7 @@ function reloadAuthParams() {
 			}
 		},
 		error:function(xhr, ajaxOptions, thrownError){
-			popup('<h3>Request failed</h3> Error code: '+xhr.status+', '+thrownError);
+			popup('<h3>Request failed</h3><ul class="error"><li><strong>Error code:</strong> '+xhr.status+', '+thrownError+'</li></ul>');
 		}
 	});
 }
@@ -835,13 +833,15 @@ function uploadConf(f){
 		success:function(data){
 			if(data==null){networkPb()}
 			else{
-				var c='<h3>'+data.result.msg+'</h3><dl>';
+				var c='<h3>'+data.result.msg+'</h3>';
 				if(data.result.cfgNum<=0){
 					if(typeof(data.errors)!='undefined'){
 						c+='<h4>Errors</h4>';
+						c+='<ul class="error">';
 						for(m in data.errors){
-							c+='<dt>'+m+'</dt><dd>'+data.errors[m]+'</dd>';
+							c+='<li><strong>'+m+':</strong> '+data.errors[m]+'</li>';
 						}
+						c+='</ul>';
 					}
 				}
 				else{
@@ -856,16 +856,18 @@ function uploadConf(f){
 				}
 				if(typeof(data.warnings)!='undefined'){
 					c+='<h4>Warnings</h4>';
+					c+='<ul class="warning">';
 					for(m in data.warnings){
-						c+='<dt>'+m+'</dt><dd>'+data.warnings[m]+'</dd>';
+						c+='<li><strong>'+m+':</strong> '+data.warnings[m]+'</li>';
 					}
+						c+='</ul>';
 				}
-				c+='</dl>'+data.result.other;
+				c+='<p>'+data.result.other+'</p>';
 				if(typeof(data.applyStatus)!='undefined'){
 					c+='<h4>Application status</h4>';
 					c+='<ul>';
 					for(m in data.applyStatus){
-						c+='<li>'+m+': '+data.applyStatus[m]+'</li>';
+						c+='<li><strong>'+m+':</strong> '+data.applyStatus[m]+'</li>';
 					}
 					c+='</ul>';
 				}
@@ -873,7 +875,7 @@ function uploadConf(f){
 			}
 		},
 		error:function(xhr, ajaxOptions, thrownError){
-			popup('<h3>Request failed</h3> Error code: '+xhr.status+', '+thrownError);
+			popup('<h3>Request failed</h3><ul class="error"><li><strong>Error code:</strong> '+xhr.status+', '+thrownError+'</li></ul>');
 		}
 	});
 }
@@ -983,7 +985,7 @@ function generateFile(id){
 				}
 			},
 			error:function(xhr, ajaxOptions, thrownError){
-				popup('<h3>Request failed</h3> Error code: '+xhr.status+', '+thrownError);
+				popup('<h3>Request failed</h3><ul class="error"><li><strong>Error code:</strong> '+xhr.status+', '+thrownError+'</li></ul>');
 			}
 		});
 		$('#button-loadimg').unbind('ajaxStart');
@@ -1192,20 +1194,22 @@ function delPost(){
 function delPostData(){
 	delKey();
 }
+
+/* Popup */
 function popup(html){
-	$('#textpopup').html(html);
-	$('#dragpopup').center();
-	$('#dragpopup').fadeIn('fast');
+	$('#popup').html(html);
+	$('#popup').dialog({
+		show: 'slide',
+		hide: 'explode',
+		buttons: {
+			Ok: function() {
+			$( this ).dialog( "close" );
+			},
+		},
+	});
 }
+
 function networkPb(){
-	popup('<h2>Network problem</h2>');
-}
-jQuery.fn.center = function () {
-	var v=Math.max($(window).height()-this.height(),200)/2+$(window).scrollTop();
-	var h=Math.max($(window).width()-this.width(),200 )/2+$(window).scrollLeft();
-	this.css("top",h+"px");
-	this.height($(window).height()-2*h-15);
-	this.css("left",v+"px");
-	this.width($(window).width()-2*v-15);
-	return this;
+	popup('<h3>Network problem</h3>');
 }
+

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

@@ -40,13 +40,7 @@
 <body>
 
 <!-- Popup -->
-<div id="dragpopup" class="dragpopup ui-corner-all">
-<div class="closepopup">
-	<span onclick="$('#dragpopup').hide();">
-		<img src="<TMPL_VAR NAME="DIR">/close_window.png"/>
-	</span>
-</div>
-<div id="textpopup"></div>
+<div id="popup" title="<lang en="Command result" fr="Résultat de la commande" />">
 </div>
 
 <!-- Container -->