From 5023c3d684f70f8cb67232a79528f6bb04fc39ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Oudot?= <clement@oodo.net>
Date: Mon, 22 Nov 2010 10:24:54 +0000
Subject: [PATCH] Update Impact skin to display categories and applications
 (#246)

---
 modules/lemonldap-ng-portal/MANIFEST          |   3 +-
 .../impact/{impact.css => css/styles.css}     |  65 ++++++++---
 .../example/skins/impact/footer.tpl           |   4 +-
 .../example/skins/impact/header.tpl           |   5 +-
 .../example/skins/impact/impact.js            |  30 -----
 .../example/skins/impact/menu.tpl             | 110 +++++++++++++++++-
 .../example/skins/pastel/footer.tpl           |   2 +-
 .../example/skins/pastel/menu.tpl             |   5 -
 8 files changed, 161 insertions(+), 63 deletions(-)
 rename modules/lemonldap-ng-portal/example/skins/impact/{impact.css => css/styles.css} (83%)
 delete mode 100644 modules/lemonldap-ng-portal/example/skins/impact/impact.js

diff --git a/modules/lemonldap-ng-portal/MANIFEST b/modules/lemonldap-ng-portal/MANIFEST
index c2a503103..5e861494f 100644
--- a/modules/lemonldap-ng-portal/MANIFEST
+++ b/modules/lemonldap-ng-portal/MANIFEST
@@ -82,6 +82,7 @@ example/skins/dark/password.tpl
 example/skins/dark/standardform.tpl
 example/skins/impact/authmessage.tpl
 example/skins/impact/confirm.tpl
+example/skins/impact/css/styles.css
 example/skins/impact/error.tpl
 example/skins/impact/footer.tpl
 example/skins/impact/header.tpl
@@ -92,8 +93,6 @@ example/skins/impact/images/logo-lock.png
 example/skins/impact/images/logo-ok.png
 example/skins/impact/images/logo-warn.png
 example/skins/impact/images/logo_lemonldap-ng_400px.png
-example/skins/impact/impact.css
-example/skins/impact/impact.js
 example/skins/impact/info.tpl
 example/skins/impact/login.tpl
 example/skins/impact/mail.tpl
diff --git a/modules/lemonldap-ng-portal/example/skins/impact/impact.css b/modules/lemonldap-ng-portal/example/skins/impact/css/styles.css
similarity index 83%
rename from modules/lemonldap-ng-portal/example/skins/impact/impact.css
rename to modules/lemonldap-ng-portal/example/skins/impact/css/styles.css
index f9c190006..df67a4b49 100644
--- a/modules/lemonldap-ng-portal/example/skins/impact/impact.css
+++ b/modules/lemonldap-ng-portal/example/skins/impact/css/styles.css
@@ -7,7 +7,7 @@
 
 
 body {
-  background:#F0F0F0 url("images/bg.png") repeat-x;
+  background:#F0F0F0 url("../images/bg.png") repeat-x;
   font-size: 0.8em;
   font-family:Arial, Helvetica, Verdana;
 }
@@ -35,7 +35,7 @@ form input[name=user] {
   border: 1px solid #aaa;
   padding: 5px;
   width: 200px;
-  background: #FFFFFF url("../common/user_suit.png") 5px 5px no-repeat;
+  background: #FFFFFF url("../../common/user_suit.png") 5px 5px no-repeat;
   padding-left: 25px;
 }
 
@@ -43,7 +43,7 @@ form input[type=password] {
   border: 1px solid #aaa;
   padding: 5px;
   width: 200px;
-  background: #FFFFFF url("../common/key.png") 5px 5px no-repeat;
+  background: #FFFFFF url("../../common/key.png") 5px 5px no-repeat;
   padding-left: 25px;
 }
 
@@ -51,7 +51,7 @@ form input[name=mail] {
   border: 1px solid #aaa;
   padding: 5px;
   width: 200px;
-  background: #FFFFFF url("../common/email.png") 5px 5px no-repeat;
+  background: #FFFFFF url("../../common/email.png") 5px 5px no-repeat;
   padding-left: 25px;
 }
 
@@ -59,7 +59,7 @@ form input[name=openid_identifier] {
   border: 1px solid #aaa;
   padding: 5px;
   width: 200px;
-  background: #FFFFFF url("../common/openid-16x16.gif") 5px 5px no-repeat;
+  background: #FFFFFF url("../../common/openid-16x16.gif") 5px 5px no-repeat;
   padding-left: 25px;
 }
 
@@ -144,7 +144,6 @@ div.authLogo {
 
 #content-all {
   padding: 10px;
-  height: 322px;
 }
 
 #content-all table {
@@ -169,7 +168,6 @@ div.authLogo {
 
 #content-all-info2 {
   text-align: center;
-  height: 165px;
   padding: 10px;
   margin-bottom: 15px;
   background-color: #D5EFD1;
@@ -211,7 +209,6 @@ div.authLogo {
 }
 
 #content-right {
-  height: 320px;
   margin-left: 400px;
   padding: 10px;
   background-color: #D5EFD1;
@@ -262,16 +259,56 @@ div.authLogo {
 /* Applications layer                                                         */
 /* -------------------------------------------------------------------------- */
 
-#appslist ul.category {
-  display: none;
+.clearfix {
+	clear:both;
 }
 
-#appslist div.appsdesc {
-  display: none;
+div.category {
+	border:1px solid #B5CFB6;
+	-moz-border-radius:10px 10px 10px 10px;
+	-webkit-border-radius:10px 10px 10px 10px;
+	margin:10px 50px;
+	padding:0;
+	clear:both;
 }
 
-#appsselector {
-  width: 300px;
+div.category h3.catname {
+	background-color:#C7DFC3;
+	-moz-border-radius:10px 10px 0 0;
+	margin:0;
+	padding:10px;
+}
+
+div.application {
+	margin:10px;
+	padding:5px;
+	float:left;
+	width:200px;
+}
+
+div.application:hover {
+	background:#C7DFC3;
+}
+
+div.application img.applogo {
+	width:32px;
+	height:32px;
+	float:left;
+}
+
+div.application h4.appname {
+	text-align:left;
+	padding:0 5px;
+	margin:0 0 0 40px;
+}
+
+div.application p.appdesc {
+	text-align:left;
+	padding:0 5px;
+	margin:0 0 0 40px;
+	text-size:8pt;
+	color:#000;
+	font-style:italic;
 }
 
 /* -------------------------------------------------------------------------- */
diff --git a/modules/lemonldap-ng-portal/example/skins/impact/footer.tpl b/modules/lemonldap-ng-portal/example/skins/impact/footer.tpl
index fe79b91dc..c58152d5d 100644
--- a/modules/lemonldap-ng-portal/example/skins/impact/footer.tpl
+++ b/modules/lemonldap-ng-portal/example/skins/impact/footer.tpl
@@ -1,10 +1,10 @@
   <div id="layout-footer">
     <p>
       <lang en="Service provided by" fr="Ce service est fourni par" />
-      <a href="http://lemonldap.ow2.org" target="_blank">LemonLDAP::NG</a>,
+      <a href="http://lemonldap-ng.org" target="_blank">LemonLDAP::NG</a>,
       <lang en="free software covered by the GPL license" fr="logiciel libre prot&eacute;g&eacute; par la licence GPL" />.
     </p>
-    <a href="http://lemonldap.ow2.org" target="_blank"><img src="/skins/<TMPL_VAR NAME="SKIN">/images/logo_lemonldap-ng_400px.png" alt="LemonLDAP::NG logo" width="120" /></a>
+    <a href="http://lemonldap-ng.org" target="_blank"><img src="/skins/<TMPL_VAR NAME="SKIN">/images/logo_lemonldap-ng_400px.png" alt="LemonLDAP::NG logo" width="120" /></a>
   </div>
 
 </div>
diff --git a/modules/lemonldap-ng-portal/example/skins/impact/header.tpl b/modules/lemonldap-ng-portal/example/skins/impact/header.tpl
index 47fbf67c3..4a4325b84 100644
--- a/modules/lemonldap-ng-portal/example/skins/impact/header.tpl
+++ b/modules/lemonldap-ng-portal/example/skins/impact/header.tpl
@@ -6,7 +6,7 @@
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <meta http-equiv="Content-Script-Type" content="text/javascript" />
 	<meta http-equiv="cache-control" content="no-cache" />
-        <link rel="stylesheet" type="text/css" href="/skins/<TMPL_VAR NAME="SKIN">/impact.css" />
+        <link rel="stylesheet" type="text/css" href="/skins/<TMPL_VAR NAME="SKIN">/css/styles.css" />
         <link href="/skins/common/favicon.ico" rel="icon" type="image/x-icon" />
         <link href="/skins/common/favicon.ico" rel="shortcut icon" />
         <TMPL_IF NAME="PROVIDERURI">
@@ -24,10 +24,7 @@
             var login='<TMPL_VAR NAME="LOGIN">';
             var newwindow='<TMPL_VAR NAME="NEWWINDOW">';
             var antiframe='<TMPL_VAR NAME="ANTIFRAME">';
-            var confirmlogoutmsg='<lang en="Are your sure you want to disconnect?" fr="&Ecirc;tes vous s&ucirc;r de vouloir vous d&eacute;connecter ?" />';
-            var confirmlogouttitle='<lang en="Confirmation" fr="Confirmation" />';
         //]]></script>
-        <script type="text/javascript" src="/skins/<TMPL_VAR NAME="SKIN">/impact.js"></script>
         <script type="text/javascript" src="/skins/common/portal.js"></script>
 </head>
 <body>
diff --git a/modules/lemonldap-ng-portal/example/skins/impact/impact.js b/modules/lemonldap-ng-portal/example/skins/impact/impact.js
deleted file mode 100644
index 809d9d9f2..000000000
--- a/modules/lemonldap-ng-portal/example/skins/impact/impact.js
+++ /dev/null
@@ -1,30 +0,0 @@
-
-$(document).ready(function(){
-	var select='<select id="appsselector">';
-	$('#appslist').find('li.appname').each(function(index){
-		var link=$(this).find('a').get(0);
-		var title=$(link).html();
-		var url=$(link).attr('href');
-		select+='<option value="'+url+'">'+title+'</option>';
-	});
-	select+='</select>';
-	select+='<input type="button" onclick="goToApplication();return false;" value="OK" />';
-	$('#appslist').append(select);
-	$('#logout').hide();
-});
-
-function goToApplication(){
-	var select=$('#appsselector option:selected').get(0);
-	var url=$(select).attr('value');
-	location.href=url;
-}
-
-function showLogoutBox(url){
-	$('#layout').fadeTo('fast',0.1);
-	jConfirm(confirmlogoutmsg, confirmlogouttitle, function(r) {
-		$('#layout').fadeTo('fast',1);
-		if(r){location.href=url;};
-	});
-	return false;
-}
-
diff --git a/modules/lemonldap-ng-portal/example/skins/impact/menu.tpl b/modules/lemonldap-ng-portal/example/skins/impact/menu.tpl
index dc7666845..e412b4bef 100644
--- a/modules/lemonldap-ng-portal/example/skins/impact/menu.tpl
+++ b/modules/lemonldap-ng-portal/example/skins/impact/menu.tpl
@@ -40,12 +40,113 @@
 
         <TMPL_IF NAME="Appslist">
         <div id="appslist">
-          <br/><br/>
           <p class="text-label">
             <lang en="Choose an application your are allowed to access to" fr="Choisissez une application &agrave; laquelle vous &ecirc;tes autoris&eacute;es &agrave; acc&eacute;der" /> :
           </p>
-          <TMPL_VAR NAME="APPSLIST_MENU">
-          <TMPL_VAR NAME="APPSLIST_DESC">
+                <TMPL_LOOP NAME="APPSLIST_LOOP">
+                <!-- Template loops -->
+
+                <TMPL_IF NAME="category">
+                <!-- Category -->
+
+                <div class="category cat-level-<TMPL_VAR NAME="catlevel"> <TMPL_VAR NAME="catid">">
+                <h3 class="catname"><TMPL_VAR NAME="catname"></h3>
+
+                <TMPL_IF applications>
+                <!-- Applications -->
+
+                <TMPL_LOOP NAME=applications>
+
+                <!-- Application -->
+
+                <div class="application <TMPL_VAR NAME="appid">">
+
+                <!-- Logo (optional) -->
+                <TMPL_IF NAME="applogo">
+                <img    src="/skins/common/apps/<TMPL_VAR NAME="applogo">"
+                        class="applogo <TMPL_VAR NAME="appid">"
+                        alt="<TMPL_VAR NAME="appname">" />
+                </TMPL_IF>
+
+                <!-- Name and link (mandatory) -->
+                <h4 class="appname <TMPL_VAR NAME="appid">">
+                <a href="<TMPL_VAR NAME="appuri">" alt="<TMPL_VAR NAME="appname">">
+                <TMPL_VAR NAME="appname">
+                </a>
+                </h4>
+
+                <!-- Logo (optional) -->
+                <TMPL_IF NAME="appdesc">
+                <p class="appdesc <TMPL_VAR NAME="appid">">
+                <TMPL_VAR NAME="appdesc">
+                </p>
+                </TMPL_IF>
+
+                <div class="clearfix"></div>
+                </div>
+
+                <!-- End of applications loop -->
+                </TMPL_LOOP>
+                </TMPL_IF>
+
+                <TMPL_IF categories>
+                <!-- Sub categories -->
+
+                <TMPL_LOOP NAME=categories>
+                <div class="category cat-level-<TMPL_VAR NAME="catlevel">">
+                <h3 class="catname"><TMPL_VAR NAME="catname"></h3>
+
+                <TMPL_IF applications>
+                <!-- Applications in sub category -->
+
+                <TMPL_LOOP NAME=applications>
+
+                <!-- Application in sub category-->
+
+                <div class="application <TMPL_VAR NAME="appid">">
+
+                <!-- Logo (optional) -->
+                <TMPL_IF NAME="applogo">
+                <img    src="/skins/common/apps/<TMPL_VAR NAME="applogo">"
+                        class="applogo <TMPL_VAR NAME="appid">"
+                        alt="<TMPL_VAR NAME="appname">" />
+                </TMPL_IF>
+
+                <!-- Name and link (mandatory) -->
+                <h4 class="appname <TMPL_VAR NAME="appid">">
+                <a href="<TMPL_VAR NAME="appuri">" alt="<TMPL_VAR NAME="appname">">
+                <TMPL_VAR NAME="appname">
+                </a>
+                </h4>
+
+                <!-- Logo (optional) -->
+                <TMPL_IF NAME="appdesc">
+                <p class="appdesc <TMPL_VAR NAME="appid">">
+                <TMPL_VAR NAME="appdesc">
+                </p>
+                </TMPL_IF>
+
+                <div class="clearfix"></div>
+                </div>
+
+                <!-- End of applications loop -->
+                </TMPL_LOOP>
+                </TMPL_IF>
+
+                <div class="clearfix"></div>
+                </div>
+
+                <!-- End of sub categories loop -->
+                </TMPL_LOOP>
+                </TMPL_IF>
+
+                <div class="clearfix"></div>
+                </div>
+
+                <!-- End of categories loop -->
+                </TMPL_IF>
+                </TMPL_LOOP>
+
         </div>
         </TMPL_IF>
 
@@ -55,9 +156,8 @@
 
         <TMPL_IF NAME="Logout">
         <div id="logout">
-          <br/><br/><br/>
           <p class="text-label">
-            <lang en="Are you sure ?" fr="&Ecirc;tes vous s&ucirc;r ?" /> :
+            <lang en="Are you sure?" fr="&Ecirc;tes vous s&ucirc;r ?" />
           </p>
           <button type="submit" class="positive" onclick="location.href='<TMPL_VAR NAME="LOGOUT_URL">';return false;">
             <lang en="I'm sure" fr="Je suis s&ucirc;r" />
diff --git a/modules/lemonldap-ng-portal/example/skins/pastel/footer.tpl b/modules/lemonldap-ng-portal/example/skins/pastel/footer.tpl
index b7e4e7b7d..78585f56c 100644
--- a/modules/lemonldap-ng-portal/example/skins/pastel/footer.tpl
+++ b/modules/lemonldap-ng-portal/example/skins/pastel/footer.tpl
@@ -1,7 +1,7 @@
         <div id="footer">
     <p>
       <lang en="Service provided by" fr="Ce service est fourni par" />
-      <a href="http://lemonldap.ow2.org" target="_blank">LemonLDAP::NG</a>,
+      <a href="http://lemonldap-ng.org" target="_blank">LemonLDAP::NG</a>,
       <lang en="free software covered by the GPL license" fr="logiciel libre prot&eacute;g&eacute; par la licence GPL" />.
     </p>
 	</div>
diff --git a/modules/lemonldap-ng-portal/example/skins/pastel/menu.tpl b/modules/lemonldap-ng-portal/example/skins/pastel/menu.tpl
index fd6bf9ba3..050701776 100644
--- a/modules/lemonldap-ng-portal/example/skins/pastel/menu.tpl
+++ b/modules/lemonldap-ng-portal/example/skins/pastel/menu.tpl
@@ -34,11 +34,6 @@
 	<TMPL_IF NAME="Appslist">
 		<div id="appslist">
 
-		<!-- Plain HTML (no loops)
-		<TMPL_VAR NAME="APPSLIST_MENU">
-		<TMPL_VAR NAME="APPSLIST_DESC">
-		-->
-
 		<TMPL_LOOP NAME="APPSLIST_LOOP">
 		<!-- Template loops -->