Styling for custom fields

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

wp-admin/css/colors-fresh.css

@@ -48,6 +48,21 @@ div.dashboard-widget,
 	color: green;
 }
 
+#postcustomstuff table {
+	border-color: #dfdfdf;
+	background-color: #F9F9F9;
+}
+
+#postcustomstuff thead th {
+	background-color: #F1F1F1;
+}
+
+#postcustomstuff table input,
+#postcustomstuff table textarea {
+	border-color: #dfdfdf;
+	background-color: #fff;
+}
+
 .widefat {
 	border-color: #dfdfdf;
 }
@@ -251,7 +266,8 @@ ul#widget-list li.widget-list-item h4.widget-title {
 	color: #666;
 }
 
-.button {
+.button,
+.submit input {
 	border-color: #DCDCDC;
 	color: #464646;
 	text-shadow: #FFF 0 1px 0;
@@ -264,6 +280,7 @@ ul#widget-list li.widget-list-item h4.widget-title {
 }
 
 .button,
+.submit input,
 .button-secondary {
 	background: #f2f2f2 url(../images/white-grad.png) repeat-x scroll left top;
 }
@@ -274,12 +291,15 @@ ul#widget-list li.widget-list-item h4.widget-title {
 	background: #21759B url(../images/button-grad.png) repeat-x scroll left top;
 }
 
-.button[disabled], .button:disabled {
+.button[disabled],
+.button:disabled {
 	background-color: #999;
 }
 
 .button:hover,
-#edit-slug-buttons a.save:hover {
+.submit input:hover,
+#edit-slug-buttons a.save:hover,
+#postcustomstuff .submit input:hover {
 	border-color: #535353;
 }
 

wp-admin/edit-form-advanced.php

@@ -355,15 +355,10 @@ add_meta_box('trackbacksdiv', __('Trackbacks and Pings'), 'post_trackback_meta_b
 function post_custom_meta_box($post) {
 ?>
 <div id="postcustomstuff">
-<table cellpadding="3">
 <?php
 $metadata = has_meta($post->ID);
 list_meta($metadata);
-?>
+meta_form();
-
-</table>
-<?php
-	meta_form();
 ?>
 <div id="ajax-response"></div>
 </div>

wp-admin/edit-page-form.php

@@ -287,15 +287,10 @@ add_meta_box('pageorderdiv', __('Page Order'), 'page_order_meta_box', 'page', 's
 function page_custom_meta_box($post){
 ?>
 <div id="postcustomstuff">
-<table cellpadding="3">
 <?php
 $metadata = has_meta($post->ID);
 list_meta($metadata);
-?>
+meta_form();
-
-</table>
-<?php
-	meta_form();
 ?>
 <div id="ajax-response"></div>
 </div>

wp-admin/includes/template.php

@@ -2100,24 +2100,38 @@ function wp_dropdown_cats( $currentcat = 0, $currentparent = 0, $parent = 0, $le
  */
 function list_meta( $meta ) {
 	// Exit if no meta
-	if (!$meta ) {
+	if ( ! $meta ) {
-		echo '<tbody id="the-list" class="list:meta"><tr style="display: none;"><td>&nbsp;</td></tr></tbody>'; //TBODY needed for list-manipulation JS
+		echo '
+<table id="list-table" style="display: none;">
+	<thead>
+	<tr>
+		<th class="left">' . __( 'Name' ) . '</th>
+		<th>' . __( 'Value' ) . '</th>
+	</tr>
+	</thead>
+	<tbody id="the-list" class="list:meta">
+	<tr><td></td></tr>
+	</tbody>
+</table>'; //TBODY needed for list-manipulation JS
 		return;
 	}
 	$count = 0;
 ?>
+<table id="list-table">
 	<thead>
 	<tr>
-		<th><?php _e( 'Key' ) ?></th>
+		<th class="left"><?php _e( 'Name' ) ?></th>
 		<th><?php _e( 'Value' ) ?></th>
-		<th colspan='2'><?php _e( 'Action' ) ?></th>
 	</tr>
 	</thead>
 	<tbody id='the-list' class='list:meta'>
 <?php
 	foreach ( $meta as $entry )
 		echo _list_meta_row( $entry, $count );
-	echo "\n\t</tbody>";
+?>
+	</tbody>
+</table>
+<?php
 }
 
 /**
@@ -2161,13 +2175,15 @@ function _list_meta_row( $entry, &$count ) {
 	$delete_nonce = wp_create_nonce( 'delete-meta_' . $entry['meta_id'] );
 
 	$r .= "\n\t<tr id='meta-{$entry['meta_id']}' class='$style'>";
-	$r .= "\n\t\t<td valign='top'><label class='hidden' for='meta[{$entry['meta_id']}][key]'>" . __( 'Key' ) . "</label><input name='meta[{$entry['meta_id']}][key]' id='meta[{$entry['meta_id']}][key]' tabindex='6' type='text' size='20' value='{$entry['meta_key']}' /></td>";
+	$r .= "\n\t\t<td class='left'><label class='hidden' for='meta[{$entry['meta_id']}][key]'>" . __( 'Key' ) . "</label><input name='meta[{$entry['meta_id']}][key]' id='meta[{$entry['meta_id']}][key]' tabindex='6' type='text' size='20' value='{$entry['meta_key']}' />";
-	$r .= "\n\t\t<td><label class='hidden' for='meta[{$entry['meta_id']}][value]'>" . __( 'Value' ) . "</label><textarea name='meta[{$entry['meta_id']}][value]' id='meta[{$entry['meta_id']}][value]' tabindex='6' rows='2' cols='30'>{$entry['meta_value']}</textarea></td>";
+
-	$r .= "\n\t\t<td style='text-align: center;'><input name='updatemeta' type='submit' tabindex='6' value='".attribute_escape(__( 'Update' ))."' class='add:the-list:meta-{$entry['meta_id']}::_ajax_nonce=$update_nonce updatemeta' /><br />";
+	$r .= "\n\t\t<div class='submit'><input name='deletemeta[{$entry['meta_id']}]' type='submit' ";
-	$r .= "\n\t\t<input name='deletemeta[{$entry['meta_id']}]' type='submit' ";
 	$r .= "class='delete:the-list:meta-{$entry['meta_id']}::_ajax_nonce=$delete_nonce deletemeta' tabindex='6' value='".attribute_escape(__( 'Delete' ))."' />";
+	$r .= "\n\t\t<input name='updatemeta' type='submit' tabindex='6' value='".attribute_escape(__( 'Update' ))."' class='add:the-list:meta-{$entry['meta_id']}::_ajax_nonce=$update_nonce updatemeta' /></div>";
 	$r .= wp_nonce_field( 'change-meta', '_ajax_nonce', false, false );
-	$r .= "</td>\n\t</tr>";
+	$r .= "</td>";
+	
+	$r .= "\n\t\t<td><label class='hidden' for='meta[{$entry['meta_id']}][value]'>" . __( 'Value' ) . "</label><textarea name='meta[{$entry['meta_id']}][value]' id='meta[{$entry['meta_id']}][value]' tabindex='6' rows='2' cols='30'>{$entry['meta_value']}</textarea></td>\n\t</tr>";
 	return $r;
 }
 
@@ -2190,13 +2206,17 @@ function meta_form() {
 		natcasesort($keys);
 ?>
 <p><strong><?php _e( 'Add a new custom field:' ) ?></strong></p>
-<table id="newmeta" cellspacing="3" cellpadding="3">
+<table id="newmeta">
-	<tr>
+<thead>
-<th colspan="2"><label <?php if ( $keys ) : ?> for="metakeyselect" <?php else : ?> for="metakeyinput" <?php endif; ?>><?php _e( 'Key' ) ?></label></th>
+<tr>
+<th class="left"><label for="metakeyselect"><?php _e( 'Name' ) ?></label></th>
 <th><label for="metavalue"><?php _e( 'Value' ) ?></label></th>
 </tr>
-	<tr valign="top">
+</thead>
-		<td style="width: 18%;" class="textright">
+
+<tbody>
+<tr>
+<td id="newmetaleft" class="left">
 <?php if ( $keys ) : ?>
 <select id="metakeyselect" name="metakeyselect" tabindex="7">
 <option value="#NONE#"><?php _e( '- Select -' ); ?></option>
@@ -2204,19 +2224,25 @@ function meta_form() {
 
 	foreach ( $keys as $key ) {
 		$key = attribute_escape( $key );
-		echo "\n\t<option value='$key'>$key</option>";
+		echo "\n<option value='$key'>$key</option>";
 	}
 ?>
-</select> <label for="metakeyinput"><?php _e( 'or' ); ?></label>
+</select>
 <?php endif; ?>
+<input class="hide-if-js" type="text" id="metakeyinput" name="metakeyinput" tabindex="7" value="" />
+<a href="#postcustomstuff" class="hide-if-no-js" onclick="jQuery('#metakeyinput, #metakeyselect, #enternew, #cancelnew').toggle();return false;">
+<span id="enternew"><?php _e('Enter new'); ?></span>
+<span id="cancelnew" class="hidden"><?php _e('Cancel'); ?></span>
+</a>
 </td>
-<td><input type="text" id="metakeyinput" name="metakeyinput" tabindex="7" /></td>
+<td><textarea id="metavalue" name="metavalue" rows="2" cols="25" tabindex="8"></textarea></td>
-		<td><textarea id="metavalue" name="metavalue" rows="3" cols="25" tabindex="8"></textarea></td>
+</tr>
-	</tr>
+
-<tr class="submit"><td colspan="3">
+<tr><td colspan="2" class="submit">
-	<?php wp_nonce_field( 'add-meta', '_ajax_nonce', false ); ?>
+<input type="submit" id="addmetasub" name="addmeta" class="add:the-list:newmeta" tabindex="9" value="<?php _e( 'Add Custom Field' ) ?>" />
-	<input type="submit" id="addmetasub" name="addmeta" class="add:the-list:newmeta" tabindex="9" value="<?php _e( 'Add Custom Field' ) ?>" />
+<?php wp_nonce_field( 'add-meta', '_ajax_nonce', false ); ?>	
 </td></tr>
+</tbody>
 </table>
 <?php
 

wp-admin/js/page.js

@@ -105,7 +105,19 @@ jQuery(document).ready( function($) {
 
 		return false;
 	});
-	
+
+	// Custom Fields
+	jQuery('#the-list').wpList( { addAfter: function( xml, s ) {
+		$('table#list-table').show();
+		if ( jQuery.isFunction( autosave_update_post_ID ) ) {
+			autosave_update_post_ID(s.parsed.responses[0].supplemental.postid);
+		}
+	}, addBefore: function( s ) {
+		s.data += '&post_id=' + jQuery('#post_ID').val();
+		return s;
+	}
+	});
+
 	// preview
 	$('#post-preview').click(function(e){
 		if ( 1 > $('#post_ID').val() && autosaveFirst ) {

wp-admin/js/post.js

@@ -289,6 +289,7 @@ jQuery(document).ready( function($) {
 
 	// Custom Fields
 	jQuery('#the-list').wpList( { addAfter: function( xml, s ) {
+		$('table#list-table').show();
 		if ( jQuery.isFunction( autosave_update_post_ID ) ) {
 			autosave_update_post_ID(s.parsed.responses[0].supplemental.postid);
 		}

wp-admin/wp-admin.css

@@ -313,7 +313,8 @@ table#availablethemes td.bottom {
 .button,
 .button-primary,
 .button-secondary,
-.button-highlighted {
+.button-highlighted,
+#postcustomstuff .submit input {
 	font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
 	text-decoration: none;
 	font-size: 11px;
@@ -515,9 +516,6 @@ textarea.all-options, input.all-options {
 	width: 98%;
 }
 
-.plugins p {
-}
-
 #login .fullwidth {
 	width: 320px;
 }
@@ -543,25 +541,91 @@ textarea.all-options, input.all-options {
 	top: .35em;
 }
 
-#postcustomstuff .updatemeta, #postcustomstuff .deletemeta {
+/* post meta postbox */
+#postcustomstuff table,
+#postcustomstuff input,
+#postcustomstuff textarea {
+	border-width: 1px;
+	border-style: solid;
+	-moz-border-radius: 3px;
+	-khtml-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+}
+
+#postcustomstuff .updatemeta,
+#postcustomstuff .deletemeta {
 	margin: auto;
 }
 
+#postcustomstuff thead th {
+	padding: 5px 8px 8px;
+}
+
+#postcustom #postcustomstuff .submit,
+#pagecustomdiv #postcustomstuff .submit {
+	border: 0 none;
+	float: none;
+	padding: 5px 8px;
+}
+
+#side-sortables #postcustom #postcustomstuff .submit,
+#side-sortables #pagecustomdiv #postcustomstuff .submit {
+	padding: 0 5px;
+}
+
+#side-sortables #postcustom #postcustomstuff td.left input,
+#side-sortables #pagecustomdiv #postcustomstuff td.left input {
+	margin: 3px 3px 0;
+}
+
+#side-sortables #postcustom #postcustomstuff #the-list textarea,
+#side-sortables #pagecustomdiv #postcustomstuff #the-list textarea {
+	height: 85px;
+	margin: 3px;
+}
+
 #postcustomstuff table {
 	margin: 0;
 	width: 100%;
 	border-width: 1px;
 	border-style: solid;
+	border-spacing: 0;
 }
 
-#postcustomstuff table input, #postcustomstuff table textarea {
+#postcustomstuff table input,
+#postcustomstuff table select,
+#postcustomstuff table textarea {
 	width: 95%;
+	margin: 8px 0 8px 8px;
+}
+
+#postcustomstuff th.left,
+#postcustomstuff td.left {
+	width: 38%;
+}
+
+#postcustomstuff .submit input {
+	width: auto;
+}
+
+#postcustomstuff #newmeta .submit {
+	padding: 0 8px;
 }
 
 #postcustomstuff table #addmetasub {
 	width: auto;
 }
 
+#postcustomstuff #newmetaleft {
+	vertical-align: top;
+}
+
+#postcustomstuff #newmetaleft a {
+	padding: 0 10px;
+	text-decoration: none;
+}
+
 #save {
 	width: 15em;
 }

wp-includes/script-loader.php

@@ -176,7 +176,7 @@ function wp_default_scripts( &$scripts ) {
 			'save' => __('Save'),
 			'cancel' => __('Cancel'),
 		) );
-		$scripts->add( 'post', '/wp-admin/js/post.js', array('suggest', 'jquery-ui-tabs', 'wp-lists', 'postbox', 'slug', 'settings-box'), '20081105' );
+		$scripts->add( 'post', '/wp-admin/js/post.js', array('suggest', 'jquery-ui-tabs', 'wp-lists', 'postbox', 'slug', 'settings-box'), '20081107' );
 		$scripts->localize( 'post', 'postL10n', array(
 			'tagsUsed' =>  __('Tags used on this post:'),
 			'add' => attribute_escape(__('Add')),
@@ -195,7 +195,7 @@ function wp_default_scripts( &$scripts ) {
 			'savePending' => __('Save as Pending'),
 			'saveDraft' => __('Save Draft')
 		) );
-		$scripts->add( 'page', '/wp-admin/js/page.js', array('jquery', 'slug', 'postbox', 'settings-box'), '20081103' );
+		$scripts->add( 'page', '/wp-admin/js/page.js', array('jquery', 'slug', 'wp-lists', 'postbox', 'settings-box'), '20081107' );
 		$scripts->localize( 'page', 'postL10n', array(
 			'cancel' => __('Cancel'),
 			'edit' => __('Edit'),