Admin Bar: Secondary is so passé. Groups are the new black. fixes #19136.

git-svn-id: http://svn.automattic.com/wordpress/trunk@19429 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
koopersmith 2011-11-23 21:46:47 +00:00
parent ff358379c9
commit eecf9dc3c1
4 changed files with 181 additions and 97 deletions

View File

@ -90,8 +90,7 @@ function wp_admin_bar_wp_menu( $wp_admin_bar ) {
// Add WordPress.org link
$wp_admin_bar->add_menu( array(
'parent' => 'wp-logo',
'secondary' => true,
'parent' => 'wp-logo-external',
'id' => 'wporg',
'title' => __('WordPress.org'),
'href' => __('http://wordpress.org'),
@ -99,8 +98,7 @@ function wp_admin_bar_wp_menu( $wp_admin_bar ) {
// Add codex link
$wp_admin_bar->add_menu( array(
'parent' => 'wp-logo',
'secondary' => true,
'parent' => 'wp-logo-external',
'id' => 'documentation',
'title' => __('Documentation'),
'href' => __('http://codex.wordpress.org'),
@ -108,8 +106,7 @@ function wp_admin_bar_wp_menu( $wp_admin_bar ) {
// Add forums link
$wp_admin_bar->add_menu( array(
'parent' => 'wp-logo',
'secondary' => true,
'parent' => 'wp-logo-external',
'id' => 'support-forums',
'title' => __('Support Forums'),
'href' => __('http://wordpress.org/support/'),
@ -117,8 +114,7 @@ function wp_admin_bar_wp_menu( $wp_admin_bar ) {
// Add feedback link
$wp_admin_bar->add_menu( array(
'parent' => 'wp-logo',
'secondary' => true,
'parent' => 'wp-logo-external',
'id' => 'feedback',
'title' => __('Feedback'),
'href' => __('http://wordpress.org/support/forum/requests-and-feedback'),
@ -143,7 +139,7 @@ function wp_admin_bar_my_account_menu( $wp_admin_bar ) {
$wp_admin_bar->add_menu( array(
'id' => 'my-account',
'secondary' => true,
'parent' => 'top-secondary',
'title' => $howdy . $avatar,
'href' => $profile_url,
'meta' => array(
@ -165,7 +161,6 @@ function wp_admin_bar_my_account_menu( $wp_admin_bar ) {
'title' => $user_info,
'href' => $profile_url,
'meta' => array(
'class' => 'user-info user-info-item',
'tabindex' => -1
),
) );
@ -174,18 +169,12 @@ function wp_admin_bar_my_account_menu( $wp_admin_bar ) {
'id' => 'edit-profile',
'title' => __( 'Edit My Profile' ),
'href' => $profile_url,
'meta' => array(
'class' => 'user-info-item',
),
) );
$wp_admin_bar->add_menu( array(
'parent' => 'my-account',
'id' => 'logout',
'title' => __( 'Log Out' ),
'href' => wp_logout_url(),
'meta' => array(
'class' => 'user-info-item',
),
) );
}
}
@ -276,8 +265,13 @@ function wp_admin_bar_my_sites_menu( $wp_admin_bar ) {
) );
if ( is_super_admin() ) {
$wp_admin_bar->add_menu( array(
$wp_admin_bar->add_group( array(
'parent' => 'my-sites',
'id' => 'my-sites-super-admin',
) );
$wp_admin_bar->add_menu( array(
'parent' => 'my-sites-super-admin',
'id' => 'network-admin',
'title' => __('Network Admin'),
'href' => network_admin_url(),
@ -309,7 +303,15 @@ function wp_admin_bar_my_sites_menu( $wp_admin_bar ) {
) );
}
// Add blog links
// Add site links
$wp_admin_bar->add_group( array(
'parent' => 'my-sites',
'id' => 'my-sites-list',
'meta' => array(
'class' => is_super_admin() ? 'ab-sub-secondary' : '',
),
) );
$blue_wp_logo_url = includes_url('images/wpmini-blue.png');
foreach ( (array) $wp_admin_bar->user->blogs as $blog ) {
@ -321,8 +323,7 @@ function wp_admin_bar_my_sites_menu( $wp_admin_bar ) {
$menu_id = 'blog-' . $blog->userblog_id;
$wp_admin_bar->add_menu( array(
'parent' => 'my-sites',
'secondary' => is_super_admin(),
'parent' => 'my-sites-list',
'id' => $menu_id,
'title' => $blavatar . $blogname,
'href' => get_admin_url( $blog->userblog_id ),
@ -480,7 +481,7 @@ function wp_admin_bar_new_content_menu( $wp_admin_bar ) {
}
if ( current_user_can( 'create_users' ) || current_user_can( 'promote_users' ) )
$actions[ 'user-new.php' ] = array( _x( 'User', 'add new from admin bar' ), 'new-user', true );
$actions[ 'user-new.php' ] = array( _x( 'User', 'add new from admin bar' ), 'new-user', 'new-secondary-object' );
if ( ! $actions )
return;
@ -493,11 +494,10 @@ function wp_admin_bar_new_content_menu( $wp_admin_bar ) {
foreach ( $actions as $link => $action ) {
list( $title, $id ) = $action;
$secondary = ! empty( $action[2] );
$parent = empty( $action[2] ) ? 'new-content' : $action[2];
$wp_admin_bar->add_menu( array(
'parent' => 'new-content',
'secondary' => $secondary,
'parent' => $parent,
'id' => $id,
'title' => $title,
'href' => admin_url( $link )
@ -598,6 +598,36 @@ function wp_admin_bar_search_menu( $wp_admin_bar ) {
) );
}
/**
* Add secondary menus.
*
* @since 3.3.0
*/
function wp_admin_bar_add_secondary_groups( $wp_admin_bar ) {
$wp_admin_bar->add_group( array(
'id' => 'top-secondary',
'meta' => array(
'class' => 'ab-top-secondary',
),
) );
$wp_admin_bar->add_group( array(
'parent' => 'wp-logo',
'id' => 'wp-logo-external',
'meta' => array(
'class' => 'ab-sub-secondary',
),
) );
$wp_admin_bar->add_group( array(
'parent' => 'new-content',
'id' => 'new-secondary-object',
'meta' => array(
'class' => 'ab-sub-secondary',
),
) );
}
/**
* Style and scripts for the admin bar.
*

View File

@ -12,10 +12,10 @@ class WP_Admin_Bar {
$this->proto = 'https://';
$this->user = new stdClass;
$this->root = new stdClass;
$this->root->children = (object) array(
'primary' => array(),
'secondary' => array(),
$this->root = (object) array(
'id' => 'root',
'group' => false,
'children' => array(),
);
if ( is_user_logged_in() ) {
@ -68,7 +68,7 @@ class WP_Admin_Bar {
* - title - string - The title of the node.
* - parent - string - The ID of the parent node. Optional.
* - href - string - The link for the item. Optional.
* - secondary - boolean - If the item should be part of a secondary menu. Optional. Default false.
* - group - boolean - If the node is a group. Optional. Default false.
* - meta - array - Meta data including the following keys: html, class, onclick, target, title.
*/
public function add_node( $args ) {
@ -77,21 +77,22 @@ class WP_Admin_Bar {
$args = array_merge( array( 'parent' => func_get_arg(0) ), func_get_arg(2) );
// Ensure we have a valid title.
if ( empty( $args['title'] ) )
return false;
if ( empty( $args['id'] ) ) {
if ( empty( $args['title'] ) )
return;
_doing_it_wrong( __METHOD__, __( 'The menu ID should not be empty.' ), '3.3' );
// Deprecated: Generate an ID from the title.
$args['id'] = esc_attr( sanitize_title( trim( $args['title'] ) ) );
}
$defaults = array(
'id' => false,
'title' => false,
'parent' => false,
'href' => false,
'secondary' => false,
'meta' => array(),
'id' => false,
'title' => false,
'parent' => false,
'href' => false,
'group' => false,
'meta' => array(),
);
// If the node already exists, keep any data that isn't provided.
@ -99,14 +100,25 @@ class WP_Admin_Bar {
$defaults = (array) $this->nodes[ $args['id'] ];
$args = wp_parse_args( $args, $defaults );
$args['children'] = (object) array(
'primary' => array(),
'secondary' => array(),
);
$args['children'] = array();
$this->nodes[ $args['id'] ] = (object) $args;
}
/**
* Add a group to a menu node.
*
* @param array $args - The arguments for each node.
* - id - string - The ID of the item.
* - parent - string - The ID of the parent node. Optional. Default root.
* - meta - array - Meta data including the following keys: class, onclick, target, title.
*/
public function add_group( $args ) {
$args['group'] = true;
$this->add_node( $args );
}
public function remove_node( $id ) {
unset( $this->nodes[ $id ] );
}
@ -136,10 +148,27 @@ class WP_Admin_Bar {
$parent = $this->nodes[ $node->parent ];
}
if ( $node->secondary )
$parent->children->secondary[] = $node;
else
$parent->children->primary[] = $node;
// Ensure that our tree is of the form "item -> group -> item -> group -> ..."
if ( ! $parent->group && ! $node->group ) { // Both are items.
// The default group is added here to allow groups that are
// added before standard menu items to render first.
if ( ! isset( $parent->children['default'] ) ) {
$parent->children['default'] = (object) array(
'id' => "{$parent->id}-default",
'parent' => $parent->id,
'group' => true,
'children' => array(),
);
}
$parent = $parent->children['default'];
}
// Update the parent ID (it might have changed).
$node->parent = $parent->id;
// Add the node to the tree.
$parent->children[] = $node;
}
// Add browser classes.
@ -159,33 +188,64 @@ class WP_Admin_Bar {
?>
<div id="wpadminbar" class="<?php echo $class; ?>">
<div class="quicklinks">
<ul class="ab-top-menu"><?php
foreach ( $this->root->children->primary as $node ) {
$this->recursive_render( $node );
}
?></ul>
<ul class="ab-top-menu ab-top-secondary"><?php
foreach ( $this->root->children->secondary as $node ) {
$this->recursive_render( $node );
}
?></ul>
<?php foreach ( $this->root->children as $group ) {
$this->render_group( $group, 'ab-top-menu' );
} ?>
</div>
</div>
<?php
}
function recursive_render( $node ) {
if ( ! $node->children->primary && $node->children->secondary ) {
$node->children->primary = $node->children->secondary;
$node->children->secondary = array();
private function render_group( $node, $class = '' ) {
if ( ! $node->group )
return;
// Check for groups within groups.
$groups = array();
foreach ( $node->children as $child ) {
if ( $child->group ) {
$groups[] = $child;
} else {
if ( ! isset( $default ) ) {
// Create a default proxy item to be used in the case of nested groups.
$default = (object) wp_parse_args( array( 'children' => array() ), (array) $node );
$groups[] = $default;
}
$default->children[] = $child;
}
}
$is_parent = (bool) $node->children->primary;
$is_single_group = count( $groups ) === 1;
// If we don't have any subgroups, render the group.
if ( $is_single_group && ! empty( $node->children ) ):
if ( ! empty( $node->meta['class'] ) )
$class .= ' ' . $node->meta['class'];
?><ul id="<?php echo esc_attr( "wp-admin-bar-{$node->id}" ); ?>" class="<?php echo esc_attr( $class ); ?>"><?php
foreach ( $node->children as $item ) {
$this->render_item( $item );
}
?></ul><?php
// Wrap the subgroups in a div and render each individual subgroup.
elseif ( ! $is_single_group ):
?><div id="<?php echo esc_attr( "wp-admin-bar-{$node->id}-container" ); ?>" class="ab-group-container"><?php
foreach ( $groups as $group ) {
$this->render_group( $group, $class );
}
?></div><?php
endif;
}
private function render_item( $node ) {
if ( $node->group )
return;
$is_parent = (bool) $node->children;
$has_link = (bool) $node->href;
$menuclass = $is_parent ? 'menupop' : '';
@ -222,23 +282,9 @@ class WP_Admin_Bar {
if ( $is_parent ) :
?><div class="ab-sub-wrapper"><?php
// Render primary submenu
?><ul class="ab-submenu"><?php
foreach ( $node->children->primary as $child_node ) {
$this->recursive_render( $child_node );
foreach ( $node->children as $group ) {
$this->render_group( $group, 'ab-submenu' );
}
?></ul><?php
// Render secondary submenu
if ( ! empty( $node->children->secondary ) ):
?><ul class="ab-submenu ab-sub-secondary"><?php
foreach ( $node->children->secondary as $child_node ) {
$this->recursive_render( $child_node );
}
?></ul><?php
endif;
?></div><?php
endif;
@ -247,7 +293,10 @@ class WP_Admin_Bar {
?>
</li><?php
}
function recursive_render( $node ) {
$this->render_item( $node );
}
function add_menus() {
@ -271,6 +320,8 @@ class WP_Admin_Bar {
if ( ! is_admin() )
add_action( 'admin_bar_menu', 'wp_admin_bar_search_menu', 100 );
add_action( 'admin_bar_menu', 'wp_admin_bar_add_secondary_groups', 200 );
do_action( 'add_admin_bar_menus' );
}
}

View File

@ -107,17 +107,17 @@
/**
* My Account
*/
#wpadminbar #wp-admin-bar-my-account.with-avatar .user-info-item {
#wpadminbar #wp-admin-bar-my-account.with-avatar #wp-admin-bar-my-account-default > li {
margin-right: 88px;
margin-left: 16px;
}
#wpadminbar #wp-admin-bar-my-account .user-info-item > a {
#wp-admin-bar-my-account-default > li > .ab-item {
padding-left: 0;
padding-right: 8px;
}
#wp-admin-bar-my-account .user-info .avatar {
#wp-admin-bar-user-info .avatar {
left: auto;
right: -72px;
}

View File

@ -135,8 +135,13 @@
margin: 0 -1px 0 0;
}
#wpadminbar .ab-sub-wrapper > .ab-submenu:first-child {
border-top: none;
}
#wpadminbar .ab-submenu {
padding: 6px 0;
border-top: 1px solid #dfdfdf;
}
#wpadminbar .selected .shortlink-input {
@ -247,10 +252,8 @@
position: relative;
right: auto;
margin: 0;
border: 0;
background: #eee;
border-top: 1px solid #dfdfdf;
-moz-box-shadow: none;
-webkit-box-shadow: none;
@ -310,52 +313,52 @@
min-width: 270px;
}
#wpadminbar #wp-admin-bar-my-account .user-info-item {
#wpadminbar #wp-admin-bar-my-account-default > li {
margin-left: 16px;
margin-right: 16px;
}
#wpadminbar #wp-admin-bar-my-account.with-avatar .user-info-item {
#wpadminbar #wp-admin-bar-my-account.with-avatar #wp-admin-bar-my-account-default > li {
margin-left: 88px;
}
#wpadminbar #wp-admin-bar-my-account .user-info-item > a {
#wp-admin-bar-my-account-default > li > .ab-item {
padding-left: 8px;
}
#wpadminbar #wp-admin-bar-my-account .user-info {
#wpadminbar #wp-admin-bar-user-info {
margin-top: 6px;
margin-bottom: 15px;
height: auto;
background: none;
}
#wp-admin-bar-my-account .user-info .avatar {
#wp-admin-bar-user-info .avatar {
position: absolute;
left: -72px;
top: 4px;
}
#wpadminbar #wp-admin-bar-my-account .user-info a {
#wpadminbar #wp-admin-bar-user-info a {
height: auto;
}
#wpadminbar #wp-admin-bar-my-account .user-info span {
#wpadminbar #wp-admin-bar-user-info span {
background: none;
padding: 0;
height: 18px;
}
#wpadminbar #wp-admin-bar-my-account .user-info .display-name,
#wpadminbar #wp-admin-bar-my-account .user-info .username {
#wpadminbar #wp-admin-bar-user-info .display-name,
#wpadminbar #wp-admin-bar-user-info .username {
text-shadow: none;
display: block;
}
#wpadminbar #wp-admin-bar-my-account .user-info .display-name {
#wpadminbar #wp-admin-bar-user-info .display-name {
color: #333;
}
#wpadminbar #wp-admin-bar-my-account .user-info .username {
#wpadminbar #wp-admin-bar-user-info .username {
color: #999;
font-size: 11px;
}