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

Commit f5f7915

Browse files
justjannejustjanne
authored
Implement Use Case Selection screen (#8984)
* Introduce new splash page wrapper * Introduce new use case selection screen
1 parent bda272d commit f5f7915

File tree

24 files changed

+597
-26
lines changed

24 files changed

+597
-26
lines changed

‎cypress/e2e/1-register/register.spec.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,8 @@ describe("Registration", () => {
6565
cy.startMeasuring("from-submit-to-home");
6666
cy.get(".mx_InteractiveAuthEntryComponents_termsSubmit").click();
6767

68+
cy.get(".mx_UseCaseSelection_skip .mx_AccessibleButton").click();
69+
6870
cy.url().should('contain', '/#/home');
6971
cy.stopMeasuring("from-submit-to-home");
7072

‎cypress/e2e/12-spotlight/spotlight.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -357,7 +357,7 @@ describe("Spotlight", () => {
357357
cy.spotlightSearch().clear().type("b");
358358
// our debouncing logic only starts the search after a short timeout,
359359
// so we wait a few milliseconds.
360-
cy.wait(300);
360+
cy.wait(1000);
361361
cy.get(".mx_Spinner").should("not.exist").then(() => {
362362
cy.spotlightResults().should("have.length", 2).then(() => {
363363
cy.spotlightResults().eq(0)

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
},
5757
"dependencies": {
5858
"@babel/runtime": "^7.12.5",
59-
"@matrix-org/analytics-events": "^0.1.1",
59+
"@matrix-org/analytics-events": "^0.1.2",
6060
"@matrix-org/react-sdk-module-api": "^0.0.3",
6161
"@sentry/browser": "^6.11.0",
6262
"@sentry/tracing": "^6.11.0",

‎res/css/_components.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
@import "./structures/_SpaceHierarchy.scss";
5555
@import "./structures/_SpacePanel.scss";
5656
@import "./structures/_SpaceRoomView.scss";
57+
@import "./structures/_SplashPage.scss";
5758
@import "./structures/_TabbedView.scss";
5859
@import "./structures/_ToastContainer.scss";
5960
@import "./structures/_UploadBar.scss";
@@ -189,6 +190,8 @@
189190
@import "./views/elements/_ToggleSwitch.scss";
190191
@import "./views/elements/_Tooltip.scss";
191192
@import "./views/elements/_TooltipButton.scss";
193+
@import "./views/elements/_UseCaseSelection.scss";
194+
@import "./views/elements/_UseCaseSelectionButton.scss";
192195
@import "./views/elements/_Validation.scss";
193196
@import "./views/emojipicker/_EmojiPicker.scss";
194197
@import "./views/location/_LocationPicker.scss";

‎res/css/structures/_SplashPage.scss‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
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_SplashPage {
18+
position: relative;
19+
height: 100%;
20+
21+
&::before {
22+
content: "";
23+
display: block;
24+
position: absolute;
25+
z-index: -1;
26+
opacity: 0.6;
27+
background-image:
28+
radial-gradient(
29+
53.85% 66.75% at 87.55% 0%,
30+
hsla(250, 76%, 71%, 0.261) 0%,
31+
hsla(250, 100%, 88%, 0) 100%
32+
),
33+
radial-gradient(
34+
41.93% 41.93% at 0% 0%,
35+
hsla(222, 29%, 20%, 0.28) 0%,
36+
hsla(250, 100%, 88%, 0) 100%
37+
),
38+
radial-gradient(
39+
100% 100% at 0% 0%,
40+
hsla(250, 100%, 88%, 0.174) 0%,
41+
hsla(0, 100%, 86%, 0) 100%
42+
),
43+
radial-gradient(
44+
106.35% 96.26% at 100% 0%,
45+
hsla(250, 100%, 88%, 0.4) 0%,
46+
hsla(167, 76%, 82%, 0) 100%
47+
);
48+
/* blur to reduce color banding issues due to alpha-blending multiple gradients */
49+
filter: blur(8px);
50+
inset: -9px;
51+
mask:
52+
/* mask to dither resulting combined gradient */
53+
url("$(res)/img/noise.png"),
54+
/* gradient to apply different amounts of dithering to different parts of the gradient */
55+
linear-gradient(
56+
to bottom,
57+
/* 10% dithering at the top */
58+
rgba(0, 0, 0, 0.9) 20%,
59+
/* 80% dithering at the bottom */
60+
rgba(0, 0, 0, 0.2) 100%
61+
);
62+
}
63+
}

‎res/css/views/elements/_UseCaseSelection.scss‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
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_UseCaseSelection {
18+
display: grid;
19+
grid-template-rows: 1fr 1fr max-content 2fr;
20+
height: 100%;
21+
grid-gap: $spacing-40;
22+
23+
.mx_UseCaseSelection_title {
24+
display: flex;
25+
flex-direction: column;
26+
justify-content: end;
27+
28+
h1 {
29+
font-weight: 600;
30+
font-size: $font-32px;
31+
text-align: center;
32+
}
33+
}
34+
35+
.mx_UseCaseSelection_info {
36+
display: flex;
37+
flex-direction: column;
38+
gap: $spacing-8;
39+
align-self: end;
40+
41+
h2 {
42+
margin: 0;
43+
font-weight: 500;
44+
font-size: $font-24px;
45+
text-align: center;
46+
}
47+
48+
h4 {
49+
margin: 0;
50+
font-weight: 400;
51+
font-size: $font-16px;
52+
color: $secondary-content;
53+
text-align: center;
54+
}
55+
}
56+
57+
.mx_UseCaseSelection_options {
58+
display: grid;
59+
grid-template-columns: repeat(auto-fit, 232px);
60+
gap: $spacing-32;
61+
align-self: stretch;
62+
justify-content: center;
63+
}
64+
65+
.mx_UseCaseSelection_skip {
66+
display: flex;
67+
flex-direction: column;
68+
align-self: start;
69+
}
70+
}
71+
72+
.mx_UseCaseSelection_slideIn {
73+
animation-delay: 800ms;
74+
animation-duration: 300ms;
75+
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
76+
animation-name: mx_UseCaseSelection_slideInLong;
77+
animation-fill-mode: backwards;
78+
will-change: opacity;
79+
}
80+
81+
.mx_UseCaseSelection_slideInDelayed {
82+
animation-delay: 1500ms;
83+
animation-duration: 300ms;
84+
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
85+
animation-name: mx_UseCaseSelection_slideInShort;
86+
animation-fill-mode: backwards;
87+
will-change: transform, opacity;
88+
}
89+
90+
.mx_UseCaseSelection_selected {
91+
.mx_UseCaseSelection_slideIn, .mx_UseCaseSelection_slideInDelayed {
92+
animation-delay: 800ms;
93+
animation-duration: 300ms;
94+
animation-fill-mode: forwards;
95+
animation-name: mx_UseCaseSelection_fadeOut;
96+
will-change: opacity;
97+
}
98+
}
99+
100+
@keyframes mx_UseCaseSelection_slideInLong {
101+
0% {
102+
transform: translate(0, 20px);
103+
opacity: 0;
104+
}
105+
100% {
106+
transform: translate(0, 0);
107+
opacity: 1;
108+
}
109+
}
110+
111+
@keyframes mx_UseCaseSelection_slideInShort {
112+
0% {
113+
transform: translate(0, 8px);
114+
opacity: 0;
115+
}
116+
100% {
117+
transform: translate(0, 0);
118+
opacity: 1;
119+
}
120+
}
121+
122+
@keyframes mx_UseCaseSelection_fadeOut {
123+
0% {
124+
opacity: 1;
125+
}
126+
100% {
127+
opacity: 0;
128+
}
129+
}

‎res/css/views/elements/_UseCaseSelectionButton.scss‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
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_UseCaseSelectionButton {
18+
display: flex;
19+
flex-direction: column;
20+
align-items: center;
21+
padding: $spacing-24 $spacing-16;
22+
background: $background;
23+
border: 1px solid $quinary-content;
24+
border-radius: 8px;
25+
text-align: center;
26+
position: relative;
27+
transition-property: box-shadow, transform;
28+
transition-duration: 300ms;
29+
30+
.mx_UseCaseSelectionButton_icon {
31+
/* workaround: design expects a layering of two colors */
32+
background: linear-gradient(0deg, rgba(172, 59, 168, 0.15), rgba(172, 59, 168, 0.15)), #FFFFFF;
33+
border-radius: 14px;
34+
padding: $spacing-8;
35+
margin-bottom: $spacing-16;
36+
37+
&::before {
38+
content: "";
39+
display: block;
40+
/* this has to remain the same color across all themes,
41+
as its background has a fixed color as well */
42+
background: #1E1E1E;
43+
mask-position: center;
44+
mask-repeat: no-repeat;
45+
mask-size: contain;
46+
width: 22px;
47+
height: 22px;
48+
}
49+
50+
&.mx_UseCaseSelectionButton_messaging::before {
51+
mask-image: url('$(res)/img/element-icons/chat-bubble.svg');
52+
}
53+
54+
&.mx_UseCaseSelectionButton_work::before {
55+
mask-image: url('$(res)/img/element-icons/view-community.svg');
56+
}
57+
58+
&.mx_UseCaseSelectionButton_community::before {
59+
mask-image: url('$(res)/img/globe.svg');
60+
}
61+
}
62+
63+
&:hover, &:focus {
64+
box-shadow: 0 $spacing-4 $spacing-8 rgba(0, 0, 0, 0.08);
65+
transform: translate(0, -$spacing-8);
66+
}
67+
68+
.mx_UseCaseSelectionButton_selectedIcon {
69+
right: -12px;
70+
top: -12px;
71+
position: absolute;
72+
border-radius: 24px;
73+
background: $accent;
74+
padding: 6px;
75+
transition-property: opacity, transform;
76+
transition-duration: 150ms;
77+
opacity: 0;
78+
transform: scale(0.6);
79+
80+
&::before {
81+
content: "";
82+
display: block;
83+
background: $background;
84+
mask-position: center;
85+
mask-repeat: no-repeat;
86+
mask-size: contain;
87+
width: 12px;
88+
height: 12px;
89+
90+
mask-image: url('$(res)/img/element-icons/check-white.svg');
91+
}
92+
}
93+
94+
&.mx_UseCaseSelectionButton_selected {
95+
border: 2px solid $accent;
96+
padding: calc($spacing-24 - 1px) calc($spacing-16 - 1px);
97+
box-shadow: 0 $spacing-4 $spacing-8 rgba(0, 0, 0, 0.08);
98+
99+
.mx_UseCaseSelectionButton_selectedIcon {
100+
opacity: 1;
101+
transform: scale(1);
102+
}
103+
}
104+
}

‎res/img/element-icons/chat-bubble.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎res/img/element-icons/group-members.svg‎

Lines changed: 2 additions & 7 deletions
Loading

0 commit comments

Comments
 (0)