WordPress.org

Make WordPress Core

Changeset 39136


Ignore:
Timestamp:
11/04/2016 01:47:56 AM (19 months ago)
Author:
westonruter
Message:

Customize: Use button with svg as click target instead of :before content, improving clickability of edit shortcuts in Firefox.

Props sirbrillig, celloexpressions, delawski.
See #38532.

Location:
trunk/src
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyfourteen/style.css

    r38985 r39136  
    10461046}
    10471047
    1048 .secondary-navigation .customize-partial-edit-shortcut:before,
    1049 .footer-sidebar .widget:first-child .customize-partial-edit-shortcut:before {
     1048.secondary-navigation .customize-partial-edit-shortcut button,
     1049.footer-sidebar .widget:first-child .customize-partial-edit-shortcut button {
    10501050    left: 0;
    10511051}
  • trunk/src/wp-content/themes/twentyseventeen/inc/color-patterns.php

    r38999 r39136  
    318318.colors-custom .site-content .wp-playlist-light .wp-playlist-item:hover,
    319319.colors-custom .site-content .wp-playlist-light .wp-playlist-item:focus,
    320 .colors-custom .customize-partial-edit-shortcut:before {
     320.colors-custom .customize-partial-edit-shortcut button {
    321321    background: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 46% ); /* base: #767676; */
    322322}
  • trunk/src/wp-content/themes/twentyseventeen/style.css

    r39135 r39136  
    29682968
    29692969/* Add some space around the visual edit shortcut buttons. */
    2970 .twentyseventeen-panel .customize-partial-edit-shortcut:before {
     2970.twentyseventeen-panel .customize-partial-edit-shortcut button {
    29712971    top: 30px;
    29722972    left: 30px;
     
    29842984
    29852985/* Prevent icon colors from clashing with color schemes. */
    2986 .colors-custom .customize-partial-edit-shortcut:before {
     2986.colors-custom .customize-partial-edit-shortcut button {
    29872987    text-shadow: 0 -1px 1px rgba(0,0,0,.2),
    29882988                 1px 0 1px rgba(0,0,0,.2),
  • trunk/src/wp-includes/css/customize-preview.css

    r39131 r39136  
    1313
    1414/* Make shortcut buttons essentially invisible */
    15 .widget button.customize-partial-edit-shortcut,
     15.widget .customize-partial-edit-shortcut,
    1616.customize-partial-edit-shortcut {
    17     position: relative;
     17    position: absolute;
    1818    float: left;
    1919    width: 1px; /* required to have a size to be focusable in Safari */
     
    2929}
    3030
    31 .customize-partial-edit-shortcut:active {
     31.widget .customize-partial-edit-shortcut button:active,
     32.customize-partial-edit-shortcut button:active {
    3233    padding: 0;
    3334    border: 0;
     
    3536
    3637/* Styles for the actual shortcut */
    37 .customize-partial-edit-shortcut:before {
     38.widget .customize-partial-edit-shortcut button,
     39.customize-partial-edit-shortcut button {
    3840    position: absolute;
    3941    left: -36px;
     
    4143    width: 30px;
    4244    height: 30px;
     45    min-width: 30px;
     46    min-height: 30px;
    4347    font-size: 18px;
    44     font-family: dashicons;
    45     content: '\f464';
    4648    z-index: 5;
    4749    background-color: #0085ba;
     50    background: #0085ba;
    4851    border-radius: 50%;
    4952    border: 2px solid #fff;
     
    6669}
    6770
    68 .customize-partial-edit-shortcut:hover:before,
    69 .customize-partial-edit-shortcut:focus:before {
     71.customize-partial-edit-shortcut button svg {
     72    fill: #fff;
     73    min-width: 20px;
     74    min-height: 20px;
     75    width: 20px;
     76    height: 20px;
     77    margin: auto;
     78}
     79
     80.customize-partial-edit-shortcut button:hover,
     81.customize-partial-edit-shortcut button:focus {
    7082    background: #008ec2; /* matches primary buttons */
    7183    border-color: #191e23; /* provides visual focus style with 4.5 contrast against background color */
    7284}
    7385
    74 body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut:before {
     86body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button {
    7587    animation-name: customize-partial-edit-shortcut-bounce-appear;
    7688    pointer-events: auto;
    7789}
    78 body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut:before {
     90body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button {
    7991    animation-name: customize-partial-edit-shortcut-bounce-disappear;
    8092    pointer-events: none;
    8193}
    8294
    83 .page-sidebar-collapsed .customize-partial-edit-shortcut:before,
    84 .customize-partial-edit-shortcut-hidden:before {
     95.page-sidebar-collapsed .customize-partial-edit-shortcut button,
     96.customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button {
    8597    visibility: hidden;
    8698}
    8799
    88 .customize-partial-edit-shortcut-left-margin:before {
     100.customize-partial-edit-shortcut-left-margin.customize-partial-edit-shortcut button {
    89101    left: 0;
    90102}
     
    145157
    146158@media screen and (max-width:800px) {
    147     .customize-partial-edit-shortcut:before {
     159    .customize-partial-edit-shortcut button {
    148160        left: -18px; /* Assume there will be less of a margin available on smaller screens */
    149161    }
  • trunk/src/wp-includes/js/customize-selective-refresh.js

    r39131 r39136  
    139139         */
    140140        positionEditShortcut: function( placement, $editShortcut ) {
    141             var $placementContainer = $( placement.container );
     141            var $placementContainer = $( placement.container ), $editButton;
    142142            $placementContainer.prepend( $editShortcut );
    143143            if ( ! $placementContainer.is( ':visible' ) || 'none' === $placementContainer.css( 'display' ) ) {
    144144                $editShortcut.addClass( 'customize-partial-edit-shortcut-hidden' );
    145145            }
    146             $editShortcut.toggleClass( 'customize-partial-edit-shortcut-left-margin', $editShortcut.offset().left < 1 );
     146            $editButton = $editShortcut.find( 'button' );
     147            $editShortcut.toggleClass( 'customize-partial-edit-shortcut-left-margin', $editButton.offset().left < 2 );
    147148        },
    148149
     
    215216         */
    216217        createEditShortcut: function() {
    217             var partial = this, shortcutTitle;
     218            var partial = this, shortcutTitle, $buttonContainer, $button, $image;
    218219            shortcutTitle = partial.getEditShortcutTitle();
    219             return $( '<button>', {
     220            $buttonContainer = $( '<span>', {
     221                'class': 'customize-partial-edit-shortcut ' + partial.getEditShortcutClassName()
     222            } );
     223            $button = $( '<button>', {
    220224                'aria-label': shortcutTitle,
    221225                'title': shortcutTitle,
    222                 'type': 'button',
    223                 'class': 'customize-partial-edit-shortcut ' + partial.getEditShortcutClassName()
     226                'class': 'customize-partial-edit-shortcut-button'
    224227            } );
     228            $image = $( '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13.89 3.39l2.71 2.72c.46.46.42 1.24.03 1.64l-8.01 8.02-5.56 1.16 1.16-5.58s7.6-7.63 7.99-8.03c.39-.39 1.22-.39 1.68.07zm-2.73 2.79l-5.59 5.61 1.11 1.11 5.54-5.65zm-2.97 8.23l5.58-5.6-1.07-1.08-5.59 5.6z"/></svg>' );
     229            $button.append( $image );
     230            $buttonContainer.append( $button );
     231            return $buttonContainer;
    225232        },
    226233
Note: See TracChangeset for help on using the changeset viewer.