Ticket #28599: 28599-focusbar-border.patch

src/wp-admin/css/admin-menu.css

@@ -181 +181 @@
         color: #45bbe6;
 }
 
+/* On hover & focus display the blue "focus bar" on the left, darker background */
+#adminmenu a:hover,
+#adminmenu li.menu-top > a:focus,
+#adminmenu .wp-has-current-submenu .wp-submenu a:hover,
+#adminmenu .wp-has-current-submenu .wp-submenu a:focus,
+#adminmenu .wp-submenu a:hover,
+#adminmenu .wp-submenu a:focus {
+    box-shadow: inset 4px 0 0 0 currentColor;
+    transition: box-shadow .2s linear;
+}
+/* Top menu item color stays blue, when submenu is open */
+.admin-color-fresh #adminmenu li.opensub > a {
+    color: currentColor;
+}
+/* Focus bar in white, when menu item is current */
+#adminmenu li.current a:hover,
+#adminmenu li.current a:focus,
+#adminmenu .wp-submenu li.current a:hover,
+#adminmenu .wp-submenu li.current a:focus,
+#adminmenu li.wp-has-current-submenu > a.menu-top:hover,
+#adminmenu li.wp-has-current-submenu > a.menu-top:focus,
+#adminmenu li.wp-has-current-submenu > a:hover,
+#adminmenu li.wp-has-current-submenu > a:focus {
+    box-shadow: inset 4px 0 0 0 currentColor;
+}
+
 #adminmenu li.menu-top {
         border: none;
         min-height: 34px;
@@ -201 +227 @@
 .folded #adminmenu .wp-has-current-submenu .wp-submenu {
         padding: 7px 0 8px;
         z-index: 9999;
-        background-color: #333;
+        background-color: #444;
         -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
         box-shadow: 0 3px 5px rgba(0,0,0,0.2);
+    /* TODO */
+    border-left: 5px solid #333;
+}
+@media screen and (max-width: 782px) {
+    #adminmenu .wp-submenu {
+        border-left: none;
+    }
 }
 
 .js #adminmenu .sub-open,
@@ -235 +268 @@
 #adminmenu li.menu-top:hover,
 #adminmenu li.opensub > a.menu-top,
 #adminmenu li > a.menu-top:focus {
+    color: #45bbe6; /* .menu-top color should be blue like the icon, when submenu is open */
         position: relative;
         background-color: #111;
 }
@@ -375 +409 @@
         color: #fff;
 }
 
-#adminmenu li:hover div.wp-menu-image:before {
+#adminmenu li:hover div.wp-menu-image:before,
+/* Makes menu image blue on focus */
+.admin-color-fresh #adminmenu li a:focus div.wp-menu-image:before,
+/* Keep menu image blue when submenu is open */
+.admin-color-fresh #adminmenu li.opensub div.wp-menu-image:before {
         color: #45bbe6;
 }
+.admin-color-fresh #adminmenu li.current:hover div.wp-menu-image:before,
+.admin-color-fresh #adminmenu li.current a:focus div.wp-menu-image:before,
+/* Keeps icon white when it has the current submenu */
+.admin-color-fresh #adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,
+.admin-color-fresh #adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before {
+        color: #fff;
+}
 
 .folded #adminmenu div.wp-menu-image {
         width: 35px;
@@ -433 +478 @@
         margin-top: -8px;
 }
 
-.folded ul#adminmenu li:hover a.wp-has-current-submenu:after {
-        display: none;
-}
-
 .folded ul#adminmenu a.wp-has-current-submenu:after,
 .folded ul#adminmenu > li a.current:after {
         border-width: 4px;
@@ -444 +485 @@
 }
 
 /* flyout menu arrow */
-#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
+#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after,
+/* Add submenu indicating arrows on focus */
+#adminmenu li a.wp-has-submenu.wp-not-current-submenu:focus:after,
+#adminmenu li.opensub a.wp-has-submenu.wp-not-current-submenu:after {
         right: 0;
         border: solid transparent;
         content: " ";
@@ -457 +501 @@
         z-index: 10000;
 }
 
-.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
+/* Smaller arrow when folded */
+.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after,
+.folded #adminmenu li a.wp-has-submenu.wp-not-current-submenu:focus:after,
+.folded #adminmenu li.opensub a.wp-has-submenu.wp-not-current-submenu:after {
         border-width: 4px;
         margin-top: -4px;
         top: 18px;
 }
 
-#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
+#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,
+#adminmenu li a.wp-has-submenu.wp-not-current-submenu:focus:after,
+#adminmenu li.opensub a.wp-has-submenu.wp-not-current-submenu:after {
         border-right-color: #333;
 }
 
@@ -691 +740 @@
                 margin-bottom: 0;
         }
 
+    /* Small arrow */
+    .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after,
+    .auto-fold #adminmenu li a.wp-has-submenu.wp-not-current-submenu:focus:after,
+    .auto-fold #adminmenu li.opensub a.wp-has-submenu.wp-not-current-submenu:after {
+        border-width: 4px;
+        margin-top: -4px;
+        top: 18px;
+    }    
+
+    /* Hide arrow when current */
+    /* TODO */
+/*    .auto-fold ul#adminmenu li.wp-menu-open a.wp-has-current-submenu:after,
+    .auto-fold ul#adminmenu > li a.wp-has-current-submenu.current:after {
+        border-color: transparent !important;
+    }*/
+
         .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after {
                 display: none;
         }
@@ -794 +859 @@
                 margin-top: -8px;
         }
 
-        .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
+        .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after,
+    .auto-fold #adminmenu li a.wp-has-submenu.wp-not-current-submenu:focus:after,
+    .auto-fold #adminmenu li.opensub a.wp-has-submenu.wp-not-current-submenu:after {
                 display: none;
         }
 
@@ -901 +968 @@
                 -moz-box-sizing: border-box;
                 box-sizing: border-box;
         }
+    /* Hide the submenu indicating arrows */
+    .admin-color-fresh #adminmenu li a.wp-has-submenu.wp-not-current-submenu:focus:after,
+    .admin-color-fresh #adminmenu li.opensub a.wp-has-submenu.wp-not-current-submenu:after {
+        border-right-color: transparent;
+    }
 }
 
 /* Smartphone */

src/wp-admin/css/colors/_admin.scss

@@ -162 +162 @@
 #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
 .folded #adminmenu .wp-has-current-submenu .wp-submenu,
 #adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
-        background: $menu-submenu-background;
+    background: $menu-background;
+    border-left-color: $menu-submenu-background;
+    
+    @media screen and (max-width: 782px) {
+        background: $menu-submenu-background;
+    }
 }
 
-#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
+#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,
+#adminmenu li a.wp-has-submenu.wp-not-current-submenu:focus:after,
+#adminmenu li.opensub a.wp-has-submenu.wp-not-current-submenu:after {
         border-right-color: $menu-submenu-background;
 }
 

src/wp-admin/includes/ajax-actions.php

@@ -2582 +2582 @@
         }
 
         update_user_meta( get_current_user_id(), 'admin_color', $color_scheme );
-        wp_send_json_success();
+        wp_send_json_success( array(
+                'color_scheme' => $color_scheme
+        ) );
 }
 
 /**

src/wp-admin/js/user-profile.js

@@ -119 +119 @@
                                         action:       'save-user-color-scheme',
                                         color_scheme: $this.children( 'input[name="admin_color"]' ).val(),
                                         nonce:        $('#color-nonce').val()
+                                }).done( function( response ) {
+                                        if ( response.success && response.data.color_scheme ) {
+                                                $( 'body' ).removeClass( function (index, css) {
+                                                        return ( css.match (/(^|\s)admin-color-\S+/g) || [] ).join(' ');
+                                                }).addClass( 'admin-color-' + response.data.color_scheme );
+                                        }
                                 });
                         }
                 });