Changeset 41621
- Timestamp:
- 09/27/2017 04:28:59 PM (7 years ago)
- Location:
- trunk/src/wp-admin
- Files:
-
- 5 edited
Legend:
- Unmodified
- Added
- Removed
-
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 <div class="sidebar-name"> 83 <div class="sidebar-name-arrow"><br /></div> 83 <button type="button" class="handlediv hide-if-no-js" aria-expanded="true"> 84 <span class="screen-reader-text"><?php echo esc_html( $sidebar_name ); ?></span> 85 <span class="toggle-indicator" aria-hidden="true"></span> 86 </button> 84 87 <h2><?php echo esc_html( $sidebar_name ); ?> <span class="spinner"></span></h2> 85 88 </div> -
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), 44 $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 ), 50 $wrap = $this.closest( '.widgets-holder-wrap '), 51 $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 = $( 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 event248 * @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 event271 * @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 = $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 sidebar719 * @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 <div id="available-widgets" class="widgets-holder-wrap"> 389 389 <div class="sidebar-name"> 390 <div class="sidebar-name-arrow"><br /></div> 390 <button type="button" class="handlediv hide-if-no-js" aria-expanded="true"> 391 <span class="screen-reader-text"><?php _e( 'Available Widgets' ); ?></span> 392 <span class="toggle-indicator" aria-hidden="true"></span> 393 </button> 391 394 <h2><?php _e( 'Available Widgets' ); ?> <span id="removing-widget"><?php _ex( 'Deactivate', 'removing-widget' ); ?> <span></span></span></h2> 392 395 </div>
Note: See TracChangeset
for help on using the changeset viewer.