Skip to content

Commit 66c8ab0

Browse files
ilicfilipilicfilip
authored
Merge pull request #273 from ProgressPlanner/filip/implement-pro-84
Implement new Onboarding / Upgrade flow
2 parents 979e46f + a3e5b6c commit 66c8ab0

30 files changed

Lines changed: 759 additions & 41 deletions

‎assets/css/admin.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -344,6 +344,20 @@ button.prpl-info-icon {
344344
}
345345
}
346346

347+
/*------------------------------------*\
348+
Input fields.
349+
\*------------------------------------*/
350+
351+
.prpl-wrap input[type="text"],
352+
.prpl-wrap input[type="email"],
353+
.prpl-wrap input[type="number"],
354+
.prpl-wrap input[type="url"],
355+
.prpl-wrap input[type="tel"],
356+
.prpl-wrap input[type="search"] {
357+
height: 40px;
358+
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.25);
359+
}
360+
347361
/*------------------------------------*\
348362
Popovers generic styles.
349363
\*------------------------------------*/

‎assets/css/upgrade-tasks.css‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
.prpl-onboarding-tasks-title,
2+
.prpl-onboarding-tasks-description {
3+
display: block;
4+
margin-bottom: 1rem;
5+
}
6+
7+
#prpl-onboarding-tasks {
8+
border: 1px solid var(--prpl-color-gray-2);
9+
border-radius: var(--prpl-border-radius);
10+
padding: var(--prpl-padding);
11+
min-width: 0;
12+
min-height: 0;
13+
margin-bottom: var(--prpl-gap);
14+
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.07), -2px 0 6px rgba(0, 0, 0, 0.07);
15+
16+
.prpl-onboarding-tasks-list {
17+
margin-top: 1rem;
18+
margin-left: 0;
19+
padding-left: 0;
20+
list-style: none;
21+
}
22+
23+
.prpl-onboarding-task {
24+
margin: 0;
25+
padding: 0.5rem 0.5rem;
26+
display: flex;
27+
justify-content: space-between;
28+
align-items: center;
29+
position: relative;
30+
31+
&:nth-child(2n+1) {
32+
background-color: #f9fafb;
33+
}
34+
35+
h3 {
36+
font-size: 1rem;
37+
margin: 0;
38+
font-weight: 500;
39+
}
40+
}
41+
42+
43+
.prpl-onboarding-task-status {
44+
display: block;
45+
width: 1.5rem;
46+
height: 1.5rem;
47+
}
48+
49+
.prpl-suggested-task-points {
50+
font-size: var(--prpl-font-size-xs);
51+
font-weight: 700;
52+
color: var(--prpl-color-headings);
53+
background-color: var(--prpl-color-400-orange);
54+
width: 1.5rem;
55+
height: 1.5rem;
56+
border-radius: 50%;
57+
display: flex;
58+
align-items: center;
59+
justify-content: center;
60+
}
61+
62+
.prpl-suggested-task-loader {
63+
width: 25px;
64+
aspect-ratio: 1;
65+
66+
/* display: grid; */
67+
border-radius: 50%;
68+
background:
69+
linear-gradient(0deg, rgb(250 163 16/50%) 30%, #0000 0 70%, rgb(250 163 16/100%) 0) 50%/8% 100%,
70+
linear-gradient(90deg, rgb(250 163 16/25%) 30%, #0000 0 70%, rgb(250 163 16/75%) 0) 50%/100% 8%;
71+
background-repeat: no-repeat;
72+
animation: loaderAnimation 1s infinite steps(12);
73+
74+
&::before,
75+
&::after {
76+
content: "";
77+
grid-area: 1/1;
78+
border-radius: 50%;
79+
background: inherit;
80+
opacity: 0.915;
81+
transform: rotate(30deg);
82+
}
83+
84+
&::after {
85+
opacity: 0.83;
86+
transform: rotate(60deg);
87+
}
88+
}
89+
90+
.icon-exclamation-circle {
91+
92+
path {
93+
fill: #6b7280;
94+
}
95+
}
96+
97+
/* Hide the points loader and icons. */
98+
.prpl-suggested-task-loader,
99+
.icon-check-circle,
100+
.icon-exclamation-circle {
101+
display: none;
102+
}
103+
104+
/* Loading state. */
105+
.prpl-onboarding-task-loading {
106+
107+
.prpl-suggested-task-loader {
108+
display: grid;
109+
}
110+
111+
.prpl-suggested-task-points {
112+
display: none;
113+
}
114+
}
115+
116+
/* Completed state. */
117+
.prpl-onboarding-task-completed {
118+
119+
.icon-check-circle {
120+
display: inline;
121+
}
122+
123+
.prpl-suggested-task-points {
124+
display: none;
125+
}
126+
}
127+
128+
/* Not completed state. */
129+
.prpl-onboarding-task-not-completed {
130+
131+
.icon-exclamation-circle {
132+
display: inline;
133+
}
134+
135+
.prpl-suggested-task-points {
136+
display: none;
137+
}
138+
}
139+
}
140+
141+
.prpl-onboarding-tasks-footer {
142+
display: flex;
143+
justify-content: space-between;
144+
align-items: flex-start;
145+
gap: 2rem;
146+
147+
.prpl-onboarding-tasks-montly-badge {
148+
display: flex;
149+
align-items: center;
150+
gap: 0.5rem;
151+
}
152+
153+
.prpl-onboarding-tasks-montly-badge-image {
154+
display: inline-block;
155+
width: 100px;
156+
}
157+
158+
.prpl-onboarding-tasks-total-points {
159+
font-size: var(--prpl-font-size-3xl);
160+
font-weight: 600;
161+
}
162+
163+
}
164+
165+
@keyframes loaderAnimation {
166+
167+
100% {
168+
transform: rotate(1turn);
169+
}
170+
}
171+
172+
/* Welcome screen. */
173+
.prpl-welcome {
174+
175+
/* Hide the onboarding tasks by default. */
176+
#prpl-onboarding-tasks {
177+
display: none;
178+
}
179+
}
180+
181+
/* Onboarding tasks popover (when plugin is updated). */
182+
#prpl-popover-upgrade-tasks.prpl-popover {
183+
max-width: 40vw;
184+
padding: calc(var(--prpl-padding) * 1.5); /* So popover's X button doesn't overlap the tasks. */
185+
186+
#prpl-onboarding-tasks {
187+
display: block !important;
188+
margin-bottom: 0;
189+
}
190+
}
191+

‎assets/css/welcome.css‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,13 @@
2424
}
2525

2626
.welcome-header {
27-
background: var(--prpl-color-accent-orange);
27+
background: var(--prpl-color-400-orange);
2828
display: flex;
2929
justify-content: space-between;
3030
align-items: center;
31+
border-top-left-radius: var(--prpl-border-radius);
32+
border-top-right-radius: var(--prpl-border-radius);
33+
overflow: hidden;
3134

3235
h1 {
3336
font-size: var(--prpl-font-size-3xl);
@@ -36,8 +39,8 @@
3639
}
3740

3841
.welcome-header-icon {
39-
background: var(--prpl-background-orange);
40-
background: linear-gradient(105deg, var(--prpl-color-accent-orange) 25%, var(--prpl-background-orange) 25%);
42+
background: var(--prpl-color-400-orange);
43+
background: linear-gradient(105deg, var(--prpl-color-400-orange) 25%, var(--prpl-background-orange) 25%);
4144
padding: var(--prpl-padding);
4245
padding-left: 100px;
4346
padding-right: calc(var(--prpl-gap) * 1.5);
@@ -48,13 +51,25 @@
4851
}
4952
}
5053

54+
.prpl-form-notice-title {
55+
font-size: var(--prpl-font-size-lg);
56+
}
57+
5158
ul {
5259
list-style: disc;
5360
margin-left: 1rem;
5461
}
5562

5663
.prpl-onboard-form-radio-select {
5764
margin-top: 0.75rem;
65+
66+
label {
67+
margin-top: 0.5rem;
68+
69+
&:first-child {
70+
margin-top: 0;
71+
}
72+
}
5873
}
5974

6075
.prpl-disabled {

‎assets/js/onboard.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
/* global progressPlanner, progressPlannerAjaxRequest, progressPlannerTriggerScan */
1+
/* global progressPlanner, progressPlannerAjaxRequest, progressPlannerTriggerScan, prplOnboardTasks */
22
/*
33
* Onboard
44
*
55
* A script to handle the onboarding process.
66
*
7-
* Dependencies: progress-planner-ajax-request, progress-planner-scan-posts
7+
* Dependencies: progress-planner-ajax-request, progress-planner-scan-posts, progress-planner-upgrade-tasks
88
*/
99

1010
/**
@@ -51,6 +51,9 @@ const progressPlannerAjaxAPIRequest = ( data ) => {
5151

5252
// Start scanning posts.
5353
progressPlannerTriggerScan();
54+
55+
// Start the tasks.
56+
prplOnboardTasks();
5457
},
5558
failAction: ( response ) => {
5659
// eslint-disable-next-line no-console

‎assets/js/scan-posts.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
/* global progressPlanner, progressPlannerAjaxRequest */
1+
/* global progressPlanner, progressPlannerAjaxRequest, prplOnboardRedirect */
22
/*
33
* Scan Posts
44
*
55
* A script to scan posts for the Progress Planner.
66
*
7-
* Dependencies: progress-planner-ajax-request
7+
* Dependencies: progress-planner-ajax-request, progress-planner-upgrade-tasks
88
*/
99

1010
// eslint-disable-next-line no-unused-vars
@@ -35,15 +35,18 @@ const progressPlannerTriggerScan = () => {
3535

3636
// Refresh the page when scan has finished.
3737
if ( response.data.progress >= 100 ) {
38-
document.getElementById(
38+
const scanProgressElement = document.getElementById(
3939
'progress-planner-scan-progress'
40-
).style.display = 'none';
40+
);
4141

42-
window.location.href =
43-
window.location.href
44-
.replace( '&content-scan-finished=true', '' )
45-
.replace( '&content-scan', '' ) +
46-
'&content-scan-finished=true';
42+
scanProgressElement.style.display = 'none';
43+
scanProgressElement.setAttribute(
44+
'data-onboarding-finished',
45+
'true'
46+
);
47+
48+
// Redirect if scanning is finished.
49+
prplOnboardRedirect( 'scanPosts' );
4750

4851
return;
4952
}

‎assets/js/tour.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,10 +125,17 @@ function prplStartTour() {
125125
window.location.href
126126
.replace( '&content-scan-finished=true', '' )
127127
.replace( 'content-scan-finished=true', '' )
128+
.replace( '&delay-tour=true', '' )
129+
.replace( 'delay-tour=true', '' )
128130
);
129131
}
130132

131133
// Start the tour if the URL contains the query parameter.
132134
if ( window.location.href.includes( 'content-scan-finished=true' ) ) {
133-
prplStartTour();
135+
// If there are pending celebration tasks, delay the tour until celebration is done.
136+
const delay = window.location.href.includes( 'delay-tour=true' ) ? 5000 : 0;
137+
138+
setTimeout( () => {
139+
prplStartTour();
140+
}, delay );
134141
}

0 commit comments

Comments
 (0)