WordPress.org

Make WordPress Core

Ticket #28599: 28599-focusbar-border.patch

File 28599-focusbar-border.patch, 8.1 KB (added by florianziegler, 6 years ago)

Add an additional border on the left side to get some separation between the admin menu and the focus bar

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

    diff --git src/wp-admin/css/admin-menu.css src/wp-admin/css/admin-menu.css
    index b8bf6b2..2793aa3 100644
     
    181181        color: #45bbe6;
    182182}
    183183
     184/* On hover & focus display the blue "focus bar" on the left, darker background */
     185#adminmenu a:hover,
     186#adminmenu li.menu-top > a:focus,
     187#adminmenu .wp-has-current-submenu .wp-submenu a:hover,
     188#adminmenu .wp-has-current-submenu .wp-submenu a:focus,
     189#adminmenu .wp-submenu a:hover,
     190#adminmenu .wp-submenu a:focus {
     191    box-shadow: inset 4px 0 0 0 currentColor;
     192    transition: box-shadow .2s linear;
     193}
     194/* Top menu item color stays blue, when submenu is open */
     195.admin-color-fresh #adminmenu li.opensub > a {
     196    color: currentColor;
     197}
     198/* Focus bar in white, when menu item is current */
     199#adminmenu li.current a:hover,
     200#adminmenu li.current a:focus,
     201#adminmenu .wp-submenu li.current a:hover,
     202#adminmenu .wp-submenu li.current a:focus,
     203#adminmenu li.wp-has-current-submenu > a.menu-top:hover,
     204#adminmenu li.wp-has-current-submenu > a.menu-top:focus,
     205#adminmenu li.wp-has-current-submenu > a:hover,
     206#adminmenu li.wp-has-current-submenu > a:focus {
     207    box-shadow: inset 4px 0 0 0 currentColor;
     208}
     209
    184210#adminmenu li.menu-top {
    185211        border: none;
    186212        min-height: 34px;
     
    201227.folded #adminmenu .wp-has-current-submenu .wp-submenu {
    202228        padding: 7px 0 8px;
    203229        z-index: 9999;
    204         background-color: #333;
     230        background-color: #444;
    205231        -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
    206232        box-shadow: 0 3px 5px rgba(0,0,0,0.2);
     233    /* TODO */
     234    border-left: 5px solid #333;
     235}
     236@media screen and (max-width: 782px) {
     237    #adminmenu .wp-submenu {
     238        border-left: none;
     239    }
    207240}
    208241
    209242.js #adminmenu .sub-open,
     
    235268#adminmenu li.menu-top:hover,
    236269#adminmenu li.opensub > a.menu-top,
    237270#adminmenu li > a.menu-top:focus {
     271    color: #45bbe6; /* .menu-top color should be blue like the icon, when submenu is open */
    238272        position: relative;
    239273        background-color: #111;
    240274}
    div.wp-menu-image:before { 
    375409        color: #fff;
    376410}
    377411
    378 #adminmenu li:hover div.wp-menu-image:before {
     412#adminmenu li:hover div.wp-menu-image:before,
     413/* Makes menu image blue on focus */
     414.admin-color-fresh #adminmenu li a:focus div.wp-menu-image:before,
     415/* Keep menu image blue when submenu is open */
     416.admin-color-fresh #adminmenu li.opensub div.wp-menu-image:before {
    379417        color: #45bbe6;
    380418}
     419.admin-color-fresh #adminmenu li.current:hover div.wp-menu-image:before,
     420.admin-color-fresh #adminmenu li.current a:focus div.wp-menu-image:before,
     421/* Keeps icon white when it has the current submenu */
     422.admin-color-fresh #adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,
     423.admin-color-fresh #adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before {
     424        color: #fff;
     425}
    381426
    382427.folded #adminmenu div.wp-menu-image {
    383428        width: 35px;
    ul#adminmenu > li.current > a.current:after { 
    433478        margin-top: -8px;
    434479}
    435480
    436 .folded ul#adminmenu li:hover a.wp-has-current-submenu:after {
    437         display: none;
    438 }
    439 
    440481.folded ul#adminmenu a.wp-has-current-submenu:after,
    441482.folded ul#adminmenu > li a.current:after {
    442483        border-width: 4px;
    ul#adminmenu > li.current > a.current:after { 
    444485}
    445486
    446487/* flyout menu arrow */
    447 #adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
     488#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after,
     489/* Add submenu indicating arrows on focus */
     490#adminmenu li a.wp-has-submenu.wp-not-current-submenu:focus:after,
     491#adminmenu li.opensub a.wp-has-submenu.wp-not-current-submenu:after {
    448492        right: 0;
    449493        border: solid transparent;
    450494        content: " ";
    ul#adminmenu > li.current > a.current:after { 
    457501        z-index: 10000;
    458502}
    459503
    460 .folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
     504/* Smaller arrow when folded */
     505.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after,
     506.folded #adminmenu li a.wp-has-submenu.wp-not-current-submenu:focus:after,
     507.folded #adminmenu li.opensub a.wp-has-submenu.wp-not-current-submenu:after {
    461508        border-width: 4px;
    462509        margin-top: -4px;
    463510        top: 18px;
    464511}
    465512
    466 #adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
     513#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,
     514#adminmenu li a.wp-has-submenu.wp-not-current-submenu:focus:after,
     515#adminmenu li.opensub a.wp-has-submenu.wp-not-current-submenu:after {
    467516        border-right-color: #333;
    468517}
    469518
    li#wp-admin-bar-menu-toggle { 
    691740                margin-bottom: 0;
    692741        }
    693742
     743    /* Small arrow */
     744    .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after,
     745    .auto-fold #adminmenu li a.wp-has-submenu.wp-not-current-submenu:focus:after,
     746    .auto-fold #adminmenu li.opensub a.wp-has-submenu.wp-not-current-submenu:after {
     747        border-width: 4px;
     748        margin-top: -4px;
     749        top: 18px;
     750    }   
     751
     752    /* Hide arrow when current */
     753    /* TODO */
     754/*    .auto-fold ul#adminmenu li.wp-menu-open a.wp-has-current-submenu:after,
     755    .auto-fold ul#adminmenu > li a.wp-has-current-submenu.current:after {
     756        border-color: transparent !important;
     757    }*/
     758
    694759        .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after {
    695760                display: none;
    696761        }
    li#wp-admin-bar-menu-toggle { 
    794859                margin-top: -8px;
    795860        }
    796861
    797         .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
     862        .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after,
     863    .auto-fold #adminmenu li a.wp-has-submenu.wp-not-current-submenu:focus:after,
     864    .auto-fold #adminmenu li.opensub a.wp-has-submenu.wp-not-current-submenu:after {
    798865                display: none;
    799866        }
    800867
    li#wp-admin-bar-menu-toggle { 
    901968                -moz-box-sizing: border-box;
    902969                box-sizing: border-box;
    903970        }
     971    /* Hide the submenu indicating arrows */
     972    .admin-color-fresh #adminmenu li a.wp-has-submenu.wp-not-current-submenu:focus:after,
     973    .admin-color-fresh #adminmenu li.opensub a.wp-has-submenu.wp-not-current-submenu:after {
     974        border-right-color: transparent;
     975    }
    904976}
    905977
    906978/* Smartphone */
  • src/wp-admin/css/colors/_admin.scss

    diff --git src/wp-admin/css/colors/_admin.scss src/wp-admin/css/colors/_admin.scss
    index d83ff23..13b2ef4 100644
    strong .post-com-count span { 
    162162#adminmenu .wp-has-current-submenu.opensub .wp-submenu,
    163163.folded #adminmenu .wp-has-current-submenu .wp-submenu,
    164164#adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
    165         background: $menu-submenu-background;
     165    background: $menu-background;
     166    border-left-color: $menu-submenu-background;
     167   
     168    @media screen and (max-width: 782px) {
     169        background: $menu-submenu-background;
     170    }
    166171}
    167172
    168 #adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
     173#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,
     174#adminmenu li a.wp-has-submenu.wp-not-current-submenu:focus:after,
     175#adminmenu li.opensub a.wp-has-submenu.wp-not-current-submenu:after {
    169176        border-right-color: $menu-submenu-background;
    170177}
    171178
  • src/wp-admin/includes/ajax-actions.php

    diff --git src/wp-admin/includes/ajax-actions.php src/wp-admin/includes/ajax-actions.php
    index 303f3b2..97ebb78 100644
    function wp_ajax_save_user_color_scheme() { 
    25822582        }
    25832583
    25842584        update_user_meta( get_current_user_id(), 'admin_color', $color_scheme );
    2585         wp_send_json_success();
     2585        wp_send_json_success( array(
     2586                'color_scheme' => $color_scheme
     2587        ) );
    25862588}
    25872589
    25882590/**
  • src/wp-admin/js/user-profile.js

    diff --git src/wp-admin/js/user-profile.js src/wp-admin/js/user-profile.js
    index 2dd6e2a..4cf596c 100644
     
    119119                                        action:       'save-user-color-scheme',
    120120                                        color_scheme: $this.children( 'input[name="admin_color"]' ).val(),
    121121                                        nonce:        $('#color-nonce').val()
     122                                }).done( function( response ) {
     123                                        if ( response.success && response.data.color_scheme ) {
     124                                                $( 'body' ).removeClass( function (index, css) {
     125                                                        return ( css.match (/(^|\s)admin-color-\S+/g) || [] ).join(' ');
     126                                                }).addClass( 'admin-color-' + response.data.color_scheme );
     127                                        }
    122128                                });
    123129                        }
    124130                });