Changeset 24734

Timestamp:

07/18/2013 05:42:53 PM (11 years ago)

Author:

markjaquith

Message:

Fixes and tweaks for the metabox accordion.

• Fixed hover issues in Customizer.
• Toned down the default active/hover style (as it is normally not the top level menu, and should not be so prominent).
• Allow the active section to be closed.
• Other misc fixes.

Props ocean90, helen. Fixes #23449.

Location:

trunk/wp-admin

Files:

• css/customize-controls.css (modified) (1 diff)
• css/wp-admin.css (modified) (2 diffs)
• customize.php (modified) (3 diffs)
• includes/template.php (modified) (2 diffs)
• js/accordion.js (modified) (2 diffs)

trunk/wp-admin/css/customize-controls.css

@@ -120 +120 @@
     width: 100%;
     height: 100%;
+}
+
+#customize-theme-controls .accordion-section-title:hover:after,
+#customize-theme-controls .accordion-section-title:focus:after {
+    border-color: #eee transparent;
+}
+
+#customize-theme-controls .control-section:hover .accordion-section-title,
+#customize-theme-controls .control-section .accordion-section-title:hover,
+#customize-theme-controls .control-section.open .accordion-section-title,
+#customize-theme-controls .control-section .accordion-section-title:focus {
+    color: #fff;
+    text-shadow: 0 -1px 0 #333;
+    background: #808080;
+    background-image: -webkit-gradient(linear, left bottom, left top, from(#6d6d6d), to(#808080));
+    background-image: -webkit-linear-gradient(bottom, #6d6d6d, #808080);
+    background-image:    -moz-linear-gradient(bottom, #6d6d6d, #808080);
+    background-image:      -o-linear-gradient(bottom, #6d6d6d, #808080);
+    background-image: linear-gradient(to top, #6d6d6d, #808080);
+    border-left: 1px solid #808080;
+    border-right: 1px solid #808080;
+}
+
+#customize-theme-controls .control-section.accordion-section:hover,
+#customize-theme-controls .control-section.accordion-section.open {
+    border-top-color: #808080;
+}
+
+#customize-theme-controls .control-section.open .accordion-section-title {
+    border-bottom: 1px solid #6d6d6d;
 }
 

trunk/wp-admin/css/wp-admin.css

@@ -9048 +9048 @@
 .control-section .accordion-section-title {
     padding: 10px 20px;
+    color: #464646;
     font-size: 15px;
     font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
@@ -9064 +9065 @@
 }
 
-.control-section .accordion-section-title:hover:after,
-.control-section .accordion-section-title:focus:after {
-    border-color: #eee transparent;
-}
-
 .js .control-section:hover .accordion-section-title,
 .js .control-section .accordion-section-title:hover,
 .js .control-section.open .accordion-section-title,
 .js .control-section .accordion-section-title:focus {
-    color: #fff;
-    text-shadow: 0 -1px 0 #333;
-    background: #808080;
-    background-image: -webkit-gradient(linear, left bottom, left top, from(#6d6d6d), to(#808080));
-    background-image: -webkit-linear-gradient(bottom, #6d6d6d, #808080);
-    background-image:    -moz-linear-gradient(bottom, #6d6d6d, #808080);
-    background-image:      -o-linear-gradient(bottom, #6d6d6d, #808080);
-    background-image: linear-gradient(to top, #6d6d6d, #808080);
-    border-left: 1px solid #808080;
-    border-right: 1px solid #808080;
-}
-
-.js .control-section.accordion-section:hover,
-.control-section.accordion-section.open {
-    border-top-color: #808080;
+    color: #000;
+    background: #f9f9f9;
+    background-image: -webkit-gradient(linear, left bottom, left top, from(#ececec), to(#f9f9f9));
+    background-image: -webkit-linear-gradient(bottom, #ececec, #f9f9f9);
+    background-image:    -moz-linear-gradient(bottom, #ececec, #f9f9f9);
+    background-image:      -o-linear-gradient(bottom, #ececec, #f9f9f9);
+    background-image: linear-gradient(to top, #ececec, #f9f9f9);
 }
 
 .control-section.open .accordion-section-title {
-    border-bottom: 1px solid #6d6d6d;
+    border-bottom: 1px solid #dfdfdf;
 }
 

trunk/wp-admin/customize.php

@@ -47 +47 @@
 _wp_admin_html_begin();
 
-$body_class = 'wp-core-ui';
+$body_class = 'wp-core-ui js';
 
 if ( wp_is_mobile() ) :
@@ -91 +91 @@
         ?>
 
-        <div class="wp-full-overlay-sidebar-content" tabindex="-1">
-            <div id="customize-info" class="accordion-section<?php if ( $cannot_expand ) echo ' cannot-expand'; ?>">
+        <div class="wp-full-overlay-sidebar-content accordion-container" tabindex="-1">
+            <div id="customize-info" class="accordion-section <?php if ( $cannot_expand ) echo ' cannot-expand'; ?>">
                 <div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Theme Customizer Options' ); ?>" tabindex="0">
                     <span class="preview-notice"><?php
@@ -112 +112 @@
             </div>
 
-            <div id="customize-theme-controls" class="accordion-container"><ul>
+            <div id="customize-theme-controls"><ul>
                 <?php
                 foreach ( $wp_customize->sections() as $section )

trunk/wp-admin/includes/template.php

@@ -1001 +1001 @@
     <?php
     $i = 0;
+    $first_open = false;
     do {
         if ( ! isset( $wp_meta_boxes ) || ! isset( $wp_meta_boxes[$page] ) || ! isset( $wp_meta_boxes[$page][$context] ) )
@@ -1012 +1013 @@
                     $i++;
                     $hidden_class = in_array( $box['id'], $hidden ) ? 'hide-if-js' : '';
+
+                    $open_class = '';
+                    if ( ! $first_open && empty( $hidden_class ) ) {
+                        $first_open = true;
+                        $open_class = 'open';
+                    }
                     ?>
-                    <li class="control-section accordion-section <?php echo $hidden_class; ?> <?php echo esc_attr( $box['id'] ); ?>" id="<?php echo esc_attr( $box['id'] ); ?>">
+                    <li class="control-section accordion-section <?php echo $hidden_class; ?> <?php echo $open_class; ?> <?php echo esc_attr( $box['id'] ); ?>" id="<?php echo esc_attr( $box['id'] ); ?>">
                         <h3 class="accordion-section-title hndle" tabindex="0" title="<?php echo esc_attr( $box['title'] ); ?>"><?php echo esc_html( $box['title'] ); ?></h3>
                         <div class="accordion-section-content <?php postbox_classes( $box['id'], $page ); ?>">

trunk/wp-admin/js/accordion.js

@@ -10 +10 @@
 
             accordionSwitch( $( this ) );
-            accordionCorners();
         });
 
-        // Refresh selected accordion option when screen options are toggled
+        // Re-initialize accordion when screen options are toggled
         $( '.hide-postbox-tog' ).click( function () {
             accordionInit();
@@ -23 +22 @@
         sectionContent   = $( '.accordion-section-content' );
 
-    // Rounded corners
-    function accordionCorners () {
+    function accordionInit () {
+        // Rounded corners
         accordionOptions.removeClass( 'top bottom' );
         accordionOptions.filter( ':visible' ).first().addClass( 'top' );
-        accordionOptions.filter( ':visible' ).last().addClass( 'bottom' ).find( sectionContent ).addClass('bottom');
-    };
-
-    function accordionInit () {
-        accordionSwitch( accordionOptions.filter( ':visible' ).first() );
-        accordionCorners();
+        accordionOptions.filter( ':visible' ).last().addClass( 'bottom' ).find( sectionContent ).addClass( 'bottom' );
     }
 
     function accordionSwitch ( el ) {
         var section = el.closest( '.accordion-section' ),
-            siblings = section.parent().find( '.open' ),
-            content = section.find( sectionContent );
+            siblings = section.closest( '.accordion-container' ).find( '.open' ),
+            content = section.find( sectionContent );
 
         if ( section.hasClass( 'cannot-expand' ) )
             return;
 
-        siblings.removeClass( 'open' );
-        siblings.find( sectionContent ).show().slideUp( 150 );
-        content.toggle( section.hasClass( 'open' ) ).slideToggle( 150 );
-        section.toggleClass( 'open' );
+        if ( section.hasClass( 'open' ) ) {
+            section.toggleClass( 'open' );
+            content.toggle( true ).slideToggle( 150 );
+        } else {
+            siblings.removeClass( 'open' );
+            siblings.find( sectionContent ).show().slideUp( 150 );
+            content.toggle( false ).slideToggle( 150 );
+            section.toggleClass( 'open' );
+        }
+
+        accordionInit();
     }
 
-    // Show the first accordion option by default
+    // Initialize the accordion (currently just corner fixes)
     accordionInit();