Responsive admin improvements for the dashboard, new/write screens and links screens, see #18198

git-svn-id: http://svn.automattic.com/wordpress/trunk@18736 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
azaozz 2011-09-21 06:16:24 +00:00
parent 0fd3915e9f
commit ffca93b1f2
11 changed files with 112 additions and 106 deletions

View File

@ -48,7 +48,6 @@ wp_enqueue_script('utils');
$admin_body_class = preg_replace('/[^a-z0-9_-]+/i', '-', $hook_suffix);
?>
<script type="text/javascript">
//<![CDATA[
addLoadEvent = function(func){if(typeof jQuery!="undefined")jQuery(document).ready(func);else if(typeof wpOnload!='function'){wpOnload=func;}else{var oldonload=wpOnload;wpOnload=function(){oldonload();func();}}};
var userSettings = {
'url': '<?php echo SITECOOKIEPATH; ?>',
@ -62,20 +61,6 @@ 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
@ -98,9 +83,6 @@ if ( is_admin_bar_showing() )
if ( is_rtl() )
$admin_body_class .= ' rtl';
if ( get_user_setting('responsive') )
$admin_body_class .= ' responsive';
$admin_body_class .= ' branch-' . str_replace( array( '.', ',' ), '-', floatval( $wp_version ) );
$admin_body_class .= ' version-' . str_replace( '.', '-', preg_replace( '/^([.0-9]+).*/', '$1', $wp_version ) );
$admin_body_class .= ' admin-color-' . sanitize_html_class( get_user_option( 'admin_color' ), 'fresh' );
@ -112,7 +94,8 @@ if ( $is_iphone ) { ?>
<body class="wp-admin no-js <?php echo apply_filters( 'admin_body_class', '' ) . " $admin_body_class"; ?>">
<script type="text/javascript">
document.body.className = document.body.className.replace(/no-js/, 'js');
wp_set_width_class();
if ( document.body.clientWidth > 1300 )
document.body.className += ' wide-window';
</script>
<div id="wpwrap">

File diff suppressed because one or more lines are too long

View File

@ -117,22 +117,33 @@ TABLE OF CONTENTS:
position: relative;
}
.wide-window.responsive .inner-sidebar {
.wide-window .inner-sidebar {
margin-right: -870px;
width: 100%;
display: block;
}
.inner-sidebar #side-sortables {
width: 280px;
min-height: 300px;
.columns-2 .inner-sidebar,
.wide-window .columns-2 .inner-sidebar {
margin-right: auto;
width: 286px;
display: block;
}
.wide-window.responsive .inner-sidebar #side-sortables {
.inner-sidebar #side-sortables {
min-height: 300px;
min-width: 280px;
max-width: 480px;
width: auto;
padding-right: 870px;
}
.wide-window .inner-sidebar #side-sortables {
margin-right: 870px;
}
.columns-2 .inner-sidebar #side-sortables {
width: 280px;
padding: 0;
}
.has-right-sidebar .inner-sidebar {
@ -150,13 +161,24 @@ TABLE OF CONTENTS:
margin-right: 300px;
}
.responsive #post-body-content {
#post-body-content {
max-width: 850px;
min-width: 465px;
}
.columns-1 #post-body-content,
.columns-2 #post-body-content {
max-width: none;
}
#side-sortables:empty {
border: 3px dashed #ccc;
height: 800px;
height: 500px;
}
#post-body-content #side-sortables:empty {
border: 0 none;
height: 0;
}
/* 2 columns main area */
@ -1934,11 +1956,9 @@ body.admin-bar #adminmenu {
float: left;
}
#postbox-container-1 .meta-box-sortables:first-child,
#postbox-container-2 .meta-box-sortables:first-child,
#postbox-container-3 .meta-box-sortables:first-child,
#postbox-container-4 .meta-box-sortables:first-child {
min-height: 200px;
.postbox-container .meta-box-sortables:empty:first-child {
border: 3px dashed #CCCCCC;
height: 300px;
}
.postbox .hndle {

View File

@ -160,7 +160,7 @@ do_action('do_meta_boxes', $post_type, 'normal', $post);
do_action('do_meta_boxes', $post_type, 'advanced', $post);
do_action('do_meta_boxes', $post_type, 'side', $post);
add_screen_option('layout_columns', array('max' => 2) );
add_screen_option('layout_columns', array('max' => 2, 'default' => 'auto') );
if ( 'post' == $post_type ) {
add_contextual_help($current_screen,
@ -193,7 +193,7 @@ if ( 'post' == $post_type ) {
require_once('./admin-header.php');
?>
<div class="wrap">
<div class="wrap columns-<?php echo (int) $screen_layout_columns ? (int) $screen_layout_columns : 'auto'; ?>">
<?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 ) : ?>
@ -224,10 +224,11 @@ wp_nonce_field( 'closedpostboxes', 'closedpostboxesnonce', false );
<div id="poststuff" class="metabox-holder<?php echo 1 != $screen_layout_columns ? ' has-right-sidebar' : ''; ?>">
<div id="side-info-column" class="inner-sidebar">
<?php
('page' == $post_type) ? do_action('submitpage_box') : do_action('submitpost_box');
$side_meta_boxes = do_meta_boxes($post_type, 'side', $post);
if ( 1 != $screen_layout_columns ) {
('page' == $post_type) ? do_action('submitpage_box') : do_action('submitpost_box');
$side_meta_boxes = do_meta_boxes($post_type, 'side', $post);
}
?>
</div>
@ -291,6 +292,11 @@ wp_nonce_field( 'samplepermalink', 'samplepermalinknonce', false );
<?php
}
if ( 1 == $screen_layout_columns ) {
('page' == $post_type) ? do_action('submitpage_box') : do_action('submitpost_box');
$side_meta_boxes = do_meta_boxes($post_type, 'side', $post);
}
do_meta_boxes($post_type, 'normal', $post);
( 'page' == $post_type ) ? do_action('edit_page_form') : do_action('edit_form_advanced');

View File

@ -37,7 +37,7 @@ do_action('do_meta_boxes', 'link', 'normal', $link);
do_action('do_meta_boxes', 'link', 'advanced', $link);
do_action('do_meta_boxes', 'link', 'side', $link);
add_screen_option('layout_columns', array('max' => 2) );
add_screen_option('layout_columns', array('max' => 2, 'default' => 'auto') );
add_contextual_help($current_screen,
'<p>' . __( 'You can add or edit links on this screen by entering information in each of the boxes. Only the link&#8217;s web address and name (the text you want to display on your site as the link) are required fields.' ) . '</p>' .
@ -49,9 +49,9 @@ add_contextual_help($current_screen,
);
require_once ('admin-header.php');
?>
<div class="wrap">
<div class="wrap columns-<?php echo (int) $screen_layout_columns ? (int) $screen_layout_columns : 'auto'; ?>">
<?php screen_icon(); ?>
<h2><?php echo esc_html( $title ); ?> <a href="link-add.php" class="add-new-h2"><?php echo esc_html_x('Add New', 'link'); ?></a></h2>
@ -69,14 +69,13 @@ wp_nonce_field( $nonce_action );
wp_nonce_field( 'closedpostboxes', 'closedpostboxesnonce', false );
wp_nonce_field( 'meta-box-order', 'meta-box-order-nonce', 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
do_action('submitlink_box');
$side_meta_boxes = do_meta_boxes( 'link', 'side', $link );
if ( 1 != $screen_layout_columns ) {
do_action('submitlink_box');
$side_meta_boxes = do_meta_boxes( 'link', 'side', $link );
}
?>
</div>
@ -108,6 +107,11 @@ $side_meta_boxes = do_meta_boxes( 'link', 'side', $link );
<?php
if ( 1 == $screen_layout_columns ) {
do_action('submitlink_box');
$side_meta_boxes = do_meta_boxes( 'link', 'side', $link );
}
do_meta_boxes('link', 'normal', $link);
do_meta_boxes('link', 'advanced', $link);

View File

@ -1874,7 +1874,7 @@ function screen_layout($screen) {
if ( isset($wp_current_screen_options['layout_columns']['default']) )
$screen_layout_columns = $wp_current_screen_options['layout_columns']['default'];
else
$screen_layout_columns = '0';
$screen_layout_columns = 'auto';
}
$i = 1;
@ -2270,4 +2270,4 @@ jQuery(document).ready( function($) {
//]]>
</script>
<?php
}
}

View File

@ -25,7 +25,7 @@ $parent_file = 'index.php';
if ( is_user_admin() )
add_screen_option('layout_columns', array('max' => 4, 'default' => 1) );
else
add_screen_option('layout_columns', array('max' => 4, 'default' => 2) );
add_screen_option('layout_columns', array('max' => 4, 'default' => 'auto') );
add_contextual_help($current_screen,

View File

@ -2,30 +2,36 @@ var postboxes;
(function($) {
postboxes = {
add_postbox_toggles : function(page,args) {
this.init(page,args);
add_postbox_toggles : function(page, args) {
this.init(page, args);
$('.postbox h3, .postbox .handlediv').click( function() {
var p = $(this).parent('.postbox'), id = p.attr('id');
if ( 'dashboard_browser_nag' == id )
return;
p.toggleClass('closed');
postboxes.save_state(page);
if ( id ) {
if ( !p.hasClass('closed') && $.isFunction(postboxes.pbshow) )
postboxes.pbshow(id);
else if ( p.hasClass('closed') && $.isFunction(postboxes.pbhide) )
postboxes.pbhide(id);
}
} );
});
$('.postbox h3 a').click( function(e) {
e.stopPropagation();
} );
});
$('.postbox a.dismiss').click( function(e) {
var hide_id = $(this).parents('.postbox').attr('id') + '-hide';
$( '#' + hide_id ).prop('checked', false).triggerHandler('click');
return false;
} );
});
$('.hide-postbox-tog').click( function() {
var box = $(this).val();
@ -39,39 +45,38 @@ var postboxes;
postboxes.pbhide( box );
}
postboxes.save_state(page);
} );
});
$('.columns-prefs input[type="radio"]').click(function(){
var num = $(this).val(), ps = $('#poststuff'), wrap = $('.wrap').first();
var num = $(this).val(), ps = $('#poststuff');
if ( num == 'auto' ) {
setUserSetting('responsive', '1');
$(document.body).addClass('responsive');
$(window).bind('resize.responsive', function(){ postboxes.auto_columns(); });
if ( ps.length )
wrap.removeClass('columns-1').removeClass('columns-2');
$('.wrap').removeClass('columns-1').removeClass('columns-2');
postboxes.auto_columns();
} else {
$(window).unbind('resize.responsive');
num = parseInt(num, 10);
deleteUserSetting('responsive');
$(document.body).removeClass('responsive');
if ( ps.length ) { // write pages
if ( num == 2 ) {
wrap.removeClass('columns-1').addClass('columns-2');
$('.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 ) {
wrap.removeClass('columns-2').addClass('columns-1');
$('.wrap').removeClass('columns-2').addClass('columns-1');
ps.removeClass('has-right-sidebar');
$('#normal-sortables').before( $('#side-sortables') );
if ( !$('#post-body-content #side-sortables').length )
$('#normal-sortables').before( $('#side-sortables') );
}
} else { // dashboard
@ -141,49 +146,42 @@ var postboxes;
},
auto_columns : function() { // responsive admin
var pb, dw;
var poststuff = $('#poststuff'), width;
if ( !$(document.body).hasClass('responsive') )
return;
if ( poststuff.length ) { // post-new, post, links, etc.
width = $('#post-body').width();
if ( adminpage == 'post-php' ) {
pb = $('#post-body').width();
if ( width < 800 ) {
poststuff.removeClass('has-right-sidebar');
if ( pb < 800 ) {
$('#poststuff').removeClass('has-right-sidebar');
$('#normal-sortables').before( $('#side-sortables') );
if ( !$('#post-body-content #side-sortables').length )
$('#normal-sortables').before( $('#side-sortables') );
} else {
poststuff.addClass('has-right-sidebar');
if ( !$('#side-info-column #side-sortables').length )
$('#side-info-column').append( $('#side-sortables') );
if ( width < 1150 )
$(document.body).removeClass('wide-window');
else
$(document.body).addClass('wide-window');
}
if ( pb >= 800 && pb < 1150 ) {
$('#poststuff').addClass('has-right-sidebar');
$('#side-info-column').append( $('#side-sortables') );
$(document.body).removeClass('wide-window');
}
} else if ( $('#dashboard-widgets-wrap').length ) { // dashboard
width = $(window).width();
if ( pb >= 1150 ) {
$(document.body).addClass('wide-window');
}
} else if ( adminpage == 'index-php' ) {
dw = $('#dashboard-widgets-wrap').width();
if ( dw < 700 ) {
if ( width < 950 ) {
this._dash_columns(1)
}
if ( dw >= 700 && dw < 1100 ) {
} else if ( width < 1300 ) {
this._dash_columns(2)
}
if ( dw >= 1100 && dw < 1500 ) {
} else if ( width < 1700 ) {
this._dash_columns(3)
}
if ( dw >= 1500 ) {
} else {
this._dash_columns(4)
}
}
},
_dash_columns : function(n) {
@ -240,12 +238,7 @@ var postboxes;
};
$(document).ready(function(){
if ( $('#wp_auto_columns').prop('checked') ) {
setUserSetting('responsive', '1');
$(document.body).addClass('responsive');
}
if ( $(document.body).hasClass('responsive') ) {
if ( !$('#wp_auto_columns').length || $('#wp_auto_columns').prop('checked') ) {
$(window).bind('resize.responsive', function(){ postboxes.auto_columns(); });
postboxes.auto_columns();
}

File diff suppressed because one or more lines are too long

View File

@ -38,7 +38,7 @@ wp_enqueue_script( 'dashboard' );
wp_enqueue_script( 'plugin-install' );
add_thickbox();
add_screen_option('layout_columns', array('max' => 4, 'default' => 2) );
add_screen_option('layout_columns', array('max' => 4, 'default' => 'auto') );
require_once( '../admin-header.php' );

View File

@ -283,7 +283,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'), '20110916', 1 );
$scripts->add( 'postbox', "/wp-admin/js/postbox$suffix.js", array('jquery-ui-sortable'), '20110920', 1 );
$scripts->add( 'post', "/wp-admin/js/post$suffix.js", array('suggest', 'wp-lists', 'postbox'), '20110524', 1 );
$scripts->add_script_data( 'post', 'postL10n', array(
@ -406,7 +406,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(), '20110919b' );
$styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20110920' );
$styles->add( 'ie', "/wp-admin/css/ie$suffix.css", array(), '20110919' );
$styles->add_data( 'ie', 'conditional', 'lte IE 7' );