Skip to content
GitLab
Commit b289a536 authored by Clément OUDOT's avatar Clément OUDOT
Browse files

Begin Manager graphical customization

parent 4657e82a
Expand all Hide whitespace changes
Inline Side-by-side
modules/lemonldap-ng-manager/MANIFEST
View file @ b289a536
......@@ -45,7 +45,8 @@ example/skins/default/folder_add.png
example/skins/default/folder_delete.png
example/skins/default/folder_edit.png
example/skins/default/hframe.png
example/skins/default/jquery.js
example/skins/default/jquery-1.3.2.min.js
example/skins/default/jquery-ui-1.7.2.custom.min.js
example/skins/default/leaf-last.gif
example/skins/default/leaf.gif
example/skins/default/line_bg.gif
......
modules/lemonldap-ng-manager/example/skins/default/manager.css
View file @ b289a536
/*
* Lemonldap::NG styles
*
* Coding rules:
* selector
* {
* property:value;
* }
*/
/* Main */
body
{
font: normal 12px arial, tahoma, helvetica, sans-serif;
font:normal 10pt sans-serif;
margin:0;
padding:10px;
background:#000;
}
.content
{
display:block;
}
.hidden
{
display:none;
}
/* Divs */
#page
{
background:#eee;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#menu
{
float:left;
padding:10px;
width:30%;
}
#menu img.logo
{
margin:0 0 10px 0;
}
#data
{
margin:0 0 0 30%;
padding:10px;
}
#help
{
border:3px solid #bbb;
padding:0;
width:80%;
background:#eee;
}
#help h1
{
text-align:center;
font-size:12pt;
padding:2px;
margin:0;
background:#ddd;
cursor:move;
}
#help_content
{
padding:5px;
overflow:auto;
}
/* jQuery Simple Tree */
.simpleTree
{
overflow:auto;
margin:0;
padding:0;
/*
* width: 250px;
* height:350px;
* overflow:auto;
* border: 1px solid #444444;
* */
}
.simpleTree li
{
list-style: none;
margin:0;
padding:0 0 0 34px;
line-height: 14px;
list-style: none;
margin:0;
padding:0 0 0 34px;
line-height: 14px;
}
.simpleTree li span
{
display:inline;
clear: left;
white-space: nowrap;
display:inline;
clear: left;
white-space: nowrap;
}
.simpleTree ul
{
margin:0;
padding:0;
margin:0;
padding:0;
}
.simpleTree .root
{
margin-left:-16px;
background: url(root.gif) no-repeat 16px 0 #ffffff;
margin-left:-16px;
background: url(root.gif) no-repeat 16px 0;
}
.simpleTree .line
{
margin:0 0 0 -16px;
padding:0;
line-height: 3px;
height:3px;
font-size:3px;
background: url(line_bg.gif) 0 0 no-repeat transparent;
margin:0 0 0 -16px;
padding:0;
line-height: 3px;
height:3px;
font-size:3px;
background: url(line_bg.gif) 0 0 no-repeat transparent;
}
.simpleTree .line-last
{
margin:0 0 0 -16px;
padding:0;
line-height: 3px;
height:3px;
font-size:3px;
background: url(spacer.gif) 0 0 no-repeat transparent;
margin:0 0 0 -16px;
padding:0;
line-height: 3px;
height:3px;
font-size:3px;
background: url(spacer.gif) 0 0 no-repeat transparent;
}
.simpleTree .line-over
{
margin:0 0 0 -16px;
padding:0;
line-height: 3px;
height:3px;
font-size:3px;
background: url(line_bg_over.gif) 0 0 no-repeat transparent;
margin:0 0 0 -16px;
padding:0;
line-height: 3px;
height:3px;
font-size:3px;
background: url(line_bg_over.gif) 0 0 no-repeat transparent;
}
.simpleTree .line-over-last
{
margin:0 0 0 -16px;
padding:0;
line-height: 3px;
height:3px;
font-size:3px;
background: url(line_bg_over_last.gif) 0 0 no-repeat transparent;
margin:0 0 0 -16px;
padding:0;
line-height: 3px;
height:3px;
font-size:3px;
background: url(line_bg_over_last.gif) 0 0 no-repeat transparent;
}
.simpleTree .folder-open
{
margin-left:-16px;
background: url(collapsable.gif) 0 -2px no-repeat #fff;
margin-left:-16px;
background: url(collapsable.gif) 0 -2px no-repeat;
}
.simpleTree .folder-open-last
{
margin-left:-16px;
background: url(collapsable-last.gif) 0 -2px no-repeat #fff;
margin-left:-16px;
background: url(collapsable-last.gif) 0 -2px no-repeat;
}
.simpleTree .folder-close
{
margin-left:-16px;
background: url(expandable.gif) 0 -2px no-repeat #fff;
margin-left:-16px;
background: url(expandable.gif) 0 -2px no-repeat;
}
.simpleTree .folder-close-last
{
margin-left:-16px;
background: url(expandable-last.gif) 0 -2px no-repeat #fff;
margin-left:-16px;
background: url(expandable-last.gif) 0 -2px no-repeat;
}
.simpleTree .doc
{
margin-left:-16px;
background: url(leaf.gif) 0 -1px no-repeat #fff;
margin-left:-16px;
background: url(leaf.gif) 0 -1px no-repeat;
}
.simpleTree .doc-last
{
margin-left:-16px;
background: url(leaf-last.gif) 0 -1px no-repeat #fff;
margin-left:-16px;
background: url(leaf-last.gif) 0 -1px no-repeat;
}
.simpleTree .ajax
{
background: url(spinner.gif) no-repeat 0 0 #ffffff;
height: 16px;
display:none;
background: url(spinner.gif) no-repeat 0 0;
height: 16px;
display:none;
}
.simpleTree .ajax li
{
display:none;
margin:0;
padding:0;
display:none;
margin:0;
padding:0;
}
.simpleTree .trigger
{
display:inline;
margin-left:-32px;
width: 28px;
height: 11px;
cursor:pointer;
display:inline;
margin-left:-32px;
width: 28px;
height: 11px;
cursor:pointer;
}
.simpleTree .text
{
cursor: default;
cursor: default;
}
.simpleTree .active
{
cursor: default;
background-color:#F7BE77;
padding:0px 2px;
border: 1px dashed #444;
cursor: default;
background-color:#F7BE77;
padding:0px 2px;
border: 1px dashed #444;
}
#drag_container
{
background:#ffffff;
color:#000;
font: normal 11px arial, tahoma, helvetica, sans-serif;
border: 1px dashed #767676;
background:#ffffff;
color:#000;
font: normal 11px arial, tahoma, helvetica, sans-serif;
border: 1px dashed #767676;
}
#drag_container ul
{
list-style: none;
padding:0;
margin:0;
list-style: none;
padding:0;
margin:0;
}
#drag_container li
{
list-style: none;
background-color:#ffffff;
line-height:18px;
white-space: nowrap;
padding:1px 1px 0px 16px;
margin:0;
list-style: none;
background-color:#ffffff;
line-height:18px;
white-space: nowrap;
padding:1px 1px 0px 16px;
margin:0;
}
#drag_container li span
{
padding:0;
padding:0;
}
#drag_container li.doc, #drag_container li.doc-last
{
background: url(leaf.gif) no-repeat -17px 0 #ffffff;
background: url(leaf.gif) no-repeat -17px 0 #ffffff;
}
#drag_container .folder-close, #drag_container .folder-close-last
{
background: url(expandable.gif) no-repeat -17px 0 #ffffff;
background: url(expandable.gif) no-repeat -17px 0 #ffffff;
}
#drag_container .folder-open, #drag_container .folder-open-last
{
background: url(collapsable.gif) no-repeat -17px 0 #ffffff;
background: url(collapsable.gif) no-repeat -17px 0 #ffffff;
}
.content
{
display: block;
}
.hidden
{
display: none;
}
/* xSplitter Styles */
.clsSplitter
{
position: absolute;
overflow: hidden;
visibility: hidden;
margin: 0;
padding: 0;
background: #FFF;
border: none;
}
.clsPane
{
position: absolute;
overflow: auto;
visibility: visible;
margin: 0;
padding: 0;
background: #FFF;
border: none;
}
.clsDragBar
{
position: absolute;
overflow: hidden;
visibility: visible;
margin: 0;
padding: 0;
background: lightgrey;
border: none;
}
.clsTemporaryContainer /* replace this with something like xFenster */
{
position: relative;
overflow: visible;
visibility: visible;
background: transparent;
border: none;
}
#idSplitter3 { border: 4px solid lightgrey; }
modules/lemonldap-ng-manager/example/skins/default/manager.js
View file @ b289a536
/**
* Lemonldap::NG Manager jQuery scripts
*/
var simpleTreeCollection;
$(document).ready(function(){
simpleTreeCollection = $(".simpleTree").simpleTree({
/* Drag Help (require jQuery UI)*/
$("#help").draggable({ handle: 'h1' });
$("#help").resizable();
/* Simple Tree */
simpleTreeCollection = $(".simpleTree").simpleTree({
autoclose: false,
drag: false,
afterClick:function(node){
var span=$('span:first',node);
$('#help').load(scriptname+'?help='+span.attr('help'));
$('#help_content').load(scriptname+'?help='+span.attr('help'));
},
afterDblClick:function(node){
//alert("text-"+$("span:first",node).text());
......@@ -19,20 +30,9 @@ simpleTreeCollection = $(".simpleTree").simpleTree({
animate:true
//,docToFolderConvert:true
});
var w=xClientWidth()-12;
var h=xClientHeight()-12;
//var h=window.outerHeight;
s32=new xSplitter('idSplitter32',0,0,0,0,false,6,h/2,h/8,h/8,true,0);
s3=new xSplitter('idSplitter3',0,0,w,h,true,6,w/4,w/8,w/8,true,4,null,s32);
xAddEventListener(window,'resize',win_onresize,false);
}
);
});
var currentId;
function win_onresize(){
var w=xClientWidth()-12;
var h=xClientHeight()-12;
s3.paint(w,h,w/4,w/5);
}
function lmtext(id){
return $('#text_'+id).attr('name');
}
......
modules/lemonldap-ng-manager/example/skins/default/manager.tpl
View file @ b289a536
......@@ -5,8 +5,8 @@
<head>
<title>Lemonldap::NG Manager</title>
<link rel="stylesheet" type="text/css" href="<TMPL_VAR NAME="DIR">/manager.css" />
<script src="<TMPL_VAR NAME="DIR">/xlib.js" type="text/JavaScript"></script>
<script src="<TMPL_VAR NAME="DIR">/jquery.js" type="text/JavaScript"></script>
<script src="<TMPL_VAR NAME="DIR">/jquery-1.3.2.min.js" type="text/JavaScript"></script>
<script src="<TMPL_VAR NAME="DIR">/jquery-ui-1.7.2.custom.min.js" type="text/JavaScript"></script>
<script src="<TMPL_VAR NAME="DIR">/tree.js" type="text/JavaScript"></script>
<script type="text/JavaScript">//<![CDATA[
var scriptname='<TMPL_VAR NAME="SCRIPT_NAME">';var imagepath='<TMPL_VAR NAME="DIR">/';
......@@ -15,81 +15,107 @@ var scriptname='<TMPL_VAR NAME="SCRIPT_NAME">';var imagepath='<TMPL_VAR NAME="DI
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
</head>
<body>
<div class="clsTemporaryContainer">
<div style="visibility: visible;" id="idSplitter3" class="clsSplitter">
<div style="z-index: 2;" id="gauche" class="clsPane">
<img style="padding:4px;padding-left:12px;" alt="Lemonldap::NG" src="<TMPL_VAR NAME="DIR">/logo_lemonldap-ng.png"/><br/>&nbsp;
<!-- Main -->
<div id="page">
<!-- Menu (tree) -->
<div id="menu">
<img alt="Lemonldap::NG" src="<TMPL_VAR NAME="DIR">/logo_lemonldap-ng.png" class="logo" />
<TMPL_VAR NAME="MENU">
</div><!-- end Pane -->
<div style="overflow: hidden; z-index: 2;" id="droit" class="clsPane">
<div style="visibility: visible;" id="idSplitter32" class="clsSplitter">
<div style="z-index: 2;overflow:auto;height:500px;" id="haut" class="clsPane">
<h2 id="content_title">Lemonldap::NG Manager</h2>
</div>
<!-- Data -->
<div id="data">
<h1>Lemonldap::NG Manager</h1>
<!-- All buttons -->
<div id="buttons">
<button id="bsave" onclick="uploadConf()" >
<lang en="Save" fr="Sauver" />
</button>
<button id="bapply" onclick="$.post(scriptname,{apply:1},function(data){return 1},'html');" >
<lang en="Apply" fr="Appliquer" />
</button>
<button id="newkbr" style="display:none;" onclick="newKeyR();return false;">
<lang en="New key" fr="Nouvelle clef" />
</button>
<button id="newrbr" style="display:none;" onclick="newRuleR();return false;">
<lang en="New rule" fr="Nouvelle règle" />
</button>
<button id="newkb" style="display:none;" onclick="newKey();return false;">
<lang en="New key" fr="Nouvelle clef" />
</button>
<button id="newrb" style="display:none;" onclick="newRule();return false;">
<lang en="New rule" fr="Nouvelle règle" />
</button>
<button id="delkb" style="display:none;" onclick="delKey();return false;">
<lang en="Delete key" fr="Effacer la clef" />
</button>
</div>
<form action="#" onsubmit="return false">
<!-- Form content -->
<div id="content">
<!-- Default text -->
<div id="content_default" class="content">
Default
<lang en="Click on the configuration tree to edit parameters" fr="Cliquer sur l'arbre de configuration pour éditer les paramètres" />
</div>
<!-- Contextual text -->
<div id="content_text" class="hidden">
<input type="text" id="text" onchange="setlmdata(currentId,this.value)"/>
<button onclick="return false">Valider</button>
</div>
<!-- Specific to securedCookie (TODO push in _Struct.pm -->
<div id="content_securedCookie" class="hidden">
<input id="securedCookie0" type="radio" name="securedCookie" value="0" onclick="setlmdata('li_bGlfL3NlY3VyZWRDb29raWU1','0')" /> Cookie non sécurisé <br/>
<input id="securedCookie1" type="radio" name="securedCookie" value="1" onclick="setlmdata('li_bGlfL3NlY3VyZWRDb29raWU1','1')" /> Cookie sécurisé <br/>
<input id="securedCookie2" type="radio" name="securedCookie" value="2" onclick="setlmdata('li_bGlfL3NlY3VyZWRDb29raWU1','2')" /> 2 cookies <br/>
<button onclick="return false">Valider</button>
<input id="securedCookie0" type="radio" name="securedCookie" value="0" onclick="setlmdata('li_bGlfL3NlY3VyZWRDb29raWU1','0')" /> <lang en="Non secured cookie" fr="Cookie non sécurisé"/><br/>
<input id="securedCookie1" type="radio" name="securedCookie" value="1" onclick="setlmdata('li_bGlfL3NlY3VyZWRDb29raWU1','1')" /> <lang en="Secured cookie (HTTPS)" fr="Cookie sécurisé (HTTPS)"/><br/>
<input id="securedCookie2" type="radio" name="securedCookie" value="2" onclick="setlmdata('li_bGlfL3NlY3VyZWRDb29raWU1','2')" /> Double cookie (HTTP and HTTPS)<br/>
<button onclick="return false"><lang en="Submit" fr="Valider"/></button>
</div>
<div id="content_int" class="hidden">
<input type="text" id="int" onchange="setlmdata(currentId,this.value)"/>
<button onclick="return false">Valider</button>
<button onclick="return false"><lang en="Submit" fr="Valider"/></button>
</div>
<div id="content_btext" class="hidden">
<input type="text" id="btextKey" onchange="setlmtext(currentId,this.value)"/> <input type="text" id="btextValue" onchange="setlmdata(currentId,this.value)"/>
<button onclick="return false">Valider</button>
<button onclick="return false"><lang en="Submit" fr="Valider"/></button>
</div>
<div id="content_rules" class="hidden">
<textarea id="rulKey" cols="30" rows="2" onchange="setlmtext(currentId,this.value)"></textarea>&nbsp;<textarea id="rulValue" cols="50" rows="2" onchange="setlmdata(currentId,this.value)"></textarea>
<button onclick="return false">Valider</button>
<button onclick="return false"><lang en="Submit" fr="Valider"/></button>