WordPress.org
Get WordPress

Make WordPress Core

Changeset 29031


Ignore:
Timestamp:
07/08/2014 06:18:23 PM (12 years ago)
Author:
helen
Message:

More consistent icons in place of some buttons for the Customizer and theme install preview.

  • Use a single close icon instead of a context-changing cancel/close button in the Customizer. In user testing, this small distinction in language was overlooked, and we use an AYS now instead. This also makes it consistent with the back arrow in Customizer panels.
  • Use the same close icon as well as the previous/next arrows from the theme details browser in the theme install preview.

props celloexpressions. fixes #28655.

Location:
trunk/src/wp-admin
Files:
6 edited

Legend:

Unmodified
Added
Removed

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

    r28861 r29031  
    454454}
    455455
     456.theme-install-overlay .close-full-overlay:hover,
     457.theme-install-overlay .close-full-overlay:focus,
     458.theme-install-overlay .previous-theme:hover,
     459.theme-install-overlay .previous-theme:focus,
     460.theme-install-overlay .next-theme:hover,
     461.theme-install-overlay .next-theme:focus {
     462        background-color: $menu-highlight-background;
     463        color: $menu-highlight-text;
     464}
     465
    456466/* Widgets */
    457467
    … …  
    473483}
    474484
     485.customize-controls-close:focus,
     486.customize-controls-close:hover,
    475487.control-panel-back:focus,
    476488.control-panel-back:hover {

  • trunk/src/wp-admin/css/customize-controls.css

    r28931 r29031  
    169169.current-panel .accordion-sub-container.control-panel-content {
    170170        width: 100%;
     171}
     172
     173.customize-controls-close {
     174        display: block;
     175        position: absolute;
     176        top: 0;
     177        left: 0;
     178        width: 45px;
     179        height: 45px;
     180        padding-right: 2px;
     181        background: #eee;
     182        border-right: 1px solid #ddd;
     183        color: #444;
     184        cursor: pointer;
     185        -webkit-transition: color ease-in .1s;
     186        transition: color ease-in .1s;
    171187}
    172188
    … …  
    191207}
    192208
     209.customize-controls-close:focus,
     210.customize-controls-close:hover,
    193211.control-panel-back:focus,
    194212.control-panel-back:hover {
    … …  
    196214        color: #fff;
    197215        outline: none;
     216        -webkit-box-shadow: none;
     217        box-shadow: none;
     218}
     219
     220.customize-controls-close:before {
     221        font: normal 32px/1 dashicons;
     222        content: "\f335";
     223        position: relative;
     224        top: 8px;
     225        left: 8px;
    198226}
    199227
    … …  
    216244.current-panel > .accordion-section-title {
    217245        height: 22px;
    218 }
    219 
    220 #customize-header-actions a.back {
    221         position: relative;
    222         left: 0;
    223         -webkit-transition: left ease-in-out .18s;
    224         transition: left ease-in-out .18s;
    225 }
    226 
    227 .in-sub-panel #customize-header-actions a.back {
    228         left: -120px;
    229246}
    230247

  • trunk/src/wp-admin/css/themes.css

    r28123 r29031  
    16181618}
    16191619
    1620 /* Close Link */
    1621 .wp-full-overlay .close-full-overlay {
     1620/* Close & Navigation Links */
     1621.theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header {
     1622        padding: 0;
     1623}
     1624
     1625.theme-install-overlay .close-full-overlay,
     1626.theme-install-overlay .previous-theme,
     1627.theme-install-overlay .next-theme {
     1628        display: block;
     1629        position: relative;
     1630        float: left;
     1631        width: 45px;
     1632        height: 45px;
     1633        padding-right: 2px;
     1634        background: #eee;
     1635        border-right: 1px solid #ddd;
     1636        color: #444;
     1637        cursor: pointer;
    16221638        text-decoration: none;
     1639        -webkit-transition: color ease-in .1s;
     1640        transition: color ease-in .1s;
     1641}
     1642
     1643.theme-install-overlay .close-full-overlay:hover,
     1644.theme-install-overlay .close-full-overlay:focus,
     1645.theme-install-overlay .previous-theme:hover,
     1646.theme-install-overlay .previous-theme:focus,
     1647.theme-install-overlay .next-theme:hover,
     1648.theme-install-overlay .next-theme:focus {
     1649        background-color: #0074a2;
     1650        color: #fff;
     1651        outline: none;
     1652        -webkit-box-shadow: none;
     1653        box-shadow: none;
     1654}
     1655
     1656.theme-install-overlay .close-full-overlay:before {
     1657        font: normal 30px/1 dashicons;
     1658        content: "\f335";
     1659        position: relative;
     1660        top: 9px;
     1661        left: 9px;
     1662}
     1663
     1664.theme-install-overlay .previous-theme:before {
     1665        font: normal 20px/1 dashicons;
     1666        content: "\f340";
     1667        position: relative;
     1668        top: 6px;
     1669        left: 14px;
     1670}
     1671
     1672.theme-install-overlay .next-theme:before {
     1673        font: normal 20px/1 dashicons;
     1674        content: "\f344";
     1675        position: relative;
     1676        top: 6px;
     1677        left: 13px;
     1678}
     1679
     1680.theme-install-overlay .previous-theme.disabled,
     1681.theme-install-overlay .next-theme.disabled,
     1682.theme-install-overlay .previous-theme.disabled:hover,
     1683.theme-install-overlay .previous-theme.disabled:focus,
     1684.theme-install-overlay .next-theme.disabled:hover,
     1685.theme-install-overlay .next-theme.disabled:focus {
     1686        color: #bbb;
     1687        background: #eee;
     1688        cursor: default;
     1689}
     1690
     1691.rtl .theme-install-overlay .previous-theme:before {
     1692        content: "\f344";
     1693}
     1694
     1695.rtl .theme-install-overlay .next-theme:before {
     1696        content: "\f340";
    16231697}
    16241698
    … …  
    17021776
    17031777.wp-full-overlay.collapsed .collapse-sidebar-label {
    1704         display: none;
    1705 }
    1706 
    1707 .wp-full-overlay .theme-navigation {
    1708         padding: 10px 20px;
    1709         position: absolute;
    1710                 bottom: 10px;
    1711         text-align: left;
    1712 }
    1713 .wp-full-overlay .theme-navigation .next-theme {
    1714         float: right;
    1715 }
    1716 .wp-full-overlay.no-navigation .theme-navigation {
    17171778        display: none;
    17181779}
    … …  
    18461907}
    18471908
    1848 .theme-install-overlay .wp-full-overlay-header {
    1849         margin-top: 9px;
    1850 }
    1851 
    18521909.theme-install-overlay .wp-full-overlay-header .theme-install {
    18531910        float: right;
     1911        margin: 8px 10px 0 0;
    18541912        /* For when .theme-install is a span rather than a.button-primary (already installed theme) */
    18551913        line-height: 26px;
    … …  
    18571915
    18581916.theme-install-overlay .wp-full-overlay-sidebar {
    1859         background: #EEE;
    1860         border-right: 1px solid #DDD;
     1917        background: #eee;
     1918        border-right: 1px solid #ddd;
     1919}
     1920
     1921.theme-install-overlay .wp-full-overlay-sidebar-content {
     1922        background: #fff;
     1923        border-top: 1px solid #ddd;
     1924        border-bottom: 1px solid #ddd;
    18611925}
    18621926

  • trunk/src/wp-admin/customize.php

    r29026 r29031  
    113113                        ?>
    114114                        <span class="spinner"></span>
    115                         <a class="back button" href="<?php echo esc_url( $return ? $return : admin_url( 'themes.php' ) ); ?>">
    116                                 <?php _e( 'Cancel' ); ?>
     115                        <a class="customize-controls-close" href="<?php echo esc_url( $return ? $return : admin_url( 'themes.php' ) ); ?>">
     116                                <span class="screen-reader-text"><?php _e( 'Cancel' ); ?></span>
    117117                        </a>
    118118                </div>

  • trunk/src/wp-admin/js/customize-controls.js

    r29025 r29031  
    917917                        body = $( document.body ),
    918918                        overlay = body.children( '.wp-full-overlay' ),
    919                         backBtn = $( '.back' ),
     919                        closeBtn = $( '.customize-controls-close' ),
    920920                        saveBtn = $( '#save' );
    921921
    … …  
    10451045                                if ( ! activated() ) {
    10461046                                        saveBtn.val( api.l10n.activate ).prop( 'disabled', false );
    1047                                         backBtn.text( api.l10n.cancel );
     1047                                        closeBtn.find( '.screen-reader-text' ).text( api.l10n.cancel );
    10481048
    10491049                                } else if ( saved() ) {
    10501050                                        saveBtn.val( api.l10n.saved ).prop( 'disabled', true );
    1051                                         backBtn.text( api.l10n.close );
     1051                                        closeBtn.find( '.screen-reader-text' ).text( api.l10n.close );
    10521052
    10531053                                } else {
    10541054                                        saveBtn.val( api.l10n.save ).prop( 'disabled', false );
    1055                                         backBtn.text( api.l10n.cancel );
     1055                                        closeBtn.find( '.screen-reader-text' ).text( api.l10n.cancel );
    10561056                                }
    10571057                        });
    … …  
    10921092                });
    10931093
    1094                 backBtn.keydown( function( event ) {
     1094                closeBtn.keydown( function( event ) {
    10951095                        if ( 9 === event.which ) // tab
    10961096                                return;
    … …  
    11221122                // Send any clicks to the 'Return' link to the parent page.
    11231123                parent.bind( 'back', function() {
    1124                         backBtn.on( 'click.back', function( event ) {
     1124                        closeBtn.on( 'click.customize-controls-close', function( event ) {
    11251125                                event.preventDefault();
    11261126                                parent.send( 'close' );
    … …  
    12071207
    12081208                // Make sure left column gets focus
    1209                 topFocus = backBtn;
     1209                topFocus = closeBtn;
    12101210                topFocus.focus();
    12111211                setTimeout(function () {

  • trunk/src/wp-admin/theme-install.php

    r29002 r29031  
    226226        <div class="wp-full-overlay-sidebar">
    227227                <div class="wp-full-overlay-header">
    228                         <a href="#" class="close-full-overlay button-secondary"><?php _e( 'Close' ); ?></a>
     228                        <a href="#" class="close-full-overlay"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></a>
     229                        <a href="#" class="previous-theme"><span class="screen-reader-text"><?php _ex( 'Previous', 'Button label for a theme' ); ?></span></a>
     230                        <a href="#" class="next-theme"><span class="screen-reader-text"><?php _ex( 'Next', 'Button label for a theme' ); ?></span></a>
    229231                <# if ( data.installed ) { #>
    230232                        <a href="#" class="button button-primary theme-install disabled"><?php _ex( 'Installed', 'theme' ); ?></a>
    … …  
    263265                                <span class="collapse-sidebar-arrow"></span>
    264266                        </a>
    265                         <div class="theme-navigation">
    266                                 <a class="previous-theme button" href="#"><?php _ex( 'Previous', 'Button label for a theme' ); ?></a>
    267                                 <a class="next-theme button" href="#"><?php _ex( 'Next', 'Button label for a theme' ); ?></a>
    268                         </div>
    269267                </div>
    270268        </div>
Note: See TracChangeset for help on using the changeset viewer.