Update Impact skin to display categories and applications (#246)

This commit is contained in:
Clément Oudot 2010-11-22 10:24:54 +00:00
parent a2dac450de
commit 5023c3d684
8 changed files with 161 additions and 63 deletions

View File

@ -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

View File

@ -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;
}
/* -------------------------------------------------------------------------- */

View File

@ -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>

View File

@ -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>

View File

@ -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;
}

View File

@ -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" />

View File

@ -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>

View File

@ -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 -->