WordPress.org

Make WordPress Core

Changeset 39136


Ignore:
Timestamp:
11/04/16 01:47:56 (14 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.