Some 'Show on screen' metabox settings styling, see #7552

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

wp-admin/css/colors-classic.css

@@ -55,7 +55,7 @@ li.widget-list-control-item h4.widget-title a,
 
 li.widget-list-control-item, div.nav, .tablenav, #dashboard-widgets p.dashboard-widget-links,
 ul.view-switch li.current, .form-table tr, #poststuff h3, #replyhandle,
-.login form, h3.info-box-title, #post-status-info {
+.login form, h3.info-box-title, #post-status-info, #edit-settings-wrap {
 	background-color: #cfebf7;
 }
 
@@ -763,3 +763,19 @@ table.diff .diff-addedline ins {
 .submitbox .submitdelete {
 	color: #fff;
 }
+
+#edit-settings-wrap,
+#show-settings {
+	background-color: #14568A;
+	border-color: #14568A;
+	color: #CFEBF6;
+}
+
+#show-settings a,
+#show-settings a:visited {
+	color: #CFEBF6;
+}
+
+#show-settings.show-settings-opened {
+	border-bottom-color: #14568A;
+}

wp-admin/css/colors-fresh.css

@@ -55,7 +55,7 @@ li.widget-list-control-item h4.widget-title a,
 
 li.widget-list-control-item, div.nav, .tablenav, #dashboard-widgets p.dashboard-widget-links,
 ul.view-switch li.current, .form-table tr, #poststuff h3, #replyhandle,
-.login form, h3.info-box-title, #post-status-info {
+.login form, h3.info-box-title, #post-status-info, #edit-settings-wrap {
 	background-color: #eaf3fa;
 }
 
@@ -742,42 +742,6 @@ table.diff .diff-addedline ins {
 	background-color: #E4F2FD;
 }
 
-
-/* fixed tool bar */
-#fixedbar {
-	background-color:#464646;
-	color: #ccc;
-}
-
-#html-upload-help {
-	color: #328AB2;
-}
-
-#fixedbar #last-edit {
-	
-}
-
-#fixedbar a,
-#fixedbar #curtime {
-	color: #ccc;
-}
-
-#fixedbar a:hover {
-	color: #fff;
-}
-
-#fixedbar a.button {
-	color: #246;
-}
-
-#fixedbar a.button:hover {
-	color: #d54e21;
-}
-
-#timestampdiv {
-	color: #ccc;
-}
-
 /* media popup 0819 */
 #sidemenu a {
 	background-color: #e4f2fd;
@@ -788,3 +752,13 @@ table.diff .diff-addedline ins {
 .submitbox .submitdelete {
 	color: #fff;
 }
+
+#edit-settings-wrap,
+#show-settings {
+	background-color: #E4F2FD;
+	border-color: #c6d9e9;
+}
+
+#show-settings.show-settings-opened {
+	border-bottom-color: #E4F2FD;
+}

wp-admin/edit-form-advanced.php

@@ -400,13 +400,6 @@ endif;
 <?php } ?>
 </div>
 
-<a href="#edit_settings" class="edit-settings-link hide-if-no-js"><?php _e('Edit Settings') ?></a>
-
-<div id="edit-settings" class="hide-if-js hide-if-no-js">
-<h5><?php _e('Show on screen') ?></h5>
-<?php meta_box_prefs('post') ?>
-</div>
-
 <?php
 
 if ( 0 == $post_ID)
@@ -435,6 +428,18 @@ $saveasdraft = '<input name="save" type="submit" id="save" class="button" tabind
 
 <div id="poststuff">
 
+<div id="show-settings"><a href="#edit_settings" id="show-settings-link" class="hide-if-no-js"><?php _e('Show Settings') ?></a>
+<a href="#edit_settings" id="hide-settings-link" class="hide-if-js hide-if-no-js"><?php _e('Hide Settings') ?></a></div>
+
+<div id="edit-settings" class="hide-if-js hide-if-no-js">
+<div id="edit-settings-wrap">
+<h5><?php _e('Show on screen') ?></h5>
+<div class="metabox-prefs">
+<?php meta_box_prefs('post') ?>
+<br class="clear" />
+</div></div>
+</div>
+
 <div id="side-info" style="display: none;"><?php // TODO ?>
 
 <h5><?php _e('Related') ?></h5>
@@ -459,7 +464,6 @@ $saveasdraft = '<input name="save" type="submit" id="save" class="button" tabind
 <?php do_action('submitpost_box'); ?>
 
 <?php $side_meta_boxes = do_meta_boxes('post', 'side', $post); ?>
-
 </div>
 
 <div id="post-body" class="<?php echo $side_meta_boxes ? 'has-sidebar' : ''; ?>">

wp-admin/includes/template.php

@@ -1367,7 +1367,6 @@ function meta_box_prefs($page) {
 
 	$hidden = (array) get_user_option( "meta-box-hidden_$page" );
 
-	echo '<ul class="metabox-prefs">';
 	foreach ( array_keys($wp_meta_boxes[$page]) as $context ) {
 		foreach ( array_keys($wp_meta_boxes[$page][$context]) as $priority ) {
 			foreach ( $wp_meta_boxes[$page][$context][$priority] as $box ) {
@@ -1376,10 +1375,9 @@ function meta_box_prefs($page) {
 				$box_id = $box['id'];
 				echo '<label for="' . $box_id . '-hide">';
 				echo '<input class="hide-postbox-tog" name="' . $box_id . '-hide" type="checkbox" id="' . $box_id . '-hide" value="' . $box_id . '"' . (! in_array($box_id, $hidden) ? ' checked="checked"' : '') . ' />';
-				echo "{$box['title']}</label>";
+				echo "{$box['title']}</label>\n";
 			}
 		}
 	}
-	echo '</ul>';
 }
 ?>

wp-admin/js/post.js

@@ -60,7 +60,7 @@ function tag_press_key( e ) {
 	}
 }
 
-jQuery(document).ready( function() {
+jQuery(document).ready( function($) {
 	// close postboxes that should be closed
 	jQuery('.if-js-closed').removeClass('if-js-closed').addClass('closed');
 
@@ -186,12 +186,23 @@ jQuery(document).ready( function() {
 	});
 
 	// Edit Settings
-	jQuery('.edit-settings-link').click(function () {
-		if (jQuery('#edit-settings').is(":hidden")) {
-			jQuery('#edit-settings').slideDown("normal");
-		} else {
-			jQuery('#edit-settings').slideUp("normal");
-		}
+	$('#show-settings-link').click(function () {
+		$('#edit-settings').slideDown('normal', function(){
+			$('#show-settings-link').hide();
+			$('#hide-settings-link').show();
+			
+		});
+		$('#show-settings').addClass('show-settings-opened');
+		return false;
+	});
+	
+	$('#hide-settings-link').click(function () {
+		$('#edit-settings').slideUp('normal', function(){
+			$('#hide-settings-link').hide();
+			$('#show-settings-link').show();
+			$('#show-settings').removeClass('show-settings-opened');
+		});
+		
 		return false;
 	});
 

wp-admin/wp-admin.css

@@ -619,7 +619,7 @@ a.view-comment-post-link {
 	border-style: solid;
 }
 
-#wphead a, #dashmenu a, #adminmenu a, #sidemenu a, #taglist a, #catlist a {
+#wphead a, #dashmenu a, #adminmenu a, #sidemenu a, #taglist a, #catlist a, #show-settings a {
 	text-decoration: none;
 }
 
@@ -1381,6 +1381,7 @@ table.form-table td .updated {
 
 #side-info-column #side-sortables {
 	height: 100%;
+	padding-top: 39px;
 }
 
 .submitbox .submitdelete {
@@ -2002,3 +2003,78 @@ p#post-search-prep {
 #replyerror .error {
 	margin: 15px 0 0;
 }
+
+/* show/hide settings */
+#show-settings {
+	float: right;
+	margin: 0 0 -30px;
+	position: relative;
+	z-index: 1;
+	width: 218px;
+	height: 28px;
+	border-width: 1px;
+	border-style: solid;
+	-moz-border-radius: 4px;
+	-khtml-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+}
+
+#show-settings-link,
+#hide-settings-link {
+	background-position: 8px center;
+	background-repeat: no-repeat;
+	line-height: 28px;
+	padding: 0 0 0 26px;
+}
+
+#show-settings-link {
+	background-image: url(images/menu-closed.png);
+}
+
+#hide-settings-link {
+	background-image: url(images/menu-open.png); 
+}
+
+#edit-settings {
+	padding: 28px 0 0;
+	margin: 0 0 20px;
+}
+
+#edit-settings-wrap h5 {
+	padding: 10px 0 5px 20px;
+	margin: 0;
+	font-size: 13px;
+}
+
+#edit-settings-wrap {
+	-moz-border-radius: 4px 0 4px 4px;
+	-khtml-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px 0 4px 4px;
+	border-width: 1px;
+	border-style: solid;
+}
+
+.show-settings-opened {
+	-moz-border-radius: 4px 4px 0 0;
+	-khtml-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px 4px 0 0;
+}
+
+.metabox-prefs {
+	padding: 8px 15px 15px;
+}
+
+.metabox-prefs label {
+	display: block;
+	float: left;
+	padding: 5px 3px;
+	white-space: nowrap;
+	width: 15em;
+}
+
+.metabox-prefs label input {
+	margin: 0 5px 0 2px;
+}