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

Stats Overview: Cleanup styles (https://github.com/woocommerce/woocommerce-admin/pull/4625)

This commit is contained in:
Paul Sealock 2020-06-19 11:44:00 +12:00 committed by GitHub
parent 8a22576a95
commit b5214e95d3
9 changed files with 147 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
plugins/woocommerce-admin/client/homescreen/stats-overview/index.js
View File

@ -3,14 +3,20 @@
*/
import { __ } from '@wordpress/i18n';
import { Fragment } from '@wordpress/element';
import { TabPanel } from '@wordpress/components';
import {
TabPanel,
Card,
CardHeader,
CardBody,
CardFooter,
__experimentalText as Text,
} from '@wordpress/components';
import { get, xor } from 'lodash';
/**
* WooCommerce dependencies
*/
import {
Card,
EllipsisMenu,
MenuItem,
MenuTitle,
@ -38,7 +44,11 @@ const stats = performanceIndicators.filter( ( indicator ) => {
export const StatsOverview = () => {
const { updateUserPreferences, ...userPrefs } = useUserPreferences();
const hiddenStats = get( userPrefs, [ 'homepage_stats', 'hiddenStats' ], DEFAULT_HIDDEN_STATS );
const hiddenStats = get(
userPrefs,
[ 'homepage_stats', 'hiddenStats' ],
DEFAULT_HIDDEN_STATS
);
const toggleStat = ( stat ) => {
const nextHiddenStats = xor( hiddenStats, [ stat ] );
@ -57,9 +67,13 @@ export const StatsOverview = () => {
return (
<Card
className="woocommerce-analytics__card woocommerce-stats-overview"
title={ __( 'Stats overview', 'woocommerce-admin' ) }
menu={
size="large"
className="woocommerce-stats-overview woocommerce-homescreen-card"
>
<CardHeader size="medium">
<Text variant="title.small">
{ __( 'Stats overview', 'woocommerce-admin' ) }
</Text>
<EllipsisMenu
label={ __(
'Choose which values to display',
@ -92,44 +106,45 @@ export const StatsOverview = () => {
</Fragment>
) }
/>
}
>
<TabPanel
className="woocommerce-stats-overview__tabs"
onSelect={ ( period ) => {
recordEvent( 'statsoverview_date_picker_update', {
period,
} );
} }
tabs={ [
{
title: __( 'Today', 'woocommerce-admin' ),
name: 'today',
},
{
title: __( 'Week to date', 'woocommerce-admin' ),
name: 'week',
},
{
title: __( 'Month to date', 'woocommerce-admin' ),
name: 'month',
},
] }
>
{ ( tab ) => (
<Fragment>
<InstallJetpackCta />
<StatsList
query={ {
period: tab.name,
compare: 'previous_period',
} }
stats={ activeStats }
/>
</Fragment>
) }
</TabPanel>
<div className="woocommerce-stats-overview__footer">
</CardHeader>
<CardBody>
<TabPanel
className="woocommerce-stats-overview__tabs"
onSelect={ ( period ) => {
recordEvent( 'statsoverview_date_picker_update', {
period,
} );
} }
tabs={ [
{
title: __( 'Today', 'woocommerce-admin' ),
name: 'today',
},
{
title: __( 'Week to date', 'woocommerce-admin' ),
name: 'week',
},
{
title: __( 'Month to date', 'woocommerce-admin' ),
name: 'month',
},
] }
>
{ ( tab ) => (
<Fragment>
<InstallJetpackCta />
<StatsList
query={ {
period: tab.name,
compare: 'previous_period',
} }
stats={ activeStats }
/>
</Fragment>
) }
</TabPanel>
</CardBody>
<CardFooter>
<Link
className="woocommerce-stats-overview__more-btn"
href={ getNewPath( {}, '/analytics/overview' ) }
@ -142,7 +157,7 @@ export const StatsOverview = () => {
>
{ __( 'View detailed stats' ) }
</Link>
</div>
</CardFooter>
</Card>
);
};

29
plugins/woocommerce-admin/client/homescreen/stats-overview/install-jetpack-cta.js
View File

@ -97,22 +97,27 @@ function InstallJetpackCta( {
return (
<article className="woocommerce-stats-overview__install-jetpack-promo">
<H>
{ __( 'Get traffic stats with Jetpack', 'woocommerce-admin' ) }
</H>
<p>
{ __(
'Keep an eye on your views and visitors metrics with ' +
'Jetpack. Requires Jetpack plugin and a WordPress.com ' +
'account.',
'woocommerce-admin'
) }
</p>
<div className="woocommerce-stats-overview__install-jetpack-promo__content">
<H>
{ __(
'Get traffic stats with Jetpack',
'woocommerce-admin'
) }
</H>
<p>
{ __(
'Keep an eye on your views and visitors metrics with ' +
'Jetpack. Requires Jetpack plugin and a WordPress.com ' +
'account.',
'woocommerce-admin'
) }
</p>
</div>
<footer>
<Button isSecondary onClick={ install } isBusy={ isInstalling }>
{ getInstallJetpackText() }
</Button>
<Button onClick={ dismiss } isBusy={ isInstalling }>
<Button isTertiary onClick={ dismiss } isBusy={ isInstalling }>
{ __( 'No thanks', 'woocommerce-admin' ) }
</Button>
</footer>

37
plugins/woocommerce-admin/client/homescreen/stats-overview/style.scss
View File

@ -12,10 +12,6 @@ $promo-actions-border-bottom: $light-gray-tertiary;
}
}
.woocommerce-stats-overview__footer {
border-top: 1px solid $outer-border;
}
.woocommerce-stats-overview__more-btn {
display: inline-block;
padding: $gap;
@ -29,6 +25,8 @@ $promo-actions-border-bottom: $light-gray-tertiary;
.components-button {
width: 33.33%;
padding-right: $gap-large;
padding-left: $gap-large;
}
}
}
@ -67,22 +65,37 @@ $promo-actions-border-bottom: $light-gray-tertiary;
}
article.woocommerce-stats-overview__install-jetpack-promo {
h3 {
margin: $gap $gap-large $gap-smaller;
.woocommerce-stats-overview__install-jetpack-promo__content {
padding: $gap $gap-large;
}
h2 {
color: $dark-gray-primary;
@include font-size( 16 );
font-style: normal;
line-height: 1.5;
font-weight: normal;
margin: $gap-smaller 0;
}
p {
margin: 0 $gap-large $gap;
color: $medium-gray-text;
font-style: normal;
font-weight: normal;
@include font-size( 14 );
line-height: 20px;
margin: $gap-smaller 0;
}
footer {
padding: $gap $gap-large;
border-top: 1px solid $promo-actions-border-top;
border-bottom: 1px solid $promo-actions-border-bottom;
.components-button {
margin: $gap $gap-smallest;
}
button {
margin-left: $gap-smaller;
.woocommerce-layout & button.components-button.is-secondary {
margin-left: $gap-large;
&:first-child {
margin-left: 0;
}
}
}
}

44
plugins/woocommerce-admin/client/homescreen/style.scss
View File

@ -33,26 +33,6 @@
margin-right: -16px;
flex-direction: column-reverse;
}
.components-card {
.components-card__header.is-size-large {
display: grid;
// to maintain consistent height with or without an ellipsis menu
min-height: 63px;
// to match alignment of `Card` from `@woocommerce/components`
padding: $gap-small $gap;
// IE doesn't support `align-items` on grid container
& > * {
align-self: center;
}
h2 {
// to match height of `Card` from `@woocommerce/components`
margin: 0;
}
}
}
}
.woocommerce-homescreen-column {
width: 50%;
@ -70,3 +50,27 @@
height: 225px;
background-color: #6495ed;
}
.woocommerce-homescreen-card {
.components-card__header.is-size-large,
.components-card__header.is-size-medium {
min-height: 63px;
min-height: unset;
display: grid;
grid-template-columns: auto 24px;
// IE doesn't support `align-items` on grid container
& > * {
align-self: center;
}
}
.components-card__body.is-size-large {
padding: 0;
}
.components-card__footer.is-size-large {
padding: 0 $gap-smaller;
}
}

15
plugins/woocommerce-admin/client/quick-links/index.js
View File

@ -2,7 +2,12 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Card, CardBody, CardHeader } from '@wordpress/components';
import {
Card,
CardBody,
CardHeader,
__experimentalText as Text,
} from '@wordpress/components';
import {
Icon,
megaphone,
@ -22,7 +27,7 @@ import { partial } from 'lodash';
* WooCommerce dependencies
*/
import { getSetting } from '@woocommerce/wc-admin-settings';
import { H, List } from '@woocommerce/components';
import { List } from '@woocommerce/components';
/**
* Internal dependencies
@ -167,8 +172,10 @@ const QuickLinks = ( props ) => {
return (
<Card size="large" className="woocommerce-quick-links">
<CardHeader>
<H>{ __( 'Store management', 'woocommerce-admin' ) }</H>
<CardHeader size="medium">
<Text variant="title.small">
{ __( 'Store management', 'woocommerce-admin' ) }
</Text>
</CardHeader>
<CardBody>
<List

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

@ -12,6 +12,7 @@ import {
CardBody,
CardHeader,
Modal,
__experimentalText as Text,
} from '@wordpress/components';
import { withDispatch } from '@wordpress/data';
import { Icon, check, chevronRight } from '@wordpress/icons';
@ -19,7 +20,7 @@ import { Icon, check, chevronRight } from '@wordpress/icons';
/**
* WooCommerce dependencies
*/
import { H, List, EllipsisMenu } from '@woocommerce/components';
import { List, EllipsisMenu } from '@woocommerce/components';
import { updateQueryString } from '@woocommerce/navigation';
import {
PLUGINS_STORE_NAME,
@ -348,20 +349,20 @@ class TaskDashboard extends Component {
<Fragment>
<Card
size="large"
className="woocommerce-task-card"
className="woocommerce-task-card woocommerce-homescreen-card"
>
<progress
className={ progressBarClass }
max={ listTasks.length }
value={ numCompleteTasks }
/>
<CardHeader>
<H>
<CardHeader size="medium">
<Text variant="title.small">
{ __(
'Finish setup',
'woocommerce-admin'
) }
</H>
</Text>
{ this.renderMenu() }
</CardHeader>
<CardBody>

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

@ -5,17 +5,9 @@
.woocommerce-task-dashboard__container {
.woocommerce-task-card {
.components-card__header.is-size-large {
min-height: unset;
.components-card__header.is-size-medium {
padding-top: 0;
display: grid;
grid-template-columns: auto 24px;
}
.components-card__body.is-size-large {
padding: 0;
}
.woocommerce-list__item:not(.is-complete) {
.woocommerce-task__icon {
border: 1px solid $core-grey-light-500;

4
plugins/woocommerce-admin/packages/components/src/ellipsis-menu/index.js
View File

@ -4,7 +4,7 @@
import { Component } from '@wordpress/element';
import classnames from 'classnames';
import { Button, Dropdown, NavigableMenu } from '@wordpress/components';
import { Icon, moreVertical } from '@wordpress/icons';
import { Icon, more } from '@wordpress/icons';
import PropTypes from 'prop-types';
/**
@ -33,7 +33,7 @@ class EllipsisMenu extends Component {
title={ label }
aria-expanded={ isOpen }
>
<Icon icon={ moreVertical } />
<Icon icon={ more } />
</Button>
);
};

2
plugins/woocommerce-admin/packages/components/src/summary/style.scss
View File

@ -260,7 +260,7 @@ $border: $light-gray-tertiary;
display: flex;
flex-direction: column;
height: 100%;
padding: $spacing;
padding: $gap-large;
background-color: $core-grey-light-100;
border-bottom: 1px solid $border;
border-right: 1px solid $border;