Improve 'howdy' dropdown styles, add 'your profile' item and no-js. see #17324.

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

wp-admin/admin-header.php

@@ -143,15 +143,18 @@ if ( function_exists('mb_strlen') ) {
 do_action('in_admin_header');
 
 // Generate user profile and info links.
-$howdy = sprintf( __('Howdy, <a href="%1$s" title="Edit your profile">%2$s</a>'), 'profile.php', $user_identity );
+$howdy = sprintf( __('Howdy, %1$s'), $user_identity );
 $links = array();
 
+$links[5] = '<a href="profile.php" title="' . esc_attr__('Edit your profile') . '">' . __('Your Profile') . '</a>';
+
 if ( is_multisite() && is_super_admin() ) {
 	if ( !is_network_admin() )
 		$links[10] = '<a href="' . network_admin_url() . '" title="' . ( ! empty( $update_title ) ? $update_title : esc_attr__('Network Admin') ) . '">' . __('Network Admin') . ( ! empty( $total_update_count ) ? ' (' . number_format_i18n( $total_update_count ) . ')' : '' ) . '</a>';
 	else
 		$links[10] = '<a href="' . get_dashboard_url( get_current_user_id() ) . '" title="' . esc_attr__('Site Admin') . '">' . __('Site Admin') . '</a>';
 }
+
 $links[15] = '<a href="' . wp_logout_url() . '" title="' . esc_attr__('Log Out') . '">' . __('Log Out') . '</a>';
 
 $links = apply_filters( 'admin_user_info_links', $links, $current_user );
@@ -159,17 +162,23 @@ ksort( $links );
 
 // Trim whitespace and pipes from links, then convert to list items.
 $links = array_map( 'trim', $links, array_fill( 0, count( $links ), " |\n\t" ) );
-$links = '<li>' . implode( '</li><li>', $links ) . '</li>';
+
+$links_no_js = implode( ' | ', $links );
+$links_js = '<li>' . implode( '</li><li>', $links ) . '</li>';
 
 ?>
 
 <div id="wphead-info">
 <div id="user_info">
-	<p><?php echo $howdy; ?></p>
+	<p class="hide-if-js"><?php echo "$howdy | $links_no_js"; ?></p>
-	<div id="user_info_arrow"></div>
+
-	<div id="user_info_links_wrap"><div id="user_info_links">
+	<div class="hide-if-no-js">
-		<ul><?php echo $links; ?></ul>
+		<p><?php echo $howdy; ?></p>
-	</div></div>
+		<div id="user_info_arrow"></div>
+		<div id="user_info_links_wrap"><div id="user_info_links">
+			<ul><?php echo $links_js; ?></ul>
+		</div></div>
+	</div>
 </div>
 </div>
 

wp-admin/css/colors-fresh.dev.css

@@ -722,6 +722,18 @@ table.widefat span.spam a,
 	color: #777;
 }
 
+#user_info:hover,
+#user_info.active {
+	color: #333;
+}
+
+#user_info.active {
+	background-color: #f1f1f1;
+	background-image: -webkit-linear-gradient( bottom, #e9e9e9, #f9f9f9 );
+	background-image: -moz-linear-gradient( bottom, #e9e9e9, #f9f9f9 );
+	border-color: #aaa #aaa #dfdfdf;
+}
+
 #user_info_arrow {
 	background: transparent url(../images/arrows.png) no-repeat 6px 6px;
 }
@@ -731,22 +743,26 @@ table.widefat span.spam a,
 	background: transparent url(../images/arrows-dark.png) no-repeat 6px 6px;
 }
 
+#user_info_links {
+	-moz-box-shadow: 0 3px 2px -2px rgba( 0, 0, 0, 0.2 );
+	-webkit-box-shadow: 0 3px 2px -2px rgba( 0, 0, 0, 0.2 );
+	box-shadow: 0 3px 2px -2px rgba( 0, 0, 0, 0.2 );
+}
+
 #user_info_links ul {
-	background: #f9f9f9;
+	background: #f1f1f1;
-	border-color: #dfdfdf;
+	border-color: #ccc #aaa #aaa;
-	-moz-box-shadow: inset 0 1px 0 #fff;
+	-moz-box-shadow: inset 0 1px 0 #f9f9f9;
-	-webkit-box-shadow: inset 0 1px 0 #fff;
+	-webkit-box-shadow: inset 0 1px 0 #f9f9f9;
-	box-shadow: inset 0 1px 0 #fff;
+	box-shadow: inset 0 1px 0 #f9f9f9;
 }
 
 #user_info_links li:hover {
-	background-color: #EAF2FA;
+	background-color: #dfdfdf;
-	color: #333;
 }
 
 #user_info_links li:hover a,
 #user_info_links li a:hover {
-	color: #333;
 	text-decoration: none;
 }
 
@@ -757,7 +773,6 @@ table.widefat span.spam a,
 	text-decoration: none;
 }
 
-#user_info a:hover,
 #footer a:hover {
 	color: #000;
 	text-decoration: underline;

wp-admin/css/wp-admin.dev.css

@@ -833,24 +833,46 @@ form.upgrade .hint {
 	height: 36px;
 	position: relative;
 	z-index: 49;
+	border-style: solid;
+	border-width: 0;
+	padding: 0 2px 0 6px;
+}
+
+#user_info.active {
+	border-width: 0 1px;
+	margin-right: -1px;
 }
 
 #user_info p {
-	margin: 0 20px 0 0;
+	margin: 0;
 	padding: 0;
 	line-height: 36px;
+	cursor: pointer;
+}
+
+#user_info .hide-if-no-js p {
+	margin: 0 20px 0 0;
+}
+
+#user_info:hover .hide-if-no-js p {
+	text-decoration: underline;
+}
+#user_info.active .hide-if-no-js p {
+	text-decoration: none;
 }
 
 #user_info_arrow {
 	height: 34px;
 	width: 24px;
 	position: absolute;
-	right: -2px;
+	right: 1px;
 	top: 4px;
+	cursor: pointer;
 }
 
 #user_info_links_wrap {
-	width: 160px;
+	min-width: 100px;
+	width: 100%;
 	position: absolute;
 	top: 36px;
 	right: 0;
@@ -859,15 +881,12 @@ form.upgrade .hint {
 }
 
 #user_info_links {
+	position: absolute;
+	left: -1px;
+	right: -1px;
 	overflow: hidden;
 }
 
-#user_info.active #user_info_links_wrap {
-	top: 28px;
-	right: -8px;
-	padding: 8px;
-}
-
 #user_info.active #user_info_links ul {
 	margin-top: 0;
 	-moz-transition: margin-top 150ms ease-out;
@@ -880,12 +899,13 @@ form.upgrade .hint {
 	border-width: 1px;
 	border-style: solid;
 	margin-top: -100%;
-	-moz-transition: margin-top 300ms ease-in;
+	-moz-transition: margin-top 250ms ease-in;
-	-webkit-transition: margin-top 300ms ease-in;
+	-webkit-transition: margin-top 250ms ease-in;
-	-o-transition: margin-top 300ms ease-in;
+	-o-transition: margin-top 250ms ease-in;
-	transition: margin-top 300ms ease-in;
+	transition: margin-top 250ms ease-in;
 }
 
+#user_info_links,
 #user_info_links ul,
 #user_info_links li:last-child {
 	-moz-border-radius: 0 0 3px 3px;

wp-includes/script-loader.php

@@ -487,13 +487,13 @@ 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(), '20110510b' );
+	$styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20110511' );
 
 	$styles->add( 'ie', "/wp-admin/css/ie$suffix.css", array(), '20101102' );
 	$styles->add_data( 'ie', 'conditional', 'lte IE 7' );
 
 	// all colors stylesheets need to have the same query strings (cache manifest compat)
-	$colors_version = '20110510b';
+	$colors_version = '20110511';
 
 	// Register "meta" stylesheet for admin colors. All colors-* style sheets should have the same version string.
 	$styles->add( 'colors', true, array(), $colors_version );