Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 0cf6255

Browse files
justjannejustjanne
committed
Implement hero image and initial checklist version
1 parent 69a2563 commit 0cf6255

22 files changed

+876
-6
lines changed

‎res/css/_components.pcss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -324,6 +324,10 @@
324324
@import "./views/toasts/_IncomingCallToast.pcss";
325325
@import "./views/toasts/_NonUrgentEchoFailureToast.pcss";
326326
@import "./views/typography/_Heading.pcss";
327+
@import "./views/user-onboarding/_UserOnboardingHeader.pcss";
328+
@import "./views/user-onboarding/_UserOnboardingList.pcss";
329+
@import "./views/user-onboarding/_UserOnboardingPage.pcss";
330+
@import "./views/user-onboarding/_UserOnboardingTask.pcss";
327331
@import "./views/verification/_VerificationShowSas.pcss";
328332
@import "./views/voip/CallView/_CallViewButtons.pcss";
329333
@import "./views/voip/_CallPreview.pcss";

‎res/css/_spacing.pcss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,5 @@ $spacing-24: 24px;
2525
$spacing-28: 28px;
2626
$spacing-32: 32px;
2727
$spacing-40: 40px;
28+
$spacing-48: 48px;
29+
$spacing-64: 64px;

‎res/css/views/user-onboarding/_UserOnboardingHeader.pcss‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_UserOnboardingHeader {
18+
display: flex;
19+
flex-direction: row;
20+
padding: $spacing-32;
21+
border-radius: 16px;
22+
background: $system;
23+
gap: $spacing-64;
24+
25+
@media (max-width: 1280px) {
26+
margin: $spacing-32;
27+
}
28+
29+
.mx_UserOnboardingHeader_content {
30+
display: flex;
31+
flex-direction: column;
32+
flex-basis: 50%;
33+
flex-shrink: 1;
34+
flex-grow: 1;
35+
min-width: 0;
36+
gap: $spacing-24;
37+
margin-right: auto;
38+
39+
.mx_AccessibleButton {
40+
margin-top: auto;
41+
align-self: flex-start;
42+
padding: $spacing-12 $spacing-24;
43+
}
44+
}
45+
46+
.mx_UserOnboardingHeader_image {
47+
flex-basis: 30%;
48+
flex-shrink: 1;
49+
flex-grow: 1;
50+
align-self: center;
51+
height: calc(100% + $spacing-64 + $spacing-64);
52+
aspect-ratio: 4 / 3;
53+
object-fit: contain;
54+
min-width: 0;
55+
min-height: 0;
56+
margin-top: -$spacing-64;
57+
margin-bottom: -$spacing-64;
58+
}
59+
}

‎res/css/views/user-onboarding/_UserOnboardingList.pcss‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_UserOnboardingList {
18+
display: flex;
19+
flex-direction: column;
20+
21+
.mx_UserOnboardingList_header {
22+
display: flex;
23+
flex-direction: row;
24+
gap: 12px;
25+
align-items: center;
26+
27+
animation-duration: 300ms;
28+
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
29+
animation-name: mx_UserOnboardingList_slideIn;
30+
animation-fill-mode: backwards;
31+
will-change: opacity;
32+
animation-delay: 800ms;
33+
34+
.mx_UserOnboardingList_hint {
35+
color: $secondary-content;
36+
}
37+
}
38+
39+
.mx_UserOnboardingList_progress {
40+
display: flex;
41+
flex-direction: column;
42+
43+
animation-duration: 300ms;
44+
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
45+
animation-name: mx_UserOnboardingList_slideIn;
46+
animation-fill-mode: backwards;
47+
will-change: opacity;
48+
animation-delay: 1500ms;
49+
50+
.mx_ProgressBar {
51+
width: auto;
52+
margin-top: $spacing-16;
53+
height: 16px;
54+
55+
@mixin ProgressBarBorderRadius 16px;
56+
}
57+
58+
.mx_UserOnboardingFeedback {
59+
margin-top: $spacing-16;
60+
}
61+
}
62+
63+
.mx_UserOnboardingList_list {
64+
display: grid;
65+
grid-template-columns: max-content 1fr max-content;
66+
67+
appearance: none;
68+
list-style: none;
69+
margin: $spacing-32 0 0;
70+
padding: 0;
71+
72+
grid-gap: $spacing-24;
73+
74+
animation-duration: 300ms;
75+
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
76+
animation-name: mx_UserOnboardingList_slideIn;
77+
animation-fill-mode: backwards;
78+
will-change: opacity;
79+
animation-delay: 2200ms;
80+
}
81+
}
82+
83+
.mx_UserOnboardingList_slideIn {
84+
animation-duration: 300ms;
85+
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
86+
animation-name: mx_UserOnboardingList_slideIn;
87+
animation-fill-mode: backwards;
88+
will-change: opacity;
89+
}
90+
91+
@keyframes mx_UserOnboardingList_slideIn {
92+
0% {
93+
transform: translate(0, 8px);
94+
opacity: 0;
95+
}
96+
100% {
97+
transform: translate(0, 0);
98+
opacity: 1;
99+
}
100+
}

‎res/css/views/user-onboarding/_UserOnboardingPage.pcss‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_UserOnboardingPage {
18+
width: 100%;
19+
height: 100%;
20+
21+
align-self: stretch;
22+
margin-bottom: auto;
23+
24+
display: flex;
25+
flex-direction: column;
26+
box-sizing: border-box;
27+
28+
gap: $spacing-64;
29+
padding: $spacing-64 100px;
30+
31+
@media (max-width: 1280px) {
32+
padding: $spacing-48 $spacing-32;
33+
}
34+
}

‎res/css/views/user-onboarding/_UserOnboardingTask.pcss‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_UserOnboardingTask {
18+
display: contents;
19+
20+
.mx_UserOnboardingTask_number {
21+
grid-column: 1;
22+
color: $secondary-content;
23+
width: 32px;
24+
height: 32px;
25+
text-align: center;
26+
border: 2px solid $quinary-content;
27+
border-radius: 32px;
28+
line-height: 32px;
29+
align-self: center;
30+
position: relative;
31+
}
32+
33+
.mx_UserOnboardingTask_content {
34+
grid-column: 2;
35+
display: flex;
36+
flex-direction: column;
37+
flex-grow: 1;
38+
flex-shrink: 1;
39+
40+
transition: all 500ms;
41+
42+
.mx_UserOnboardingTask_description {
43+
font-size: $font-12px;
44+
}
45+
}
46+
47+
.mx_UserOnboardingTask_action.mx_AccessibleButton {
48+
grid-column: 3;
49+
min-width: 180px;
50+
}
51+
52+
&.mx_UserOnboardingTask_completed {
53+
.mx_UserOnboardingTask_number {
54+
&::before {
55+
content: "";
56+
position: absolute;
57+
inset: -2px;
58+
background: $accent;
59+
border-radius: 32px;
60+
61+
animation-duration: 300ms;
62+
animation-fill-mode: both;
63+
animation-name: mx_UserOnboardingTask_spring;
64+
will-change: opacity, transform;
65+
}
66+
67+
&::after {
68+
background-color: $background;
69+
content: "";
70+
mask-repeat: no-repeat;
71+
mask-position: center;
72+
mask-size: contain;
73+
width: 16px;
74+
height: 16px;
75+
position: absolute;
76+
left: calc(50% - 8px);
77+
top: calc(50% - 8px);
78+
mask-image: url("$(res)/img/element-icons/check-white.svg");
79+
80+
animation-duration: 300ms;
81+
animation-fill-mode: both;
82+
animation-name: mx_UserOnboardingTask_spring;
83+
will-change: opacity, transform;
84+
}
85+
}
86+
87+
.mx_UserOnboardingTask_content {
88+
opacity: 0.6;
89+
}
90+
}
91+
}
92+
93+
@keyframes mx_UserOnboardingTask_spring {
94+
0% {
95+
opacity: 0;
96+
transform: scale(0.6);
97+
}
98+
50% {
99+
opacity: 1;
100+
transform: scale(1.2);
101+
}
102+
100% {
103+
opacity: 1;
104+
transform: scale(1);
105+
}
106+
}

‎res/img/user-onboarding/CommunityMessaging.png‎

2.19 MB
Loading

‎res/img/user-onboarding/PersonalMessaging.png‎

188 KB
Loading

‎res/img/user-onboarding/WorkMessaging.png‎

147 KB
Loading

‎src/MatrixClientPeg.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,12 @@ export interface IMatrixClientPeg {
9898
*/
9999
userRegisteredWithinLastHours(hours: number): boolean;
100100

101+
/**
102+
* If the current user has been registered by this device then this
103+
* returns a boolean of whether it was after a given timestamp.
104+
*/
105+
userRegisteredAfter(date: Date): boolean;
106+
101107
/**
102108
* Replace this MatrixClientPeg's client with a client instance that has
103109
* homeserver / identity server URLs and active credentials
@@ -168,6 +174,15 @@ class MatrixClientPegClass implements IMatrixClientPeg {
168174
}
169175
}
170176

177+
public userRegisteredAfter(timestamp: Date): boolean {
178+
try {
179+
const registrationTime = parseInt(window.localStorage.getItem("mx_registration_time"), 10);
180+
return timestamp.getTime() <= registrationTime;
181+
} catch (e) {
182+
return false;
183+
}
184+
}
185+
171186
public replaceUsingCreds(creds: IMatrixClientCreds): void {
172187
this.currentClientCreds = creds;
173188
this.createClient(creds);

0 commit comments

Comments
 (0)