WordPress.org
Get WordPress

Make WordPress Core

Ticket #28753: 28753-upload-container.patch

File 28753-upload-container.patch, 11.4 KB (added by ocean90, 12 years ago)

  • src/wp-admin/css/forms.css

     
    751751        margin: -3px 3px;
    752752}
    753753
     754/*------------------------------------------------------------------------------
     755  21.0 - Upload File
     756------------------------------------------------------------------------------*/
     757
     758.wp-upload-container {
     759        -webkit-box-sizing: border-box;
     760        -moz-box-sizing: border-box;
     761        box-sizing: border-box;
     762        margin: 0px 0 0;
     763        padding: 0;
     764        width: 100%;
     765        overflow: hidden;
     766        position: relative;
     767        top: 10px;
     768}
     769
     770.wp-upload-container-toggle {
     771        display: none;
     772}
     773
     774.wp-upload-container .wp-upload-form {
     775        background: #fafafa;
     776        border: 1px solid #e5e5e5;
     777        padding: 30px;
     778        margin: 30px auto;
     779        max-width: 380px;
     780}
     781
     782.wp-upload-container .install-help {
     783        color: #999;
     784        font-size: 18px;
     785        font-style: normal;
     786        margin: 0;
     787        padding: 40px 0 0;
     788        text-align: center;
     789}
     790
     791body.show-upload-container .hide-on-upload,
     792body.show-upload-container .wp-upload-show {
     793        display: none;
     794}
     795
     796body.show-upload-container .wp-upload-container-toggle {
     797        display: block;
     798}
     799
     800.wp-upload-hide {
     801        display: none;
     802}
     803
     804body.show-upload-container .wp-upload-hide {
     805        display: inline;
     806}
     807
    754808/* =Media Queries
    755809-------------------------------------------------------------- */
    756810
     811@media only screen and (max-width: 1120px) {
     812        .wp-upload-container .wp-upload-form {
     813                margin: 20px 0;
     814                max-width: 100%;
     815        }
     816
     817        .wp-upload-container .install-help {
     818                font-size: 15px;
     819                padding: 20px 0 0;
     820                text-align: left;
     821        }
     822
     823}
     824
    757825@media screen and ( max-width: 782px ) {
    758826        /* Input Elements */
    759827        textarea {

  • src/wp-admin/css/themes.css

     
    10641064        display: none !important;
    10651065}
    10661066
    1067 .theme-install-php a.upload,
    1068 .theme-install-php a.browse-themes {
    1069         cursor: pointer;
    1070 }
    1071 .theme-install-php a.browse-themes,
    1072 .theme-install-php.show-upload-theme a.upload {
    1073         display: none;
    1074 }
    1075 .theme-install-php.show-upload-theme a.browse-themes {
    1076         display: inline;
    1077 }
    1078 .upload-theme {
    1079         -webkit-box-sizing: border-box;
    1080         -moz-box-sizing: border-box;
    1081         box-sizing: border-box;
    1082         display: none;
    1083         margin: 0;
    1084         padding: 0;
    1085         width: 100%;
    1086         overflow: hidden;
    1087         position: relative;
    1088         top: 10px;
    1089 }
    1090 body.show-upload-theme .upload-theme {
    1091         display: block;
    1092 }
    1093 .upload-theme .wp-upload-form {
    1094         background: #fafafa;
    1095         border: 1px solid #e5e5e5;
    1096         padding: 30px;
    1097         margin: 30px auto;
    1098         max-width: 380px;
    1099 }
    1100 .upload-theme .install-help {
    1101         color: #999;
    1102         font-size: 18px;
    1103         font-style: normal;
    1104         margin: 0;
    1105         padding: 40px 0 0;
    1106         text-align: center;
    1107 }
    1108 body.show-upload-theme .upload-theme + .wp-filter,
    1109 body.show-upload-theme .upload-theme + .wp-filter + .theme-browser {
    1110         display: none;
    1111 }
    1112 
    11131067p.no-themes {
    11141068        color: #999;
    11151069        font-size: 18px;
    … …  
    11221076body.no-results p.no-themes {
    11231077        display: block;
    11241078}
    1125 body.show-upload-theme p.no-themes {
     1079body.show-upload-container p.no-themes {
    11261080        display: none !important;
    11271081}
    11281082
    … …  
    11301084        display: none !important;
    11311085}
    11321086
    1133 @media only screen and (max-width: 1120px) {
    1134         .upload-theme .wp-upload-form {
    1135                 margin: 20px 0;
    1136                 max-width: 100%;
    1137         }
    1138         .upload-theme .install-help {
    1139                 font-size: 15px;
    1140                 padding: 20px 0 0;
    1141                 text-align: left;
    1142         }
    1143 }
    1144 
    11451087.rating {
    11461088        margin: 30px 0;
    11471089}

  • src/wp-admin/includes/class-wp-plugin-install-list-table.php

     
    214214                $views = apply_filters( "views_{$this->screen->id}", $views );
    215215
    216216?>
    217 <div class="wp-filter">
     217<div class="wp-filter hide-on-upload">
    218218        <ul class="wp-filter-links">
    219219                <?php
    220220                if ( ! empty( $views ) ) {

  • src/wp-admin/includes/plugin-install.php

     
    196196 */
    197197function install_plugins_upload( $page = 1 ) {
    198198?>
    199         <h4><?php _e('Install a plugin in .zip format'); ?></h4>
    200         <p class="install-help"><?php _e('If you have a plugin in a .zip format, you may install it by uploading it here.'); ?></p>
    201         <form method="post" enctype="multipart/form-data" class="wp-upload-form" action="<?php echo self_admin_url('update.php?action=upload-plugin'); ?>">
    202                 <?php wp_nonce_field( 'plugin-upload'); ?>
    203                 <label class="screen-reader-text" for="pluginzip"><?php _e('Plugin zip file'); ?></label>
    204                 <input type="file" id="pluginzip" name="pluginzip" />
    205                 <?php submit_button( __( 'Install Now' ), 'button', 'install-plugin-submit', false ); ?>
    206         </form>
     199        <div class="wp-upload-container">
     200                <p class="install-help"><?php _e( 'If you have a plugin in a .zip format, you may install it by uploading it here.' ); ?></p>
     201                <form method="post" enctype="multipart/form-data" class="wp-upload-form" action="<?php echo self_admin_url( 'update.php?action=upload-plugin' ); ?>">
     202                        <?php wp_nonce_field( 'plugin-upload' ); ?>
     203                        <label class="screen-reader-text" for="pluginzip"><?php _e( 'Plugin zip file' ); ?></label>
     204                        <input type="file" id="pluginzip" name="pluginzip" />
     205                        <?php submit_button( __( 'Install Now' ), 'button', 'install-plugin-submit', false ); ?>
     206                </form>
     207        </div>
    207208<?php
    208209}
    209210add_action('install_plugins_upload', 'install_plugins_upload', 10, 1);

  • src/wp-admin/includes/theme-install.php

     
    136136
    137137function install_themes_upload() {
    138138?>
    139 <p class="install-help"><?php _e('If you have a theme in a .zip format, you may install it by uploading it here.'); ?></p>
    140 <form method="post" enctype="multipart/form-data" class="wp-upload-form" action="<?php echo self_admin_url('update.php?action=upload-theme'); ?>">
    141         <?php wp_nonce_field( 'theme-upload'); ?>
    142         <input type="file" name="themezip" />
    143         <?php submit_button( __( 'Install Now' ), 'button', 'install-theme-submit', false ); ?>
    144 </form>
    145         <?php
     139        <div class="wp-upload-container wp-upload-container-toggle">
     140                <p class="install-help"><?php _e( 'If you have a theme in a .zip format, you may install it by uploading it here.' ); ?></p>
     141                <form method="post" enctype="multipart/form-data" class="wp-upload-form" action="<?php echo self_admin_url( 'update.php?action=upload-theme' ); ?>">
     142                        <?php wp_nonce_field( 'theme-upload' ); ?>
     143                        <input type="file" name="themezip" />
     144                        <?php submit_button( __( 'Install Now' ), 'button', 'install-theme-submit', false ); ?>
     145                </form>
     146        </div>
     147<?php
    146148}
    147149// add_action('install_themes_upload', 'install_themes_upload', 10, 0);
    148150

  • src/wp-admin/js/theme.js

     
    14971497        searchContainer: $( '.wp-filter' ),
    14981498
    14991499        uploader: function() {
    1500                 $( 'a.upload' ).on( 'click', function( event ) {
     1500                $( '.wp-upload-show' ).on( 'click', function( event ) {
    15011501                        event.preventDefault();
    1502                         $( 'body' ).addClass( 'show-upload-theme' );
     1502                        $( 'body' ).addClass( 'show-upload-container' );
    15031503                        themes.router.navigate( themes.router.baseUrl( '?upload' ), { replace: true } );
    15041504                });
    1505                 $( 'a.browse-themes' ).on( 'click', function( event ) {
     1505                $( '.wp-upload-hide' ).on( 'click', function( event ) {
    15061506                        event.preventDefault();
    1507                         $( 'body' ).removeClass( 'show-upload-theme' );
     1507                        $( 'body' ).removeClass( 'show-upload-container' );
    15081508                        themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
    15091509                });
    15101510        },
    … …  
    16421642
    16431643                // Support the `upload` route by going straight to upload section
    16441644                themes.router.on( 'route:upload', function() {
    1645                         $( 'a.upload' ).trigger( 'click' );
     1645                        $( '.wp-upload-show' ).trigger( 'click' );
    16461646                });
    16471647
    16481648                // The `search` route event. The router populates the input field.

  • src/wp-admin/plugin-install.php

     
    6767        '<p>' . __('<a href="https://wordpress.org/support/" target="_blank">Support Forums</a>') . '</p>'
    6868);
    6969
     70function _wp_add_upload_container_class( $classes ) {
     71        global $tab;
     72
     73        $class = ( 'upload' === $tab ) ? ' show-upload-container' : ' hide-upload-container';
     74
     75        return $classes . $class;
     76}
     77
     78add_filter( 'admin_body_class', '_wp_add_upload_container_class' );
     79
    7080/**
    7181 * WordPress Administration Template Header.
    7282 */
    … …  
    7585<div class="wrap">
    7686<h2>
    7787        <?php
    78                 echo esc_html( $title );
    79                 $href = self_admin_url( 'plugin-install.php?tab=upload' );
     88        echo esc_html( $title );
     89
     90        if ( 'upload' === $tab ) {
     91                ?>
     92                <a href="<?php echo esc_url( self_admin_url( 'plugin-install.php' ) ); ?>" class="browse-plugins add-new-h2"><?php _x( 'Browse', 'plugins' ); ?></a>
     93                <?php
     94        } else {
     95                ?>
     96                <a href="<?php echo esc_url( self_admin_url( 'plugin-install.php?tab=upload' ) ); ?>" class="upload add-new-h2"><?php _e( 'Upload Plugin' ); ?></a>
     97                <?php
     98        }
    8099        ?>
    81         <a href="<?php echo $href; ?>" class="upload add-new-h2"><?php _e( 'Upload Plugin' ); ?></a>
    82100</h2>
    83101
    84102<?php $wp_list_table->views(); ?>
    85103
    86 <br class="clear" />
    87104<?php
    88105/**
    89106 * Fires after the plugins list table in each tab of the Install Plugins screen.

  • src/wp-admin/theme-install.php

     
    118118                <?php
    119119                /**
    120120                 * Filter the tabs shown on the Install Themes screen.
    121                  * 
     121                 *
    122122                 * @since 2.8.0
    123123                 * @param array $tabs The tabs shown on the Install Themes screen. Defaults are
    124124                 *                    'upload' and 'browse-themes'.
    125125                 */
    126126                $tabs = apply_filters( 'install_themes_tabs', $tabs );
    127127                foreach ( $tabs as $tab_slug => $tab_name ) {
    128                         echo '<a href="#" class="' . esc_attr( $tab_slug ) . ' add-new-h2">' . $tab_name . '</a>';
     128                        $visibility = '';
     129                        if ( 'upload' === $tab_slug ) {
     130                                $visibility = ' wp-upload-show';
     131                        } else if ( 'browse-themes' === $tab_slug ) {
     132                                $visibility = ' wp-upload-hide';
     133                        }
     134
     135                        echo '<a href="#" class="' . esc_attr( $tab_slug ) . $visibility . ' add-new-h2">' . $tab_name . '</a>';
    129136                }
    130137                ?>
    131138        </h2>
    132139
    133         <div class="upload-theme">
    134140        <?php install_themes_upload(); ?>
    135         </div>
    136141
    137         <div class="wp-filter">
     142        <div class="wp-filter hide-on-upload">
    138143                <div class="wp-filter-count">
    139144                        <span class="count theme-count"></span>
    140145                </div>
    … …  
    179184                        </div>
    180185                </div>
    181186        </div>
    182         <div class="theme-browser wp-filter-content"></div>
    183         <div class="theme-install-overlay wp-full-overlay expanded"></div>
    184187
    185         <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
    186         <span class="spinner"></span>
     188        <div class="hide-on-upload">
     189                <div class="theme-browser wp-filter-content"></div>
     190                <div class="theme-install-overlay wp-full-overlay expanded"></div>
    187191
     192                <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
     193                <span class="spinner"></span>
     194        </div>
     195
    188196        <br class="clear" />
    189197<?php
    190198/**