new toolbar menu

git-svn-id: https://code.elgg.org/elgg/trunk@634 36083f99-b078-4883-b0ff-0f9b5a30f544

4 files changed, 81 insertions, 65 deletions

diff --git a/views/default/css.php b/views/default/css.php
index 58128e4b9..09e81b55a 100644
--- a/views/default/css.php
+++ b/views/default/css.php
@@ -154,62 +154,15 @@ div#header h1 a{
 */

 

 #sidebar_menu {

- /*   float:left;

-    width:150px;

-    background:#efefef;

-    padding:5px;

-    text-align:left;

-    text-size:10px;

-    margin:0; */

-}

-

-div#sidebar_menu {

-	width: 250px;

-	margin:20px 10px 20px 0;

-	padding:0;

-	float: right;

-	background:#efefef url(<?php echo $vars['url']; ?>/_graphics/sidebar-top.gif) no-repeat top;

-}

-

-div#sidebar-menu-bottom {

-   background:url(<?php echo $vars['url']; ?>/_graphics/sidebar-bottom.gif) no-repeat bottom;

-   height:9px;

-   width:250px;

-   margin:0;

-}

-

-div#sidebar-contents {

-    padding:10px;

-}

-

-div#sidebar_menu ul {

-	margin: 0;

+	width: 150px;

+	margin:0;

 	padding:0;

-	list-style: none;

-}

-

-div#sidebar_menu ul li {

-	margin:10px 0;

-	padding-left: 5px;

-}

-

-div#sidebar_menu ul li ul li a {

-	padding:0 0 0 5px;

+	float: left;

+	background:#f5f5f5; /* url(<?php echo $vars['url']; ?>/_graphics/sidebar-top.gif) no-repeat top;*/

 }

 

-div#sidebar_menu h2 {

-	text-align:left;

-	border-bottom:1px solid #ccc;

-	color:#777;

-	font-size:0.9em;

-	width:220px;

-}

-

-

-/**** end sidebar menu ****/

-

 #mainContent {

-    margin:0;

+    margin:0 0 0 180px;

     width:680px;

     padding:20px;

 }

@@ -285,4 +238,52 @@ div#footer a:link, div#footer a:visited {
 

 .input-textarea {

 	height: 200px;

-}
\ No newline at end of file
+}

+

+/* 

+	elgg toolbar

+*/

+

+.elggtoolbar ul.drawers {

+	width: 150px;

+	margin: 0;

+	padding: 0;

+}

+

+.elggtoolbar li.drawer ul li {

+	line-height: 1.2em;

+	margin: 0;

+	padding: 3px 0 3px 0;

+}

+

+.elggtoolbar ul {

+	list-style: none;

+	margin: 0;

+	padding: 3px 3px 3px 10px;

+}

+

+.elggtoolbar li a {

+	text-decoration: none;

+	color: #666;

+	line-height:0.5em;

+}

+.elggtoolbar li a:hover {

+	text-decoration: underline;

+}

+

+.elggtoolbar h2.drawer-handle {

+	margin: 0;

+	padding: 1px 1px 1px 10px;

+	background-color: #e5e5e5;

+	cursor: pointer;

+	font-size: 100%;

+}

+

+.elggtoolbar h2.drawer-handle.open {

+	color:#ffffff;

+	background-color: #666666;

+}

+

+

+

+

diff --git a/views/default/navigation/toolbox.php b/views/default/navigation/toolbox.php
index f8fb2ae9d..549efc5ad 100644
--- a/views/default/navigation/toolbox.php
+++ b/views/default/navigation/toolbox.php
@@ -19,8 +19,8 @@
 		if (is_array($menu) && sizeof($menu) > 0) {

 		

 ?>

-    <div id="sidebar_toolbox">

-<ul>

+<div class="elggtoolbar">

+<ul class="drawers">

 

 <?php

 

@@ -28,8 +28,8 @@
 				

 ?>

 

-	<li>

-		<h2><?php echo $item->name ?></h2>

+	<li class="drawer">

+		<h2 class="drawer-handle"><?php echo $item->name ?></h2>

 <?php

 

 				if (sizeof($item->children) > 0 ) {

@@ -61,4 +61,20 @@
 

 		}

 

-?>
\ No newline at end of file
+?>

+

+<script type="text/javascript">

+$(document).ready(function () {

+  $('li.drawer ul:not(:first)').hide(); // hide all ULs inside LI.drawer except the first one

+	$('h2.drawer-handle').click(function () {

+	// hide all the drawer contents

+	$('li.drawer ul:visible').slideUp().prev().removeClass('open');

+	// show the associated drawer content to 'this' (this is the current H2 element)

+	// since the drawer content is the next element after the clicked H2, we find

+	// it and show it using this:

+	$(this).addClass('open').next().slideDown();

+  });

+});

+</script>

+

+

diff --git a/views/default/pageshells/pageshell.php b/views/default/pageshells/pageshell.php
index 6d586669f..d0c043e03 100644
--- a/views/default/pageshells/pageshell.php
+++ b/views/default/pageshells/pageshell.php
@@ -39,13 +39,12 @@
     <!-- sidebar menu -->

     <div id="sidebar_menu">

         <?php echo elgg_view("navigation/toolbox", $vars); ?>

-        <div id="sidebar-menu-bottom"></div><!-- this just displays rounded corners on the menu options, can be deleted safely -->

-    </div>

-    

-    <!-- get the main body -->

-    <div id="mainContent">

-        <?php echo $vars['body']; ?>

     </div>

+        

+	<!-- get the main body -->

+	<div id="mainContent">

+		<?php echo $vars['body']; ?>

+	</div>

 

 <!-- include the footer -->

 <?php echo elgg_view('page_elements/footer', $vars); ?>
\ No newline at end of file
diff --git a/views/default/pageshells/pageshell_sidebar.php b/views/default/pageshells/pageshell_sidebar.php
index d55bf2842..3a8b7de08 100644
--- a/views/default/pageshells/pageshell_sidebar.php
+++ b/views/default/pageshells/pageshell_sidebar.php
@@ -30,7 +30,7 @@
         <?php echo elgg_view("navigation/toolbox"); ?><!-- include the my world toolbox -->

     

     <!-- get the sidebar and contents -->

-    <div id="sidebar_left">

+    <div id="sidebar_menu">

         <?php echo $vars['sidebar']; ?>

     </div>