mirror of
https://github.com/WordPress/WordPress.git
synced 2024-06-24 13:54:59 +02:00
Widgets: move the chooser inside the selected widget so it inherits the width, add some keyboard shortcuts: tab to select, enter to append and escape to cancel. Props shaunandrews, see #25821
Built from https://develop.svn.wordpress.org/trunk@26271 git-svn-id: http://core.svn.wordpress.org/trunk@26176 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz
parent
8321cdd567
commit
c19660468b
|
|
@ -10190,8 +10190,8 @@ div#widgets-left .widget-holder {
|
|||
|
||||
#available-widgets .widget .widget-description {
|
||||
display: block;
|
||||
padding: 10px 16px;
|
||||
font-size: 12px;
|
||||
padding: 10px 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Inactive Sidebars */
|
||||
|
|
@ -10495,10 +10495,10 @@ div#widgets-right .widgets-sortables:before {
|
|||
}
|
||||
|
||||
|
||||
/* Widgets Area Chooser merge */
|
||||
/* Widgets Area Chooser */
|
||||
.widget-liquid-left #widgets-left.chooser #available-widgets .widget,
|
||||
.widget-liquid-left #widgets-left.chooser .inactive-sidebar {
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
transition: opacity 0.1s linear;
|
||||
}
|
||||
|
||||
.widget-liquid-left #widgets-left.chooser #available-widgets .widget,
|
||||
|
|
@ -10523,56 +10523,71 @@ div#widgets-right .widgets-sortables:before {
|
|||
#widgets-chooser {
|
||||
clear: both;
|
||||
display: none;
|
||||
margin: auto;
|
||||
padding-bottom: 10px;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
#widgets-chooser h3 {
|
||||
font-size: 14px;
|
||||
margin: 15px 0;
|
||||
font-size: 12px;
|
||||
padding: 15px 35px 12px 0;
|
||||
margin: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
background: rgba(0,0,0,0.6);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#widgets-chooser ul.widgets-chooser-sidebars {
|
||||
margin: 0 0 20px 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#widgets-chooser ul.widgets-chooser-sidebars li {
|
||||
#widgets-chooser li {
|
||||
padding: 10px 35px 10px 15px;
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom: none;
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
position: relative;
|
||||
transition: background: 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
#widgets-chooser ul.widgets-chooser-sidebars li:hover {
|
||||
#widgets-chooser li:hover,
|
||||
#widgets-chooser li:focus {
|
||||
background: rgba(255,255,255,0.7);
|
||||
}
|
||||
|
||||
#widgets-chooser ul.widgets-chooser-sidebars li.widgets-chooser-selected {
|
||||
background: #1075a0;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#widgets-chooser ul.widgets-chooser-sidebars li.widgets-chooser-selected:before {
|
||||
#widgets-chooser li:focus:before {
|
||||
content: '\f147';
|
||||
display: block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 26px/1 'dashicons';
|
||||
color: #999;
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
#widgets-chooser ul.widgets-chooser-sidebars li:last-child {
|
||||
border-bottom: 1px solid #ccc;
|
||||
#widgets-chooser li.widgets-chooser-selected {
|
||||
background: #1075a0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#widgets-chooser li.widgets-chooser-selected:before,
|
||||
#widgets-chooser li.widgets-chooser-selected:focus:before {
|
||||
content: '\f147';
|
||||
display: block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 26px/1 'dashicons';
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
#widgets-chooser .widgets-chooser-actions {
|
||||
clear: both;
|
||||
padding: 10px 0 12px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -12368,4 +12383,4 @@ li#wp-admin-bar-toggle-button {
|
|||
height: 100%;
|
||||
z-index: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
2
wp-admin/css/wp-admin-rtl.min.css
vendored
2
wp-admin/css/wp-admin-rtl.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -10190,8 +10190,8 @@ div#widgets-left .widget-holder {
|
|||
|
||||
#available-widgets .widget .widget-description {
|
||||
display: block;
|
||||
padding: 10px 16px;
|
||||
font-size: 12px;
|
||||
padding: 10px 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Inactive Sidebars */
|
||||
|
|
@ -10495,10 +10495,10 @@ div#widgets-right .widgets-sortables:before {
|
|||
}
|
||||
|
||||
|
||||
/* Widgets Area Chooser merge */
|
||||
/* Widgets Area Chooser */
|
||||
.widget-liquid-left #widgets-left.chooser #available-widgets .widget,
|
||||
.widget-liquid-left #widgets-left.chooser .inactive-sidebar {
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
transition: opacity 0.1s linear;
|
||||
}
|
||||
|
||||
.widget-liquid-left #widgets-left.chooser #available-widgets .widget,
|
||||
|
|
@ -10523,56 +10523,71 @@ div#widgets-right .widgets-sortables:before {
|
|||
#widgets-chooser {
|
||||
clear: both;
|
||||
display: none;
|
||||
margin: auto;
|
||||
padding-bottom: 10px;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
#widgets-chooser h3 {
|
||||
font-size: 14px;
|
||||
margin: 15px 0;
|
||||
font-size: 12px;
|
||||
padding: 15px 0 12px 35px;
|
||||
margin: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
background: rgba(0,0,0,0.6);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#widgets-chooser ul.widgets-chooser-sidebars {
|
||||
margin: 0 0 20px 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#widgets-chooser ul.widgets-chooser-sidebars li {
|
||||
#widgets-chooser li {
|
||||
padding: 10px 15px 10px 35px;
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom: none;
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
position: relative;
|
||||
transition: background: 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
#widgets-chooser ul.widgets-chooser-sidebars li:hover {
|
||||
#widgets-chooser li:hover,
|
||||
#widgets-chooser li:focus {
|
||||
background: rgba(255,255,255,0.7);
|
||||
}
|
||||
|
||||
#widgets-chooser ul.widgets-chooser-sidebars li.widgets-chooser-selected {
|
||||
background: #1075a0;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#widgets-chooser ul.widgets-chooser-sidebars li.widgets-chooser-selected:before {
|
||||
#widgets-chooser li:focus:before {
|
||||
content: '\f147';
|
||||
display: block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 26px/1 'dashicons';
|
||||
color: #999;
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
#widgets-chooser ul.widgets-chooser-sidebars li:last-child {
|
||||
border-bottom: 1px solid #ccc;
|
||||
#widgets-chooser li.widgets-chooser-selected {
|
||||
background: #1075a0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#widgets-chooser li.widgets-chooser-selected:before,
|
||||
#widgets-chooser li.widgets-chooser-selected:focus:before {
|
||||
content: '\f147';
|
||||
display: block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font: normal 26px/1 'dashicons';
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
#widgets-chooser .widgets-chooser-actions {
|
||||
clear: both;
|
||||
padding: 10px 0 12px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -12368,4 +12383,4 @@ li#wp-admin-bar-toggle-button {
|
|||
height: 100%;
|
||||
z-index: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
2
wp-admin/css/wp-admin.min.css
vendored
2
wp-admin/css/wp-admin.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -204,10 +204,15 @@ wpWidgets = {
|
|||
$( '#widgets-left' ).addClass( 'chooser' );
|
||||
widget.addClass( 'widget-in-question' );
|
||||
|
||||
widget.after( chooser );
|
||||
chooser.slideDown( 200, function() {
|
||||
widget.find( '.widget-description' ).after( chooser );
|
||||
chooser.slideDown( 300, function() {
|
||||
selectSidebar.find('.widgets-chooser-selected').focus();
|
||||
});
|
||||
|
||||
selectSidebar.find( 'li' ).on( 'focusin.widgets-chooser', function() {
|
||||
selectSidebar.find('.widgets-chooser-selected').removeClass( 'widgets-chooser-selected' );
|
||||
$(this).addClass( 'widgets-chooser-selected' );
|
||||
} )
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -220,9 +225,18 @@ wpWidgets = {
|
|||
self.closeChooser();
|
||||
} else if ( $target.hasClass('button-secondary') ) {
|
||||
self.closeChooser();
|
||||
} else if ( $target.is('.widgets-chooser-sidebars li') ) {
|
||||
chooser.find('.widgets-chooser-selected').removeClass( 'widgets-chooser-selected' );
|
||||
$target.addClass( 'widgets-chooser-selected' );
|
||||
}
|
||||
}).on( 'keyup.widgets-chooser', function( event ) {
|
||||
if ( event.which === $.ui.keyCode.ENTER ) {
|
||||
if ( $( event.target ).hasClass('button-secondary') ) {
|
||||
// Close instead of adding when pressing Enter on the Cancel button
|
||||
self.closeChooser();
|
||||
} else {
|
||||
self.addWidget( chooser );
|
||||
self.closeChooser();
|
||||
}
|
||||
} else if ( event.which === $.ui.keyCode.ESCAPE ) {
|
||||
self.closeChooser();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
@ -337,13 +351,18 @@ wpWidgets = {
|
|||
},
|
||||
|
||||
addWidget: function( chooser ) {
|
||||
var widget = $('#available-widgets').find('.widget-in-question').clone(),
|
||||
widgetId = widget.attr('id'),
|
||||
add = widget.find( 'input.add_new' ).val(),
|
||||
n = widget.find( 'input.multi_number' ).val(),
|
||||
var widget, widgetId, add, n,
|
||||
sidebarId = chooser.find( '.widgets-chooser-selected' ).data('sidebarId'),
|
||||
sidebar = $( '#' + sidebarId );
|
||||
|
||||
// Move the chooser out of the widget
|
||||
$('#wpbody-content').append( chooser );
|
||||
|
||||
widget = $('#available-widgets').find('.widget-in-question').clone();
|
||||
widgetId = widget.attr('id');
|
||||
add = widget.find( 'input.add_new' ).val();
|
||||
n = widget.find( 'input.multi_number' ).val();
|
||||
|
||||
if ( 'multi' === add ) {
|
||||
widget.html(
|
||||
widget.html().replace( /<[^<>]+>/g, function(m) {
|
||||
|
|
@ -391,7 +410,7 @@ wpWidgets = {
|
|||
|
||||
clearWidgetSelection: function() {
|
||||
$( '#widgets-left' ).removeClass( 'chooser' );
|
||||
$( '#available-widgets' ).find( '.widget-in-question' ).removeClass( 'widget-in-question' );
|
||||
$( '.widget-in-question' ).removeClass( 'widget-in-question' );
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
2
wp-admin/js/widgets.min.js
vendored
2
wp-admin/js/widgets.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -407,11 +407,11 @@ foreach ( $wp_registered_sidebars as $sidebar => $registered_sidebar ) {
|
|||
</div>
|
||||
|
||||
<div id="widgets-chooser">
|
||||
<h3><?php _e( 'Choose an area to place this widget…' ); ?></h3>
|
||||
<h3><?php _e( 'Choose a sidebar:' ); ?></h3>
|
||||
<ul class="widgets-chooser-sidebars"></ul>
|
||||
<div class="widgets-chooser-actions">
|
||||
<button class="button-primary"><?php _e( 'Add Widget' ); ?></button>
|
||||
<button class="button-secondary"><?php _e( 'Cancel' ); ?></button>
|
||||
<button class="button-primary"><?php _e( 'Add Widget' ); ?></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user