Added toolbar to administration module with "help" button.

Monotone-Parent: 7145f91bc53473eb5af77730e87d0ebc7d3988e3
Monotone-Revision: 78bab40835ca73611c47298a0a8de1393cf60c03

Monotone-Author: flachapelle@inverse.ca
Monotone-Date: 2009-10-15T17:21:01
Monotone-Branch: ca.inverse.sogo

UI/WebServerResources/AdministrationUI.css

@@ -1,7 +1,33 @@
+DIV#helpDialog
+{
+    width: 300px;
+}
+
+DIV#helpDialog H3
+{
+    font-size: 1.2em;
+    margin: 0;
+    padding: 0;
+}
+
+DIV#helpDialog DIV DIV
+{
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+DIV#helpDialog P.button
+{
+    margin: 0;
+    padding: 0 0 5px 0;
+    text-align: right;
+}
+
 DIV#verticalDragHandle
 {
     cursor: e-resize;
-    top: 4em;
+    top: 6em;
     left: 15em;
     width: 5px;
     bottom: 0px;
@@ -17,7 +43,7 @@ DIV#verticalDragHandle
 DIV#administrationModules
 {
     position: absolute;
-    top: 5em;
+    top: 9em;
     left: 0;
     width: 15em;
     bottom: 2px;
@@ -69,12 +95,11 @@ DIV#administrationModules UL LI
 DIV#rightPanel
 {
     position: absolute;
-    top: 2em;
+    top: 6em;
     left: 15em;
     margin-left: 5px;
     right: 0px;
     bottom: 0px;
-    height: 100%;
     overflow: hidden;
 }
 
@@ -85,42 +110,10 @@ DIV#rightPanel > SPAN
 
 DIV#rightPanel H1
 {
-    display: inline;
     font-size: 14px;
     margin: 0.5em 0 5px 0;
 }
 
-DIV#rightPanel H1 A
-{
-    color: #000;
-}
-
-DIV#rightPanel H1 SPAN
-{
-    float: left;
-    margin-right: 5px;
-    text-align: right;
-    width: 15px;
-}
-
-DIV#rightPanel H1 SPAN IMG
-{
-    margin: 3px 0;
-}
-
-DIV#rightPanel SPAN DIV
-{
-    background-color: #eee;
-    margin: 0.5em 10px 0.5em 20px;
-    padding: 1em;
-}
-
-DIV#rightPanel SPAN DIV P
-{
-    margin: 0;
-    padding: 0;
-}
-
 DIV#filterPanel
 { 
     n0padding-top: 5px; 
@@ -133,7 +126,7 @@ DIV#administrationContent
     left: 0;
     right: 1em;
     top: 3em;
-    bottom: 3em;
+    bottom: 2px;
     background-color: #fff;
     padding: .5em;
     overflow: auto;

UI/WebServerResources/AdministrationUI.js

@@ -4,6 +4,8 @@ var d;
 var usersRightsWindowHeight = 220;
 var usersRightsWindowWidth = 450;
 
+/* ACLs module */
+
 function onSearchFormSubmit() {
     var searchValue = $("searchValue");
     var encodedValue = encodeURI(searchValue.value);
@@ -191,12 +193,7 @@ function onFolderOpen(event) {
     openAclWindow(urlstr);
 }
 
-function toggleDisplay(elementID) {
-    var e = $(elementID);
-    if (e) {
-	e.toggle();
-    }
-}
+/* Common functions */
 
 function configureDragHandles() {
     var handle = $("verticalDragHandle");
@@ -205,46 +202,35 @@ function configureDragHandles() {
         handle.leftBlock = $("administrationModules");
         handle.rightBlock = $("rightPanel");
         handle.leftMargin = 100;
-	document.observe("handle:dragged", onWindowResize);
     }
 }
 
-function onToggleDescription(event) {
-    var desc = this.up().next("div");
-    var span = this.up("span");
-    var h1 = this.up("h1");
-    var filter = $("filterPanel");
-    
-    var div = $("administrationContent");
-    var img = span.down("img");
-    if (event) {
-	// Toggle only if user clicks on the link
-	if (desc.visible()) {
-	    desc.hide();
-	    img.src = ResourcesURL + "/arrow-rit-sharp.gif";
-            filter.setStyle({ float: "right", clear: "none" });
-	}
-	else {
-	    desc.show();
-	    img.src = ResourcesURL + "/arrow-dwn.gif"; 
-            filter.setStyle({ float: "none", clear: "left" });
-	}
-    }
-    div.setStyle({ top: (filter.cumulativeOffset().top + 10) + "px" });
-}
+function help() {
+    var div = $("helpDialog");
+    var title = div.select('H3').first();
+    var description = div.select('DIV DIV')[0];
+    var module = $$("#administrationModules LI._selected").first();
 
-function onWindowResize(event) {
-    var f = onToggleDescription.bind($("moduleDescription"));
-    f(null);
+    var cellPosition = module.cumulativeOffset();
+    var cellDimensions = module.getDimensions();
+    var left = cellDimensions.width - 20;
+    var top = cellPosition.top + 3;
+
+    div.setStyle({ top: top + 'px',
+                left: left + 'px' });
+    title.update($("moduleTitle").innerHTML);
+    description.update($("moduleDescription").innerHTML);
+
+    div.show();
 }
 
 function initAdministration() {
+    $("helpDialogClose").observe("click", function(event) {
+            $("helpDialog").hide();
+        });
+
     var searchValue = $("searchValue");
     searchValue.focus();
-
-    $("moduleDescription").observe("click", onToggleDescription);
-
-    Event.observe(window, "resize", onWindowResize);
 }
 
 document.observe("dom:loaded", initAdministration);