WordPress.org
Get WordPress

Make WordPress Core

Ticket #25948: 25948.4.diff

File 25948.4.diff, 27.5 KB (added by matveb, 10 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
    10 // themes.data.settings, themes.data.themes, themes.data.i18n
     11// themes.data.settings, themes.data.themes, themes.data.l10n
    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
    … …  
    466445
    467446                // 'Add new theme' element shown at the end of the grid
    468447                if ( themes.data.settings.canInstall ) {
    469                         this.$el.append( '<div id="add-new" class="theme add-new"><a href="' + themes.data.settings.installURI + '"><div class="theme-screenshot"><span></span></div><h3 class="theme-name">' + themes.data.i18n.addNew + '</h3></a></div>' );
     448                        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>' );
    470449                }
    471450
    472451                this.parent.page++;
    … …  
    504483
    505484                // Sets this.view to 'detail'
    506485                this.setView( 'detail' );
    507                 $( 'body' ).addClass( 'theme-overlay' );
     486                $( 'body' ).addClass( 'theme-overlay-open' );
    508487
    509488                // Set up the theme details view
    510489                this.overlay = new themes.view.Details({
    511                         model: self.model,
    512                         className: 'theme-' + self.model.id
     490                        model: self.model
    513491                });
    514492
    515493                this.overlay.render();
    … …  
    517495
    518496                this.overlay.screenshotGallery();
    519497
    520                 // Resets counter whenever the overlay is opened
    521                 this.index = 0;
    522 
    523498                // Bind to theme:next and theme:previous
    524499                // triggered by the arrow keys
    525500                //
    526                 // The index keep track of where we are at
    527                 // any given time
     501                // Keep track of the current model so we
     502                // can infer an index position
    528503                this.listenTo( this.overlay, 'theme:next', function() {
    529                         // Bump the index number to keep track of how far
    530                         // we should go for the next theme
    531                         self.index++;
    532504                        // Renders the next theme on the overlay
    533                         self.next( [ self.model.cid, self.index ] );
     505                        self.next( [ self.model.cid ] );
    534506                        self.overlay.screenshotGallery();
    535507
    536508                })
    537509                .listenTo( this.overlay, 'theme:previous', function() {
    538                         // Decrease the index number to keep track of how far
    539                         // we should go for the previous theme
    540                         self.index--;
    541510                        // Renders the previous theme on the overlay
    542                         self.previous( [ self.model.cid, self.index ] );
     511                        self.previous( [ self.model.cid ] );
    543512                        self.overlay.screenshotGallery();
    544513                });
    545 
    546514        },
    547515
    548516        // This method renders the next theme on the overlay modal
    549517        // based on the current position in the collection
    550         // @params [model cid] and [index]
     518        // @params [model cid]
    551519        next: function( args ) {
    552520                var self = this,
    553521                        model, nextModel;
    554522
    555523                // Get the current theme
    556524                model = self.collection.get( args[0] );
    557                 // Get the next one
    558                 nextModel = self.collection.at( self.collection.indexOf( model ) + args[1] );
     525                // Find the next model within the collection
     526                nextModel = self.collection.at( self.collection.indexOf( model ) + 1 );
    559527
    560528                // Sanity check which also serves as a boundary test
    561529                if ( nextModel !== undefined ) {
    562530
    563531                        // We have a new theme...
    564                         // Clean the overlay
    565                         this.overlay.$el.html('');
     532                        // Close the overlay
     533                        this.overlay.closeOverlay();
    566534
    567                         // Create the view
    568                         this.nextTheme = new themes.view.Details({
    569                                 model: nextModel,
    570                                 className: 'theme-' + nextModel.id
    571                         });
    572 
    573535                        // Trigger a route update for the current model
    574                         themes.router.navigate( 'theme/' + nextModel.id );
    575 
    576                         // Render and fill this.overlay with the new html
    577                         this.nextTheme.render();
    578                         return this.overlay.$el.html( this.nextTheme.el );
     536                        // that renders the new theme's overlay
     537                        themes.router.navigate( 'theme/' + nextModel.id, { trigger: true } );
    579538                }
    580 
    581                 // If we got this far it means we have no other themes
    582                 // so move back the counter to keep it sane
    583                 self.index--;
    584539        },
    585540
    586541        // This method renders the previous theme on the overlay modal
    587542        // based on the current position in the collection
    588         // @params [model cid] and [index]
     543        // @params [model cid]
    589544        previous: function( args ) {
    590545                var self = this,
    591546                        model, previousModel;
    592547
    593548                // Get the current theme
    594549                model = self.collection.get( args[0] );
    595                 previousModel = self.collection.at( self.collection.indexOf( model ) + args[1] );
     550                // Find the previous model within the collection
     551                previousModel = self.collection.at( self.collection.indexOf( model ) - 1 );
    596552
    597553                if ( previousModel !== undefined ) {
    598554
    599555                        // We have a new theme...
    600                         // Clean the overlay
    601                         this.overlay.$el.html( '' );
     556                        // Close the overlay
     557                        this.overlay.closeOverlay();
    602558
    603                         // Create the view
    604                         this.previousTheme = new themes.view.Details({
    605                                 model: previousModel,
    606                                 className: 'theme-' + previousModel.id
    607                         });
    608 
    609559                        // Trigger a route update for the current model
    610                         themes.router.navigate( 'theme/' + previousModel.id );
    611 
    612                         // Render and fill this.overlay with the new html
    613                         this.previousTheme.render();
    614                         return this.overlay.$el.html( this.previousTheme.el );
     560                        // that renders the new theme's overlay
     561                        themes.router.navigate( 'theme/' + previousModel.id, { trigger: true } );
    615562                }
    616 
    617                 // If we got this far it means we have no other themes
    618                 // so move back the counter to keep it sane
    619                 self.index++;
    620563        }
    621564});
    622565
    623 // Search input view controller
    624 // renders #search-form
     566// Search input view controller.
    625567themes.view.Search = wp.Backbone.View.extend({
    626568
    627         className: 'search-form',
     569        tagName: 'input',
     570        className: 'theme-search',
    628571
    629         // 'keyup' triggers search
    630         events: {
    631                 'keyup #theme-search': 'search'
     572        attributes: {
     573                placeholder: l10n.search
    632574        },
    633575
    634         // Grabs template file
    635         html: themes.template( 'theme-search' ),
    636 
    637         // Render the search form
    638         render: function() {
    639                 var self = this;
    640                 self.$el.html( self.html );
     576        events: {
     577                'input':  'search',
     578                'keyup':  'search',
     579                'change': 'search',
     580                'search': 'search'
    641581        },
    642582
    643         // Runs a search on the theme collection
    644         // bind on 'keyup' event
    645         search: function() {
    646                 this.collection.doSearch( $( '#theme-search' ).val() );
     583        // Runs a search on the theme collection.
     584        search: function( event ) {
     585                // Clear on escape.
     586                if ( event.type === 'keyup' && event.which === 27 ) {
     587                        event.target.value = '';
     588                }
     589                this.collection.doSearch( event.target.value );
    647590        }
    648591});
    649592
    … …  
    658601
    659602        // Set the search input value based on url
    660603        search: function( query ) {
    661                 $( '#theme-search' ).val( query );
     604                $( '.theme-search' ).val( query );
    662605        }
    663606});
    664607

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

     
    65406540        color: #cfcfcf;
    65416541}
    65426542
    6543 #broken-themes {
     6543.broken-themes {
     6544        clear: both;
     6545}
     6546
     6547.broken-themes table {
    65446548        text-align: left;
    65456549        width: 50%;
    65466550        border-spacing: 3px;

  • 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
    … …  
    172121.theme .delete-theme:hover:before {
    173122        background: #d54e21;
    174123}
    175 body.edit-mode .theme .delete-theme {
    176         display: inline-block;
    177 }
    178 body.edit-mode .theme:hover .theme-screenshot img {
    179         opacity: 1;
    180 }
    181 body.edit-mode .theme:hover:after {
    182         opacity: 0;
    183 }
    184 body.edit-mode .theme:hover .theme-actions,
    185 body.edit-mode .theme.add-new {
    186         display: none;
    187 }
    188124
    189 
    190125/*
    191126 * Theme Screenshot
    192127 *
    … …  
    350285/*
    351286 * Add new theme
    352287 */
    353 .add-new {
     288.theme-browser .add-new-theme {
    354289        border: none;
    355290        box-shadow: none;
    356291}
    357 .add-new a {
     292.theme-browser .add-new-theme a {
    358293        color: #999;
    359294        text-decoration: none;
    360295        display: block;
    361296        position: relative;
    362297}
    363 .theme.add-new:after {
     298.theme-browser .add-new-theme:after {
    364299        display: block;
    365300        content: '';
    366301        opacity: 1;
    … …  
    376311        border: 5px dashed rgba(0, 0, 0, 0.1);
    377312        box-sizing: border-box;
    378313}
    379 .theme.add-new span:after {
     314.theme-browser .add-new-theme span:after {
    380315        background: rgba(153, 153, 153, 0.1);
    381316        border-radius: 50%;
    382317        display: inline-block;
    … …  
    397332        text-shadow: none;
    398333        z-index:4;
    399334}
    400 .theme.add-new:hover .theme-screenshot {
     335.theme-browser .add-new-theme:hover .theme-screenshot {
    401336        background: none;
    402337}
    403 .theme.add-new:hover span:after {
     338.theme-browser .add-new-theme:hover span:after {
    404339        background: #fff;
    405340        color: rgb(16, 116, 162);
    406341        box-shadow: 0 2px 1px rgba(0,0,0,0.3);
    407342}
    408343
    409 .theme.add-new:hover:after {
     344.theme-browser .add-new-theme:hover:after {
    410345        border-color: transparent;
    411346        color: #fff;
    412347        background: rgb(16, 116, 162);
    413348}
    414349
    415 .add-new .theme-name {
     350.theme-browser .add-new-theme .theme-name {
    416351        background: none;
    417352        text-align: center;
    418353        box-shadow: none;
    … …  
    420355        position: relative;
    421356        top: -70px;
    422357}
    423 .add-new:hover .theme-name {
     358.theme-browser .add-new-theme:hover .theme-name {
    424359        color: #fff;
    425360        z-index: 2;
    426361}
    427362
    428 
    429363/*
    430364 * The search form
    431365 */
    432 .search-form {
     366.theme-browser .theme-search {
    433367        float: left;
    434368        position: relative;
    435369                top: 7px;
    436370                left: 10px;
    437 }
    438 #theme-search {
    439371        font-size: 16px;
    440372        font-weight: 300;
    441373        line-height: 1.5;
    442374}
    443375
    444 
    445376/*
    446377 * Theme Overlay
    447378 * Shown when clicking a theme
    448379 */
    449 #theme-overlay {
    450 }
    451 #theme-overlay .theme-backdrop {
     380.theme-overlay .theme-backdrop {
    452381        position: absolute;
    453382                left: -20px;
    454383                right: 0;
    … …  
    458387        /* background: rgba(0,0,0,0.7); */
    459388        z-index: 10;
    460389}
    461 body.theme-overlay {
     390body.theme-overlay-open {
    462391        overflow: hidden;
    463392}
    464393
    465 #theme-overlay .theme-utility {
     394.theme-overlay .theme-utility {
    466395        position: absolute;
    467396                top: 0;
    468397                left: 0;
    469398                right: 0;
    470399        border-bottom: 1px solid #eee;
    471400}
    472 #theme-overlay .back {
     401.theme-overlay .back {
    473402        cursor: pointer;
    474403        height: 48px;
    475404        width: 50px;
    … …  
    477406        float: right;
    478407        border-left: 1px solid #eee;
    479408}
    480 #theme-overlay .back:hover {
     409.theme-overlay .back:hover {
    481410        background: #333;
    482411}
    483 #theme-overlay .back:hover:before {
     412.theme-overlay .back:hover:before {
    484413        color: #fff;
    485414}
    486 #theme-overlay .back:before {
     415.theme-overlay .back:before {
    487416        font: normal 30px/48px 'dashicons' !important;
    488417        color: #bbb;
    489418        display: inline-block;
    … …  
    491420        font-weight: 300;
    492421}
    493422/* Left and right navigation */
    494 #theme-overlay .right,
    495 #theme-overlay .left {
     423.theme-overlay .right,
     424.theme-overlay .left {
    496425        cursor: pointer;
    497426        -webkit-user-select: none;
    498427        -moz-user-select: none;
    … …  
    504433        text-align: center;
    505434        border-right: 1px solid #eee;
    506435}
    507 #theme-overlay .right:hover,
    508 #theme-overlay .left:hover {
     436.theme-overlay .right:hover,
     437.theme-overlay .left:hover {
    509438        background: #333;
    510439}
    511         #theme-overlay .right:hover:before,
    512         #theme-overlay .left:hover:before {
     440        .theme-overlay .right:hover:before,
     441        .theme-overlay .left:hover:before {
    513442                color: #fff;
    514443        }
    515 #theme-overlay .left:before {
     444.theme-overlay .left:before {
    516445        content: '\f341';
    517446}
    518 #theme-overlay .right:before {
     447.theme-overlay .right:before {
    519448        content: '\f345';
    520449}
    521 #theme-overlay .right:before,
    522 #theme-overlay .left:before {
     450.theme-overlay .right:before,
     451.theme-overlay .left:before {
    523452        font: normal 16px/54px 'dashicons' !important;
    524453        display: inline;
    525454        font-weight: 300;
    526455}
    527 #theme-overlay .left:before {}
     456.theme-overlay .left:before {}
    528457
    529 #theme-overlay .theme-wrap {
     458.theme-overlay .theme-wrap {
    530459        clear: both;
    531460        position: fixed;
    532461                top: 120px;
    … …  
    539468        box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0,0,0,0.1);
    540469        z-index: 20;
    541470}
    542 #theme-overlay .theme-wrap:after {
     471.theme-overlay .theme-wrap:after {
    543472        content: ".";
    544473        display: block;
    545474        height: 0;
    … …  
    547476        visibility: hidden;
    548477}
    549478
    550 #theme-overlay .theme-actions {
     479.theme-overlay .theme-actions {
    551480        position: fixed;
    552481        text-align: center;
    553482        bottom: 80px;
    … …  
    558487        border-top: 1px solid rgba(0,0,0,0.1);
    559488        z-index: 30;
    560489}
    561 #theme-overlay.active .theme-actions {
     490.theme-overlay.active .theme-actions {
    562491
    563492}
    564 #theme-overlay .theme-actions a {
     493.theme-overlay .theme-actions a {
    565494        margin-right: 5px;
    566495        margin-bottom: 0;
    567496        font-size: 16px;
    … …  
    569498        height: 37px;
    570499        padding: 0 20px 1px 20px;
    571500}
    572 #theme-overlay .theme-actions .delete-theme {
     501.theme-overlay .theme-actions .delete-theme {
    573502        border-radius: 2px;
    574503        color: #a00;
    575504        font-size: 14px;
    … …  
    579508                bottom: 20px;
    580509        text-decoration: none;
    581510}
    582 #theme-overlay .theme-actions .delete-theme:hover {
     511.theme-overlay .theme-actions .delete-theme:hover {
    583512        background: #d54e21;
    584513        color: #fff;
    585514}
    586515
    587 #theme-overlay .theme-actions .active-theme,
    588 #theme-overlay.active .theme-actions .inactive-theme {
     516.theme-overlay .theme-actions .active-theme,
     517.theme-overlay.active .theme-actions .inactive-theme {
    589518        display: none;
    590519}
    591 #theme-overlay .theme-actions .inactive-theme,
    592 #theme-overlay.active .theme-actions .active-theme {
     520.theme-overlay .theme-actions .inactive-theme,
     521.theme-overlay.active .theme-actions .active-theme {
    593522        display: block;
    594523}
    595524/*
    596525 * Theme Screenshots gallery
    597526 */
    598 #theme-overlay .theme-screenshots {
     527.theme-overlay .theme-screenshots {
    599528        float: left;
    600529        margin: 0 30px 0 0;
    601530        width: 55%;
    602531        text-align: center;
    603532}
    604533/* First screenshot, shown big */
    605 #theme-overlay .screenshot {
     534.theme-overlay .screenshot {
    606535        background: #000;
    607536        border: 1px solid #fff;
    608537        -moz-box-sizing: border-box;
    … …  
    612541        position: relative;
    613542        box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
    614543}
    615 #theme-overlay .screenshot:after {
     544.theme-overlay .screenshot:after {
    616545        content: '';
    617546        display: block;
    618547        padding-top: 66.66666%; /* using a 3/2 aspect ratio */
    619548}
    620 #theme-overlay .screenshot img {
     549.theme-overlay .screenshot img {
    621550        cursor: pointer;
    622551        height: auto;
    623552        position: absolute;
    … …  
    626555        width: 100%;
    627556}
    628557/* Other screenshots, shown small and square */
    629 #theme-overlay .screenshot.thumb {
     558.theme-overlay .screenshot.thumb {
    630559        background: #ccc;
    631560        border: 1px solid #eee;
    632561        float: none;
    … …  
    635564        width: 140px;
    636565        height: 80px;
    637566}
    638 #theme-overlay .screenshot.thumb:after {
     567.theme-overlay .screenshot.thumb:after {
    639568        content: '';
    640569        display: block;
    641570        padding-top: 100%; /* using a 1/1 aspect ratio */
    642571}
    643 #theme-overlay .screenshot.thumb img {
     572.theme-overlay .screenshot.thumb img {
    644573        cursor: pointer;
    645574        height: auto;
    646575        position: absolute;
    … …  
    649578        width: 100%;
    650579        height: auto;
    651580}
    652 #theme-overlay .screenshot.selected {
     581.theme-overlay .screenshot.selected {
    653582        background: transparent;
    654583        border: 2px solid #2ea2cc;
    655584}
    656 #theme-overlay .screenshot.selected img {
     585.theme-overlay .screenshot.selected img {
    657586        opacity: 0.8;
    658587}
    659588/*
    660589 * Theme heading information
    661590 */
    662 #theme-overlay .theme-info {
     591.theme-overlay .theme-info {
    663592        width: 40%;
    664593        float: left;
    665594}
    666 #theme-overlay .current-label {
     595.theme-overlay .current-label {
    667596        background: #333;
    668597        color: #fff;
    669598        font-size: 11px;
    … …  
    674603        -webkit-user-select: none;
    675604        user-select: none;
    676605}
    677 #theme-overlay .theme-name {
     606.theme-overlay .theme-name {
    678607        color: #222;
    679608        font-size: 32px;
    680609        font-weight: 100;
    681610        margin: 10px 0 0;
    682611        line-height: 1.3;
    683612}
    684 #theme-overlay .theme-version {
     613.theme-overlay .theme-version {
    685614        color: #999;
    686615        font-size: 13px;
    687616        font-weight: 400;
    … …  
    691620        -webkit-user-select: none;
    692621        user-select: none;
    693622}
    694 #theme-overlay .theme-author {
     623.theme-overlay .theme-author {
    695624        color: #686868;
    696625        font-size: 16px;
    697626        font-weight: 400;
    698627        margin: 15px 0 25px;
    699628}
    700 #theme-overlay .theme-author a {
     629.theme-overlay .theme-author a {
    701630        text-decoration: none;
    702631}
    703 #theme-overlay .theme-description {
     632.theme-overlay .theme-description {
    704633        color: #555;
    705634        font-size: 15px;
    706635        font-weight: 400;
    707636        line-height: 1.5;
    708637        margin: 30px 0 0 0;
    709638}
    710 #theme-overlay .theme-tags {
     639.theme-overlay .theme-tags {
    711640        border-top: 3px solid #eee;
    712641        color: #888;
    713642        font-size: 13px;
    … …  
    716645        padding-top: 20px;
    717646        text-transform: capitalize;
    718647}
    719 #theme-overlay .theme-tags span {
     648.theme-overlay .theme-tags span {
    720649        color: #444;
    721650        font-weight: bold;
    722651        margin-right: 5px;
    723652}
    724 #theme-overlay .theme-actions {
     653.theme-overlay .theme-actions {
    725654}
    726655/* Theme Updates info */
    727 #theme-overlay .theme-update-message {
     656.theme-overlay .theme-update-message {
    728657        background: #fefaf7;
    729658        border: 1px solid #eee;
    730659        border-left: 4px solid #d54e21;
    731660        border-radius: 3px;
    732661        padding: 5px 20px 10px;
    733662}
    734 #theme-overlay .theme-update {
     663.theme-overlay .theme-update {
    735664        color: #222;
    736665        font-size: 18px;
    737666        display: inline-block;
    738667        line-height: 40px;
    739668        margin: 0;
    740669}
    741 #theme-overlay .parent-theme {
     670.theme-overlay .parent-theme {
    742671        background: #f7fcfe;
    743672        border: 1px solid #eee;
    744673        border-left: 4px solid #2ea2cc;
    … …  
    747676        margin-top: 30px;
    748677        padding: 10px 10px 10px 20px;
    749678}
    750 #theme-overlay .parent-theme strong {
     679.theme-overlay .parent-theme strong {
    751680        font-weight: 700;
    752681}
    753682
    … …  
    828757        .theme.add-new:after {
    829758                font-size: 23vw;
    830759        }
    831         #theme-overlay .theme-wrap,
    832         #theme-overlay .theme-actions {
     760        .theme-overlay .theme-wrap,
     761        .theme-overlay .theme-actions {
    833762                right: 15%;
    834763                left: 22%;
    835764        }
    … …  
    851780}
    852781/* Mini-sidebar in MP6 */
    853782@media ( max-width: 900px ) {
    854         #theme-overlay .theme-wrap,
    855         #theme-overlay .theme-actions {
     783        .theme-overlay .theme-wrap,
     784        .theme-overlay .theme-actions {
    856785                left: 76px;
    857786        }
    858787}
    … …  
    861790                margin-top: 6px;
    862791                margin-right: -3px
    863792        }
    864         #theme-overlay .theme-wrap {
     793        .theme-overlay .theme-wrap {
    865794                top: 45px;
    866795                right: 0px;
    867796                bottom: 0px;
    868797                left: 0px;
    869798                padding: 70px 20px 100px;
    870799        }
    871         #theme-overlay .theme-actions {
     800        .theme-overlay .theme-actions {
    872801                right: 0px;
    873802                bottom: 0px;
    874803                left: 0px;
    875804                text-align: left;
    876805                padding: 10px;
    877806        }
    878         #theme-overlay .theme-screenshots {
     807        .theme-overlay .theme-screenshots {
    879808                width: 40%;
    880809        }
    881         #theme-overlay .theme-info {
     810        .theme-overlay .theme-info {
    882811                width: 50%;
    883812        }
    884         #theme-overlay .theme-actions .delete-theme {
     813        .theme-overlay .theme-actions .delete-theme {
    885814                bottom: 10px;
    886815        }
    887         .search-form {
     816        .theme-browser .theme-search {
    888817                top: 3px;
    889818        }
    890819}
    … …  
    903832        .theme.add-new:after {
    904833                font-size: 53vw;
    905834        }
    906         #theme-overlay .theme-update,
    907         #theme-overlay .theme-description {
     835        .theme-overlay .theme-update,
     836        .theme-overlay .theme-description {
    908837                margin-left: 0;
    909838        }
    910         #theme-overlay.active .theme-actions .active-theme .button:nth-child(3n) {
     839        .theme-overlay.active .theme-actions .active-theme .button:nth-child(3n) {
    911840                display: none;
    912841        }
    913842        .theme.active .theme-actions .button {
    914843                margin-top: 6px;
    915844                margin-right: 0;
    916845        }
    917         #theme-overlay .theme-screenshots {
     846        .theme-overlay .theme-screenshots {
    918847                width: 100%;
    919848                float: none;
    920849        }
    921         #theme-overlay .theme-info {
     850        .theme-overlay .theme-info {
    922851                width: 100%;
    923852        }
    924         #theme-overlay .theme-author {
     853        .theme-overlay .theme-author {
    925854                margin: 5px 0 15px 0;
    926855        }
    927         #theme-overlay .theme-version {
     856        .theme-overlay .theme-version {
    928857                margin-left: 0;
    929858                position: absolute;
    930859                        top: 18px;
    931860                        left: 130px;
    932861        }
    933         #theme-overlay .current-label {
     862        .theme-overlay .current-label {
    934863                margin-top: 10px;
    935864                font-size: 13px;
    936865        }
    937866        /*
    938867         * Search form
    939868         */
    940         .search-form {
     869        .theme-browser .theme-search {
    941870                float: none;
    942871                clear: both;
    943872                left: 0;
    944         }
    945         #theme-search {
    946873                margin: 10px 0;
    947874                width: 100%;
    948875        }

  • wp-admin/themes.php

     
    9696                'customizeURI'  => ( current_user_can( 'edit_theme_options' ) ) ? wp_customize_url() : null,
    9797                'confirmDelete' => __( "Are you sure you want to delete this theme?\n\nClick 'Cancel' to go back, 'OK' to confirm the delete." ),
    9898                'root'          => '/wp-admin/themes.php',
    99                 'container'     => '#appearance',
    10099                'extraRoutes'   => '',
    101100        ),
    102         'i18n' => array(
    103                 'addNew'        => __( 'Add New Theme' ),
    104         ),
     101        'l10n' => array(
     102                'addNew' => __( 'Add New Theme' ),
     103                'search'  => __( 'Search...' ),
     104        ),
    105105) );
    106106
    107107add_thickbox();
    … …  
    112112require_once( ABSPATH . 'wp-admin/admin-header.php' );
    113113?>
    114114
    115 <div id="appearance" class="wrap">
     115<div class="wrap">
    116116        <h2><?php esc_html_e( 'Themes' ); ?>
    117                 <span id="theme-count" class="theme-count"></span>
     117                <span class="theme-count"></span>
    118118        <?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?>
    119119                <a href="<?php echo admin_url( 'theme-install.php' ); ?>" class="add-new-h2"><?php echo esc_html( _x( 'Add New', 'Add new theme' ) ); ?></a>
    120120        <?php endif; ?>
    121121        </h2>
    122122
     123        <div class="theme-browser"></div>
     124
    123125<?php
    124126if ( ! validate_current_theme() || isset( $_GET['broken'] ) ) : ?>
    125127<div id="message1" class="updated"><p><?php _e('The active theme is broken. Reverting to the default theme.'); ?></p></div>
    … …  
    183185if ( ! is_multisite() && current_user_can('edit_themes') && $broken_themes = wp_get_themes( array( 'errors' => true ) ) ) {
    184186?>
    185187
     188<div class="broken-themes">
    186189<h3><?php _e('Broken Themes'); ?></h3>
    187190<p><?php _e('The following themes are installed but incomplete. Themes must have a stylesheet and a template.'); ?></p>
    188191
    189 <table id="broken-themes">
     192<table>
    190193        <tr>
    191194                <th><?php _ex('Name', 'theme name'); ?></th>
    192195                <th><?php _e('Description'); ?></th>
    … …  
    195198        foreach ( $broken_themes as $broken_theme ) {
    196199                echo "
    197200                <tr>
    198                          <td>" . $broken_theme->get('Name') ."</td>
     201                         <td>" . ( $broken_theme->get( 'Name' ) ? $broken_theme->get( 'Name' ) : $broken_theme->get_stylesheet() ) . "</td>
    199202                         <td>" . $broken_theme->errors()->get_error_message() . "</td>
    200203                </tr>";
    201204        }
    202205?>
    203206</table>
     207</div>
     208
    204209<?php
    205210}
    206211?>
    … …  
    235240        <# } #>
    236241</script>
    237242
    238 <script id="tmpl-theme-search" type="text/template">
    239         <input type="text" name="theme-search" id="theme-search" placeholder="<?php esc_attr_e( 'Search...' ); ?>" />
    240 </script>
    241 
    242243<script id="tmpl-theme-single" type="text/template">
    243244        <div class="theme-backdrop"></div>
    244245        <div class="theme-wrap">
    … …  
    248249                        <div alt="<?php _e( 'Show next theme' ); ?>" class="right dashicons dashicons-no"></div>
    249250                </div>
    250251
    251                 <div class="theme-screenshots" id="theme-screenshots">
     252                <div class="theme-screenshots">
    252253                        <div class="screenshot first"><img src="{{ data.screenshot[0] }}" alt="" /></div>
    253254                <#
    254255                        if ( _.size( data.screenshot ) > 1 ) {