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

Merge pull request #32624 from woocommerce/update/minor_tasklist_changes 

Update minor tasklist changes
This commit is contained in:
louwie17 2022-04-14 11:21:17 -03:00 committed by GitHub
parent 26a27650a3 3c69e4f2b0
commit 19e57a4377
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 130 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
plugins/woocommerce-admin/client/task-lists/progress-header/progress-header.scss
View File

@ -49,5 +49,6 @@ $progress-complete-color: #007cba;
.woocommerce-card__menu {
position: absolute;
right: 0;
top: 7px;
}
}

38
plugins/woocommerce-admin/client/task-lists/progress-header/progress-header.tsx
View File

@ -76,7 +76,7 @@ export const ProgressHeader: React.FC< ProgressHeaderProps > = ( {
return __( 'You are almost there', 'woocommerce' );
}, [ completedCount, hasVisitedTasks ] );
if ( loading || completedCount === tasksCount ) {
if ( loading ) {
return null;
}
@ -90,22 +90,26 @@ export const ProgressHeader: React.FC< ProgressHeaderProps > = ( {
<h1 className="woocommerce-task-progress-header__title">
{ progressTitle }
</h1>
<p>
{ sprintf(
/* translators: 1: completed tasks, 2: total tasks */
__(
'Follow these steps to start selling quickly. %1$d out of %2$d complete.',
'woocommerce'
),
completedCount,
tasksCount
) }
</p>
<progress
className="woocommerce-task-progress-header__progress-bar"
max={ tasksCount }
value={ completedCount || 0 }
/>
{ completedCount !== tasksCount ? (
<>
<p>
{ sprintf(
/* translators: 1: completed tasks, 2: total tasks */
__(
'Follow these steps to start selling quickly. %1$d out of %2$d complete.',
'woocommerce'
),
completedCount,
tasksCount
) }
</p>
<progress
className="woocommerce-task-progress-header__progress-bar"
max={ tasksCount }
value={ completedCount || 0 }
/>
</>
) : null }
</div>
</div>
);

3
plugins/woocommerce-admin/client/tasks/tasks.tsx
View File

@ -23,6 +23,7 @@ import { SectionedTaskList } from '../two-column-tasks/sectioned-task-list';
import TwoColumnTaskListPlaceholder from '../two-column-tasks/placeholder';
import '../two-column-tasks/style.scss';
import { getAdminSetting } from '~/utils/admin-settings';
import { SectionedTaskListPlaceholder } from '~/two-column-tasks/sectioned-task-list-placeholder';
export type TasksProps = {
query: { task?: string };
@ -45,6 +46,8 @@ function getTaskListPlaceholderComponent(
switch ( taskListId ) {
case 'setup_experiment_1':
return TwoColumnTaskListPlaceholder;
case 'setup_experiment_2':
return SectionedTaskListPlaceholder;
default:
return TasksPlaceholder;
}

75
plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list-placeholder.tsx Normal file
View File

@ -0,0 +1,75 @@
/**
* Internal dependencies
*/
import './style.scss';
type TasksPlaceholderProps = {
numTasks?: number;
query: {
task?: string;
};
};
const SectionedTaskListPlaceholder: React.FC< TasksPlaceholderProps > = (
props
) => {
const { numTasks = 3 } = props;
return (
<div
className={
'woocommerce-task-dashboard__container woocommerce-sectioned-task-list'
}
>
<div className="components-card is-size-large woocommerce-task-card woocommerce-homescreen-card is-loading ">
<div className="components-card__header is-size-medium">
<div className="wooocommerce-task-card__header">
<div className="is-placeholder"> </div>
</div>
</div>
<ul className="woocommerce-experimental-list">
{ Array.from( new Array( numTasks ) ).map( ( v, i ) => (
<li
tabIndex={ i }
key={ i }
className="woocommerce-experimental-list__item woocommerce-task-list__item"
>
<div className="woocommerce-task-list__item-before">
<div className="is-placeholder"></div>
</div>
<div className="woocommerce-task-list__item-text">
<div className="components-truncate components-text is-placeholder"></div>
</div>
</li>
) ) }
</ul>
</div>
<div className="is-loading components-panel__body woocommerce-task-card">
<div className="components-panel__body-title">
<div className="components-button components-panel__body-toggle">
<div className="woocommerce-task-list__item-text">
<div className="components-truncate components-text is-placeholder"></div>
</div>
<div className="woocommerce-task-list__item-after">
<div className="is-placeholder"></div>
</div>
</div>
</div>
</div>
<div className="is-loading components-panel__body woocommerce-task-card">
<div className="components-panel__body-title">
<div className="components-button components-panel__body-toggle">
<div className="woocommerce-task-list__item-text">
<div className="components-truncate components-text is-placeholder"></div>
</div>
<div className="woocommerce-task-list__item-after">
<div className="is-placeholder"></div>
</div>
</div>
</div>
</div>
</div>
);
};
export { SectionedTaskListPlaceholder };

31
plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.scss
View File

@ -63,7 +63,9 @@
pointer-events: none;
}
&:not(.is-complete) .woocommerce-task-list__item-before .woocommerce-task__icon {
&:not(.is-complete)
.woocommerce-task-list__item-before
.woocommerce-task__icon {
border-color: $gray-300;
}
}
@ -89,4 +91,31 @@
}
}
}
> .is-loading {
border: none;
margin-bottom: 8px;
.woocommerce-task-list__item .woocommerce-task-list__item-before {
padding: 0 0 0 $gap-large;
}
&.components-panel__body .components-panel__body-title .woocommerce-task-list__item-text {
width: 50%;
.is-placeholder {
width: 100%;
}
}
&.components-panel__body .woocommerce-task-list__item-after {
margin-left: $gap;
.is-placeholder {
height: 24px;
width: 24px;
border-radius: 50%;
}
}
}
}