WordPress.org

Make WordPress Core

Ticket #27521: 27521.8.diff

File 27521.8.diff, 9.0 KB (added by jorbin, 7 years ago)
  • src/wp-admin/css/colors/_admin.scss

     
    439439
    440440body.more-filters-opened .more-filters,
    441441body.more-filters-opened .more-filters:before {
     442        color: $menu-text;
     443        background-color: $menu-background;
     444}
     445
     446body.more-filters-opened .more-filters:hover,
     447body.more-filters-opened .more-filters:focus,
     448body.more-filters-opened .more-filters:hover:before,
     449body.more-filters-opened .more-filters:focus:before {
     450        background-color: $menu-highlight-background;
    442451        color: $menu-highlight-text;
    443         background-color: $menu-highlight-background;
    444452}
    445453
     454
    446455/* jQuery UI Slider */
    447456
    448457.wp-slider .ui-slider-handle,
  • src/wp-admin/css/themes.css

     
    4040        top: -3px;
    4141}
    4242
     43.theme-navigation a{
     44        text-decoration:none;
     45}
     46
    4347/* Position admin messages */
    4448.themes-php div.updated,
    4549.themes-php div.error {
     
    112116        border-left: 1px solid rgba(0,0,0,0.05);
    113117}
    114118
    115 .theme-browser .theme:hover .theme-actions {
     119.theme-browser .theme:hover .theme-actions,
     120.theme-browser .theme.focus .theme-actions,
     121.theme-browser .theme:focus .theme-actions {
    116122        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    117123        opacity: 1;
    118124}
     
    157163        transition: opacity 0.2s ease-in-out;
    158164}
    159165
    160 .theme-browser .theme:hover .theme-screenshot {
     166.theme-browser .theme:hover .theme-screenshot,
     167.theme-browser .theme:focus .theme-screenshot {
    161168        background: #fff;
    162169}
    163170
    164 .theme-browser.rendered .theme:hover .theme-screenshot img {
     171.theme-browser.rendered .theme:hover .theme-screenshot img,
     172.theme-browser.rendered .theme:focus .theme-screenshot img {
    165173        opacity: 0.4;
    166174}
    167175
     
    189197.theme-browser .theme:focus {
    190198        outline: 1px dotted #222;
    191199}
    192 /* Hide shortcut actions and hover feedback when using tab navigation */
    193 .theme-browser .theme:focus .theme-actions {
    194         display: none;
    195 }
    196 /* Restore display of theme controls if you hover a focused theme */
    197 .theme-browser .theme:focus:hover .theme-actions {
    198         display: block;
    199 }
     200
    200201.theme-browser .theme:focus .more-details {
    201202        opacity: 1;
    202203}
     
    205206        display: block;
    206207}
    207208
    208 .theme-browser.rendered .theme:hover .more-details {
     209.theme-browser.rendered .theme:hover .more-details,
     210.theme-browser.rendered .theme:focus .more-details {
    209211        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    210212        opacity: 1;
    211213}
     
    359361        text-indent: 4px;
    360362}
    361363
    362 .theme-browser .theme.add-new-theme:hover .theme-screenshot {
     364.theme-browser .theme.add-new-theme:hover .theme-screenshot,
     365.theme-browser .theme.add-new-theme:focus .theme-screenshot {
    363366        background: none;
    364367}
    365368
    366 .theme-browser .theme.add-new-theme:hover span:after {
     369.theme-browser .theme.add-new-theme:hover span:after,
     370.theme-browser .theme.add-new-theme:focus span:after {
    367371        background: #fff;
    368372        color: #0074a2;
    369373}
    370374
    371 .theme-browser .theme.add-new-theme:hover:after {
     375.theme-browser .theme.add-new-theme:hover:after,
     376.theme-browser .theme.add-new-theme:focus:after {
    372377        border-color: transparent;
    373378        color: #fff;
    374379        background: #0074a2;
     
    387392        margin-bottom: 10%;
    388393}
    389394
    390 .theme-browser .theme.add-new-theme:hover .theme-name {
     395.theme-browser .theme.add-new-theme:hover .theme-name,
     396.theme-browser .theme.add-new-theme:focus .theme-name {
    391397        color: #fff;
    392398        z-index: 2;
    393399}
     
    954960        }
    955961
    956962        .theme:not(.active):hover .theme-actions,
    957         .theme:hover .more-details {
     963        .theme:not(.active):focus .theme-actions,
     964        .theme:hover .more-details,
     965        .theme:focus .more-details {
    958966                display: none;
    959967        }
    960968
    961         .theme-browser.rendered .theme:hover .theme-screenshot img {
     969        .theme-browser.rendered .theme:hover .theme-screenshot img,
     970        .theme-browser.rendered .theme:focus .theme-screenshot img {
    962971                opacity: 1.0;
    963972        }
    964973}
     
    11631172}
    11641173body.more-filters-opened .more-filters,
    11651174body.more-filters-opened .more-filters:before {
    1166         background: rgb(46, 162, 204);
     1175        background: #777;
    11671176        -webkit-border-radius: 2px;
    11681177        border-radius: 2px;
    11691178        border: none;
    11701179        color: #fff;
     1180        -webkit-transition: color .1s ease-in, background .1s ease-in;
     1181        transition: color .1s ease-in, background .1s ease-in;
    11711182}
     1183
     1184body.more-filters-opened .more-filters:hover,
     1185body.more-filters-opened .more-filters:focus,
     1186body.more-filters-opened .more-filters:hover:before,
     1187body.more-filters-opened .more-filters:focus:before {
     1188        background: rgb(46, 162, 204);
     1189}
     1190
    11721191.theme-install-php .theme-search {
    11731192        position: absolute;
    11741193        right: 10px;
  • src/wp-admin/js/theme.js

     
    235235                'click .preview': 'preview',
    236236                'keydown': themes.isInstall ? 'preview': 'expand',
    237237                'touchend': themes.isInstall ? 'preview': 'expand',
     238                'keyup': 'addFocus',
    238239                'touchmove': 'preventExpand'
    239240        },
    240241
     
    264265                }
    265266        },
    266267
     268        // Add class of focus to the theme we are focused on.
     269        addFocus: function() {
     270                var $themeToFocus = ( $( ':focus' ).hasClass( 'theme' ) ) ? $( ':focus' ) : $(':focus').parents('.theme');
     271
     272                $('.theme.focus').removeClass('focus');
     273                $themeToFocus.addClass('focus');
     274        },
     275
    267276        // Single theme overlay screen
    268277        // It's shown when clicking a theme
    269278        expand: function( event ) {
    270279                var self = this;
    271280
     281
    272282                event = event || window.event;
    273283
    274284                // 'enter' and 'space' keys expand the details view when a theme is :focused
     
    303313                        return this.touchDrag = false;
    304314                }
    305315
     316                // 'enter' and 'space' keys expand the details view when a theme is :focused
     317                if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) {
     318                        return;
     319                }
     320
     321                // pressing enter while focused on the buttons shouldn't open the preview
     322                if ( event.type === 'keydown' && event.which !== 13 && $( ':focus' ).hasClass( 'button' ) ) {
     323                        return;
     324                }
     325
    306326                event.preventDefault();
    307327
    308328                event = event || window.event;
     
    799819        search: function( event ) {
    800820                var options = {};
    801821
     822
    802823                // Clear on escape.
    803824                if ( event.type === 'keyup' && event.which === 27 ) {
    804825                        event.target.value = '';
     
    932953
    933954        // Handles Ajax request for searching through themes in public repo
    934955        search: function( event ) {
     956
     957                // Tabbing into the search input shouldn't trigger a search
     958                if ( event.type === 'keyup' && event.which === 9 ) {
     959                        return;
     960                }
     961
    935962                this.collection = this.options.parent.view.collection;
    936963
    937964                // Clear on escape.
     
    10851112                var $el = $( event.target ),
    10861113                        sort = $el.data( 'sort' );
    10871114
     1115                // links that trigger sort have a # as the href, we don't want to add that to the url
     1116                event.preventDefault();
     1117
    10881118                // Bail if this is already active
    10891119                if ( $el.hasClass( this.activeClass ) ) {
    10901120                        return;
  • src/wp-admin/theme-install.php

     
    104104<div class="wrap">
    105105        <h2>
    106106                <?php echo esc_html( $title ); ?>
    107                 <a class="upload add-new-h2"><?php _e( 'Upload Theme' ); ?></a>
    108                 <a class="browse-themes add-new-h2"><?php _ex( 'Browse', 'themes' ); ?></a>
     107                <a href="#" class="upload add-new-h2"><?php _e( 'Upload Theme' ); ?></a>
     108                <a href="#" class="browse-themes add-new-h2"><?php _ex( 'Browse', 'themes' ); ?></a>
    109109        </h2>
    110110
    111111        <div class="upload-theme">
     
    114114
    115115        <div class="theme-navigation">
    116116                <span class="theme-count"></span>
    117                 <span class="theme-section current" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></span>
    118                 <span class="theme-section" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></span>
    119                 <span class="theme-section" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></span>
     117                <a class="theme-section current" href="#" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></a>
     118                <a class="theme-section" href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a>
     119                <a class="theme-section" href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a>
    120120                <div class="theme-top-filters">
    121121                        <!--<span class="theme-filter" data-filter="photoblogging">Photography</span>
    122122                        <span class="theme-filter" data-filter="responsive-layout">Responsive</span>-->
    123                         <span class="more-filters"><?php _e( 'Feature Filter' ); ?></span>
     123                        <a class="more-filters" href="#"><?php _e( 'Feature Filter' ); ?></a>
    124124                </div>
    125125                <div class="more-filters-container">
    126126                <?php