Index: src/wp-admin/css/customize-nav-menus.css =================================================================== --- src/wp-admin/css/customize-nav-menus.css (revision 33597) +++ src/wp-admin/css/customize-nav-menus.css (working copy) @@ -1,4 +1,4 @@ -#accordion-section-menu_locations { + #accordion-section-menu_locations { position: relative; margin-bottom: 15px; } @@ -605,7 +605,14 @@ overflow-y: hidden; /* avoid scrollbar jitter with animating heights */ } -#available-menu-items #available-menu-items-search.open { +#available-menu-items-search { + position: relative; + border-bottom: 1px solid #dfdfdf; + padding: 0 15px; + background: #eee; +} + +#available-menu-items-search.open { height: 100%; border-bottom: none; } @@ -616,8 +623,7 @@ background: #fff; } -#available-menu-items .open .accordion-section-title, -#available-menu-items #available-menu-items-search .accordion-section-title { +#available-menu-items .open .accordion-section-title { background: #eee; } @@ -690,10 +696,6 @@ display: none; } -#available-menu-items-search.cannot-expand .accordion-section-title .spinner { - display: block; -} - #available-menu-items .cannot-expand .accordion-section-title .no-items { display: block; color: #777; @@ -706,16 +708,39 @@ padding: 1px 15px 15px 15px; margin: 0; min-height: 120px; - max-height: 290px; + max-height: 300px; } -#available-menu-items #available-menu-items-search .accordion-section-content { +/* IE8 rounding: looks like the accordion container is 1px taller */ +.ie8 #available-menu-items .accordion-container { + line-height: 1.3846; +} + +/* IE 8 doesn't recognize border-box on elements with min/max-width or min/max-height */ +.ie8 #available-menu-items .accordion-section-content { + padding: 0 15px; +} + +/* needed for JS calculation just on the actual accordions */ +#available-menu-items .accordion-container .accordion-section-content { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +#available-menu-items-search .accordion-section-content { position: absolute; - left: 1px; + left: 0; top: 60px; /* below title div / search input */ bottom: 0px; /* 100% height that still triggers lazy load */ + width: 100%; max-height: none; - width: 270px; + min-height: 120px; + margin: 0; + padding: 1px 15px 15px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } #available-menu-items .menu-item-tpl { @@ -813,7 +838,7 @@ } #available-menu-items .accordion-section-title.loading .spinner, -#available-menu-items-search.loading .accordion-section-title .spinner { +#available-menu-items-search.loading .spinner { visibility: visible; margin: 0 20px; } @@ -863,31 +888,21 @@ } #available-menu-items-search input { + width: 100%; + margin: 13px 0; padding: 6px 10px; - width: 100%; } -#available-menu-items-search .accordion-section-title { - padding: 12px 15px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -#available-menu-items-search .accordion-section-title:after { - display: none; -} - #available-menu-items-search .accordion-section-content:empty { min-height: 0; padding: 0; } -#available-menu-items-search.loading .accordion-section-content div { - opacity: .5; +#available-menu-items-search.loading .accordion-section-content { + opacity: .25; } -#available-menu-items-search.loading.loading-more .accordion-section-content div { +#available-menu-items-search.loading.loading-more .accordion-section-content { opacity: 1; } @@ -1079,4 +1094,9 @@ white-space: nowrap; text-overflow: ellipsis; } + + #available-menu-items-search .spinner, + #available-menu-items-search .clear-results { + top: 21px; + } } Index: src/wp-admin/customize.php =================================================================== --- src/wp-admin/customize.php (revision 33597) +++ src/wp-admin/customize.php (working copy) @@ -152,7 +152,7 @@ ' . get_bloginfo( 'name' ) . '' ); ?> - +
.accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) { - if ( api.utils.isKeydownButNotEnterEvent( event ) ) { - return; - } - event.preventDefault(); // Keep this AFTER the key filter above + meta.find( '.customize-help-toggle' ).on( 'click', function() { meta = panel.container.find( '.panel-meta' ); if ( meta.hasClass( 'cannot-expand' ) ) { @@ -1232,7 +1228,8 @@ overlay = section.closest( '.wp-full-overlay' ), container = section.closest( '.wp-full-overlay-sidebar-content' ), siblings = container.find( '.open' ), - topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ), + // Get the accordion sections but not the Active Theme section, we don't need to set tabindex there. + topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section:not(.control-section-themes) > .accordion-section-title' ), backBtn = section.find( '.customize-panel-back' ), panelTitle = section.find( '.accordion-section-title' ).first(), content = section.find( '.control-panel-content' ); @@ -3060,11 +3057,7 @@ }); // Expand/Collapse the main customizer customize info. - $( '.customize-info' ).find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) { - if ( api.utils.isKeydownButNotEnterEvent( event ) ) { - return; - } - event.preventDefault(); // Keep this AFTER the key filter above + $( '.customize-info' ).find( '.customize-help-toggle' ).on( 'click', function() { var section = $( this ).closest( '.accordion-section' ), content = section.find( '.customize-panel-description:first' ); Index: src/wp-admin/js/customize-nav-menus.js =================================================================== --- src/wp-admin/js/customize-nav-menus.js (revision 33597) +++ src/wp-admin/js/customize-nav-menus.js (working copy) @@ -138,15 +138,8 @@ } ); // Clear the search results. - $( '.clear-results' ).on( 'click keydown', function( event ) { - if ( event.type === 'keydown' && ( 13 !== event.which && 32 !== event.which ) ) { // "return" or "space" keys only - return; - } - - event.preventDefault(); - + $( '.clear-results' ).on( 'click', function( event ) { $( '#menu-items-search' ).val( '' ).focus(); - event.target.value = ''; self.search( event ); } ); @@ -202,17 +195,15 @@ $otherSections.fadeOut( 100 ); $searchSection.find( '.accordion-section-content' ).slideDown( 'fast' ); $searchSection.addClass( 'open' ); - $searchSection.find( '.clear-results' ) - .prop( 'tabIndex', 0 ) - .addClass( 'is-visible' ); + $searchSection.find( '.clear-results' ).addClass( 'is-visible' ); } else if ( '' === event.target.value ) { $searchSection.removeClass( 'open' ); $otherSections.show(); - $searchSection.find( '.clear-results' ) - .prop( 'tabIndex', -1 ) - .removeClass( 'is-visible' ); + $searchSection.find( '.clear-results' ).removeClass( 'is-visible' ); + // Adjust other sections height after the search closes. + this.itemSectionHeight(); } - + this.searchTerm = event.target.value; this.pages.search = 1; this.doSearch( 1 ); @@ -360,15 +351,36 @@ }); }, - // Adjust the height of each section of items to fit the screen. + /* + Adjust the height of each accordion section to don't exceed the screen height. + The accordion sections content have a max-height of 300px set with CSS, this calculation will set a + smaller max-height value when there's not enough vertical space. + Accordion sections must have `box-sizing: border-box` set with CSS for a correct calculation. + @todo Consider to run this also when the window gets resized. + */ itemSectionHeight: function() { - var sections, totalHeight, accordionHeight, diff; - totalHeight = window.innerHeight; - sections = this.$el.find( '.accordion-section-content' ); - accordionHeight = 46 * ( 1 + sections.length ) - 16; // Magic numbers. - diff = totalHeight - accordionHeight; - if ( 120 < diff && 290 > diff ) { + var totalHeight = window.innerHeight || document.documentElement.clientHeight, + accordion = this.$el.find( '.accordion-container' ), + sections = accordion.find( '.accordion-section-content' ), + visibleSection = sections.filter( ':visible' ), + searchHeight = this.$el.find( '#available-menu-items-search' ).outerHeight(), + accordionHeight, + diff; + + /* + Get the accordion sections total height when closed. + If there is an open accordion section, subtract its content height from the accordion height. + */ + accordionHeight = visibleSection.length ? accordion.outerHeight() - visibleSection.outerHeight() : accordion.outerHeight(); + // Get the available vertical space. + diff = totalHeight - accordionHeight - searchHeight; + + // Don't set a max-height if the available vertical space is under 120px or over 300px. + if ( 120 < diff && 300 >= diff ) { + // Since the accordion sections content have vertical padding we're using `box-sizing: border-box` in the CSS. sections.css( 'max-height', diff ); + } else { + sections.css( 'max-height', '' ); } }, Index: src/wp-includes/class-wp-customize-nav-menus.php =================================================================== --- src/wp-includes/class-wp-customize-nav-menus.php (revision 33597) +++ src/wp-includes/class-wp-customize-nav-menus.php (working copy) @@ -697,7 +697,7 @@ */ public function available_items_template() { ?> -
+
-
- -
- - - -

- - - - -

-
-
- available_item_types() as $available_item_type ) { - $id = sprintf( 'available-menu-items-%s-%s', $available_item_type['type'], $available_item_type['object'] ); - ?> -
+
+
-
    +
    + + + +

    + + + + +

    +
    + // Containers for per-post-type item browsing; items added with JS. + foreach ( $this->available_item_types() as $available_item_type ) { + $id = sprintf( 'available-menu-items-%s-%s', $available_item_type['type'], $available_item_type['object'] ); + ?> +
    + +
      +
      + +
      {{ data.title }}' ); ?> - +
      <# if ( data.description ) { #>