* 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

View File

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

View File

@ -1,15 +1,6 @@
/** @format */ /** @format */
.woocommerce-profile-wizard__body { .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 { .woocommerce-profile-wizard__container a {
color: $muriel-gray-600; color: $muriel-gray-600;
} }
@ -409,23 +400,10 @@
} }
} }
/* Hide wp-admin and WooCommerce elements when viewing the profile wizard */ #wpadminbar {
#adminmenumain,
#wpadminbar,
.woocommerce-layout__header,
.update-nag,
.woocommerce-store-alerts,
.woocommerce-message,
.notice,
.error,
.updated {
display: none; display: none;
} }
#wpcontent {
margin-left: 0;
}
#wpbody { #wpbody {
padding-top: 0; padding-top: 0;
} }

View File

@ -74,3 +74,30 @@
padding-bottom: 10px; 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;
}
}

View File

@ -3,31 +3,102 @@
* External dependencies * External dependencies
*/ */
import { __ } from '@wordpress/i18n'; 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 * Internal depdencies
*/ */
import './style.scss'; 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 youd 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() { render() {
return ( return (
<div className="woocommerce-task-list"> <Fragment>
<div className="woocommerce-task-list__header"> <div className="woocommerce-task-dashboard__container">
<H className="woocommerce-task-list__header-title"> <Card
{ __( 'Welcome to the WooCommerce Dashboard', 'woocommerce-admin' ) } title={ __( 'Set up your store and start selling', 'woocommerce-admin' ) }
</H> description={ __(
<H className="woocommerce-task-list__header-subtitle"> 'Below youll find a list of the most important steps to get your store up and running.',
{ __(
"Here we'll guide you through the remaining tasks " +
'to get your store ready for launch',
'woocommerce-admin' 'woocommerce-admin'
) } ) }
</H> >
<List items={ getTasks() } />
</Card>
</div> </div>
</div> </Fragment>
); );
} }
} }

View File

@ -1,14 +1,39 @@
/** @format */ /** @format */
.woocommerce-task-list__header { .woocommerce-task-dashboard__body {
text-align: center; .woocommerce-card__description {
padding-top: $gap-large; color: $muriel-gray-500;
h2 {
margin: $gap-small 0;
} }
.woocommerce-task-list__header-subtitle { .woocommerce-card__body {
font-weight: 400; 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;
} }
} }

View File

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

View File

@ -302,6 +302,13 @@ class WC_Admin_Loader {
self::get_file_version( "{$entry}/style.css" ) self::get_file_version( "{$entry}/style.css" )
); );
wp_style_add_data( WC_ADMIN_APP, 'rtl', 'replace' ); 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_script( WC_ADMIN_APP );
wp_enqueue_style( 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. // 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. $user_agent = isset( $_SERVER['HTTP_USER_AGENT'] ) ? $_SERVER['HTTP_USER_AGENT'] : ''; // WPCS: sanitization ok.

View File

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

View File

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