Skip to content

Commit db88c71

Browse files
pfefferleobenlandmatticbot
authored
Improve Welcome page with the focus on better onboarding. (#1625)
Co-authored-by: Konstantin Obenland <[email protected]> Co-authored-by: Automattic Bot <[email protected]>
1 parent c86c5fb commit db88c71

File tree

10 files changed

+689
-181
lines changed

10 files changed

+689
-181
lines changed

‎.github/changelog/1625-from-description‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
Significance: minor
2+
Type: added
3+
4+
A guided onboarding flow after plugin activation to help users make key setup decisions and understand Fediverse concepts.

‎assets/css/activitypub-admin.css‎

Lines changed: 0 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -231,47 +231,6 @@ input.blog-user-identifier {
231231
margin-block: 0;
232232
}
233233

234-
.activitypub-settings .welcome-tab-close {
235-
position: absolute;
236-
top: 0px;
237-
right: 0px;
238-
font-size: 13px;
239-
padding: 0 5px 0 20px;
240-
text-decoration: none;
241-
z-index: 1;
242-
}
243-
244-
.activitypub-settings .welcome-tab-close::before {
245-
position: absolute;
246-
top: 0px;
247-
left: 0;
248-
transition: all .1s ease-in-out;
249-
font: normal 16px/20px dashicons;
250-
content: '\f335';
251-
font-size: 20px;
252-
}
253-
254-
.activitypub-notice .count {
255-
display: inline-block;
256-
vertical-align: top;
257-
box-sizing: border-box;
258-
margin: 1px 0 -1px 2px;
259-
padding: 0 5px;
260-
min-width: 18px;
261-
height: 18px;
262-
border-radius: 9px;
263-
background-color: #dba617;
264-
color: #fff;
265-
font-size: 11px;
266-
line-height: 1.6;
267-
text-align: center;
268-
z-index: 26;
269-
}
270-
271-
.activitypub-notice .dashicons-warning {
272-
color: #dba617;
273-
}
274-
275234
.extra-fields-nav a + a {
276235
margin-left: 8px;
277236
}

‎assets/css/activitypub-welcome.css‎

Lines changed: 307 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,307 @@
1+
/* ActivityPub Welcome Page Styles */
2+
3+
.activitypub-welcome-container {
4+
max-width: 800px;
5+
margin: 40px auto;
6+
background-color: #fff;
7+
border-radius: 8px;
8+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
9+
padding: 30px;
10+
}
11+
12+
/* Header Styles */
13+
.activitypub-welcome-header {
14+
text-align: center;
15+
margin-bottom: 30px;
16+
position: relative;
17+
}
18+
19+
/* Progress Circle */
20+
.activitypub-progress-circle {
21+
position: relative;
22+
width: 120px;
23+
height: 120px;
24+
margin: 0 auto 20px;
25+
}
26+
27+
.activitypub-progress-circle-content {
28+
position: absolute;
29+
top: 0;
30+
left: 0;
31+
width: 100%;
32+
height: 100%;
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
font-size: 16px;
37+
font-weight: 500;
38+
color: #1e1e1e;
39+
z-index: 2;
40+
}
41+
42+
.activitypub-progress-ring {
43+
transform: rotate(-90deg);
44+
overflow: visible;
45+
}
46+
47+
.activitypub-progress-ring-bg {
48+
fill: none;
49+
stroke: #f0f0f1;
50+
stroke-width: 6;
51+
}
52+
53+
.activitypub-progress-ring-circle {
54+
fill: none;
55+
stroke: #2271b1;
56+
stroke-width: 6;
57+
stroke-linecap: round;
58+
transition: stroke-dashoffset 0.5s ease;
59+
}
60+
61+
.activitypub-welcome-title {
62+
font-size: 28px;
63+
margin: 20px 0 10px;
64+
font-weight: 400;
65+
}
66+
67+
.activitypub-welcome-subtitle {
68+
font-size: 16px;
69+
color: #646970;
70+
margin: 0 0 20px;
71+
font-weight: normal;
72+
}
73+
74+
/* Steps Styles */
75+
.activitypub-onboarding-step {
76+
display: flex;
77+
align-items: center;
78+
padding: 20px;
79+
border-radius: 4px;
80+
background-color: #f6f7f7;
81+
margin-bottom: 15px;
82+
transition: background-color 0.2s ease;
83+
}
84+
85+
.activitypub-onboarding-step:last-child {
86+
margin-bottom: 0;
87+
}
88+
89+
.activitypub-onboarding-step:hover {
90+
background-color: #f0f0f1;
91+
}
92+
93+
.activitypub-step-completed {
94+
background-color: #f0f7ee;
95+
}
96+
97+
.activitypub-step-completed:hover {
98+
background-color: #e2f1dc;
99+
}
100+
101+
.activitypub-step-completed .step-text h3 {
102+
margin: 0;
103+
}
104+
.activitypub-step-completed .step-text h3::after {
105+
content: ".";
106+
}
107+
108+
.activitypub-step-completed .step-text p,
109+
.activitypub-step-completed .step-action {
110+
display: none;
111+
}
112+
113+
.step-indicator {
114+
margin-right: 15px;
115+
flex-shrink: 0;
116+
}
117+
118+
.step-icon {
119+
width: 24px;
120+
height: 24px;
121+
font-size: 24px;
122+
display: flex;
123+
align-items: center;
124+
justify-content: center;
125+
}
126+
127+
.activitypub-step-completed .step-icon {
128+
color: #008a20;
129+
}
130+
131+
.dashicons-warning {
132+
color: #dba617;
133+
}
134+
135+
.step-content {
136+
flex-grow: 1;
137+
display: flex;
138+
justify-content: space-between;
139+
align-items: center;
140+
width: 100%;
141+
}
142+
143+
.step-text {
144+
flex-grow: 1;
145+
}
146+
147+
.step-text h3 {
148+
margin: 0 0 5px;
149+
font-size: 16px;
150+
font-weight: 500;
151+
}
152+
153+
.step-text p {
154+
margin: 0;
155+
color: #646970;
156+
font-size: 14px;
157+
}
158+
159+
.step-action {
160+
flex-shrink: 0;
161+
margin-left: 20px;
162+
}
163+
164+
.step-action .button {
165+
min-width: 120px;
166+
text-align: center;
167+
}
168+
169+
/* Profiles Section */
170+
.activitypub-profiles-section {
171+
margin-top: 40px;
172+
border-top: 1px solid #f0f0f1;
173+
padding-top: 30px;
174+
}
175+
176+
.profiles-description {
177+
margin-bottom: 20px;
178+
font-size: 16px;
179+
color: #1e1e1e;
180+
}
181+
182+
.activitypub-profiles-container {
183+
display: flex;
184+
flex-wrap: wrap;
185+
gap: 20px;
186+
margin-bottom: 30px;
187+
}
188+
189+
.activitypub-profile-card {
190+
flex: 1;
191+
min-width: 300px;
192+
background-color: #fff;
193+
border: 1px solid #c3c4c7;
194+
border-radius: 4px;
195+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
196+
}
197+
198+
.profile-card-header {
199+
background-color: #f0f0f1;
200+
padding: 15px;
201+
border-bottom: 1px solid #c3c4c7;
202+
display: flex;
203+
align-items: center;
204+
}
205+
206+
.profile-icon {
207+
margin-right: 10px;
208+
}
209+
210+
.profile-icon .dashicons {
211+
font-size: 20px;
212+
width: 20px;
213+
height: 20px;
214+
}
215+
216+
.profile-card-header h3 {
217+
margin: 0;
218+
font-size: 16px;
219+
font-weight: 500;
220+
}
221+
222+
.profile-card-content {
223+
padding: 15px;
224+
}
225+
226+
.profile-field {
227+
margin-bottom: 15px;
228+
}
229+
230+
.profile-field label {
231+
display: block;
232+
margin-bottom: 5px;
233+
font-weight: 500;
234+
font-size: 13px;
235+
color: #646970;
236+
}
237+
238+
.profile-field input {
239+
width: 100%;
240+
padding: 8px;
241+
font-size: 13px;
242+
background-color: #f6f7f7;
243+
border: 1px solid #dcdcde;
244+
border-radius: 3px;
245+
}
246+
247+
.profile-description {
248+
font-size: 13px;
249+
color: #646970;
250+
margin: 15px 0;
251+
line-height: 1.5;
252+
}
253+
254+
.profile-card-content .button {
255+
width: 100%;
256+
text-align: center;
257+
margin-top: 10px;
258+
}
259+
260+
/* Footer Styles */
261+
.activitypub-welcome-footer {
262+
margin-top: 30px;
263+
text-align: center;
264+
}
265+
266+
.skip-steps-link {
267+
color: #2271b1;
268+
text-decoration: none;
269+
font-size: 14px;
270+
}
271+
272+
.skip-steps-link:hover {
273+
color: #135e96;
274+
text-decoration: underline;
275+
}
276+
277+
/* Responsive Adjustments */
278+
@media screen and (max-width: 782px) {
279+
.activitypub-welcome-container {
280+
margin: 20px;
281+
padding: 20px;
282+
}
283+
284+
.step-content {
285+
flex-direction: column;
286+
align-items: flex-start;
287+
}
288+
289+
.step-action {
290+
margin-left: 0;
291+
margin-top: 15px;
292+
width: 100%;
293+
}
294+
295+
.step-action .button {
296+
width: 100%;
297+
text-align: center;
298+
}
299+
300+
.activitypub-profiles-container {
301+
flex-direction: column;
302+
}
303+
304+
.activitypub-profile-card {
305+
width: 100%;
306+
}
307+
}

‎assets/js/activitypub-admin.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,4 @@ jQuery( function( $ ) {
1717
$( '.activate-now' ).removeClass( 'thickbox open-plugin-details-modal' );
1818
}, 1200 );
1919
} );
20-
2120
} );

‎includes/class-activitypub.php‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,11 @@ public static function uninstall() {
106106
\delete_option( 'activitypub_blog_user_public_key' );
107107
\delete_option( 'activitypub_blog_description' );
108108
\delete_option( 'activitypub_blog_identifier' );
109+
\delete_option( 'activitypub_checklist_blocks_visited' );
110+
\delete_option( 'activitypub_checklist_fediverse_intro_visited' );
111+
\delete_option( 'activitypub_checklist_health_check_issues' );
112+
\delete_option( 'activitypub_checklist_profile_setup_visited' );
113+
\delete_option( 'activitypub_checklist_settings_visited' );
109114
\delete_option( 'activitypub_content_negotiation' );
110115
\delete_option( 'activitypub_custom_post_content' );
111116
\delete_option( 'activitypub_db_version' );

0 commit comments

Comments
 (0)