WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
11/13/2013 08:57:29 PM (13 years ago)
Author:
nacin
Message:

Update the Themes screen, merging THX into core.

  • Name: THX38
  • Description: Update the Themes screen with a new design and experience.
  • Tags: visually-focused, bigger-screenshots, fast, mobile-friendly, backbone-driven
  • Author: matveb, shaunandrews, melchoyce, designsimply, shelob9
  • URI: ​http://wordpress.org/plugins/thx38/

fixes #25948

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/themes.php

    r25679 r26141  
    1212if ( !current_user_can('switch_themes') && !current_user_can('edit_theme_options') )
    1313        wp_die( __( 'Cheatin’ uh?' ) );
    14 
    15 $wp_list_table = _get_list_table('WP_Themes_List_Table');
    16 
    17 $_SERVER['REQUEST_URI'] = remove_query_arg( array( 's', 'features', '_ajax_fetch_list_nonce', '_wp_http_referer', 'paged' ), $_SERVER['REQUEST_URI'] );
    1814
    1915if ( current_user_can( 'switch_themes' ) && isset($_GET['action'] ) ) {
    … …  
    3733}
    3834
    39 $wp_list_table->prepare_items();
    40 
    4135$title = __('Manage Themes');
    4236$parent_file = 'themes.php';
    … …  
    6761}
    6862
    69 add_thickbox();
    70 
    7163endif; // switch_themes
    7264
    … …  
    9183);
    9284
     85if ( current_user_can( 'switch_themes' ) ) {
     86        $themes = wp_prepare_themes_for_js();
     87} else {
     88        $themes = wp_prepare_themes_for_js( array( wp_get_theme() ) );
     89}
     90
     91wp_localize_script( 'theme', '_wpThemeSettings', array(
     92        'themes'   => $themes,
     93        'settings' => array(
     94                'install_uri'   => admin_url( 'theme-install.php' ),
     95                'customizeURI'  => ( current_user_can( 'edit_theme_options' ) ) ? wp_customize_url() : null,
     96                'confirmDelete' => __( "Are you sure you want to delete this theme?\n\nClick 'Cancel' to go back, 'OK' to confirm the delete." ),
     97                'root'          => '/wp-admin/themes.php',
     98                'container'     => '#appearance',
     99                'extraRoutes'   => '',
     100        ),
     101        'i18n' => array(
     102                'add_new'         => __( 'Add New Theme' ),
     103        ),
     104) );
     105
     106wp_enqueue_style( 'theme' );
    93107wp_enqueue_script( 'theme' );
    94108wp_enqueue_script( 'customize-loader' );
    … …  
    97111?>
    98112
    99 <div class="wrap"><?php
    100 screen_icon();
    101 if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?>
    102 <h2 class="nav-tab-wrapper">
    103 <a href="themes.php" class="nav-tab nav-tab-active"><?php echo esc_html( $title ); ?></a><a href="<?php echo admin_url( 'theme-install.php'); ?>" class="nav-tab"><?php echo esc_html_x('Install Themes', 'theme'); ?></a>
    104 <?php else : ?>
    105 <h2><?php echo esc_html( $title ); ?>
    106 <?php endif; ?>
    107 </h2>
     113<div id="appearance" class="wrap">
     114        <h2><?php esc_html_e( 'Themes' ); ?>
     115                <span id="theme-count" class="theme-count"></span>
     116        <?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?>
     117                <a href="<?php echo admin_url( 'theme-install.php' ); ?>" class="add-new-h2"><?php echo esc_html( _x( 'Add New', 'Add new theme' ) ); ?></a>
     118        <?php endif; ?>
     119        </h2>
     120
    108121<?php
    109122if ( ! validate_current_theme() || isset( $_GET['broken'] ) ) : ?>
    … …  
    121134
    122135$ct = wp_get_theme();
    123 $screenshot = $ct->get_screenshot();
    124 $class = $screenshot ? 'has-screenshot' : '';
    125 
    126 $customize_title = sprintf( __( 'Customize &#8220;%s&#8221;' ), $ct->display('Name') );
    127 
    128 ?>
    129 <div id="current-theme" class="<?php echo esc_attr( $class ); ?>">
    130         <?php if ( $screenshot ) : ?>
    131                 <?php if ( current_user_can( 'edit_theme_options' ) ) : ?>
    132                 <a href="<?php echo wp_customize_url(); ?>" class="load-customize hide-if-no-customize" title="<?php echo esc_attr( $customize_title ); ?>">
    133                         <img src="<?php echo esc_url( $screenshot ); ?>" alt="<?php esc_attr_e( 'Current theme preview' ); ?>" />
    134                 </a>
    135                 <?php endif; ?>
    136                 <img class="hide-if-customize" src="<?php echo esc_url( $screenshot ); ?>" alt="<?php esc_attr_e( 'Current theme preview' ); ?>" />
    137         <?php endif; ?>
    138 
    139         <h3><?php _e('Current Theme'); ?></h3>
    140         <h4>
    141                 <?php echo $ct->display('Name'); ?>
    142         </h4>
    143 
    144 <?php
     136
    145137if ( $ct->errors() && ( ! is_multisite() || current_user_can( 'manage_network_themes' ) ) ) {
    146138        echo '<p class="error-message">' . sprintf( __( 'ERROR: %s' ), $ct->errors()->get_error_message() ) . '</p>';
    147139}
    148140
     141/*
    149142// Certain error codes are less fatal than others. We can still display theme information in most cases.
    150143if ( ! $ct->errors() || ( 1 == count( $ct->errors()->get_error_codes() )
    151144        && in_array( $ct->errors()->get_error_code(), array( 'theme_no_parent', 'theme_parent_invalid', 'theme_no_index' ) ) ) ) : ?>
    152 
    153         <div>
    154                 <ul class="theme-info">
    155                         <li><?php printf( __('By %s'), $ct->display('Author') ); ?></li>
    156                         <li><?php printf( __('Version %s'), $ct->display('Version') ); ?></li>
    157                 </ul>
    158                 <p class="theme-description"><?php echo $ct->display('Description'); ?></p>
    159                 <?php if ( $ct->parent() ) {
    160                         printf( ' <p class="howto">' . __( 'This <a href="%1$s">child theme</a> requires its parent theme, %2$s.' ) . '</p>',
    161                                 __( 'http://codex.wordpress.org/Child_Themes' ),
    162                                 $ct->parent()->display( 'Name' ) );
    163                 } ?>
    164                 <?php theme_update_available( $ct ); ?>
    165         </div>
    166145
    167146        <?php
    … …  
    195174                }
    196175        }
    197 
    198         if ( $options || current_user_can( 'edit_theme_options' ) ) :
    199         ?>
    200         <div class="theme-options">
    201                 <?php if ( current_user_can( 'edit_theme_options' ) ) : ?>
    202                 <a id="customize-current-theme-link" href="<?php echo wp_customize_url(); ?>" class="load-customize hide-if-no-customize" title="<?php echo esc_attr( $customize_title ); ?>"><?php _e( 'Customize' ); ?></a>
    203                 <?php
    204                 endif; // edit_theme_options
    205                 if ( $options ) :
    206                 ?>
    207                 <span><?php _e( 'Options:' )?></span>
    208                 <ul>
    209                         <?php foreach ( $options as $option ) : ?>
    210                                 <li><?php echo $option; ?></li>
    211                         <?php endforeach; ?>
    212                 </ul>
    213                 <?php
    214                 endif; // options
    215                 ?>
    216         </div>
    217         <?php
    218         endif; // options || edit_theme_options
    219         ?>
    220 
    221 <?php endif; // theme errors ?>
    222 
    223 </div>
    224 
    225 <br class="clear" />
    226 <?php
    227 if ( ! current_user_can( 'switch_themes' ) ) {
    228         echo '</div>';
    229         require( ABSPATH . 'wp-admin/admin-footer.php' );
    230         exit;
    231 }
    232 ?>
    233 
    234 <form class="search-form filter-form" action="" method="get">
    235 
    236 <h3 class="available-themes"><?php _e('Available Themes'); ?></h3>
    237 
    238 <?php if ( !empty( $_REQUEST['s'] ) || !empty( $_REQUEST['features'] ) || $wp_list_table->has_items() ) : ?>
    239 
    240 <p class="search-box">
    241         <label class="screen-reader-text" for="theme-search-input"><?php _e('Search Installed Themes'); ?>:</label>
    242         <input type="search" id="theme-search-input" name="s" value="<?php _admin_search_query(); ?>" />
    243         <?php submit_button( __( 'Search Installed Themes' ), 'button', false, false, array( 'id' => 'search-submit' ) ); ?>
    244         <a id="filter-click" href="?filter=1"><?php _e( 'Feature Filter' ); ?></a>
    245 </p>
    246 
    247 <div id="filter-box" style="<?php if ( empty($_REQUEST['filter']) ) echo 'display: none;'; ?>">
    248 <?php $feature_list = get_theme_feature_list(); ?>
    249         <div class="feature-filter">
    250                 <p class="install-help"><?php _e('Theme filters') ?></p>
    251         <?php if ( !empty( $_REQUEST['filter'] ) ) : ?>
    252                 <input type="hidden" name="filter" value="1" />
    253         <?php endif; ?>
    254         <?php foreach ( $feature_list as $feature_name => $features ) :
    255                         $feature_name = esc_html( $feature_name ); ?>
    256 
    257                 <div class="feature-container">
    258                         <div class="feature-name"><?php echo $feature_name ?></div>
    259 
    260                         <ol class="feature-group">
    261                                 <?php foreach ( $features as $key => $feature ) :
    262                                                 $feature_name = $feature;
    263                                                 $feature_name = esc_html( $feature_name );
    264                                                 $feature = esc_attr( $feature );
    265                                                 ?>
    266                                 <li>
    267                                         <input type="checkbox" name="features[]" id="feature-id-<?php echo $key; ?>" value="<?php echo $key; ?>" <?php checked( in_array( $key, $wp_list_table->features ) ); ?>/>
    268                                         <label for="feature-id-<?php echo $key; ?>"><?php echo $feature_name; ?></label>
    269                                 </li>
    270                                 <?php endforeach; ?>
    271                         </ol>
    272                 </div>
    273         <?php endforeach; ?>
    274 
    275         <div class="feature-container">
    276                 <?php submit_button( __( 'Apply Filters' ), 'button-secondary submitter', false, false, array( 'id' => 'filter-submit' ) ); ?>
    277                 &nbsp;
    278                 <a id="mini-filter-click" href="<?php echo esc_url( remove_query_arg( array('filter', 'features', 'submit') ) ); ?>"><?php _e( 'Close filters' )?></a>
    279         </div>
    280         <br/>
    281         </div>
    282         <br class="clear"/>
    283 </div>
    284 
    285 <?php endif; ?>
    286 
    287 <br class="clear" />
    288 
    289 <?php $wp_list_table->display(); ?>
    290 
    291 </form>
    292 <br class="clear" />
     176*/
     177?>
    293178
    294179<?php
    … …  
    318203}
    319204?>
    320 </div>
     205</div><!-- .wrap -->
     206
     207<script id="tmpl-theme" type="text/template">
     208        <div class="theme-screenshot">
     209                <img src="{{ data.screenshot[0] }}" alt="" />
     210        </div>
     211        <div class="theme-author"><?php printf( __( 'By %s' ), '{{ data.author }}' ); ?></div>
     212        <h3 class="theme-name">{{ data.name }}</h3>
     213        <div class="theme-actions">
     214
     215        <# if ( data.active ) { #>
     216                <span class="current-label"><?php _e( 'Current Theme' ); ?></span>
     217                <# if ( wp.themes.data.settings['customizeURI'] ) { #>
     218                        <a class="button button-primary hide-if-no-customize" href="{{ wp.themes.data.settings['customizeURI'] }}"><?php _e( 'Customize' ); ?></a>
     219                <# } #>
     220        <# } else { #>
     221                <a class="button button-primary activate" href="{{{ data.actions['activate'] }}}"><?php _e( 'Activate' ); ?></a>
     222                <a class="button button-secondary preview" href="{{{ data.actions['customize'] }}}"><?php _e( 'Live Preview' ); ?></a>
     223        <# } #>
     224
     225        </div>
     226
     227        <# if ( data.hasUpdate ) { #>
     228                <a class="theme-update"><?php _e( 'Update Available' ); ?></a>
     229        <# } #>
     230
     231        <# if ( ! data.active ) { #>
     232                <a href="{{{ data.actions.delete }}}" class="delete-theme"><?php _e( 'Delete' ); ?></a>
     233        <# } #>
     234</script>
     235
     236<script id="tmpl-theme-search" type="text/template">
     237        <input type="text" name="theme-search" id="theme-search" placeholder="<?php esc_attr_e( 'Search...' ); ?>" />
     238</script>
     239
     240<script id="tmpl-theme-single" type="text/template">
     241        <div class="theme-backdrop"></div>
     242        <div class="theme-wrap">
     243                <div class="theme-utility">
     244                        <div alt="<?php _e( 'Close overlay' ); ?>" class="back dashicons dashicons-no"></div>
     245                        <div alt="<?php _e( 'Show previous theme' ); ?>" class="left dashicons dashicons-no"></div>
     246                        <div alt="<?php _e( 'Show next theme' ); ?>" class="right dashicons dashicons-no"></div>
     247                </div>
     248
     249                <div class="theme-screenshots" id="theme-screenshots">
     250                        <div class="screenshot first"><img src="{{ data.screenshot[0] }}" alt="" /></div>
     251                <#
     252                        if ( _.size( data.screenshot ) > 1 ) {
     253                                _.each ( data.screenshot, function( image ) {
     254                #>
     255                                <div class="screenshot thumb"><img src="{{ image }}" alt="" /></div>
     256                <#
     257                                });
     258                        }
     259                #>
     260                </div>
     261
     262                <div class="theme-info">
     263                        <# if ( data.active ) { #>
     264                                <span class="current-label"><?php _e( 'Current Theme' ); ?></span>
     265                        <# } #>
     266                        <h3 class="theme-name">{{ data.name }}<span class="theme-version"><?php _e('Version: '); ?> {{ data.version }}</span></h3>
     267                        <h4 class="theme-author"><?php printf( __( 'By %s' ), '<a href="{{ data.authorURI }}">{{ data.author }}</a>' ); ?></h4>
     268
     269                        <# if ( data.hasUpdate ) { #>
     270                        <div class="theme-update-message">
     271                                <a class="theme-update"><?php _e( 'Update Available' ); ?></a>
     272                                <p>{{{ data.update }}}</p>
     273                        </div>
     274                        <# } #>
     275                        <p class="theme-description">{{{ data.description }}}</p>
     276
     277                        <# if ( data.parent ) { #>
     278                                <p class="parent-theme"><?php printf( __( 'This is a child theme of <strong>%s</strong>.' ), '{{ data.parent }}' ); ?></p>
     279                        <# } #>
     280
     281                        <# if ( data.tags.length !== 0 ) { #>
     282                                <p class="theme-tags">
     283                                        <span><?php _e( 'Tags:' ); ?></span>
     284                                        {{{ data.tags.join( ', ' ).replace( /-/g, ' ' ) }}}
     285                                </p>
     286                        <# } #>
     287                </div>
     288        </div>
     289
     290        <div class="theme-actions">
     291                <div class="active-theme">
     292                        <a href="{{{ wp.themes.data.settings.customizeURI }}}" class="button button-primary hide-if-no-customize"><?php _e( 'Customize' ); ?></a>
     293                        <a class="button button-secondary" href="<?php echo admin_url( 'nav-menus.php' ); ?>"><?php _e( 'Menus' ); ?></a>
     294                        <a class="button button-secondary" href="<?php echo admin_url( 'widgets.php' ); ?>"><?php _e( 'Widgets' ); ?></a>
     295                </div>
     296                <div class="inactive-theme">
     297                        <a href="{{{ data.actions.activate }}}" class="button button-primary"><?php _e( 'Activate' ); ?></a>
     298                        <a href="{{{ data.actions.customize }}}" class="button button-secondary"><?php _e( 'Live Preview' ); ?></a>
     299                </div>
     300
     301                <# if ( ! data.active ) { #>
     302                        <a href="{{{ data.actions.delete }}}" class="delete-theme"><?php _e( 'Delete' ); ?></a>
     303                <# } #>
     304        </div>
     305</script>
    321306
    322307<?php require( ABSPATH . 'wp-admin/admin-footer.php' ); ?>
Note: See TracChangeset for help on using the changeset viewer.