Changeset 20106

Timestamp:

03/04/2012 02:06:11 AM (7 years ago)

Author:

koopersmith

Message:

Theme Customizer: Improve form markup. Make the theme title/author a section. Prevent section arrows from blocking clicks. see #19910.

Location:

trunk/wp-includes

Files:

• class-wp-customize-section.php (modified) (1 diff)
• css/customize-controls.dev.css (modified) (3 diffs)
• customize-controls.php (modified) (1 diff)
• js/customize-controls.dev.js (modified) (1 diff)

trunk/wp-includes/class-wp-customize-section.php

@@ -66 +66 @@
         ?>
         <li id="customize-section-<?php echo esc_attr( $this->id ); ?>" class="control-section customize-section">
-            <h3 class="customize-theme-title"><?php echo esc_html( $this->title ); ?></h3>
-            <ul>
+            <h3 class="customize-section-title"><?php echo esc_html( $this->title ); ?></h3>
+            <ul class="customize-section-content">
                 <?php if ( $this->description ) : ?>
                     <li><p class="howto"><?php echo $this->description; ?></p></li>

trunk/wp-includes/css/customize-controls.dev.css

@@ -1 +1 @@
 body {
     overflow: hidden;
-}
-
-.customize-section {
-    border-top: 1px solid #fff;
-    border-bottom: 1px solid #dfdfdf;
-    padding: 15px 20px;
-    margin: 0;
-}
-
-.customize-section:last-child {
-    box-shadow: 0 1px 0 0px #fff;
 }
 
@@ -27 +16 @@
 }
 
+.customize-section {
+    border-top: 1px solid #fff;
+    border-bottom: 1px solid #dfdfdf;
+    margin: 0;
+}
+
+.customize-section:last-child {
+    box-shadow: 0 1px 0 0px #fff;
+}
+
+.customize-section-title {
+    margin: 0;
+    padding: 15px 20px;
+    position: relative;
+
+    cursor: pointer;
+
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+.customize-section-content {
+    display: none;
+    padding: 0 20px 15px;
+}
+
+.customize-section.open .customize-section-content {
+    display: block;
+}
+
+.customize-section-title:after {
+    content: '';
+    width: 0;
+    height: 0;
+    border-color: #ccc transparent transparent transparent;
+    border-style: solid;
+    border-width: 6px;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    z-index: 1;
+}
+
+.customize-section.open .customize-section-title:after {
+    top: 13px;
+    border-color: transparent transparent #ccc transparent;
+}
+
 #customize-controls .theme-name {
     font-size: 16px;
@@ -53 +91 @@
 #customize-theme-controls ul {
     margin: 0;
-}
-
-#customize-theme-controls ul ul {
-    margin-top: 1em;
-    display: none;
-}
-
-#customize-theme-controls ul h3 {
-    margin: 0;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-}
-
-#customize-theme-controls ul h3:hover {
-    cursor: pointer;
-}
-
-#customize-theme-controls ul h3:after {
-    content: '';
-    border-color: #ccc transparent transparent transparent;
-    border-style: solid;
-    border-width: 6px;
-    float: right;
-    margin-top: 5px;
-    margin-left: 5px;
-}
-
- #customize-theme-controls ul h3.open:after {
-    -moz-transform: rotate(180deg);
-    -webkit-transform: rotate(180deg);
-    -o-transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    transform: rotate(180deg);
-    -moz-transform-origin: center 3px;
-    -webkit-transform-origin: center 3px;
-    -o-transform-origin: center 3px;
-    -ms-transform-origin: center 3px;
-    transform-origin: center 3px;
 }
 

trunk/wp-includes/customize-controls.php

@@ -52 +52 @@
 
         <div id="customize-info" class="customize-section">
-            <p>
+            <div class="customize-section-title">
                 <strong class="theme-name"><?php echo $theme['Name']; ?></strong>
                 <span class="theme-by"><?php printf( __( 'By %s' ), $theme['Author'] ); ?></span>
-            </p>
-            <?php if ( $screenshot ) : ?>
-                <img class="theme-screenshot" src="<?php echo esc_url( $screenshot ); ?>" />
-            <?php endif; ?>
+            </div>
+            <div class="customize-section-content">
+                <?php if ( $screenshot ) : ?>
+                    <img class="theme-screenshot" src="<?php echo esc_url( $screenshot ); ?>" />
+                <?php endif; ?>
+            </div>
         </div>
 

trunk/wp-includes/js/customize-controls.dev.js

@@ -150 +150 @@
 
         // Temporary accordion code.
-        $('.control-section h3').click( function() {
-            $( this ).siblings('ul').slideToggle( 200 );
-            $( this ).toggleClass( 'open' );
+        $('.customize-section-title').click( function() {
+            $( this ).parents('.customize-section').toggleClass( 'open' );
             return false;
         });