Changeset 20106

Timestamp:

03/04/2012 02:06:11 AM (15 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;
                 });