Changeset 20730

Timestamp:

05/06/2012 11:06:47 PM (14 years ago)

Author:

koopersmith

Message:

Add 'Install now', 'Preview', and 'Details' links to theme install list items. fixes #20403.

Location:

trunk/wp-admin

Files:

• css/wp-admin.dev.css (modified) (2 diffs)
• includes/class-wp-theme-install-list-table.php (modified) (3 diffs)
• js/theme.dev.js (modified) (2 diffs)

trunk/wp-admin/css/wp-admin.dev.css

@@ -5374 +5374 @@
 }
 
-.install-theme-info .theme-version {
+.theme-details .theme-version {
         margin: 15px 0;
-        float: right;
-}
-
-.install-theme-info .theme-rating {
+        float: left;
+}
+
+.theme-details .theme-rating {
         margin: 14px 0;
         width: 100px;
         height: 17px;
-        float: left;
+        float: right;
         background: url('../images/stars.png?ver=20120307') repeat-x bottom left;
 }
 
-.install-theme-info .theme-rating div {
+.theme-details .theme-rating div {
         background: url('../images/stars.png?ver=20120307') repeat-x top left;
         height: 17px;
@@ -5393 +5393 @@
 }
 
-.install-theme-info .theme-description {
-        margin-top: 34px;
-        padding-top: 1em;
+.theme-details .theme-description {
+        float: left;
         color: #777;
         line-height: 20px;

trunk/wp-admin/includes/class-wp-theme-install-list-table.php

@@ -193 +193 @@
                 ) );
 
+                $actions = array();
+
+                $install_url = add_query_arg( array(
+                        'action' => 'install-theme',
+                        'theme'  => $theme->slug,
+                ), self_admin_url( 'update.php' ) );
+                $actions[] = '<a class="install-now" href="' . wp_nonce_url( $install_url, 'install-theme_' . $theme->slug ) . '" title="' . esc_attr( sprintf( __( 'Install %s' ), $name ) ) . '">' . __( 'Install Now' ) . '</a>';
+
+                $actions[] = '<a class="install-theme-preview" href="#" title="' . esc_attr( sprintf( __( 'Preview %s' ), $name ) ) . '">' . __( 'Preview' ) . '</a>';
+
+                $actions = apply_filters( 'theme_install_actions', $actions, $theme );
+
                 ?>
-                <a class="screenshot" href="<?php echo esc_url( $preview_url ); ?>" title="<?php echo esc_attr( $preview_title ); ?>">
+                <a class="screenshot install-theme-preview" href="<?php echo esc_url( $preview_url ); ?>" title="<?php echo esc_attr( $preview_title ); ?>">
                         <img src='<?php echo esc_url( $theme->screenshot_url ); ?>' width='150' />
                 </a>
@@ -200 +212 @@
                 <h3><?php echo $name; ?></h3>
                 <div class="theme-author"><?php printf( __( 'By %s' ), $author ); ?></div>
+
+                <div class="action-links">
+                        <ul>
+                                <?php foreach ( $actions as $action ): ?>
+                                        <li><?php echo $action; ?></li>
+                                <?php endforeach; ?>
+                                <li class="hide-if-no-js"><a href="#" class="theme-detail" tabindex='4'><?php _e('Details') ?></a></li>
+                        </ul>
+                </div>
 
                 <?php
@@ -278 +299 @@
                                 <img class="theme-screenshot" src="<?php echo esc_url( $theme->screenshot_url ); ?>" />
                         <?php endif; ?>
-                        <div class="theme-rating" title="<?php echo esc_attr( $num_ratings ); ?>">
-                                <div style="width:<?php echo esc_attr( intval( $theme->rating ) . 'px' ); ?>;"></div>
-                        </div>
-                        <div class="theme-version">
-                                <strong><?php _e('Version:') ?> </strong>
-                                <?php echo wp_kses( $theme->version, $themes_allowedtags ); ?>
-                        </div>
-                        <div class="theme-description">
-                                <?php echo wp_kses( $theme->description, $themes_allowedtags ); ?>
+                        <div class="theme-details">
+                                <div class="theme-rating" title="<?php echo esc_attr( $num_ratings ); ?>">
+                                        <div style="width:<?php echo esc_attr( intval( $theme->rating ) . 'px' ); ?>;"></div>
+                                </div>
+                                <div class="theme-version">
+                                        <strong><?php _e('Version:') ?> </strong>
+                                        <?php echo wp_kses( $theme->version, $themes_allowedtags ); ?>
+                                </div>
+                                <div class="theme-description">
+                                        <?php echo wp_kses( $theme->description, $themes_allowedtags ); ?>
+                                </div>
                         </div>
                         <input class="theme-preview-url" type="hidden" value="<?php echo esc_url( $theme->preview_url ); ?>" />

trunk/wp-admin/js/theme.dev.js

@@ -6 +6 @@
 jQuery( function($) {
         $('#availablethemes').on( 'click', '.theme-detail', function (event) {
-                $(this).parents('.action-links').siblings('.themedetaildiv').toggle();
+                var theme   = $(this).closest('.available-theme'),
+                        details = theme.find('.themedetaildiv');
+
+                if ( ! details.length ) {
+                        details = theme.find('.install-theme-info .theme-details');
+                        details = details.clone().addClass('themedetaildiv').appendTo( theme ).hide();
+                }
+
+                details.toggle();
                 event.preventDefault();
         });
@@ -35 +43 @@
         });
 
-        $('#availablethemes').on( 'click', '.installable-theme', function( event ) {
+        $('#availablethemes').on( 'click', '.install-theme-preview', function( event ) {
                 var src;
 
-                info.html( $(this).find('.install-theme-info').html() );
+                info.html( $(this).closest('.installable-theme').find('.install-theme-info').html() );
                 src = info.find( '.theme-preview-url' ).val();
                 panel.html( '<iframe src="' + src + '" />');