From 6d13e3e1ff4e7354bacca4a862d178c91ac84dc2 Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Sun, 16 Mar 2014 18:27:38 +0000 Subject: [PATCH] Restyle the plugin install details modal to match the rest of the admin. Props avryl and paulwilde for initial mockup, see #26952 git-svn-id: https://develop.svn.wordpress.org/trunk@27559 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/common.css | 258 ++++++++++++++++------- src/wp-admin/includes/plugin-install.php | 103 ++++----- src/wp-admin/js/plugin-install.js | 64 +++--- src/wp-includes/js/thickbox/thickbox.css | 2 +- 4 files changed, 276 insertions(+), 151 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 9a1a7fa650..35400b51be 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -1788,58 +1788,116 @@ div.action-links { margin: 6px 0 0; } -/* Header on thickbox */ -#plugin-information-header { - margin: 0; - padding: 0 5px; - font-weight: 600; - position: relative; - border-bottom: 1px solid #dfdfdf; - height: 2.5em; - background-color: #f9f9f9; -} -#plugin-information ul#sidemenu { - font-weight: normal; - margin: 0 5px; - position: absolute; - left: 0; - bottom: -1px; -} - -/* Install sidemenu */ +/* Plugin install thickbox */ #plugin-information { + background: #fcfcfc; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; height: auto; + padding: 0; } -#plugin-information p.action-button { - width: 100%; - padding-bottom: 0; - margin-bottom: 0; - margin-top: 10px; - -webkit-border-top-left-radius: 3px; - border-top-left-radius: 3px; - -webkit-border-bottom-left-radius: 3px; - border-bottom-left-radius: 3px; -} - -#plugin-information .action-button a { - background-color: #2ea2cc; - color: #fff; - text-align: center; +#plugin-information-title { + padding: 0 36px 0 16px; + font-size: 18px; font-weight: 600; - text-decoration: none; - display: block; - line-height: 2em; + line-height: 36px; + top: 0; + right: 0; + left: 0; + height: 36px; + border-bottom: 1px solid #ddd; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -#plugin-information h2 { - clear: none !important; - margin-right: 200px; +#plugin-information-tabs { + padding: 0 16px; + position: absolute; + top: 56px; + right: 0; + left: 0; + height: 36px; + z-index: 1; +} + +#plugin-information-tabs a { + position: relative; + float: left; + padding: 8px 10px 9px; + margin: 0; + height: 18px; + line-height: 18px; + font-size: 14px; + text-decoration: none; + transition: none; +} + +#plugin-information-tabs a.current { + margin: -1px -1px 0; + background: #fff; + border: 1px solid #ddd; + border-bottom: none; + color: #333; +} + +#plugin-information-tabs a:active, +#plugin-information-tabs a:focus { + outline: none; +} + +#plugin-information-content { + background: #fff; + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; + position: absolute; + top: 90px; + right: 0; + bottom: 44px; + left: 0; + overflow: auto; +} + +#section-holder { + margin: 0; + padding: 10px 26px; + position: absolute; + top: 0; + right: 250px; + bottom: 0; + left: 0; +} + +#section-holder .updated { + margin: 16px 0; } #plugin-information .fyi { - margin: 0 10px 50px; - width: 210px; + background: #f3f3f3; + border: 1px solid #ddd; + border-top: 0; + color: #666; + padding: 16px; + position: absolute; + top: 0; + right: 0; + width: 217px; +} + +#plugin-information .fyi strong { + color: #464646; +} + +#plugin-information .fyi h3 { + font-weight: bold; + text-transform: uppercase; + font-size: 12px; + color: #666; + margin: 24px 0 8px; } #plugin-information .fyi h2 { @@ -1848,35 +1906,34 @@ div.action-links { margin-right: 0; } -#plugin-information .fyi h2.mainheader { - padding: 5px; - -webkit-border-top-left-radius: 3px; - border-top-left-radius: 3px; - background-color: #cee1ef; -} - #plugin-information .fyi ul { - padding: 10px 5px 10px 7px; + padding: 0; margin: 0; list-style: none; - -webkit-border-bottom-left-radius: 3px; - border-bottom-left-radius: 3px; - background-color: #eaf3fa; } #plugin-information .fyi li { - margin-right: 0; + margin: 0 0 10px; } -#plugin-information #section-holder { - padding: 10px; +#plugin-information-footer { + padding: 8px 16px; + position: absolute; + right: 0; + bottom: 0; + left: 0; } #plugin-information .section ul, #plugin-information .section ol { - margin-left: 16px; - list-style-type: square; - list-style-image: none; + list-style-type: disc; + margin-left: 24px; +} + +#plugin-information .section, +#plugin-information .section p { + font-size: 14px; + line-height: 1.7; } #plugin-information #section-screenshots ol { @@ -1886,21 +1943,17 @@ div.action-links { #plugin-information #section-screenshots li img { vertical-align: text-top; + margin-top: 16px; max-width: 100%; width: auto; height: auto; + -webkit-box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.3 ); + box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.3 ); } #plugin-information #section-screenshots li p { font-style: italic; padding-left: 20px; - padding-bottom: 2em; -} - -#plugin-information #section-screenshots ol, -#plugin-information .updated, -#plugin-information pre { - margin-right: 215px; } #plugin-information pre { @@ -1909,15 +1962,78 @@ div.action-links { border: 1px solid #ccc; } -#plugin-information pre, -#plugin-information code { - background-color: #ededff; -} - .plugin-version-author-uri { font-size: 13px; } +@media screen and ( max-width: 782px ) { + #plugin-information-content { + overflow: auto; + bottom: 62px; + } + + #plugin-information .fyi { + border: 1px solid #ddd; + position: static; + width: auto; + margin: 26px 26px 16px; + } + + #section-holder { + position: static; + } + + #plugin-information .fyi h3, + #plugin-information .fyi small { + display: none; + } + + #plugin-information-footer { + padding: 12px 16px; + height: 37px; + } +} + +/* Thickbox for Plugin Install screen */ +body.plugin-install-php #TB_window, +body.index-php #TB_window { + background: #fcfcfc url( ../images/spinner.gif ) no-repeat center; +} + +@media print, + (-o-min-device-pixel-ratio: 5/4), + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 120dpi) { + + body.plugin-install-php #TB_window, + body.index-php #TB_window { + background: #fcfcfc url( ../images/spinner-2x.gif ) no-repeat center; + } +} + +body.plugin-install-php #TB_title, +body.index-php #TB_title { + float: left; + height: 1px; +} + +body.plugin-install-php #TB_ajaxWindowTitle, +body.index-php #TB_ajaxWindowTitle { + display: none; +} + +body.plugin-install-php .tb-close-icon, +body.index-php .tb-close-icon { + line-height: 36px; + width: 36px; + height: 36px; +} + +body.plugin-install-php .tb-close-icon:before, +body.index-php .tb-close-icon:before { + line-height: 36px; +} + /* @todo: move this. */ img { border: none; diff --git a/src/wp-admin/includes/plugin-install.php b/src/wp-admin/includes/plugin-install.php index 53362d2002..33d8acac44 100644 --- a/src/wp-admin/includes/plugin-install.php +++ b/src/wp-admin/includes/plugin-install.php @@ -312,8 +312,8 @@ function install_plugin_information() { $api = plugins_api( 'plugin_information', array( 'slug' => wp_unslash( $_REQUEST['plugin'] ), 'is_ssl' => is_ssl() ) ); - if ( is_wp_error($api) ) - wp_die($api); + if ( is_wp_error( $api ) ) + wp_die( $api ); $plugins_allowedtags = array( 'a' => array( 'href' => array(), 'title' => array(), 'target' => array() ), @@ -334,13 +334,17 @@ function install_plugin_information() { ); //Sanitize HTML - foreach ( (array)$api->sections as $section_name => $content ) + foreach ( (array)$api->sections as $section_name => $content ) { $api->sections[$section_name] = wp_kses($content, $plugins_allowedtags); + } + foreach ( array( 'version', 'author', 'requires', 'tested', 'homepage', 'downloaded', 'slug' ) as $key ) { if ( isset( $api->$key ) ) $api->$key = wp_kses( $api->$key, $plugins_allowedtags ); } + $_tab = esc_attr( $tab ); + $section = isset( $_REQUEST['section'] ) ? wp_unslash( $_REQUEST['section'] ) : 'description'; //Default to the Description tab, Do not translate, API returns English. if ( empty( $section ) || ! isset( $api->sections[ $section ] ) ) { $section_titles = array_keys( (array) $api->sections ); @@ -348,8 +352,10 @@ function install_plugin_information() { } iframe_header( __('Plugin Install') ); - echo "
\n"; - echo "\n"; + echo "
\n"; + ?> -
- download_link) && ( current_user_can('install_plugins') || current_user_can('update_plugins') ) ) : ?> -

- ' . __('Install Now') . ''; - break; - case 'update_available': - if ( $status['url'] ) - echo '' . __('Install Update Now') .''; - break; - case 'newer_installed': - echo '' . sprintf(__('Newer Version (%s) Installed'), $status['version']) . ''; - break; - case 'latest_installed': - echo '' . __('Latest Version Installed') . ''; - break; - } - ?> -

- -

+
+
    -version) ) : ?> +version ) ) : ?>
  • version ?>
    • -author) ) : ?> +author ) ) : ?>
  • author, '_blank') ?>
    • -last_updated) ) : ?> +last_updated ) ) : ?>
  • last_updated)) ) ?>
    • -requires) ) : ?> +requires ) ) : ?>
  • requires) ?>
    • -tested) ) : ?> +tested ) ) : ?>
  • tested ?>
    • -downloaded) ) : ?> +downloaded ) ) : ?>
  • downloaded), number_format_i18n($api->downloaded)) ?>
    • -slug) && empty($api->external) ) : ?> +slug ) && empty( $api->external ) ) : ?>
    • -homepage) ) : ?> +homepage ) ) : ?>
- rating) ) : ?> -

+ rating ) ) : ?> +

$api->rating, 'type' => 'percent', 'number' => $api->num_ratings ) ); ?> - num_ratings), number_format_i18n($api->num_ratings)); ?> + num_ratings), number_format_i18n($api->num_ratings) ); ?>
tested) && version_compare( substr($GLOBALS['wp_version'], 0, strlen($api->tested)), $api->tested, '>') ) + if ( ! empty( $api->tested ) && version_compare( substr( $GLOBALS['wp_version'], 0, strlen( $api->tested ) ), $api->tested, '>' ) ) echo '

' . __('Warning: This plugin has not been tested with your current version of WordPress.') . '

'; - else if ( !empty($api->requires) && version_compare( substr($GLOBALS['wp_version'], 0, strlen($api->requires)), $api->requires, '<') ) + else if ( ! empty( $api->requires ) && version_compare( substr( $GLOBALS['wp_version'], 0, strlen( $api->requires ) ), $api->requires, '<' ) ) echo '

' . __('Warning: This plugin has not been marked as compatible with your version of WordPress.') . '

'; foreach ( (array)$api->sections as $section_name => $content ) { @@ -432,19 +416,40 @@ function install_plugin_information() { else $title = ucwords( str_replace( '_', ' ', $section_name ) ); - $content = links_add_base_url($content, 'https://wordpress.org/plugins/' . $api->slug . '/'); - $content = links_add_target($content, '_blank'); + $content = links_add_base_url( $content, 'https://wordpress.org/plugins/' . $api->slug . '/' ); + $content = links_add_target( $content, '_blank' ); $san_section = esc_attr( $section_name ); $display = ( $section_name == $section ) ? 'block' : 'none'; echo "\t
\n"; - echo "\t\t

$title

"; echo $content; echo "\t
\n"; } echo "
\n"; + echo "
\n"; + echo "\n"; iframe_footer(); exit; diff --git a/src/wp-admin/js/plugin-install.js b/src/wp-admin/js/plugin-install.js index f204757bf7..9f686fc6be 100644 --- a/src/wp-admin/js/plugin-install.js +++ b/src/wp-admin/js/plugin-install.js @@ -2,37 +2,41 @@ /* Plugin Browser Thickbox related JS*/ var tb_position; -jQuery(document).ready(function($) { +jQuery( document ).ready( function( $ ) { tb_position = function() { - var tbWindow = $('#TB_window'), - width = $(window).width(), - H = $(window).height(), - W = ( 720 < width ) ? 720 : width, - adminbar_height = 0; - - if ( $('#wpadminbar').length ) { - adminbar_height = parseInt( $('#wpadminbar').css('height'), 10 ); - } + var tbWindow = $( '#TB_window' ), + width = $( window ).width(), + H = $( window ).height() - ( ( 850 < width ) ? 60 : 20 ), + W = ( 850 < width ) ? 830 : width - 20; if ( tbWindow.size() ) { - tbWindow.width( W - 50 ).height( H - 45 - adminbar_height ); - $('#TB_iframeContent').width( W - 50 ).height( H - 75 - adminbar_height ); - tbWindow.css({'margin-left': '-' + parseInt( ( ( W - 50 ) / 2 ), 10 ) + 'px'}); - if ( typeof document.body.style.maxWidth !== 'undefined' ) - tbWindow.css({'top': 20 + adminbar_height + 'px', 'margin-top': '0'}); + tbWindow.width( W ).height( H ); + $( '#TB_iframeContent' ).width( W ).height( H ); + tbWindow.css({ + 'margin-left': '-' + parseInt( ( W / 2 ), 10 ) + 'px' + }); + if ( typeof document.body.style.maxWidth !== 'undefined' ) { + tbWindow.css({ + 'top': ( ( 850 < width ) ? 30 : 10 ) + 'px', + 'margin-top': '0' + }); + } } - return $('a.thickbox').each( function() { - var href = $(this).attr('href'); - if ( ! href ) + return $( 'a.thickbox' ).each( function() { + var href = $( this ).attr( 'href' ); + if ( ! href ) { return; - href = href.replace(/&width=[0-9]+/g, ''); - href = href.replace(/&height=[0-9]+/g, ''); - $(this).attr( 'href', href + '&width=' + ( W - 80 ) + '&height=' + ( H - 85 - adminbar_height ) ); + } + href = href.replace( /&width=[0-9]+/g, '' ); + href = href.replace( /&height=[0-9]+/g, '' ); + $(this).attr( 'href', href + '&width=' + W + '&height=' + ( H ) ); }); }; - $(window).resize(function(){ tb_position(); }); + $( window ).resize( function() { + tb_position(); + }); $('.plugins').on( 'click', 'a.thickbox', function() { tb_click.call(this); @@ -43,18 +47,18 @@ jQuery(document).ready(function($) { }); /* Plugin install related JS*/ - $('#plugin-information #sidemenu a').click( function() { - var tab = $(this).attr('name'); + $( '#plugin-information-tabs a' ).click( function( event ) { + var tab = $( this ).attr( 'name' ); + event.preventDefault(); //Flip the tab - $('#plugin-information-header a.current').removeClass('current'); - $(this).addClass('current'); + $( '#plugin-information-tabs a.current' ).removeClass( 'current' ); + $( this ).addClass( 'current' ); //Flip the content. - $('#section-holder div.section').hide(); //Hide 'em all - $('#section-' + tab).show(); - return false; + $( '#section-holder div.section' ).hide(); //Hide 'em all + $( '#section-' + tab ).show(); }); - $('a.install-now').click( function() { + $( 'a.install-now' ).click( function() { return confirm( plugininstallL10n.ays ); }); }); diff --git a/src/wp-includes/js/thickbox/thickbox.css b/src/wp-includes/js/thickbox/thickbox.css index 574b6b544a..45e3f48a51 100644 --- a/src/wp-includes/js/thickbox/thickbox.css +++ b/src/wp-includes/js/thickbox/thickbox.css @@ -58,7 +58,7 @@ overflow: hidden; padding: 0 29px 0 10px; text-overflow: ellipsis; - white-space: nowrap; + white-space: nowrap; width: calc( 100% - 39px ); }