WordPress.org
Get WordPress

Make WordPress Core

Ticket #25948: 25948.2.diff

File 25948.2.diff, 27.3 KB (added by matveb, 12 years ago)

  • wp-admin/js/theme.js

     
    44( function($) {
    55
    66// Set up our namespace...
    7 var themes = wp.themes = wp.themes || {};
     7var themes, l10n;
     8themes = wp.themes = wp.themes || {};
    89
    910// Store the theme data and settings for organized and quick access
    1011// themes.data.settings, themes.data.themes, themes.data.i18n
    1112themes.data = _wpThemeSettings;
     13l10n = themes.data.l10n;
    1214
    1315// Setup app structure
    1416_.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template });
    … …  
    1719
    1820// Main view controller for themes.php
    1921// Unifies and renders all available views
    20 //
    21 // Hooks to #appearance and organizes the views to be rendered
    2222themes.view.Appearance = wp.Backbone.View.extend({
    2323
    24         // Set DOM container
    25         // {#appearance} by default
    26         el: themes.data.settings.container,
     24        el: '#wpbody-content .wrap .theme-browser',
    2725
    2826        window: $( window ),
    2927        // Pagination instance
    3028        page: 0,
    3129
    32         events: {
    33                 'click .themes-bulk-edit': 'editMode',
    34                 'click .theme .delete-theme': 'deleteTheme'
    35         },
    36 
    3730        // Sets up a throttler for binding to 'scroll'
    3831        initialize: function() {
    3932                var self = this;
    … …  
    6154                        collection: this.collection,
    6255                        parent: this
    6356                });
     57
     58                // Render search form.
     59                this.search();
     60
    6461                // Render and append
    6562                this.view.render();
    6663                this.$el.append( this.view.el );
    67 
    68                 // Search form
    69                 this.search();
    7064        },
    7165
    7266        // Search input and view
    … …  
    7973
    8074                // Render and append after screen title
    8175                view.render();
    82                 self.$el.find( '> h2' ).after( view.el );
     76                self.$el.append( view.el );
    8377        },
    8478
    8579        // Checks when the user gets close to the bottom
    … …  
    9589                if ( bottom > threshold ) {
    9690                        this.trigger( 'theme:scroll' );
    9791                }
    98         },
    99 
    100         // Enters edit mode that allows easy access to deleting themes
    101         editMode: function() {
    102                 $( 'body' ).toggleClass( 'edit-mode' );
    103                 this.$el.find( '.themes-bulk-edit' ).toggleClass( 'mp6-text-highlight' );
    104         },
    105 
    106         deleteTheme: function() {
    107                 return confirm( themes.data.settings.confirmDelete );
    10892        }
    10993});
    11094
    … …  
    219203                if ( this.model.get( 'active' ) ) {
    220204                        this.$el.addClass( 'active' );
    221205                        this.$el.find( '.theme-name' ).addClass( 'mp6-primary' );
    222                         $( '#theme-overlay' ).addClass( 'active' );
     206                        $( '.theme-overlay' ).addClass( 'active' );
    223207                }
    224208        },
    225209
    … …  
    245229themes.view.Details = wp.Backbone.View.extend({
    246230
    247231        // Wrap theme data on a div.theme element
    248         id: 'theme-overlay',
     232        className: 'theme-overlay',
    249233
    250234        events: {
    251235                'click': 'collapse',
    … …  
    259243
    260244        render: function() {
    261245                var data = this.model.toJSON();
    262 
    263246                this.$el.html( this.html( data ) );
    264247                // Renders active theme styles
    265248                this.activeTheme();
    … …  
    271254        // and to the overlay in detailed view mode
    272255        activeTheme: function() {
    273256                // Check the model has the active property
    274                 if ( this.model.get( 'active' ) ) {
    275                         this.$el.addClass( 'active' );
    276                 } else {
    277                         $( '#theme-overlay' ).removeClass( 'active' );
    278                 }
     257                this.$el.toggleClass( 'active', this.model.get( 'active' ) );
    279258        },
    280259
    281260        // Single theme overlay screen
    … …  
    297276                        // With a quick fade out animation
    298277                        this.$el.fadeOut( 130, function() {
    299278                                // Clicking outside the modal box closes the overlay
    300                                 $( 'body' ).removeClass( 'theme-overlay closing-overlay' );
     279                                $( 'body' ).removeClass( 'theme-overlay-open closing-overlay' );
    301280                                // Handle event cleanup
    302281                                self.closeOverlay();
    303282
    … …  
    380359        }
    381360});
    382361
    383 // Controls the rendering of div#themes,
     362// Controls the rendering of div.themes,
    384363// a wrapper that will hold all the theme elements
    385364themes.view.Themes = wp.Backbone.View.extend({
    386365
    387         id: 'themes',
     366        className: 'themes',
    388367
    389368        // Number to keep track of scroll position
    390369        // while in theme-overlay mode
    391370        index: 0,
    392371
    393372        // The theme count element
    394         count: $( '#theme-count' ),
     373        count: $( '.theme-count' ),
    395374
    396375        initialize: function( options ) {
    397376                var self = this;
    … …  
    445424
    446425                // Make sure the add-new stays at the end
    447426                if ( page >= 1 ) {
    448                         $( '#add-new' ).remove();
     427                        $( '.add-new-theme' ).remove();
    449428                }
    450429
    451430                // Loop through the themes and setup each theme view
    … …  
    456435
    457436                        // Render the views...
    458437                        self.theme.render();
    459                         // and append them to div#themes
     438                        // and append them to div.themes
    460439                        self.$el.append( self.theme.el );
    461440
    462441                        // Binds to theme:expand to show the modal box
    … …  
    465444                });
    466445
    467446                // 'Add new theme' element shown at the end of the grid
    468                 this.$el.append( '<div id="add-new" class="theme add-new"><a href="' + themes.data.settings.install_uri + '"><div class="theme-screenshot"><span></span></div><h3 class="theme-name">' + themes.data.i18n.add_new + '</h3></a></div>' );
     447                this.$el.append( '<div class="theme add-new-theme"><a href="' + themes.data.settings.install_uri + '"><div class="theme-screenshot"><span></span></div><h3 class="theme-name">' + l10n.add_new + '</h3></a></div>' );
    469448
    470449                this.parent.page++;
    471450        },
    … …  
    502481
    503482                // Sets this.view to 'detail'
    504483                this.setView( 'detail' );
    505                 $( 'body' ).addClass( 'theme-overlay' );
     484                $( 'body' ).addClass( 'theme-overlay-open' );
    506485
    507486                // Set up the theme details view
    508487                this.overlay = new themes.view.Details({
    509                         model: self.model,
    510                         className: 'theme-' + self.model.id
     488                        model: self.model
    511489                });
    512490
    513491                this.overlay.render();
    … …  
    515493
    516494                this.overlay.screenshotGallery();
    517495
    518                 // Resets counter whenever the overlay is opened
    519                 this.index = 0;
    520 
    521496                // Bind to theme:next and theme:previous
    522497                // triggered by the arrow keys
    523498                //
    524                 // The index keep track of where we are at
    525                 // any given time
     499                // Keep track of the current model so we
     500                // can infer an index position
    526501                this.listenTo( this.overlay, 'theme:next', function() {
    527                         // Bump the index number to keep track of how far
    528                         // we should go for the next theme
    529                         self.index++;
    530502                        // Renders the next theme on the overlay
    531                         self.next( [ self.model.cid, self.index ] );
     503                        self.next( [ self.model.cid ] );
    532504                        self.overlay.screenshotGallery();
    533505
    534506                })
    535507                .listenTo( this.overlay, 'theme:previous', function() {
    536                         // Decrease the index number to keep track of how far
    537                         // we should go for the previous theme
    538                         self.index--;
    539508                        // Renders the previous theme on the overlay
    540                         self.previous( [ self.model.cid, self.index ] );
     509                        self.previous( [ self.model.cid ] );
    541510                        self.overlay.screenshotGallery();
    542511                });
    543 
    544512        },
    545513
    546514        // This method renders the next theme on the overlay modal
    547515        // based on the current position in the collection
    548         // @params [model cid] and [index]
     516        // @params [model cid]
    549517        next: function( args ) {
    550518                var self = this,
    551519                        model, nextModel;
    552520
    553521                // Get the current theme
    554522                model = self.collection.get( args[0] );
    555                 // Get the next one
    556                 nextModel = self.collection.at( self.collection.indexOf( model ) + args[1] );
     523                // Find the next model within the collection
     524                nextModel = self.collection.at( self.collection.indexOf( model ) + 1 );
    557525
    558526                // Sanity check which also serves as a boundary test
    559527                if ( nextModel !== undefined ) {
    560528
    561529                        // We have a new theme...
    562                         // Clean the overlay
    563                         this.overlay.$el.html('');
     530                        // Close the overlay
     531                        this.overlay.closeOverlay();
    564532
    565                         // Create the view
    566                         this.nextTheme = new themes.view.Details({
    567                                 model: nextModel,
    568                                 className: 'theme-' + nextModel.id
    569                         });
    570 
    571533                        // Trigger a route update for the current model
    572                         themes.router.navigate( 'theme/' + nextModel.id );
    573 
    574                         // Render and fill this.overlay with the new html
    575                         this.nextTheme.render();
    576                         return this.overlay.$el.html( this.nextTheme.el );
     534                        // that renders the new theme's overlay
     535                        themes.router.navigate( 'theme/' + nextModel.id, { trigger: true } );
    577536                }
    578 
    579                 // If we got this far it means we have no other themes
    580                 // so move back the counter to keep it sane
    581                 self.index--;
    582537        },
    583538
    584539        // This method renders the previous theme on the overlay modal
    585540        // based on the current position in the collection
    586         // @params [model cid] and [index]
     541        // @params [model cid]
    587542        previous: function( args ) {
    588543                var self = this,
    589544                        model, previousModel;
    590545
    591546                // Get the current theme
    592547                model = self.collection.get( args[0] );
    593                 previousModel = self.collection.at( self.collection.indexOf( model ) + args[1] );
     548                // Find the previous model within the collection
     549                previousModel = self.collection.at( self.collection.indexOf( model ) - 1 );
    594550
    595551                if ( previousModel !== undefined ) {
    596552
    597553                        // We have a new theme...
    598                         // Clean the overlay
    599                         this.overlay.$el.html( '' );
     554                        // Close the overlay
     555                        this.overlay.closeOverlay();
    600556
    601                         // Create the view
    602                         this.previousTheme = new themes.view.Details({
    603                                 model: previousModel,
    604                                 className: 'theme-' + previousModel.id
    605                         });
    606 
    607557                        // Trigger a route update for the current model
    608                         themes.router.navigate( 'theme/' + previousModel.id );
    609 
    610                         // Render and fill this.overlay with the new html
    611                         this.previousTheme.render();
    612                         return this.overlay.$el.html( this.previousTheme.el );
     558                        // that renders the new theme's overlay
     559                        themes.router.navigate( 'theme/' + previousModel.id, { trigger: true } );
    613560                }
    614 
    615                 // If we got this far it means we have no other themes
    616                 // so move back the counter to keep it sane
    617                 self.index++;
    618561        }
    619562});
    620563
    621 // Search input view controller
    622 // renders #search-form
     564// Search input view controller.
    623565themes.view.Search = wp.Backbone.View.extend({
    624566
    625         className: 'search-form',
     567        tagName: 'input',
     568        className: 'theme-search',
    626569
    627         // 'keyup' triggers search
    628         events: {
    629                 'keyup #theme-search': 'search'
     570        attributes: {
     571                placeholder: l10n.search
    630572        },
    631573
    632         // Grabs template file
    633         html: themes.template( 'theme-search' ),
    634 
    635         // Render the search form
    636         render: function() {
    637                 var self = this;
    638                 self.$el.html( self.html );
     574        events: {
     575                'input':  'search',
     576                'keyup':  'search',
     577                'change': 'search',
     578                'search': 'search'
    639579        },
    640580
    641         // Runs a search on the theme collection
    642         // bind on 'keyup' event
    643         search: function() {
    644                 this.collection.doSearch( $( '#theme-search' ).val() );
     581        // Runs a search on the theme collection.
     582        search: function( event ) {
     583                // Clear on escape.
     584                if ( event.type === 'keyup' && event.which === 27 ) {
     585                        event.target.value = '';
     586                }
     587                this.collection.doSearch( event.target.value );
    645588        }
    646589});
    647590
    … …  
    656599
    657600        // Set the search input value based on url
    658601        search: function( query ) {
    659                 $( '#theme-search' ).val( query );
     602                $( '.theme-search' ).val( query );
    660603        }
    661604});
    662605

  • wp-admin/css/theme.css

     
    1 /**
    2  * THX38 styles...
    3  *
    4  * Note: it expects mp6 plugin to be active as this is based on that design of the admin.
    5  */
    6 #themes {
     1.theme-browser .themes {
    72        clear: both;
    83        padding: 0 0 100px;
    94}
    10 #appearance h2 {
     5.themes-php .wrap h2 {
    116        float: left;
    127        margin-bottom: 15px;
    138}
    14 #appearance h2 .button {
     9.themes-php .wrap h2 .button {
    1510        margin-left: 20px;
    1611}
    17 .theme-count {
     12.themes-php .theme-count {
    1813        color: #fff;
    1914        border-radius: 30px;
    2015        background: #777;
    … …  
    2722                top: -3px;
    2823}
    2924/* Position admin messages */
    30 #appearance div.updated {
     25.themes-php div.updated {
    3126        margin: 0 0 20px 0;
    3227        clear: both;
    3328}
    34 #appearance div.updated a {
     29.themes-php div.updated a {
    3530        text-decoration: underline;
    3631}
    37 /* Add new theme */
    38 .add-new-h2 {
    39         background: #e0e0e0;
    40         color: #555;
    41         margin-left: 20px;
    42 }
    43 .add-new-icon:hover {
    44         background: #2ea2cc;
    45 }
    46 /* Edit mode toggle */
    47 .themes-bulk-edit {
    48         color: #555;
    49         cursor: pointer;
    50         font-size: 14px;
    51         margin-left: 20px;
    52         padding: 4px 8px;
    53         border: 1px solid #ddd;
    54         display: none;
    55 }
    56 .themes-bulk-edit:before {
    57         content: '\f111';
    58         display: inline-block;
    59         font: normal 20px/1 'dashicons';
    60         margin: 0 6px 0 0;
    61         opacity: 0.8;
    62         position: relative;
    63                 top: 4px;
    64         speak: none;
    65         -webkit-font-smoothing: antialiased;
    66 }
    67 .themes-bulk-edit:hover {
    68         border-color: #2ea2cc;
    69         color: #2ea2cc;
    70 }
    71 .edit-mode .themes-bulk-edit {
    72         background: #555;
    73         color: #fff;
    74 }
    75 .edit-mode .themes-bulk-edit .edit,
    76 .themes-bulk-edit .done {
    77         display: none;
    78 }
    79 .edit-mode .themes-bulk-edit .done,
    80 .themes-bulk-edit .edit {
    81         display: inline;
    82 }
    8332
    8433/**
    8534 * Main theme element
    … …  
    173122.theme .delete-theme:hover:before {
    174123        background: #d54e21;
    175124}
    176 body.edit-mode .theme .delete-theme {
    177         display: inline-block;
    178 }
    179 body.edit-mode .theme:hover .theme-screenshot img {
    180         opacity: 1;
    181 }
    182 body.edit-mode .theme:hover:after {
    183         opacity: 0;
    184 }
    185 body.edit-mode .theme:hover .theme-actions,
    186 body.edit-mode .theme.add-new {
    187         display: none;
    188 }
    189125
    190 
    191126/*
    192127 * Theme Screenshot
    193128 *
    … …  
    355290/*
    356291 * Add new theme
    357292 */
    358 .add-new {
     293.theme-browser .add-new-theme {
    359294        border: none;
    360295        box-shadow: none;
    361296}
    362 .add-new a {
     297.theme-browser .add-new-theme a {
    363298        color: #999;
    364299        text-decoration: none;
    365300        display: block;
    366301        position: relative;
    367302}
    368 .theme.add-new:after {
     303.theme-browser .add-new-theme:after {
    369304        display: block;
    370305        content: '';
    371306        opacity: 1;
    … …  
    381316        border: 5px dashed rgba(0, 0, 0, 0.1);
    382317        box-sizing: border-box;
    383318}
    384 .theme.add-new span:after {
     319.theme-browser .add-new-theme span:after {
    385320        background: rgba(153, 153, 153, 0.1);
    386321        border-radius: 50%;
    387322        display: inline-block;
    … …  
    402337        text-shadow: none;
    403338        z-index:4;
    404339}
    405 .theme.add-new:hover .theme-screenshot {
     340.theme-browser .add-new-theme:hover .theme-screenshot {
    406341        background: none;
    407342}
    408 .theme.add-new:hover span:after {
     343.theme-browser .add-new-theme:hover span:after {
    409344        background: #fff;
    410345        color: rgb(16, 116, 162);
    411346        box-shadow: 0 2px 1px rgba(0,0,0,0.3);
    412347}
    413348
    414 .theme.add-new:hover:after {
     349.theme-browser .add-new-theme:hover:after {
    415350        border-color: transparent;
    416351        color: #fff;
    417352        background: rgb(16, 116, 162);
    418353}
    419354
    420 .add-new .theme-name {
     355.theme-browser .add-new-theme .theme-name {
    421356        background: none;
    422357        text-align: center;
    423358        box-shadow: none;
    … …  
    425360        position: relative;
    426361        top: -70px;
    427362}
    428 .add-new:hover .theme-name {
     363.theme-browser .add-new-theme:hover .theme-name {
    429364        color: #fff;
    430365        z-index: 2;
    431366}
    432367
    433 
    434368/*
    435369 * The search form
    436370 */
    437 .search-form {
     371.theme-browser .theme-search {
    438372        float: left;
    439373        position: relative;
    440374                top: 7px;
    441375                left: 10px;
    442 }
    443 #theme-search {
    444376        font-size: 16px;
    445377        font-weight: 300;
    446378        line-height: 1.5;
    447379}
    448380
    449 
    450381/*
    451382 * Theme Overlay
    452383 * Shown when clicking a theme
    453384 */
    454 #theme-overlay {
    455 }
    456 #theme-overlay .theme-backdrop {
     385.theme-overlay .theme-backdrop {
    457386        position: absolute;
    458387                left: -20px;
    459388                right: 0;
    … …  
    463392        /* background: rgba(0,0,0,0.7); */
    464393        z-index: 10;
    465394}
    466 body.theme-overlay {
     395body.theme-overlay-open {
    467396        overflow: hidden;
    468397}
    469398
    470 #theme-overlay .theme-utility {
     399.theme-overlay .theme-utility {
    471400        position: absolute;
    472401                top: 0;
    473402                left: 0;
    474403                right: 0;
    475404        border-bottom: 1px solid #eee;
    476405}
    477 #theme-overlay .back {
     406.theme-overlay .back {
    478407        cursor: pointer;
    479408        height: 48px;
    480409        width: 50px;
    … …  
    482411        float: right;
    483412        border-left: 1px solid #eee;
    484413}
    485 #theme-overlay .back:hover {
     414.theme-overlay .back:hover {
    486415        background: #333;
    487416}
    488 #theme-overlay .back:hover:before {
     417.theme-overlay .back:hover:before {
    489418        color: #fff;
    490419}
    491 #theme-overlay .back:before {
     420.theme-overlay .back:before {
    492421        font: normal 30px/48px 'dashicons' !important;
    493422        color: #bbb;
    494423        display: inline-block;
    … …  
    496425        font-weight: 300;
    497426}
    498427/* Left and right navigation */
    499 #theme-overlay .right,
    500 #theme-overlay .left {
     428.theme-overlay .right,
     429.theme-overlay .left {
    501430        cursor: pointer;
    502431        -webkit-user-select: none;
    503432        -moz-user-select: none;
    … …  
    509438        text-align: center;
    510439        border-right: 1px solid #eee;
    511440}
    512 #theme-overlay .right:hover,
    513 #theme-overlay .left:hover {
     441.theme-overlay .right:hover,
     442.theme-overlay .left:hover {
    514443        background: #333;
    515444}
    516         #theme-overlay .right:hover:before,
    517         #theme-overlay .left:hover:before {
     445        .theme-overlay .right:hover:before,
     446        .theme-overlay .left:hover:before {
    518447                color: #fff;
    519448        }
    520 #theme-overlay .left:before {
     449.theme-overlay .left:before {
    521450        content: '\f341';
    522451}
    523 #theme-overlay .right:before {
     452.theme-overlay .right:before {
    524453        content: '\f345';
    525454}
    526 #theme-overlay .right:before,
    527 #theme-overlay .left:before {
     455.theme-overlay .right:before,
     456.theme-overlay .left:before {
    528457        font: normal 16px/54px 'dashicons' !important;
    529458        display: inline;
    530459        font-weight: 300;
    531460}
    532 #theme-overlay .left:before {}
     461.theme-overlay .left:before {}
    533462
    534 #theme-overlay .theme-wrap {
     463.theme-overlay .theme-wrap {
    535464        clear: both;
    536465        position: fixed;
    537466                top: 120px;
    … …  
    544473        box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0,0,0,0.1);
    545474        z-index: 20;
    546475}
    547 #theme-overlay .theme-wrap:after {
     476.theme-overlay .theme-wrap:after {
    548477        content: ".";
    549478        display: block;
    550479        height: 0;
    … …  
    552481        visibility: hidden;
    553482}
    554483
    555 #theme-overlay .theme-actions {
     484.theme-overlay .theme-actions {
    556485        position: fixed;
    557486        text-align: center;
    558487        bottom: 80px;
    … …  
    563492        border-top: 1px solid rgba(0,0,0,0.1);
    564493        z-index: 30;
    565494}
    566 #theme-overlay.active .theme-actions {
     495.theme-overlay.active .theme-actions {
    567496
    568497}
    569 #theme-overlay .theme-actions a {
     498.theme-overlay .theme-actions a {
    570499        margin-right: 5px;
    571500        margin-bottom: 0;
    572501        font-size: 16px;
    … …  
    574503        height: 37px;
    575504        padding: 0 20px 1px 20px;
    576505}
    577 #theme-overlay .theme-actions .delete-theme {
     506.theme-overlay .theme-actions .delete-theme {
    578507        border-radius: 2px;
    579508        color: #a00;
    580509        font-size: 14px;
    … …  
    584513                bottom: 20px;
    585514        text-decoration: none;
    586515}
    587 #theme-overlay .theme-actions .delete-theme:hover {
     516.theme-overlay .theme-actions .delete-theme:hover {
    588517        background: #d54e21;
    589518        color: #fff;
    590519}
    591520
    592 #theme-overlay .theme-actions .active-theme,
    593 #theme-overlay.active .theme-actions .inactive-theme {
     521.theme-overlay .theme-actions .active-theme,
     522.theme-overlay.active .theme-actions .inactive-theme {
    594523        display: none;
    595524}
    596 #theme-overlay .theme-actions .inactive-theme,
    597 #theme-overlay.active .theme-actions .active-theme {
     525.theme-overlay .theme-actions .inactive-theme,
     526.theme-overlay.active .theme-actions .active-theme {
    598527        display: block;
    599528}
    600529/*
    601530 * Theme Screenshots gallery
    602531 */
    603 #theme-overlay .theme-screenshots {
     532.theme-overlay .theme-screenshots {
    604533        float: left;
    605534        margin: 0 30px 0 0;
    606535        width: 55%;
    607536        text-align: center;
    608537}
    609538/* First screenshot, shown big */
    610 #theme-overlay .screenshot {
     539.theme-overlay .screenshot {
    611540        background: #000;
    612541        border: 1px solid #fff;
    613542        -moz-box-sizing: border-box;
    … …  
    617546        position: relative;
    618547        box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
    619548}
    620 #theme-overlay .screenshot:after {
     549.theme-overlay .screenshot:after {
    621550        content: '';
    622551        display: block;
    623552        padding-top: 66.66666%; /* using a 3/2 aspect ratio */
    624553}
    625 #theme-overlay .screenshot img {
     554.theme-overlay .screenshot img {
    626555        cursor: pointer;
    627556        height: auto;
    628557        position: absolute;
    … …  
    631560        width: 100%;
    632561}
    633562/* Other screenshots, shown small and square */
    634 #theme-overlay .screenshot.thumb {
     563.theme-overlay .screenshot.thumb {
    635564        background: #ccc;
    636565        border: 1px solid #eee;
    637566        float: none;
    … …  
    640569        width: 140px;
    641570        height: 80px;
    642571}
    643 #theme-overlay .screenshot.thumb:after {
     572.theme-overlay .screenshot.thumb:after {
    644573        content: '';
    645574        display: block;
    646575        padding-top: 100%; /* using a 1/1 aspect ratio */
    647576}
    648 #theme-overlay .screenshot.thumb img {
     577.theme-overlay .screenshot.thumb img {
    649578        cursor: pointer;
    650579        height: auto;
    651580        position: absolute;
    … …  
    654583        width: 100%;
    655584        height: auto;
    656585}
    657 #theme-overlay .screenshot.selected {
     586.theme-overlay .screenshot.selected {
    658587        background: transparent;
    659588        border: 2px solid #2ea2cc;
    660589}
    661 #theme-overlay .screenshot.selected img {
     590.theme-overlay .screenshot.selected img {
    662591        opacity: 0.8;
    663592}
    664593/*
    665594 * Theme heading information
    666595 */
    667 #theme-overlay .theme-info {
     596.theme-overlay .theme-info {
    668597        width: 40%;
    669598        float: left;
    670599}
    671 #theme-overlay .current-label {
     600.theme-overlay .current-label {
    672601        background: #333;
    673602        color: #fff;
    674603        font-size: 11px;
    … …  
    679608        -webkit-user-select: none;
    680609        user-select: none;
    681610}
    682 #theme-overlay .theme-name {
     611.theme-overlay .theme-name {
    683612        color: #222;
    684613        font-size: 32px;
    685614        font-weight: 100;
    686615        margin: 10px 0 0;
    687616        line-height: 1.3;
    688617}
    689 #theme-overlay .theme-version {
     618.theme-overlay .theme-version {
    690619        color: #999;
    691620        font-size: 13px;
    692621        font-weight: 400;
    … …  
    696625        -webkit-user-select: none;
    697626        user-select: none;
    698627}
    699 #theme-overlay .theme-author {
     628.theme-overlay .theme-author {
    700629        color: #686868;
    701630        font-size: 16px;
    702631        font-weight: 400;
    703632        margin: 15px 0 25px;
    704633}
    705 #theme-overlay .theme-author a {
     634.theme-overlay .theme-author a {
    706635        text-decoration: none;
    707636}
    708 #theme-overlay .theme-description {
     637.theme-overlay .theme-description {
    709638        color: #555;
    710639        font-size: 15px;
    711640        font-weight: 400;
    712641        line-height: 1.5;
    713642        margin: 30px 0 0 0;
    714643}
    715 #theme-overlay .theme-tags {
     644.theme-overlay .theme-tags {
    716645        border-top: 3px solid #eee;
    717646        color: #888;
    718647        font-size: 13px;
    … …  
    721650        padding-top: 20px;
    722651        text-transform: capitalize;
    723652}
    724 #theme-overlay .theme-tags span {
     653.theme-overlay .theme-tags span {
    725654        color: #444;
    726655        font-weight: bold;
    727656        margin-right: 5px;
    728657}
    729 #theme-overlay .theme-actions {
     658.theme-overlay .theme-actions {
    730659}
    731660/* Theme Updates info */
    732 #theme-overlay .theme-update-message {
     661.theme-overlay .theme-update-message {
    733662        background: #fefaf7;
    734663        border: 1px solid #eee;
    735664        border-left: 4px solid #d54e21;
    736665        border-radius: 3px;
    737666        padding: 5px 20px 10px;
    738667}
    739 #theme-overlay .theme-update {
     668.theme-overlay .theme-update {
    740669        color: #222;
    741670        font-size: 18px;
    742671        display: inline-block;
    743672        line-height: 40px;
    744673        margin: 0;
    745674}
    746 #theme-overlay .parent-theme {
     675.theme-overlay .parent-theme {
    747676        background: #f7fcfe;
    748677        border: 1px solid #eee;
    749678        border-left: 4px solid #2ea2cc;
    … …  
    752681        margin-top: 30px;
    753682        padding: 10px 10px 10px 20px;
    754683}
    755 #theme-overlay .parent-theme strong {
     684.theme-overlay .parent-theme strong {
    756685        font-weight: 700;
    757686}
    758687
    … …  
    833762        .theme.add-new:after {
    834763                font-size: 23vw;
    835764        }
    836         #theme-overlay .theme-wrap,
    837         #theme-overlay .theme-actions {
     765        .theme-overlay .theme-wrap,
     766        .theme-overlay .theme-actions {
    838767                right: 15%;
    839768                left: 22%;
    840769        }
    … …  
    856785}
    857786/* Mini-sidebar in MP6 */
    858787@media ( max-width: 900px ) {
    859         #theme-overlay .theme-wrap,
    860         #theme-overlay .theme-actions {
     788        .theme-overlay .theme-wrap,
     789        .theme-overlay .theme-actions {
    861790                left: 76px;
    862791        }
    863792}
    … …  
    866795                margin-top: 6px;
    867796                margin-right: -3px
    868797        }
    869         #theme-overlay .theme-wrap {
     798        .theme-overlay .theme-wrap {
    870799                top: 45px;
    871800                right: 0px;
    872801                bottom: 0px;
    873802                left: 0px;
    874803                padding: 70px 20px 100px;
    875804        }
    876         #theme-overlay .theme-actions {
     805        .theme-overlay .theme-actions {
    877806                right: 0px;
    878807                bottom: 0px;
    879808                left: 0px;
    880809                text-align: left;
    881810                padding: 10px;
    882811        }
    883         #theme-overlay .theme-screenshots {
     812        .theme-overlay .theme-screenshots {
    884813                width: 40%;
    885814        }
    886         #theme-overlay .theme-info {
     815        .theme-overlay .theme-info {
    887816                width: 50%;
    888817        }
    889         #theme-overlay .theme-actions .delete-theme {
     818        .theme-overlay .theme-actions .delete-theme {
    890819                bottom: 10px;
    891820        }
    892         .search-form {
     821        .theme-browser .theme-search {
    893822                top: 3px;
    894823        }
    895824}
    … …  
    908837        .theme.add-new:after {
    909838                font-size: 53vw;
    910839        }
    911         #theme-overlay .theme-update,
    912         #theme-overlay .theme-description {
     840        .theme-overlay .theme-update,
     841        .theme-overlay .theme-description {
    913842                margin-left: 0;
    914843        }
    915         #theme-overlay.active .theme-actions .active-theme .button:nth-child(3n) {
     844        .theme-overlay.active .theme-actions .active-theme .button:nth-child(3n) {
    916845                display: none;
    917846        }
    918847        .theme.active .theme-actions .button {
    919848                margin-top: 6px;
    920849                margin-right: 0;
    921850        }
    922         #theme-overlay .theme-screenshots {
     851        .theme-overlay .theme-screenshots {
    923852                width: 100%;
    924853                float: none;
    925854        }
    926         #theme-overlay .theme-info {
     855        .theme-overlay .theme-info {
    927856                width: 100%;
    928857        }
    929         #theme-overlay .theme-author {
     858        .theme-overlay .theme-author {
    930859                margin: 5px 0 15px 0;
    931860        }
    932         #theme-overlay .theme-version {
     861        .theme-overlay .theme-version {
    933862                margin-left: 0;
    934863                position: absolute;
    935864                        top: 18px;
    936865                        left: 130px;
    937866        }
    938         #theme-overlay .current-label {
     867        .theme-overlay .current-label {
    939868                margin-top: 10px;
    940869                font-size: 13px;
    941870        }
    942871        /*
    943872         * Search form
    944873         */
    945         .search-form {
     874        .theme-browser .theme-search {
    946875                float: none;
    947876                clear: both;
    948877                left: 0;
    949         }
    950         #theme-search {
    951878                margin: 10px 0;
    952879                width: 100%;
    953880        }

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

     
    65346534        color: #cfcfcf;
    65356535}
    65366536
    6537 #broken-themes {
     6537.broken-themes {
     6538        clear: both;
     6539}
     6540
     6541.broken-themes table {
    65386542        text-align: left;
    65396543        width: 50%;
    65406544        border-spacing: 3px;

  • wp-admin/themes.php

     
    9595                'customizeURI'  => ( current_user_can( 'edit_theme_options' ) ) ? wp_customize_url() : null,
    9696                'confirmDelete' => __( "Are you sure you want to delete this theme?\n\nClick 'Cancel' to go back, 'OK' to confirm the delete." ),
    9797                'root'          => '/wp-admin/themes.php',
    98                 'container'     => '#appearance',
    9998                'extraRoutes'   => '',
    10099        ),
    101         'i18n' => array(
    102                 'add_new'         => __( 'Add New Theme' ),
     100        'l10n' => array(
     101                'add_new' => __( 'Add New Theme' ),
     102                'search'  => __( 'Search...' ),
    103103        ),
    104104) );
    105105
    … …  
    110110require_once( ABSPATH . 'wp-admin/admin-header.php' );
    111111?>
    112112
    113 <div id="appearance" class="wrap">
     113<div class="wrap">
    114114        <h2><?php esc_html_e( 'Themes' ); ?>
    115                 <span id="theme-count" class="theme-count"></span>
     115                <span class="theme-count"></span>
    116116        <?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?>
    117117                <a href="<?php echo admin_url( 'theme-install.php' ); ?>" class="add-new-h2"><?php echo esc_html( _x( 'Add New', 'Add new theme' ) ); ?></a>
    118118        <?php endif; ?>
    119119        </h2>
    120120
     121        <div class="theme-browser"></div>
     122
    121123<?php
    122124if ( ! validate_current_theme() || isset( $_GET['broken'] ) ) : ?>
    123125<div id="message1" class="updated"><p><?php _e('The active theme is broken. Reverting to the default theme.'); ?></p></div>
    … …  
    181183if ( ! is_multisite() && current_user_can('edit_themes') && $broken_themes = wp_get_themes( array( 'errors' => true ) ) ) {
    182184?>
    183185
     186<div class="broken-themes">
    184187<h3><?php _e('Broken Themes'); ?></h3>
    185188<p><?php _e('The following themes are installed but incomplete. Themes must have a stylesheet and a template.'); ?></p>
    186189
    187 <table id="broken-themes">
     190<table>
    188191        <tr>
    189192                <th><?php _ex('Name', 'theme name'); ?></th>
    190193                <th><?php _e('Description'); ?></th>
    … …  
    193196        foreach ( $broken_themes as $broken_theme ) {
    194197                echo "
    195198                <tr>
    196                          <td>" . $broken_theme->get('Name') ."</td>
     199                         <td>" . ( $broken_theme->get( 'Name' ) ? $broken_theme->get( 'Name' ) : $broken_theme->get_stylesheet() ) . "</td>
    197200                         <td>" . $broken_theme->errors()->get_error_message() . "</td>
    198201                </tr>";
    199202        }
    200203?>
    201204</table>
     205</div>
     206
    202207<?php
    203208}
    204209?>
    … …  
    233238        <# } #>
    234239</script>
    235240
    236 <script id="tmpl-theme-search" type="text/template">
    237         <input type="text" name="theme-search" id="theme-search" placeholder="<?php esc_attr_e( 'Search...' ); ?>" />
    238 </script>
    239 
    240241<script id="tmpl-theme-single" type="text/template">
    241242        <div class="theme-backdrop"></div>
    242243        <div class="theme-wrap">
    … …  
    246247                        <div alt="<?php _e( 'Show next theme' ); ?>" class="right dashicons dashicons-no"></div>
    247248                </div>
    248249
    249                 <div class="theme-screenshots" id="theme-screenshots">
     250                <div class="theme-screenshots">
    250251                        <div class="screenshot first"><img src="{{ data.screenshot[0] }}" alt="" /></div>
    251252                <#
    252253                        if ( _.size( data.screenshot ) > 1 ) {