Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Onboarding: Add the task list dashboard (https://github.com/woocommerce/woocommerce-admin/pull/2654) 

* Add task list dashboard page

* Add actual site URL to header

* Fix typos

* Remove app bar

* Use material icons

* Update material icons to use Google hosted font

* Localize description strings
This commit is contained in:
Joshua T Flowers 2019-07-18 18:11:21 +08:00 committed by GitHub
parent 4e478d9fbb
commit 2d21db45ce
9 changed files with 162 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/woocommerce-admin/client/dashboard/profile-wizard/index.js
View File

@ -74,11 +74,13 @@ class ProfileWizard extends Component {
componentDidMount() {
document.documentElement.classList.remove( 'wp-toolbar' );
document.body.classList.add( 'woocommerce-profile-wizard__body' );
document.body.classList.add( 'woocommerce-dashboard__body' );
}
componentWillUnmount() {
document.documentElement.classList.add( 'wp-toolbar' );
document.body.classList.remove( 'woocommerce-profile-wizard__body' );
document.body.classList.remove( 'woocommerce-dashboard__body' );
}
getCurrentStep() {

24
plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss
View File

@ -1,15 +1,6 @@
/** @format */
.woocommerce-profile-wizard__body {
background: $muriel-gray-0;
color: $muriel-gray-600;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
'Helvetica Neue', sans-serif;
#wpbody-content {
min-height: 100vh;
}
.woocommerce-profile-wizard__container a {
color: $muriel-gray-600;
}
@ -409,23 +400,10 @@
}
}
/* Hide wp-admin and WooCommerce elements when viewing the profile wizard */
#adminmenumain,
#wpadminbar,
.woocommerce-layout__header,
.update-nag,
.woocommerce-store-alerts,
.woocommerce-message,
.notice,
.error,
.updated {
#wpadminbar {
display: none;
}
#wpcontent {
margin-left: 0;
}
#wpbody {
padding-top: 0;
}

27
plugins/woocommerce-admin/client/dashboard/style.scss
View File

@ -74,3 +74,30 @@
padding-bottom: 10px;
}
}
.woocommerce-dashboard__body {
background: $muriel-gray-0;
color: $muriel-gray-600;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
'Helvetica Neue', sans-serif;
#wpbody-content {
min-height: 100vh;
}
/* Hide wp-admin and WooCommerce elements when the dashboard body class is present */
#adminmenumain,
.woocommerce-layout__header,
.update-nag,
.woocommerce-store-alerts,
.woocommerce-message,
.notice,
.error,
.updated {
display: none;
}
#wpcontent {
margin-left: 0;
}
}

99
plugins/woocommerce-admin/client/dashboard/task-list/index.js
View File

@ -3,31 +3,102 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { Component, Fragment } from '@wordpress/element';
import { noop } from 'lodash';
/**
* WooCommerce dependencies
*/
import { Card, List } from '@woocommerce/components';
/**
* Internal depdencies
*/
import './style.scss';
import { H } from '@woocommerce/components';
export default class TaskList extends Component {
const getTasks = () => {
return [
{
title: __( 'Connect your store to WooCommerce.com', 'woocommerce-admin' ),
description: __(
'Install and manage your extensions directly from your Dashboard',
'wooocommerce-admin'
),
before: <i class="material-icons-outlined">extension</i>,
after: <i class="material-icons-outlined">chevron_right</i>,
onClick: noop,
},
{
title: __( 'Add your first product', 'woocommerce-admin' ),
description: __(
'Add products manually, import from a sheet or migrate from another platform',
'wooocommerce-admin'
),
before: <i class="material-icons-outlined">add_box</i>,
after: <i class="material-icons-outlined">chevron_right</i>,
onClick: noop,
},
{
title: __( 'Personalize your store', 'woocommerce-admin' ),
description: __( 'Create a custom homepage and upload your logo', 'wooocommerce-admin' ),
before: <i class="material-icons-outlined">palette</i>,
after: <i class="material-icons-outlined">chevron_right</i>,
onClick: noop,
},
{
title: __( 'Set up shipping', 'woocommerce-admin' ),
description: __( 'Configure some basic shipping rates to get started', 'wooocommerce-admin' ),
before: <i class="material-icons-outlined">local_shipping</i>,
after: <i class="material-icons-outlined">chevron_right</i>,
onClick: noop,
},
{
title: __( 'Set up tax', 'woocommerce-admin' ),
description: __(
'Choose how to configure tax rates - manually or automatically',
'wooocommerce-admin'
),
before: <i class="material-icons-outlined">account_balance</i>,
after: <i class="material-icons-outlined">chevron_right</i>,
onClick: noop,
},
{
title: __( 'Set up payments', 'woocommerce-admin' ),
description: __(
'Select which payment providers you’d like to use and configure them',
'wooocommerce-admin'
),
before: <i class="material-icons-outlined">payment</i>,
after: <i class="material-icons-outlined">chevron_right</i>,
onClick: noop,
},
];
};
export default class TaskDashboard extends Component {
componentDidMount() {
document.body.classList.add( 'woocommerce-task-dashboard__body' );
}
componentWillUnmount() {
document.body.classList.remove( 'woocommerce-task-dashboard__body' );
}
render() {
return (
<div className="woocommerce-task-list">
<div className="woocommerce-task-list__header">
<H className="woocommerce-task-list__header-title">
{ __( 'Welcome to the WooCommerce Dashboard', 'woocommerce-admin' ) }
</H>
<H className="woocommerce-task-list__header-subtitle">
{ __(
"Here we'll guide you through the remaining tasks " +
'to get your store ready for launch',
<Fragment>
<div className="woocommerce-task-dashboard__container">
<Card
title={ __( 'Set up your store and start selling', 'woocommerce-admin' ) }
description={ __(
'Below you’ll find a list of the most important steps to get your store up and running.',
'woocommerce-admin'
) }
</H>
>
<List items={ getTasks() } />
</Card>
</div>
</div>
</Fragment>
);
}
}

41
plugins/woocommerce-admin/client/dashboard/task-list/style.scss
View File

@ -1,14 +1,39 @@
/** @format */
.woocommerce-task-list__header {
text-align: center;
padding-top: $gap-large;
h2 {
margin: $gap-small 0;
.woocommerce-task-dashboard__body {
.woocommerce-card__description {
color: $muriel-gray-500;
}
.woocommerce-task-list__header-subtitle {
font-weight: 400;
.woocommerce-card__body {
border-top: 1px solid $muriel-gray-50;
padding: 0;
}
.woocommerce-list {
margin: 0;
.woocommerce-list__item-before i {
width: 36px;
height: 36px;
font-size: 36px;
color: $muriel-hot-purple-600;
}
.woocommerce-list__item-after i {
color: $muriel-gray-600;
}
}
.woocommerce-list__item-title {
color: $muriel-gray-800;
}
.woocommerce-list__item-description {
color: $muriel-gray-500;
}
#wpbody-content {
position: relative;
}
}

3
plugins/woocommerce-admin/client/stylesheets/abstracts/_variables.scss
View File

@ -16,6 +16,9 @@ $gap-smallest: 4px;
// Header
$header-height: 56px;
// Sidebar
$sidebar-width: 272px;
// @todo Remove this spacing variable
$spacing: 16px;

8
plugins/woocommerce-admin/includes/class-wc-admin-loader.php
View File

@ -302,6 +302,13 @@ class WC_Admin_Loader {
self::get_file_version( "{$entry}/style.css" )
);
wp_style_add_data( WC_ADMIN_APP, 'rtl', 'replace' );
wp_register_style(
'wc-material-icons',
'https://fonts.googleapis.com/icon?family=Material+Icons+Outlined',
array(),
self::get_file_version( 'https://fonts.googleapis.com/icon?family=Material+Icons' )
);
}
/**
@ -314,6 +321,7 @@ class WC_Admin_Loader {
wp_enqueue_script( WC_ADMIN_APP );
wp_enqueue_style( WC_ADMIN_APP );
wp_enqueue_style( 'wc-material-icons' );
// Use server-side detection to prevent unneccessary stylesheet loading in other browsers.
$user_agent = isset( $_SERVER['HTTP_USER_AGENT'] ) ? $_SERVER['HTTP_USER_AGENT'] : ''; // WPCS: sanitization ok.

3
plugins/woocommerce-admin/packages/components/src/list/style.scss
View File

@ -11,6 +11,7 @@
}
.woocommerce-list__item-description {
margin-top: $gap-smallest;
display: block;
font-size: 14px;
line-height: 20px;
@ -18,7 +19,7 @@
}
.woocommerce-list__item-before {
margin-right: $gap;
margin-right: 20px;
display: flex;
align-items: center;
}

2
plugins/woocommerce-admin/packages/date/test/index.js
View File

@ -77,7 +77,7 @@ describe( 'toMoment', () => {
expect( fn ).toThrow();
} );
it( 'shoud return null on invalid date', () => {
it( 'should return null on invalid date', () => {
const invalidDate = toMoment( 'YYYY', '2018-00-00' );
expect( invalidDate ).toBe( null );
} );