WordPress.org
Get WordPress

Make WordPress Core

Ticket #27055: 27055.1.diff

File 27055.1.diff, 16.4 KB (added by matveb, 12 years ago)

Prototype using theme.js Backbone code and UI design

  • wp-admin/includes/theme.php

     
    452452         */
    453453        $prepared_themes = apply_filters( 'wp_prepare_themes_for_js', $prepared_themes );
    454454        return array_values( $prepared_themes );
     455}
     456
     457
     458/**
     459 * Get public themes from the themes directory
     460 * and prepare them for JavaScript
     461 *
     462 * @since 3.8.0
     463 *
     464 * @uses themes_api themes_directory_sections
     465 * @return array with $theme objects
     466 */
     467function prepare_public_themes_for_js( $themes = array() ) {
     468
     469        $sections = array(
     470                'featured' => __( 'Featured Themes' ),
     471                'popular'  => __( 'Popular Themes' ),
     472                'new'      => __( 'Newest Themes' ),
     473        );
     474
     475        $sections = array_keys( $sections );
     476
     477        $args = array(
     478                'page' => 1,
     479                'per_page' => 12,
     480        );
     481
     482        foreach ( $sections as $section ) {
     483                $args['browse'] = $section;
     484                $themes[ $section ] = themes_api( 'query_themes', $args );
     485        }
     486
     487        return $themes;
    455488}
     489 No newline at end of file

  • wp-admin/js/theme.js

     
    1212themes.data = _wpThemeSettings;
    1313l10n = themes.data.l10n;
    1414
     15// Shortcut for (bool) isBrowsing check
     16themes.isInstall = themes.data.settings.isBrowsing;
     17
    1518// Setup app structure
    1619_.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template });
    1720
    … …  
    5558                this.$el.append( '<br class="clear"/>' );
    5659        },
    5760
     61        // Defines search element container
     62        searchContainer: $( '#wpbody h2:first' ),
     63
    5864        // Search input and view
    5965        // for current theme collection
    6066        search: function() {
    … …  
    7076
    7177                // Render and append after screen title
    7278                view.render();
    73                 $('#wpbody h2:first')
     79                this.searchContainer
    7480                        .append( $.parseHTML( '<label class="screen-reader-text" for="theme-search-input">' + l10n.search + '</label>' ) )
    7581                        .append( view.el );
    7682        },
    … …  
    749755        }
    750756};
    751757
     758// --------------------
     759// PUBLIC THEME BROWSER
     760// --------------------
     761//
     762// The public theme browser relies on the basic structure of the script
     763// but overwrites some aspects of the main views
     764//
     765// The theme collection is the same but models have different attributes
     766// as determined by the public themes_api
     767//
     768// @ bool check if it's the 'browsing themes' screen
     769if ( themes.isInstall ) {
     770
     771        // Extend the main view controller
     772        // @see themes.view.Appearance {}
     773        //
     774        // Overwrites properties and functions as needed
     775        _.extend( themes.view.Appearance.prototype, {
     776
     777                el: '#wpbody-content .wrap',
     778
     779                // Register events for sorting and filters in theme-navigation
     780                events: {
     781                        'click .theme-section': 'setSort',
     782                        'click .theme-filter': 'setFilter'
     783                },
     784
     785                // Handles all the rendering of the public theme directory
     786                install: function( section ) {
     787                        // Create a new collection with the proper theme data
     788                        // for each section
     789                        this.collection = new themes.Collection( themes.data.browse.publicThemes[ section ].themes );
     790
     791                        // Set ups the view and passes the section argument
     792                        this.view = new themes.view.Themes({
     793                                collection: this.collection,
     794                                section: section,
     795                                parent: this
     796                        });
     797
     798                        // Reset pagination every time the install view handler is run
     799                        this.page = 0;
     800
     801                        // Render and append
     802                        this.$el.find( '.themes' ).remove();
     803                        this.view.render();
     804                        this.$el.find( '.theme-browser' ).append( this.view.el );
     805                },
     806
     807                // Initial render method
     808                render: function() {
     809                        this.search();
     810                        return this.install( this.options.section );
     811                },
     812
     813                // Sorting navigation
     814                setSort: function( event ) {
     815                        var $el = $( event.target ),
     816                                sort = $el.data( 'sort' );
     817
     818                        // Bail if this is already active
     819                        if ( $el.hasClass( this.activeClass ) ) {
     820                                return;
     821                        }
     822
     823                        $( '.theme-section' ).removeClass( this.activeClass );
     824                        $el.addClass( this.activeClass );
     825
     826                        this.install( sort );
     827                },
     828
     829                // Top filters
     830                setFilter: function( event ) {
     831                        var $el = $( event.target ),
     832                                filter = $el.data( 'filter' );
     833
     834                        // Bail if this is already active
     835                        if ( $el.hasClass( this.activeClass ) ) {
     836                                return;
     837                        }
     838
     839                        $( '.theme-filter' ).removeClass( this.activeClass );
     840                        $el.addClass( this.activeClass );
     841
     842                        //
     843                },
     844
     845                activeClass: 'current',
     846
     847                // Overwrite search container class to append search
     848                // in new location
     849                searchContainer: $( '.theme-navigation' )
     850        });
     851
     852        // Overwrite main application initializer
     853        themes.Run.init = function() {
     854                // Initializes the main view
     855                // and bootstraps the default sorting section
     856
     857                // Set up the view
     858                // Passes the default 'section' as an option
     859                this.view = new themes.view.Appearance({
     860                        el: $( '#appearance' ),
     861                        section: 'featured'
     862                });
     863
     864                // Render results
     865                this.render();
     866        }
     867
     868}
     869
    752870// Ready...
    753871jQuery( document ).ready(
    754872

  • wp-admin/css/wp-admin.css

     
    79907990
    79917991
    79927992/*------------------------------------------------------------------------------
    7993   16.2 - Install Themes
     7993  16.1 - Install Themes
    79947994------------------------------------------------------------------------------*/
    7995 
    7996 .theme-install-php h4 {
    7997         margin: 2.5em 0 8px;
     7995.theme-install-php h2 .upload {
     7996        margin-left: 10px;
    79987997}
    7999 
    8000 .theme-install-php .tablenav {
    8001         height: auto;
     7998.theme-navigation {
     7999        background: #fff;
     8000        box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
     8001        -moz-box-sizing: border-box;
     8002        box-sizing: border-box;
     8003        color: #555;
     8004        display: inline-block;
     8005        font-size: 13px;
     8006        margin: 20px 0 30px;
     8007        padding: 0 20px;
     8008        position: relative;
     8009        width: 100%;
    80028010}
    8003 
    8004 .theme-install-php .spinner {
    8005         margin-top: 9px;
    8006 }
    8007 
    8008 .available-theme {
     8011.theme-section {
     8012        color: #666;
     8013        cursor: pointer;
    80098014        display: inline-block;
    8010         margin-right: 10px;
    8011         overflow: hidden;
    8012         padding: 20px 20px 20px 0;
    8013         vertical-align: top;
    8014         width: 300px;
     8015        margin: 0 10px;
     8016        padding: 15px 0;
    80158017}
    8016 
    8017 .available-theme .screenshot {
    8018         width: 300px;
    8019         height: 225px;
    8020         display: block;
    8021         border: 1px solid #ccc;
    8022         margin-bottom: 10px;
    8023         overflow: hidden;
    8024         background-color: #fff;
     8018.theme-section.current {
     8019        border-bottom: 4px solid #666;
     8020        color: #222;
    80258021}
    8026 
    8027 .available-theme img {
    8028         width: 300px;
     8022.theme-top-filters {
     8023        display: inline-block;
     8024        border-left: 1px solid #ddd;
     8025        padding-bottom: 4px;
     8026        padding-left: 20px;
     8027        margin-left: 20px;
    80298028}
    8030 
    8031 .available-theme h3 {
    8032         margin: 15px 0 0;
     8029.theme-navigation .theme-filter {
     8030        color: #666;
     8031        cursor: pointer;
     8032        display: inline-block;
     8033        margin: 0 10px;
     8034        padding: 4px 5px;
    80338035}
    8034 
    8035 .available-theme .theme-author {
    8036         line-height: 18px;
     8036.theme-navigation .theme-filter.current {
     8037        background: rgb(46, 162, 204);
     8038        border-radius: 3px;
     8039        color: #fff;
    80378040}
    8038 
    8039 .available-theme .action-links {
    8040         margin-top: 10px;
    8041         overflow: hidden;
     8041.theme-install-php .theme-search {
     8042        position: absolute;
     8043                right: 10px;
     8044                top: 9px;
     8045        font-size: 16px;
     8046        font-weight: 300;
     8047        line-height: 1.5;
     8048        width: 280px;
    80428049}
    8043 
    8044 .available-theme a.screenshot:focus {
    8045         border-color: #777;
     8050.add-new-theme {
     8051        display: none !important;
    80468052}
    80478053
    8048 .available-theme .action-links li {
    8049         float: left;
    8050         padding-right: 10px;
    8051         margin-right: 10px;
    8052         border-right: 1px solid #dfdfdf;
     8054.rating {
     8055        margin: 30px 0;
    80538056}
    8054 
    8055 .available-theme .action-links li {
    8056         padding-right: 8px;
    8057         margin-right: 8px;
     8057.rating span:before {
     8058        color: #E6B800;
     8059        content: "\f154";
     8060        display: inline-block;
     8061        -webkit-font-smoothing: antialiased;
     8062        font: normal 20px/1 'dashicons';
     8063        vertical-align: top;
    80588064}
    8059 
    8060 .ie8 .available-theme .action-links li {
    8061         padding-right: 7px;
    8062         margin-right: 7px;
     8065/* Half stars */
     8066.rating-10 span.one:before,
     8067.rating-30 span.two:before,
     8068.rating-50 span.three:before,
     8069.rating-70 span.four:before,
     8070.rating-90 span.five:before {
     8071        content: "\f459";
    80638072}
    8064 
    8065 .available-theme .action-links li:last-child {
    8066         padding-right: 0;
    8067         margin-right: 0;
    8068         border-right: 0;
     8073/* Full stars */
     8074.rating-20 span.one:before {
     8075        content: "\f155";
    80698076}
    8070 
    8071 .available-theme .action-links .delete-theme {
    8072         float: right;
    8073         margin-left: 8px;
    8074         margin-right: 0;
     8077.rating-30 span.one:before,
     8078.rating-40 span.one:before,
     8079.rating-40 span.two:before {
     8080        content: "\f155";
    80758081}
    8076 
    8077 .available-theme .action-links .delete-theme a {
    8078         color: red;
    8079         padding: 2px;
     8082.rating-50 span.one:before,
     8083.rating-50 span.two:before,
     8084.rating-60 span.one:before,
     8085.rating-60 span.two:before,
     8086.rating-60 span.three:before {
     8087        content: "\f155";
    80808088}
    8081 
    8082 .available-theme .action-links .delete-theme a:hover {
    8083         background: red;
    8084         color: #fff;
    8085         text-decoration: none;
     8089.rating-70 span.one:before,
     8090.rating-70 span.two:before,
     8091.rating-70 span.three:before,
     8092.rating-80 span.one:before,
     8093.rating-80 span.two:before,
     8094.rating-80 span.three:before,
     8095.rating-80 span.four:before {
     8096        content: "\f155";
    80868097}
    80878098
    8088 .available-theme .action-links p {
    8089         float: left;
     8099.rating-90 span.one:before,
     8100.rating-90 span.two:before,
     8101.rating-90 span.three:before,
     8102.rating-90 span.four:before,
     8103.rating-100 span.one:before,
     8104.rating-100 span.two:before,
     8105.rating-100 span.three:before,
     8106.rating-100 span.four:before,
     8107.rating-100 span.five:before {
     8108        content: "\f155";
    80908109}
    80918110
    8092 /* Allow for three-up in small windows when sidebar is collapsed */
    8093 @media only screen and (max-width: 1200px) {
    8094         .folded .available-theme,
    8095         .folded .available-theme .screenshot {
    8096                 width: 300px;
    8097         }
    8098 
    8099         .folded .available-theme .screenshot {
    8100                 height: 225px;
    8101         }
    8102 }
    8103 
    8104 /* Adjust three-up display in smaller windows when sidebar is collapsed */
    8105 @media only screen and (max-width: 1079px) {
    8106         .folded .available-theme,
    8107         .folded .available-theme .screenshot {
    8108                 width: 270px;
    8109         }
    8110 
    8111         .folded .available-theme .screenshot {
    8112                 height: 203px;
    8113         }
    8114 }
    8115 
    8116 /* Allow for three-up on 1024px wide screens, e.g. tablets */
    8117 @media only screen and (max-width: 1200px) {
    8118         .available-theme,
    8119         .available-theme .screenshot {
    8120                 width: 240px;
    8121         }
    8122 
    8123         .available-theme .screenshot {
    8124                 height: 180px;
    8125         }
    8126 
    8127         .available-theme img {
    8128                 width: 100%;
    8129         }
    8130 }
    8131 
    8132 /* @todo: surely this belongs elsewhere */
    8133 #post-body ul.add-menu-item-tabs li.tabs a {
    8134         font-weight: 600;
    8135         text-decoration: none;
    8136 }
    8137 
    81388111#TB_window {
    81398112        border: 1px solid #333;
    81408113}

  • wp-admin/theme-install.php

     
    2020        exit();
    2121}
    2222
    23 $wp_list_table = _get_list_table('WP_Theme_Install_List_Table');
    24 $pagenum = $wp_list_table->get_pagenum();
    25 $wp_list_table->prepare_items();
     23// $wp_list_table = _get_list_table('WP_Theme_Install_List_Table');
     24// $pagenum = $wp_list_table->get_pagenum();
     25// $wp_list_table->prepare_items();
    2626
    27 $title = __('Install Themes');
     27$title = __( 'Add Themes' );
    2828$parent_file = 'themes.php';
    29 if ( !is_network_admin() )
     29
     30if ( ! is_network_admin() ) {
    3031        $submenu_file = 'themes.php';
     32}
    3133
    32 wp_enqueue_script( 'theme-install' );
     34// wp_enqueue_script( 'theme-install' );
    3335wp_enqueue_script( 'theme-preview' );
    3436
    35 $body_id = $tab;
     37wp_localize_script( 'theme', '_wpThemeSettings', array(
     38        'themes'   => false,
     39        'settings' => array(
     40                'isBrowsing'    => (bool) ( get_current_screen()->id == 'theme-install' ),
     41                'canInstall'    => ( ! is_multisite() && current_user_can( 'install_themes' ) ),
     42                'installURI'    => ( ! is_multisite() && current_user_can( 'install_themes' ) ) ? admin_url( 'theme-install.php' ) : null,
     43                'root'          => parse_url( admin_url( 'theme-install.php' ), PHP_URL_PATH ),
     44        ),
     45        'l10n' => array(
     46                'addNew' => __( 'Add New Theme' ),
     47                'search'  => __( 'Search Themes' ),
     48                'searchPlaceholder' => __( 'Search themes...' ),
     49        ),
     50        'browse' => array(
     51                'sections' => apply_filters( 'install_theme_sections', array(
     52                        'featured' => __( 'Featured Themes' ),
     53                        'popular'  => __( 'Popular Themes' ),
     54                        'new'      => __( 'Newest Themes' ),
     55                ) ),
     56                'publicThemes' => ( get_current_screen()->id == 'theme-install' ) ? prepare_public_themes_for_js() : null,
     57        ),
     58) );
    3659
     60wp_enqueue_script( 'theme' );
     61
     62// $body_id = $tab;
     63
    3764/**
    3865 * Fires before each of the tabs are rendered on the Install Themes page.
    3966 *
    … …  
    4370 *
    4471 * @since 2.8.0
    4572 */
    46 do_action( "install_themes_pre_{$tab}" );
     73// do_action( "install_themes_pre_{$tab}" );
    4774
    4875$help_overview =
    4976        '<p>' . sprintf(__('You can find additional themes for your site by using the Theme Browser/Installer on this screen, which will display themes from the <a href="%s" target="_blank">WordPress.org Theme Directory</a>. These themes are designed and developed by third parties, are available free of charge, and are compatible with the license WordPress uses.'), 'http://wordpress.org/themes/') . '</p>' .
    … …  
    74101
    75102include(ABSPATH . 'wp-admin/admin-header.php');
    76103?>
    77 <div class="wrap">
    78 <h2><?php echo esc_html( $title ); ?></h2>
    79 <?php
     104<div id="appearance" class="wrap">
     105        <h2>
     106                <?php echo esc_html( $title ); ?>
     107                <a class="upload button button-secondary"><?php esc_html_e( 'Upload Theme' ); ?></a>
     108        </h2>
    80109
    81 $wp_list_table->views(); ?>
     110        <div class="theme-navigation">
     111                <span class="theme-section current" data-sort="featured"><?php esc_html_e( 'Featured' ); ?></span>
     112                <span class="theme-section" data-sort="popular"><?php esc_html_e( 'Popular' ); ?></span>
     113                <span class="theme-section" data-sort="new"><?php esc_html_e( 'New' ); ?></span>
     114                <div class="theme-top-filters">
     115                        <span class="theme-filter current" data-sort="all">All</span>
     116                        <span class="theme-filter" data-sort="photography">Photography</span>
     117                        <span class="theme-filter" data-sort="magazine">Magazine</span>
     118                        <span class="theme-filter" data-sort="blogging">Blogging</span>
     119                        <span class="theme-filter" data-sort="responsive">Responsive</span>
     120                </div>
     121        </div>
     122        <div class="theme-browser"></div>
     123        <div class="theme-overlay"></div>
    82124
    83 <br class="clear" />
     125        <br class="clear" />
    84126<?php
    85127/**
    86128 * Fires at the top of each of the tabs on the Install Themes page.
    … …  
    93135 *
    94136 * @param int $paged Number of the current page of results being viewed.
    95137 */
    96 do_action( "install_themes_{$tab}", $paged );
     138// do_action( "install_themes_{$tab}", $paged );
    97139?>
    98140</div>
     141
     142
     143<script id="tmpl-theme" type="text/template">
     144        <# if ( data.screenshot_url ) { #>
     145                <div class="theme-screenshot">
     146                        <img src="{{ data.screenshot_url }}" alt="" />
     147                </div>
     148        <# } else { #>
     149                <div class="theme-screenshot blank"></div>
     150        <# } #>
     151        <span class="more-details"><?php _e( 'Theme Details' ); ?></span>
     152        <div class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></div>
     153        <h3 class="theme-name">{{{ data.name }}}</h3>
     154
     155        <div class="theme-actions">
     156                <a class="button button-primary"><?php esc_html_e( 'Install' ); ?></a>
     157                <a class="button button-secondary preview"><?php esc_html_e( 'Preview' ); ?></a>
     158        </div>
     159</script>
     160
     161<script id="tmpl-theme-single" type="text/template">
     162        <div class="theme-backdrop"></div>
     163        <div class="theme-wrap">
     164                <div class="theme-header">
     165                        <button alt="<?php _e( 'Show previous theme' ); ?>" class="left dashicons dashicons-no"></button>
     166                        <button alt="<?php _e( 'Show next theme' ); ?>" class="right dashicons dashicons-no"></button>
     167                        <button alt="<?php _e( 'Close overlay' ); ?>" class="close dashicons dashicons-no"></button>
     168                </div>
     169                <div class="theme-about">
     170                        <div class="theme-screenshots">
     171                        <# if ( data.screenshot_url ) { #>
     172                                <div class="screenshot"><img src="{{ data.screenshot_url }}" alt="" /></div>
     173                        <# } else { #>
     174                                <div class="screenshot blank"></div>
     175                        <# } #>
     176                        </div>
     177
     178                        <div class="theme-info">
     179                                <h3 class="theme-name">{{{ data.name }}}<span class="theme-version"><?php printf( __( 'Version: %s' ), '{{{ data.version }}}' ); ?></span></h3>
     180                                <h4 class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></h4>
     181                                <p class="theme-description">{{{ data.description }}}</p>
     182
     183                                <div class="rating rating-{{ Math.round( data.rating / 10 ) * 10 }}">
     184                                        <span class="one"></span>
     185                                        <span class="two"></span>
     186                                        <span class="three"></span>
     187                                        <span class="four"></span>
     188                                        <span class="five"></span>
     189                                </div>
     190                        </div>
     191                </div>
     192
     193                <div class="theme-actions">
     194                        <a href="" class="button button-primary"><?php _e( 'Install' ); ?></a>
     195                        <a href="" class="button button-secondary"><?php _e( 'Preview' ); ?></a>
     196                        <a href="" class="button button-secondary"><?php _e( 'Download' ); ?></a>
     197                </div>
     198        </div>
     199</script>
     200
    99201<?php
    100202include(ABSPATH . 'wp-admin/admin-footer.php');