Bring in the responsive component of MP6. See #25858.

* Makes the admin fully responsive down to 320px wide.
* Adds a touch-optimized main menu that can be opened and closed from the toolbar.
* Size and positioning adjustments to icons, buttons, and text elements for better touch usability.

A few changes since MP6:

* Removed jQuery mobile. This script was used to add swipe controls to open/close the sidebar menu. This feature was apparently buggy and due to the pending demise of jQuery mobile, it was removed.
* Removed use of Backbone.js. Adding Backbone.js to this script would add a dependency of Backbone.js for all of the admin. Additionally, it was used to add a menu item. Instead of doing that, it was added via the admin menu API. This also fixes a bad delay in the item showing in the menu.
* CSS layout is standardized. Comments have also been cleaned up.
* Jetpack and Akismet code is removed.
* RTL CSS is removed.
* JS passes hinting other than one small issue that will likely be removed when parts of the code are reviewed.

A number of areas for improvement remain; we're tracking these issues in the comments of #25858.

Props to tollmanz, tillkruess, helen, dd32, and apeatling.


Built from https://develop.svn.wordpress.org/trunk@26134


git-svn-id: http://core.svn.wordpress.org/trunk@26046 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Matt Thomas 2013-11-13 18:00:10 +00:00
parent a5433f58a1
commit 2adf09fea9
9 changed files with 3768 additions and 11 deletions

View File

@ -67,6 +67,7 @@ var ajaxurl = '<?php echo admin_url( 'admin-ajax.php', 'relative' ); ?>',
decimalPoint = '<?php echo addslashes( $wp_locale->number_format['decimal_point'] ); ?>',
isRtl = <?php echo (int) is_rtl(); ?>;
</script>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<?php
/**

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -530,6 +530,175 @@ stickyMenu = {
stickyMenu.init();
var moby6 = {
init: function() {
// cached selectors
this.$html = $( document.documentElement );
this.$body = $( document.body );
this.$wpwrap = $( '#wpwrap' );
this.$wpbody = $( '#wpbody' );
this.$adminmenu = $( '#adminmenu' );
this.$overlay = $( '#moby6-overlay' );
this.$toolbar = $( '#wp-toolbar' );
this.$toolbarPopups = this.$toolbar.find( 'a[aria-haspopup="true"]' );
// Modify functionality based on custom activate/deactivate event
this.$html
.on( 'activate.moby6', function() { moby6.activate(); } )
.on( 'deactivate.moby6', function() { moby6.deactivate(); } );
// Toggle sidebar when toggle is clicked
$( '#wp-admin-bar-toggle-button' ).on( 'click', function(evt) {
evt.preventDefault();
moby6.$wpwrap.toggleClass( 'moby6-open' );
} );
// Trigger custom events based on active media query.
this.matchMedia();
$( window ).on( 'resize', $.proxy( this.matchMedia, this ) );
},
activate: function() {
window.stickymenu && window.stickymenu.disable();
if ( ! moby6.$body.hasClass( 'auto-fold' ) )
moby6.$body.addClass( 'auto-fold' );
this.modifySidebarEvents();
this.disableDraggables();
this.movePostSearch();
},
deactivate: function() {
window.stickymenu && window.stickymenu.enable();
this.enableDraggables();
this.removeHamburgerButton();
this.restorePostSearch();
},
matchMedia: function() {
clearTimeout( this.resizeTimeout );
this.resizeTimeout = setTimeout( function() {
if ( ! window.matchMedia )
return;
if ( window.matchMedia( '(max-width: 782px)' ).matches ) {
if ( moby6.$html.hasClass( 'touch' ) )
return;
moby6.$html.addClass( 'touch' ).trigger( 'activate.moby6' );
} else {
if ( ! moby6.$html.hasClass( 'touch' ) )
return;
moby6.$html.removeClass( 'touch' ).trigger( 'deactivate.moby6' );
}
if ( window.matchMedia( '(max-width: 480px)' ).matches ) {
moby6.enableOverlay();
} else {
moby6.disableOverlay();
}
}, 150 );
},
enableOverlay: function() {
if ( this.$overlay.length === 0 ) {
this.$overlay = $( '<div id="moby6-overlay"></div>' )
.insertAfter( '#wpcontent' )
.hide()
.on( 'click.moby6', function() {
moby6.$toolbar.find( '.menupop.hover' ).removeClass( 'hover' );
$( this ).hide();
});
}
this.$toolbarPopups.on( 'click.moby6', function() {
moby6.$overlay.show();
});
},
disableOverlay: function() {
this.$toolbarPopups.off( 'click.moby6' );
this.$overlay.hide();
},
modifySidebarEvents: function() {
this.$body.off( '.wp-mobile-hover' );
this.$adminmenu.find( 'a.wp-has-submenu' ).off( '.wp-mobile-hover' );
var scrollStart = 0;
this.$adminmenu.on( 'touchstart.moby6', 'li.wp-has-submenu > a', function() {
scrollStart = $( window ).scrollTop();
});
this.$adminmenu.on( 'touchend.moby6', 'li.wp-has-submenu > a', function( e ) {
e.preventDefault();
if ( $( window ).scrollTop() !== scrollStart )
return false;
$( this ).find( 'li.wp-has-submenu' ).removeClass( 'selected' );
$( this ).parent( 'li' ).addClass( 'selected' );
});
},
disableDraggables: function() {
this.$wpbody
.find( '.hndle' )
.removeClass( 'hndle' )
.addClass( 'hndle-disabled' );
},
enableDraggables: function() {
this.$wpbody
.find( '.hndle-disabled' )
.removeClass( 'hndle-disabled' )
.addClass( 'hndle' );
},
removeHamburgerButton: function() {
if ( this.hamburgerButtonView !== undefined )
this.hamburgerButtonView.destroy();
},
movePostSearch: function() {
this.searchBox = this.$wpbody.find( 'p.search-box' );
if ( this.searchBox.length ) {
this.searchBox.hide();
if ( this.searchBoxClone === undefined ) {
this.searchBoxClone = this.searchBox.first().clone().insertAfter( 'div.tablenav.bottom' );
}
this.searchBoxClone.show();
}
},
restorePostSearch: function() {
if ( this.searchBox !== undefined ) {
this.searchBox.show();
if ( this.searchBoxClone !== undefined )
this.searchBoxClone.hide();
}
}
};
// Fire moby6.init when document is ready
$( document ).ready( $.proxy( moby6.init, moby6 ) );
// make Windows 8 devices playing along nicely
if ( '-ms-user-select' in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/) ) {
var msViewportStyle = document.createElement( 'style' );
msViewportStyle.appendChild(
document.createTextNode( '@-ms-viewport{width:auto!important}' )
);
document.getElementsByTagName( 'head' )[0].appendChild( msViewportStyle );
}
// internal use
$(document).bind( 'wp_CloseOnEscape', function( e, data ) {
if ( typeof(data.cb) != 'function' )

File diff suppressed because one or more lines are too long

View File

@ -155,6 +155,26 @@ function wp_admin_bar_wp_menu( $wp_admin_bar ) {
) );
}
/**
* Add the sidebar toggle button.
*
* @since 3.8.0
*
* @param WP_Admin_Bar $wp_admin_bar
*/
function wp_admin_bar_sidebar_toggle( $wp_admin_bar ) {
if ( is_admin() ) {
$wp_admin_bar->add_menu( array(
'id' => 'toggle-button',
'title' => '<span class="ab-icon"></span>',
'href' => '#',
'meta' => array(
'title' => __( 'Menu' ),
),
) );
}
}
/**
* Add the "My Account" item.
*

View File

@ -482,6 +482,7 @@ class WP_Admin_Bar {
add_action( 'admin_bar_menu', 'wp_admin_bar_my_account_item', 7 );
// Site related.
add_action( 'admin_bar_menu', 'wp_admin_bar_sidebar_toggle', 0 );
add_action( 'admin_bar_menu', 'wp_admin_bar_wp_menu', 10 );
add_action( 'admin_bar_menu', 'wp_admin_bar_my_sites_menu', 20 );
add_action( 'admin_bar_menu', 'wp_admin_bar_site_menu', 30 );