[feature] Add ons screen update
This commit is contained in:
Jonathan Belcher
parent
c1d989df2c
commit
1d066234d5
5155
assets/css/admin.css
5155
assets/css/admin.css
File diff suppressed because one or more lines are too long
|
|
@ -22,6 +22,288 @@
|
|||
}
|
||||
|
||||
.wc_addons_wrap {
|
||||
|
||||
.addons-featured {
|
||||
max-width: 1140px;
|
||||
margin: -1%;
|
||||
}
|
||||
|
||||
.addons-banner-block-item-icon,
|
||||
.addons-column-block-item-icon {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.addons-banner-block {
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
|
||||
margin: 2% 1% 0;
|
||||
max-width: 1140px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.addons-banner-block img {
|
||||
height: 62px;
|
||||
}
|
||||
|
||||
.addons-banner-block p {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.addons-banner-block-items {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
margin: 0 -10px 0 -10px;
|
||||
}
|
||||
|
||||
.addons-banner-block-item {
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 3px;
|
||||
flex: 1 1 200px;
|
||||
margin: 10px;
|
||||
max-width: 350px;
|
||||
min-width: 200px;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.addons-banner-block-item-icon {
|
||||
background: #f7f7f7;
|
||||
height: 183px;
|
||||
}
|
||||
|
||||
.addons-banner-block-item-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 184px;
|
||||
justify-content: space-between;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.addons-banner-block-item-content h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.addons-column-section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.addons-column {
|
||||
flex: 1 1 200px;
|
||||
margin: 0 1%;
|
||||
width: 49.5%;
|
||||
}
|
||||
|
||||
.addons-small-light-block,
|
||||
.addons-small-dark-block,
|
||||
.addons-column-block {
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
|
||||
margin: 4% 0 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.addons-column-block img {
|
||||
max-height: 50px;
|
||||
max-width: 50px;
|
||||
}
|
||||
|
||||
.addons-small-light-block,
|
||||
.addons-column-block {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.addons-column-block-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.addons-column-block-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.addons-column-block-item {
|
||||
display: flex;
|
||||
border-top: 2px solid #f9f9f9;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin: 0 -20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.addons-column-block-item-icon {
|
||||
background: #f7f7f7;
|
||||
border: 1px solid #e6e6e6;
|
||||
height: 100px;
|
||||
margin: 0 10px 10px 0;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.addons-column-block-item-content {
|
||||
display: flex;
|
||||
flex: 1 1 200px;
|
||||
flex-wrap: wrap;
|
||||
height: 20%;
|
||||
justify-content: space-between;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.addons-column-block-item-content h2 {
|
||||
float: left;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.addons-column-block-item-content a {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.addons-column-block-item-content p {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.addons-small-dark-block {
|
||||
background-color: #54687d;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.addons-small-dark-items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.addons-small-dark-item {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.addons-small-dark-block h1 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.addons-small-dark-block p {
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
.addons-small-dark-item-icon img {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.addons-small-dark-item a {
|
||||
margin: 28px auto 0;
|
||||
}
|
||||
|
||||
.addons-small-light-block {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.addons-small-light-block h1 {
|
||||
margin-top: -12px;
|
||||
}
|
||||
|
||||
.addons-small-light-block p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.addons-small-light-block img {
|
||||
height: 225px;
|
||||
margin: 0 0 0 -20px;
|
||||
}
|
||||
|
||||
.addons-small-light-block-content {
|
||||
display: flex;
|
||||
flex: 1 1 100px;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.addons-small-light-block-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.addons-small-light-block-content a {
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.addons-button {
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 37px;
|
||||
line-height: 37px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
width: 124px;
|
||||
}
|
||||
|
||||
.addons-button-solid {
|
||||
background-color: #955a89;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.addons-button-solid:hover {
|
||||
color: #ffffff;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.addons-button-outline-green {
|
||||
border: 1px solid #73ae39;
|
||||
color: #73ae39;
|
||||
}
|
||||
|
||||
.addons-button-outline-green:hover {
|
||||
color: #73ae39;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.addons-button-outline-white {
|
||||
border: 1px solid #ffffff;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.addons-button-outline-white:hover {
|
||||
color: #ffffff;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.addons-button-installed {
|
||||
background: #e6e6e6;
|
||||
color: #3c3c3c;
|
||||
}
|
||||
|
||||
.addons-button-installed:hover {
|
||||
color: #3c3c3c;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@media only screen and (max-width : 400px) {
|
||||
.addons-featured {
|
||||
margin: -1% -5%;
|
||||
}
|
||||
|
||||
.addons-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.addons-small-dark-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.addons-column-block-item-icon {
|
||||
background: none;
|
||||
border: none;
|
||||
height: 75px;
|
||||
margin: 0 10px 10px 0;
|
||||
width: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
.products {
|
||||
overflow: hidden;
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1026,7 +1026,7 @@ p.demo_store {
|
|||
text-align: left;
|
||||
}
|
||||
.woocommerce-MyAccount-downloads-file {
|
||||
&:before {
|
||||
&::before {
|
||||
content: '\2193';
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,8 +17,31 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
*/
|
||||
class WC_Admin_Addons {
|
||||
|
||||
/**
|
||||
* Get featured for the addons screen
|
||||
*
|
||||
* @return array of objects
|
||||
*/
|
||||
public static function get_featured() {
|
||||
if ( false === ( $featured = get_transient( 'wc_addons_featured' ) ) ) {
|
||||
$raw_featured = wp_safe_remote_get( 'https://d3t0oesq8995hv.cloudfront.net/add-ons/featured.json', array( 'user-agent' => 'WooCommerce Addons Page' ) );
|
||||
if ( ! is_wp_error( $raw_featured ) ) {
|
||||
$featured = json_decode( wp_remote_retrieve_body( $raw_featured ) );
|
||||
if ( $featured ) {
|
||||
set_transient( 'wc_addons_featured', $featured, WEEK_IN_SECONDS );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ( is_object( $featured ) ) {
|
||||
self::output_featured_sections( $featured->sections );
|
||||
return $featured;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get sections for the addons screen
|
||||
*
|
||||
* @return array of objects
|
||||
*/
|
||||
public static function get_sections() {
|
||||
|
|
@ -125,6 +148,214 @@ class WC_Admin_Addons {
|
|||
echo '<a href="' . esc_url( $url ) . '" class="add-new-h2">' . esc_html( $text ) . '</a>' . "\n";
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the outputting of a banner block.
|
||||
*
|
||||
* @param object $block
|
||||
*/
|
||||
public static function output_banner_block( $block ) {
|
||||
?>
|
||||
<div class="addons-banner-block">
|
||||
<h1><?php echo esc_html( $block->title ); ?></h1>
|
||||
<p><?php echo esc_html( $block->description ); ?></p>
|
||||
<div class="addons-banner-block-items">
|
||||
<?php foreach ( $block->items as $item ) : ?>
|
||||
<div class="addons-banner-block-item">
|
||||
<div class="addons-banner-block-item-icon">
|
||||
<img class="addons-img" src="<?php echo esc_url( $item->image ); ?>" />
|
||||
</div>
|
||||
<div class="addons-banner-block-item-content">
|
||||
<h3><?php echo esc_html( $item->title ); ?></h3>
|
||||
<p><?php echo esc_html( $item->description ); ?></p>
|
||||
<?php
|
||||
self::output_button(
|
||||
$item->href,
|
||||
$item->button,
|
||||
'addons-button-solid',
|
||||
$item->plugin
|
||||
);
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the outputting of a column.
|
||||
*
|
||||
* @param object $block
|
||||
*/
|
||||
public static function output_column( $block ) {
|
||||
if ( isset( $block->container ) && 'column_container_start' === $block->container ) {
|
||||
?>
|
||||
<div class="addons-column-section">
|
||||
<?php
|
||||
}
|
||||
if ( 'column_start' === $block->module ) {
|
||||
?>
|
||||
<div class="addons-column">
|
||||
<?php
|
||||
} else {
|
||||
?>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
if ( isset( $block->container ) && 'column_container_end' === $block->container ) {
|
||||
?>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the outputting of a column block.
|
||||
*
|
||||
* @param object $block
|
||||
*/
|
||||
public static function output_column_block( $block ) {
|
||||
?>
|
||||
<div class="addons-column-block">
|
||||
<h1><?php echo esc_html( $block->title ); ?></h1>
|
||||
<p><?php echo esc_html( $block->description ); ?></p>
|
||||
<?php foreach ( $block->items as $item ) : ?>
|
||||
<div class="addons-column-block-item">
|
||||
<div class="addons-column-block-item-icon">
|
||||
<img class="addons-img" src="<?php echo esc_url( $item->image ); ?>" />
|
||||
</div>
|
||||
|
||||
<div class="addons-column-block-item-content">
|
||||
<h2><?php echo esc_html( $item->title ); ?></h2>
|
||||
<?php
|
||||
self::output_button(
|
||||
$item->href,
|
||||
$item->button,
|
||||
'addons-button-solid',
|
||||
$item->plugin
|
||||
);
|
||||
?>
|
||||
<p><?php echo esc_html( $item->description ); ?></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the outputting of a small light block.
|
||||
*
|
||||
* @param object $block
|
||||
*/
|
||||
public static function output_small_light_block( $block ) {
|
||||
?>
|
||||
<div class="addons-small-light-block">
|
||||
<img class="addons-img" src="<?php echo esc_url( $block->image ) ?>" />
|
||||
<div class="addons-small-light-block-content">
|
||||
<h1><?php echo esc_html( $block->title ); ?></h1>
|
||||
<p><?php echo esc_html( $block->description ); ?></p>
|
||||
<div class="addons-small-light-block-buttons">
|
||||
<?php foreach ( $block->buttons as $button ) : ?>
|
||||
<?php
|
||||
self::output_button(
|
||||
$button->href,
|
||||
$button->text,
|
||||
'addons-button-solid'
|
||||
);
|
||||
?>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the outputting of a small dark block.
|
||||
*
|
||||
* @param object $block
|
||||
*/
|
||||
public static function output_small_dark_block( $block ) {
|
||||
?>
|
||||
<div class="addons-small-dark-block">
|
||||
<h1><?php echo esc_html( $block->title ); ?></h1>
|
||||
<p><?php echo esc_html( $block->description ); ?></p>
|
||||
<div class="addons-small-dark-items">
|
||||
<?php foreach ( $block->items as $item ) : ?>
|
||||
<div class="addons-small-dark-item">
|
||||
<div class="addons-small-dark-item-icon">
|
||||
<img class="addons-img" src="<?php echo esc_url( $item->image ); ?>" />
|
||||
</div>
|
||||
<?php
|
||||
self::output_button(
|
||||
$item->href,
|
||||
$item->button,
|
||||
'addons-button-outline-white'
|
||||
);
|
||||
?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the outputting of featured sections
|
||||
*
|
||||
* @param array $sections
|
||||
*/
|
||||
public static function output_featured_sections( $sections ) {
|
||||
foreach ( $sections as $section ) {
|
||||
switch ( $section->module ) {
|
||||
case 'banner_block':
|
||||
self::output_banner_block( $section );
|
||||
break;
|
||||
case 'column_start':
|
||||
self::output_column( $section );
|
||||
break;
|
||||
case 'column_end':
|
||||
self::output_column( $section );
|
||||
break;
|
||||
case 'column_block':
|
||||
self::output_column_block( $section );
|
||||
break;
|
||||
case 'small_light_block':
|
||||
self::output_small_light_block( $section );
|
||||
break;
|
||||
case 'small_dark_block':
|
||||
self::output_small_dark_block( $section );
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Outputs a button.
|
||||
*
|
||||
* @param string $url
|
||||
* @param string $text
|
||||
* @param string $theme
|
||||
* @param string $plugin
|
||||
*/
|
||||
public static function output_button( $url, $text, $theme, $plugin = '' ) {
|
||||
$theme = __( 'Free', 'woocommerce' ) === $text ? 'addons-button-outline-green' : $theme;
|
||||
$theme = is_plugin_active( $plugin ) ? 'addons-button-installed' : $theme;
|
||||
$text = is_plugin_active( $plugin ) ? __( 'Installed', 'woocommerce' ) : $text;
|
||||
?>
|
||||
<a
|
||||
class="addons-button <?php echo esc_attr( $theme ); ?>"
|
||||
href="<?php echo esc_url( $url ); ?>">
|
||||
<?php echo esc_html( $text ); ?>
|
||||
</a>
|
||||
<?php
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Handles output of the addons page in admin.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -14,8 +14,6 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
<div class="icon32 icon32-posts-product" id="icon-woocommerce"><br /></div>
|
||||
<h1>
|
||||
<?php _e( 'WooCommerce Add-ons/Extensions', 'woocommerce' ); ?>
|
||||
<a href="https://woocommerce.com/product-category/woocommerce-extensions/" class="add-new-h2"><?php _e( 'Browse all extensions', 'woocommerce' ); ?></a>
|
||||
<?php WC_Admin_Addons::output_storefront_button(); ?>
|
||||
</h1>
|
||||
<?php if ( $sections ) : ?>
|
||||
<ul class="subsubsub">
|
||||
|
|
@ -24,7 +22,14 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
<?php endforeach; ?>
|
||||
</ul>
|
||||
<br class="clear" />
|
||||
<?php if ( $addons = WC_Admin_Addons::get_section_data( $current_section ) ) : ?>
|
||||
<?php if ( 'featured' === $current_section ) : ?>
|
||||
<div class="addons-featured">
|
||||
<?php
|
||||
$featured = WC_Admin_Addons::get_featured();
|
||||
?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if ( 'featured' !== $current_section && $addons = WC_Admin_Addons::get_section_data( $current_section ) ) : ?>
|
||||
<ul class="products">
|
||||
<?php foreach ( $addons as $addon ) : ?>
|
||||
<li class="product">
|
||||
|
|
@ -45,7 +50,7 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
<p><?php printf( __( 'Our catalog of WooCommerce Extensions can be found on WooCommerce.com here: <a href="%s">WooCommerce Extensions Catalog</a>', 'woocommerce' ), 'https://woocommerce.com/product-category/woocommerce-extensions/' ); ?></p>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( 'Storefront' !== $theme['Name'] ) : ?>
|
||||
<?php if ( 'Storefront' !== $theme['Name'] && 'featured' !== $current_section ) : ?>
|
||||
<div class="storefront">
|
||||
<a href="<?php echo esc_url( 'https://woocommerce.com/storefront/' ); ?>" target="_blank"><img src="<?php echo WC()->plugin_url(); ?>/assets/images/storefront.png" alt="Storefront" /></a>
|
||||
<h2><?php _e( 'Looking for a WooCommerce theme?', 'woocommerce' ); ?></h2>
|
||||
|
|
|
|||
Loading…
Reference in New Issue