Ticket #33184: 33184.9.diff
| File 33184.9.diff, 20.2 KB (added by , 10 years ago) |
|---|
-
src/wp-admin/css/customize-controls.css
1294 1294 #customize-preview { 1295 1295 top: 45px; 1296 1296 bottom: 0; 1297 height: auto;1298 1297 } 1299 1298 1300 1299 .wp-core-ui.wp-customizer .button { -
src/wp-admin/css/customize-nav-menus.css
1 #accordion-section-menu_locations {1 #accordion-section-menu_locations { 2 2 position: relative; 3 3 margin-bottom: 15px; 4 4 } … … 600 600 overflow-y: hidden; /* avoid scrollbar jitter with animating heights */ 601 601 } 602 602 603 #available-menu-items #available-menu-items-search.open { 604 height: 100%; 603 #available-menu-items-search { 604 position: relative; 605 border-bottom: 1px solid #dfdfdf; 606 padding: 0 15px; 607 background: #eee; 608 } 609 610 #available-menu-items-search.open { 611 height: calc( 100% - 70px ); 605 612 border-bottom: none; 606 613 } 607 614 … … 611 618 background: #fff; 612 619 } 613 620 614 #available-menu-items .open .accordion-section-title, 615 #available-menu-items #available-menu-items-search .accordion-section-title { 621 #available-menu-items .open .accordion-section-title { 616 622 background: #eee; 617 623 } 618 624 … … 685 691 display: none; 686 692 } 687 693 688 #available-menu-items-search.cannot-expand .accordion-section-title .spinner {689 display: block;690 }691 692 694 #available-menu-items .cannot-expand .accordion-section-title .no-items { 693 695 display: block; 694 696 color: #777; … … 701 703 padding: 1px 15px 15px 15px; 702 704 margin: 0; 703 705 min-height: 120px; 704 max-height: 290px;706 max-height: 300px; 705 707 } 706 708 707 #available-menu-items #available-menu-items-search .accordion-section-content { 709 /* IE8 rounding: looks like the accordion container is 1px taller */ 710 .ie8 #available-menu-items .accordion-container { 711 line-height: 1.3846; 712 } 713 714 /* IE 8 doesn't recognize border-box on elements with min/max-width or min/max-height */ 715 .ie8 #available-menu-items .accordion-section-content { 716 padding: 0 15px; 717 } 718 719 /* needed for JS calculation just on the actual accordions */ 720 #available-menu-items .accordion-container .accordion-section-content { 721 -webkit-box-sizing: border-box; 722 -moz-box-sizing: border-box; 723 box-sizing: border-box; 724 } 725 726 #available-menu-items-search .accordion-section-content { 708 727 position: absolute; 709 left: 1px;728 left: 0; 710 729 top: 60px; /* below title div / search input */ 711 730 bottom: 0px; /* 100% height that still triggers lazy load */ 731 width: 100%; 712 732 max-height: none; 713 width: 270px; 733 min-height: 120px; 734 margin: 0; 735 padding: 1px 15px 15px; 736 -webkit-box-sizing: border-box; 737 -moz-box-sizing: border-box; 738 box-sizing: border-box; 714 739 } 715 740 716 741 #available-menu-items .menu-item-tpl { … … 808 833 } 809 834 810 835 #available-menu-items .accordion-section-title.loading .spinner, 811 #available-menu-items-search.loading . accordion-section-title .spinner {836 #available-menu-items-search.loading .spinner { 812 837 visibility: visible; 813 838 margin: 0 20px; 814 839 } … … 858 883 } 859 884 860 885 #available-menu-items-search input { 886 width: 100%; 887 margin: 13px 0; 861 888 padding: 6px 10px; 862 width: 100%;863 889 } 864 890 865 #available-menu-items-search .accordion-section-title {866 padding: 12px 15px;867 -webkit-box-sizing: border-box;868 -moz-box-sizing: border-box;869 box-sizing: border-box;870 }871 872 #available-menu-items-search .accordion-section-title:after {873 display: none;874 }875 876 891 #available-menu-items-search .accordion-section-content:empty { 877 892 min-height: 0; 878 893 padding: 0; 879 894 } 880 895 881 #available-menu-items-search.loading .accordion-section-content div{882 opacity: . 5;896 #available-menu-items-search.loading .accordion-section-content { 897 opacity: .25; 883 898 } 884 899 885 #available-menu-items-search.loading.loading-more .accordion-section-content div{900 #available-menu-items-search.loading.loading-more .accordion-section-content { 886 901 opacity: 1; 887 902 } 888 903 … … 1036 1051 display: none; 1037 1052 } 1038 1053 1054 @media screen and ( max-width: 782px ) { 1055 #available-menu-items #available-menu-items-search .accordion-section-content { 1056 top: 63px; 1057 } 1058 } 1059 1039 1060 @media screen and ( max-width: 640px ) { 1040 1061 body.adding-menu-items div#available-menu-items { 1041 1062 top: 46px; … … 1074 1095 white-space: nowrap; 1075 1096 text-overflow: ellipsis; 1076 1097 } 1098 1099 #available-menu-items-search .spinner, 1100 #available-menu-items-search .clear-results { 1101 top: 21px; 1102 } 1077 1103 } -
src/wp-admin/customize.php
144 144 <span class="preview-notice"><?php 145 145 echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name' ) . '</strong>' ); 146 146 ?></span> 147 <button class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>147 <button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button> 148 148 </div> 149 149 <div class="customize-panel-description"><?php 150 150 _e( 'The Customizer allows you to preview changes to your site before publishing them. You can also navigate to different pages on your site to preview them.' ); -
src/wp-admin/js/customize-controls.js
1140 1140 var meta, panel = this; 1141 1141 1142 1142 // Expand/Collapse accordion sections on click. 1143 panel.container.find( '.accordion-section-title' ). on( 'click keydown', function( event ) {1143 panel.container.find( '.accordion-section-title' ).not( '.customize-info .accordion-section-title' ).on( 'click keydown', function( event ) { 1144 1144 if ( api.utils.isKeydownButNotEnterEvent( event ) ) { 1145 1145 return; 1146 1146 } … … 1165 1165 1166 1166 meta = panel.container.find( '.panel-meta:first' ); 1167 1167 1168 meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) { 1169 if ( api.utils.isKeydownButNotEnterEvent( event ) ) { 1170 return; 1171 } 1172 event.preventDefault(); // Keep this AFTER the key filter above 1168 meta.find( '.customize-help-toggle' ).on( 'click', function() { 1173 1169 1174 1170 meta = panel.container.find( '.panel-meta' ); 1175 1171 if ( meta.hasClass( 'cannot-expand' ) ) { … … 1247 1243 overlay = section.closest( '.wp-full-overlay' ), 1248 1244 container = section.closest( '.wp-full-overlay-sidebar-content' ), 1249 1245 siblings = container.find( '.open' ), 1250 topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ), 1246 // Get the accordion sections but not the Active Theme section, we don't need to set tabindex there. 1247 topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section:not(.control-section-themes) > .accordion-section-title' ), 1251 1248 backBtn = section.find( '.customize-panel-back' ), 1252 1249 panelTitle = section.find( '.accordion-section-title' ).first(), 1253 1250 content = section.find( '.control-panel-content' ), … … 3085 3082 }); 3086 3083 3087 3084 // Expand/Collapse the main customizer customize info. 3088 $( '.customize-info' ).find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) { 3089 if ( api.utils.isKeydownButNotEnterEvent( event ) ) { 3090 return; 3091 } 3092 event.preventDefault(); // Keep this AFTER the key filter above 3085 $( '.customize-info' ).find( '.customize-help-toggle' ).on( 'click', function() { 3093 3086 3094 3087 var section = $( this ).closest( '.accordion-section' ), 3095 3088 content = section.find( '.customize-panel-description:first' ); -
src/wp-admin/js/customize-nav-menus.js
138 138 } ); 139 139 140 140 // Clear the search results. 141 $( '.clear-results' ).on( 'click keydown', function( event ) { 142 if ( event.type === 'keydown' && ( 13 !== event.which && 32 !== event.which ) ) { // "return" or "space" keys only 143 return; 144 } 145 146 event.preventDefault(); 147 141 $( '.clear-results' ).on( 'click', function( event ) { 148 142 $( '#menu-items-search' ).val( '' ).focus(); 149 event.target.value = '';150 143 self.search( event ); 151 144 } ); 152 145 … … 202 195 $otherSections.fadeOut( 100 ); 203 196 $searchSection.find( '.accordion-section-content' ).slideDown( 'fast' ); 204 197 $searchSection.addClass( 'open' ); 205 $searchSection.find( '.clear-results' ) 206 .prop( 'tabIndex', 0 ) 207 .addClass( 'is-visible' ); 198 $searchSection.find( '.clear-results' ).addClass( 'is-visible' ); 208 199 } else if ( '' === event.target.value ) { 209 200 $searchSection.removeClass( 'open' ); 210 201 $otherSections.show(); 211 $searchSection.find( '.clear-results' ) 212 .prop( 'tabIndex', -1 )213 .removeClass( 'is-visible');202 $searchSection.find( '.clear-results' ).removeClass( 'is-visible' ); 203 // Adjust other sections height after the search closes. 204 this.itemSectionHeight(); 214 205 } 215 206 216 207 this.searchTerm = event.target.value; 217 208 this.pages.search = 1; 218 209 this.doSearch( 1 ); … … 360 351 }); 361 352 }, 362 353 363 // Adjust the height of each section of items to fit the screen. 354 /* 355 Adjust the height of each accordion section to don't exceed the screen height. 356 The accordion sections content have a max-height of 300px set with CSS, this calculation will set a 357 smaller max-height value when there's not enough vertical space. 358 Accordion sections must have `box-sizing: border-box` set with CSS for a correct calculation. 359 @todo Consider to run this also when the window gets resized. 360 */ 364 361 itemSectionHeight: function() { 365 var sections, totalHeight, accordionHeight, diff; 366 totalHeight = window.innerHeight; 367 sections = this.$el.find( '.accordion-section-content' ); 368 accordionHeight = 46 * ( 1 + sections.length ) - 16; // Magic numbers. 369 diff = totalHeight - accordionHeight; 370 if ( 120 < diff && 290 > diff ) { 362 var totalHeight = window.innerHeight || document.documentElement.clientHeight, 363 accordion = this.$el.find( '.accordion-container' ), 364 sections = accordion.find( '.accordion-section-content' ), 365 visibleSection = sections.filter( ':visible' ), 366 searchHeight = this.$el.find( '#available-menu-items-search' ).outerHeight(), 367 accordionHeight, 368 diff; 369 370 /* 371 Get the accordion sections total height when closed. 372 If there is an open accordion section, subtract its content height from the accordion height. 373 */ 374 accordionHeight = visibleSection.length ? accordion.outerHeight() - visibleSection.outerHeight() : accordion.outerHeight(); 375 // Get the available vertical space. 376 diff = totalHeight - accordionHeight - searchHeight; 377 378 // Don't set a max-height if the available vertical space is under 120px or over 300px. 379 if ( 120 < diff && 300 >= diff ) { 380 // Since the accordion sections content have vertical padding we're using `box-sizing: border-box` in the CSS. 371 381 sections.css( 'max-height', diff ); 382 } else { 383 sections.css( 'max-height', '' ); 372 384 } 373 385 }, 374 386 … … 538 550 content = panelMeta.find( '.customize-panel-description' ), 539 551 options = $( '#screen-options-wrap' ), 540 552 button = panelMeta.find( '.customize-screen-options-toggle' ); 541 button.on( 'click', function() { 553 button.on( 'click keydown', function( event ) { 554 if ( api.utils.isKeydownButNotEnterEvent( event ) ) { 555 return; 556 } 557 event.preventDefault(); 558 542 559 // Hide description 543 560 if ( content.not( ':hidden' ) ) { 544 561 content.slideUp( 'fast' ); … … 561 578 } ); 562 579 563 580 // Help toggle 564 help.on( 'click', function() { 581 help.on( 'click keydown', function( event ) { 582 if ( api.utils.isKeydownButNotEnterEvent( event ) ) { 583 return; 584 } 585 event.preventDefault(); 586 565 587 if ( 'true' === button.attr( 'aria-expanded' ) ) { 566 588 button.attr( 'aria-expanded', 'false' ); 567 589 help.attr( 'aria-expanded', 'true' ); -
src/wp-includes/class-wp-customize-nav-menus.php
697 697 */ 698 698 public function available_items_template() { 699 699 ?> 700 <div id="available-menu-items" class="accordion-container">700 <div id="available-menu-items"> 701 701 <div class="customize-section-title"> 702 702 <button type="button" class="customize-section-back" tabindex="-1"> 703 703 <span class="screen-reader-text"><?php _e( 'Back' ); ?></span> … … 713 713 </h3> 714 714 </div> 715 715 <div id="available-menu-items-search" class="accordion-section cannot-expand"> 716 <div class="accordion-section-title"> 717 <label class="screen-reader-text" for="menu-items-search"><?php _e( 'Search Menu Items' ); ?></label> 718 <input type="text" id="menu-items-search" placeholder="<?php esc_attr_e( 'Search menu items…' ) ?>" aria-describedby="menu-items-search-desc" /> 719 <p class="screen-reader-text" id="menu-items-search-desc"><?php _e( 'The search results will be updated as you type.' ); ?></p> 720 <span class="spinner"></span> 721 <span class="clear-results"><span class="screen-reader-text"><?php _e( 'Clear Results' ); ?></span></span> 722 </div> 716 <label class="screen-reader-text" for="menu-items-search"><?php _e( 'Search Menu Items' ); ?></label> 717 <input type="text" id="menu-items-search" placeholder="<?php esc_attr_e( 'Search menu items…' ) ?>" aria-describedby="menu-items-search-desc" /> 718 <p class="screen-reader-text" id="menu-items-search-desc"><?php _e( 'The search results will be updated as you type.' ); ?></p> 719 <span class="spinner"></span> 720 <button type="button" class="clear-results not-a-button"><span class="screen-reader-text"><?php _e( 'Clear Results' ); ?></span></button> 723 721 <ul class="accordion-section-content" data-type="search"></ul> 724 722 </div> 725 <div id="new-custom-menu-item" class="accordion-section"> 726 <h4 class="accordion-section-title" role="presentation"> 727 <?php _e( 'Custom Links' ); ?> 728 <button type="button" class="not-a-button" aria-expanded="false"> 729 <span class="screen-reader-text"><?php _e( 'Toggle section: Custom Links' ); ?></span> 730 <span class="toggle-indicator" aria-hidden="true"></span> 731 </button> 732 </h4> 733 <div class="accordion-section-content"> 734 <input type="hidden" value="custom" id="custom-menu-item-type" name="menu-item[-1][menu-item-type]" /> 735 <p id="menu-item-url-wrap"> 736 <label class="howto" for="custom-menu-item-url"> 737 <span><?php _e( 'URL' ); ?></span> 738 <input id="custom-menu-item-url" name="menu-item[-1][menu-item-url]" type="text" class="code menu-item-textbox" value="http://"> 739 </label> 740 </p> 741 <p id="menu-item-name-wrap"> 742 <label class="howto" for="custom-menu-item-name"> 743 <span><?php _e( 'Link Text' ); ?></span> 744 <input id="custom-menu-item-name" name="menu-item[-1][menu-item-title]" type="text" class="regular-text menu-item-textbox"> 745 </label> 746 </p> 747 <p class="button-controls"> 748 <span class="add-to-menu"> 749 <input type="submit" class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e( 'Add to Menu' ); ?>" name="add-custom-menu-item" id="custom-menu-item-submit"> 750 <span class="spinner"></span> 751 </span> 752 </p> 753 </div> 754 </div> 755 <?php 756 // Containers for per-post-type item browsing; items added with JS. 757 foreach ( $this->available_item_types() as $available_item_type ) { 758 $id = sprintf( 'available-menu-items-%s-%s', $available_item_type['type'], $available_item_type['object'] ); 759 ?> 760 <div id="<?php echo esc_attr( $id ); ?>" class="accordion-section"> 723 <div class="accordion-container"> 724 <div id="new-custom-menu-item" class="accordion-section"> 761 725 <h4 class="accordion-section-title" role="presentation"> 762 <?php echo esc_html( $available_item_type['title'] ); ?> 763 <span class="spinner"></span> 764 <span class="no-items"><?php _e( 'No items' ); ?></span> 726 <?php _e( 'Custom Links' ); ?> 765 727 <button type="button" class="not-a-button" aria-expanded="false"> 766 <span class="screen-reader-text"><?php 767 /* translators: %s: Title of a section with menu items */ 768 printf( __( 'Toggle section: %s' ), esc_html( $available_item_type['title'] ) ); ?></span> 728 <span class="screen-reader-text"><?php _e( 'Toggle section: Custom Links' ); ?></span> 769 729 <span class="toggle-indicator" aria-hidden="true"></span> 770 730 </button> 771 731 </h4> 772 <ul class="accordion-section-content" data-type="<?php echo esc_attr( $available_item_type['type'] ); ?>" data-object="<?php echo esc_attr( $available_item_type['object'] ); ?>"></ul> 732 <div class="accordion-section-content"> 733 <input type="hidden" value="custom" id="custom-menu-item-type" name="menu-item[-1][menu-item-type]" /> 734 <p id="menu-item-url-wrap"> 735 <label class="howto" for="custom-menu-item-url"> 736 <span><?php _e( 'URL' ); ?></span> 737 <input id="custom-menu-item-url" name="menu-item[-1][menu-item-url]" type="text" class="code menu-item-textbox" value="http://"> 738 </label> 739 </p> 740 <p id="menu-item-name-wrap"> 741 <label class="howto" for="custom-menu-item-name"> 742 <span><?php _e( 'Link Text' ); ?></span> 743 <input id="custom-menu-item-name" name="menu-item[-1][menu-item-title]" type="text" class="regular-text menu-item-textbox"> 744 </label> 745 </p> 746 <p class="button-controls"> 747 <span class="add-to-menu"> 748 <input type="submit" class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e( 'Add to Menu' ); ?>" name="add-custom-menu-item" id="custom-menu-item-submit"> 749 <span class="spinner"></span> 750 </span> 751 </p> 752 </div> 773 753 </div> 774 754 <?php 775 } 776 ?> 755 // Containers for per-post-type item browsing; items added with JS. 756 foreach ( $this->available_item_types() as $available_item_type ) { 757 $id = sprintf( 'available-menu-items-%s-%s', $available_item_type['type'], $available_item_type['object'] ); 758 ?> 759 <div id="<?php echo esc_attr( $id ); ?>" class="accordion-section"> 760 <h4 class="accordion-section-title" role="presentation"> 761 <?php echo esc_html( $available_item_type['title'] ); ?> 762 <span class="spinner"></span> 763 <span class="no-items"><?php _e( 'No items' ); ?></span> 764 <button type="button" class="not-a-button" aria-expanded="false"> 765 <span class="screen-reader-text"><?php 766 /* translators: %s: Title of a section with menu items */ 767 printf( __( 'Toggle section: %s' ), esc_html( $available_item_type['title'] ) ); ?></span> 768 <span class="toggle-indicator" aria-hidden="true"></span> 769 </button> 770 </h4> 771 <ul class="accordion-section-content" data-type="<?php echo esc_attr( $available_item_type['type'] ); ?>" data-object="<?php echo esc_attr( $available_item_type['object'] ); ?>"></ul> 772 </div> 773 <?php 774 } 775 ?> 776 </div><!-- .accordion-container --> 777 777 </div><!-- #available-menu-items --> 778 778 <?php 779 779 } -
src/wp-includes/class-wp-customize-panel.php
372 372 /* translators: %s is the site/panel title in the Customizer */ 373 373 echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title">{{ data.title }}</strong>' ); 374 374 ?></span> 375 <button class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>375 <button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button> 376 376 </div> 377 377 <# if ( data.description ) { #> 378 378 <div class="description customize-panel-description">