WordPress.org

Make WordPress Core

Ticket #29958: 29958.patch

File 29958.patch, 7.0 KB (added by afercia, 6 years ago)

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

     
    534534}
    535535
    536536#collapse-menu {
    537         font-size: 13px;
    538         line-height: 34px;
    539         margin-top: 10px;
    540         color: #aaa;
    541537        -webkit-transition: all .1s ease-in-out;
    542538        transition: all .1s ease-in-out;
    543539}
    544540
    545 #collapse-menu:hover,
    546 #collapse-menu:hover #collapse-button div:after {
     541#collapse-button:hover,
     542#collapse-button:hover .collapse-button-icon:after,
     543#collapse-button:focus,
     544#collapse-button:focus .collapse-button-icon:after {
    547545        color: #2ea2cc;
    548546}
    549547
    550 .folded #collapse-menu span {
    551         display: none;
     548#collapse-button {
     549        display: block;
     550        width: 100%;
     551        height: 34px;
     552        margin: 0;
     553        border: none;
     554        padding: 0;
     555        position: relative;
     556        overflow: visible;
     557        line-height: 34px;
     558        background: none;
     559        color: #aaa;
     560        text-align: left;
     561        cursor: pointer;
     562        outline: 0;
    552563}
    553564
    554 #collapse-button,
    555 #collapse-button div {
    556         width: 15px;
    557         height: 15px;
     565#collapse-button .collapse-button-icon,
     566#collapse-button .collapse-button-label {
     567        /* absolutely positioned to avoid 1px shift in IE when button is pressed */
     568        display: block;
     569        position: absolute;
     570        top: 0;
     571        left: 0;
    558572}
    559573
    560 #collapse-button {
    561         float: left;
    562         height: 15px;
    563         margin: 10px 8px 10px 11px;
    564         width: 15px;
    565         -webkit-border-radius: 10px;
    566         border-radius: 10px;
     574#collapse-button .collapse-button-icon {
     575        width: 36px;
     576        height: 34px;
    567577}
    568578
    569 #wpwrap #collapse-button div {
    570         padding: 0;
     579#collapse-button .collapse-button-label {
     580        padding: 8px 0 8px 36px;
     581        line-height: 18px;
    571582}
    572583
    573 #collapse-button div:after {
     584.folded #collapse-button .collapse-button-label {
     585        display: none;
     586}
     587
     588#collapse-button .screen-reader-text {
     589        /* hidden also for screen readers, speakable when folded or auto-fold */
     590        display: none;
     591}
     592
     593.folded #collapse-button .screen-reader-text {
     594        display: inline;
     595}
     596
     597#collapse-button .collapse-button-icon:after {
    574598        content: '\f148';
    575599        display: block;
    576         line-height: 15px;
    577         left: -3px;
    578         top: -3px;
     600        position: relative;
     601        top: 7px;
     602        text-align: center;
    579603        color: #aaa;
    580604        font: normal 20px/1 'dashicons' !important;
    581605        speak: none;
    582         margin: 0 auto;
    583         padding: 0 !important;
    584         position: relative;
    585         text-align: center;
    586         width: 20px;
    587606        -webkit-transition: all .1s ease-in-out;
    588607        transition: all .1s ease-in-out;
    589608        -webkit-font-smoothing: antialiased;
    … …  
    590609        -moz-osx-font-smoothing: grayscale;
    591610}
    592611
    593 .folded #collapse-button div:after,
    594 .rtl #collapse-button div:after {
     612.folded #collapse-button .collapse-button-icon:after,
     613.rtl #collapse-button .collapse-button-icon:after {
    595614        -webkit-transform: rotate(180deg);
    596615        -ms-transform: rotate(180deg);
    597616        transform: rotate(180deg);
    598617}
    599618
    600 .rtl.folded #collapse-button div:after {
     619.rtl.folded #collapse-button .collapse-button-icon:after {
    601620        -webkit-transform: none;
    602621        -ms-transform: none;
    603622        transform: none;
    … …  
    708727                z-index: 10000;
    709728        }
    710729
    711         .auto-fold #collapse-menu span {
     730        .auto-fold #collapse-menu .collapse-button-label {
    712731                display: none;
    713732        }
    714733
    715         .auto-fold #collapse-button div {
    716                 background: none;
     734        .auto-fold #collapse-button .screen-reader-text {
     735                display: inline;
    717736        }
    718737
    719         .auto-fold #collapse-button div:after {
     738        .auto-fold #collapse-button .collapse-button-icon:after {
    720739                -webkit-transform: rotate(180deg);
    721740                -ms-transform: rotate(180deg);
    722741                transform: rotate(180deg);
    723742        }
    724743
    725         .rtl.auto-fold #collapse-button div:after {
     744        .rtl.auto-fold #collapse-button .collapse-button-icon:after {
    726745                -webkit-transform: none;
    727746                -ms-transform: none;
    728747                transform: none;

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

     
    235235
    236236/* Admin Menu: collapse button */
    237237
    238 #collapse-menu {
     238#collapse-button {
    239239    color: $menu-collapse-text;
    240240}
    241241
    242 #collapse-menu:hover {
    243     color: $menu-collapse-focus-text;
     242#collapse-button .collapse-button-icon:after {
     243    color: $menu-collapse-icon;
    244244}
    245245
    246 #collapse-button div:after {
    247     color: $menu-collapse-icon;
     246#collapse-button:hover,
     247#collapse-button:focus {
     248    color: $menu-submenu-focus-text;
    248249}
    249250
    250 #collapse-menu:hover #collapse-button div:after {
    251     color: $menu-collapse-focus-icon;
     251#collapse-button:hover .collapse-button-icon:after,
     252#collapse-button:focus .collapse-button-icon:after {
     253    color: $menu-submenu-focus-text;
    252254}
    253255
    254256

  • src/wp-admin/js/common.js

     
    184184                $(e.target).parent().siblings('a').get(0).click();
    185185        });
    186186
    187         $('#collapse-menu').on('click.collapse-menu', function() {
     187        $( '#collapse-menu' ).on( 'click.collapse-menu', '#collapse-button', function() {
    188188                var body = $( document.body ), respWidth, state;
    189189
    190190                // reset any compensation for submenus near the bottom of the screen
    191                 $('#adminmenu div.wp-submenu').css('margin-top', '');
     191                $( '#adminmenu div.wp-submenu' ).css( 'margin-top', '' );
    192192
    193193                if ( window.innerWidth ) {
    194194                        // window.innerWidth is affected by zooming on phones
    … …  
    199199                }
    200200
    201201                if ( respWidth && respWidth < 960 ) {
    202                         if ( body.hasClass('auto-fold') ) {
    203                                 body.removeClass('auto-fold').removeClass('folded');
    204                                 setUserSetting('unfold', 1);
    205                                 setUserSetting('mfold', 'o');
     202                        if ( body.hasClass( 'auto-fold' ) ) {
     203                                body.removeClass( 'auto-fold' ).removeClass( 'folded' );
     204                                setUserSetting( 'unfold', 1 );
     205                                setUserSetting( 'mfold', 'o' );
    206206                                state = 'open';
    207207                        } else {
    208                                 body.addClass('auto-fold');
    209                                 setUserSetting('unfold', 0);
     208                                body.addClass( 'auto-fold' );
     209                                setUserSetting( 'unfold', 0 );
    210210                                state = 'folded';
    211211                        }
    212212                } else {
    213                         if ( body.hasClass('folded') ) {
    214                                 body.removeClass('folded');
    215                                 setUserSetting('mfold', 'o');
     213                        if ( body.hasClass( 'folded' ) ) {
     214                                body.removeClass( 'folded' );
     215                                setUserSetting( 'mfold', 'o' );
    216216                                state = 'open';
    217217                        } else {
    218                                 body.addClass('folded');
    219                                 setUserSetting('mfold', 'f');
     218                                body.addClass( 'folded' );
     219                                setUserSetting( 'mfold', 'f' );
    220220                                state = 'folded';
    221221                        }
    222222                }

  • src/wp-admin/menu-header.php

     
    201201                echo "</li>";
    202202        }
    203203
    204         echo '<li id="collapse-menu" class="hide-if-no-js"><div id="collapse-button"><div></div></div>';
    205         echo '<span>' . esc_html__( 'Collapse menu' ) . '</span>';
    206         echo '</li>';
     204        echo '<li id="collapse-menu" class="hide-if-no-js"><button type="button" id="collapse-button">' .
     205                '<span class="collapse-button-icon"></span><span class="collapse-button-label">' . esc_html__( 'Collapse menu' ) . '</span>' .
     206                '<span class="screen-reader-text">' . esc_html__( 'Expand menu' ) . '</span>' .
     207                '</button></li>';
    207208}
    208209
    209210?>