From d9a59b941c99484c512d8f2cab8d0cec91fd805b Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Tue, 12 May 2020 13:58:18 -0600 Subject: [PATCH 01/22] Update task list to closer match new designs. --- client/task-list/index.js | 36 ++++++++----------------- client/task-list/style.scss | 9 +------ client/task-list/tasks.js | 54 ++++++++++++------------------------- 3 files changed, 29 insertions(+), 70 deletions(-) diff --git a/client/task-list/index.js b/client/task-list/index.js index 7366e67dd5..a6396965e4 100644 --- a/client/task-list/index.js +++ b/client/task-list/index.js @@ -6,13 +6,13 @@ import { Component, cloneElement, Fragment } from '@wordpress/element'; import { get, isEqual } from 'lodash'; import { compose } from '@wordpress/compose'; import classNames from 'classnames'; -import { Snackbar, Icon, Button, Modal } from '@wordpress/components'; +import { Snackbar, Button, Modal } from '@wordpress/components'; import { withDispatch } from '@wordpress/data'; /** * WooCommerce dependencies */ -import { Card, List, MenuItem, EllipsisMenu } from '@woocommerce/components'; +import { Card, List, EllipsisMenu } from '@woocommerce/components'; import { updateQueryString } from '@woocommerce/navigation'; import { PLUGINS_STORE_NAME } from '@woocommerce/data'; @@ -222,18 +222,9 @@ class TaskDashboard extends Component { label={ __( 'Task List Options', 'woocommerce-admin' ) } renderContent={ () => (
- - this.hideTaskCard( 'remove_card' ) - } - > - - { __( 'Remove this card', 'woocommerce-admin' ) } - +
) } /> @@ -352,13 +343,12 @@ class TaskDashboard extends Component { task.completed ? 'is-complete' : null, task.className ); - task.before = task.completed ? ( - check_circle - ) : ( - { task.icon } + task.before = ( + { task.completed ? 'check_circle' : 'radio_button_unchecked' } ); - task.after = ( - chevron_right + task.after = ( task.time + ? { task.time } + : chevron_right ); if ( ! task.onClick ) { @@ -380,11 +370,7 @@ class TaskDashboard extends Component { , + completed: profileItems.completed, + visible: true, + time: __( '4 minutes', 'woocommerce-admin' ), + }, { key: 'purchase', title: __( 'Purchase & install extensions', 'woocommerce-admin' ), - content: __( - 'Purchase, install, and manage your extensions directly from your dashboard', - 'wooocommerce-admin' - ), - icon: 'extension', container: null, onClick: () => remainingProductIds.length ? toggleCartModal() : null, visible: productIds.length, completed: ! remainingProductIds.length, + time: __( '5 minutes', 'woocommerce-admin' ), }, { key: 'connect', @@ -78,75 +82,50 @@ export function getAllTasks( { 'Connect your store to WooCommerce.com', 'woocommerce-admin' ), - content: __( - 'Install and manage your extensions directly from your Dashboard', - 'wooocommerce-admin' - ), - icon: 'extension', container: , visible: profileItems.items_purchased && ! profileItems.wccom_connected, completed: profileItems.wccom_connected, + time: __( '2 minutes', 'woocommerce-admin' ), }, { key: 'products', - title: __( 'Add your first product', 'woocommerce-admin' ), - content: __( - 'Add products manually, import from a sheet or migrate from another platform', - 'wooocommerce-admin' - ), - icon: 'add_box', + title: __( 'Add my products', 'woocommerce-admin' ), container: , completed: hasProducts, visible: true, + time: __( '1 minute per product', 'woocommerce-admin' ), }, { key: 'appearance', - title: __( 'Personalize your store', 'woocommerce-admin' ), - content: __( - 'Create a custom homepage and upload your logo', - 'wooocommerce-admin' - ), - icon: 'palette', + title: __( 'Personalize my store', 'woocommerce-admin' ), container: , completed: isAppearanceComplete, visible: true, + time: __( '2 minutes', 'woocommerce-admin' ), }, { key: 'shipping', title: __( 'Set up shipping', 'woocommerce-admin' ), - content: __( - 'Configure some basic shipping rates to get started', - 'wooocommerce-admin' - ), - icon: 'local_shipping', container: , completed: shippingZonesCount > 0, visible: ( profileItems.product_types && profileItems.product_types.includes( 'physical' ) ) || hasPhysicalProducts, + time: __( '1 minute', 'woocommerce-admin' ), }, { key: 'tax', title: __( 'Set up tax', 'woocommerce-admin' ), - content: __( - 'Choose how to configure tax rates - manually or automatically', - 'wooocommerce-admin' - ), - icon: 'account_balance', container: , completed: isTaxComplete, visible: true, + time: __( '1 minute', 'woocommerce-admin' ), }, { key: 'payments', title: __( 'Set up payments', 'woocommerce-admin' ), - content: __( - 'Select which payment providers you’d like to use and configure them', - 'wooocommerce-admin' - ), - icon: 'payment', container: , completed: paymentsCompleted || paymentsSkipped, onClick: () => { @@ -159,6 +138,7 @@ export function getAllTasks( { updateQueryString( { task: 'payments' } ); }, visible: true, + time: __( '2 minutes', 'woocommerce-admin' ), }, ]; From ea20f8acdddc2c13ec257cf01cccc0ddc7764a76 Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Fri, 15 May 2020 11:03:18 -0600 Subject: [PATCH 02/22] Update TaskList placeholder to match the new design. --- client/task-list/placeholder.js | 7 ------- client/task-list/style.scss | 23 +++++++---------------- 2 files changed, 7 insertions(+), 23 deletions(-) diff --git a/client/task-list/placeholder.js b/client/task-list/placeholder.js index 47cbb6c6df..eada327353 100644 --- a/client/task-list/placeholder.js +++ b/client/task-list/placeholder.js @@ -18,9 +18,6 @@ const TaskListPlaceholder = ( props ) => {
-
- -
@@ -35,10 +32,6 @@ const TaskListPlaceholder = ( props ) => {
-
- -
-
diff --git a/client/task-list/style.scss b/client/task-list/style.scss index 080c72dce9..7f55cd2069 100644 --- a/client/task-list/style.scss +++ b/client/task-list/style.scss @@ -546,6 +546,11 @@ .woocommerce-task-dashboard__container { .woocommerce-task-card.is-loading { + .woocommerce-card__body { + border-top: 1px solid $studio-gray-5; + padding: 0; + } + .is-placeholder { @include placeholder(); display: inline-block; @@ -559,13 +564,6 @@ } } - .woocommerce-card__description { - .is-placeholder { - width: 90%; - height: 24px; - } - } - .woocommerce-list__item-before { .is-placeholder { height: 36px; @@ -582,19 +580,12 @@ width: 60%; } } - - .woocommerce-list__item-content { - .is-placeholder { - height: 20px; - width: 80%; - } - } } .woocommerce-list__item-after { .is-placeholder { - height: 24px; - width: 24px; + height: 18px; + width: 60px; } } } From f29053eb3d7d043add276648f405be095ab82d80 Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Fri, 15 May 2020 15:04:20 -0600 Subject: [PATCH 03/22] Hook up store details task click. --- client/task-list/tasks.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/client/task-list/tasks.js b/client/task-list/tasks.js index 06eba3cd11..7688ec5058 100644 --- a/client/task-list/tasks.js +++ b/client/task-list/tasks.js @@ -62,6 +62,11 @@ export function getAllTasks( { key: 'store_details', title: __( 'Store details', 'woocommerce-admin' ), container:
, + onClick: () => { + window.location = getAdminLink( + 'admin.php?page=wc-admin&reset_profiler=1' + ); + }, completed: profileItems.completed, visible: true, time: __( '4 minutes', 'woocommerce-admin' ), From ae59bd8588cacbcc1f3dba5b5cf68d40a522a453 Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Fri, 15 May 2020 15:04:37 -0600 Subject: [PATCH 04/22] Don't show "skip" prompt for task list on new home screen. --- client/homepage/layout.js | 1 + client/task-list/index.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/client/homepage/layout.js b/client/homepage/layout.js index bddcc0e0d9..01e7b06595 100644 --- a/client/homepage/layout.js +++ b/client/homepage/layout.js @@ -109,6 +109,7 @@ export const Layout = ( props ) => { ); diff --git a/client/task-list/index.js b/client/task-list/index.js index a6396965e4..d696b77631 100644 --- a/client/task-list/index.js +++ b/client/task-list/index.js @@ -379,7 +379,7 @@ class TaskDashboard extends Component { { inline && this.renderPrompt() } { isWelcomeModalOpen && this.renderWelcomeModal() } - { this.renderSkipActions() } + { ! inline && this.renderSkipActions() } ) }
From c566e6fddcfb05d63b21175613495b86cf2df18a Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Wed, 20 May 2020 09:50:48 -0600 Subject: [PATCH 05/22] Update time estimates for tasks. --- client/task-list/tasks.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/task-list/tasks.js b/client/task-list/tasks.js index 7688ec5058..47738b5a97 100644 --- a/client/task-list/tasks.js +++ b/client/task-list/tasks.js @@ -79,7 +79,7 @@ export function getAllTasks( { remainingProductIds.length ? toggleCartModal() : null, visible: productIds.length, completed: ! remainingProductIds.length, - time: __( '5 minutes', 'woocommerce-admin' ), + time: __( '2 minutes', 'woocommerce-admin' ), }, { key: 'connect', @@ -91,7 +91,7 @@ export function getAllTasks( { visible: profileItems.items_purchased && ! profileItems.wccom_connected, completed: profileItems.wccom_connected, - time: __( '2 minutes', 'woocommerce-admin' ), + time: __( '1 minute', 'woocommerce-admin' ), }, { key: 'products', From 2dc3a7c5e0d409701af2cf794c1c61859b3c1332 Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Wed, 20 May 2020 09:51:04 -0600 Subject: [PATCH 06/22] Add progress indicator to TaskList. --- client/task-list/index.js | 6 ++++++ client/task-list/style.scss | 27 +++++++++++++++++++++++++++ 2 files changed, 33 insertions(+) diff --git a/client/task-list/index.js b/client/task-list/index.js index d696b77631..d4b7f76988 100644 --- a/client/task-list/index.js +++ b/client/task-list/index.js @@ -357,6 +357,7 @@ class TaskDashboard extends Component { return task; } ); + const numCompleteTasks = listTasks.filter( task => task.completed ).length; return ( @@ -367,6 +368,11 @@ class TaskDashboard extends Component { } ) ) : ( + Date: Wed, 20 May 2020 09:55:36 -0600 Subject: [PATCH 07/22] Use null container for store details task. --- client/task-list/tasks.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/task-list/tasks.js b/client/task-list/tasks.js index 47738b5a97..4939156ebd 100644 --- a/client/task-list/tasks.js +++ b/client/task-list/tasks.js @@ -61,7 +61,7 @@ export function getAllTasks( { { key: 'store_details', title: __( 'Store details', 'woocommerce-admin' ), - container:
, + container: null, onClick: () => { window.location = getAdminLink( 'admin.php?page=wc-admin&reset_profiler=1' From c01ac845902f128aa5a6eba1efdc546f009fbeab Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Thu, 21 May 2020 12:19:19 -0600 Subject: [PATCH 08/22] Fix progress bar styling. --- client/task-list/index.js | 8 +++++++- client/task-list/style.scss | 22 ++++++++++++++++++++-- 2 files changed, 27 insertions(+), 3 deletions(-) diff --git a/client/task-list/index.js b/client/task-list/index.js index d4b7f76988..ebd3f356da 100644 --- a/client/task-list/index.js +++ b/client/task-list/index.js @@ -358,6 +358,12 @@ class TaskDashboard extends Component { return task; } ); const numCompleteTasks = listTasks.filter( task => task.completed ).length; + const progressBarClass = classNames( + 'woocommerce-task-card__progress-bar', + { + 'completed': listTasks.length === numCompleteTasks, + } + ); return ( @@ -369,7 +375,7 @@ class TaskDashboard extends Component { ) : ( diff --git a/client/task-list/style.scss b/client/task-list/style.scss index fe6cf64709..b79da58644 100644 --- a/client/task-list/style.scss +++ b/client/task-list/style.scss @@ -5,6 +5,10 @@ color: $studio-gray-50; } + .woocommerce-task-card { + margin-top: -18px; + } + .woocommerce-task-card .woocommerce-card__body { border-top: 1px solid $studio-gray-5; padding: 0; @@ -596,8 +600,11 @@ -moz-appearance: none; appearance: none; border: 0; - height: 8px; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + height: 4px; width: 100%; + vertical-align: top; // Firefox & { @@ -606,14 +613,25 @@ &::-moz-progress-bar { background-color: #0085ba; + border-top-left-radius: 3px; + border-top-right-radius: 3px; } // Chrome &::-webkit-progress-bar { background-color: #c4c4c4; + border-top-left-radius: 3px; + border-top-right-radius: 3px; } &::-webkit-progress-value { background-color: #0085ba; + border-top-left-radius: 3px; } -} \ No newline at end of file +} + +.woocommerce-task-dashboard__container .woocommerce-task-card__progress-bar.completed { + &::-webkit-progress-value { + border-top-right-radius: 3px; + } +} From e5d8ecf8dc0045be723f72e63320a8424be00441 Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Thu, 21 May 2020 12:48:16 -0600 Subject: [PATCH 09/22] Just use card menu for TaskList dismissal. --- client/dashboard/customizable.js | 2 +- client/homepage/layout.js | 6 +--- client/task-list/index.js | 58 ++------------------------------ 3 files changed, 5 insertions(+), 61 deletions(-) diff --git a/client/dashboard/customizable.js b/client/dashboard/customizable.js index f11e79c598..062bfefca9 100644 --- a/client/dashboard/customizable.js +++ b/client/dashboard/customizable.js @@ -311,7 +311,7 @@ class CustomizableDashboard extends Component { { isTaskListEnabled && ( }> - + ) } { isDashboardShown && this.renderDashboardReports() } diff --git a/client/homepage/layout.js b/client/homepage/layout.js index 01e7b06595..6eed1e7e1e 100644 --- a/client/homepage/layout.js +++ b/client/homepage/layout.js @@ -106,11 +106,7 @@ export const Layout = ( props ) => { return ( }> - + ); }; diff --git a/client/task-list/index.js b/client/task-list/index.js index ebd3f356da..64aff746b0 100644 --- a/client/task-list/index.js +++ b/client/task-list/index.js @@ -6,7 +6,7 @@ import { Component, cloneElement, Fragment } from '@wordpress/element'; import { get, isEqual } from 'lodash'; import { compose } from '@wordpress/compose'; import classNames from 'classnames'; -import { Snackbar, Button, Modal } from '@wordpress/components'; +import { Button, Modal } from '@wordpress/components'; import { withDispatch } from '@wordpress/data'; /** @@ -187,35 +187,6 @@ class TaskDashboard extends Component { return currentTask; } - renderPrompt() { - if ( this.props.promptShown ) { - return null; - } - - return ( - -
-
- - { __( 'Is this card useful?', 'woocommerce-admin' ) } - -
- - - -
-
- - ); - } - renderMenu() { return ( - -
- ); - } - render() { - const { inline, query } = this.props; + const { query } = this.props; const { isCartModalOpen, isWelcomeModalOpen } = this.state; const currentTask = this.getCurrentTask(); const listTasks = this.getTasks().map( ( task ) => { @@ -385,13 +342,11 @@ class TaskDashboard extends Component { 'Store setup', 'woocommerce-admin' ) } - menu={ inline && this.renderMenu() } + menu={ this.renderMenu() } > - { inline && this.renderPrompt() } { isWelcomeModalOpen && this.renderWelcomeModal() } - { ! inline && this.renderSkipActions() } ) }
@@ -417,16 +372,10 @@ export default compose( const profileItems = getProfileItems(); const options = getOptions( [ - 'woocommerce_task_list_prompt_shown', 'woocommerce_task_list_welcome_modal_dismissed', 'woocommerce_task_list_hidden', 'woocommerce_task_list_tracked_completed_tasks', ] ); - const promptShown = get( - options, - [ 'woocommerce_task_list_prompt_shown' ], - false - ); const modalDismissed = get( options, [ 'woocommerce_task_list_welcome_modal_dismissed' ], @@ -457,7 +406,6 @@ export default compose( return { modalDismissed, profileItems, - promptShown, taskListPayments, isJetpackConnected: isJetpackConnected(), incompleteTasks, From 40474a6ecebcb78b5fbef1e854cd580b49f9c802 Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Thu, 21 May 2020 12:48:42 -0600 Subject: [PATCH 10/22] Don't show TaskList on analytics overview if homepage feature is enabled. --- client/dashboard/customizable.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/client/dashboard/customizable.js b/client/dashboard/customizable.js index 062bfefca9..1ebe620f28 100644 --- a/client/dashboard/customizable.js +++ b/client/dashboard/customizable.js @@ -302,7 +302,10 @@ class CustomizableDashboard extends Component { render() { const { query, taskListHidden, taskListComplete } = this.props; - const isTaskListEnabled = isOnboardingEnabled() && ! taskListHidden; + const isTaskListEnabled = + isOnboardingEnabled() && + ! taskListHidden && + ! window.wcAdminFeatures.homepage; const isDashboardShown = ! isTaskListEnabled || ( ! query.task && taskListComplete ); From 7059c6d8432de3d5f5422b3481f31644daf2c7ea Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Thu, 21 May 2020 14:10:00 -0600 Subject: [PATCH 11/22] Initial refactor of TaskList to use WP card. --- client/task-list/index.js | 65 ++++++++++++++++++++++--------------- client/task-list/style.scss | 50 ++++++++++++++-------------- 2 files changed, 64 insertions(+), 51 deletions(-) diff --git a/client/task-list/index.js b/client/task-list/index.js index 64aff746b0..2c6c0ee0a9 100644 --- a/client/task-list/index.js +++ b/client/task-list/index.js @@ -6,13 +6,23 @@ import { Component, cloneElement, Fragment } from '@wordpress/element'; import { get, isEqual } from 'lodash'; import { compose } from '@wordpress/compose'; import classNames from 'classnames'; -import { Button, Modal } from '@wordpress/components'; +import { + Button, + Card, + CardBody, + CardHeader, + Modal, +} from '@wordpress/components'; import { withDispatch } from '@wordpress/data'; +import { + Icon, + check, +} from '@wordpress/icons'; /** * WooCommerce dependencies */ -import { Card, List, EllipsisMenu } from '@woocommerce/components'; +import { H, List, EllipsisMenu } from '@woocommerce/components'; import { updateQueryString } from '@woocommerce/navigation'; import { PLUGINS_STORE_NAME } from '@woocommerce/data'; @@ -189,16 +199,18 @@ class TaskDashboard extends Component { renderMenu() { return ( - ( -
- -
- ) } - /> +
+ ( +
+ +
+ ) } + /> +
); } @@ -301,7 +313,7 @@ class TaskDashboard extends Component { task.className ); task.before = ( - { task.completed ? 'check_circle' : 'radio_button_unchecked' } + ); task.after = ( task.time ? { task.time } @@ -331,20 +343,19 @@ class TaskDashboard extends Component { } ) ) : ( - - - + + + + { __( 'Store setup', 'woocommerce-admin' ) } + { this.renderMenu() } + + + + { isWelcomeModalOpen && this.renderWelcomeModal() } diff --git a/client/task-list/style.scss b/client/task-list/style.scss index b79da58644..525e22fbb7 100644 --- a/client/task-list/style.scss +++ b/client/task-list/style.scss @@ -5,13 +5,33 @@ color: $studio-gray-50; } - .woocommerce-task-card { - margin-top: -18px; - } + .woocommerce-task-dashboard__container { + .woocommerce-task-card { + .components-card__header.is-size-large { + min-height: unset; + padding-top: 0; + } - .woocommerce-task-card .woocommerce-card__body { - border-top: 1px solid $studio-gray-5; - padding: 0; + .components-card__body.is-size-large { + padding: 0; + } + } + + .woocommerce-task-card__prompt-actions { + .components-button:not(.components-icon-button) { + color: $studio-white; + } + } + + .skip-actions { + text-align: center; + + button.components-button.is-secondary { + color: $studio-gray-50; + margin: 0; + min-width: 0; + } + } } .woocommerce-card.is-narrow { @@ -34,24 +54,6 @@ } } - .woocommerce-task-dashboard__container { - .woocommerce-task-card__prompt-actions { - .components-button:not(.components-icon-button) { - color: $studio-white; - } - } - - .skip-actions { - text-align: center; - - button.components-button.is-secondary { - color: $studio-gray-50; - margin: 0; - min-width: 0; - } - } - } - .woocommerce-list { margin: 0; From 3a4e7ff4202e39f90d35c2b4d43dff13feac07a9 Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Thu, 21 May 2020 22:07:15 -0600 Subject: [PATCH 12/22] Style TaskList items and card header. --- client/task-list/index.js | 7 ++++-- client/task-list/style.scss | 43 +++++++++++++++---------------------- 2 files changed, 22 insertions(+), 28 deletions(-) diff --git a/client/task-list/index.js b/client/task-list/index.js index 2c6c0ee0a9..2c964d20cf 100644 --- a/client/task-list/index.js +++ b/client/task-list/index.js @@ -17,6 +17,7 @@ import { withDispatch } from '@wordpress/data'; import { Icon, check, + chevronRight, } from '@wordpress/icons'; /** @@ -313,11 +314,13 @@ class TaskDashboard extends Component { task.className ); task.before = ( - +
+ { task.completed && } +
); task.after = ( task.time ? { task.time } - : chevron_right + : ); if ( ! task.onClick ) { diff --git a/client/task-list/style.scss b/client/task-list/style.scss index 525e22fbb7..315532f780 100644 --- a/client/task-list/style.scss +++ b/client/task-list/style.scss @@ -10,26 +10,32 @@ .components-card__header.is-size-large { min-height: unset; padding-top: 0; + grid-template-columns: auto 24px; } .components-card__body.is-size-large { padding: 0; } - } - .woocommerce-task-card__prompt-actions { - .components-button:not(.components-icon-button) { - color: $studio-white; + .woocommerce-list__item.is-complete .woocommerce-task__icon { + background-color: theme(button); // $theme-color } - } - .skip-actions { - text-align: center; + .woocommerce-list__item:not(.is-complete) .woocommerce-task__icon { + border: 1px solid $core-grey-light-500; + } - button.components-button.is-secondary { - color: $studio-gray-50; - margin: 0; - min-width: 0; + .woocommerce-list__item-before .woocommerce-task__icon { + border-radius: 50%; + width: 32px; + height: 32px; + } + + .woocommerce-list__item-before svg { + fill: $white; + position: relative; + top: 4px; + left: 5px; } } } @@ -60,10 +66,6 @@ .woocommerce-list__item.is-complete { background: $studio-gray-0; - .woocommerce-list__item-before i { - color: $studio-gray-20; - } - .woocommerce-list__item-title { color: $studio-gray-50; } @@ -72,17 +74,6 @@ display: none; } } - - .woocommerce-list__item-before i { - width: 36px; - height: 36px; - font-size: 36px; - color: $studio-woocommerce-purple-60; - } - - .woocommerce-list__item-after i { - color: $studio-gray-60; - } } .woocommerce-list__item-title { From 78deea44e254ce95c723cf1a29d25beb038a933c Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Fri, 22 May 2020 08:59:22 -0600 Subject: [PATCH 13/22] Style "hide" button for TaskList. --- client/task-list/style.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/client/task-list/style.scss b/client/task-list/style.scss index 315532f780..17dad0f032 100644 --- a/client/task-list/style.scss +++ b/client/task-list/style.scss @@ -37,6 +37,10 @@ top: 4px; left: 5px; } + + .components-popover__content { + min-width: unset; + } } } @@ -50,13 +54,13 @@ .components-modal__frame .components-button.is-button { height: 40px; min-width: 106px; - margin: $gap $gap-smaller 0 0; + margin: 0; justify-content: center; font-size: 14px; font-weight: 500; &:not(.is-primary) { - color: $studio-pink-50; + color: theme(button); // $theme-color } } From f062ae9f368c4e779e5e754d43f291ce6b7ba313 Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Fri, 22 May 2020 09:27:33 -0600 Subject: [PATCH 14/22] Don't show TaskList after it's completion. --- client/homepage/layout.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/client/homepage/layout.js b/client/homepage/layout.js index 6eed1e7e1e..20fbab0980 100644 --- a/client/homepage/layout.js +++ b/client/homepage/layout.js @@ -57,8 +57,8 @@ export const Layout = ( props ) => { }; }, [] ); - const { query, requestingTaskList, taskListHidden } = props; - const isTaskListEnabled = taskListHidden === false; + const { query, requestingTaskList, taskListComplete, taskListHidden } = props; + const isTaskListEnabled = taskListHidden === false && ! taskListComplete; const isDashboardShown = ! isTaskListEnabled || ! query.task; const renderColumns = () => { @@ -130,6 +130,10 @@ Layout.propTypes = { * If the task list option is being fetched. */ requestingTaskList: PropTypes.bool.isRequired, + /** + * If the task list has been completed. + */ + taskListComplete: PropTypes.bool, /** * If the task list is hidden. */ @@ -149,13 +153,16 @@ export default compose( if ( isOnboardingEnabled() ) { const options = getOptions( [ + 'woocommerce_task_list_complete', 'woocommerce_task_list_hidden', ] ); return { requestingTaskList: isGetOptionsRequesting( [ + 'woocommerce_task_list_complete', 'woocommerce_task_list_hidden', ] ), + taskListComplete: Boolean( get( options, [ 'woocommerce_task_list_complete' ] ) ), taskListHidden: get( options, [ 'woocommerce_task_list_hidden' ] ) === 'yes', }; } From ad9a439a9d86c0b5e8718a91ffe96b902473c055 Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Fri, 22 May 2020 09:36:23 -0600 Subject: [PATCH 15/22] Don't show TaskList placeholder when options are still loading. Avoid a potential flash of the placeholder without showing the TaskList. --- client/homepage/layout.js | 4 ++-- client/homepage/test/index.js | 34 +++++++++++++++++++++++++++++++--- 2 files changed, 33 insertions(+), 5 deletions(-) diff --git a/client/homepage/layout.js b/client/homepage/layout.js index 20fbab0980..1ff2ed9c1c 100644 --- a/client/homepage/layout.js +++ b/client/homepage/layout.js @@ -101,11 +101,11 @@ export const Layout = ( props ) => { const renderTaskList = () => { if ( requestingTaskList ) { - return ; + return; } return ( - }> + }> ); diff --git a/client/homepage/test/index.js b/client/homepage/test/index.js index 6323a6fbba..7be0c0ac7d 100644 --- a/client/homepage/test/index.js +++ b/client/homepage/test/index.js @@ -11,7 +11,7 @@ jest.mock( 'homepage/stats-overview', () => jest.fn().mockReturnValue( null ) ); jest.mock( 'task-list', () => jest.fn().mockReturnValue( '[TaskList]' ) ); describe( 'Homepage Layout', () => { - it( 'should show TaskList placeholder when loading', () => { + it( 'should not show TaskList placeholder when loading', () => { const { container } = render( { /> ); - const placeholder = container.querySelector( '.woocommerce-task-card.is-loading' ); - expect( placeholder ).not.toBeNull(); + const placeholder = container.querySelector( '.woocommerce-task-card' ); + expect( placeholder ).toBeNull(); } ); it( 'should show TaskList inline', async () => { @@ -61,4 +61,32 @@ describe( 'Homepage Layout', () => { const taskList = await screen.findByText( '[TaskList]' ) expect( taskList ).toBeDefined(); } ); + + it( 'should not show TaskList when user has hidden', () => { + render( + + ); + + const taskList = screen.queryByText( '[TaskList]' ) + expect( taskList ).toBeNull(); + } ); + + it( 'should not show TaskList when it is complete', () => { + render( + + ); + + const taskList = screen.queryByText( '[TaskList]' ) + expect( taskList ).toBeNull(); + } ); } ); From 73a9aceb39a540e284312026e7c1ae2fce7b6c4d Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Fri, 22 May 2020 10:08:36 -0600 Subject: [PATCH 16/22] Fix border radius on progress bar. --- client/task-list/style.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/client/task-list/style.scss b/client/task-list/style.scss index 17dad0f032..68856c71fc 100644 --- a/client/task-list/style.scss +++ b/client/task-list/style.scss @@ -597,8 +597,8 @@ -moz-appearance: none; appearance: none; border: 0; - border-top-left-radius: 3px; - border-top-right-radius: 3px; + border-top-left-radius: 2px; + border-top-right-radius: 2px; height: 4px; width: 100%; vertical-align: top; @@ -610,25 +610,25 @@ &::-moz-progress-bar { background-color: #0085ba; - border-top-left-radius: 3px; - border-top-right-radius: 3px; + border-top-left-radius: 2px; + border-top-right-radius: 2px; } // Chrome &::-webkit-progress-bar { background-color: #c4c4c4; - border-top-left-radius: 3px; - border-top-right-radius: 3px; + border-top-left-radius: 2px; + border-top-right-radius: 2px; } &::-webkit-progress-value { background-color: #0085ba; - border-top-left-radius: 3px; + border-top-left-radius: 2px; } } .woocommerce-task-dashboard__container .woocommerce-task-card__progress-bar.completed { &::-webkit-progress-value { - border-top-right-radius: 3px; + border-top-right-radius: 2px; } } From bf2c6f821efe3edb7244b6e91bff1e13b69a5df3 Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Fri, 22 May 2020 10:35:51 -0600 Subject: [PATCH 17/22] Fix TaskList header style with homepage feature disabled. --- client/dashboard/style.scss | 14 ++++++++++++++ client/task-list/style.scss | 1 + 2 files changed, 15 insertions(+) diff --git a/client/dashboard/style.scss b/client/dashboard/style.scss index e1371d77a5..c1553798dc 100644 --- a/client/dashboard/style.scss +++ b/client/dashboard/style.scss @@ -77,3 +77,17 @@ padding-bottom: 10px; } } + +.woocommerce-task-dashboard__body { + .woocommerce-task-dashboard__container { + .woocommerce-task-card { + .components-card__header.is-size-large { + padding-bottom: 12px; + + .woocommerce-card__menu { + margin-top: 8px; + } + } + } + } +} diff --git a/client/task-list/style.scss b/client/task-list/style.scss index 68856c71fc..2178455aa6 100644 --- a/client/task-list/style.scss +++ b/client/task-list/style.scss @@ -10,6 +10,7 @@ .components-card__header.is-size-large { min-height: unset; padding-top: 0; + display: grid; grid-template-columns: auto 24px; } From 98b3d2bbf32154dfc110c8781c0d4d69634a1268 Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Fri, 22 May 2020 10:39:22 -0600 Subject: [PATCH 18/22] Remove defunct function. --- client/task-list/index.js | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/client/task-list/index.js b/client/task-list/index.js index 2c964d20cf..fb034b8662 100644 --- a/client/task-list/index.js +++ b/client/task-list/index.js @@ -288,22 +288,6 @@ class TaskDashboard extends Component { ); } - onSkipStoreSetup = () => { - const completedTaskKeys = this.getTasks() - .filter( ( x ) => x.completed ) - .map( ( x ) => x.key ); - - recordEvent( 'tasklist_skip', { - completed_tasks_count: completedTaskKeys.length, - completed_tasks: completedTaskKeys, - reason: 'skip', - } ); - - this.props.updateOptions( { - woocommerce_task_list_hidden: 'yes', - } ); - }; - render() { const { query } = this.props; const { isCartModalOpen, isWelcomeModalOpen } = this.state; From db9fb2aa17c46daaaec094a30092f33e7aad8af7 Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Fri, 22 May 2020 11:46:09 -0600 Subject: [PATCH 19/22] Remove unnecessary import. --- client/homepage/layout.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/client/homepage/layout.js b/client/homepage/layout.js index 1ff2ed9c1c..1d989210d0 100644 --- a/client/homepage/layout.js +++ b/client/homepage/layout.js @@ -15,11 +15,6 @@ import classnames from 'classnames'; import { get } from 'lodash'; import PropTypes from 'prop-types'; -/** - * WooCommerce dependencies - */ -import { Spinner } from '@woocommerce/components'; - /** * Internal dependencies */ From d584d1a0a4a416fcc077eaff09aae901f7fd2f0a Mon Sep 17 00:00:00 2001 From: James Koster Date: Mon, 25 May 2020 16:51:14 +0100 Subject: [PATCH 20/22] Some minor color tweaks (#4436) * Colors * Only show time estimation for incomplete tasks * Don't show chevron on completed tasks. Co-authored-by: Jeff Stieler --- client/task-list/index.js | 43 +++++++++++++++++++---------- client/task-list/style.scss | 54 +++++++++++++++++++++++++++---------- 2 files changed, 69 insertions(+), 28 deletions(-) diff --git a/client/task-list/index.js b/client/task-list/index.js index fb034b8662..ba79ca7f14 100644 --- a/client/task-list/index.js +++ b/client/task-list/index.js @@ -14,11 +14,7 @@ import { Modal, } from '@wordpress/components'; import { withDispatch } from '@wordpress/data'; -import { - Icon, - check, - chevronRight, -} from '@wordpress/icons'; +import { Icon, check, chevronRight } from '@wordpress/icons'; /** * WooCommerce dependencies @@ -205,7 +201,11 @@ class TaskDashboard extends Component { label={ __( 'Task List Options', 'woocommerce-admin' ) } renderContent={ () => (
-
@@ -302,10 +302,16 @@ class TaskDashboard extends Component { { task.completed && }
); - task.after = ( task.time - ? { task.time } - : - ); + + if ( ! task.completed ) { + task.after = task.time ? ( + + { task.time } + + ) : ( + + ); + } if ( ! task.onClick ) { task.onClick = () => updateQueryString( { task: task.key } ); @@ -313,11 +319,12 @@ class TaskDashboard extends Component { return task; } ); - const numCompleteTasks = listTasks.filter( task => task.completed ).length; + const numCompleteTasks = listTasks.filter( ( task ) => task.completed ) + .length; const progressBarClass = classNames( 'woocommerce-task-card__progress-bar', { - 'completed': listTasks.length === numCompleteTasks, + completed: listTasks.length === numCompleteTasks, } ); @@ -330,14 +337,22 @@ class TaskDashboard extends Component { } ) ) : ( - + - { __( 'Store setup', 'woocommerce-admin' ) } + + { __( + 'Store setup', + 'woocommerce-admin' + ) } + { this.renderMenu() } diff --git a/client/task-list/style.scss b/client/task-list/style.scss index 2178455aa6..b5901c6978 100644 --- a/client/task-list/style.scss +++ b/client/task-list/style.scss @@ -1,5 +1,3 @@ - - .woocommerce-task-dashboard__body { .woocommerce-card__description { color: $studio-gray-50; @@ -22,8 +20,11 @@ background-color: theme(button); // $theme-color } - .woocommerce-list__item:not(.is-complete) .woocommerce-task__icon { - border: 1px solid $core-grey-light-500; + .woocommerce-list__item:not(.is-complete) { + .woocommerce-task__icon { + border: 1px solid $core-grey-light-500; + background: $white; + } } .woocommerce-list__item-before .woocommerce-task__icon { @@ -68,11 +69,33 @@ .woocommerce-list { margin: 0; + .woocommerce-list__item { + &:not(:first-child) { + border-top: 1px solid $light-gray-500; + } + + &:hover { + background: $light-gray-100; + + .woocommerce-list__item-title { + color: color(theme(button) shade(25%)); + } + } + } + + .woocommerce-list__item-title { + color: theme(button); // $theme-color + } + + .woocommerce-task-estimated-time { + color: $dark-gray-500; + } + .woocommerce-list__item.is-complete { - background: $studio-gray-0; + background: $light-gray-100; .woocommerce-list__item-title { - color: $studio-gray-50; + color: $dark-gray-500; } .woocommerce-list__item-content { @@ -286,7 +309,7 @@ .components-button.is-primary { min-width: 328px; - @include breakpoint( '<782px' ) { + @include breakpoint('<782px') { min-width: auto; } } @@ -379,7 +402,7 @@ } } - @include breakpoint( '<600px' ) { + @include breakpoint('<600px') { .woocommerce-card__body { flex-direction: column; } @@ -445,8 +468,11 @@ } } -.woocommerce-task-dashboard__container .woocommerce-task-payments .woocommerce-task-payments__actions { - text-align: center; +.woocommerce-task-dashboard__container { + .woocommerce-task-payments + .woocommerce-task-payments__actions { + text-align: center; + } button.components-button.is-primary { margin: 0; @@ -606,24 +632,24 @@ // Firefox & { - background-color: #c4c4c4; + background-color: $light-gray-300; } &::-moz-progress-bar { - background-color: #0085ba; + background-color: $dark-gray-500; border-top-left-radius: 2px; border-top-right-radius: 2px; } // Chrome &::-webkit-progress-bar { - background-color: #c4c4c4; + background-color: $light-gray-300; border-top-left-radius: 2px; border-top-right-radius: 2px; } &::-webkit-progress-value { - background-color: #0085ba; + background-color: $dark-gray-500; border-top-left-radius: 2px; } } From 98b8aa9752de84d0d498ea8355bc506c70f0d8c6 Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Mon, 25 May 2020 11:01:26 -0600 Subject: [PATCH 21/22] Preload task list completed option, show placeholder when loading. --- client/homepage/layout.js | 4 ++-- client/homepage/test/index.js | 6 +++--- src/Features/Onboarding.php | 3 ++- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/client/homepage/layout.js b/client/homepage/layout.js index 1d989210d0..25a25b2923 100644 --- a/client/homepage/layout.js +++ b/client/homepage/layout.js @@ -96,7 +96,7 @@ export const Layout = ( props ) => { const renderTaskList = () => { if ( requestingTaskList ) { - return; + return ; } return ( @@ -157,7 +157,7 @@ export default compose( 'woocommerce_task_list_complete', 'woocommerce_task_list_hidden', ] ), - taskListComplete: Boolean( get( options, [ 'woocommerce_task_list_complete' ] ) ), + taskListComplete: get( options, [ 'woocommerce_task_list_complete' ] ), taskListHidden: get( options, [ 'woocommerce_task_list_hidden' ] ) === 'yes', }; } diff --git a/client/homepage/test/index.js b/client/homepage/test/index.js index 7be0c0ac7d..1cbe7e2e38 100644 --- a/client/homepage/test/index.js +++ b/client/homepage/test/index.js @@ -11,7 +11,7 @@ jest.mock( 'homepage/stats-overview', () => jest.fn().mockReturnValue( null ) ); jest.mock( 'task-list', () => jest.fn().mockReturnValue( '[TaskList]' ) ); describe( 'Homepage Layout', () => { - it( 'should not show TaskList placeholder when loading', () => { + it( 'should show TaskList placeholder when loading', () => { const { container } = render( { /> ); - const placeholder = container.querySelector( '.woocommerce-task-card' ); - expect( placeholder ).toBeNull(); + const placeholder = container.querySelector( '.woocommerce-task-card.is-loading' ); + expect( placeholder ).not.toBeNull(); } ); it( 'should show TaskList inline', async () => { diff --git a/src/Features/Onboarding.php b/src/Features/Onboarding.php index bf491a1def..a7205c8c7c 100644 --- a/src/Features/Onboarding.php +++ b/src/Features/Onboarding.php @@ -500,8 +500,9 @@ public function component_settings( $settings ) { * @return array */ public function preload_options( $options ) { - $options[] = 'woocommerce_task_list_hidden'; + $options[] = 'woocommerce_task_list_complete'; $options[] = 'woocommerce_task_list_do_this_later'; + $options[] = 'woocommerce_task_list_hidden'; if ( ! self::should_show_tasks() && ! self::should_show_profiler() ) { return $options; From 4f30b289f1004f697ad4efa05eeb865cc696aad2 Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Wed, 27 May 2020 09:38:08 -0600 Subject: [PATCH 22/22] Fix alignment of "hide this" button. --- client/task-list/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/client/task-list/style.scss b/client/task-list/style.scss index b5901c6978..7ef41b5d88 100644 --- a/client/task-list/style.scss +++ b/client/task-list/style.scss @@ -60,6 +60,7 @@ justify-content: center; font-size: 14px; font-weight: 500; + display: inline-block; &:not(.is-primary) { color: theme(button); // $theme-color