WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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.

git-svn-id: http://core.svn.wordpress.org/trunk@24734 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Mark Jaquith 2013-07-18 17:42:53 +00:00
parent 4be829a778
commit e9afe4c5d1
5 changed files with 69 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
wp-admin/css/customize-controls.css
View File

@ -121,6 +121,36 @@ body {
height: 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;
}
/* /*
* Style for custom settings * Style for custom settings
*/ */

30
wp-admin/css/wp-admin.css
View File

@ -9047,6 +9047,7 @@ a.widget-control-edit {
.control-section .accordion-section-title { .control-section .accordion-section-title {
padding: 10px 20px; padding: 10px 20px;
color: #464646;
font-size: 15px; font-size: 15px;
font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif; font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
font-weight: normal; font-weight: normal;
@ -9063,34 +9064,21 @@ a.widget-control-edit {
top: 15px; top: 15px;
} }
.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:hover .accordion-section-title,
.js .control-section .accordion-section-title:hover, .js .control-section .accordion-section-title:hover,
.js .control-section.open .accordion-section-title, .js .control-section.open .accordion-section-title,
.js .control-section .accordion-section-title:focus { .js .control-section .accordion-section-title:focus {
color: #fff; color: #000;
text-shadow: 0 -1px 0 #333; background: #f9f9f9;
background: #808080; background-image: -webkit-gradient(linear, left bottom, left top, from(#ececec), to(#f9f9f9));
background-image: -webkit-gradient(linear, left bottom, left top, from(#6d6d6d), to(#808080)); background-image: -webkit-linear-gradient(bottom, #ececec, #f9f9f9);
background-image: -webkit-linear-gradient(bottom, #6d6d6d, #808080); background-image: -moz-linear-gradient(bottom, #ececec, #f9f9f9);
background-image: -moz-linear-gradient(bottom, #6d6d6d, #808080); background-image: -o-linear-gradient(bottom, #ececec, #f9f9f9);
background-image: -o-linear-gradient(bottom, #6d6d6d, #808080); background-image: linear-gradient(to top, #ececec, #f9f9f9);
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;
} }
.control-section.open .accordion-section-title { .control-section.open .accordion-section-title {
border-bottom: 1px solid #6d6d6d; border-bottom: 1px solid #dfdfdf;
} }
/* =Media Queries /* =Media Queries

8
wp-admin/customize.php
View File

@ -46,7 +46,7 @@ do_action( 'customize_controls_enqueue_scripts' );
wp_user_settings(); wp_user_settings();
_wp_admin_html_begin(); _wp_admin_html_begin();
$body_class = 'wp-core-ui'; $body_class = 'wp-core-ui js';
if ( wp_is_mobile() ) : if ( wp_is_mobile() ) :
$body_class .= ' mobile'; $body_class .= ' mobile';
@ -90,8 +90,8 @@ do_action( 'customize_controls_print_scripts' );
$cannot_expand = ! ( $screenshot || $wp_customize->theme()->get('Description') ); $cannot_expand = ! ( $screenshot || $wp_customize->theme()->get('Description') );
?> ?>
<div class="wp-full-overlay-sidebar-content" tabindex="-1"> <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 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"> <div class="accordion-section-title" aria-label="<?php esc_attr_e( 'Theme Customizer Options' ); ?>" tabindex="0">
<span class="preview-notice"><?php <span class="preview-notice"><?php
/* translators: %s is the theme name in the Customize/Live Preview pane */ /* translators: %s is the theme name in the Customize/Live Preview pane */
@ -111,7 +111,7 @@ do_action( 'customize_controls_print_scripts' );
<?php endif; ?> <?php endif; ?>
</div> </div>
<div id="customize-theme-controls" class="accordion-container"><ul> <div id="customize-theme-controls"><ul>
<?php <?php
foreach ( $wp_customize->sections() as $section ) foreach ( $wp_customize->sections() as $section )
$section->maybe_render(); $section->maybe_render();

9
wp-admin/includes/template.php
View File

@ -1000,6 +1000,7 @@ function do_accordion_sections( $screen, $context, $object ) {
<ul class="outer-border"> <ul class="outer-border">
<?php <?php
$i = 0; $i = 0;
$first_open = false;
do { do {
if ( ! isset( $wp_meta_boxes ) || ! isset( $wp_meta_boxes[$page] ) || ! isset( $wp_meta_boxes[$page][$context] ) ) if ( ! isset( $wp_meta_boxes ) || ! isset( $wp_meta_boxes[$page] ) || ! isset( $wp_meta_boxes[$page][$context] ) )
break; break;
@ -1011,8 +1012,14 @@ function do_accordion_sections( $screen, $context, $object ) {
continue; continue;
$i++; $i++;
$hidden_class = in_array( $box['id'], $hidden ) ? 'hide-if-js' : ''; $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> <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 ); ?>"> <div class="accordion-section-content <?php postbox_classes( $box['id'], $page ); ?>">
<div class="inside"> <div class="inside">

35
wp-admin/js/accordion.js
View File

@ -9,10 +9,9 @@
e.preventDefault(); // Keep this AFTER the key filter above e.preventDefault(); // Keep this AFTER the key filter above
accordionSwitch( $( this ) ); 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 () { $( '.hide-postbox-tog' ).click( function () {
accordionInit(); accordionInit();
}); });
@ -22,33 +21,35 @@
var accordionOptions = $( '.accordion-container li.accordion-section' ), var accordionOptions = $( '.accordion-container li.accordion-section' ),
sectionContent = $( '.accordion-section-content' ); sectionContent = $( '.accordion-section-content' );
// Rounded corners function accordionInit () {
function accordionCorners () { // Rounded corners
accordionOptions.removeClass( 'top bottom' ); accordionOptions.removeClass( 'top bottom' );
accordionOptions.filter( ':visible' ).first().addClass( 'top' ); accordionOptions.filter( ':visible' ).first().addClass( 'top' );
accordionOptions.filter( ':visible' ).last().addClass( 'bottom' ).find( sectionContent ).addClass('bottom'); accordionOptions.filter( ':visible' ).last().addClass( 'bottom' ).find( sectionContent ).addClass( 'bottom' );
};
function accordionInit () {
accordionSwitch( accordionOptions.filter( ':visible' ).first() );
accordionCorners();
} }
function accordionSwitch ( el ) { function accordionSwitch ( el ) {
var section = el.closest( '.accordion-section' ), var section = el.closest( '.accordion-section' ),
siblings = section.parent().find( '.open' ), siblings = section.closest( '.accordion-container' ).find( '.open' ),
content = section.find( sectionContent ); content = section.find( sectionContent );
if ( section.hasClass( 'cannot-expand' ) ) if ( section.hasClass( 'cannot-expand' ) )
return; return;
siblings.removeClass( 'open' ); if ( section.hasClass( 'open' ) ) {
siblings.find( sectionContent ).show().slideUp( 150 ); section.toggleClass( 'open' );
content.toggle( section.hasClass( 'open' ) ).slideToggle( 150 ); content.toggle( true ).slideToggle( 150 );
section.toggleClass( 'open' ); } 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(); accordionInit();
})(jQuery); })(jQuery);