# HG changeset patch
# User Dan
# Date 1185806777 14400
# Node ID 5faff33a658066691f80a105fac225dd1c523d27
# Parent  4df25dfdde63797c62deb42095ea4cdff686f944
Admin theme now uses a collapsable sidebar instead of that ugly menu (WiP)

diff -r 4df25dfdde63 -r 5faff33a6580 themes/admin/css/default.css
--- a/themes/admin/css/default.css	Sun Jul 29 17:40:36 2007 -0400
+++ b/themes/admin/css/default.css	Mon Jul 30 10:46:17 2007 -0400
@@ -11,36 +11,66 @@
 div#header div.menulink       { float: right; padding: 0 10px 0 0; }
 div#header div.menulink a     { text-decoration: underline; color: #FFFFFF; border-bottom-width: 0; }
 
-div#sidebar                   { position: absolute; background-color: #000010; color: #FFFFFF; padding: 0px; width: 200px; display: none; }
-div#sidebar h4                { background-color: #444444; margin: 0; padding: 5px; }
+div#sidebar                   { padding: 0px; }
+div#sidebar h4                { margin: 0; padding: 5px; }
 div#sidebar ul                { margin: 0; padding: 0; list-style: none; }
-div#sidebar ul li a           { display: block; padding: 5px 8px; text-decoration: none; color: #FFFFFF; }
-div#sidebar ul li a:hover     { background-color: #303030; }
+div#sidebar ul li a           { display: block; padding: 5px 8px; text-decoration: none; }
+div#sidebar ul li a:hover     { background-color: #E0E0E0; }
 
 div.footer                    { margin: 10px 0 0 0; padding: 7px; text-align: center; border: 1px solid #A0A0A0; background-color: #e0e0e0; color: #666; }
 div.footer a                  { color: #777; text-decoration: underline; }
 
-table#wrapper                 { width: 100%; margin: 10px 0 0 0; }
-table#wrapper td.top-left     { width: 37px; height: 28px; background-image: url(../images/window-topcorners.png); background-repeat: no-repeat; }
-table#wrapper td.top          {              height: 28px; background-image: url(../images/window-top.png); background-repeat: repeat-x; }
-table#wrapper td.top-right    { width: 37px; height: 28px; background-image: url(../images/window-topcorners.png); background-repeat: no-repeat; background-position: -37px 0px; }
-table#wrapper td.left         { width: 37px;               background-image: url(../images/window-left.png); background-repeat: repeat-y; }
-table#wrapper td.main         { background-color: #FFFFFF; }
-table#wrapper td.right        { width: 37px;               background-image: url(../images/window-right.png); background-repeat: repeat-y; }
-table#wrapper td.bottom-left  { width: 37px; height: 44px; background-image: url(../images/window-bottomcorners.png); background-repeat: no-repeat; }
-table#wrapper td.bottom       {              height: 44px; background-image: url(../images/window-bottom.png); background-repeat: repeat-x; }
-table#wrapper td.bottom-right { width: 37px; height: 44px; background-image: url(../images/window-bottomcorners.png); background-repeat: no-repeat; background-position: -37px 0px; }
+table#sidebarholder           { width: 100%; margin: 10px 0 0 0; }
+
+table.wrapper                 { Width: 100%; }
+table.wrapper td.top-left     { width: 37px; height: 28px; background-image: url(../images/window-topcorners.png); background-repeat: no-repeat; }
+table.wrapper td.top          {              height: 28px; background-image: url(../images/window-top.png); background-repeat: repeat-x; }
+table.wrapper td.top-right    { width: 37px; height: 28px; background-image: url(../images/window-topcorners.png); background-repeat: no-repeat; background-position: -37px 0px; }
+table.wrapper td.left         { width: 37px;               background-image: url(../images/window-left.png); background-repeat: repeat-y; }
+table.wrapper td.main         { background-color: #FFFFFF; }
+table.wrapper td.right        { width: 37px;               background-image: url(../images/window-right.png); background-repeat: repeat-y; }
+table.wrapper td.bottom-left  { width: 37px; height: 44px; background-image: url(../images/window-bottomcorners.png); background-repeat: no-repeat; }
+table.wrapper td.bottom       {              height: 44px; background-image: url(../images/window-bottom.png); background-repeat: repeat-x; }
+table.wrapper td.bottom-right { width: 37px; height: 44px; background-image: url(../images/window-bottomcorners.png); background-repeat: no-repeat; background-position: -37px 0px; }
+
+/* Sidebar */
+td#td-sidebar                 { padding-right: 12px; height: 100%; }
+table#sidebar-show {
+  display: none;
+  width: 100%;
+}
+div#sidebar-hide {
+  width: 10px;
+  height: 100%;
+  background-color: #6587B8;
+  cursor: pointer;
+  position: absolute;
+  top: 0px;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+div#sidebar-hide:hover {
+  background-color: #95B7E8;
+}
+div.expanded {
+  background-image: url(../images/collapse.gif);
+  right: 232px;
+}
+div.collapsed {
+  background-image: url(../images/expand.gif);
+  right: 0px;
+}
 
 /* Content area */
-table#wrapper td.main h2.pagename {
+table.wrapper td.main h2.pagename {
   border-bottom: 1px solid #456798;
   margin-bottom: 0;
 }
 
-table#wrapper td.main a {
+table.wrapper td.main a {
   color: #294F75;
 }
-table#wrapper td.main a:hover {
+table.wrapper td.main a:hover {
   color: #597FA5;
 }
 
diff -r 4df25dfdde63 -r 5faff33a6580 themes/admin/footer.tpl
--- a/themes/admin/footer.tpl	Sun Jul 29 17:40:36 2007 -0400
+++ b/themes/admin/footer.tpl	Mon Jul 30 10:46:17 2007 -0400
@@ -9,6 +9,35 @@
         <td class="bottom-left"></td><td class="bottom"></td><td class="bottom-right"></td>
       </tr>
     </table>
+    
+    </td>
+    <td id="td-sidebar" valign="top">
+    
+      <table border="0" cellspacing="0" cellpadding="0" class="wrapper" id="sidebar-show">
+        <tr>
+          <td class="top-left"></td><td class="top">&nbsp;</td><td class="top-right"></td>
+        </tr>
+        <tr>
+          <td class="left"></td>
+          <td class="main">
+            <div id="sidebar">
+              {SIDEBAR_LEFT}
+              {SIDEBAR_RIGHT}
+            </div>
+          </td>
+          <td class="right"></td>
+        </tr>
+        <tr>
+          <td class="bottom-left"></td><td class="bottom"></td><td class="bottom-right"></td>
+        </tr>
+      </table>
+      
+      <div id="sidebar-hide" onclick="admin_expand();" class="collapsed"></div>
+    
+    </td>
+    </tr>
+    </table>
+    
     <div style="display: none;">
     <h2>Your browser does not support CSS.</h2>
      <p>If you can see this text, it means that your browser does not support Cascading Style Sheets (CSS). CSS is a fundemental aspect of XHTML, and as a result it is becoming very widely adopted by websites, including this one. You should consider switching to a more modern web browser, such as Mozilla Firefox or Opera 9.</p>
diff -r 4df25dfdde63 -r 5faff33a6580 themes/admin/header.tpl
--- a/themes/admin/header.tpl	Sun Jul 29 17:40:36 2007 -0400
+++ b/themes/admin/header.tpl	Mon Jul 30 10:46:17 2007 -0400
@@ -6,14 +6,14 @@
     <link rel="stylesheet" type="text/css" href="{SCRIPTPATH}/includes/clientside/css/enano-shared.css" />
     <link id="mdgCss" rel="stylesheet" type="text/css" href="{SCRIPTPATH}/themes/{THEME_ID}/css/{STYLE_ID}.css" />
     {JS_DYNAMIC_VARS}
+    <script type="text/javascript" src="{SCRIPTPATH}/includes/clientside/static/enano-lib-basic.js"></script>
     <script type="text/javascript" src="{SCRIPTPATH}/themes/admin/js/menu.js"></script>
-    <script type="text/javascript" src="{SCRIPTPATH}/includes/clientside/static/enano-lib-basic.js"></script>
     {ADDITIONAL_HEADERS}
     </head>
   <body>
     <div id="header">
       <div class="sitename">{SITE_NAME}</div>
-      <div class="menulink"><a href="#" onclick="adminOpenMenu('sidebar', this); return false;">expand menu</a></div>
+      <!-- div class="menulink"><a href="#" onclick="adminOpenMenu('sidebar', this); return false;">expand menu</a></div -->
       [&nbsp;<a href="{SCRIPTPATH}/{ADMIN_SID_QUES}">Main page &#0187;</a>&nbsp;]
     </div>
     <div class="menu_nojs" id="pagebar_main">
@@ -24,11 +24,11 @@
       </ul>
       <span class="menuclear">&nbsp;</span>
     </div>
-    <div id="sidebar">
-      {SIDEBAR_LEFT}
-      {SIDEBAR_RIGHT}
-    </div>
-    <table border="0" cellspacing="0" cellpadding="0" id="wrapper">
+    <table border="0" cellspacing="0" cellpadding="0" id="sidebarholder">
+    <tr>
+    <td valign="top">
+    
+    <table border="0" cellspacing="0" cellpadding="0" class="wrapper">
       <tr>
         <td class="top-left"></td><td class="top">&nbsp;</td><td class="top-right"></td>
       </tr>
diff -r 4df25dfdde63 -r 5faff33a6580 themes/admin/images/collapse.gif
Binary file themes/admin/images/collapse.gif has changed
diff -r 4df25dfdde63 -r 5faff33a6580 themes/admin/images/expand.gif
Binary file themes/admin/images/expand.gif has changed
diff -r 4df25dfdde63 -r 5faff33a6580 themes/admin/js/menu.js
--- a/themes/admin/js/menu.js	Sun Jul 29 17:40:36 2007 -0400
+++ b/themes/admin/js/menu.js	Mon Jul 30 10:46:17 2007 -0400
@@ -1,3 +1,4 @@
+/*
 var menuClicked = false;
 var menuID = false;
 var menuParent = false;
@@ -49,4 +50,69 @@
   menu.onmouseup   = function() { setTimeout('menuClicked = false;', 100); }
   document.onclick = function() { if ( menuClicked ) return false; adminMenuOff(); }
 }
+*/
 
+function admin_expand()
+{
+  var expander = document.getElementById('sidebar-hide');
+  var content  = document.getElementById('sidebar-show');
+  var holder  = document.getElementById('td-sidebar');
+  if ( content.style.display == 'table' )
+  {
+    createCookie('theme_admin_sidebar', 'collapsed', 3650);
+    admin_collapse_real(expander, content, holder);
+  }
+  else
+  {
+    createCookie('theme_admin_sidebar', 'expanded', 3650);
+    admin_expand_real(expander, content, holder);
+  }
+}
+
+function admin_collapse_real(expander, content, holder)
+{
+  expander.className = 'collapsed';
+  content.style.display = 'none';
+  holder.style.width = '0px';
+  holder.style.paddingRight = '12px';
+  holder.style.paddingLeft = '0px';
+}
+
+function admin_expand_real(expander, content, holder)
+{
+  expander.className = 'expanded';
+  content.style.display = 'table';
+  holder.style.width = '230px';
+  holder.style.paddingLeft = '12px';
+  holder.style.paddingRight = '0px';
+}
+
+function expander_set_height()
+{
+  var expander = document.getElementById('sidebar-hide');
+  var magic = $('header').Height() + $('pagebar_main').Height();
+  var height = getHeight();
+  var exheight = height - magic;
+  expander.style.height = exheight + 'px';
+  expander.style.top = magic + 'px';
+}
+
+function expander_onload()
+{
+  var expander = document.getElementById('sidebar-hide');
+  var content  = document.getElementById('sidebar-show');
+  var holder  = document.getElementById('td-sidebar');
+  if ( readCookie('theme_admin_sidebar') == 'collapsed' )
+  {
+    admin_collapse_real(expander, content, holder);
+  }
+  else if ( readCookie('theme_admin_sidebar') == 'expanded' )
+  {
+    admin_expand_real(expander, content, holder);
+  }
+}
+
+addOnloadHook(expander_set_height);
+addOnloadHook(expander_onload);
+window.onresize = expander_set_height;
+