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 #32507 from woocommerce/fix/32128_experiment_1_ui_issues 

Fix experiment 1 UI issues
This commit is contained in:
louwie17 2022-04-12 11:27:30 -03:00 committed by GitHub
parent bb9bc378cf 8eb03eba46
commit c10a9cfd63
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
plugins/woocommerce-admin/client/homescreen/layout.js
View File

@ -64,6 +64,8 @@ export const Layout = ( {
query, query,
taskListComplete, taskListComplete,
hasTaskList, hasTaskList,
showingProgressHeader,
isLoadingTaskLists,
shouldShowWelcomeModal, shouldShowWelcomeModal,
shouldShowWelcomeFromCalypsoModal, shouldShowWelcomeFromCalypsoModal,
isTaskListHidden, isTaskListHidden,
@ -141,7 +143,9 @@ export const Layout = ( {
<Column shouldStick={ shouldStickColumns }> <Column shouldStick={ shouldStickColumns }>
{ ! isLoadingExperimentAssignment && { ! isLoadingExperimentAssignment &&
! isLoadingTwoColExperimentAssignment && ! isLoadingTwoColExperimentAssignment &&
! isRunningTaskListExperiment && ( ! isRunningTaskListExperiment &&
! isLoadingTaskLists &&
! showingProgressHeader && (
<ActivityHeader <ActivityHeader
className="your-store-today" className="your-store-today"
title={ __( title={ __(
@ -286,7 +290,13 @@ export default compose(
const { getOption, hasFinishedResolution } = select( const { getOption, hasFinishedResolution } = select(
OPTIONS_STORE_NAME OPTIONS_STORE_NAME
); );
const { getTaskList } = select( ONBOARDING_STORE_NAME ); const {
getTaskList,
getTaskLists,
hasFinishedResolution: taskListFinishResolution,
} = select( ONBOARDING_STORE_NAME );
const taskLists = getTaskLists();
const isLoadingTaskLists = ! taskListFinishResolution( 'getTaskLists' );
const welcomeFromCalypsoModalDismissed = const welcomeFromCalypsoModalDismissed =
getOption( WELCOME_FROM_CALYPSO_MODAL_DISMISSED_OPTION_NAME ) !== getOption( WELCOME_FROM_CALYPSO_MODAL_DISMISSED_OPTION_NAME ) !==
@ -336,8 +346,12 @@ export default compose(
isBatchUpdating: isNotesRequesting( 'batchUpdateNotes' ), isBatchUpdating: isNotesRequesting( 'batchUpdateNotes' ),
shouldShowWelcomeModal, shouldShowWelcomeModal,
shouldShowWelcomeFromCalypsoModal, shouldShowWelcomeFromCalypsoModal,
isLoadingTaskLists,
isTaskListHidden: getTaskList( 'setup' )?.isHidden, isTaskListHidden: getTaskList( 'setup' )?.isHidden,
hasTaskList: getAdminSetting( 'visibleTaskListIds', [] ).length > 0, hasTaskList: getAdminSetting( 'visibleTaskListIds', [] ).length > 0,
showingProgressHeader: !! taskLists.find(
( list ) => list.isVisible && list.displayProgressHeader
),
taskListComplete: getTaskList( 'setup' )?.isComplete, taskListComplete: getTaskList( 'setup' )?.isComplete,
installTimestamp, installTimestamp,
installTimestampHasResolved, installTimestampHasResolved,

21
plugins/woocommerce-admin/client/two-column-tasks/style.scss
View File

@ -19,10 +19,10 @@
flex: 1; flex: 1;
} }
.woocommerce-ellipsis-menu.setup { .woocommerce-ellipsis-menu {
position: absolute; position: absolute;
top: 20px; top: $gap;
right: 16px; right: $gap-large;
} }
.woocommerce-task-card.is-loading { .woocommerce-task-card.is-loading {
@ -130,11 +130,11 @@
} }
.woocommerce-task-header__contents { .woocommerce-task-header__contents {
max-width: 380px; max-width: calc(60% - 2%);
} }
.svg-background { .svg-background {
right: 0.5%; right: 2%;
width: 40%; width: 40%;
} }
} }
@ -143,6 +143,13 @@
@include single-column; @include single-column;
} }
&.two-columns .svg-background {
top: 50%;
bottom: 50%;
margin-top: auto;
margin-bottom: auto;
}
ul { ul {
display: flex; display: flex;
li { li {
@ -229,10 +236,6 @@
position: absolute; position: absolute;
z-index: 0; z-index: 0;
right: 6%; right: 6%;
top: 50%;
bottom: 50%;
margin-top: auto;
margin-bottom: auto;
.admin-theme-color { .admin-theme-color {
fill: var(--wp-admin-theme-color); fill: var(--wp-admin-theme-color);