Improve auto column switching for post.php, see #18198

git-svn-id: http://svn.automattic.com/wordpress/trunk@18607 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
azaozz 2011-08-25 22:55:39 +00:00
parent 978a5984b4
commit 4e323dd08f
9 changed files with 72 additions and 48 deletions

View File

@ -1139,7 +1139,11 @@ case 'menu-locations-save':
case 'meta-box-order':
check_ajax_referer( 'meta-box-order' );
$order = isset( $_POST['order'] ) ? (array) $_POST['order'] : false;
$page_columns = isset( $_POST['page_columns'] ) ? (int) $_POST['page_columns'] : 0;
$page_columns = isset( $_POST['page_columns'] ) ? $_POST['page_columns'] : 'auto';
if ( $page_columns != 'auto' )
$page_columns = (int) $page_columns;
$page = isset( $_POST['page'] ) ? $_POST['page'] : '';
if ( !preg_match( '/^[a-z_-]+$/', $page ) )

View File

@ -62,6 +62,19 @@ var userSettings = {
thousandsSeparator = '<?php echo addslashes( $wp_locale->number_format['thousands_sep'] ); ?>',
decimalPoint = '<?php echo addslashes( $wp_locale->number_format['decimal_point'] ); ?>',
isRtl = <?php echo (int) is_rtl(); ?>;
function wp_set_width_class() {
var w = document.body.clientWidth, bc = document.body.className;
if ( w <= 680 )
document.body.className = bc.replace(/ (small|narrow|medium|wide)-window/, '') + ' small-window';
else if ( w > 680 && w <= 950 )
document.body.className = bc.replace(/ (small|narrow|medium|wide)-window/, '') + ' narrow-window';
else if ( w > 950 && w <= 1300 )
document.body.className = bc.replace(/ (small|narrow|medium|wide)-window/, '') + ' medium-window';
else
document.body.className = bc.replace(/ (small|narrow|medium|wide)-window/, '') + ' wide-window';
}
//]]>
</script>
<?php
@ -93,13 +106,8 @@ if ( $is_iphone ) { ?>
</head>
<body class="wp-admin no-js <?php echo apply_filters( 'admin_body_class', '' ) . " $admin_body_class"; ?>">
<script type="text/javascript">
//<![CDATA[
(function(){
var c = document.body.className;
c = c.replace(/no-js/, 'js');
document.body.className = c;
})();
//]]>
document.body.className = document.body.className.replace(/no-js/, 'js');
wp_set_width_class();
</script>
<div id="wpwrap">

File diff suppressed because one or more lines are too long

View File

@ -116,9 +116,10 @@ TABLE OF CONTENTS:
position: relative;
}
.wide-screen .inner-sidebar {
.wide-window .columns-auto .inner-sidebar {
margin-right: -870px;
width: 100%;
display: block;
}
.inner-sidebar #side-sortables {
@ -126,8 +127,9 @@ TABLE OF CONTENTS:
min-height: 300px;
}
.wide-screen .inner-sidebar #side-sortables {
.wide-window .columns-auto .inner-sidebar #side-sortables {
min-width: 280px;
max-width: 480px;
width: auto;
padding-right: 870px;
}
@ -140,14 +142,22 @@ TABLE OF CONTENTS:
float: left;
clear: left;
width: 100%;
margin-right: -340px;
max-width: 1150px;
margin-right: -2000px;
}
.has-right-sidebar #post-body-content {
margin-right: 300px;
}
.columns-auto #post-body-content {
max-width: 850px;
}
#side-sortables:empty {
border: 3px dashed #ccc;
height: 800px;
}
/* 2 columns main area */
#col-container {
@ -2681,10 +2691,6 @@ table .inline-edit-row fieldset ul.cat-hover {
11.0 - Write/Edit Post Screen
------------------------------------------------------------------------------*/
.postarea {
max-width: 900px;
}
#titlediv {
position: relative;
margin-bottom: 20px;
@ -6764,8 +6770,8 @@ div.zerosize {
border-style: solid;
}
#tagsdiv-post_tag h3,
#categorydiv h3 {
.press-this #tagsdiv-post_tag h3,
.press-this #categorydiv h3 {
cursor: pointer;
}
@ -6814,10 +6820,6 @@ h3.tb {
border-color: #dfdfdf;
}
.tbtitle {
padding: 3px;
}
.press-this .actions {
float: right;
margin: -19px 0 0;

View File

@ -193,7 +193,7 @@ if ( 'post' == $post_type ) {
require_once('./admin-header.php');
?>
<div class="wrap">
<div class="wrap columns-<?php echo esc_attr($screen_layout_columns);?>">
<?php screen_icon(); ?>
<h2><?php echo esc_html( $title ); ?><?php if ( isset( $post_new_file ) ) : ?> <a href="<?php echo esc_url( $post_new_file ) ?>" class="add-new-h2"><?php echo esc_html($post_type_object->labels->add_new); ?></a><?php endif; ?></h2>
<?php if ( $notice ) : ?>
@ -222,7 +222,7 @@ wp_nonce_field( 'meta-box-order', 'meta-box-order-nonce', false );
wp_nonce_field( 'closedpostboxes', 'closedpostboxesnonce', false );
?>
<div id="poststuff" class="metabox-holder<?php echo 2 == $screen_layout_columns ? ' has-right-sidebar' : ''; ?>">
<div id="poststuff" class="metabox-holder<?php echo 1 != $screen_layout_columns ? ' has-right-sidebar' : ''; ?>">
<div id="side-info-column" class="inner-sidebar">
<?php

View File

@ -1873,7 +1873,7 @@ function screen_layout($screen) {
$screen_layout_columns = get_user_option("screen_layout_$screen->id");
$num = $wp_current_screen_options['layout_columns']['max'];
if ( ! $screen_layout_columns && $screen_layout_columns !== 0 ) {
if ( ! $screen_layout_columns ) {
if ( isset($wp_current_screen_options['layout_columns']['default']) )
$screen_layout_columns = $wp_current_screen_options['layout_columns']['default'];
else
@ -1886,7 +1886,7 @@ function screen_layout($screen) {
$return .= "<label><input type='radio' name='screen_columns' value='$i'" . ( ($screen_layout_columns == $i) ? " checked='checked'" : "" ) . " /> $i</label>\n";
++$i;
}
$return .= "<label><input type='radio' id='wp_auto_columns' name='screen_columns' value='0'" . ( ($screen_layout_columns === '0') ? " checked='checked'" : "" ) . " />" . __('auto') . "</label>\n";
$return .= "<label><input type='radio' id='wp_auto_columns' name='screen_columns' value='auto'" . ( ($screen_layout_columns == 'auto') ? " checked='checked'" : "" ) . " />" . __('auto') . "</label>\n";
$return .= "</div>\n";
return $return;
}

View File

@ -41,23 +41,33 @@ var postboxes, wp_auto_columns, wpAutoColumns = false;
postboxes.save_state(page);
} );
$('.columns-prefs input[type="radio"]').click(function(){
var num = $(this).val(), i, el, p = $('#poststuff');
var num = $(this).val(), i, el, ps = $('#poststuff'), wrap = $('.wrap');
if ( num == 'auto' ) {
wrap.removeClass('columns-1').removeClass('columns-2').addClass('columns-auto');
ps.addClass('has-right-sidebar')
if ( !$('#side-info-column #side-sortables').length )
$('#side-info-column').append( $('#side-sortables') );
if ( num === '0' ) {
if ( typeof(wp_auto_columns) == 'function' ) {
wpAutoColumns = true;
wp_auto_columns();
}
} else {
if ( p.length ) { // write pages
wrap.removeClass('columns-auto');
if ( ps.length ) { // write pages
if ( num == 2 ) {
p.addClass('has-right-sidebar');
$('#side-info-column').append( $('#side-sortables') );
$(document.body).removeClass('responsive');
wrap.removeClass('columns-1').addClass('columns-2');
ps.addClass('has-right-sidebar');
if ( !$('#side-info-column #side-sortables').length )
$('#side-info-column').append( $('#side-sortables') );
} else if ( num == 1 ) {
p.removeClass('has-right-sidebar');
wrap.removeClass('columns-2').addClass('columns-1');
ps.removeClass('has-right-sidebar');
$('#normal-sortables').before( $('#side-sortables') );
$(document.body).removeClass('responsive');
}
} else { // dashboard
for ( i = 4; ( i > num && i > 1 ); i-- ) {
@ -171,7 +181,7 @@ var postboxes, wp_auto_columns, wpAutoColumns = false;
if ( !wpAutoColumns )
return;
if ( w < 681 )
if ( w <= 680 )
$(document.body).addClass('folded');
if ( w > 680 && getUserSetting('mfold') != 'f' )
@ -180,45 +190,45 @@ var postboxes, wp_auto_columns, wpAutoColumns = false;
if ( adminpage == 'post-php' ) {
pb = $('#post-body').width();
if ( pb < 801 ) {
if ( pb < 800 ) {
$('#poststuff').removeClass('has-right-sidebar');
$('#normal-sortables').before( $('#side-sortables') );
}
if ( pb > 800 && pb < 1150 ) {
if ( pb >= 800 && pb < 1150 ) {
$('#poststuff').addClass('has-right-sidebar');
$('#side-info-column').append( $('#side-sortables') );
$(document.body).removeClass('wide-screen');
$(document.body).removeClass('wide-window');
}
if ( pb > 1149 ) {
$(document.body).addClass('wide-screen');
if ( pb >= 1150 ) {
$(document.body).addClass('wide-window');
}
} else if ( adminpage == 'index-php' ) {
dw = $('#dashboard-widgets').width();
if ( dw < 801 ) {
if ( dw < 800 ) {
$('#postbox-container-2').hide();
$('#normal-sortables').after( $('#side-sortables') );
num = 1;
}
if ( dw > 800 && dw < 1201 ) {
if ( dw >= 800 && dw < 1200 ) {
$('#postbox-container-2').show().append( $('#side-sortables') );
$('#postbox-container-3').hide();
$('#side-sortables').after( $('#column3-sortables') );
num = 2;
}
if ( dw > 1200 && dw < 1601 ) {
if ( dw >= 1200 && dw < 1600 ) {
$('#postbox-container-3').show().append( $('#column3-sortables') );
$('#postbox-container-4').hide();
$('#column3-sortables').after( $('#column4-sortables') );
num = 3;
}
if ( dw > 1600 ) {
if ( dw >= 1600 ) {
$('#postbox-container-4').show().append( $('#column4-sortables') );
num = 4;
}

View File

@ -1 +1 @@
var postboxes,wp_auto_columns,wpAutoColumns=false;(function(a){postboxes={add_postbox_toggles:function(c,b){this.init(c,b);a(".postbox h3, .postbox .handlediv").click(function(){var e=a(this).parent(".postbox"),f=e.attr("id");if("dashboard_browser_nag"==f){return}e.toggleClass("closed");postboxes.save_state(c);if(f){if(!e.hasClass("closed")&&a.isFunction(postboxes.pbshow)){postboxes.pbshow(f)}else{if(e.hasClass("closed")&&a.isFunction(postboxes.pbhide)){postboxes.pbhide(f)}}}});a(".postbox h3 a").click(function(f){f.stopPropagation()});a(".postbox a.dismiss").click(function(g){var f=a(this).parents(".postbox").attr("id")+"-hide";a("#"+f).prop("checked",false).triggerHandler("click");return false});a(".hide-postbox-tog").click(function(){var e=a(this).val();if(a(this).prop("checked")){a("#"+e).show();if(a.isFunction(postboxes.pbshow)){postboxes.pbshow(e)}}else{a("#"+e).hide();if(a.isFunction(postboxes.pbhide)){postboxes.pbhide(e)}}postboxes.save_state(c)});a('.columns-prefs input[type="radio"]').click(function(){var e=a(this).val(),f,g,h=a("#poststuff");if(e==="0"){if(typeof(wp_auto_columns)=="function"){wpAutoColumns=true;wp_auto_columns()}}else{if(h.length){if(e==2){h.addClass("has-right-sidebar");a("#side-info-column").append(a("#side-sortables"));a(document.body).removeClass("responsive")}else{if(e==1){h.removeClass("has-right-sidebar");a("#normal-sortables").before(a("#side-sortables"));a(document.body).removeClass("responsive")}}}else{for(f=4;(f>e&&f>1);f--){g=a("#"+d(f)+"-sortables");a("#"+d(f-1)+"-sortables").append(g.children(".postbox"));g.parent().hide()}for(f=1;f<=e;f++){g=a("#"+d(f)+"-sortables");if(g.parent().is(":hidden")){g.addClass("temp-border").parent().show()}}a(".postbox-container:visible").css("width",100/e+"%")}}postboxes.save_order(c)});function d(e){switch(e){case 1:return"normal";break;case 2:return"side";break;case 3:return"column3";break;case 4:return"column4";break;default:return""}}},init:function(c,b){a.extend(this,b||{});a("#wpbody-content").css("overflow","hidden");a(".meta-box-sortables").sortable({placeholder:"sortable-placeholder",connectWith:".meta-box-sortables",items:".postbox",handle:".hndle",cursor:"move",distance:2,tolerance:"pointer",forcePlaceholderSize:true,helper:"clone",opacity:0.65,stop:function(f,d){if(a(this).find("#dashboard_browser_nag").is(":visible")&&"dashboard_browser_nag"!=this.firstChild.id){a(this).sortable("cancel");return}postboxes.save_order(c);d.item.parent().removeClass("temp-border")},receive:function(f,d){if("dashboard_browser_nag"==d.item[0].id){a(d.sender).sortable("cancel")}}})},save_state:function(d){var b=a(".postbox").filter(".closed").map(function(){return this.id}).get().join(","),c=a(".postbox").filter(":hidden").map(function(){return this.id}).get().join(",");a.post(ajaxurl,{action:"closed-postboxes",closed:b,hidden:c,closedpostboxesnonce:jQuery("#closedpostboxesnonce").val(),page:d})},save_order:function(c){var b,d=a(".columns-prefs input:checked").val()||0;b={action:"meta-box-order",_ajax_nonce:a("#meta-box-order-nonce").val(),page_columns:d,page:c};a(".meta-box-sortables").each(function(){b["order["+this.id.split("-")[0]+"]"]=a(this).sortable("toArray").join(",")});a.post(ajaxurl,b)},pbshow:false,pbhide:false};a(document).ready(function(){wpAutoColumns=a("#wp_auto_columns").prop("checked");wp_auto_columns=function(){var b=a(window).width(),e,d,c=1;if(!wpAutoColumns){return}if(b<681){a(document.body).addClass("folded")}if(b>680&&getUserSetting("mfold")!="f"){a(document.body).removeClass("folded")}if(adminpage=="post-php"){e=a("#post-body").width();if(e<801){a("#poststuff").removeClass("has-right-sidebar");a("#normal-sortables").before(a("#side-sortables"))}if(e>800&&e<1150){a("#poststuff").addClass("has-right-sidebar");a("#side-info-column").append(a("#side-sortables"));a(document.body).removeClass("wide-screen")}if(e>1149){a(document.body).addClass("wide-screen")}}else{if(adminpage=="index-php"){d=a("#dashboard-widgets").width();if(d<801){a("#postbox-container-2").hide();a("#normal-sortables").after(a("#side-sortables"));c=1}if(d>800&&d<1201){a("#postbox-container-2").show().append(a("#side-sortables"));a("#postbox-container-3").hide();a("#side-sortables").after(a("#column3-sortables"));c=2}if(d>1200&&d<1601){a("#postbox-container-3").show().append(a("#column3-sortables"));a("#postbox-container-4").hide();a("#column3-sortables").after(a("#column4-sortables"));c=3}if(d>1600){a("#postbox-container-4").show().append(a("#column4-sortables"));c=4}a(".postbox-container:visible").css("width",100/c+"%")}}};a(window).resize(function(){wp_auto_columns()});wp_auto_columns()})}(jQuery));
var postboxes,wp_auto_columns,wpAutoColumns=false;(function(a){postboxes={add_postbox_toggles:function(c,b){this.init(c,b);a(".postbox h3, .postbox .handlediv").click(function(){var e=a(this).parent(".postbox"),f=e.attr("id");if("dashboard_browser_nag"==f){return}e.toggleClass("closed");postboxes.save_state(c);if(f){if(!e.hasClass("closed")&&a.isFunction(postboxes.pbshow)){postboxes.pbshow(f)}else{if(e.hasClass("closed")&&a.isFunction(postboxes.pbhide)){postboxes.pbhide(f)}}}});a(".postbox h3 a").click(function(f){f.stopPropagation()});a(".postbox a.dismiss").click(function(g){var f=a(this).parents(".postbox").attr("id")+"-hide";a("#"+f).prop("checked",false).triggerHandler("click");return false});a(".hide-postbox-tog").click(function(){var e=a(this).val();if(a(this).prop("checked")){a("#"+e).show();if(a.isFunction(postboxes.pbshow)){postboxes.pbshow(e)}}else{a("#"+e).hide();if(a.isFunction(postboxes.pbhide)){postboxes.pbhide(e)}}postboxes.save_state(c)});a('.columns-prefs input[type="radio"]').click(function(){var e=a(this).val(),f,h,j=a("#poststuff"),g=a(".wrap");if(e=="auto"){g.removeClass("columns-1").removeClass("columns-2").addClass("columns-auto");j.addClass("has-right-sidebar");if(!a("#side-info-column #side-sortables").length){a("#side-info-column").append(a("#side-sortables"))}if(typeof(wp_auto_columns)=="function"){wpAutoColumns=true;wp_auto_columns()}}else{g.removeClass("columns-auto");if(j.length){if(e==2){g.removeClass("columns-1").addClass("columns-2");j.addClass("has-right-sidebar");if(!a("#side-info-column #side-sortables").length){a("#side-info-column").append(a("#side-sortables"))}}else{if(e==1){g.removeClass("columns-2").addClass("columns-1");j.removeClass("has-right-sidebar");a("#normal-sortables").before(a("#side-sortables"))}}}else{for(f=4;(f>e&&f>1);f--){h=a("#"+d(f)+"-sortables");a("#"+d(f-1)+"-sortables").append(h.children(".postbox"));h.parent().hide()}for(f=1;f<=e;f++){h=a("#"+d(f)+"-sortables");if(h.parent().is(":hidden")){h.addClass("temp-border").parent().show()}}a(".postbox-container:visible").css("width",100/e+"%")}}postboxes.save_order(c)});function d(e){switch(e){case 1:return"normal";break;case 2:return"side";break;case 3:return"column3";break;case 4:return"column4";break;default:return""}}},init:function(c,b){a.extend(this,b||{});a("#wpbody-content").css("overflow","hidden");a(".meta-box-sortables").sortable({placeholder:"sortable-placeholder",connectWith:".meta-box-sortables",items:".postbox",handle:".hndle",cursor:"move",distance:2,tolerance:"pointer",forcePlaceholderSize:true,helper:"clone",opacity:0.65,stop:function(f,d){if(a(this).find("#dashboard_browser_nag").is(":visible")&&"dashboard_browser_nag"!=this.firstChild.id){a(this).sortable("cancel");return}postboxes.save_order(c);d.item.parent().removeClass("temp-border")},receive:function(f,d){if("dashboard_browser_nag"==d.item[0].id){a(d.sender).sortable("cancel")}}})},save_state:function(d){var b=a(".postbox").filter(".closed").map(function(){return this.id}).get().join(","),c=a(".postbox").filter(":hidden").map(function(){return this.id}).get().join(",");a.post(ajaxurl,{action:"closed-postboxes",closed:b,hidden:c,closedpostboxesnonce:jQuery("#closedpostboxesnonce").val(),page:d})},save_order:function(c){var b,d=a(".columns-prefs input:checked").val()||0;b={action:"meta-box-order",_ajax_nonce:a("#meta-box-order-nonce").val(),page_columns:d,page:c};a(".meta-box-sortables").each(function(){b["order["+this.id.split("-")[0]+"]"]=a(this).sortable("toArray").join(",")});a.post(ajaxurl,b)},pbshow:false,pbhide:false};a(document).ready(function(){wpAutoColumns=a("#wp_auto_columns").prop("checked");wp_auto_columns=function(){var b=a(window).width(),e,d,c=1;if(!wpAutoColumns){return}if(b<=680){a(document.body).addClass("folded")}if(b>680&&getUserSetting("mfold")!="f"){a(document.body).removeClass("folded")}if(adminpage=="post-php"){e=a("#post-body").width();if(e<800){a("#poststuff").removeClass("has-right-sidebar");a("#normal-sortables").before(a("#side-sortables"))}if(e>=800&&e<1150){a("#poststuff").addClass("has-right-sidebar");a("#side-info-column").append(a("#side-sortables"));a(document.body).removeClass("wide-window")}if(e>=1150){a(document.body).addClass("wide-window")}}else{if(adminpage=="index-php"){d=a("#dashboard-widgets").width();if(d<800){a("#postbox-container-2").hide();a("#normal-sortables").after(a("#side-sortables"));c=1}if(d>=800&&d<1200){a("#postbox-container-2").show().append(a("#side-sortables"));a("#postbox-container-3").hide();a("#side-sortables").after(a("#column3-sortables"));c=2}if(d>=1200&&d<1600){a("#postbox-container-3").show().append(a("#column3-sortables"));a("#postbox-container-4").hide();a("#column3-sortables").after(a("#column4-sortables"));c=3}if(d>=1600){a("#postbox-container-4").show().append(a("#column4-sortables"));c=4}a(".postbox-container:visible").css("width",100/c+"%")}}};a(window).resize(function(){wp_auto_columns()});wp_auto_columns()})}(jQuery));

View File

@ -279,7 +279,7 @@ function wp_default_scripts( &$scripts ) {
$scripts->add( 'xfn', "/wp-admin/js/xfn$suffix.js", array('jquery'), '20110524', 1 );
$scripts->add( 'postbox', "/wp-admin/js/postbox$suffix.js", array('jquery-ui-sortable'), '20110822', 1 );
$scripts->add( 'postbox', "/wp-admin/js/postbox$suffix.js", array('jquery-ui-sortable'), '20110825', 1 );
$scripts->add( 'post', "/wp-admin/js/post$suffix.js", array('suggest', 'wp-lists', 'postbox'), '20110524', 1 );
$scripts->add_script_data( 'post', 'postL10n', array(
@ -402,7 +402,7 @@ 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(), '20110822' );
$styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20110825' );
$styles->add( 'ie', "/wp-admin/css/ie$suffix.css", array('wp-admin'), '20110711' );
$styles->add_data( 'ie', 'conditional', 'lte IE 7' );