WordPress.org

Make WordPress Core

Changeset 29031


Ignore:
Timestamp:
07/08/2014 06:18:23 PM (7 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.