Revert the look and functionality of Screen Options ans Help links/tabs, see #18197, see #18785

git-svn-id: http://svn.automattic.com/wordpress/trunk@19131 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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

@@ -1612,14 +1612,10 @@ table.diff .diff-addedline ins {
 }
 
 #screen-meta {
-	background-color: #fff;
-}
-
-#contextual-help-back {
 	background-color: #EFF8FF;
 	border-color: #D1E5EE;
-	-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+	-webkit-box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.05 );
-	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.05 );
 }
 
 .contextual-help-tabs a:hover {
@@ -1644,6 +1640,38 @@ table.diff .diff-addedline ins {
 	background-color: #fff;
 }
 
+/* screen options and help tabs */
+#screen-options-link-wrap,
+#contextual-help-link-wrap {
+	background-color: #eff8ff; /* Fallback */
+	border-right: 1px solid #D1E5EE;
+	border-left: 1px solid #D1E5EE;
+	border-bottom: 1px solid #D1E5EE;
+	background-image: -ms-linear-gradient(bottom, #eff8ff, #fff); /* IE10 */
+	background-image: -moz-linear-gradient(bottom, #eff8ff, #fff); /* Firefox */
+	background-image: -o-linear-gradient(bottom, #eff8ff, #fff); /* Opera */
+	background-image: -webkit-gradient(linear, left bottom, left top, from(#eff8ff), to(#fff)); /* old Webkit */
+	background-image: -webkit-linear-gradient(bottom, #eff8ff, #fff); /* new Webkit */
+	background-image: linear-gradient(bottom, #eff8ff, #fff); /* proposed W3C Markup */
+}
+
+#screen-meta-links a.show-settings {
+	color: #606060;
+}
+
+#screen-meta-links a.show-settings:hover {
+	color: #000;
+}
+
+#screen-meta-links a.show-settings {
+	background: transparent url(../images/arrows.png) no-repeat right 3px;
+}
+
+#screen-meta-links .screen-meta-active a.show-settings {
+	background: transparent url(../images/arrows.png) no-repeat right -33px;
+}
+
+/* end screen options and help tabs */
 
 #replyerror {
 	border-color: #ddd;

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

@@ -782,18 +782,13 @@ table.widefat span.spam a,
 }
 
 #screen-meta {
-	background-color: #fff;
-}
-
-#contextual-help-back {
 	background-color: #f1f1f1;
 	border-color: #ccc;
-	-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+	-webkit-box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.05 );
-	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.05 );
 }
 
 .contextual-help-tabs a:hover {
-	background-color: #EAF2FA;
 	color: #333;
 }
 
@@ -813,6 +808,39 @@ table.widefat span.spam a,
 	background-color: #fff;
 }
 
+/* screen options and help tabs */
+#screen-options-link-wrap,
+#contextual-help-link-wrap {
+	background-color: #e3e3e3; /* Fallback */
+	border-right: 1px solid transparent;
+	border-left: 1px solid transparent;
+	border-bottom: 1px solid transparent;
+	background-image: -ms-linear-gradient(bottom, #dfdfdf, #f1f1f1); /* IE10 */
+	background-image: -moz-linear-gradient(bottom, #dfdfdf, #f1f1f1); /* Firefox */
+	background-image: -o-linear-gradient(bottom, #dfdfdf, #f1f1f1); /* Opera */
+	background-image: -webkit-gradient(linear, left bottom, left top, from(#dfdfdf), to(#f1f1f1)); /* old Webkit */
+	background-image: -webkit-linear-gradient(bottom, #dfdfdf, #f1f1f1); /* new Webkit */
+	background-image: linear-gradient(bottom, #dfdfdf, #f1f1f1); /* proposed W3C Markup */
+}
+
+#screen-meta-links a.show-settings {
+	color: #777;
+}
+
+#screen-meta-links a.show-settings:hover {
+	color: #000;
+}
+
+#screen-meta-links a.show-settings {
+	background: transparent url(../images/arrows.png) no-repeat right 3px;
+}
+
+#screen-meta-links  a.show-settings.screen-meta-active {
+	background: transparent url(../images/arrows.png) no-repeat right -33px;
+}
+
+/* end screen options and help tabs */
+
 .login #backtoblog a {
 	color: #464646;
 }

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

@@ -353,11 +353,6 @@ form.upgrade .hint {
   6.2 - Help Menu
 ------------------------------------------------------------------------------*/
 
-#contextual-help-back {
-	right: 3px;
-	left: -1px;
-}
-
 #contextual-help-wrap {
 	padding-left: 0;
 	padding-right: 4px;

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

@@ -1345,20 +1345,6 @@ form.upgrade .hint {
   6.1 - Screen Options Tabs
 ------------------------------------------------------------------------------*/
 
-#screen-meta {
-	position: fixed;
-	top: -250px;
-	left: 146px;
-	right: 0;
-	z-index: 20;
-	margin: 28px 15px 0 20px;
-	padding: 0;
-}
-
-.folded #screen-meta {
-	left: 33px;
-}
-
 #screen-options-wrap,
 #contextual-help-wrap {
 	margin: 0;
@@ -1373,17 +1359,50 @@ form.upgrade .hint {
 	visibility: hidden;
 }
 
-.screen-meta-toggle {
+#screen-meta-links {
-	font-size: 12px;
+	margin: 0 24px 0 0;
-	position: absolute;
-	right: 15px;
-	top: 20px;
-	display: none;
 }
 
-.screen-meta-toggle a {
+/* screen options and help tabs revert */
+#screen-meta {
+	margin: 0 15px 0 5px;
+	border-width: 0 1px 1px;
+	border-style: none solid solid;
+}
+
+#screen-options-link-wrap,
+#contextual-help-link-wrap {
+	float: right;
+	height: 22px;
+	padding: 0;
+	margin: 0 0 0 6px;
+	font-family: sans-serif;
+}
+
+#screen-options-link-wrap,
+#contextual-help-link-wrap,
+#screen-meta {
+	-webkit-border-bottom-left-radius: 3px;
+	-webkit-border-bottom-right-radius: 3px;
+	border-bottom-left-radius: 3px;
+	border-bottom-right-radius: 3px;
+}
+
+#screen-meta-links a.show-settings {
+	text-decoration: none;
+	z-index: 1;
+	padding: 0 16px 0 6px;
+	height: 22px;
+	line-height: 22px;
+	font-size: 12px;
+	display: block;
+	text-shadow: rgba(255,255,255,0.7) 0 1px 0;
+}
+
+#screen-meta-links a.show-settings:hover {
 	text-decoration: none;
 }
+/* end screen options and help tabs */
 
 .toggle-arrow {
 	background-repeat: no-repeat;
@@ -1423,24 +1442,9 @@ form.upgrade .hint {
   6.2 - Help Menu
 ------------------------------------------------------------------------------*/
 
-#contextual-help-back {
-	position: absolute;
-	top: 0;
-	left: 3px;
-	right: -1px;
-	bottom: -1px;
-
-	border-width: 0 1px 1px;
-	border-style: solid;
-
-	-webkit-border-bottom-right-radius: 3px;
-	-webkit-border-bottom-left-radius: 3px;
-	border-bottom-right-radius: 3px;
-	border-bottom-left-radius: 3px;
-}
-
 #contextual-help-wrap {
-	padding: 0 0 0 4px;
+	padding: 0;
+	margin-left: -4px;
 }
 
 .contextual-help-tabs {
@@ -1470,7 +1474,7 @@ form.upgrade .hint {
 
 .contextual-help-tabs .active {
 	padding: 0 2px;
-	margin: 0 -1px 0 -3px;
+	margin: 0 -1px 0 0;
 	border-width: 1px 0 1px 1px;
 	border-style: solid;
 }

wp-admin/includes/screen.php

@@ -692,7 +692,6 @@ final class WP_Screen {
 		// Time to render!
 		?>
 		<div id="screen-meta" class="metabox-prefs">
-			<div id="contextual-help-back"></div>
 			<div id="contextual-help-wrap" class="hidden">
 				<div class="contextual-help-tabs">
 					<ul>
@@ -743,13 +742,15 @@ final class WP_Screen {
 			$this->render_screen_options();
 		?>
 		</div>
-		<div class="screen-meta-toggle">
+		<div id="screen-meta-links">
-		<?php
+		<div id="contextual-help-link-wrap" class="hide-if-no-js screen-meta-toggle">
-
+		<a href="#contextual-help-wrap" id="contextual-help-link" class="show-settings"><?php _e('Help') ?></a>
-		if ( $this->show_screen_options() )
+		</div>
-			echo '<a href="#screen-options-wrap">' . __('Screen Options') . '</a> |';
+		<?php if ( $this->show_screen_options() ) { ?>
-		?>
+		<div id="screen-options-link-wrap" class="hide-if-no-js screen-meta-toggle">
-		<a href="#contextual-help-wrap"><?php _e('Help'); ?></a>
+		<a href="#screen-options-wrap" id="show-settings-link" class="show-settings"><?php _e('Screen Options') ?></a>
+		</div>
+		<?php } ?>
 		</div>
 		<?php
 	}

wp-admin/js/common.dev.js

@@ -102,8 +102,6 @@ screenMeta = {
 		this.page    = $('#wpcontent');
 
 		this.toggles.click( this.toggleEvent );
-
-		$('.screen-meta-toggle').css('top', ($('h2').offset().top - 12) + 'px' ).fadeIn();
 	},
 
 	toggleEvent: function( e ) {
@@ -118,37 +116,32 @@ screenMeta = {
 		else
 			screenMeta.open( panel, $(this) );
 	},
+
 	open: function( panel, link ) {
-		// Close open panel
-		screenMeta.toggles.filter('.selected').click();
 
-		// Open selected panel
+		$('.screen-meta-toggle').not( link.parent() ).css('visibility', 'hidden');
-		link.addClass('selected');
 
-		screenMeta.padding = parseInt( screenMeta.page.css('paddingTop'), 10 );
+		panel.slideDown( 'fast', function() {
-		screenMeta.top     = parseInt( screenMeta.element.css('top'), 10 );
+			link.addClass('screen-meta-active');
-
+		});
-		panel.show();
 
 		screenMeta.refresh();
 	},
+
 	refresh: function( panel, link ) {
-		var columns = $('#contextual-help-wrap').children(),
+		var columns = $('#contextual-help-wrap').children(), height;
-			height;
 
 		columns.height('auto');
 
 		height = Math.max.apply( null, $.map( columns, function( el ) { return $(el).height(); }) );
 		columns.height( height );
-
-		screenMeta.element.css({ top: 0 });
-		screenMeta.page.css({ paddingTop: screenMeta.padding + screenMeta.element.outerHeight() });
 	},
+
 	close: function( panel, link ) {
-		screenMeta.element.css({ top: screenMeta.top });
+		panel.slideUp( 'fast', function() {
-		screenMeta.page.css({ paddingTop: screenMeta.padding });
+			link.removeClass('screen-meta-active');
-		panel.hide();
+			$('.screen-meta-toggle').css('visibility', '');
-		link.removeClass('selected');
+		});
 	}
 };