vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2025-10-16 12:05:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Props sirbrillig, celloexpressions, delawski.
See #38532.


git-svn-id: https://develop.svn.wordpress.org/trunk@39136 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter 2016-11-04 01:47:56 +00:00
parent a02ab35128
commit 71f8622cdc
5 changed files with 45 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/wp-content/themes/twentyfourteen/style.css
View File

@ -1045,8 +1045,8 @@ span + .edit-link:before,
outline: 1px dotted;
}
.secondary-navigation .customize-partial-edit-shortcut:before,
.footer-sidebar .widget:first-child .customize-partial-edit-shortcut:before {
.secondary-navigation .customize-partial-edit-shortcut button,
.footer-sidebar .widget:first-child .customize-partial-edit-shortcut button {
left: 0;
}

2
src/wp-content/themes/twentyseventeen/inc/color-patterns.php
View File

@ -317,7 +317,7 @@ body.colors-custom,
.colors-custom .next.page-numbers:hover,
.colors-custom .site-content .wp-playlist-light .wp-playlist-item:hover,
.colors-custom .site-content .wp-playlist-light .wp-playlist-item:focus,
.colors-custom .customize-partial-edit-shortcut:before {
.colors-custom .customize-partial-edit-shortcut button {
background: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 46% ); /* base: #767676; */
}

4
src/wp-content/themes/twentyseventeen/style.css
View File

@ -2967,7 +2967,7 @@ object {
}
/* Add some space around the visual edit shortcut buttons. */
.twentyseventeen-panel .customize-partial-edit-shortcut:before {
.twentyseventeen-panel .customize-partial-edit-shortcut button {
top: 30px;
left: 30px;
}
@ -2983,7 +2983,7 @@ object {
}
/* Prevent icon colors from clashing with color schemes. */
.colors-custom .customize-partial-edit-shortcut:before {
.colors-custom .customize-partial-edit-shortcut button {
text-shadow: 0 -1px 1px rgba(0,0,0,.2),
1px 0 1px rgba(0,0,0,.2),
0 1px 1px rgba(0,0,0,.2),

40
src/wp-includes/css/customize-preview.css
View File

@ -12,9 +12,9 @@
}
/* Make shortcut buttons essentially invisible */
.widget button.customize-partial-edit-shortcut,
.widget .customize-partial-edit-shortcut,
.customize-partial-edit-shortcut {
position: relative;
position: absolute;
float: left;
width: 1px; /* required to have a size to be focusable in Safari */
height: 1px;
@ -28,23 +28,26 @@
z-index: 5;
}
.customize-partial-edit-shortcut:active {
.widget .customize-partial-edit-shortcut button:active,
.customize-partial-edit-shortcut button:active {
padding: 0;
border: 0;
}
/* Styles for the actual shortcut */
.customize-partial-edit-shortcut:before {
.widget .customize-partial-edit-shortcut button,
.customize-partial-edit-shortcut button {
position: absolute;
left: -36px;
color: #fff;
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
font-size: 18px;
font-family: dashicons;
content: '\f464';
z-index: 5;
background-color: #0085ba;
background: #0085ba;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 2px 1px rgba(46,68,83,0.15);
@ -65,27 +68,36 @@
-1px 0 1px #006799;
}
.customize-partial-edit-shortcut:hover:before,
.customize-partial-edit-shortcut:focus:before {
.customize-partial-edit-shortcut button svg {
fill: #fff;
min-width: 20px;
min-height: 20px;
width: 20px;
height: 20px;
margin: auto;
}
.customize-partial-edit-shortcut button:hover,
.customize-partial-edit-shortcut button:focus {
background: #008ec2; /* matches primary buttons */
border-color: #191e23; /* provides visual focus style with 4.5 contrast against background color */
}
body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut:before {
body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button {
animation-name: customize-partial-edit-shortcut-bounce-appear;
pointer-events: auto;
}
body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut:before {
body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button {
animation-name: customize-partial-edit-shortcut-bounce-disappear;
pointer-events: none;
}
.page-sidebar-collapsed .customize-partial-edit-shortcut:before,
.customize-partial-edit-shortcut-hidden:before {
.page-sidebar-collapsed .customize-partial-edit-shortcut button,
.customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button {
visibility: hidden;
}
.customize-partial-edit-shortcut-left-margin:before {
.customize-partial-edit-shortcut-left-margin.customize-partial-edit-shortcut button {
left: 0;
}
@ -144,7 +156,7 @@ body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut:be
}
@media screen and (max-width:800px) {
.customize-partial-edit-shortcut:before {
.customize-partial-edit-shortcut button {
left: -18px; /* Assume there will be less of a margin available on smaller screens */
}
}

21
src/wp-includes/js/customize-selective-refresh.js
View File

@ -138,12 +138,13 @@ wp.customize.selectiveRefresh = ( function( $, api ) {
* @returns {void}
*/
positionEditShortcut: function( placement, $editShortcut ) {
var $placementContainer = $( placement.container );
var $placementContainer = $( placement.container ), $editButton;
$placementContainer.prepend( $editShortcut );
if ( ! $placementContainer.is( ':visible' ) || 'none' === $placementContainer.css( 'display' ) ) {
$editShortcut.addClass( 'customize-partial-edit-shortcut-hidden' );
}
$editShortcut.toggleClass( 'customize-partial-edit-shortcut-left-margin', $editShortcut.offset().left < 1 );
$editButton = $editShortcut.find( 'button' );
$editShortcut.toggleClass( 'customize-partial-edit-shortcut-left-margin', $editButton.offset().left < 2 );
},
/**
@ -214,14 +215,20 @@ wp.customize.selectiveRefresh = ( function( $, api ) {
* @return {jQuery} The edit shortcut button element.
*/
createEditShortcut: function() {
var partial = this, shortcutTitle;
var partial = this, shortcutTitle, $buttonContainer, $button, $image;
shortcutTitle = partial.getEditShortcutTitle();
return $( '<button>', {
'aria-label': shortcutTitle,
'title': shortcutTitle,
'type': 'button',
$buttonContainer = $( '<span>', {
'class': 'customize-partial-edit-shortcut ' + partial.getEditShortcutClassName()
} );
$button = $( '<button>', {
'aria-label': shortcutTitle,
'title': shortcutTitle,
'class': 'customize-partial-edit-shortcut-button'
} );
$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>' );
$button.append( $image );
$buttonContainer.append( $button );
return $buttonContainer;
},
/**