Skip to content

Commit

Permalink
Fixes and tweaks for the metabox accordion.
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@markjaquith
markjaquith committed Jul 18, 2013
1 parent 4be829a commit e9afe4c
Show file tree
Hide file tree
Showing 5 changed files with 69 additions and 43 deletions.
30 changes: 30 additions & 0 deletions wp-admin/css/customize-controls.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,36 @@ body {
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
*/
Expand Down
30 changes: 9 additions & 21 deletions wp-admin/css/wp-admin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9047,6 +9047,7 @@ a.widget-control-edit {

.control-section .accordion-section-title {
padding: 10px 20px;
color: #464646;
font-size: 15px;
font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
font-weight: normal;
Expand All @@ -9063,34 +9064,21 @@ a.widget-control-edit {
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 .accordion-section-title:hover,
.js .control-section.open .accordion-section-title,
.js .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;
}

.js .control-section.accordion-section:hover,
.control-section.accordion-section.open {
border-top-color: #808080;
color: #000;
background: #f9f9f9;
background-image: -webkit-gradient(linear, left bottom, left top, from(#ececec), to(#f9f9f9));
background-image: -webkit-linear-gradient(bottom, #ececec, #f9f9f9);
background-image: -moz-linear-gradient(bottom, #ececec, #f9f9f9);
background-image: -o-linear-gradient(bottom, #ececec, #f9f9f9);
background-image: linear-gradient(to top, #ececec, #f9f9f9);
}

.control-section.open .accordion-section-title {
border-bottom: 1px solid #6d6d6d;
border-bottom: 1px solid #dfdfdf;
}

/* =Media Queries
Expand Down
8 changes: 4 additions & 4 deletions wp-admin/customize.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
wp_user_settings();
_wp_admin_html_begin();

$body_class = 'wp-core-ui';
$body_class = 'wp-core-ui js';

if ( wp_is_mobile() ) :
$body_class .= ' mobile';
Expand Down Expand Up @@ -90,8 +90,8 @@
$cannot_expand = ! ( $screenshot || $wp_customize->theme()->get('Description') );
?>

<div class="wp-full-overlay-sidebar-content" tabindex="-1">
<div id="customize-info" class="accordion-section<?php if ( $cannot_expand ) echo ' cannot-expand'; ?>">
<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 class="accordion-section-title" aria-label="<?php esc_attr_e( 'Theme Customizer Options' ); ?>" tabindex="0">
<span class="preview-notice"><?php
/* translators: %s is the theme name in the Customize/Live Preview pane */
Expand All @@ -111,7 +111,7 @@
<?php endif; ?>
</div>

<div id="customize-theme-controls" class="accordion-container"><ul>
<div id="customize-theme-controls"><ul>
<?php
foreach ( $wp_customize->sections() as $section )
$section->maybe_render();
Expand Down
9 changes: 8 additions & 1 deletion wp-admin/includes/template.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1000,6 +1000,7 @@ function do_accordion_sections( $screen, $context, $object ) {
<ul class="outer-border">
<?php
$i = 0;
$first_open = false;
do {
if ( ! isset( $wp_meta_boxes ) || ! isset( $wp_meta_boxes[$page] ) || ! isset( $wp_meta_boxes[$page][$context] ) )
break;
Expand All @@ -1011,8 +1012,14 @@ function do_accordion_sections( $screen, $context, $object ) {
continue;
$i++;
$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>
<div class="accordion-section-content <?php postbox_classes( $box['id'], $page ); ?>">
<div class="inside">
Expand Down
35 changes: 18 additions & 17 deletions wp-admin/js/accordion.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,9 @@
e.preventDefault(); // Keep this AFTER the key filter above

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 () {
accordionInit();
});
Expand All @@ -22,33 +21,35 @@
var accordionOptions = $( '.accordion-container li.accordion-section' ),
sectionContent = $( '.accordion-section-content' );

// Rounded corners
function accordionCorners () {
function accordionInit () {
// Rounded corners
accordionOptions.removeClass( 'top bottom' );
accordionOptions.filter( ':visible' ).first().addClass( 'top' );
accordionOptions.filter( ':visible' ).last().addClass( 'bottom' ).find( sectionContent ).addClass('bottom');
};

function accordionInit () {
accordionSwitch( accordionOptions.filter( ':visible' ).first() );
accordionCorners();
accordionOptions.filter( ':visible' ).last().addClass( 'bottom' ).find( sectionContent ).addClass( 'bottom' );
}

function accordionSwitch ( el ) {
var section = el.closest( '.accordion-section' ),
siblings = section.parent().find( '.open' ),
content = section.find( sectionContent );
siblings = section.closest( '.accordion-container' ).find( '.open' ),
content = section.find( sectionContent );

if ( section.hasClass( 'cannot-expand' ) )
return;

siblings.removeClass( 'open' );
siblings.find( sectionContent ).show().slideUp( 150 );
content.toggle( section.hasClass( 'open' ) ).slideToggle( 150 );
section.toggleClass( 'open' );
if ( section.hasClass( 'open' ) ) {
section.toggleClass( 'open' );
content.toggle( true ).slideToggle( 150 );
} 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();

})(jQuery);

0 comments on commit e9afe4c

Please sign in to comment.