Changeset 20133

Timestamp:

03/07/2012 03:19:35 AM (10 years ago)

Author:

koopersmith

Message:

Theme Customizer: Move contents of customize.loader.css to wp-admin.css. Make markup/CSS for the full-screen overlay modular. see #19910.

Location:

trunk

Files:

• wp-admin/css/wp-admin.dev.css (modified) (2 diffs)
• wp-includes/class-wp-customize.php (modified) (2 diffs)
• wp-includes/css/customize-controls.dev.css (modified) (2 diffs)
• wp-includes/css/customize-loader.css (deleted)
• wp-includes/css/customize-loader.dev.css (deleted)
• wp-includes/customize-controls.php (modified) (4 diffs)
• wp-includes/js/customize-loader.dev.js (modified) (3 diffs)
• wp-includes/script-loader.php (modified) (1 diff)

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

@@ -40 +40 @@
 21.0 - Admin Footer
 22.0 - About Pages
-23.0 - Misc
+23.0 - Full Overlay w/ Sidebar
+24.0 - Customize Loader
+25.0 - Misc
 
 ------------------------------------------------------------------------*/
@@ -5206 +5208 @@
 
 /*------------------------------------------------------------------------------
-  23.0 - Misc
+  23.0 - Full Overlay w/ Sidebar
+------------------------------------------------------------------------------*/
+
+body.full-overlay-active {
+    overflow: hidden;
+}
+
+.wp-full-overlay {
+    background: #fff;
+    z-index: 500000;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.wp-full-overlay.collapsed {
+    left: -302px;
+}
+
+.wp-full-overlay-sidebar {
+    width: 300px;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    z-index: 10;
+    position: relative;
+    overflow: auto;
+    background: #f5f5f5;
+    box-shadow: inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 );
+    border-right: 1px solid rgba( 0, 0, 0, 0.2 );
+}
+
+.wp-full-overlay-main {
+    position: fixed;
+    left: 300px;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.wp-full-overlay-sidebar div.wp-full-overlay-header,
+.wp-full-overlay-sidebar div.wp-full-overlay-footer {
+    position: fixed;
+    left: 0;
+    width: 260px;
+    padding: 15px 20px;
+    min-height: 16px;
+    margin: 0;
+    z-index: 10;
+    background: #f5f5f5;
+}
+
+.wp-full-overlay-sidebar div.wp-full-overlay-header {
+    top: 0;
+    border-top: 0;
+    border-bottom: 1px solid #fff;
+    box-shadow:
+        inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 ),
+        inset 0 -1px 0 0px #dfdfdf;
+}
+
+.wp-full-overlay-sidebar div.wp-full-overlay-footer {
+    bottom: 0;
+    border-bottom: 0;
+    border-top: 1px solid #dfdfdf;
+    box-shadow:
+        inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 ),
+        inset 0 1px 0 0px #fff;
+}
+
+/* Return and close buttons. */
+.wp-full-overlay .collapse-sidebar,
+.wp-full-overlay .close-full-overlay {
+    z-index: 50;
+    position: absolute;
+    text-decoration: none;
+}
+
+.wp-full-overlay .close-full-overlay {
+    top: 15px;
+    left: 20px;
+}
+
+/* Collapse Button */
+.wp-full-overlay .collapse-sidebar {
+    position: absolute;
+    top: 13px;
+    left: 265px;
+    z-index: 50;
+    display: block;
+    width: 19px;
+    height: 19px;
+    padding: 0;
+    border-radius: 50%;
+}
+.wp-full-overlay.collapsed .collapse-sidebar {
+    position: absolute;
+    left: 315px;
+}
+.wp-full-overlay .collapse-sidebar span {
+    margin-top: 2px;
+    margin-left: 2px;
+    display: block;
+    width: 15px;
+    height: 15px;
+    background: transparent url('../../wp-admin/images/arrows.png') no-repeat 0 -72px;
+}
+.wp-full-overlay.collapsed .collapse-sidebar span {
+    background-position: 0 -108px;
+}
+
+/* Animations */
+.wp-full-overlay,
+.wp-full-overlay .collapse-sidebar {
+    -moz-transition-property: left, right, top, bottom;
+    -webkit-transition-property: left, right, top, bottom;
+    -o-transition-property: left, right, top, bottom;
+    -ms-transition-property: left, right, top, bottom;
+    transition-property: left, right, top, bottom;
+    -moz-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -ms-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+}
+
+/*------------------------------------------------------------------------------
+  24.0 - Customize Loader
+------------------------------------------------------------------------------*/
+
+#customize-container {
+    display: none;
+}
+
+.customize-active #customize-container {
+    display: block;
+}
+
+#customize-container iframe {
+    height: 100%;
+    width: 100%;
+    z-index: 20;
+}
+
+/*------------------------------------------------------------------------------
+  25.0 - Misc
 ------------------------------------------------------------------------------*/
 

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

@@ -262 +262 @@
 
         wp_enqueue_script( 'customize-loader' );
-        wp_enqueue_style( 'customize-loader' );
 
         if ( ( defined( 'DOING_AJAX' ) && DOING_AJAX ) )
@@ -288 +287 @@
     public function admin_footer() {
         ?>
-        <div id="customize-container">
+        <div id="customize-container" class="wp-full-overlay">
             <input type="hidden" class="admin-url" value="<?php echo esc_url( admin_url( 'admin.php' ) ); ?>" />
-            <a href="#" class="return-to-admin"><?php printf( __( '&larr; Return to %s' ), get_admin_page_title() ); ?></a>
+            <a href="#" class="close-full-overlay"><?php printf( __( '&larr; Return to %s' ), get_admin_page_title() ); ?></a>
             <a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>"><span></span></a>
         </div>

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

@@ -1 +1 @@
 body {
     overflow: hidden;
-}
-
-#customize-controls {
-    width: 300px;
-    height: 100%;
-    padding: 0;
-    margin: 0;
-    z-index: 10;
-    position: relative;
-    overflow: auto;
-    background: #f5f5f5;
-    box-shadow: inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 );
-    border-right: 1px solid rgba( 0, 0, 0, 0.2 );
 }
 
@@ -121 +108 @@
 }
 
-#customize-header-actions,
-#customize-footer-actions {
-    position: fixed;
-    left: 0;
-    width: 260px;
-    padding: 15px 20px;
-    margin: 0;
-    z-index: 10;
-    background: #f5f5f5;
-}
-
-#customize-header-actions {
-    top: 0;
-    border-top: 0;
-    border-bottom: 1px solid #fff;
-    box-shadow:
-        inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 ),
-        inset 0 -1px 0 0px #dfdfdf;
-}
-
-#customize-footer-actions {
-    bottom: 0;
-    border-bottom: 0;
-    border-top: 1px solid #dfdfdf;
-    box-shadow:
-        inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 ),
-        inset 0 1px 0 0px #fff;
-}
-
 #customize-preview {
     position: fixed;

trunk/wp-includes/customize-controls.php

@@ -44 +44 @@
 ?>
 </head>
-<body>
-    <form id="customize-controls" method="post" class="wrap" target="_parent" action="<?php echo esc_url( add_query_arg( 'save', '1', admin_url( 'themes.php' ) ) ); ?>">
+<body class="wp-full-overlay">
+    <form id="customize-controls" method="post" class="wrap wp-full-overlay-sidebar" target="_parent" action="<?php echo esc_url( add_query_arg( 'save', '1', admin_url( 'themes.php' ) ) ); ?>">
         <?php wp_nonce_field( 'customize_controls' ); ?>
         <input type="hidden" name="customize" value="on" />
@@ -51 +51 @@
         <input type="hidden" id="customize-stylesheet" name="stylesheet" value="<?php echo esc_attr( $theme['Stylesheet'] ); ?>" />
 
-        <div id="customize-header-actions" class="customize-section">&nbsp;</div>
+        <div id="customize-header-actions" class="customize-section wp-full-overlay-header">&nbsp;</div>
 
         <div id="customize-info" class="customize-section">
@@ -79 +79 @@
         </ul></div>
 
-        <div id="customize-footer-actions" class="customize-section">
+        <div id="customize-footer-actions" class="customize-section wp-full-overlay-footer">
             <?php
             submit_button( __( 'Save' ), 'primary', 'save', false );
@@ -85 +85 @@
         </div>
     </form>
-    <div id="customize-preview">
+    <div id="customize-preview" class="wp-full-overlay-main">
         <iframe name="customize-target"></iframe>
     </div>

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

@@ -10 +10 @@
             this.doc_title = $( document ).attr( 'title' );
 
-            this.element.on( 'click', '.return-to-admin', function() {
+            this.element.on( 'click', '.close-full-overlay', function() {
                 Loader.close();
                 return false;
@@ -32 +32 @@
 
             this.element.fadeIn( 200, function() {
-                Loader.body.addClass( 'customize-active' );
+                Loader.body.addClass( 'customize-active full-overlay-active' );
             });
         },
@@ -39 +39 @@
                 Loader.iframe.remove();
                 Loader.iframe = null;
-                Loader.body.removeClass( 'customize-active' );
+                Loader.body.removeClass( 'customize-active full-overlay-active' );
                 $( document ).attr( 'title', Loader.doc_title );
             });

trunk/wp-includes/script-loader.php

@@ -472 +472 @@
     $styles->add( 'editor-buttons', "/wp-includes/css/editor-buttons$suffix.css" );
     $styles->add( 'wp-pointer', "/wp-includes/css/wp-pointer$suffix.css" );
-    $styles->add( 'customize-loader', "/wp-includes/css/customize-loader$suffix.css" );
     $styles->add( 'customize-controls', "/wp-includes/css/customize-controls$suffix.css", array( 'wp-admin', 'colors', 'ie' ) );