WordPress.org

Make WordPress Core

Ticket #27055: 27055.38.2.diff

File 27055.38.2.diff, 6.4 KB (added by adamsilverstein, 5 years ago)

add back Install button in detail view when theme not installed already

  • wp-admin/css/themes.css

     
    216216 * Displays a theme update notice
    217217 * when an update is available.
    218218 */
    219 .theme-browser .theme .theme-update {
     219.theme-browser .theme .theme-update,
     220.theme-browser .theme .theme-installed {
    220221        background: #d54e21;
    221222        background: rgba(213, 78, 33, 0.95);
    222223        color: #fff;
     
    234235        overflow: hidden;
    235236}
    236237
    237 .theme-browser .theme .theme-update:before {
     238.theme-browser .theme .theme-update:before,
     239.theme-browser .theme .theme-installed:before {
    238240        content: '\f463';
    239241        display: inline-block;
    240242        font: normal 20px/1 'dashicons';
     
    10741076  16.2 - Install Themes
    10751077------------------------------------------------------------------------------*/
    10761078
     1079/* Already installed theme */
     1080.theme-browser .theme.is-installed {
     1081        cursor: default;
     1082}
     1083.theme-browser .theme .theme-installed {
     1084        background: #0074a2;
     1085}
     1086.theme-browser .theme .theme-installed:before {
     1087        content: '\f147';
     1088}
     1089.theme-browser .theme.is-installed .theme-actions,
     1090.theme-browser.rendered .theme.is-installed .more-details {
     1091        display: none !important;
     1092}
     1093.theme-browser.rendered .theme.is-installed:hover .theme-screenshot img,
     1094.theme-browser.rendered .theme.is-installed:focus .theme-screenshot img {
     1095        opacity: 1 !important;
     1096}
     1097
    10771098.theme-navigation {
    10781099        background: #fff;
    10791100        -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
  • wp-admin/js/theme.js

     
    2222        // Adds attributes to the default data coming through the .org themes api
    2323        // Map `id` to `slug` for shared code
    2424        initialize: function() {
    25                 var install, preview;
     25                var install, preview, installed;
    2626
    2727                // Install url for the theme
    2828                // using the install nonce
     
    4343
    4444                preview = themes.data.settings.installURI + '?' + $.param( preview );
    4545
     46                // If theme is already installed, set an attribute.
     47                if ( _.indexOf( themes.data.installedThemes, this.get( 'slug' ) ) !== -1 ) {
     48                        this.set({ installed: true });
     49                }
     50
    4651                // Set the attributes
    4752                this.set({
    4853                        installURI: install,
     
    391396                if ( this.model.get( 'displayAuthor' ) ) {
    392397                        this.$el.addClass( 'display-author' );
    393398                }
     399
     400                if ( this.model.get( 'installed' ) ) {
     401                        this.$el.addClass( 'is-installed' );
     402                        this.$el.unbind();
     403                }
    394404        },
    395405
    396406        // Adds a class to the currently active theme
     
    451461                        return this.touchDrag = false;
    452462                }
    453463
     464                // Allow direct link path to installing a theme.
     465                if ( $( event.target ).hasClass( 'button-primary' ) ) {
     466                        return;
     467                }
     468
    454469                // 'enter' and 'space' keys expand the details view when a theme is :focused
    455470                if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) {
    456471                        return;
     
    494509
    495510                        // If we have no more themes, bail.
    496511                        if ( _.isUndefined( self.current ) ) {
     512                                self.options.parent.parent.trigger( 'theme:end' );
    497513                                return self.current = current;
    498514                        }
    499515
     
    505521                        // Render and append.
    506522                        preview.render();
    507523                        $( 'div.wrap' ).append( preview.el );
     524                        $( '.next-theme' ).focus();
    508525                })
    509526                .listenTo( preview, 'theme:previous', function() {
    510527
     
    532549                        // Render and append.
    533550                        preview.render();
    534551                        $( 'div.wrap' ).append( preview.el );
     552                        $( '.previous-theme' ).focus();
    535553                });
    536554        }
    537555});
     
    882900                // Loop through the themes and setup each theme view
    883901                self.instance.each( function( theme ) {
    884902                        self.theme = new themes.view.Theme({
    885                                 model: theme
     903                                model: theme,
     904                                parent: self
    886905                        });
    887906
    888907                        // Render the views...
     
    12241243                // Get the themes by sending Ajax POST request to api.wordpress.org/themes
    12251244                // or searching the local cache
    12261245                this.collection.query( request );
     1246
     1247                // Set route
     1248                themes.router.navigate( themes.router.baseUrl( '?search=' + value ), { replace: true } );
    12271249        }, 300 )
    12281250});
    12291251
     
    13291351        },
    13301352
    13311353        sort: function( sort ) {
    1332                 $( '#theme-search-input' ).val( '' );
     1354                this.clearSearch();
    13331355
    13341356                $( '.theme-section, .theme-filter' ).removeClass( this.activeClass );
    13351357                $( '[data-sort="' + sort + '"]' ).addClass( this.activeClass );
     
    14501472                        return this.addFilter();
    14511473                }
    14521474
     1475                this.clearSearch();
     1476
     1477                themes.router.navigate( themes.router.baseUrl( '' ) );
    14531478                $( 'body' ).toggleClass( 'more-filters-opened' );
    14541479        },
    14551480
     
    14741499
    14751500        backToFilters: function() {
    14761501                $( 'body' ).removeClass( 'filters-applied' );
     1502        },
     1503
     1504        clearSearch: function() {
     1505                $( '#theme-search-input').val( '' );
    14771506        }
    14781507});
    14791508
  • wp-admin/theme-install.php

     
    3333        'new'      => __( 'Newest Themes' ),
    3434);
    3535
     36$installed_themes = search_theme_directories();
     37foreach ( $installed_themes as $k => $v ) {
     38        if ( false !== strpos( $k, '/' ) ) {
     39                unset( $installed_themes[ $k ] );
     40        }
     41}
     42
    3643wp_localize_script( 'theme', '_wpThemeSettings', array(
    3744        'themes'   => false,
    3845        'settings' => array(
     
    5158                'back'   => __( 'Back' ),
    5259                'error'  => ( 'There was a problem trying to load the themes. Please, try again.' ), // @todo improve
    5360        ),
     61        'installedThemes' => array_keys( $installed_themes ),
    5462        'browse' => array(
    5563                'sections' => $sections,
    5664        ),
     
    190198                <a class="button button-primary" href="{{ data.installURI }}"><?php esc_html_e( 'Install' ); ?></a>
    191199                <a class="button button-secondary preview install-theme-preview" href="#"><?php esc_html_e( 'Preview' ); ?></a>
    192200        </div>
     201
     202        <# if ( data.installed ) { #>
     203                <div class="theme-installed"><?php _e( 'Already Installed' ); ?></div>
     204        <# } #>
    193205</script>
    194206
    195207<script id="tmpl-theme-preview" type="text/template">
    196208        <div class="wp-full-overlay-sidebar">
    197209                <div class="wp-full-overlay-header">
    198210                        <a href="#" class="close-full-overlay button-secondary"><?php _e( 'Close' ); ?></a>
     211                <# if ( data.installed ) { #>
     212                        <a href="#" class="button button-primary theme-install disabled"><?php _e( 'Installed' ); ?></a>
     213                <# } else { #>
    199214                        <a href="{{ data.installURI }}" class="button button-primary theme-install"><?php _e( 'Install' ); ?></a>
     215                <# } #>
    200216                </div>
    201217                <div class="wp-full-overlay-sidebar-content">
    202218                        <div class="install-theme-info">