Changeset 41621 – WordPress Trac (original) (raw)

trunk/src/wp-admin/css/common.css

r41595 r41621
2967 2967
2968 2968 /* Metabox collapse arrow indicators */
2969 .js .sidebar-name .sidebar-name-arrow:before,
2969 .sidebar-name .toggle-indicator:before,
2970 2970 .js .meta-box-sortables .postbox .toggle-indicator:before,
2971 2971 .bulk-action-notice .toggle-indicator:before {
2979 2979 }
2980 2980
2981 .js .widgets-holder-wrap.closed .sidebar-name-arrow:before,
2981 .js .widgets-holder-wrap.closed .toggle-indicator:before,
2982 2982 .js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before,
2983 2983 .bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator:before {
2984 2984 content: "\f140";
2985 }
2986
2987 .js .sidebar-name .sidebar-name-arrow:before {
2988 padding: 10px;
2989 left: 0;
2990 }
2991
2992 .js #widgets-left .sidebar-name .sidebar-name-arrow {
2993 display: none;
2994 }
2995
2996 .js #widgets-left .widgets-holder-wrap.closed .sidebar-name .sidebar-name-arrow,
2997 .js #widgets-left .sidebar-name:hover .sidebar-name-arrow {
2998 display: block;
2999 2985 }
3000 2986
3172 3158 .postbox .handlediv.button-link,
3173 3159 .item-edit,
3174 .sidebar-name-arrow,
3160 .toggle-indicator,
3175 3161 .accordion-section-title:after {
3176 3162 color: #72777c;
3189 3175 .item-edit:hover,
3190 3176 .item-edit:focus,
3191 .sidebar-name:hover .sidebar-name-arrow,
3177 .sidebar-name:hover .toggle-indicator,
3192 3178 .accordion-section-title:hover:after {
3193 3179 color: #23282d;
3489 3475 .widget-top .widget-action,
3490 3476 .widget-top .widget-action:hover,
3491 .sidebar-name-arrow,
3492 .sidebar-name:hover .sidebar-name-arrow,
3477 .sidebar-name .toggle-indicator,
3478 .sidebar-name:hover .toggle-indicator,
3493 3479 .meta-box-sortables .postbox:hover .handlediv,
3494 3480 #bulk-titles div a,

trunk/src/wp-admin/css/widgets.css

r41602 r41621
261 261 }
262 262
263 .sidebar-name-arrow {
264 position: absolute;
265 top: 0;
266 right: 0;
267 bottom: 0;
268 }
269
270 263 .js .sidebar-name {
271 264 cursor: pointer;
265 }
266
267 .sidebar-name .handlediv {
268 float: right;
269 width: 38px;
270 height: 38px;
271 border: 0;
272 margin: 0;
273 padding: 8px;
274 background: none;
275 cursor: pointer;
276 outline: none;
277 }
278
279 #widgets-right .sidebar-name .handlediv {
280 margin: 5px 3px 0 0;
281 }
282
283 .sidebar-name .handlediv:focus {
284 box-shadow: none;
285 outline: none;
286 }
287
288 #widgets-left .sidebar-name .toggle-indicator {
289 display: none;
290 }
291
292 #widgets-left .widgets-holder-wrap.closed .sidebar-name .toggle-indicator,
293 #widgets-left .sidebar-name:hover .toggle-indicator,
294 #widgets-left .sidebar-name .handlediv:focus .toggle-indicator {
295 display: block;
296 }
297
298 .sidebar-name .toggle-indicator:before {
299 padding: 1px 2px 1px 0;
300 border-radius: 50%;
301 }
302
303 .sidebar-name .handlediv:focus .toggle-indicator:before {
304 box-shadow:
305 0 0 0 1px #5b9dd9,
306 0 0 2px 1px rgba(30, 140, 190, .8);
272 307 }
273 308
324 359 padding: 10px 0;
325 360 margin: 0 10px 0 0;
326 }
327
328 #widgets-left .sidebar-name .sidebar-name-arrow:before {
329 padding: 9px;
330 361 }
331 362
424 455 }
425 456
426 div#widgets-right .sidebar-name .sidebar-name-arrow:before {
427 top: 2px;
428 }
429
430 457 div#widgets-right .widget-top {
431 458 padding: 0;
557 584 #access-off,
558 585 .widgets_access .widget-action,
559 .widgets_access .sidebar-name-arrow,
586 .widgets_access .handlediv,
560 587 .widgets_access #access-on,
561 588 .widgets_access .widget-holder .description,

trunk/src/wp-admin/includes/widgets.php

r41352 r41621
81 81 ?>
82 82
83

83
84
85
86
84 87

85 88

trunk/src/wp-admin/js/widgets.js

r41352 r41621
40 40 isRTL = !! ( 'undefined' !== typeof isRtl && isRtl );
41 41
42 $('#widgets-right .sidebar-name').click( function() {
43 var this=this = this=(this),
44 wrap=wrap = wrap=this.closest('.widgets-holder-wrap');
45
46 if ( $wrap.hasClass('closed') ) {
47 $wrap.removeClass('closed');
48 $this.parent().sortable('refresh');
49 } else {
50 $wrap.addClass('closed');
51 }
52
53 $document.triggerHandler( 'wp-pin-menu' );
54 });
42 // Handle the widgets containers in the right column.
43 $( '#widgets-right .sidebar-name' )
44 /*
45 * Toggle the widgets containers when clicked and update the toggle
46 * button `aria-expanded` attribute value.
47 */
48 .click( function() {
49 var this=this = this=( this ),
50 wrap=wrap = wrap=this.closest( '.widgets-holder-wrap '),
51 toggle=toggle = toggle=this.find( '.handlediv' );
52
53 if ( $wrap.hasClass( 'closed' ) ) {
54 $wrap.removeClass( 'closed' );
55 $toggle.attr( 'aria-expanded', 'true' );
56 // Refresh the jQuery UI sortable items.
57 $this.parent().sortable( 'refresh' );
58 } else {
59 $wrap.addClass( 'closed' );
60 $toggle.attr( 'aria-expanded', 'false' );
61 }
62
63 // Update the admin menu "sticky" state.
64 $document.triggerHandler( 'wp-pin-menu' );
65 })
66 /*
67 * Set the initial `aria-expanded` attribute value on the widgets
68 * containers toggle button. The first one is expanded by default.
69 */
70 .find( '.handlediv' ).each( function( index ) {
71 if ( 0 === index ) {
72 // jQuery equivalent of `continue` within an `each()` loop.
73 return;
74 }
75
76 $( this ).attr( 'aria-expanded', 'false' );
77 });
55 78
56 79 // Show AYS dialog when there are unsaved widget changes.
87 110 });
88 111
89 $('#widgets-left .sidebar-name').click( function() {
90 $(this).closest('.widgets-holder-wrap').toggleClass('closed');
112 // Handle the widgets containers in the left column.
113 $( '#widgets-left .sidebar-name' ).click( function() {
114 var wrap=wrap = wrap=( this ).closest( '.widgets-holder-wrap' );
115
116 $wrap
117 .toggleClass( 'closed' )
118 .find( '.handlediv' ).attr( 'aria-expanded', ! $wrap.hasClass( 'closed' ) );
119
120 // Update the admin menu "sticky" state.
91 121 $document.triggerHandler( 'wp-pin-menu' );
92 122 });
216 246 * Open Sidebar when a Widget gets dragged over it.
217 247 *
218 * @param event
248 * @param {object} event jQuery event object.
219 249 */
220 250 over: function( event ) {
228 258 if ( $wrap.hasClass( 'closed' ) ) {
229 259 wpWidgets.hoveredSidebar = $wrap;
230 $wrap.removeClass( 'closed' );
260 $wrap
261 .removeClass( 'closed' )
262 .find( '.handlediv' ).attr( 'aria-expanded', 'true' );
231 263 }
232 264
237 269 * Close Sidebar when the Widget gets dragged out of it.
238 270 *
239 * @param event
271 * @param {object} event jQuery event object.
240 272 */
241 273 out: function( event ) {
320 352
321 353 if ( $sidebar.parent().hasClass('closed') ) {
322 $sidebar.parent().removeClass('closed');
354 $sidebar.parent()
355 .removeClass( 'closed' )
356 .find( '.handlediv' ).attr( 'aria-expanded', 'true' );
357
323 358 children=children = children=sidebar.children('.widget');
324 359
623 658 }
624 659
625 // Open the widgets container
626 sidebar.closest( '.widgets-holder-wrap' ).removeClass('closed');
660 // Open the widgets container.
661 sidebar.closest( '.widgets-holder-wrap' )
662 .removeClass( 'closed' )
663 .find( '.handlediv' ).attr( 'aria-expanded', 'true' );
627 664
628 665 sidebar.append( widget );
680 717 * Used when a Widget gets dragged in/out of the Sidebar and never dropped.
681 718 *
682 * @param sidebar
719 * @param {object} event jQuery event object.
683 720 */
684 closeSidebar: function( sidebar ) {
685 this.hoveredSidebar.addClass( 'closed' );
686 $( sidebar.target ).css( 'min-height', '' );
721 closeSidebar: function( event ) {
722 this.hoveredSidebar
723 .addClass( 'closed' )
724 .find( '.handlediv' ).attr( 'aria-expanded', 'false' );
725
726 $( event.target ).css( 'min-height', '' );
687 727 this.hoveredSidebar = null;
688 728 }

trunk/src/wp-admin/widgets.php

r40313 r41621
388 388
389 389
390

390
391
392
393
391 394

392 395