WordPress.org

Make WordPress Core

Ticket #27055: 27055.3.diff

File 27055.3.diff, 25.0 KB (added by matveb, 5 years ago)
  • 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/update.php

     
    199199
    200200                include_once ABSPATH . 'wp-admin/includes/theme-install.php'; //for themes_api..
    201201
    202                 check_admin_referer('install-theme_' . $theme);
     202                check_admin_referer( 'install-theme' );
    203203                $api = themes_api('theme_information', array('slug' => $theme, 'fields' => array('sections' => false, 'tags' => false) ) ); //Save on a bit of bandwidth.
    204204
    205205                if ( is_wp_error($api) )
  • 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
    16 _.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template });
     19_.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template, orgAPI: {} });
    1720
    1821themes.model = Backbone.Model.extend({});
    1922
     
    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() {
     
    6672                        return;
    6773                }
    6874
    69                 view = new themes.view.Search({ collection: self.collection });
     75                view = new themes.view.Search({
     76                        collection: self.collection,
     77                        parent: this
     78                });
    7079
    7180                // Render and append after screen title
    7281                view.render();
    73                 $('#wpbody h2:first')
     82                this.searchContainer
    7483                        .append( $.parseHTML( '<label class="screen-reader-text" for="theme-search-input">' + l10n.search + '</label>' ) )
    7584                        .append( view.el );
    7685        },
     
    749758        }
    750759};
    751760
     761// --------------------
     762// PUBLIC THEME BROWSER
     763// --------------------
     764//
     765// The public theme browser relies on the basic structure of the script
     766// but overwrites some aspects of the main views
     767//
     768// The theme collection is the same but models have different attributes
     769// as determined by the public themes_api
     770//
     771// @ bool check if it's the 'browsing themes' screen
     772if ( themes.isInstall ) {
     773
     774        // Extend the main view controller
     775        // @see themes.view.Appearance {}
     776        //
     777        // Overwrites properties and functions as needed
     778        _.extend( themes.view.Appearance.prototype, {
     779
     780                el: '#wpbody-content .wrap',
     781
     782                // Register events for sorting and filters in theme-navigation
     783                events: {
     784                        'click .theme-section': 'setSort',
     785                        'click .theme-filter': 'setFilter',
     786                        'click .more-filters': 'moreFilters'
     787                },
     788
     789                // Handles all the rendering of the public theme directory
     790                install: function( section ) {
     791                        // Create a new collection with the proper theme data
     792                        // for each section
     793                        this.collection = new themes.Collection( themes.data.browse.publicThemes[ section ].themes );
     794
     795                        // Set ups the view and passes the section argument
     796                        this.view = new themes.view.Themes({
     797                                collection: this.collection,
     798                                section: section,
     799                                parent: this
     800                        });
     801
     802                        // Reset pagination every time the install view handler is run
     803                        this.page = 0;
     804
     805                        // Render and append
     806                        this.$el.find( '.themes' ).remove();
     807                        this.view.render();
     808                        this.$el.find( '.theme-browser' ).append( this.view.el );
     809
     810                        this.uploader();
     811                },
     812
     813                // Initial render method
     814                render: function() {
     815                        this.search();
     816                        return this.install( this.options.section );
     817                },
     818
     819                // Sorting navigation
     820                setSort: function( event ) {
     821                        var $el = $( event.target ),
     822                                sort = $el.data( 'sort' );
     823
     824                        // Bail if this is already active
     825                        if ( $el.hasClass( this.activeClass ) ) {
     826                                return;
     827                        }
     828
     829                        $( '#theme-search-input' ).val( '' );
     830
     831                        $( '.theme-section, .theme-filter' ).removeClass( this.activeClass );
     832                        $el.addClass( this.activeClass );
     833
     834                        this.install( sort );
     835                },
     836
     837                // Filters and Tags
     838                setFilter: function( event ) {
     839                        var $el = $( event.target ),
     840                                filter = $el.data( 'filter' ),
     841                                self = this,
     842                                data;
     843
     844                        // Bail if this is already active
     845                        if ( $el.hasClass( this.activeClass ) ) {
     846                                return;
     847                        }
     848
     849                        $( '.theme-filter, .theme-section' ).removeClass( this.activeClass );
     850                        $el.addClass( this.activeClass );
     851
     852                        if ( ! filter ) {
     853                                return;
     854                        }
     855
     856                        // Construct the filter request
     857                        // using the default values
     858                        data = _.defaults( {}, themes.orgAPI.data );
     859
     860                        data.request = _.defaults({
     861                                tag: [ filter ]
     862                        }, themes.orgAPI.data.request );
     863
     864                        // Send Ajax POST request to api.wordpress.org/themes
     865                        $.ajax({
     866                                url: themes.orgAPI.url,
     867
     868                                // We want JSON data
     869                                dataType: 'json',
     870                                type: 'POST',
     871
     872                                // Request data
     873                                data: data,
     874
     875                                beforeSend: function() {
     876                                        // Spin it
     877                                        $( 'body' ).addClass( 'loading-themes' );
     878                                }
     879                        })
     880                                .done( function( data ) {
     881                                        console.log(data);
     882                                        // Update the collection with the queried data
     883                                        self.collection.reset( data.themes );
     884                                        // Trigger a collection refresh event to render the views
     885                                        self.collection.trigger( 'update' );
     886
     887                                        console.log(self.collection);
     888
     889                                        // Un-spin it
     890                                        $( 'body' ).removeClass( 'loading-themes' );
     891                        })
     892                                .fail( function() {
     893                                        // Fail
     894                        });
     895                },
     896
     897                activeClass: 'current',
     898
     899                // Overwrite search container class to append search
     900                // in new location
     901                searchContainer: $( '.theme-navigation' ),
     902
     903                uploader: function() {
     904                        $( 'a.upload.button' ).on( 'click', function() {
     905                                $( '.upload-theme' )
     906                                        .toggleClass( 'opened' )
     907                                        .hasClass( 'opened' ) ? $( this ).text( l10n.back ) : $( this ).text( l10n.upload );
     908                        });
     909                },
     910
     911                moreFilters: function( event ) {
     912                        $( 'body' ).toggleClass( 'more-filters-opened' );
     913                }
     914        });
     915
     916        // Extend the main Search view
     917        _.extend( themes.view.Search.prototype, {
     918
     919                events: {
     920                        'keyup': 'search'
     921                },
     922
     923                // Handles Ajax request for searching through themes in public repo
     924                search: function() {
     925                        var data,
     926                                self = this;
     927
     928                        this.collection = this.options.parent.view.collection;
     929
     930                        // Clear on escape.
     931                        if ( event.type === 'keyup' && event.which === 27 ) {
     932                                event.target.value = '';
     933                        }
     934
     935                        // Construct the main `search` request
     936                        // using the default values
     937                        data = _.defaults( {}, themes.orgAPI.data );
     938
     939                        data.request['search'] = event.target.value;
     940
     941                        // Intercept an [author] search.
     942                        //
     943                        // If input value starts with `author:` send a request
     944                        // for `author` instead of a regular `search`
     945                        if ( event.target.value.substring( 0, 7 ) === 'author:' ) {
     946                                data.request['search'] = '';
     947                                data.request['author'] = event.target.value.slice( 7 );
     948                        }
     949
     950                        // Send Ajax POST request to api.wordpress.org/themes
     951                        $.ajax({
     952                                url: themes.orgAPI.url,
     953
     954                                // We want JSON data
     955                                dataType: 'json',
     956                                type: 'POST',
     957
     958                                // Request data
     959                                data: data,
     960
     961                                beforeSend: function() {
     962                                        // Spin it
     963                                        $( 'body' ).addClass( 'loading-themes' );
     964                                }
     965                        })
     966                                .done( function( data ) {
     967                                        // Update the collection with the queried data
     968                                        self.collection.reset( data.themes );
     969                                        // Trigger a collection refresh event to render the views
     970                                        self.collection.trigger( 'update' );
     971
     972                                        // Un-spin it
     973                                        $( 'body' ).removeClass( 'loading-themes' );
     974                        })
     975                                .fail( function() {
     976                                        $( '#appearance' ).append( '<div class="error"><p>' + l10n['error'] + '</p></div>' );
     977                        });
     978                }
     979        });
     980
     981        // Set up the `theme` model with relevant action attributes
     982        _.extend( themes.model.prototype, {
     983
     984                // Adds attributes to the defaul data coming through the .org themes api
     985                // Map `id` to `slug` for shared code
     986                initialize: function() {
     987                        var actions, install, preview;
     988
     989                        // Install url for the theme
     990                        // using the install nonce
     991                        install = {
     992                                action: 'install-theme',
     993                                theme: this.get( 'slug' ),
     994                                _wpnonce: themes.data.settings._nonceInstall
     995                        }
     996
     997                        // Build the url query
     998                        install = themes.data.settings.updateURI + '?' + $.param( install );
     999
     1000                        // Preview url for the theme
     1001                        preview = {
     1002                                tab: 'theme-information',
     1003                                theme: this.get( 'slug' )
     1004                        }
     1005
     1006                        preview = themes.data.settings.installURI + '?' + $.param( preview );
     1007
     1008                        // Set the attributes
     1009                        this.set({
     1010                                installURI: install,
     1011                                previewURI: preview,
     1012                                id: this.get( 'slug' )
     1013                        });
     1014                }
     1015        });
     1016
     1017        // Store api.wordpress.org/themes values and structure
     1018        // for internal access
     1019        themes.orgAPI = {
     1020
     1021                // Default data request
     1022                data: {
     1023                        action: 'query_themes',
     1024                        request: {
     1025                                fields: {
     1026                                        tags: true,
     1027                                }
     1028                        }
     1029                },
     1030
     1031                url: 'http://api.wordpress.org/themes/info/1.1/?action=query_themes'
     1032        };
     1033
     1034        // Overwrite main application initializer
     1035        themes.Run.init = function() {
     1036                // Initializes the main view
     1037                // and bootstraps the default sorting section
     1038
     1039                // Set up the view
     1040                // Passes the default 'section' as an option
     1041                this.view = new themes.view.Appearance({
     1042                        el: $( '#appearance' ),
     1043                        section: 'featured'
     1044                });
     1045
     1046                // Render results
     1047                this.render();
     1048        }
     1049
     1050}
     1051
    7521052// Ready...
    7531053jQuery( document ).ready(
    7541054
  • wp-admin/css/themes.css

     
    2525        margin-left: 20px;
    2626}
    2727
    28 .themes-php .wrap .theme-count {
     28.themes-php .wrap .theme-count,
     29.theme-navigation .theme-count {
    2930        color: #fff;
    3031        -webkit-border-radius: 30px;
    3132        border-radius: 30px;
     
    10641065  16.2 - Install Themes
    10651066------------------------------------------------------------------------------*/
    10661067
    1067 .theme-install-php h4 {
    1068         margin: 2.5em 0 8px;
     1068.theme-install-php h2 .upload {
     1069        margin-left: 10px;
    10691070}
    1070 
    1071 .theme-install-php .tablenav {
    1072         height: auto;
     1071.theme-navigation {
     1072        background: #fff;
     1073        box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
     1074        -moz-box-sizing: border-box;
     1075        box-sizing: border-box;
     1076        color: #555;
     1077        display: inline-block;
     1078        font-size: 13px;
     1079        margin: 20px 0 30px;
     1080        padding: 0 20px;
     1081        position: relative;
     1082        width: 100%;
    10731083}
    1074 
    1075 .theme-install-php .spinner {
    1076         margin-top: 9px;
    1077 }
    1078 
    1079 .available-theme {
    1080         display: inline-block;
    1081         margin-right: 10px;
     1084.upload-theme {
     1085        /*background: #fff;
     1086        box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);*/
     1087        -moz-box-sizing: border-box;
     1088        box-sizing: border-box;
     1089        margin: 0px 0 0;
     1090        padding: 0;
     1091        width: 100%;
     1092        height: 0;
     1093        -webkit-transition: height 200ms;
     1094        transition: height 200ms;
    10821095        overflow: hidden;
    1083         padding: 20px 20px 20px 0;
    1084         vertical-align: top;
    1085         width: 300px;
     1096        position: relative;
     1097                top: 10px;
    10861098}
    1087 
    1088 .available-theme .screenshot {
    1089         width: 300px;
    1090         height: 225px;
     1099.upload-theme.opened {
    10911100        display: block;
    1092         border: 1px solid #ccc;
    1093         margin-bottom: 10px;
    1094         overflow: hidden;
    1095         background-color: #fff;
     1101        height: auto;
    10961102}
    1097 
    1098 .available-theme img {
    1099         width: 300px;
     1103.upload-theme .wp-upload-form {
     1104        background: #fafafa;
     1105        border: 1px solid #e5e5e5;
     1106        padding: 30px;
     1107        margin: 30px auto;
     1108        max-width: 380px;
    11001109}
    1101 
    1102 .available-theme h3 {
    1103         margin: 15px 0 0;
     1110.upload-theme .install-help {
     1111        color: #999;
     1112        font-size: 18px;
     1113        font-style: normal;
     1114        margin: 0;
     1115        padding: 40px 0 0;
     1116        text-align: center;
    11041117}
    1105 
    1106 .available-theme .theme-author {
    1107         line-height: 18px;
     1118.upload-theme.opened + .theme-navigation,
     1119.upload-theme.opened + .theme-navigation + .theme-browser {
     1120        display: none;
    11081121}
    1109 
    1110 .available-theme .action-links {
    1111         margin-top: 10px;
    1112         overflow: hidden;
     1122.theme-navigation .theme-count {
     1123        top: 3px;
     1124        margin-left: 0;
    11131125}
    1114 
    1115 .available-theme a.screenshot:focus {
    1116         border-color: #777;
     1126.theme-section,
     1127.theme-filter {
     1128        border-bottom: 4px solid #fff;
     1129        color: #666;
     1130        cursor: pointer;
     1131        display: inline-block;
     1132        margin: 0 10px;
     1133        padding: 15px 0;
     1134        -moz-transition: border-color .1s ease-in;
     1135        -webkit-transition: border-color .1s ease-in;
    11171136}
    1118 
    1119 .available-theme .action-links li {
    1120         float: left;
    1121         padding-right: 10px;
    1122         margin-right: 10px;
    1123         border-right: 1px solid #dfdfdf;
     1137.theme-section.current,
     1138.theme-filter.current {
     1139        border-bottom: 4px solid #666;
     1140        color: #222;
    11241141}
    1125 
    1126 .available-theme .action-links li {
    1127         padding-right: 8px;
    1128         margin-right: 8px;
     1142.theme-top-filters {
     1143        display: inline-block;
     1144        /*padding-bottom: 4px;
     1145        padding-left: 20px;
     1146        margin-left: 20px;*/
    11291147}
    1130 
    1131 .ie8 .available-theme .action-links li {
    1132         padding-right: 7px;
    1133         margin-right: 7px;
     1148.theme-navigation .more-filters {
     1149        color: #666;
     1150        cursor: pointer;
     1151        display: inline-block;
     1152        margin: 0 10px;
     1153        padding: 4px 5px;
     1154        -moz-transition: color .1s ease-in;
     1155        -webkit-transition: color .1s ease-in, background .1s ease-in;
    11341156}
    1135 
    1136 .available-theme .action-links li:last-child {
    1137         padding-right: 0;
    1138         margin-right: 0;
    1139         border-right: 0;
     1157body.more-filters-opened .more-filters,
     1158.theme-navigation .more-filters.current {
     1159        background: rgb(46, 162, 204);
     1160        border-radius: 2px;
     1161        border: none;
     1162        color: #fff;
    11401163}
    1141 
    1142 .available-theme .action-links .delete-theme {
    1143         float: right;
    1144         margin-left: 8px;
    1145         margin-right: 0;
     1164.theme-install-php .theme-search {
     1165        position: absolute;
     1166                right: 10px;
     1167                top: 9px;
     1168        font-size: 16px;
     1169        font-weight: 300;
     1170        line-height: 1.5;
     1171        width: 280px;
    11461172}
     1173.more-filters {
    11471174
    1148 .available-theme .action-links .delete-theme a {
    1149         color: red;
    1150         padding: 2px;
    11511175}
    1152 
    1153 .available-theme .action-links .delete-theme a:hover {
    1154         background: red;
     1176.more-filters:before {
     1177        color: #777;
     1178        text-align: center;
     1179        margin: 0 5px 0 0;
     1180        content: "\f111";
     1181        display: inline-block;
     1182        width: 16px;
     1183        height: 16px;
     1184        -webkit-font-smoothing: antialiased;
     1185        font-size: 16px;
     1186        line-height: 1;
     1187        font-family: "dashicons";
     1188        text-decoration: inherit;
     1189        font-weight: normal;
     1190        font-style: normal;
     1191        vertical-align: top;
     1192        -moz-transition: color .1s ease-in 0;
     1193        -webkit-transition: color .1s ease-in 0;
     1194        text-align: center;
     1195}
     1196.more-filters.current:before {
    11551197        color: #fff;
    1156         text-decoration: none;
    11571198}
    1158 
    1159 .available-theme .action-links p {
    1160         float: left;
     1199.more-filters-container {
     1200        display: none;
     1201        padding: 30px;
     1202        border-top: 1px solid #eee;
     1203        margin: 0 -20px;
     1204        background: #fafafa;
    11611205}
    1162 
    1163 /* Allow for three-up in small windows when sidebar is collapsed */
    1164 @media only screen and (max-width: 1200px) {
    1165         .folded .available-theme,
    1166         .folded .available-theme .screenshot {
    1167                 width: 300px;
    1168         }
    1169 
    1170         .folded .available-theme .screenshot {
    1171                 height: 225px;
    1172         }
     1206body.more-filters-opened .more-filters-container {
     1207        display: block;
    11731208}
    1174 
    1175 /* Adjust three-up display in smaller windows when sidebar is collapsed */
    1176 @media only screen and (max-width: 1079px) {
    1177         .folded .available-theme,
    1178         .folded .available-theme .screenshot {
    1179                 width: 270px;
    1180         }
    1181 
    1182         .folded .available-theme .screenshot {
    1183                 height: 203px;
    1184         }
     1209.theme-install-php .add-new-theme {
     1210        display: none !important;
    11851211}
    11861212
    1187 /* Allow for three-up on 1024px wide screens, e.g. tablets */
    1188 @media only screen and (max-width: 1200px) {
    1189         .available-theme,
    1190         .available-theme .screenshot {
    1191                 width: 240px;
    1192         }
    1193 
    1194         .available-theme .screenshot {
    1195                 height: 180px;
    1196         }
    1197 
    1198         .available-theme img {
    1199                 width: 100%;
    1200         }
     1213.rating {
     1214        margin: 30px 0;
    12011215}
    1202 
    1203 .feature-filter {
    1204         padding: 8px 12px 0;
     1216.rating span:before {
     1217        color: #E6B800;
     1218        content: "\f154";
     1219        display: inline-block;
     1220        -webkit-font-smoothing: antialiased;
     1221        font: normal 20px/1 'dashicons';
     1222        vertical-align: top;
    12051223}
     1224/* Half stars */
     1225.rating-10 span.one:before,
     1226.rating-30 span.two:before,
     1227.rating-50 span.three:before,
     1228.rating-70 span.four:before,
     1229.rating-90 span.five:before {
     1230        content: "\f459";
     1231}
     1232/* Full stars */
     1233.rating-20 span.one:before {
     1234        content: "\f155";
     1235}
     1236.rating-30 span.one:before,
     1237.rating-40 span.one:before,
     1238.rating-40 span.two:before {
     1239        content: "\f155";
     1240}
     1241.rating-50 span.one:before,
     1242.rating-50 span.two:before,
     1243.rating-60 span.one:before,
     1244.rating-60 span.two:before,
     1245.rating-60 span.three:before {
     1246        content: "\f155";
     1247}
     1248.rating-70 span.one:before,
     1249.rating-70 span.two:before,
     1250.rating-70 span.three:before,
     1251.rating-80 span.one:before,
     1252.rating-80 span.two:before,
     1253.rating-80 span.three:before,
     1254.rating-80 span.four:before {
     1255        content: "\f155";
     1256}
    12061257
    1207 .feature-filter .feature-group {
    1208         float: left;
    1209         margin: 5px 10px 10px;
     1258.rating-90 span.one:before,
     1259.rating-90 span.two:before,
     1260.rating-90 span.three:before,
     1261.rating-90 span.four:before,
     1262.rating-100 span.one:before,
     1263.rating-100 span.two:before,
     1264.rating-100 span.three:before,
     1265.rating-100 span.four:before,
     1266.rating-100 span.five:before {
     1267        content: "\f155";
    12101268}
    12111269
    1212 .feature-filter .feature-group li {
    1213         display: inline-block;
    1214         vertical-align: top;
    1215         list-style-type: none;
    1216         padding-right: 25px;
    1217         width: 150px;
     1270.loading-themes .theme-browser,
     1271.error .theme-browser {
     1272        display: none;
    12181273}
     1274.loading-themes .spinner {
     1275        display: block;
     1276        margin: 40px auto 0;
     1277        float: none;
     1278}
    12191279
    12201280/*------------------------------------------------------------------------------
    12211281  16.3 - Custom Header Screen
  • 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                'updateURI'     => admin_url( 'update.php' ),
     45                '_nonceInstall' => wp_create_nonce( 'install-theme' )
     46        ),
     47        'l10n' => array(
     48                'addNew' => __( 'Add New Theme' ),
     49                'search'  => __( 'Search Themes' ),
     50                'searchPlaceholder' => __( 'Search themes...' ),
     51                'upload' => __( 'Upload Theme' ),
     52                'back'   => __( 'Back' ),
     53                'error'  => __( 'There was a problem trying to load the themes. Please, try again.' ),
     54        ),
     55        'browse' => array(
     56                'sections' => apply_filters( 'install_theme_sections', array(
     57                        'featured' => __( 'Featured Themes' ),
     58                        'popular'  => __( 'Popular Themes' ),
     59                        'new'      => __( 'Newest Themes' ),
     60                ) ),
     61                'publicThemes' => ( get_current_screen()->id == 'theme-install' ) ? prepare_public_themes_for_js() : null,
     62        ),
     63) );
    3664
     65wp_enqueue_script( 'theme' );
     66
     67// $body_id = $tab;
     68
    3769/**
    3870 * Fires before each of the tabs are rendered on the Install Themes page.
    3971 *
     
    4375 *
    4476 * @since 2.8.0
    4577 */
    46 do_action( "install_themes_pre_{$tab}" );
     78// do_action( "install_themes_pre_{$tab}" );
    4779
    4880$help_overview =
    4981        '<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>' .
     
    73105);
    74106
    75107include(ABSPATH . 'wp-admin/admin-header.php');
     108
     109/**
     110 * Uploader
     111 */
     112function install_themes_upload() {
     113        ?>
     114        <div class="upload-theme">
     115                <p class="install-help"><?php _e( 'If you have a theme in a .zip format, you may install it by uploading it here.' ); ?></p>
     116                <form method="post" enctype="multipart/form-data" class="wp-upload-form" action="<?php echo self_admin_url('update.php?action=upload-theme'); ?>">
     117                        <?php wp_nonce_field( 'theme-upload'); ?>
     118                        <input type="file" name="themezip" />
     119                        <?php submit_button( __( 'Install Now' ), 'button', 'install-theme-submit', false ); ?>
     120                </form>
     121        </div>
     122        <?php
     123}
     124add_action( 'install_themes_upload', 'install_themes_upload', 10, 1 );
     125
    76126?>
    77 <div class="wrap">
    78 <h2><?php echo esc_html( $title ); ?></h2>
    79 <?php
     127<div id="appearance" class="wrap">
     128        <h2>
     129                <?php echo esc_html( $title ); ?>
     130                <a class="upload button button-secondary"><?php esc_html_e( 'Upload Theme' ); ?></a>
     131        </h2>
    80132
    81 $wp_list_table->views(); ?>
     133        <?php install_themes_upload(); ?>
    82134
    83 <br class="clear" />
     135        <div class="theme-navigation">
     136                <span class="theme-count"></span>
     137                <span class="theme-section current" data-sort="featured"><?php esc_html_e( 'Featured' ); ?></span>
     138                <span class="theme-section" data-sort="popular"><?php esc_html_e( 'Popular' ); ?></span>
     139                <span class="theme-section" data-sort="new"><?php esc_html_e( 'Latest' ); ?></span>
     140                <div class="theme-top-filters">
     141                        <span class="theme-filter" data-filter="photoblogging">Photography</span>
     142                        <span class="theme-filter" data-filter="responsive-layout">Responsive</span>
     143                        <span class="theme-filter more-filters">More</span>
     144                </div>
     145                <div class="more-filters-container">
     146                        Display more filters.
     147                </div>
     148        </div>
     149        <div class="theme-browser"></div>
     150        <div class="theme-overlay"></div>
     151        <span class="spinner"></span>
     152
     153        <br class="clear" />
    84154<?php
    85155/**
    86156 * Fires at the top of each of the tabs on the Install Themes page.
     
    93163 *
    94164 * @param int $paged Number of the current page of results being viewed.
    95165 */
    96 do_action( "install_themes_{$tab}", $paged );
     166// do_action( "install_themes_{$tab}", $paged );
    97167?>
    98168</div>
     169
     170
     171<script id="tmpl-theme" type="text/template">
     172        <# if ( data.screenshot_url ) { #>
     173                <div class="theme-screenshot">
     174                        <img src="{{ data.screenshot_url }}" alt="" />
     175                </div>
     176        <# } else { #>
     177                <div class="theme-screenshot blank"></div>
     178        <# } #>
     179        <span class="more-details"><?php _e( 'Theme Details' ); ?></span>
     180        <div class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></div>
     181        <h3 class="theme-name">{{{ data.name }}}</h3>
     182
     183        <div class="theme-actions">
     184                <a class="button button-primary" href="{{{ data.installURI }}}"><?php esc_html_e( 'Install' ); ?></a>
     185                <a class="button button-secondary preview" href="{{{ data.previewURI }}}"><?php esc_html_e( 'Preview' ); ?></a>
     186        </div>
     187</script>
     188
     189<script id="tmpl-theme-single" type="text/template">
     190        <div class="theme-backdrop"></div>
     191        <div class="theme-wrap">
     192                <div class="theme-header">
     193                        <button alt="<?php _e( 'Show previous theme' ); ?>" class="left dashicons dashicons-no"></button>
     194                        <button alt="<?php _e( 'Show next theme' ); ?>" class="right dashicons dashicons-no"></button>
     195                        <button alt="<?php _e( 'Close overlay' ); ?>" class="close dashicons dashicons-no"></button>
     196                </div>
     197                <div class="theme-about">
     198                        <div class="theme-screenshots">
     199                        <# if ( data.screenshot_url ) { #>
     200                                <div class="screenshot"><img src="{{ data.screenshot_url }}" alt="" /></div>
     201                        <# } else { #>
     202                                <div class="screenshot blank"></div>
     203                        <# } #>
     204                        </div>
     205
     206                        <div class="theme-info">
     207                                <h3 class="theme-name">{{{ data.name }}}<span class="theme-version"><?php printf( __( 'Version: %s' ), '{{{ data.version }}}' ); ?></span></h3>
     208                                <h4 class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></h4>
     209                                <p class="theme-description">{{{ data.description }}}</p>
     210
     211                                <div class="rating rating-{{ Math.round( data.rating / 10 ) * 10 }}">
     212                                        <span class="one"></span>
     213                                        <span class="two"></span>
     214                                        <span class="three"></span>
     215                                        <span class="four"></span>
     216                                        <span class="five"></span>
     217                                </div>
     218                        </div>
     219                </div>
     220
     221                <div class="theme-actions">
     222                        <a href="{{{ data.installURI }}}" class="button button-primary"><?php _e( 'Install' ); ?></a>
     223                        <a href="{{{ data.previewURI }}}" class="button button-secondary"><?php _e( 'Preview' ); ?></a>
     224                        <a href="" class="button button-secondary"><?php _e( 'Download' ); ?></a>
     225                </div>
     226        </div>
     227</script>
     228
    99229<?php
    100230include(ABSPATH . 'wp-admin/admin-footer.php');