Ticket #33184: 33184.5.patch
| File 33184.5.patch, 17.0 KB (added by , 10 years ago) |
|---|
-
src/wp-admin/css/customize-nav-menus.css
605 605 overflow-y: hidden; /* avoid scrollbar jitter with animating heights */ 606 606 } 607 607 608 #available-menu-items #available-menu-items-search.open { 608 #available-menu-items-search { 609 border-bottom: 1px solid #dfdfdf; 610 padding: 0 15px; 611 background: #eee; 612 } 613 614 #available-menu-items-search.open { 609 615 height: 100%; 610 616 border-bottom: none; 611 617 } … … 616 622 background: #fff; 617 623 } 618 624 619 #available-menu-items .open .accordion-section-title, 620 #available-menu-items #available-menu-items-search .accordion-section-title { 625 #available-menu-items .open .accordion-section-title { 621 626 background: #eee; 622 627 } 623 628 … … 690 695 display: none; 691 696 } 692 697 693 #available-menu-items-search.cannot-expand .accordion-section-title .spinner {694 display: block;695 }696 697 698 #available-menu-items .cannot-expand .accordion-section-title .no-items { 698 699 display: block; 699 700 color: #777; … … 709 710 max-height: 290px; 710 711 } 711 712 712 #available-menu-items #available-menu-items-search .accordion-section-content {713 #available-menu-items-search .accordion-section-content { 713 714 position: absolute; 714 left: 1px;715 left: 0; 715 716 top: 60px; /* below title div / search input */ 716 717 bottom: 0px; /* 100% height that still triggers lazy load */ 718 width: 270px; 717 719 max-height: none; 718 width: 270px; 720 min-height: 120px; 721 margin: 0; 722 padding: 1px 15px 15px; 719 723 } 720 724 721 725 #available-menu-items .menu-item-tpl { … … 813 817 } 814 818 815 819 #available-menu-items .accordion-section-title.loading .spinner, 816 #available-menu-items-search.loading . accordion-section-title .spinner {820 #available-menu-items-search.loading .spinner { 817 821 visibility: visible; 818 822 margin: 0 20px; 819 823 } … … 863 867 } 864 868 865 869 #available-menu-items-search input { 870 width: 100%; 871 margin: 13px 0; 866 872 padding: 6px 10px; 867 width: 100%;868 873 } 869 874 870 #available-menu-items-search .accordion-section-title {871 padding: 12px 15px;872 -webkit-box-sizing: border-box;873 -moz-box-sizing: border-box;874 box-sizing: border-box;875 }876 877 #available-menu-items-search .accordion-section-title:after {878 display: none;879 }880 881 875 #available-menu-items-search .accordion-section-content:empty { 882 876 min-height: 0; 883 877 padding: 0; 884 878 } 885 879 886 #available-menu-items-search.loading .accordion-section-content div{887 opacity: . 5;880 #available-menu-items-search.loading .accordion-section-content { 881 opacity: .25; 888 882 } 889 883 890 #available-menu-items-search.loading.loading-more .accordion-section-content div{884 #available-menu-items-search.loading.loading-more .accordion-section-content { 891 885 opacity: 1; 892 886 } 893 887 … … 1037 1031 margin-top: 12px; 1038 1032 } 1039 1033 1040 #available-menu-items .customize-section-title {1041 display: none;1042 }1043 1044 1034 @media screen and ( max-width: 640px ) { 1045 1035 body.adding-menu-items div#available-menu-items { 1046 1036 top: 46px; -
src/wp-admin/customize.php
152 152 <span class="preview-notice"><?php 153 153 echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name' ) . '</strong>' ); 154 154 ?></span> 155 <button class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>155 <button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button> 156 156 </div> 157 157 <div class="customize-panel-description"><?php 158 158 _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
1124 1124 var meta, panel = this; 1125 1125 1126 1126 // Expand/Collapse accordion sections on click. 1127 panel.container.find( '.accordion-section-title' ). on( 'click keydown', function( event ) {1127 panel.container.find( '.accordion-section-title' ).not( '.customize-info .accordion-section-title' ).on( 'click keydown', function( event ) { 1128 1128 if ( api.utils.isKeydownButNotEnterEvent( event ) ) { 1129 1129 return; 1130 1130 } … … 1149 1149 1150 1150 meta = panel.container.find( '.panel-meta:first' ); 1151 1151 1152 meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) { 1153 if ( api.utils.isKeydownButNotEnterEvent( event ) ) { 1154 return; 1155 } 1156 event.preventDefault(); // Keep this AFTER the key filter above 1152 meta.find( '.customize-help-toggle' ).on( 'click', function() { 1157 1153 1158 1154 meta = panel.container.find( '.panel-meta' ); 1159 1155 if ( meta.hasClass( 'cannot-expand' ) ) { … … 1231 1227 overlay = section.closest( '.wp-full-overlay' ), 1232 1228 container = section.closest( '.wp-full-overlay-sidebar-content' ), 1233 1229 siblings = container.find( '.open' ), 1234 topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ), 1230 // Get the accordion sections but not the Active Theme section, we don't need to set tabindex there. 1231 topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section:not(.control-section-themes) > .accordion-section-title' ), 1235 1232 backBtn = section.find( '.customize-panel-back' ), 1236 1233 panelTitle = section.find( '.accordion-section-title' ).first(), 1237 1234 content = section.find( '.control-panel-content' ); … … 3059 3056 }); 3060 3057 3061 3058 // Expand/Collapse the main customizer customize info. 3062 $( '.customize-info' ).find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) { 3063 if ( api.utils.isKeydownButNotEnterEvent( event ) ) { 3064 return; 3065 } 3066 event.preventDefault(); // Keep this AFTER the key filter above 3059 $( '.customize-info' ).find( '.customize-help-toggle' ).on( 'click', function() { 3067 3060 3068 3061 var section = $( this ).closest( '.accordion-section' ), 3069 3062 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' ); 214 203 } 215 204 216 205 this.searchTerm = event.target.value; 217 206 this.pages.search = 1; 218 207 this.doSearch( 1 ); … … 362 351 363 352 // Adjust the height of each section of items to fit the screen. 364 353 itemSectionHeight: function() { 365 var sections, totalHeight, accordionHeight, diff;354 var sections, totalHeight, accordionHeight, searchHeight, diff; 366 355 totalHeight = window.innerHeight; 367 sections = this.$el.find( '.accordion-section-content' ); 356 searchHeight = this.$el.find( '#available-menu-items-search' ).outerHeight(); 357 // Get only the actual accordions, exclude the search div. 358 sections = this.$el.find( '.accordion-container .accordion-section-content' ); 368 359 accordionHeight = 46 * ( 1 + sections.length ) - 16; // Magic numbers. 369 diff = totalHeight - accordionHeight ;360 diff = totalHeight - accordionHeight - searchHeight; 370 361 if ( 120 < diff && 290 > diff ) { 371 362 sections.css( 'max-height', diff ); 372 363 } -
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"> 701 <div class="customize-section-title"> 702 <button type="button" class="customize-section-back" tabindex="-1"> 703 <span class="screen-reader-text"><?php _e( 'Back' ); ?></span> 704 </button> 705 <h3> 706 <span class="customize-action"> 707 <?php 708 /* translators: ▸ is the unicode right-pointing triangle, and %s is the section title in the Customizer */ 709 printf( __( 'Customizing ▸ %s' ), esc_html( $this->manager->get_panel( 'nav_menus' )->title ) ); 710 ?> 711 </span> 712 <?php _e( 'Add Menu Items' ); ?> 713 </h3> 714 </div> 700 <div id="available-menu-items"> 715 701 <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> 702 <label class="screen-reader-text" for="menu-items-search"><?php _e( 'Search Menu Items' ); ?></label> 703 <input type="text" id="menu-items-search" placeholder="<?php esc_attr_e( 'Search menu items…' ) ?>" aria-describedby="menu-items-search-desc" /> 704 <p class="screen-reader-text" id="menu-items-search-desc"><?php _e( 'The search results will be updated as you type.' ); ?></p> 705 <span class="spinner"></span> 706 <button type="button" class="clear-results not-a-button"><span class="screen-reader-text"><?php _e( 'Clear Results' ); ?></span></button> 723 707 <ul class="accordion-section-content" data-type="search"></ul> 724 708 </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"> 709 <div class="accordion-container"> 710 <div id="new-custom-menu-item" class="accordion-section"> 761 711 <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> 712 <?php _e( 'Custom Links' ); ?> 765 713 <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> 714 <span class="screen-reader-text"><?php _e( 'Toggle section: Custom Links' ); ?></span> 769 715 <span class="toggle-indicator" aria-hidden="true"></span> 770 716 </button> 771 717 </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> 718 <div class="accordion-section-content"> 719 <input type="hidden" value="custom" id="custom-menu-item-type" name="menu-item[-1][menu-item-type]" /> 720 <p id="menu-item-url-wrap"> 721 <label class="howto" for="custom-menu-item-url"> 722 <span><?php _e( 'URL' ); ?></span> 723 <input id="custom-menu-item-url" name="menu-item[-1][menu-item-url]" type="text" class="code menu-item-textbox" value="http://"> 724 </label> 725 </p> 726 <p id="menu-item-name-wrap"> 727 <label class="howto" for="custom-menu-item-name"> 728 <span><?php _e( 'Link Text' ); ?></span> 729 <input id="custom-menu-item-name" name="menu-item[-1][menu-item-title]" type="text" class="regular-text menu-item-textbox"> 730 </label> 731 </p> 732 <p class="button-controls"> 733 <span class="add-to-menu"> 734 <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"> 735 <span class="spinner"></span> 736 </span> 737 </p> 738 </div> 773 739 </div> 774 740 <?php 775 } 776 ?> 741 // Containers for per-post-type item browsing; items added with JS. 742 foreach ( $this->available_item_types() as $available_item_type ) { 743 $id = sprintf( 'available-menu-items-%s-%s', $available_item_type['type'], $available_item_type['object'] ); 744 ?> 745 <div id="<?php echo esc_attr( $id ); ?>" class="accordion-section"> 746 <h4 class="accordion-section-title" role="presentation"> 747 <?php echo esc_html( $available_item_type['title'] ); ?> 748 <span class="spinner"></span> 749 <span class="no-items"><?php _e( 'No items' ); ?></span> 750 <button type="button" class="not-a-button" aria-expanded="false"> 751 <span class="screen-reader-text"><?php 752 /* translators: %s: Title of a section with menu items */ 753 printf( __( 'Toggle section: %s' ), esc_html( $available_item_type['title'] ) ); ?></span> 754 <span class="toggle-indicator" aria-hidden="true"></span> 755 </button> 756 </h4> 757 <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> 758 </div> 759 <?php 760 } 761 ?> 762 </div><!-- .accordion-container --> 777 763 </div><!-- #available-menu-items --> 778 764 <?php 779 765 } -
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">