WordPress.org

Make WordPress Core

Changeset 26291


Ignore:
Timestamp:
11/20/2013 07:43:36 PM (6 years ago)
Author:
nacin
Message:

Dash cleanup.

  • Use wp_add_dashboard_widget() rather than add_meta_box().
  • Use original functions like wp_dashboard_primary(), wp_dashboard_right_now(), wp_dashboard_quick_press() (where possible).
  • Only include plugins section of the news widget when appropriate, which necessitates the set_current_screen() via the ajax action.
  • Remove some debug cruft that was preventing caching and invalidation.
  • Simplify lots of things where possible.

see #25824.

Location:
trunk/src/wp-admin
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/theme.css

    r26280 r26291  
    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;
     
    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;
    36 }
    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;
    8231}
    8332
     
    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 }
    188 
    189124
    190125/*
     
    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;
     
    361296    position: relative;
    362297}
    363 .theme.add-new:after {
     298.theme-browser .add-new-theme:after {
    364299    display: block;
    365300    content: '';
     
    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%;
     
    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);
     
    407342}
    408343
    409 .theme.add-new:hover:after {
     344.theme-browser .add-new-theme:hover:after {
    410345    border-color: transparent;
    411346    color: #fff;
     
    413348}
    414349
    415 .add-new .theme-name {
     350.theme-browser .add-new-theme .theme-name {
    416351    background: none;
    417352    text-align: center;
     
    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;
     
    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;
     
    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;
     
    470399    border-bottom: 1px solid #eee;
    471400}
    472 #theme-overlay .back {
     401.theme-overlay .back {
    473402    cursor: pointer;
    474403    height: 48px;
     
    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;
     
    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;
     
    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 {}
    528 
    529 #theme-overlay .theme-wrap {
     456.theme-overlay .left:before {}
     457
     458.theme-overlay .theme-wrap {
    530459    clear: both;
    531460    position: fixed;
     
    540469    z-index: 20;
    541470}
    542 #theme-overlay .theme-wrap:after {
     471.theme-overlay .theme-wrap:after {
    543472    content: ".";
    544473    display: block;
     
    548477}
    549478
    550 #theme-overlay .theme-actions {
     479.theme-overlay .theme-actions {
    551480    position: fixed;
    552481    text-align: center;
     
    559488    z-index: 30;
    560489}
    561 #theme-overlay.active .theme-actions {
    562 
    563 }
    564 #theme-overlay .theme-actions a {
     490.theme-overlay.active .theme-actions {
     491
     492}
     493.theme-overlay .theme-actions a {
    565494    margin-right: 5px;
    566495    margin-bottom: 0;
     
    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;
     
    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}
     
    596525 * Theme Screenshots gallery
    597526 */
    598 #theme-overlay .theme-screenshots {
     527.theme-overlay .theme-screenshots {
    599528    float: left;
    600529    margin: 0 30px 0 0;
     
    603532}
    604533/* First screenshot, shown big */
    605 #theme-overlay .screenshot {
     534.theme-overlay .screenshot {
    606535    background: #000;
    607536    border: 1px solid #fff;
     
    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;
     
    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;
     
    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;
     
    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}
     
    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;
     
    675604    user-select: none;
    676605}
    677 #theme-overlay .theme-name {
     606.theme-overlay .theme-name {
    678607    color: #222;
    679608    font-size: 32px;
     
    682611    line-height: 1.3;
    683612}
    684 #theme-overlay .theme-version {
     613.theme-overlay .theme-version {
    685614    color: #999;
    686615    font-size: 13px;
     
    692621    user-select: none;
    693622}
    694 #theme-overlay .theme-author {
     623.theme-overlay .theme-author {
    695624    color: #686868;
    696625    font-size: 16px;
     
    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;
     
    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;
     
    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;
     
    732661    padding: 5px 20px 10px;
    733662}
    734 #theme-overlay .theme-update {
     663.theme-overlay .theme-update {
    735664    color: #222;
    736665    font-size: 18px;
     
    739668    margin: 0;
    740669}
    741 #theme-overlay .parent-theme {
     670.theme-overlay .parent-theme {
    742671    background: #f7fcfe;
    743672    border: 1px solid #eee;
     
    748677    padding: 10px 10px 10px 20px;
    749678}
    750 #theme-overlay .parent-theme strong {
     679.theme-overlay .parent-theme strong {
    751680    font-weight: 700;
    752681}
     
    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%;
     
    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    }
     
    862791        margin-right: -3px
    863792    }
    864     #theme-overlay .theme-wrap {
     793    .theme-overlay .theme-wrap {
    865794        top: 45px;
    866795        right: 0px;
     
    869798        padding: 70px 20px 100px;
    870799    }
    871     #theme-overlay .theme-actions {
     800    .theme-overlay .theme-actions {
    872801        right: 0px;
    873802        bottom: 0px;
     
    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    }
     
    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    }
     
    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;
     
    931860            left: 130px;
    932861    }
    933     #theme-overlay .current-label {
     862    .theme-overlay .current-label {
    934863        margin-top: 10px;
    935864        font-size: 13px;
     
    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%;
  • trunk/src/wp-admin/css/wp-admin.css

    r26289 r26291  
    65416541}
    65426542
    6543 #broken-themes {
     6543.broken-themes {
     6544    clear: both;
     6545}
     6546
     6547.broken-themes table {
    65446548    text-align: left;
    65456549    width: 50%;
  • trunk/src/wp-admin/js/theme.js

    r26288 r26291  
    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
     
    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,
    31 
    32     events: {
    33         'click .themes-bulk-edit': 'editMode',
    34         'click .theme .delete-theme': 'deleteTheme'
    35     },
    3629
    3730    // Sets up a throttler for binding to 'scroll'
     
    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
     
    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
     
    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});
     
    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    },
     
    246230
    247231    // Wrap theme data on a div.theme element
    248     id: 'theme-overlay',
     232    className: 'theme-overlay',
    249233
    250234    events: {
     
    260244    render: function() {
    261245        var data = this.model.toJSON();
    262 
    263246        this.$el.html( this.html( data ) );
    264247        // Renders active theme styles
     
    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
     
    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();
     
    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
     
    392371
    393372    // The theme count element
    394     count: $( '#theme-count' ),
     373    count: $( '.theme-count' ),
    395374
    396375    initialize: function( options ) {
     
    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
     
    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
     
    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.addNew + '</h3></a></div>' );
    470449        }
    471450
     
    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
     
    517495
    518496        this.overlay.screenshotGallery();
    519 
    520         // Resets counter whenever the overlay is opened
    521         this.index = 0;
    522497
    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,
     
    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
     
    562530
    563531            // We have a new theme...
    564             // Clean the overlay
    565             this.overlay.$el.html('');
    566 
    567             // Create the view
    568             this.nextTheme = new themes.view.Details({
    569                 model: nextModel,
    570                 className: 'theme-' + nextModel.id
    571             });
     532            // Close the overlay
     533            this.overlay.closeOverlay();
    572534
    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 );
    579         }
    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--;
     536            // that renders the new theme's overlay
     537            themes.router.navigate( 'theme/' + nextModel.id, { trigger: true } );
     538        }
    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,
     
    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( '' );
    602 
    603             // Create the view
    604             this.previousTheme = new themes.view.Details({
    605                 model: previousModel,
    606                 className: 'theme-' + previousModel.id
    607             });
     556            // Close the overlay
     557            this.overlay.closeOverlay();
    608558
    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 );
    615         }
    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++;
     560            // that renders the new theme's overlay
     561            themes.router.navigate( 'theme/' + previousModel.id, { trigger: true } );
     562        }
    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',
    628 
    629     // 'keyup' triggers search
     569    tagName: 'input',
     570    className: 'theme-search',
     571
     572    attributes: {
     573        placeholder: l10n.search
     574    },
     575
    630576    events: {
    631         'keyup #theme-search': 'search'
    632     },
    633 
    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 );
    641     },
    642 
    643     // Runs a search on the theme collection
    644     // bind on 'keyup' event
    645     search: function() {
    646         this.collection.doSearch( $( '#theme-search' ).val() );
     577        'input':  'search',
     578        'keyup':  'search',
     579        'change': 'search',
     580        'search': 'search'
     581    },
     582
     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});
     
    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});
  • trunk/src/wp-admin/themes.php

    r26288 r26291  
    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
     
    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>
     122
     123    <div class="theme-browser"></div>
    122124
    123125<?php
     
    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>
     
    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>";
     
    202205?>
    203206</table>
     207</div>
     208
    204209<?php
    205210}
     
    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>
     
    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        <#
Note: See TracChangeset for help on using the changeset viewer.