WordPress.org
Get WordPress

Make WordPress Core

Ticket #27406: 27406.4.diff

File 27406.4.diff, 15.0 KB (added by celloexpressions, 10 years ago)

"Panel," improved animations, hide close button, details

  • src/wp-admin/css/colors/_admin.scss

     
    472472        color: $menu-highlight-text;
    473473}
    474474
     475.control-panel-back:focus,
     476.control-panel-back:hover {
     477        background-color: $menu-highlight-background;
     478        color: $menu-highlight-text;
     479}
    475480
    476481/* jQuery UI Slider */
    477482

  • src/wp-admin/css/customize-controls.css

     
    3232        display: block;
    3333}
    3434
     35#customize-controls .wp-full-overlay-sidebar-content {
     36        overflow-y: auto;
     37        overflow-x: hidden;
     38}
     39
    3540#customize-info {
    3641        border: none;
    3742        border-top: 1px solid #ddd;
    … …  
    8388        line-height: 20px;
    8489}
    8590
    86 #customize-theme-controls {
    87         -webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
    88         box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
    89 }
    90 
    9191#customize-theme-controls .control-section {
    9292        border: none;
    9393}
    … …  
    103103        background: white;
    104104}
    105105
    106 #customize-theme-controls .control-section:hover .accordion-section-title,
     106#customize-theme-controls .control-section:hover > .accordion-section-title,
    107107#customize-theme-controls .control-section .accordion-section-title:hover,
    108108#customize-theme-controls .control-section.open .accordion-section-title,
    109109#customize-theme-controls .control-section .accordion-section-title:focus {
    … …  
    118118        background: #f5f5f5;
    119119}
    120120
    121 #customize-theme-controls .control-section:hover .accordion-section-title::after,
     121#customize-theme-controls .control-section:hover > .accordion-section-title::after,
    122122#customize-theme-controls .control-section .accordion-section-title:hover::after,
    123123#customize-theme-controls .control-section.open .accordion-section-title::after,
    124124#customize-theme-controls .control-section .accordion-section-title:focus::after {
    … …  
    143143        margin: 0;
    144144}
    145145
     146.control-section.control-panel > .accordion-section-title:after {
     147        content: "\f139";
     148}
     149
     150.accordion-sub-container.control-panel-content {
     151        display: none;
     152        position: absolute;
     153        left: 300px;
     154        top: 0;
     155        width: 300px;
     156        border-top: 1px solid #ddd;
     157        transition: left ease-in-out .18s;
     158}
     159
     160.accordion-sub-container.control-panel-content.animating {
     161        display: block;
     162}
     163
     164.current-panel .accordion-sub-container.control-panel-content {
     165        width: 100%;
     166}
     167
     168.control-panel-back {
     169        display: block;
     170        position: fixed;
     171        top: 0;
     172        z-index: 99;
     173        left: -48px;
     174        width: 45px;
     175        height: 45px;
     176        padding-right: 2px;
     177        background: #eee;
     178        border-right: 1px solid #ddd;
     179        cursor: pointer;
     180        transition: left ease-in-out .18s, color ease-in .1s;
     181}
     182
     183.collapsed .control-panel-back {
     184        display: none;
     185}
     186
     187.control-panel-back:focus,
     188.control-panel-back:hover {
     189        background-color: #0074a2;
     190        color: #fff;
     191        outline: none;
     192}
     193
     194.control-panel-back:before {
     195        font: normal 29px/1 dashicons;
     196        content: "\f340";
     197        position: relative;
     198        top: 9px;
     199        left: 9px;
     200}
     201
     202.current-panel .control-panel-back {
     203        left: 0;
     204}
     205
     206.current-panel > .accordion-section-title {
     207        height: 22px;
     208}
     209
     210#customize-header-actions a.back {
     211        position: relative;
     212        left: 0;
     213        transition: left ease-in-out .18s;
     214}
     215
     216.in-sub-panel #customize-header-actions a.back {
     217        left: -120px;
     218}
     219
     220.wp-full-overlay-sidebar .wp-full-overlay-header {
     221        transition: padding ease-in-out .18s;
     222}
     223
     224.in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header {
     225        padding-left: 62px;
     226}
     227
     228#customize-info,
     229#customize-theme-controls > ul > .accordion-section {
     230        position: relative;
     231        left: 0;
     232        transition: left ease-in-out .18s;
     233}
     234
     235.in-sub-panel #customize-info,
     236.in-sub-panel #customize-theme-controls > ul > .accordion-section {
     237        left: -300px;
     238        width: 300px;
     239}
     240
     241.in-sub-panel #customize-theme-controls .accordion-section.current-panel {
     242        width: 100%;
     243}
     244
     245#customize-theme-controls .control-section.current-panel {
     246        padding: 0;
     247}
     248
     249#customize-theme-controls .control-section > h3.accordion-section-title {
     250        position: relative;
     251        left: 0;
     252}
     253
     254#customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
     255        left: -300px;
     256        transition: left ease-in-out .18s;
     257}
     258
     259.control-section.control-panel .accordion-section-title .panel-title {
     260        font-size: 20px;
     261        font-weight: 200;
     262        line-height: 24px;
     263        display: block;
     264        border: none;
     265}
     266
     267.control-section.control-panel .preview-notice {
     268        font-size: 13px;
     269        line-height: 24px;
     270}
     271
    146272.customize-control {
    147273        width: 100%;
    148274        float: left;

  • src/wp-admin/customize.php

     
    142142
    143143                        <div id="customize-theme-controls"><ul>
    144144                                <?php
    145                                 foreach ( $wp_customize->sections() as $section )
     145                                foreach ( $wp_customize->panels() as $panel ) {
     146                                        $panel->maybe_render();
     147                                }
     148                                foreach ( $wp_customize->sections() as $section ) {
    146149                                        $section->maybe_render();
     150                                }
    147151                                ?>
    148152                        </ul></div>
    149153                </div>

  • src/wp-admin/js/accordion.js

     
    1111                        accordionSwitch( $( this ) );
    1212                });
    1313
     14                // Back to top level
     15                $( '.accordion-container' ).on( 'click keydown', '.control-panel-back', function( e ) {
     16                        if ( e.type === 'keydown' && 13 !== e.which ) // "return" key
     17                                        return;
     18                        e.preventDefault(); // Keep this AFTER the key filter above
     19
     20                        panelSwitch( $( this ) );
     21                });
     22
    1423                // Re-initialize accordion when screen options are toggled
    1524                $( '.hide-postbox-tog' ).click( function () {
    1625                        accordionInit();
    … …  
    3645                if ( section.hasClass( 'cannot-expand' ) )
    3746                        return;
    3847
     48                if ( section.hasClass( 'control-panel' ) ) {
     49                        panelSwitch( section );
     50                        return;
     51                }
     52
    3953                if ( section.hasClass( 'open' ) ) {
    4054                        section.toggleClass( 'open' );
    4155                        content.toggle( true ).slideToggle( 150 );
    … …  
    4963                accordionInit();
    5064        }
    5165
     66        function panelSwitch( panel ) {
     67                var position,
     68                        section = panel.closest( '.accordion-section' ),
     69                        container = section.closest( '.wp-full-overlay' );
     70                        siblings = container.find( '.accordion-section.open' );
     71                        content = section.find( '.control-panel-content' );
     72
     73                if ( section.hasClass( 'current-panel' ) ) {
     74                        section.toggleClass( 'current-panel' );
     75                        container.toggleClass( 'in-sub-panel' );
     76                        content.delay(180).hide( 0, function() {
     77                               content.css( 'margin-top', 'inherit' ); // Reset
     78                        } );
     79                } else {
     80                        siblings.removeClass( 'open' );
     81                        content.show( 0, function() {
     82                                position = content.offset().top;
     83                                content.css( 'margin-top', ( 45 - position ) );
     84                                section.toggleClass( 'current-panel' );
     85                                container.toggleClass( 'in-sub-panel' );
     86                        } );
     87                }
     88        }
     89
    5290        // Initialize the accordion (currently just corner fixes)
    5391        accordionInit();
    5492

  • src/wp-includes/class-wp-customize-manager.php

     
    4545        public $widgets;
    4646
    4747        protected $settings = array();
     48        protected $panels    = array();
    4849        protected $sections = array();
    4950        protected $controls = array();
    5051
    … …  
    315316        }
    316317
    317318        /**
     319         * Get the registered panels.
     320         *
     321         * @since 4.0.0
     322         *
     323         * @return array
     324         */
     325        public function panels() {
     326                return $this->panels;
     327        }
     328
     329        /**
    318330         * Checks if the current theme is active.
    319331         *
    320332         * @since 3.4.0
    … …  
    648660        }
    649661
    650662        /**
     663         * Add a customize panel.
     664         *
     665         * @since 4.0.0
     666         *
     667         * @param WP_Customize_Panel|string $id   Customize Panel object, or Panel ID.
     668         * @param array                     $args Panel arguments.
     669         */
     670        public function add_panel( $id, $args = array() ) {
     671                if ( is_a( $id, 'WP_Customize_Panel' ) ) {
     672                        $panel = $id;
     673                }
     674                else {
     675                        $panel = new WP_Customize_Panel( $this, $id, $args );
     676                }
     677
     678                $this->panels[ $panel->id ] = $panel;
     679        }
     680
     681        /**
     682         * Retrieve a customize panel.
     683         *
     684         * @since 4.0.0
     685         *
     686         * @param string $id Panel ID.
     687         * @return WP_Customize_Panel
     688         */
     689        public function get_panel( $id ) {
     690                if ( isset( $this->panels[ $id ] ) ) {
     691                        return $this->panels[ $id ];
     692                }
     693        }
     694
     695        /**
     696         * Remove a customize panel.
     697         *
     698         * @since 4.0.0
     699         *
     700         * @param string $id Panel ID.
     701         */
     702        public function remove_panel( $id ) {
     703                unset( $this->panels[ $id ] );
     704        }
     705
     706        /**
    651707         * Add a customize section.
    652708         *
    653709         * @since 3.4.0
    … …  
    749805        }
    750806
    751807        /**
    752          * Prepare settings and sections.
     808         * Prepare panels, sections, and controls.
    753809         *
    754810         * For each, check if required related components exist,
    755811         * whether the user has the necessary capabilities,
    … …  
    763819                $controls = array();
    764820
    765821                foreach ( $this->controls as $id => $control ) {
    766                         if ( ! isset( $this->sections[ $control->section ] ) || ! $control->check_capabilities() )
     822                        if ( ! isset( $this->sections[ $control->section ] ) || ! $control->check_capabilities() ) {
    767823                                continue;
     824                        }
    768825
    769826                        $this->sections[ $control->section ]->controls[] = $control;
    770827                        $controls[ $id ] = $control;
    … …  
    778835                $sections = array();
    779836
    780837                foreach ( $this->sections as $section ) {
    781                         if ( ! $section->check_capabilities() || ! $section->controls )
     838                        if ( ! $section->check_capabilities() || ! $section->controls ) {
    782839                                continue;
     840                        }
    783841
    784842                        usort( $section->controls, array( $this, '_cmp_priority' ) );
    785                         $sections[] = $section;
     843
     844                        if ( ! $section->panel ) {
     845                                // Top-level section.
     846                                $sections[] = $section;
     847                        } else {
     848                                // This section belongs to a panel.
     849                                if ( isset( $this->panels [ $section->panel ] ) ) {
     850                                        $this->panels[ $section->panel ]->sections[] = $section;
     851                                }
     852                        }
    786853                }
    787854                $this->sections = $sections;
     855
     856                // Prepare panels.
     857                // Reversing makes uasort sort by time added when conflicts occur.
     858                $this->panels = array_reverse( $this->panels );
     859                uasort( $this->panels, array( $this, '_cmp_priority' ) );
     860                $panels = array();
     861
     862                foreach ( $this->panels as $panel ) {
     863                        if ( ! $panel->check_capabilities() || ! $panel->sections ) {
     864                                continue;
     865                        }
     866
     867                        usort( $panel->sections, array( $this, '_cmp_priority' ) );
     868                        $panels[] = $panel;
     869                }
     870                $this->panels = $panels;
    788871        }
    789872
    790873        /**

  • src/wp-includes/class-wp-customize-section.php

     
    3838        public $priority = 10;
    3939
    4040        /**
     41         * Panel in which to show the section, making it a sub-section.
     42         *
     43         * @since 4.0.0
     44         * @access public
     45         * @var string
     46         */
     47        public $panel = '';
     48
     49        /**
    4150         * Capability required for the section.
    4251         *
    4352         * @since 3.4.0
    … …  
    162171         * @since 3.4.0
    163172         */
    164173        protected function render() {
     174                $classes = 'control-section accordion-section';
     175                if ( $this->panel ) {
     176                        $classes .= ' control-subsection';
     177                }
    165178                ?>
    166                 <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="control-section accordion-section">
     179                <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
    167180                        <h3 class="accordion-section-title" tabindex="0"><?php echo esc_html( $this->title ); ?></h3>
    168181                        <ul class="accordion-section-content">
    169182                                <?php if ( ! empty( $this->description ) ) : ?>
    … …  
    178191                <?php
    179192        }
    180193}
     194
     195/**
     196 * Customize Panel Class.
     197 *
     198 * A UI container for sections, managed by the WP_Customize_Manager.
     199 *
     200 * @package WordPress
     201 * @subpackage Customize
     202 * @since 4.0.0
     203 */
     204class WP_Customize_Panel extends WP_Customize_Section {
     205
     206        /**
     207         * Customizer sections for this panel.
     208         *
     209         * @since 4.0.0
     210         * @access public
     211         * @var array
     212         */
     213        public $sections;
     214
     215        /**
     216         * Constructor.
     217         *
     218         * Any supplied $args override class property defaults.
     219         *
     220         * @since 4.0.0
     221         *
     222         * @param WP_Customize_Manager $manager Customizer bootstrap instance.
     223         * @param string               $id      An specific ID of the section.
     224         * @param array                $args    Section arguments.
     225         */
     226        public function __construct( $manager, $id, $args = array() ) {
     227                parent::__construct( $manager, $id, $args );
     228
     229                $this->sections = array(); // Users cannot customize the $sections array.
     230
     231                return $this;
     232        }
     233
     234        /**
     235         * Render the panel, and the sections that have been added to it.
     236         *
     237         * @since 4.0.0
     238         */
     239        protected function render() {
     240                ?>
     241                <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="control-section control-panel accordion-section">
     242                        <h3 class="accordion-section-title" tabindex="0"><?php echo esc_html( $this->title ); ?></h3>
     243                        <span class="control-panel-back" tabindex="0"><span class="screen-reader-text">Back to Customize</span></span>
     244                        <ul class="accordion-sub-container control-panel-content">
     245                                <li class="accordion-section control-section<?php if ( empty( $this->description ) ) echo ' cannot-expand'; ?>">
     246                                        <div class="accordion-section-title" tabindex="0">
     247                                                <span class="preview-notice"><?php _e( 'You are customizing' ); ?>
     248                                                        <strong class="panel-title"><?php echo esc_html( $this->title ); ?></strong>
     249                                                </span>
     250                                        </div>
     251                                        <?php if ( ! empty( $this->description ) ) : ?>
     252                                                <div class="accordion-section-content description">
     253                                                        <?php echo $this->description; ?>
     254                                                </div>
     255                                        <?php endif; ?>
     256                                </li>
     257                                <?php
     258                                foreach ( $this->sections as $section ) {
     259                                        $section->maybe_render();
     260                                }
     261                                ?>
     262                        </ul>
     263                </li>
     264                <?php
     265        }
     266}

  • src/wp-includes/class-wp-customize-widgets.php

     
    433433                        $this->manager->add_setting( $setting_id, $setting_args );
    434434                }
    435435
     436                $this->manager->add_panel( 'widgets', array(
     437                        'title' => __( 'Widgets' ),
     438                        'description' => __ ( 'Widgets are independent sections of content that can be placed into widgetized areas provided by your theme (commonly called sidebars).' ),
     439                ) );
     440
    436441                foreach ( $sidebars_widgets as $sidebar_id => $sidebar_widget_ids ) {
    437442                        if ( empty( $sidebar_widget_ids ) ) {
    438443                                $sidebar_widget_ids = array();
    … …  
    458463                                if ( $is_active_sidebar ) {
    459464
    460465                                        $section_args = array(
    461                                                 /* translators: %s: sidebar name */
    462                                                 'title' => sprintf( __( 'Widgets: %s' ), $GLOBALS['wp_registered_sidebars'][$sidebar_id]['name'] ),
    463                                                 'description' => $GLOBALS['wp_registered_sidebars'][$sidebar_id]['description'],
     466                                                'title' => $GLOBALS['wp_registered_sidebars'][ $sidebar_id ]['name'],
     467                                                'description' => $GLOBALS['wp_registered_sidebars'][ $sidebar_id ]['description'],
    464468                                                'priority' => 1000 + array_search( $sidebar_id, array_keys( $wp_registered_sidebars ) ),
     469                                                'panel' => 'widgets',
    465470                                        );
    466471
    467472                                        /**