Add collapse link to admin menu, add new arrow graphics, improve screen meta JS/CSS.

git-svn-id: https://develop.svn.wordpress.org/trunk@17813 602fd350-edb4-49c9-b593-d223f7449a82

wp-admin/css/colors-fresh.dev.css

@@ -1107,13 +1107,12 @@ table.widefat .spam a:hover,
 
 #adminmenu li.wp-has-current-submenu.wp-menu-open .wp-menu-toggle,
 #adminmenu li.wp-has-current-submenu:hover .wp-menu-toggle {
-/*	background: transparent url(../images/menu-bits.gif?ver=20100610) no-repeat scroll left -207px;*/
+	background: transparent url(../images/arrows-dark.png) no-repeat 8px 6px;
-	background: transparent;
 }
 
 #adminmenu .wp-has-submenu:hover .wp-menu-toggle,
 #adminmenu .wp-menu-open .wp-menu-toggle {
-	background: transparent url(../images/menu-bits.gif?ver=20100610) no-repeat scroll left -109px;
+	background: transparent url(../images/arrows.png) no-repeat 8px 6px;
 }
 
 #adminmenu a.menu-top,
@@ -1183,6 +1182,29 @@ table.widefat .spam a:hover,
 	background-color: transparent;
 }
 
+/* collapse menu button */
+#collapse-menu {
+	color: #aaa;
+}
+#collapse-menu:hover {
+	color: #999;
+}
+#collapse-button {
+	border-color: #ccc;
+	background-color: #f4f4f4;
+	background-image: -moz-linear-gradient(bottom,  #dfdfdf,  #fff);
+	background-image: -webkit-gradient(linear, left bottom, left top, from(#dfdfdf), to(#fff));
+}
+#collapse-menu:hover #collapse-button {
+	border-color: #aaa;
+}
+#collapse-button div {
+	background: transparent url(../images/arrows.png) no-repeat 0 -72px;
+}
+.folded #collapse-button div {
+	background-position: 0 -108px;
+}
+
 /* menu icons */
 #adminmenu .menu-icon-dashboard div.wp-menu-image {
 	background: transparent url('../images/menu.png?ver=20100531') no-repeat scroll -61px -33px;
@@ -1293,6 +1315,7 @@ table.widefat .spam a:hover,
 #adminmenu .menu-icon-site.wp-has-current-submenu div.wp-menu-image {
 	background: transparent url('../images/menu.png?ver=20100531') no-repeat scroll -361px -1px;
 }
+
 /* end menu */
 
 
@@ -1551,7 +1574,11 @@ body.press-this ul.category-tabs li.tabs a {
 }
 
 #favorite-toggle {
-	background: transparent url(../images/fav-arrow.gif?ver=20100531) no-repeat 0 -6px;
+	background: transparent url(../images/arrows.png) no-repeat 4px 2px;
+	border-color: #dfdfdf;
+	-moz-box-shadow: inset 1px 0 0 #fff;
+	-webkit-box-shadow: inset 1px 0 0 #fff;
+	box-shadow: inset 1px 0 0 #fff;
 }
 
 #favorite-actions a {
@@ -1568,7 +1595,11 @@ body.press-this ul.category-tabs li.tabs a {
 
 #screen-meta a.show-settings,
 .toggle-arrow {
-	background-image:url("../images/screen-options-toggle.gif?ver=20100531");
+	background: transparent url(../images/arrows.png) no-repeat right 3px;
+}
+
+#screen-meta .screen-meta-active a.show-settings {
+	background: transparent url(../images/arrows.png) no-repeat right -33px;
 }
 
 #icon-edit,

wp-admin/css/wp-admin.dev.css

@@ -814,7 +814,7 @@ form.upgrade .hint {
 	z-index: 150102;
 }
 
-/* =TinyMCS Adjustments
+/* =TinyMCE Adjustments
 -------------------------------------------------------------- */
 #wp_mce_fullscreen_ifr {
 	background: transparent;
@@ -867,6 +867,10 @@ form.upgrade .hint {
 #header-logo {
 	float: left;
 	margin: 7px 0;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-khtml-user-select: none;
+	user-select: none;
 }
 
 #wphead h1 {
@@ -876,11 +880,6 @@ form.upgrade .hint {
 	float: left;
 }
 
-#wphead h1.long-title {
-	font: normal 18px Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
-	padding: 12px 10px 5px;
-}
-
 #wphead #privacy-on-link {
 	font-size: 65%;
 	font-style: normal;
@@ -955,6 +954,8 @@ form.upgrade .hint {
 	right: 0;
 	top: 1px;
 	width: 28px;
+	border-width: 0 0 0 1px;
+	border-style: solid;
 }
 
 #favorite-actions .slide-down {
@@ -1024,9 +1025,6 @@ form.upgrade .hint {
 	line-height: 22px;
 	font-size: 11px;
 	display: block;
-	background-repeat: no-repeat;
-	background-position: top right;
-	background-color: transparent;
 	text-shadow: rgba(255,255,255,0.7) 0 1px 0;
 }
 
@@ -1045,12 +1043,8 @@ form.upgrade .hint {
 	border-style: none solid solid;
 	border-top: 0 none;
 	border-width: 0 1px 1px;
-	margin: 0 15px;
+	margin: 0 15px 0 0;
 	padding: 8px 12px 12px;
-	-moz-border-radius: 0 0 4px 4px;
-	-webkit-border-radius: 0 0 4px 4px;
-	-khtml-border-radius: 0 0 4px 4px;
-	border-radius: 0 0 4px 4px;
 }
 
 .metabox-prefs label {
@@ -1246,17 +1240,12 @@ body.no-js #adminmenu li.wp-has-current-submenu .wp-submenu {
 }
 
 #adminmenu a.separator {
-	cursor: w-resize;
 	height: 1px;
 	padding: 0;
 	border-width: 1px 0 0 0;
 	border-style: solid;
 }
 
-.folded #adminmenu a.separator {
- 	cursor: e-resize;
-}
-
 #adminmenu .wp-submenu .wp-submenu-head {
 	padding: 6px 4px 6px 10px;
 	cursor: default;
@@ -1278,13 +1267,13 @@ body.no-js #adminmenu li.wp-has-current-submenu .wp-submenu {
 }
 
 #adminmenu .wp-menu-toggle {
-	width: 22px;
+	width: 28px;
 	clear: right;
 	float: right;
 	margin: 1px 0 0;
 	height: 27px;
 	padding: 1px 2px 0 0;
-	cursor: default;
+	cursor: pointer;
 }
 
 #adminmenu .wp-menu-image a {
@@ -1376,6 +1365,29 @@ strong .post-com-count {
 	padding: 4px 8px;
 }
 
+#collapse-menu {
+	font-size: 11px;
+	line-height: 32px;
+}
+.folded #collapse-menu span {
+	display: none;
+}
+#collapse-button,
+#collapse-button div {
+	width: 15px;
+	height: 15px;
+}
+#collapse-button {
+	float: left;
+	margin: 8px;
+	border-width: 1px;
+	border-style: solid;
+	-moz-border-radius: 10px;
+	-khtml-border-radius: 10px;
+	-webkit-border-radius: 10px;
+	border-radius: 10px;
+}
+
 
 /*------------------------------------------------------------------------------
   8.0 - Layout Blocks

wp-admin/js/common.dev.js

@@ -1,4 +1,4 @@
-var showNotice, adminMenu, columns, validateForm;
+var showNotice, adminMenu, columns, validateForm, screenMeta;
 (function($){
 // sidebar admin menu
 adminMenu = {
@@ -15,7 +15,7 @@ adminMenu = {
 
 		this.favorites();
 
-		$('.separator', menu).click(function(){
+		$('#collapse-menu', menu).click(function(){
 			if ( $('body').hasClass('folded') ) {
 				adminMenu.fold(1);
 				deleteUserSetting( 'mfold' );
@@ -171,8 +171,6 @@ validateForm = function( form ) {
 	return !$( form ).find('.form-required').filter( function() { return $('input:visible', this).val() == ''; } ).addClass( 'form-invalid' ).find('input:visible').change( function() { $(this).closest('.form-invalid').removeClass( 'form-invalid' ); } ).size();
 }
 
-})(jQuery);
-
 // stub for doing better warnings
 showNotice = {
 	warn : function() {
@@ -189,48 +187,53 @@ showNotice = {
 	}
 };
 
-jQuery(document).ready( function($) {
+screenMeta = {
-	var lastClicked = false, checks, first, last, checked, bgx = ( isRtl ? 'left' : 'right' );
+	links: {
+		'screen-options-link-wrap': 'screen-options-wrap',
+		'contextual-help-link-wrap': 'contextual-help-wrap'
+	},
+	init: function() {
+		$('.screen-meta-toggle').click( screenMeta.toggleEvent );
+	},
+	toggleEvent: function( e ) {
+		var panel;
+		e.preventDefault();
+
+		// Check to see if we found a panel.
+		if ( ! screenMeta.links[ this.id ] )
+			return;
+
+		panel = $('#' + screenMeta.links[ this.id ]);
+
+		if ( panel.is(':visible') )
+			screenMeta.close( panel, $(this) );
+		else
+			screenMeta.open( panel, $(this) );
+	},
+	open: function( panel, link ) {
+		$('.screen-meta-toggle').not( link ).css('visibility', 'hidden');
+
+		panel.slideDown( 'fast', function() {
+			link.addClass('screen-meta-active');
+		});
+	},
+	close: function( panel, link ) {
+		panel.slideUp( 'fast', function() {
+			link.removeClass('screen-meta-active');
+			$('.screen-meta-toggle').css('visibility', '');
+		});
+	}
+};
+
+$(document).ready( function() {
+	var lastClicked = false, checks, first, last, checked;
 
 	// Move .updated and .error alert boxes. Don't move boxes designed to be inline.
 	$('div.wrap h2:first').nextAll('div.updated, div.error').addClass('below-h2');
 	$('div.updated, div.error').not('.below-h2, .inline').insertAfter( $('div.wrap h2:first') );
 
-	// screen settings tab
+	// Init screen meta
-	$('#show-settings-link').click(function () {
+	screenMeta.init();
-		if ( ! $('#screen-options-wrap').hasClass('screen-options-open') )
-			$('#contextual-help-link-wrap').css('visibility', 'hidden');
-
-		$('#screen-options-wrap').slideToggle('fast', function(){
-			if ( $(this).hasClass('screen-options-open') ) {
-				$('#show-settings-link').css({'backgroundPosition':'top '+bgx});
-				$('#contextual-help-link-wrap').css('visibility', '');
-				$(this).removeClass('screen-options-open');
-			} else {
-				$('#show-settings-link').css({'backgroundPosition':'bottom '+bgx});
-				$(this).addClass('screen-options-open');
-			}
-		});
-		return false;
-	});
-
-	// help tab
-	$('#contextual-help-link').click(function () {
-		if ( ! $('#contextual-help-wrap').hasClass('contextual-help-open') )
-			$('#screen-options-link-wrap').css('visibility', 'hidden');
-
-		$('#contextual-help-wrap').slideToggle('fast', function() {
-			if ( $(this).hasClass('contextual-help-open') ) {
-				$('#contextual-help-link').css({'backgroundPosition':'top '+bgx});
-				$('#screen-options-link-wrap').css('visibility', '');
-				$(this).removeClass('contextual-help-open');
-			} else {
-				$('#contextual-help-link').css({'backgroundPosition':'bottom '+bgx});
-				$(this).addClass('contextual-help-open');
-			}
-		});
-		return false;
-	});
 
 	// check all checkboxes
 	$('tbody').children().children('.check-column').find(':checkbox').click( function(e) {
@@ -321,3 +324,5 @@ jQuery(document).ready( function($) {
 			this.focus();
 	});
 });
+
+})(jQuery);

wp-admin/menu-header.php

@@ -167,6 +167,10 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
 		}
 		echo "</li>";
 	}
+
+	echo '<li id="collapse-menu"><div id="collapse-button"><div></div></div>';
+	echo '<span>' . esc_html__( 'Collapse menu' ) . '</span>';
+	echo '</li>';
 }
 
 ?>

wp-includes/script-loader.php

@@ -485,13 +485,13 @@ function wp_default_styles( &$styles ) {
 	// Any rtl stylesheets that don't have a .dev version for ltr
 	$no_suffix = array( 'farbtastic' );
 
-	$styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20110504c' );
+	$styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20110505' );
 
 	$styles->add( 'ie', "/wp-admin/css/ie$suffix.css", array(), '20101102' );
 	$styles->add_data( 'ie', 'conditional', 'lte IE 7' );
 
 	// all colors stylesheets need to have the same query strings (cache manifest compat)
-	$colors_version = '20110504';
+	$colors_version = '20110505';
 
 	// Register "meta" stylesheet for admin colors. All colors-* style sheets should have the same version string.
 	$styles->add( 'colors', true, array(), $colors_version );