Make WordPress Core

Ticket #28599: focus admin menu arestad alt.patch

File focus admin menu arestad alt.patch, 7.0 KB (added by afercia, 10 years ago)

partially explores Michael Arestad idea, no padding/shifting and color changes for now, just to have an idea

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

     
    4747        display: inline-block;
    4848        -webkit-font-smoothing: antialiased;
    4949        -moz-osx-font-smoothing: grayscale;
    50         -webkit-transition: all .1s ease-in-out;
    51         transition: all .1s ease-in-out;
    5250}
    5351
    5452.icon16.icon-dashboard:before {
     
    162160        display: block;
    163161        line-height: 18px;
    164162        padding: 2px 5px;
    165         color: #eee;
     163        color: #ddd;
    166164}
    167165
     166#adminmenu a,
     167#adminmenu .dashicons, .dashicons-before:before {
     168        -webkit-transition-property: none;
     169        transition-property: none;
     170}
     171
    168172#adminmenu .wp-submenu a {
    169173        color: #bbb;
    170174}
     
    175179}
    176180
    177181#adminmenu a:hover,
    178 #adminmenu li.menu-top > a:focus,
     182#adminmenu a:focus,
    179183#adminmenu .wp-submenu a:hover,
    180 #adminmenu .wp-submenu a:focus {
    181         color: #2ea2cc;
     184#adminmenu .wp-submenu a:focus,
     185#collapse-menu:hover,
     186#collapse-menu:hover #collapse-button div:after {
     187        color: #fff;
     188        background-color: #111;
    182189}
    183190
     191#adminmenu a:focus {
     192        color: #fff !important;
     193        -webkit-box-shadow: inset 6px 0 0 -2px;
     194        box-shadow: inset 6px 0 0 -2px;
     195}
     196
     197/* no outline while being clicked */
     198#adminmenu a:focus:active {
     199        -webkit-box-shadow: none;
     200        box-shadow: none;
     201}
     202
    184203#adminmenu li.menu-top {
    185204        border: none;
    186205        min-height: 34px;
     
    245264        z-index: 10000;
    246265}
    247266
     267/* current */
    248268#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
    249269#adminmenu li.current a.menu-top,
    250270.folded #adminmenu li.wp-has-current-submenu,
     
    256276        color: #fff;
    257277}
    258278
     279/* current counters */
     280#adminmenu li.current a .awaiting-mod,
     281#adminmenu      li a.wp-has-current-submenu .update-plugins {
     282        background-color: #2ea2cc;
     283        color: #fff;
     284}
     285
     286
    259287.folded #adminmenu .wp-submenu.sub-open,
    260288.folded #adminmenu .opensub .wp-submenu,
    261289.folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
     
    299327.folded #adminmenu .wp-has-current-submenu li > a {
    300328        padding-right: 16px;
    301329        padding-left: 14px;
    302         -webkit-transition: all .1s ease-in-out;
    303         transition: all .1s ease-in-out;
    304330}
    305331
    306332#adminmenu .wp-has-current-submenu ul > li > a,
     
    357383}
    358384
    359385div.wp-menu-image:before {
    360         color: #999;
     386        color: #aaa;
    361387        padding: 7px 0;
    362         -webkit-transition: all .1s ease-in-out;
    363         transition: all .1s ease-in-out;
    364388}
    365389
    366 #adminmenu div.wp-menu-image:before {
    367         color: #999;
     390#adminmenu li:hover .wp-menu-image:before,
     391#adminmenu .wp-has-current-submenu .wp-menu-image:before,
     392#adminmenu a:focus .wp-menu-image:before,
     393#adminmenu .opensub .wp-menu-image:before {
     394        color: #eee;
    368395}
    369396
    370 #adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before,
    371 #adminmenu .wp-has-current-submenu div.wp-menu-image:before,
    372 #adminmenu .current div.wp-menu-image:before,
    373 #adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before,
    374 #adminmenu a.current:hover div.wp-menu-image:before {
    375         color: #fff;
    376 }
    377 
    378 #adminmenu li:hover div.wp-menu-image:before {
    379         color: #2ea2cc;
    380 }
    381 
    382397.folded #adminmenu div.wp-menu-image {
    383398        width: 35px;
    384399        height: 30px;
     
    444459}
    445460
    446461/* flyout menu arrow */
    447 #adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
     462#adminmenu li.wp-has-submenu.wp-not-current-submenu:after {
    448463        right: 0;
    449464        border: solid transparent;
    450465        content: " ";
     
    457472        z-index: 10000;
    458473}
    459474
    460 .folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
     475.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:after {
    461476        border-width: 4px;
    462477        margin-top: -4px;
    463478        top: 18px;
    464479}
    465480
    466 #adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
     481#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:after {
    467482        border-right-color: #333;
    468483}
    469484
     
    515530        z-index: 26;
    516531}
    517532
     533#adminmenu .wp-submenu .awaiting-mod,
     534#adminmenu .wp-submenu .update-plugins {
     535        margin: 0 0 -2px 2px;
     536}
     537
    518538#adminmenu li .awaiting-mod span,
    519539#adminmenu li span.update-plugins span,
    520540#sidemenu li a span.update-plugins span {
     
    522542        padding: 0 6px;
    523543}
    524544
    525 #adminmenu li.current a .awaiting-mod,
    526 #adminmenu      li a.wp-has-current-submenu .update-plugins {
    527         background-color: #2ea2cc;
    528         color: #fff;
    529 }
    530 
    531545#adminmenu li span.count-0,
    532546#sidemenu li a .count-0 {
    533547        display: none;
     
    538552        line-height: 34px;
    539553        margin-top: 10px;
    540554        color: #aaa;
    541         -webkit-transition: all .1s ease-in-out;
    542         transition: all .1s ease-in-out;
    543555}
    544556
    545 #collapse-menu:hover,
    546 #collapse-menu:hover #collapse-button div:after {
    547         color: #2ea2cc;
    548 }
    549 
    550557.folded #collapse-menu span {
    551558        display: none;
    552559}
     
    584591        position: relative;
    585592        text-align: center;
    586593        width: 20px;
    587         -webkit-transition: all .1s ease-in-out;
    588         transition: all .1s ease-in-out;
    589594        -webkit-font-smoothing: antialiased;
    590595        -moz-osx-font-smoothing: grayscale;
    591596}
     
    626631        }
    627632
    628633        .auto-fold #adminmenu .wp-submenu.sub-open,
    629         .auto-fold #adminmenu .opensub .wp-submenu,
     634        .auto-fold #adminmenu li.opensub .wp-submenu,
    630635        .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
    631         .auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
     636        .auto-fold #adminmenu li.wp-has-current-submenu.opensub .wp-submenu,
    632637        .auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
    633638        .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu  {
    634639                top: 0px;
     
    639644        .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
    640645                position: absolute;
    641646                top: -1000em;
    642                 margin-right: -1px;
    643647                padding: 7px 0 8px;
    644648                z-index: 9999;
    645649        }
     
    804808                position: relative;
    805809                display: block;
    806810                top: 0;
    807                 left: -1px;
     811                left: 0;
    808812                -webkit-box-shadow: none;
    809813                box-shadow: none;
    810814        }
     
    814818                display: none;
    815819        }
    816820
    817         .auto-fold #adminmenu .opensub .wp-submenu {
     821        .auto-fold #adminmenu li.opensub .wp-submenu {
    818822                display: none;
    819823        }
    820824
     
    829833        .auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
    830834        .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu {
    831835                position: relative;
    832                 left: -1px;
     836                left: 0;
    833837                right: 0;
    834838                top: 0;
    835839        }
     
    861865                border: 1px solid transparent;
    862866                background: none;
    863867                height: 44px;
    864                 margin-left: -1px;
    865868        }
    866869
    867870        .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
  • src/wp-admin/js/common.js

     
    342342                        interval: 90
    343343                });
    344344
    345                 $adminmenu.on( 'focus.adminmenu', '.wp-submenu a', function( event ) {
     345                $adminmenu.on( 'focus.adminmenu', '.wp-has-submenu, .wp-submenu a', function( event ) {
    346346                        if ( $adminmenu.data( 'wp-responsive' ) ) {
    347347                                // The menu is in responsive mode, bail
    348348                                return;
     
    349349                        }
    350350
    351351                        $( event.target ).closest( 'li.menu-top' ).addClass( 'opensub' );
    352                 }).on( 'blur.adminmenu', '.wp-submenu a', function( event ) {
     352                }).on( 'blur.adminmenu', '.wp-has-submenu, .wp-submenu a', function( event ) {
    353353                        if ( $adminmenu.data( 'wp-responsive' ) ) {
    354354                                return;
    355355                        }