Side folding for the menu, first run, still needs colours, styling an…

…d perhaps different icons. git-svn-id: http://svn.automattic.com/wordpress/trunk@9154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
WordPress · Oct 14, 2008 · 7a2fb7d · 7a2fb7d
1 parent b5bdfd4
commit 7a2fb7d
Show file tree

Hide file tree

Showing 23 changed files with 281 additions and 109 deletions.
diff --git a/wp-admin/admin-header.php b/wp-admin/admin-header.php
@@ -70,7 +70,6 @@
 </head>
 <body class="wp-admin <?php echo apply_filters( 'admin_body_class', '' ); ?>">
 <div id="wpwrap">
-<div id="sidemenu-bg"><br /></div>
 <div id="wpcontent">
 <div id="wphead">
 <?php

diff --git a/wp-admin/css/colors-classic.css b/wp-admin/css/colors-classic.css
@@ -5,7 +5,7 @@
 	border-color: #c6d9e9;
 }
 
-#wpbody-content {
+#wphead {
 	border-color: #c6d9e9;
 }
 
@@ -369,6 +369,10 @@ h3.dashboard-widget-title small a:hover {
 	font-weight: bold;
 }
 
+#adminmenu li {
+	color: #14568A;
+}
+
 #adminmenu li.current {
 	background-color: #fff;
 	border-right-color: #fff;

diff --git a/wp-admin/css/colors-fresh.css b/wp-admin/css/colors-fresh.css
@@ -5,7 +5,7 @@
 	border-color: #c6d9e9;
 }
 
-#wpbody-content {
+#wphead {
 	border-color: #c6d9e9;
 }
 
@@ -782,7 +782,7 @@ table.diff .diff-addedline ins {
 	background-color: #99ff99;
 }
 
-#adminmenu,
+#adminmenu li,
 #att-info {
 	background-color: #E4F2FD;
 }

diff --git a/wp-admin/css/global.css b/wp-admin/css/global.css
@@ -7,9 +7,7 @@ div#wpbody {
 }
 
 div#wpbody-content {
-	margin-left: 137px;
-	border-top-width: 1px;
-	border-top-style: solid;
+	margin-left: 140px;
 	padding-top: 10px;
 }
 
@@ -26,7 +24,8 @@ div#sidemenu-bg {
 ul#adminmenu {
 	float: left;
 	clear: left;
-	width: 125px; /* + 10 padding */
+	margin: 10px 8px;
+	width: 135px; /* + 10 padding */
 	position: relative;
 }
 

diff --git a/wp-admin/css/ie.css b/wp-admin/css/ie.css
@@ -4,18 +4,55 @@
 	padding-left: 23px;
 }
 
-#submenu li a.current {
-	background:none;
-	border:none;
+input.button, input.button-secondary, input.button-highlighted {
+	padding: 0;
 }
-
+/*
 * html body.minwidth {
 	_width: expression(document.documentElement.clientWidth < 810 ? "808px" : "99.9%");
 }
 
 * html #wpbody {
 	_width: expression(document.documentElement.clientWidth > 982 ? "980px" : "99.9%");
 }
+*/
+
+#adminmenu li.wp-has-submenu {
+	margin-top: 2px;
+}
+
+#adminmenu.folded li.wp-has-submenu {
+	height: 24px;
+}
+
+* html #wpcontent #adminmenu ul.wp-submenu li {
+	margin: 0;
+	padding: 0;
+}
+
+* html #wpcontent #adminmenu ul.wp-submenu a {
+	padding: 2px 4px 2px 8px;
+	margin: 0;
+	line-height: 20px;
+}
+
+* html #wpcontent #adminmenu ul.wp-submenu li a.current,
+* html #wpcontent #adminmenu ul.wp-submenu li.current {
+	border: 0;
+	background-color: #fff;
+}
+
+ul#adminmenu li.wp-menu-separator {
+	background-color: #fff;
+	height: 5px;
+	width: 1px;
+	line-height: 5px;
+	font-size: 5px;
+	padding: 0;
+	margin: 0;
+}
+
+
 
 * html #poststuff .postarea, * html #poststuff #titlediv {
 	width: 95%;

diff --git a/wp-admin/images/menu/appearance.png b/wp-admin/images/menu/appearance.png
diff --git a/wp-admin/images/menu/comments.png b/wp-admin/images/menu/comments.png
diff --git a/wp-admin/images/menu/home.png b/wp-admin/images/menu/home.png
diff --git a/wp-admin/images/menu/links.png b/wp-admin/images/menu/links.png
diff --git a/wp-admin/images/menu/media.png b/wp-admin/images/menu/media.png
diff --git a/wp-admin/images/menu/pages.png b/wp-admin/images/menu/pages.png
diff --git a/wp-admin/images/menu/plugins.png b/wp-admin/images/menu/plugins.png
diff --git a/wp-admin/images/menu/posts.png b/wp-admin/images/menu/posts.png
diff --git a/wp-admin/images/menu/settings.png b/wp-admin/images/menu/settings.png
diff --git a/wp-admin/images/menu/tools.png b/wp-admin/images/menu/tools.png
diff --git a/wp-admin/images/menu/users.png b/wp-admin/images/menu/users.png
diff --git a/wp-admin/js/common.js b/wp-admin/js/common.js
@@ -10,11 +10,6 @@ jQuery(document).ready( function() {
 	if ( ( 'undefined' != typeof wpAjax ) && jQuery.isFunction( wpAjax.validateForm ) ) {
 		jQuery('form.validate').submit( function() { return wpAjax.validateForm( jQuery(this) ); } );
 	}
-
-	jQuery('a.no-crazy').click( function() {
-		alert( "This feature isn't enabled in this prototype." );
-		return false;
-	} );
 });
 /*
 (function($) {
@@ -48,38 +43,5 @@ jQuery(document).ready( function() {
 	}
 }(jQuery));
 */
-jQuery( function($) {
-	var menuToggle = function(ul, effect) {
-		if ( !effect ) {
-			effect = 'slideToggle';
-		}
-		ul[effect]().parent().toggleClass( 'wp-menu-open' );
-
-		$('#adminmenu li.wp-has-submenu').each(function(i, e) {
-			var v = $(e).hasClass('wp-menu-open') ? 'o' : 'c';
-
-			setUserSetting( 'm'+i, v );
-		});
-
-		return false;
-	};
-
-	$('#adminmenu li.wp-has-submenu').each(function(i, e) {
-		var v = getUserSetting( 'm'+i );
-
-		if ( $(e).hasClass('wp-has-current-submenu') ) return true; // leave the current parent open
-
-		if ( 'o' == v ) $(e).addClass('wp-menu-open');
-		else if ( 'c' == v ) $(e).removeClass('wp-menu-open');	
-	});
-
-	$('#adminmenu li.wp-has-submenu > a').click( function() { return menuToggle( $(this).siblings('ul') ); } );
-
-	$('#dashmenu li.wp-has-submenu').bind( 'mouseenter mouseleave', function() { return menuToggle( $(this).children('ul'), 'toggle' ); } );
-
-	$('#favorite-actions').bind( 'mouseenter', function(){$('#favorite-action').removeClass('slideUp').addClass('slideDown'); setTimeout(function(){if ( $('#favorite-action').hasClass('slideDown') ) { $('#favorite-action').slideDown('fast') }}, 300) } );
-	$('#favorite-actions').bind( 'mouseleave', function(){$('#favorite-action').removeClass('slideDown').addClass('slideUp'); setTimeout(function(){if ( $('#favorite-action').hasClass('slideUp') ) { $('#favorite-action').slideUp('fast') }}, 500) } );
-
-} );
 
 //jQuery(function(){jQuery('#media-buttons a').tTips();});
diff --git a/wp-admin/js/menu.js b/wp-admin/js/menu.js
@@ -0,0 +1,79 @@
+(function($){
+
+adminMenu = {
+
+	init : function() {
+		$('#adminmenu a.wp-has-submenu').click( function() { return adminMenu.toggle( $(this).siblings('ul') ); } );
+
+		var li = document.createElement('li'); // temp
+		$(li).attr('id', 'menu-toggle').html('&laquo;&laquo;').click(function(){
+			if ( 'o' == getUserSetting( 'mfold' ) ) {
+				adminMenu.fold();
+				setUserSetting( 'mfold', 'f' );
+				$(this).html('&raquo;&raquo;');
+			} else {
+				adminMenu.fold(1);
+				setUserSetting( 'mfold', 'o' );
+				$(this).html('&laquo;&laquo;');
+			}
+		});
+		$('#adminmenu').prepend(li);
+
+		if ( 'o' == getUserSetting( 'mfold' ) ) {
+			$('#adminmenu li.wp-has-submenu').each(function(i, e) {
+				var v = getUserSetting( 'm'+i );
+				if ( $(e).hasClass('wp-has-current-submenu') ) return true; // leave the current parent open
+
+				if ( 'o' == v ) $(e).addClass('wp-menu-open');
+				else if ( 'c' == v ) $(e).removeClass('wp-menu-open');	
+			});
+		} else {
+			this.fold();
+			$('#menu-toggle').html('&raquo;&raquo;');
+		}
+	},
+
+	toggle : function(ul, effect) {
+		if ( !effect )
+			effect = 'slideToggle';
+
+		ul[effect](150).parent().toggleClass( 'wp-menu-open' );
+
+		$('#adminmenu li.wp-has-submenu').each(function(i, e) {
+			var v = $(e).hasClass('wp-menu-open') ? 'o' : 'c';
+			setUserSetting( 'm'+i, v );
+		});
+
+		return false;
+	},
+
+	fold : function(off) {
+		if (off) {
+			$('#wpbody-content').css('marginLeft', '140px');
+			$('#adminmenu').removeClass('folded');
+			$('#adminmenu li.wp-has-submenu').unbind().css('width', '125px');
+			$('#adminmenu a.wp-has-submenu').unbind().click( function() { return adminMenu.toggle( $(this).siblings('ul') ); } );
+		} else {
+			$('#adminmenu').addClass('folded');
+			$('#adminmenu .wp-submenu').hide();
+			$('#wpbody-content').css('marginLeft', '38px');
+			$('#adminmenu a.wp-has-submenu').unbind().click(function(){return false;});
+			$('#adminmenu li.wp-has-submenu').css({'width':'24px'}).hoverIntent({
+				over: function(){ $(this).find('.wp-submenu').show(100); },
+				out: function(){ $(this).find('.wp-submenu').hide(100); },
+				timeout: 150,
+				sensitivity: 6,
+				interval: 100
+			});
+		}
+	}
+};
+
+$(document).ready(function(){adminMenu.init();});
+})(jQuery);
+
+jQuery( function($) {	
+	$('#favorite-actions').bind( 'mouseenter', function(){$('#favorite-action').removeClass('slideUp').addClass('slideDown'); setTimeout(function(){if ( $('#favorite-action').hasClass('slideDown') ) { $('#favorite-action').slideDown('fast') }}, 300) } );
+	$('#favorite-actions').bind( 'mouseleave', function(){$('#favorite-action').removeClass('slideDown').addClass('slideUp'); setTimeout(function(){if ( $('#favorite-action').hasClass('slideUp') ) { $('#favorite-action').slideUp('fast') }}, 500) } );
+//	$('#dashmenu li.wp-has-submenu').bind( 'mouseenter mouseleave', function() { return adminMenu.toggle( $(this).children('ul'), 'toggle' ); } );
+} );
diff --git a/wp-admin/menu-header.php b/wp-admin/menu-header.php
@@ -34,7 +34,7 @@ function _wp_menu_output( &$menu, &$submenu, $submenu_as_parent = true ) {
 	global $self, $parent_file, $submenu_file, $plugin_page, $pagenow;
 
 	$first = true;
-	// 0 = name, 1 = capability, 2 = file, 3 = class
+	// 0 = name, 1 = capability, 2 = file, 3 = class, 4 = id, 5 = image src
 	foreach ( $menu as $key => $item ) {
 		$class = array();
 		if ( $first ) {
@@ -51,26 +51,31 @@ function _wp_menu_output( &$menu, &$submenu, $submenu_as_parent = true ) {
 				$class[] = 'current';
 		}
 
-		if ( isset($item[3]) )
+		if ( isset($item[3]) && ! empty($item[3]) )
 			$class[] = $item[3];
 
 		$class = $class ? ' class="' . join( ' ', $class ) . '"' : '';
+		$id = isset($item[4]) && ! empty($item[4]) ? ' id="' . $item[4] . '"' : '';
+		$img = isset($item[5]) && ! empty($item[5]) ? '<img class="wp-menu-image" src="' . $item[5] . '" alt="" />' : '';
 
-		echo "\n\t<li$class>";
+		echo "\n\t<li$class$id>";
 
-		if ( $submenu_as_parent && !empty($submenu[$item[2]]) ) {
+		if ( false !== strpos($class, 'wp-menu-separator') ) {
+			echo '<br />';
+		} elseif ( $submenu_as_parent && !empty($submenu[$item[2]]) ) {
 			$submenu[$item[2]] = array_values($submenu[$item[2]]);  // Re-index.
 			$menu_hook = get_plugin_page_hook($submenu[$item[2]][0][2], $item[2]);
 			if ( file_exists(WP_PLUGIN_DIR . "/{$submenu[$item[2]][0][2]}") || !empty($menu_hook))
-				echo "<a href='admin.php?page={$submenu[$item[2]][0][2]}'$class>{$item[0]}</a>";
+				echo "$img<a href='admin.php?page={$submenu[$item[2]][0][2]}'$class>{$item[0]}</a>";
 			else
-				echo "\n\t<a href='{$submenu[$item[2]][0][2]}'$class>{$item[0]}</a>";
+				echo "\n\t$img<a href='{$submenu[$item[2]][0][2]}'$class>{$item[0]}</a>";
 		} else if ( current_user_can($item[1]) ) {
 			$menu_hook = get_plugin_page_hook($item[2], 'admin.php');
-			if ( file_exists(WP_PLUGIN_DIR . "/{$item[2]}") || !empty($menu_hook) )
-				echo "\n\t<a href='admin.php?page={$item[2]}'$class>{$item[0]}</a>";
-			else
-				echo "\n\t<a href='{$item[2]}'$class>{$item[0]}</a>";
+			if ( file_exists(WP_PLUGIN_DIR . "/{$item[2]}") || !empty($menu_hook) ) {
+				echo "\n\t$img<a href='admin.php?page={$item[2]}'$class>{$item[0]}</a>";
+			} else {
+				echo "\n\t$img<a href='{$item[2]}'$class>{$item[0]}</a>";
+			}
 		}
 
 		if ( !empty($submenu[$item[2]]) ) {
@@ -98,14 +103,14 @@ function _wp_menu_output( &$menu, &$submenu, $submenu_as_parent = true ) {
 
 				if ( file_exists(WP_PLUGIN_DIR . "/{$sub_item[2]}") || ! empty($menu_hook) ) {
 					if ( 'admin.php' == $pagenow || !file_exists(WP_PLUGIN_DIR . "/$parent_file") )
-						echo "\n\t\t<li$class><a href='admin.php?page={$sub_item[2]}'$class>{$sub_item[0]}</a></li>";
+						echo "<li$class><a href='admin.php?page={$sub_item[2]}'$class>{$sub_item[0]}</a></li>";
 					else
-						echo "\n\t\t<li$class><a href='{$item[2]}?page={$sub_item[2]}'$class>{$sub_item[0]}</a></li>";
+						echo "<li$class><a href='{$item[2]}?page={$sub_item[2]}'$class>{$sub_item[0]}</a></li>";
 				} else {
-					echo "\n\t\t<li$class><a href='{$sub_item[2]}'$class>{$sub_item[0]}</a></li>";
+					echo "<li$class><a href='{$sub_item[2]}'$class>{$sub_item[0]}</a></li>";
 				}
 			}
-			echo "\n\t</ul>";
+			echo "</ul>";
 		}
 		echo "</li>";
 	}