Restyle the setup task list to match new designs (https://github.com/woocommerce/woocommerce-admin/pull/5520)
Dev: Add the new `<Badge>` component to @woocommerce/components Dev: Restyle the setup task list header to display incomplete tasks
This commit is contained in:
Sam Seay
GitHub
parent
72b9e7911e
commit
5c50c4cc03
|
|
@ -99,27 +99,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-dashboard-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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Component, cloneElement, Fragment } from '@wordpress/element';
|
||||
import { Component, cloneElement } from '@wordpress/element';
|
||||
import { compose } from '@wordpress/compose';
|
||||
import classNames from 'classnames';
|
||||
import {
|
||||
|
|
@ -15,7 +15,7 @@ import {
|
|||
import { withDispatch, withSelect } from '@wordpress/data';
|
||||
import { Icon, check } from '@wordpress/icons';
|
||||
import { xor } from 'lodash';
|
||||
import { List, EllipsisMenu } from '@woocommerce/components';
|
||||
import { List, EllipsisMenu, Badge } from '@woocommerce/components';
|
||||
import { updateQueryString } from '@woocommerce/navigation';
|
||||
import {
|
||||
PLUGINS_STORE_NAME,
|
||||
|
|
@ -326,46 +326,41 @@ class TaskDashboard extends Component {
|
|||
|
||||
return task;
|
||||
} );
|
||||
const progressBarClass = classNames(
|
||||
'woocommerce-task-card__progress-bar',
|
||||
{
|
||||
completed:
|
||||
listTasks.length === this.getCompletedTaskKeys().length,
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<>
|
||||
<div className="woocommerce-task-dashboard__container">
|
||||
{ currentTask ? (
|
||||
cloneElement( currentTask.container, {
|
||||
query,
|
||||
} )
|
||||
) : (
|
||||
<Fragment>
|
||||
<>
|
||||
<Card
|
||||
size="large"
|
||||
className="woocommerce-task-card woocommerce-dashboard-card"
|
||||
className="woocommerce-task-card woocommerce-homescreen-card"
|
||||
>
|
||||
<progress
|
||||
className={ progressBarClass }
|
||||
max={ listTasks.length }
|
||||
value={ this.getCompletedTaskKeys().length }
|
||||
/>
|
||||
<CardHeader size="medium">
|
||||
<Text variant="title.small">
|
||||
{ __(
|
||||
'Finish setup',
|
||||
'woocommerce-admin'
|
||||
) }
|
||||
</Text>
|
||||
<div className="wooocommerce-task-card__header">
|
||||
<Text variant="title.small">
|
||||
{ __(
|
||||
'Finish setup',
|
||||
'woocommerce-admin'
|
||||
) }
|
||||
</Text>
|
||||
<Badge
|
||||
count={
|
||||
this.getIncompleteTasks().length
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
{ this.renderMenu() }
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<List items={ listTasks } />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Fragment>
|
||||
</>
|
||||
) }
|
||||
</div>
|
||||
{ isCartModalOpen && (
|
||||
|
|
@ -374,7 +369,7 @@ class TaskDashboard extends Component {
|
|||
onClickPurchaseLater={ () => this.toggleCartModal() }
|
||||
/>
|
||||
) }
|
||||
</Fragment>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,14 @@
|
|||
|
||||
.woocommerce-task-dashboard__container {
|
||||
.woocommerce-task-card {
|
||||
.components-card__header.is-size-medium {
|
||||
padding-top: 0;
|
||||
.wooocommerce-task-card__header {
|
||||
display: flex;
|
||||
|
||||
.woocommerce-badge {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-list__item:not(.is-complete) {
|
||||
.woocommerce-task__icon {
|
||||
border: 1px solid $gray-100;
|
||||
|
|
@ -489,48 +494,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.woocommerce-task-dashboard__container .woocommerce-task-card__progress-bar {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
|
||||
// Firefox
|
||||
& {
|
||||
background-color: $gray-100;
|
||||
}
|
||||
|
||||
&::-moz-progress-bar {
|
||||
background-color: $gray-700;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
|
||||
// Chrome
|
||||
&::-webkit-progress-bar {
|
||||
background-color: $gray-100;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background-color: $gray-700;
|
||||
border-top-left-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-task-dashboard__container
|
||||
.woocommerce-task-card__progress-bar.completed {
|
||||
&::-webkit-progress-value {
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-task__caption {
|
||||
color: $gray-700;
|
||||
margin-top: $gap;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,11 @@ import { Card, PanelBody, PanelRow } from '@wordpress/components';
|
|||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { Badge } from '../badge';
|
||||
|
||||
/**
|
||||
* `AccordionPanel` is used to give the panel content an accessible wrapper.
|
||||
*
|
||||
|
|
@ -29,11 +34,7 @@ const AccordionPanel = ( {
|
|||
<span className="woocommerce-accordion-title">
|
||||
{ titleText }
|
||||
</span>
|
||||
{ countUnread !== null && (
|
||||
<span className="woocommerce-accordion-badge">
|
||||
{ countUnread }
|
||||
</span>
|
||||
) }
|
||||
{ countUnread !== null && <Badge count={ countUnread } /> }
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,16 +1,5 @@
|
|||
.woocommerce-accordion-card {
|
||||
.woocommerce-accordion-badge {
|
||||
background-color: $gray-100;
|
||||
border-radius: 20px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 27px;
|
||||
align-items: center;
|
||||
width: 32px;
|
||||
height: 28px;
|
||||
.woocommerce-badge {
|
||||
margin-left: $gap;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import React from '@wordpress/element';
|
||||
|
||||
export const Badge = ( { count, className = '', ...props } ) => {
|
||||
return (
|
||||
<span className={ `woocommerce-badge ${ className }` } { ...props }>
|
||||
{ count }
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { Badge } from '@woocommerce/components';
|
||||
import { Card, CardBody } from '@wordpress/components';
|
||||
|
||||
export const Basic = () => (
|
||||
<Card>
|
||||
<CardBody>
|
||||
<Badge count={ 15 } />
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
|
||||
export default {
|
||||
title: 'WooCommerce Admin/components/Badge',
|
||||
component: Badge,
|
||||
};
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
.woocommerce-badge {
|
||||
background-color: $gray-100;
|
||||
border-radius: 20px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 27px;
|
||||
align-items: center;
|
||||
width: 32px;
|
||||
height: 28px;
|
||||
}
|
||||
|
|
@ -64,3 +64,4 @@ export { default as Timeline } from './timeline';
|
|||
export { default as useFilters } from './higher-order/use-filters';
|
||||
export { default as ViewMoreList } from './view-more-list';
|
||||
export { default as WebPreview } from './web-preview';
|
||||
export { Badge } from './badge';
|
||||
|
|
|
|||
|
|
@ -40,3 +40,4 @@
|
|||
@import 'timeline/style.scss';
|
||||
@import 'view-more-list/style.scss';
|
||||
@import 'web-preview/style.scss';
|
||||
@import 'badge/style.scss';
|
||||
|
|
|
|||
Loading…
Reference in New Issue