WordPress.org

Make WordPress Core

Changeset 20138


Ignore:
Timestamp:
03/07/12 17:35:17 (3 years ago)
Author:
koopersmith
Message:

Theme Customizer: Begin integration into the install process. Combine previews, details, and install into a single workflow. see #19910.

Location:
trunk/wp-admin
Files:
1 added
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/css/wp-admin.dev.css

    r20133 r20138  
    52255225} 
    52265226 
    5227 .wp-full-overlay.collapsed { 
     5227.wp-full-overlay.collapsed, 
     5228.wp-full-overlay.collapsed div.wp-full-overlay-header, 
     5229.wp-full-overlay.collapsed div.wp-full-overlay-footer { 
    52285230    left: -302px; 
    52295231} 
     
    52495251    bottom: 0; 
    52505252} 
     5253.wp-full-overlay.collapsed .wp-full-overlay-main { 
     5254    left: 0; 
     5255} 
    52515256 
    52525257.wp-full-overlay-sidebar div.wp-full-overlay-header, 
     
    53235328/* Animations */ 
    53245329.wp-full-overlay, 
    5325 .wp-full-overlay .collapse-sidebar { 
     5330.wp-full-overlay .collapse-sidebar, 
     5331.wp-full-overlay-sidebar div.wp-full-overlay-header, 
     5332.wp-full-overlay-sidebar div.wp-full-overlay-footer, 
     5333.wp-full-overlay-main { 
    53265334    -moz-transition-property: left, right, top, bottom; 
    53275335    -webkit-transition-property: left, right, top, bottom; 
     
    53485356} 
    53495357 
    5350 #customize-container iframe { 
     5358#customize-container iframe, 
     5359#theme-installer iframe { 
    53515360    height: 100%; 
    53525361    width: 100%; 
    53535362    z-index: 20; 
     5363} 
     5364 
     5365#theme-installer { 
     5366    display: none; 
     5367} 
     5368 
     5369.install-theme-info { 
     5370    display: none; 
     5371    padding: 45px 20px 15px; 
     5372} 
     5373 
     5374#theme-installer .install-theme-info { 
     5375    display: block; 
     5376} 
     5377 
     5378.install-theme-info .theme-install { 
     5379    float: right; 
     5380    margin-top: 18px; 
     5381} 
     5382 
     5383.install-theme-info .theme-name { 
     5384    font-size: 16px; 
     5385    line-height: 24px; 
     5386    margin-bottom: 0; 
     5387} 
     5388 
     5389.install-theme-info .theme-screenshot { 
     5390    margin-top: 15px; 
     5391    width: 258px; 
     5392    border: 1px solid #ccc; 
     5393} 
     5394 
     5395.install-theme-info .theme-version { 
     5396    margin: 15px 0; 
     5397    float: right; 
     5398} 
     5399 
     5400.install-theme-info .theme-rating { 
     5401    margin: 14px 0; 
     5402    width: 100px; 
     5403    height: 17px; 
     5404    float: left; 
     5405    background: url('../images/stars.png?ver=20120307') repeat-x bottom left; 
     5406} 
     5407.install-theme-info .theme-rating div { 
     5408    background: url('../images/stars.png?ver=20120307') repeat-x top left; 
     5409    height: 17px; 
     5410    float: left; 
     5411} 
     5412 
     5413.install-theme-info .theme-description { 
     5414    margin-top: 34px; 
     5415    padding-top: 1em; 
     5416    color: #777; 
     5417    line-height: 20px; 
    53545418} 
    53555419 
  • trunk/wp-admin/includes/class-wp-theme-install-list-table.php

    r20100 r20138  
    159159                ?></div> 
    160160        <?php } // end foreach $theme_names 
     161 
     162        ?> 
     163        <div id="theme-installer" class="wp-full-overlay"> 
     164            <a href="#" class="close-full-overlay"><?php printf( __( '&larr; Return to %s' ), get_admin_page_title() ); ?></a> 
     165            <a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>"><span></span></a> 
     166            <div class="wp-full-overlay-sidebar"> 
     167                <div class="wp-full-overlay-header"></div> 
     168                <div class="install-theme-info"></div> 
     169            </div> 
     170            <div class="wp-full-overlay-main"></div> 
     171        </div> 
     172        <?php 
    161173    } 
    162174 
     
    171183     */ 
    172184    function _js_vars() { 
    173         global $tab, $type;      
     185        global $tab, $type; 
    174186        parent::_js_vars( compact( 'tab', 'type' ) ); 
    175187    } 
  • trunk/wp-admin/includes/theme-install.php

    r20029 r20138  
    128128add_action('install_themes_upload', 'install_themes_upload', 10, 1); 
    129129 
    130 function display_theme($theme, $actions = null, $show_details = true) { 
     130/* 
     131 * Prints a theme on the Install Themes pages. 
     132 * 
     133 * @param object $theme An object that contains theme data returned by the WordPress.org API. 
     134 * 
     135 * Example theme data: 
     136 *   object(stdClass)[59] 
     137 *     public 'name' => string 'Magazine Basic' (length=14) 
     138 *     public 'slug' => string 'magazine-basic' (length=14) 
     139 *     public 'version' => string '1.1' (length=3) 
     140 *     public 'author' => string 'tinkerpriest' (length=12) 
     141 *     public 'preview_url' => string 'http://wp-themes.com/?magazine-basic' (length=36) 
     142 *     public 'screenshot_url' => string 'http://wp-themes.com/wp-content/themes/magazine-basic/screenshot.png' (length=68) 
     143 *     public 'rating' => float 80 
     144 *     public 'num_ratings' => int 1 
     145 *     public 'homepage' => string 'http://wordpress.org/extend/themes/magazine-basic' (length=49) 
     146 *     public 'description' => string 'A basic magazine style layout with a fully customizable layout through a backend interface. Designed by <a href="http://bavotasan.com">c.bavota</a> of <a href="http://tinkerpriestmedia.com">Tinker Priest Media</a>.' (length=214) 
     147 *     public 'download_link' => string 'http://wordpress.org/extend/themes/download/magazine-basic.1.1.zip' (length=66) 
     148 */ 
     149function display_theme( $theme ) { 
    131150    global $themes_allowedtags; 
    132151 
    133     if ( empty($theme) ) 
     152    if ( empty( $theme ) ) 
    134153        return; 
    135154 
    136     $name = wp_kses($theme->name, $themes_allowedtags); 
    137     $author = wp_kses($theme->author, $themes_allowedtags); 
    138     $desc = wp_kses($theme->description, $themes_allowedtags); 
    139     //if ( strlen($desc) > 30 ) 
    140     //  $desc = substr($desc, 0, 15) . '<span class="dots">...</span><span>' . substr($desc, -15) . '</span>'; 
    141  
    142     $preview_link = $theme->preview_url . '?TB_iframe=true&amp;width=600&amp;height=400'; 
    143     if ( !is_array($actions) ) { 
    144         $actions = array(); 
    145         $actions[] = '<a href="' . self_admin_url('theme-install.php?tab=theme-information&amp;theme=' . $theme->slug . 
    146                                         '&amp;TB_iframe=true&amp;tbWidth=500&amp;tbHeight=385') . '" class="thickbox thickbox-preview onclick" title="' . esc_attr(sprintf(__('Install &#8220;%s&#8221;'), $name)) . '">' . __('Install') . '</a>'; 
    147         if ( !is_network_admin() ) 
    148             $actions[] = '<a href="' . $preview_link . '" class="thickbox thickbox-preview onclick previewlink" title="' . esc_attr(sprintf(__('Preview &#8220;%s&#8221;'), $name)) . '">' . __('Preview') . '</a>'; 
    149         $actions = apply_filters('theme_install_action_links', $actions, $theme); 
    150     } 
    151  
    152     $actions = implode ( ' | ', $actions ); 
     155    $name   = wp_kses( $theme->name,   $themes_allowedtags ); 
     156    $author = wp_kses( $theme->author, $themes_allowedtags ); 
     157 
     158    $num_ratings = sprintf( _n( '(based on %s rating)', '(based on %s ratings)', $theme->num_ratings ), number_format_i18n( $theme->num_ratings ) ); 
     159 
     160    $preview_url   = add_query_arg( 'theme_preview', '1' ); 
     161    $preview_title = sprintf( __('Preview &#8220;%s&#8221;'), $name ); 
     162 
     163    $install_url = add_query_arg( array( 
     164        'action' => 'install-theme', 
     165        'theme'  => $theme->slug, 
     166    ), self_admin_url( 'update.php' ) ); 
     167 
    153168    ?> 
    154 <a class='thickbox thickbox-preview screenshot' 
    155     href='<?php echo esc_url($preview_link); ?>' 
    156     title='<?php echo esc_attr(sprintf(__('Preview &#8220;%s&#8221;'), $name)); ?>'> 
    157 <img src='<?php echo esc_url($theme->screenshot_url); ?>' width='150' /> 
    158 </a> 
    159 <h3><?php 
    160     /* translators: 1: theme name, 2: author name */ 
    161     printf( __( '%1$s <span>by %2$s</span>' ), $name, $author ); ?></h3> 
    162 <span class='action-links'><?php echo $actions ?></span> 
    163 <?php if ( $show_details ) { ?> 
    164 <span class="separator hide-if-no-js">| </span><a href="#theme_detail" class="theme-detail hide-if-no-js" tabindex='4'><?php _e('Details') ?></a> 
    165 <div class="themedetaildiv hide-if-js"> 
    166 <p><?php echo $desc ?></p> 
    167 <p><strong><?php _e('Version:') ?></strong> <?php echo wp_kses($theme->version, $themes_allowedtags) ?></p> 
    168 <?php if ( ! empty($theme->last_updated) ) : ?> 
    169 <p><strong><?php _e('Last Updated:') ?></strong> <span title="<?php echo $theme->last_updated ?>"><?php printf( __('%s ago'), human_time_diff(strtotime($theme->last_updated)) ) ?></span></p> 
    170 <?php endif; if ( ! empty($theme->requires) ) : ?> 
    171 <p><strong><?php _e('Requires WordPress Version:') ?></strong> <?php printf(__('%s or higher'), $theme->requires) ?></p> 
    172 <?php endif; if ( ! empty($theme->tested) ) : ?> 
    173 <p><strong><?php _e('Compatible up to:') ?></strong> <?php echo $theme->tested ?></p> 
    174 <?php endif; if ( !empty($theme->downloaded) ) : ?> 
    175 <p><strong><?php _e('Downloaded:') ?></strong> <?php printf(_n('%s time', '%s times', $theme->downloaded), number_format_i18n($theme->downloaded)) ?></p> 
    176 <?php endif; ?> 
    177 <div class="star-holder" title="<?php printf(_n('(based on %s rating)', '(based on %s ratings)', $theme->num_ratings), number_format_i18n($theme->num_ratings)) ?>"> 
    178     <div class="star star-rating" style="width: <?php echo esc_attr($theme->rating) ?>px"></div> 
    179     <div class="star star5"><img src="<?php echo admin_url('images/star.png?v=20110615'); ?>" alt="<?php esc_attr_e('5 stars') ?>" /></div> 
    180     <div class="star star4"><img src="<?php echo admin_url('images/star.png?v=20110615'); ?>" alt="<?php esc_attr_e('4 stars') ?>" /></div> 
    181     <div class="star star3"><img src="<?php echo admin_url('images/star.png?v=20110615'); ?>" alt="<?php esc_attr_e('3 stars') ?>" /></div> 
    182     <div class="star star2"><img src="<?php echo admin_url('images/star.png?v=20110615'); ?>" alt="<?php esc_attr_e('2 stars') ?>" /></div> 
    183     <div class="star star1"><img src="<?php echo admin_url('images/star.png?v=20110615'); ?>" alt="<?php esc_attr_e('1 star') ?>" /></div> 
    184 </div> 
    185 </div> 
    186 <?php } 
    187     /* 
    188      object(stdClass)[59] 
    189      public 'name' => string 'Magazine Basic' (length=14) 
    190      public 'slug' => string 'magazine-basic' (length=14) 
    191      public 'version' => string '1.1' (length=3) 
    192      public 'author' => string 'tinkerpriest' (length=12) 
    193      public 'preview_url' => string 'http://wp-themes.com/?magazine-basic' (length=36) 
    194      public 'screenshot_url' => string 'http://wp-themes.com/wp-content/themes/magazine-basic/screenshot.png' (length=68) 
    195      public 'rating' => float 80 
    196      public 'num_ratings' => int 1 
    197      public 'homepage' => string 'http://wordpress.org/extend/themes/magazine-basic' (length=49) 
    198      public 'description' => string 'A basic magazine style layout with a fully customizable layout through a backend interface. Designed by <a href="http://bavotasan.com">c.bavota</a> of <a href="http://tinkerpriestmedia.com">Tinker Priest Media</a>.' (length=214) 
    199      public 'download_link' => string 'http://wordpress.org/extend/themes/download/magazine-basic.1.1.zip' (length=66) 
    200      */ 
     169    <a class="screenshot" href="<?php echo esc_url( $preview_url ); ?>" title="<?php echo esc_attr( $preview_title ); ?>"> 
     170        <img src='<?php echo esc_url( $theme->screenshot_url ); ?>' width='150' /> 
     171    </a> 
     172 
     173    <h3><?php 
     174        /* translators: 1: theme name, 2: author name */ 
     175        printf( __( '%1$s <span>by %2$s</span>' ), $name, $author ); 
     176    ?></h3> 
     177 
     178    <div class="install-theme-info"> 
     179        <a class="theme-install button-primary" href="<?php echo wp_nonce_url( $install_url, 'install-theme_' . $theme->slug ); ?>"><?php _e( 'Install' ); ?></a> 
     180        <h3 class="theme-name"><?php echo $name; ?></h3> 
     181        <span class="theme-by"><?php printf( __( 'By %s' ), $author ); ?></span> 
     182        <img class="theme-screenshot" src="<?php echo esc_url( $theme->screenshot_url ); ?>" /> 
     183        <div class="theme-rating" title="<?php echo esc_attr( $num_ratings ); ?>"> 
     184            <div style="width:<?php echo esc_attr( intval( $theme->rating ) . 'px' ); ?>;"></div> 
     185        </div> 
     186        <div class="theme-version"> 
     187            <strong><?php _e('Version:') ?> </strong> 
     188            <?php echo wp_kses( $theme->version, $themes_allowedtags ); ?> 
     189        </div> 
     190        <div class="theme-description"> 
     191            <?php echo wp_kses( $theme->description, $themes_allowedtags ); ?> 
     192        </div> 
     193        <input class="theme-preview-url" type="hidden" value="<?php echo esc_url( $theme->preview_url ); ?>" /> 
     194    </div> 
     195    <?php 
    201196} 
    202197 
  • trunk/wp-admin/js/theme.dev.js

    r20094 r20138  
     1/* 
     2 * Theme Install 
     3 * 
     4 * Displays theme previews on theme install pages. 
     5 */ 
     6jQuery( function($) { 
     7    var preview = $('#theme-installer'), 
     8        info    = preview.find('.install-theme-info'), 
     9        panel   = preview.find('.wp-full-overlay-main'), 
     10        body    = $( document.body ); 
     11 
     12    preview.on( 'click', '.close-full-overlay', function( event ) { 
     13        preview.fadeOut( 200, function() { 
     14            panel.empty(); 
     15            body.removeClass('theme-installer-active full-overlay-active'); 
     16        }); 
     17        event.preventDefault(); 
     18    }); 
     19 
     20    preview.on( 'click', '.collapse-sidebar', function( event ) { 
     21        preview.toggleClass('collapsed'); 
     22        event.preventDefault(); 
     23    }); 
     24 
     25    $('#availablethemes').on( 'click', '.available-theme', function( event ) { 
     26        var src; 
     27 
     28        info.html( $(this).find('.install-theme-info').html() ); 
     29        src = info.find( '.theme-preview-url' ).val(); 
     30        panel.html( '<iframe src="' + src + '" />'); 
     31        preview.fadeIn( 200, function() { 
     32            body.addClass('theme-installer-active full-overlay-active'); 
     33        }); 
     34        event.preventDefault(); 
     35    }); 
     36}); 
     37 
    138var ThemeViewer; 
    239 
Note: See TracChangeset for help on using the changeset viewer.