golem
/
twentyGOLEM
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

git-svn-id: http://svn.automattic.com/wordpress/trunk@20133 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
koopersmith 2012-03-07 03:19:35 +00:00
parent 19b1746cc6
commit d4f20e47b7
8 changed files with 161 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
wp-admin/css/wp-admin.dev.css
View File

@ -39,7 +39,9 @@ TABLE OF CONTENTS:
20.0 - Settings
21.0 - Admin Footer
22.0 - About Pages
23.0 - Misc
23.0 - Full Overlay w/ Sidebar
24.0 - Customize Loader
25.0 - Misc
------------------------------------------------------------------------*/
@ -5205,7 +5207,154 @@ html.ie8 .about-wrap .feature-section.three-col img {
}
/*------------------------------------------------------------------------------
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
------------------------------------------------------------------------------*/
#excerpt,

5
wp-includes/class-wp-customize.php
View File

@ -261,7 +261,6 @@ final class WP_Customize {
$this->save();
wp_enqueue_script( 'customize-loader' );
wp_enqueue_style( 'customize-loader' );
if ( ( defined( 'DOING_AJAX' ) && DOING_AJAX ) )
return;
@ -287,9 +286,9 @@ final class WP_Customize {
*/
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>
<?php

42
wp-includes/css/customize-controls.dev.css
View File

@ -2,19 +2,6 @@ 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 );
}
#customize-controls a {
text-decoration: none;
}
@ -120,35 +107,6 @@ body {
margin: 0;
}
#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;
left: 300px;

1
wp-includes/css/customize-loader.css
View File

@ -1 +0,0 @@
body.customize-active{overflow:hidden}#customize-container{display:none;background:#fff;z-index:500000;position:fixed;top:0;bottom:0;left:0;right:0}.customize-active #customize-container{display:block}#customize-container.collapsed{left:-302px}#customize-container iframe{height:100%;width:100%;z-index:20}#customize-container .collapse-sidebar,#customize-container .return-to-admin{z-index:50;position:absolute;text-decoration:none}#customize-container .return-to-admin{top:15px;left:20px}#customize-container .collapse-sidebar{position:absolute;top:13px;left:265px;z-index:50;display:block;width:19px;height:19px;padding:0;border-radius:50%}#customize-container.collapsed .collapse-sidebar{position:absolute;left:315px}#customize-container .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}#customize-container.collapsed .collapse-sidebar span{background-position:0 -108px}#customize-container,#customize-container .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:.2s;-webkit-transition-duration:.2s;-o-transition-duration:.2s;-ms-transition-duration:.2s;transition-duration:.2s}

83
wp-includes/css/customize-loader.dev.css
View File

@ -1,83 +0,0 @@
body.customize-active {
overflow: hidden;
}
#customize-container {
display: none;
background: #fff;
z-index: 500000;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.customize-active #customize-container {
display: block;
}
#customize-container.collapsed {
left: -302px;
}
#customize-container iframe {
height: 100%;
width: 100%;
z-index: 20;
}
#customize-container .collapse-sidebar,
#customize-container .return-to-admin {
z-index: 50;
position: absolute;
text-decoration: none;
}
#customize-container .return-to-admin {
top: 15px;
left: 20px;
}
/* Collapse Button */
#customize-container .collapse-sidebar {
position: absolute;
top: 13px;
left: 265px;
z-index: 50;
display: block;
width: 19px;
height: 19px;
padding: 0;
border-radius: 50%;
}
#customize-container.collapsed .collapse-sidebar {
position: absolute;
left: 315px;
}
#customize-container .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;
}
#customize-container.collapsed .collapse-sidebar span {
background-position: 0 -108px;
}
/* Animations */
#customize-container,
#customize-container .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;
}

10
wp-includes/customize-controls.php
View File

@ -43,14 +43,14 @@ do_action( 'customize_controls_print_styles' );
do_action( 'customize_controls_print_scripts' );
?>
</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" />
<input type="hidden" id="customize-template" name="template" value="<?php echo esc_attr( $theme['Template'] ); ?>" />
<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">
<div class="customize-section-title">
@ -78,13 +78,13 @@ do_action( 'customize_controls_print_scripts' );
?>
</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 );
?>
</div>
</form>
<div id="customize-preview">
<div id="customize-preview" class="wp-full-overlay-main">
<iframe name="customize-target"></iframe>
</div>
<?php

6
wp-includes/js/customize-loader.dev.js
View File

@ -9,7 +9,7 @@ if ( typeof wp === 'undefined' )
this.base = $( '.admin-url', this.element ).val();
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;
});
@ -31,14 +31,14 @@ if ( typeof wp === 'undefined' )
});
this.element.fadeIn( 200, function() {
Loader.body.addClass( 'customize-active' );
Loader.body.addClass( 'customize-active full-overlay-active' );
});
},
close: function() {
this.element.fadeOut( 200, function() {
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 );
});
}

1
wp-includes/script-loader.php
View File

@ -471,7 +471,6 @@ function wp_default_styles( &$styles ) {
$styles->add( 'wp-jquery-ui-dialog', "/wp-includes/css/jquery-ui-dialog$suffix.css" );
$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' ) );
foreach ( $rtl_styles as $rtl_style ) {