Merge pull request #368 from wp-media/fix/imagify-install

Fixes #156

Author: GeekPress

inc/admin/ui/css/admin.css

@@ -14,16 +14,17 @@ p.description.file-error{color:#F00}
 .rocket-renew{font-weight:400}
 .rkt-disabled{color:#CCC}
 .rkt-note{font-style:italic; font-weight:bold; font-size:smaller}
-.rkt-imagify-notice.rkt-imagify-notice{position:relative; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; -ms-grid-row-align:center; align-items:center; padding:5px 45px 5px 0; border:0 none; box-shadow:none; color:#FFF; background:#2e3243}
+.rkt-imagify-notice.rkt-imagify-notice{position:relative; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; -ms-grid-row-align:center; align-items:center; float:none; width:auto; padding:5px 45px 5px 0; border:0 none; box-shadow:none; color:#FFF; background:#2e3243}
 .rkt-imagify-notice .rkt-cross{position:absolute; right:8px; top:50%; width:22px; height:22px; padding:0; margin-top:-11px; background:#FFF; color:#2e3243; border-radius:50%; transition:all .275s}
 .rkt-imagify-notice .rkt-cross .dashicons{position:relative; top:2px; left:1px; transition:all .275s}
 .rkt-imagify-notice .rkt-cross:hover{background:#2e3243}
 .rkt-imagify-notice .rkt-cross:hover .dashicons{color:#FFF}
 .rkt-imagify-notice .rkt-imagify-logo, .rkt-imagify-notice .rkt-imagify-cta{-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;}
 .rkt-imagify-notice .rkt-imagify-logo{width:160px!important; text-align:right; padding:0 15px; line-height:0.8}
 .rkt-imagify-notice .rkt-imagify-msg{width:100%!important; padding:0 15px; }
-.rkt-imagify-notice .rkt-imagify-cta{width:200px;!important; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-flex-basis: 200px; -ms-flex-preferred-size: 200px; flex-basis: 200px; }
+.rkt-imagify-notice .rkt-imagify-cta{padding-top: 7px; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-flex-basis: 200px; -ms-flex-preferred-size: 200px; flex-basis: 200px; }
 .rkt-imagify-notice .button.button{height:auto; font-weight:600; font-size:14px; box-shadow:0 3px 0 rgba(0,0,0,.15); border:0 none; padding:4px 18px; background:#40B1D0; text-shadow:1px 1px 1px rgba(0,0,0,.2)}
+.rkt-imagify-cta .thickbox{display: inline-block;margin-top:.5em;color:rgba(255,255,255,.5);}
 @media (max-width:650px){.rkt-imagify-notice{-webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap}
 .rkt-imagify-notice .rkt-imagify-msg, 
 .rkt-imagify-notice .rkt-imagify-cta, 

inc/admin/ui/enqueue.php

@@ -89,9 +89,9 @@ function __rocket_admin_print_styles() {
 add_action( 'admin_print_styles-upload.php', '__rocket_enqueue_modal_plugin' );
 add_action( 'admin_print_styles-settings_page_' . WP_ROCKET_PLUGIN_SLUG, '__rocket_enqueue_modal_plugin' );
 function __rocket_enqueue_modal_plugin() {
-    wp_enqueue_style( 'thickbox' );
     wp_enqueue_style( 'plugin-install' );
 
     wp_enqueue_script( 'plugin-install' );
-    wp_enqueue_script( 'tgm-modal-wp-rocket', WP_ROCKET_ADMIN_UI_JS_URL . 'vendors/tgm-modal.min.js', array( 'jquery' ), WP_ROCKET_VERSION, true );
-}
+    wp_enqueue_script( 'updates' );
+    add_thickbox();
+}

inc/admin/ui/js/vendors/tgm-modal.min.js

@@ -527,7 +527,15 @@ function __rocket_imagify_notice() {
 	$action_url = $is_imagify_installed ?
 	rocket_get_plugin_activation_link( $imagify_plugin )
 		:
-	add_query_arg(
+	wp_nonce_url( add_query_arg(
+		array(
+			'action'       => 'install-plugin',
+			'plugin'    => 'imagify',
+		),
+		admin_url( 'update.php' )
+	), 'install-plugin_imagify' );
+
+	$details_url = add_query_arg(
 		array(
 			'tab'       => 'plugin-information',
 			'plugin'    => 'imagify',
@@ -538,7 +546,7 @@ function __rocket_imagify_notice() {
 		admin_url( 'plugin-install.php' )
 	);
 
-	$classes = $is_imagify_installed ? '' : ' tgm-plugin-update-modal';
+	$classes = $is_imagify_installed ? '' : ' install-now';
 	$cta_txt = $is_imagify_installed ? esc_html__( 'Activate Imagify', 'rocket' ) : esc_html__( 'Install Imagify for Free', 'rocket' );
 
 	$dismiss_url = wp_nonce_url(
@@ -547,7 +555,7 @@ function __rocket_imagify_notice() {
 	);
 	?>
 
-	<div class="updated rkt-imagify-notice">
+	<div id="plugin-filter" class="updated plugin-card plugin-card-imagify rkt-imagify-notice">
 		<a href="<?php echo $dismiss_url; ?>" class="rkt-cross"><span class="dashicons dashicons-no"></span></a>
 
 		<p class="rkt-imagify-logo">
@@ -557,7 +565,10 @@ function __rocket_imagify_notice() {
 			<?php _e( 'Speed up your website and boost your SEO by reducing image file sizes without losing quality with Imagify.', 'rocket' ); ?>
 		</p>
 		<p class="rkt-imagify-cta">
-			<a href="<?php echo $action_url; ?>" class="button button-primary<?php echo $classes; ?>"><?php echo $cta_txt; ?></a>
+			<a data-slug="imagify" href="<?php echo $action_url; ?>" class="button button-primary<?php echo $classes; ?>"><?php echo $cta_txt; ?></a>
+			<?php if ( ! $is_imagify_installed ) : ?>
+			<br><a data-slug="imagify" data-name="Imagify Image Optimizer" class="thickbox open-plugin-details-modal" href="<?php echo $details_url; ?>"><?php _e( 'More details', 'rocket' ); ?></a>
+			<?php endif; ?>
 		</p>
 	</div>
 
@@ -641,4 +652,4 @@ function rocket_cloudflare_update_settings() {
         </div>
         <?php }
 	}
-}
+}