Changeset 35304
- Timestamp:
- 10/20/2015 08:14:51 PM (9 years ago)
- Location:
- trunk/src
- Files:
-
- 6 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-admin/css/customize-controls.css
r35231 r35304 616 616 /* Style for custom settings */ 617 617 618 /* 618 /** 619 619 * Dropdowns 620 620 */ 621 621 622 .accordion-section .dropdown { 622 623 float: left; … … 699 700 * instead it expands the iframe size to match the size of the content 700 701 */ 702 701 703 .ios .wp-full-overlay { 702 704 position: relative; … … 711 713 } 712 714 713 /* * Media controls **/715 /* Media controls */ 714 716 715 717 .customize-control-media .current, … … 996 998 * Themes 997 999 */ 1000 998 1001 @-webkit-keyframes customize-reload { 999 1002 0% { opacity: 0; } … … 1227 1230 line-height: 1.5; 1228 1231 margin: 25px 0 20px; 1232 } 1233 1234 /** 1235 * Widgets and Menus common styles 1236 */ 1237 1238 /* higher specificity than .wp-core-ui .button-secondary */ 1239 #customize-theme-controls .add-new-widget, 1240 #customize-theme-controls .add-new-menu-item { 1241 cursor: pointer; 1242 float: right; 1243 margin-left: 10px; 1244 -webkit-transition: all 0.2s; 1245 transition: all 0.2s; 1246 -webkit-user-select: none; 1247 -moz-user-select: none; 1248 -ms-user-select: none; 1249 user-select: none; 1250 outline: none; 1251 } 1252 1253 .reordering .add-new-widget, 1254 .reordering .add-new-menu-item { 1255 opacity: 0.2; 1256 pointer-events: none; 1257 cursor: not-allowed; /* doesn't work in conjunction with pointer-events */ 1258 } 1259 1260 .add-new-widget:before, 1261 .add-new-menu-item:before { 1262 content: "\f132"; 1263 display: inline-block; 1264 position: relative; 1265 left: -2px; 1266 top: -1px; 1267 font: normal 20px/1 dashicons; 1268 vertical-align: middle; 1269 -webkit-transition: all 0.2s; 1270 transition: all 0.2s; 1271 -webkit-font-smoothing: antialiased; 1272 -moz-osx-font-smoothing: grayscale; 1273 } 1274 1275 /* Reordering */ 1276 .reorder-toggle { 1277 float: right; 1278 padding: 5px 8px; 1279 text-decoration: none; 1280 cursor: pointer; 1281 outline: none; 1282 -webkit-user-select: none; 1283 -moz-user-select: none; 1284 -ms-user-select: none; 1285 user-select: none; 1286 } 1287 1288 .reorder-toggle:focus { 1289 outline: 1px dotted; 1290 } 1291 1292 .reorder, 1293 .reordering .reorder-done { 1294 display: block; 1295 padding: 5px 8px; 1296 } 1297 1298 .reorder-done, 1299 .reordering .reorder { 1300 display: none; 1301 color: #0073aa; 1302 } 1303 1304 .reorder-toggle:hover .reorder-done, 1305 .reorder-toggle:active .reorder-done, 1306 .reorder-toggle:focus .reorder-done { 1307 color: #00a0d2; 1229 1308 } 1230 1309 -
trunk/src/wp-admin/css/customize-nav-menus.css
r35215 r35304 91 91 } 92 92 93 /* Menu-item reordering nav. */ 94 .reordering .customize-control-nav_menu .reorder, 95 .customize-control-nav_menu .reorder-done { 96 display: none; 97 } 98 99 .customize-control-nav_menu .reorder, 100 .reordering .customize-control-nav_menu .reorder-done { 101 display: inline-block; 102 padding: 5px 8px; 103 } 93 /** 94 * Menu items reordering styles 95 */ 104 96 105 97 .menu-item-reorder-nav { … … 109 101 top: 0; 110 102 right: 0; 111 }112 113 #customize-theme-controls .reordering .add-new-menu-item {114 opacity: 0.2;115 pointer-events: none;116 cursor: not-allowed;117 103 } 118 104 … … 362 348 .wp-customizer button:focus .toggle-indicator:after { 363 349 -webkit-box-shadow: 364 350 0 0 0 1px #5b9dd9, 365 351 0 0 2px 1px rgba(30, 140, 190, .8); 366 367 352 box-shadow: 353 0 0 0 1px #5b9dd9, 368 354 0 0 2px 1px rgba(30, 140, 190, .8); 369 355 } … … 480 466 } 481 467 482 /* 483 * Add-menu-items mode .468 /** 469 * Add-menu-items mode 484 470 */ 471 485 472 .wp-full-overlay-main { 486 473 right: auto; /* This overrides a right: 0; which causes the preview to resize rather than slide off screen at the normal size. */ … … 495 482 .adding-menu-items .control-section.open { 496 483 opacity: 1; 497 }498 499 /* Add-new button. */500 #customize-theme-controls .add-new-menu-item {501 cursor: pointer;502 float: right;503 margin-left: 10px;504 -webkit-transition: all 0.2s;505 transition: all 0.2s;506 -webkit-user-select: none;507 -moz-user-select: none;508 -ms-user-select: none;509 user-select: none;510 outline: none;511 }512 513 .add-new-menu-item:before {514 content: "\f132";515 display: inline-block;516 position: relative;517 left: -2px;518 top: -1px;519 font: normal 20px/1 dashicons;520 vertical-align: middle;521 -webkit-transition: all 0.2s;522 transition: all 0.2s;523 -webkit-font-smoothing: antialiased;524 -moz-osx-font-smoothing: grayscale;525 484 } 526 485 -
trunk/src/wp-admin/css/customize-widgets.css
r35207 r35304 118 118 119 119 /** 120 * Widget reordering styles 121 **/ 122 123 .reorder-toggle { 124 float: right; 125 padding: 5px 8px; 126 text-decoration: none; 127 cursor: pointer; 128 outline: none; 129 -webkit-user-select: none; 130 -moz-user-select: none; 131 -ms-user-select: none; 132 user-select: none; 133 } 134 .reorder-toggle:focus { 135 outline: 1px dotted; 136 } 137 138 .reorder-done, 139 .reordering .reorder { 140 display: none; 141 } 142 143 .reordering .reorder-done { 144 display: block; 145 color: #0073aa; 146 } 147 148 .reordering .reorder-done:hover, 149 .reordering .reorder-done:active { 150 color: #00a0d2; 151 } 152 153 #customize-theme-controls .reordering .add-new-widget { 154 opacity: 0.2; 155 pointer-events: none; 156 cursor: not-allowed; 157 } 120 * Widget reordering styles 121 */ 158 122 159 123 #customize-theme-controls .widget-reorder-nav { … … 214 178 } 215 179 216 #customize-theme-controls 180 #customize-theme-controls .move-widget-area { 217 181 display: none; 218 182 background: #fff; … … 289 253 } 290 254 291 292 255 /** 293 256 * Styles for new widget addition panel 294 257 */ 258 295 259 .wp-full-overlay-main { 296 260 right: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */ 297 261 width: 100%; 298 }299 300 #customize-theme-controls .add-new-widget {301 cursor: pointer;302 float: right;303 margin-left: 10px;304 -webkit-transition: all 0.2s;305 transition: all 0.2s;306 -webkit-user-select: none;307 -moz-user-select: none;308 -ms-user-select: none;309 user-select: none;310 outline: none;311 }312 313 .add-new-widget:before {314 content: "\f132";315 display: inline-block;316 position: relative;317 left: -2px;318 top: -1px;319 font: normal 20px/1 dashicons;320 vertical-align: middle;321 -webkit-transition: all 0.2s;322 transition: all 0.2s;323 -webkit-font-smoothing: antialiased;324 -moz-osx-font-smoothing: grayscale;325 262 } 326 263 … … 457 394 * No plurals in naming. 458 395 * Ordered from lowest to highest specificity. 459 **/ 396 */ 397 460 398 #available-widgets .widget-title { 461 399 position: relative; -
trunk/src/wp-admin/js/customize-widgets.js
r35231 r35304 1790 1790 * Keyboard-accessible reordering 1791 1791 */ 1792 this.container.find( '.reorder-toggle' ).on( 'click keydown', function( event ) { 1793 if ( event.type === 'keydown' && ! ( event.which === 13 || event.which === 32 ) ) { // Enter or Spacebar 1794 return; 1795 } 1796 1792 this.container.find( '.reorder-toggle' ).on( 'click', function() { 1797 1793 self.toggleReordering( ! self.isReordering ); 1798 1794 } ); … … 1805 1801 var self = this; 1806 1802 1807 this.container.find( '.add-new-widget' ).on( 'click keydown', function( event ) { 1808 if ( event.type === 'keydown' && ! ( event.which === 13 || event.which === 32 ) ) { // Enter or Spacebar 1809 return; 1810 } 1803 this.container.find( '.add-new-widget' ).on( 'click', function() { 1804 var addNewWidgetBtn = $( this ); 1811 1805 1812 1806 if ( self.$sectionContent.hasClass( 'reordering' ) ) { … … 1815 1809 1816 1810 if ( ! $( 'body' ).hasClass( 'adding-widget' ) ) { 1811 addNewWidgetBtn.attr( 'aria-expanded', 'true' ); 1817 1812 api.Widgets.availableWidgetsPanel.open( self ); 1818 1813 } else { 1814 addNewWidgetBtn.attr( 'aria-expanded', 'false' ); 1819 1815 api.Widgets.availableWidgetsPanel.close(); 1820 1816 } … … 1870 1866 */ 1871 1867 toggleReordering: function( showOrHide ) { 1868 var addNewWidgetBtn = this.$sectionContent.find( '.add-new-widget' ), 1869 reorderBtn = this.container.find( '.reorder-toggle' ), 1870 widgetsTitle = this.$sectionContent.find( '.widget-title' ); 1871 1872 1872 showOrHide = Boolean( showOrHide ); 1873 1873 … … 1884 1884 } ); 1885 1885 1886 this.$sectionContent.find( '.first-widget .move-widget' ).focus(); 1887 this.$sectionContent.find( '.add-new-widget' ).prop( 'tabIndex', -1 ); 1886 addNewWidgetBtn.attr({ 'tabindex': '-1', 'aria-hidden': 'true' }); 1887 reorderBtn.attr( 'aria-label', l10n.reorderLabelOff ); 1888 wp.a11y.speak( l10n.reorderModeOn ); 1889 // Hide widget titles while reordering: title is already in the reorder controls. 1890 widgetsTitle.attr( 'aria-hidden', 'true' ); 1888 1891 } else { 1889 this.$sectionContent.find( '.add-new-widget' ).prop( 'tabIndex', 0 ); 1892 addNewWidgetBtn.removeAttr( 'tabindex aria-hidden' ); 1893 reorderBtn.attr( 'aria-label', l10n.reorderLabelOn ); 1894 wp.a11y.speak( l10n.reorderModeOff ); 1895 widgetsTitle.attr( 'aria-hidden', 'false' ); 1890 1896 } 1891 1897 }, -
trunk/src/wp-includes/class-wp-customize-control.php
r35275 r35304 345 345 */ 346 346 protected function render() { 347 $id = 'customize-control-' . str_replace( '[', '-', str_replace( ']', '', $this->id ));347 $id = 'customize-control-' . str_replace( array( '[', ']' ), array( '-', '' ), $this->id ); 348 348 $class = 'customize-control customize-control-' . $this->type; 349 349 … … 1313 1313 </label> 1314 1314 <div class="container"> 1315 </div> 1315 </div> 1316 1316 </div> 1317 1317 <div class="actions"> … … 1466 1466 */ 1467 1467 public function render_content() { 1468 $id = 'reorder-widgets-desc-' . str_replace( array( '[', ']' ), array( '-', '' ), $this->id ); 1468 1469 ?> 1469 < span class="button-secondary add-new-widget" tabindex="0">1470 <button type="button" class="button-secondary add-new-widget" aria-expanded="false" aria-controls="available-widgets"> 1470 1471 <?php _e( 'Add a Widget' ); ?> 1471 </span> 1472 1473 <span class="reorder-toggle" tabindex="0"> 1472 </button> 1473 <button type="button" class="not-a-button reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder widgets' ); ?>" aria-describedby="<?php echo esc_attr( $id ); ?>"> 1474 1474 <span class="reorder"><?php _ex( 'Reorder', 'Reorder widgets in Customizer' ); ?></span> 1475 1475 <span class="reorder-done"><?php _ex( 'Done', 'Cancel reordering widgets in Customizer' ); ?></span> 1476 </span> 1476 </button> 1477 <p class="screen-reader-text" id="<?php echo esc_attr( $id ); ?>"><?php _e( 'When in reorder mode, additional controls to reorder widgets will be available in the widgets list above.' ); ?></p> 1477 1478 <?php 1478 1479 } -
trunk/src/wp-includes/class-wp-customize-widgets.php
r35231 r35304 675 675 'widgetMovedDown' => __( 'Widget moved down' ), 676 676 'noAreasRendered' => __( 'There are no widget areas currently rendered in the preview. Navigate in the preview to a template that makes use of a widget area in order to access its widgets here.' ), 677 'reorderModeOn' => __( 'Reorder mode enabled' ), 678 'reorderModeOff' => __( 'Reorder mode closed' ), 679 'reorderLabelOn' => esc_attr__( 'Reorder widgets' ), 680 'reorderLabelOff' => esc_attr__( 'Close reorder mode' ), 677 681 ), 678 682 'tpl' => array(
Note: See TracChangeset
for help on using the changeset viewer.