Changeset 27499 for trunk/src/wp-admin/theme-install.php

Timestamp:

03/11/2014 07:46:27 AM (11 years ago)

Author:

nacin

Message:

Bring the theme browsing experience from 3.8 to the theme installer. First pass.

props matveb with assists from me and gcorne.
see #27055.

File:

• trunk/src/wp-admin/theme-install.php (modified) (5 diffs)

trunk/src/wp-admin/theme-install.php

@@ -7 +7 @@
  */
 
-if ( !defined( 'IFRAME_REQUEST' ) && isset( $_GET['tab'] ) && ( 'theme-information' == $_GET['tab'] ) )
-    define( 'IFRAME_REQUEST', true );
-
 /** WordPress Administration Bootstrap */
 require_once( dirname( __FILE__ ) . '/admin.php' );
+require( ABSPATH . 'wp-admin/includes/theme-install.php' );
+
+wp_reset_vars( array( 'tab' ) );
 
 if ( ! current_user_can('install_themes') )
@@ -21 +21 @@
 }
 
-$wp_list_table = _get_list_table('WP_Theme_Install_List_Table');
-$pagenum = $wp_list_table->get_pagenum();
-$wp_list_table->prepare_items();
-
-$title = __('Install Themes');
+$title = __( 'Add Themes' );
 $parent_file = 'themes.php';
-if ( !is_network_admin() )
+
+if ( ! is_network_admin() ) {
     $submenu_file = 'themes.php';
-
-wp_enqueue_script( 'theme-install' );
-wp_enqueue_script( 'theme-preview' );
-
-$body_id = $tab;
+}
+
+$sections = array(
+    'featured' => __( 'Featured Themes' ),
+    'popular'  => __( 'Popular Themes' ),
+    'new'      => __( 'Newest Themes' ),
+);
+
+wp_localize_script( 'theme', '_wpThemeSettings', array(
+    'themes'   => false,
+    'settings' => array(
+        'isInstall'     => true,
+        'canInstall'    => current_user_can( 'install_themes' ),
+        'installURI'    => current_user_can( 'install_themes' ) ? self_admin_url( 'theme-install.php' ) : null,
+        'adminUrl'      => parse_url( self_admin_url(), PHP_URL_PATH ),
+        'updateURI'     => self_admin_url( 'update.php' ),
+        '_nonceInstall' => wp_create_nonce( 'install-theme' )
+    ),
+    'l10n' => array(
+        'addNew' => __( 'Add New Theme' ),
+        'search'  => __( 'Search Themes' ),
+        'searchPlaceholder' => __( 'Search themes...' ),
+        'upload' => __( 'Upload Theme' ),
+        'back'   => __( 'Back' ),
+        'error'  => __( 'There was a problem trying to load the themes. Please, try again.' ),
+    ),
+    'browse' => array(
+        'sections' => $sections,
+    ),
+) );
+
+wp_enqueue_script( 'theme' );
 
 /**
@@ -44 +68 @@
  * @since 2.8.0
  */
-do_action( "install_themes_pre_{$tab}" );
+if ( $tab ) {
+    do_action( "install_themes_pre_{$tab}" );
+}
 
 $help_overview =
@@ -74 +100 @@
 
 include(ABSPATH . 'wp-admin/admin-header.php');
+
 ?>
 <div class="wrap">
-<h2><?php echo esc_html( $title ); ?></h2>
-<?php
-
-$wp_list_table->views(); ?>
-
-<br class="clear" />
+    <h2>
+        <?php echo esc_html( $title ); ?>
+        <a class="upload button button-secondary"><?php esc_html_e( 'Upload Theme' ); ?></a>
+    </h2>
+
+    <div class="upload-theme">
+    <?php install_themes_upload(); ?>
+    </div>
+
+    <div class="theme-navigation">
+        <span class="theme-count"></span>
+        <span class="theme-section current" data-sort="featured"><?php esc_html_e( 'Featured' ); ?></span>
+        <span class="theme-section" data-sort="popular"><?php esc_html_e( 'Popular' ); ?></span>
+        <span class="theme-section" data-sort="new"><?php esc_html_e( 'Latest' ); ?></span>
+        <div class="theme-top-filters">
+            <span class="theme-filter" data-filter="photoblogging">Photography</span>
+            <span class="theme-filter" data-filter="responsive-layout">Responsive</span>
+            <span class="theme-filter more-filters">More</span>
+        </div>
+        <div class="more-filters-container">
+            Display more filters.
+        </div>
+    </div>
+    <div class="theme-browser"></div>
+    <div class="theme-overlay"></div>
+    <div id="theme-installer" class="wp-full-overlay expanded"></div>
+
+    <span class="spinner"></span>
+
+    <br class="clear" />
 <?php
 /**
@@ -94 +145 @@
  * @param int $paged Number of the current page of results being viewed.
  */
-do_action( "install_themes_{$tab}", $paged );
+if ( $tab ) {
+    do_action( "install_themes_{$tab}", $paged );
+}
 ?>
 </div>
+
+<script id="tmpl-theme" type="text/template">
+    <# if ( data.screenshot_url ) { #>
+        <div class="theme-screenshot">
+            <img src="{{ data.screenshot_url }}" alt="" />
+        </div>
+    <# } else { #>
+        <div class="theme-screenshot blank"></div>
+    <# } #>
+    <span class="more-details"><?php _ex( 'Details &amp; Preview', 'theme' ); ?></span>
+    <div class="theme-author"><?php printf( __( 'By %s' ), '{{ data.author }}' ); ?></div>
+    <h3 class="theme-name">{{ data.name }}</h3>
+
+    <div class="theme-actions">
+        <a class="button button-primary" href="{{ data.installURI }}"><?php esc_html_e( 'Install' ); ?></a>
+        <a class="button button-secondary preview install-theme-preview" href="#"><?php esc_html_e( 'Preview' ); ?></a>
+    </div>
+</script>
+
+<script id="tmpl-theme-preview" type="text/template">
+    <div class="wp-full-overlay-sidebar">
+        <div class="wp-full-overlay-header">
+            <a href="" class="close-full-overlay button-secondary"><?php _e( 'Close' ); ?></a>
+            <a href="{{ data.installURI }}" class="button button-primary theme-install"><?php _e( 'Install' ); ?></a>
+        </div>
+        <div class="wp-full-overlay-sidebar-content">
+            <div class="install-theme-info">
+                <h3 class="theme-name">{{ data.name }}</h3>
+                <span class="theme-by"><?php printf( __( 'By %s' ), '{{ data.author }}' ); ?></span>
+
+                <img class="theme-screenshot" src="{{ data.screenshot_url }}" alt="" />
+
+                <div class="theme-details">
+                    <div class="rating rating-{{ Math.round( data.rating / 10 ) * 10 }}">
+                        <span class="one"></span>
+                        <span class="two"></span>
+                        <span class="three"></span>
+                        <span class="four"></span>
+                        <span class="five"></span>
+                        <p class="votes"><?php printf( __( 'Based on %s ratings.' ), '{{ data.num_ratings }}' ); ?></p>
+                    </div>
+                    <div class="theme-version"><?php printf( __( 'Version: %s' ), '{{ data.version }}' ); ?></div>
+                    <div class="theme-description">{{ data.description }}</div>
+                </div>
+            </div>
+        </div>
+        <div class="wp-full-overlay-footer">
+            <a href="" class="collapse-sidebar" title="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
+                <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
+                <span class="collapse-sidebar-arrow"></span>
+            </a>
+        </div>
+    </div>
+    <div class="wp-full-overlay-main">
+        <iframe src="{{ data.preview_url }}" />
+    </div>
+</script>
+
 <?php
 include(ABSPATH . 'wp-admin/admin-footer.php');