diff --git a/src/wp-admin/css/theme.css b/src/wp-admin/css/theme.css index e741a25242..f694a3a1ae 100644 --- a/src/wp-admin/css/theme.css +++ b/src/wp-admin/css/theme.css @@ -1,20 +1,15 @@ -/** - * THX38 styles... - * - * Note: it expects mp6 plugin to be active as this is based on that design of the admin. - */ -#themes { +.theme-browser .themes { clear: both; padding: 0 0 100px; } -#appearance h2 { +.themes-php .wrap h2 { float: left; margin-bottom: 15px; } -#appearance h2 .button { +.themes-php .wrap h2 .button { margin-left: 20px; } -.theme-count { +.themes-php .theme-count { color: #fff; border-radius: 30px; background: #777; @@ -27,59 +22,13 @@ top: -3px; } /* Position admin messages */ -#appearance div.updated { +.themes-php div.updated { margin: 0 0 20px 0; clear: both; } -#appearance div.updated a { +.themes-php div.updated a { text-decoration: underline; } -/* Add new theme */ -.add-new-h2 { - background: #e0e0e0; - color: #555; - margin-left: 20px; -} -.add-new-icon:hover { - background: #2ea2cc; -} -/* Edit mode toggle */ -.themes-bulk-edit { - color: #555; - cursor: pointer; - font-size: 14px; - margin-left: 20px; - padding: 4px 8px; - border: 1px solid #ddd; - display: none; -} -.themes-bulk-edit:before { - content: '\f111'; - display: inline-block; - font: normal 20px/1 'dashicons'; - margin: 0 6px 0 0; - opacity: 0.8; - position: relative; - top: 4px; - speak: none; - -webkit-font-smoothing: antialiased; -} -.themes-bulk-edit:hover { - border-color: #2ea2cc; - color: #2ea2cc; -} -.edit-mode .themes-bulk-edit { - background: #555; - color: #fff; -} -.edit-mode .themes-bulk-edit .edit, -.themes-bulk-edit .done { - display: none; -} -.edit-mode .themes-bulk-edit .done, -.themes-bulk-edit .edit { - display: inline; -} /** * Main theme element @@ -172,20 +121,6 @@ .theme .delete-theme:hover:before { background: #d54e21; } -body.edit-mode .theme .delete-theme { - display: inline-block; -} -body.edit-mode .theme:hover .theme-screenshot img { - opacity: 1; -} -body.edit-mode .theme:hover:after { - opacity: 0; -} -body.edit-mode .theme:hover .theme-actions, -body.edit-mode .theme.add-new { - display: none; -} - /* * Theme Screenshot @@ -350,17 +285,17 @@ body.edit-mode .theme.add-new { /* * Add new theme */ -.add-new { +.theme-browser .add-new-theme { border: none; box-shadow: none; } -.add-new a { +.theme-browser .add-new-theme a { color: #999; text-decoration: none; display: block; position: relative; } -.theme.add-new:after { +.theme-browser .add-new-theme:after { display: block; content: ''; opacity: 1; @@ -376,7 +311,7 @@ body.edit-mode .theme.add-new { border: 5px dashed rgba(0, 0, 0, 0.1); box-sizing: border-box; } -.theme.add-new span:after { +.theme-browser .add-new-theme span:after { background: rgba(153, 153, 153, 0.1); border-radius: 50%; display: inline-block; @@ -397,22 +332,22 @@ body.edit-mode .theme.add-new { text-shadow: none; z-index:4; } -.theme.add-new:hover .theme-screenshot { +.theme-browser .add-new-theme:hover .theme-screenshot { background: none; } -.theme.add-new:hover span:after { +.theme-browser .add-new-theme:hover span:after { background: #fff; color: rgb(16, 116, 162); box-shadow: 0 2px 1px rgba(0,0,0,0.3); } -.theme.add-new:hover:after { +.theme-browser .add-new-theme:hover:after { border-color: transparent; color: #fff; background: rgb(16, 116, 162); } -.add-new .theme-name { +.theme-browser .add-new-theme .theme-name { background: none; text-align: center; box-shadow: none; @@ -420,35 +355,29 @@ body.edit-mode .theme.add-new { position: relative; top: -70px; } -.add-new:hover .theme-name { +.theme-browser .add-new-theme:hover .theme-name { color: #fff; z-index: 2; } - /* * The search form */ -.search-form { +.theme-browser .theme-search { float: left; position: relative; top: 7px; left: 10px; -} -#theme-search { font-size: 16px; font-weight: 300; line-height: 1.5; } - /* * Theme Overlay * Shown when clicking a theme */ -#theme-overlay { -} -#theme-overlay .theme-backdrop { +.theme-overlay .theme-backdrop { position: absolute; left: -20px; right: 0; @@ -458,18 +387,18 @@ body.edit-mode .theme.add-new { /* background: rgba(0,0,0,0.7); */ z-index: 10; } -body.theme-overlay { +body.theme-overlay-open { overflow: hidden; } -#theme-overlay .theme-utility { +.theme-overlay .theme-utility { position: absolute; top: 0; left: 0; right: 0; border-bottom: 1px solid #eee; } -#theme-overlay .back { +.theme-overlay .back { cursor: pointer; height: 48px; width: 50px; @@ -477,13 +406,13 @@ body.theme-overlay { float: right; border-left: 1px solid #eee; } -#theme-overlay .back:hover { +.theme-overlay .back:hover { background: #333; } -#theme-overlay .back:hover:before { +.theme-overlay .back:hover:before { color: #fff; } -#theme-overlay .back:before { +.theme-overlay .back:before { font: normal 30px/48px 'dashicons' !important; color: #bbb; display: inline-block; @@ -491,8 +420,8 @@ body.theme-overlay { font-weight: 300; } /* Left and right navigation */ -#theme-overlay .right, -#theme-overlay .left { +.theme-overlay .right, +.theme-overlay .left { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -504,29 +433,29 @@ body.theme-overlay { text-align: center; border-right: 1px solid #eee; } -#theme-overlay .right:hover, -#theme-overlay .left:hover { +.theme-overlay .right:hover, +.theme-overlay .left:hover { background: #333; } - #theme-overlay .right:hover:before, - #theme-overlay .left:hover:before { + .theme-overlay .right:hover:before, + .theme-overlay .left:hover:before { color: #fff; } -#theme-overlay .left:before { +.theme-overlay .left:before { content: '\f341'; } -#theme-overlay .right:before { +.theme-overlay .right:before { content: '\f345'; } -#theme-overlay .right:before, -#theme-overlay .left:before { +.theme-overlay .right:before, +.theme-overlay .left:before { font: normal 16px/54px 'dashicons' !important; display: inline; font-weight: 300; } -#theme-overlay .left:before {} +.theme-overlay .left:before {} -#theme-overlay .theme-wrap { +.theme-overlay .theme-wrap { clear: both; position: fixed; top: 120px; @@ -539,7 +468,7 @@ body.theme-overlay { box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0,0,0,0.1); z-index: 20; } -#theme-overlay .theme-wrap:after { +.theme-overlay .theme-wrap:after { content: "."; display: block; height: 0; @@ -547,7 +476,7 @@ body.theme-overlay { visibility: hidden; } -#theme-overlay .theme-actions { +.theme-overlay .theme-actions { position: fixed; text-align: center; bottom: 80px; @@ -558,10 +487,10 @@ body.theme-overlay { border-top: 1px solid rgba(0,0,0,0.1); z-index: 30; } -#theme-overlay.active .theme-actions { +.theme-overlay.active .theme-actions { } -#theme-overlay .theme-actions a { +.theme-overlay .theme-actions a { margin-right: 5px; margin-bottom: 0; font-size: 16px; @@ -569,7 +498,7 @@ body.theme-overlay { height: 37px; padding: 0 20px 1px 20px; } -#theme-overlay .theme-actions .delete-theme { +.theme-overlay .theme-actions .delete-theme { border-radius: 2px; color: #a00; font-size: 14px; @@ -579,30 +508,30 @@ body.theme-overlay { bottom: 20px; text-decoration: none; } -#theme-overlay .theme-actions .delete-theme:hover { +.theme-overlay .theme-actions .delete-theme:hover { background: #d54e21; color: #fff; } -#theme-overlay .theme-actions .active-theme, -#theme-overlay.active .theme-actions .inactive-theme { +.theme-overlay .theme-actions .active-theme, +.theme-overlay.active .theme-actions .inactive-theme { display: none; } -#theme-overlay .theme-actions .inactive-theme, -#theme-overlay.active .theme-actions .active-theme { +.theme-overlay .theme-actions .inactive-theme, +.theme-overlay.active .theme-actions .active-theme { display: block; } /* * Theme Screenshots gallery */ -#theme-overlay .theme-screenshots { +.theme-overlay .theme-screenshots { float: left; margin: 0 30px 0 0; width: 55%; text-align: center; } /* First screenshot, shown big */ -#theme-overlay .screenshot { +.theme-overlay .screenshot { background: #000; border: 1px solid #fff; -moz-box-sizing: border-box; @@ -612,12 +541,12 @@ body.theme-overlay { position: relative; box-shadow: 0 0 0 1px rgba(0,0,0,0.2); } -#theme-overlay .screenshot:after { +.theme-overlay .screenshot:after { content: ''; display: block; padding-top: 66.66666%; /* using a 3/2 aspect ratio */ } -#theme-overlay .screenshot img { +.theme-overlay .screenshot img { cursor: pointer; height: auto; position: absolute; @@ -626,7 +555,7 @@ body.theme-overlay { width: 100%; } /* Other screenshots, shown small and square */ -#theme-overlay .screenshot.thumb { +.theme-overlay .screenshot.thumb { background: #ccc; border: 1px solid #eee; float: none; @@ -635,12 +564,12 @@ body.theme-overlay { width: 140px; height: 80px; } -#theme-overlay .screenshot.thumb:after { +.theme-overlay .screenshot.thumb:after { content: ''; display: block; padding-top: 100%; /* using a 1/1 aspect ratio */ } -#theme-overlay .screenshot.thumb img { +.theme-overlay .screenshot.thumb img { cursor: pointer; height: auto; position: absolute; @@ -649,21 +578,21 @@ body.theme-overlay { width: 100%; height: auto; } -#theme-overlay .screenshot.selected { +.theme-overlay .screenshot.selected { background: transparent; border: 2px solid #2ea2cc; } -#theme-overlay .screenshot.selected img { +.theme-overlay .screenshot.selected img { opacity: 0.8; } /* * Theme heading information */ -#theme-overlay .theme-info { +.theme-overlay .theme-info { width: 40%; float: left; } -#theme-overlay .current-label { +.theme-overlay .current-label { background: #333; color: #fff; font-size: 11px; @@ -674,14 +603,14 @@ body.theme-overlay { -webkit-user-select: none; user-select: none; } -#theme-overlay .theme-name { +.theme-overlay .theme-name { color: #222; font-size: 32px; font-weight: 100; margin: 10px 0 0; line-height: 1.3; } -#theme-overlay .theme-version { +.theme-overlay .theme-version { color: #999; font-size: 13px; font-weight: 400; @@ -691,23 +620,23 @@ body.theme-overlay { -webkit-user-select: none; user-select: none; } -#theme-overlay .theme-author { +.theme-overlay .theme-author { color: #686868; font-size: 16px; font-weight: 400; margin: 15px 0 25px; } -#theme-overlay .theme-author a { +.theme-overlay .theme-author a { text-decoration: none; } -#theme-overlay .theme-description { +.theme-overlay .theme-description { color: #555; font-size: 15px; font-weight: 400; line-height: 1.5; margin: 30px 0 0 0; } -#theme-overlay .theme-tags { +.theme-overlay .theme-tags { border-top: 3px solid #eee; color: #888; font-size: 13px; @@ -716,29 +645,29 @@ body.theme-overlay { padding-top: 20px; text-transform: capitalize; } -#theme-overlay .theme-tags span { +.theme-overlay .theme-tags span { color: #444; font-weight: bold; margin-right: 5px; } -#theme-overlay .theme-actions { +.theme-overlay .theme-actions { } /* Theme Updates info */ -#theme-overlay .theme-update-message { +.theme-overlay .theme-update-message { background: #fefaf7; border: 1px solid #eee; border-left: 4px solid #d54e21; border-radius: 3px; padding: 5px 20px 10px; } -#theme-overlay .theme-update { +.theme-overlay .theme-update { color: #222; font-size: 18px; display: inline-block; line-height: 40px; margin: 0; } -#theme-overlay .parent-theme { +.theme-overlay .parent-theme { background: #f7fcfe; border: 1px solid #eee; border-left: 4px solid #2ea2cc; @@ -747,7 +676,7 @@ body.theme-overlay { margin-top: 30px; padding: 10px 10px 10px 20px; } -#theme-overlay .parent-theme strong { +.theme-overlay .parent-theme strong { font-weight: 700; } @@ -828,8 +757,8 @@ body.theme-overlay { .theme.add-new:after { font-size: 23vw; } - #theme-overlay .theme-wrap, - #theme-overlay .theme-actions { + .theme-overlay .theme-wrap, + .theme-overlay .theme-actions { right: 15%; left: 22%; } @@ -851,8 +780,8 @@ body.theme-overlay { } /* Mini-sidebar in MP6 */ @media ( max-width: 900px ) { - #theme-overlay .theme-wrap, - #theme-overlay .theme-actions { + .theme-overlay .theme-wrap, + .theme-overlay .theme-actions { left: 76px; } } @@ -861,30 +790,30 @@ body.theme-overlay { margin-top: 6px; margin-right: -3px } - #theme-overlay .theme-wrap { + .theme-overlay .theme-wrap { top: 45px; right: 0px; bottom: 0px; left: 0px; padding: 70px 20px 100px; } - #theme-overlay .theme-actions { + .theme-overlay .theme-actions { right: 0px; bottom: 0px; left: 0px; text-align: left; padding: 10px; } - #theme-overlay .theme-screenshots { + .theme-overlay .theme-screenshots { width: 40%; } - #theme-overlay .theme-info { + .theme-overlay .theme-info { width: 50%; } - #theme-overlay .theme-actions .delete-theme { + .theme-overlay .theme-actions .delete-theme { bottom: 10px; } - .search-form { + .theme-browser .theme-search { top: 3px; } } @@ -903,46 +832,44 @@ body.theme-overlay { .theme.add-new:after { font-size: 53vw; } - #theme-overlay .theme-update, - #theme-overlay .theme-description { + .theme-overlay .theme-update, + .theme-overlay .theme-description { margin-left: 0; } - #theme-overlay.active .theme-actions .active-theme .button:nth-child(3n) { + .theme-overlay.active .theme-actions .active-theme .button:nth-child(3n) { display: none; } .theme.active .theme-actions .button { margin-top: 6px; margin-right: 0; } - #theme-overlay .theme-screenshots { + .theme-overlay .theme-screenshots { width: 100%; float: none; } - #theme-overlay .theme-info { + .theme-overlay .theme-info { width: 100%; } - #theme-overlay .theme-author { + .theme-overlay .theme-author { margin: 5px 0 15px 0; } - #theme-overlay .theme-version { + .theme-overlay .theme-version { margin-left: 0; position: absolute; top: 18px; left: 130px; } - #theme-overlay .current-label { + .theme-overlay .current-label { margin-top: 10px; font-size: 13px; } /* * Search form */ - .search-form { + .theme-browser .theme-search { float: none; clear: both; left: 0; - } - #theme-search { margin: 10px 0; width: 100%; } diff --git a/src/wp-admin/css/wp-admin.css b/src/wp-admin/css/wp-admin.css index d1b72b6d95..efc3a9cd27 100644 --- a/src/wp-admin/css/wp-admin.css +++ b/src/wp-admin/css/wp-admin.css @@ -6540,7 +6540,11 @@ h3.available-themes { color: #cfcfcf; } -#broken-themes { +.broken-themes { + clear: both; +} + +.broken-themes table { text-align: left; width: 50%; border-spacing: 3px; diff --git a/src/wp-admin/js/theme.js b/src/wp-admin/js/theme.js index c1e2fb1113..2332efdbba 100644 --- a/src/wp-admin/js/theme.js +++ b/src/wp-admin/js/theme.js @@ -4,11 +4,13 @@ window.wp = window.wp || {}; ( function($) { // Set up our namespace... -var themes = wp.themes = wp.themes || {}; +var themes, l10n; +themes = wp.themes = wp.themes || {}; // Store the theme data and settings for organized and quick access -// themes.data.settings, themes.data.themes, themes.data.i18n +// themes.data.settings, themes.data.themes, themes.data.l10n themes.data = _wpThemeSettings; +l10n = themes.data.l10n; // Setup app structure _.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template }); @@ -17,23 +19,14 @@ themes.model = Backbone.Model.extend({}); // Main view controller for themes.php // Unifies and renders all available views -// -// Hooks to #appearance and organizes the views to be rendered themes.view.Appearance = wp.Backbone.View.extend({ - // Set DOM container - // {#appearance} by default - el: themes.data.settings.container, + el: '#wpbody-content .wrap .theme-browser', window: $( window ), // Pagination instance page: 0, - events: { - 'click .themes-bulk-edit': 'editMode', - 'click .theme .delete-theme': 'deleteTheme' - }, - // Sets up a throttler for binding to 'scroll' initialize: function() { var self = this; @@ -61,12 +54,13 @@ themes.view.Appearance = wp.Backbone.View.extend({ collection: this.collection, parent: this }); + + // Render search form. + this.search(); + // Render and append this.view.render(); this.$el.append( this.view.el ); - - // Search form - this.search(); }, // Search input and view @@ -79,7 +73,7 @@ themes.view.Appearance = wp.Backbone.View.extend({ // Render and append after screen title view.render(); - self.$el.find( '> h2' ).after( view.el ); + self.$el.append( view.el ); }, // Checks when the user gets close to the bottom @@ -95,16 +89,6 @@ themes.view.Appearance = wp.Backbone.View.extend({ if ( bottom > threshold ) { this.trigger( 'theme:scroll' ); } - }, - - // Enters edit mode that allows easy access to deleting themes - editMode: function() { - $( 'body' ).toggleClass( 'edit-mode' ); - this.$el.find( '.themes-bulk-edit' ).toggleClass( 'mp6-text-highlight' ); - }, - - deleteTheme: function() { - return confirm( themes.data.settings.confirmDelete ); } }); @@ -219,7 +203,7 @@ themes.view.Theme = wp.Backbone.View.extend({ if ( this.model.get( 'active' ) ) { this.$el.addClass( 'active' ); this.$el.find( '.theme-name' ).addClass( 'mp6-primary' ); - $( '#theme-overlay' ).addClass( 'active' ); + $( '.theme-overlay' ).addClass( 'active' ); } }, @@ -245,7 +229,7 @@ themes.view.Theme = wp.Backbone.View.extend({ themes.view.Details = wp.Backbone.View.extend({ // Wrap theme data on a div.theme element - id: 'theme-overlay', + className: 'theme-overlay', events: { 'click': 'collapse', @@ -259,7 +243,6 @@ themes.view.Details = wp.Backbone.View.extend({ render: function() { var data = this.model.toJSON(); - this.$el.html( this.html( data ) ); // Renders active theme styles this.activeTheme(); @@ -271,11 +254,7 @@ themes.view.Details = wp.Backbone.View.extend({ // and to the overlay in detailed view mode activeTheme: function() { // Check the model has the active property - if ( this.model.get( 'active' ) ) { - this.$el.addClass( 'active' ); - } else { - $( '#theme-overlay' ).removeClass( 'active' ); - } + this.$el.toggleClass( 'active', this.model.get( 'active' ) ); }, // Single theme overlay screen @@ -297,7 +276,7 @@ themes.view.Details = wp.Backbone.View.extend({ // With a quick fade out animation this.$el.fadeOut( 130, function() { // Clicking outside the modal box closes the overlay - $( 'body' ).removeClass( 'theme-overlay closing-overlay' ); + $( 'body' ).removeClass( 'theme-overlay-open closing-overlay' ); // Handle event cleanup self.closeOverlay(); @@ -380,18 +359,18 @@ themes.view.Details = wp.Backbone.View.extend({ } }); -// Controls the rendering of div#themes, +// Controls the rendering of div.themes, // a wrapper that will hold all the theme elements themes.view.Themes = wp.Backbone.View.extend({ - id: 'themes', + className: 'themes', // Number to keep track of scroll position // while in theme-overlay mode index: 0, // The theme count element - count: $( '#theme-count' ), + count: $( '.theme-count' ), initialize: function( options ) { var self = this; @@ -445,7 +424,7 @@ themes.view.Themes = wp.Backbone.View.extend({ // Make sure the add-new stays at the end if ( page >= 1 ) { - $( '#add-new' ).remove(); + $( '.add-new-theme' ).remove(); } // Loop through the themes and setup each theme view @@ -456,7 +435,7 @@ themes.view.Themes = wp.Backbone.View.extend({ // Render the views... self.theme.render(); - // and append them to div#themes + // and append them to div.themes self.$el.append( self.theme.el ); // Binds to theme:expand to show the modal box @@ -466,7 +445,7 @@ themes.view.Themes = wp.Backbone.View.extend({ // 'Add new theme' element shown at the end of the grid if ( themes.data.settings.canInstall ) { - this.$el.append( '

' + themes.data.i18n.addNew + '

' ); + this.$el.append( '

' + l10n.addNew + '

' ); } this.parent.page++; @@ -504,12 +483,11 @@ themes.view.Themes = wp.Backbone.View.extend({ // Sets this.view to 'detail' this.setView( 'detail' ); - $( 'body' ).addClass( 'theme-overlay' ); + $( 'body' ).addClass( 'theme-overlay-open' ); // Set up the theme details view this.overlay = new themes.view.Details({ - model: self.model, - className: 'theme-' + self.model.id + model: self.model }); this.overlay.render(); @@ -517,133 +495,98 @@ themes.view.Themes = wp.Backbone.View.extend({ this.overlay.screenshotGallery(); - // Resets counter whenever the overlay is opened - this.index = 0; - // Bind to theme:next and theme:previous // triggered by the arrow keys // - // The index keep track of where we are at - // any given time + // Keep track of the current model so we + // can infer an index position this.listenTo( this.overlay, 'theme:next', function() { - // Bump the index number to keep track of how far - // we should go for the next theme - self.index++; // Renders the next theme on the overlay - self.next( [ self.model.cid, self.index ] ); + self.next( [ self.model.cid ] ); self.overlay.screenshotGallery(); }) .listenTo( this.overlay, 'theme:previous', function() { - // Decrease the index number to keep track of how far - // we should go for the previous theme - self.index--; // Renders the previous theme on the overlay - self.previous( [ self.model.cid, self.index ] ); + self.previous( [ self.model.cid ] ); self.overlay.screenshotGallery(); }); - }, // This method renders the next theme on the overlay modal // based on the current position in the collection - // @params [model cid] and [index] + // @params [model cid] next: function( args ) { var self = this, model, nextModel; // Get the current theme model = self.collection.get( args[0] ); - // Get the next one - nextModel = self.collection.at( self.collection.indexOf( model ) + args[1] ); + // Find the next model within the collection + nextModel = self.collection.at( self.collection.indexOf( model ) + 1 ); // Sanity check which also serves as a boundary test if ( nextModel !== undefined ) { // We have a new theme... - // Clean the overlay - this.overlay.$el.html(''); - - // Create the view - this.nextTheme = new themes.view.Details({ - model: nextModel, - className: 'theme-' + nextModel.id - }); + // Close the overlay + this.overlay.closeOverlay(); // Trigger a route update for the current model - themes.router.navigate( 'theme/' + nextModel.id ); - - // Render and fill this.overlay with the new html - this.nextTheme.render(); - return this.overlay.$el.html( this.nextTheme.el ); + // that renders the new theme's overlay + themes.router.navigate( 'theme/' + nextModel.id, { trigger: true } ); } - - // If we got this far it means we have no other themes - // so move back the counter to keep it sane - self.index--; }, // This method renders the previous theme on the overlay modal // based on the current position in the collection - // @params [model cid] and [index] + // @params [model cid] previous: function( args ) { var self = this, model, previousModel; // Get the current theme model = self.collection.get( args[0] ); - previousModel = self.collection.at( self.collection.indexOf( model ) + args[1] ); + // Find the previous model within the collection + previousModel = self.collection.at( self.collection.indexOf( model ) - 1 ); if ( previousModel !== undefined ) { // We have a new theme... - // Clean the overlay - this.overlay.$el.html( '' ); - - // Create the view - this.previousTheme = new themes.view.Details({ - model: previousModel, - className: 'theme-' + previousModel.id - }); + // Close the overlay + this.overlay.closeOverlay(); // Trigger a route update for the current model - themes.router.navigate( 'theme/' + previousModel.id ); - - // Render and fill this.overlay with the new html - this.previousTheme.render(); - return this.overlay.$el.html( this.previousTheme.el ); + // that renders the new theme's overlay + themes.router.navigate( 'theme/' + previousModel.id, { trigger: true } ); } - - // If we got this far it means we have no other themes - // so move back the counter to keep it sane - self.index++; } }); -// Search input view controller -// renders #search-form +// Search input view controller. themes.view.Search = wp.Backbone.View.extend({ - className: 'search-form', + tagName: 'input', + className: 'theme-search', + + attributes: { + placeholder: l10n.search + }, - // 'keyup' triggers search events: { - 'keyup #theme-search': 'search' + 'input': 'search', + 'keyup': 'search', + 'change': 'search', + 'search': 'search' }, - // Grabs template file - html: themes.template( 'theme-search' ), - - // Render the search form - render: function() { - var self = this; - self.$el.html( self.html ); - }, - - // Runs a search on the theme collection - // bind on 'keyup' event - search: function() { - this.collection.doSearch( $( '#theme-search' ).val() ); + // Runs a search on the theme collection. + search: function( event ) { + // Clear on escape. + if ( event.type === 'keyup' && event.which === 27 ) { + event.target.value = ''; + } + this.collection.doSearch( event.target.value ); } }); @@ -658,7 +601,7 @@ themes.routes = Backbone.Router.extend({ // Set the search input value based on url search: function( query ) { - $( '#theme-search' ).val( query ); + $( '.theme-search' ).val( query ); } }); diff --git a/src/wp-admin/themes.php b/src/wp-admin/themes.php index 4eb8d68538..75db4724a8 100644 --- a/src/wp-admin/themes.php +++ b/src/wp-admin/themes.php @@ -96,12 +96,12 @@ wp_localize_script( 'theme', '_wpThemeSettings', array( 'customizeURI' => ( current_user_can( 'edit_theme_options' ) ) ? wp_customize_url() : null, 'confirmDelete' => __( "Are you sure you want to delete this theme?\n\nClick 'Cancel' to go back, 'OK' to confirm the delete." ), 'root' => '/wp-admin/themes.php', - 'container' => '#appearance', 'extraRoutes' => '', ), - 'i18n' => array( - 'addNew' => __( 'Add New Theme' ), - ), + 'l10n' => array( + 'addNew' => __( 'Add New Theme' ), + 'search' => __( 'Search...' ), + ), ) ); add_thickbox(); @@ -112,14 +112,16 @@ wp_enqueue_script( 'customize-loader' ); require_once( ABSPATH . 'wp-admin/admin-header.php' ); ?> -
+

- +

+
+

@@ -183,10 +185,11 @@ if ( ! $ct->errors() || ( 1 == count( $ct->errors()->get_error_codes() ) if ( ! is_multisite() && current_user_can('edit_themes') && $broken_themes = wp_get_themes( array( 'errors' => true ) ) ) { ?> +

- +
@@ -195,12 +198,14 @@ if ( ! is_multisite() && current_user_can('edit_themes') && $broken_themes = wp_ foreach ( $broken_themes as $broken_theme ) { echo " - + "; } ?>
" . $broken_theme->get('Name') ."" . ( $broken_theme->get( 'Name' ) ? $broken_theme->get( 'Name' ) : $broken_theme->get_stylesheet() ) . " " . $broken_theme->errors()->get_error_message() . "
+
+ @@ -235,10 +240,6 @@ if ( ! is_multisite() && current_user_can('edit_themes') && $broken_themes = wp_ <# } #> - -