mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-24 02:05:45 +03:00
Code Issues Projects Releases Packages Wiki Activity

Implement Use Case Selection screen (#8984)

Browse source 
* Introduce new splash page wrapper
* Introduce new use case selection screen
This commit is contained in:
Janne Mareike Koschinski 2022-07-13 15:43:44 +02:00 committed by GitHub
parent bda272dce4
commit f5f79158ed
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 597 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
cypress/e2e/1-register/register.spec.ts
View file

@ -65,6 +65,8 @@ describe("Registration", () => {
cy.startMeasuring("from-submit-to-home");
cy.get(".mx_InteractiveAuthEntryComponents_termsSubmit").click();
cy.get(".mx_UseCaseSelection_skip .mx_AccessibleButton").click();
cy.url().should('contain', '/#/home');
cy.stopMeasuring("from-submit-to-home");

2
cypress/e2e/12-spotlight/spotlight.spec.ts
View file

@ -357,7 +357,7 @@ describe("Spotlight", () => {
cy.spotlightSearch().clear().type("b");
// our debouncing logic only starts the search after a short timeout,
// so we wait a few milliseconds.
cy.wait(300);
cy.wait(1000);
cy.get(".mx_Spinner").should("not.exist").then(() => {
cy.spotlightResults().should("have.length", 2).then(() => {
cy.spotlightResults().eq(0)

2
package.json
View file

@ -56,7 +56,7 @@
},
"dependencies": {
"@babel/runtime": "^7.12.5",
"@matrix-org/analytics-events": "^0.1.1",
"@matrix-org/analytics-events": "^0.1.2",
"@matrix-org/react-sdk-module-api": "^0.0.3",
"@sentry/browser": "^6.11.0",
"@sentry/tracing": "^6.11.0",

3
res/css/_components.scss
View file

@ -54,6 +54,7 @@
@import "./structures/_SpaceHierarchy.scss";
@import "./structures/_SpacePanel.scss";
@import "./structures/_SpaceRoomView.scss";
@import "./structures/_SplashPage.scss";
@import "./structures/_TabbedView.scss";
@import "./structures/_ToastContainer.scss";
@import "./structures/_UploadBar.scss";
@ -189,6 +190,8 @@
@import "./views/elements/_ToggleSwitch.scss";
@import "./views/elements/_Tooltip.scss";
@import "./views/elements/_TooltipButton.scss";
@import "./views/elements/_UseCaseSelection.scss";
@import "./views/elements/_UseCaseSelectionButton.scss";
@import "./views/elements/_Validation.scss";
@import "./views/emojipicker/_EmojiPicker.scss";
@import "./views/location/_LocationPicker.scss";

63
res/css/structures/_SplashPage.scss Normal file
View file

@ -0,0 +1,63 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_SplashPage {
position: relative;
height: 100%;
&::before {
content: "";
display: block;
position: absolute;
z-index: -1;
opacity: 0.6;
background-image:
radial-gradient(
53.85% 66.75% at 87.55% 0%,
hsla(250, 76%, 71%, 0.261) 0%,
hsla(250, 100%, 88%, 0) 100%
),
radial-gradient(
41.93% 41.93% at 0% 0%,
hsla(222, 29%, 20%, 0.28) 0%,
hsla(250, 100%, 88%, 0) 100%
),
radial-gradient(
100% 100% at 0% 0%,
hsla(250, 100%, 88%, 0.174) 0%,
hsla(0, 100%, 86%, 0) 100%
),
radial-gradient(
106.35% 96.26% at 100% 0%,
hsla(250, 100%, 88%, 0.4) 0%,
hsla(167, 76%, 82%, 0) 100%
);
/* blur to reduce color banding issues due to alpha-blending multiple gradients */
filter: blur(8px);
inset: -9px;
mask:
/* mask to dither resulting combined gradient */
url("$(res)/img/noise.png"),
/* gradient to apply different amounts of dithering to different parts of the gradient */
linear-gradient(
to bottom,
/* 10% dithering at the top */
rgba(0, 0, 0, 0.9) 20%,
/* 80% dithering at the bottom */
rgba(0, 0, 0, 0.2) 100%
);
}
}

129
res/css/views/elements/_UseCaseSelection.scss Normal file
View file

@ -0,0 +1,129 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_UseCaseSelection {
display: grid;
grid-template-rows: 1fr 1fr max-content 2fr;
height: 100%;
grid-gap: $spacing-40;
.mx_UseCaseSelection_title {
display: flex;
flex-direction: column;
justify-content: end;
h1 {
font-weight: 600;
font-size: $font-32px;
text-align: center;
}
}
.mx_UseCaseSelection_info {
display: flex;
flex-direction: column;
gap: $spacing-8;
align-self: end;
h2 {
margin: 0;
font-weight: 500;
font-size: $font-24px;
text-align: center;
}
h4 {
margin: 0;
font-weight: 400;
font-size: $font-16px;
color: $secondary-content;
text-align: center;
}
}
.mx_UseCaseSelection_options {
display: grid;
grid-template-columns: repeat(auto-fit, 232px);
gap: $spacing-32;
align-self: stretch;
justify-content: center;
}
.mx_UseCaseSelection_skip {
display: flex;
flex-direction: column;
align-self: start;
}
}
.mx_UseCaseSelection_slideIn {
animation-delay: 800ms;
animation-duration: 300ms;
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
animation-name: mx_UseCaseSelection_slideInLong;
animation-fill-mode: backwards;
will-change: opacity;
}
.mx_UseCaseSelection_slideInDelayed {
animation-delay: 1500ms;
animation-duration: 300ms;
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
animation-name: mx_UseCaseSelection_slideInShort;
animation-fill-mode: backwards;
will-change: transform, opacity;
}
.mx_UseCaseSelection_selected {
.mx_UseCaseSelection_slideIn, .mx_UseCaseSelection_slideInDelayed {
animation-delay: 800ms;
animation-duration: 300ms;
animation-fill-mode: forwards;
animation-name: mx_UseCaseSelection_fadeOut;
will-change: opacity;
}
}
@keyframes mx_UseCaseSelection_slideInLong {
0% {
transform: translate(0, 20px);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
@keyframes mx_UseCaseSelection_slideInShort {
0% {
transform: translate(0, 8px);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
@keyframes mx_UseCaseSelection_fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

104
res/css/views/elements/_UseCaseSelectionButton.scss Normal file
View file

@ -0,0 +1,104 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_UseCaseSelectionButton {
display: flex;
flex-direction: column;
align-items: center;
padding: $spacing-24 $spacing-16;
background: $background;
border: 1px solid $quinary-content;
border-radius: 8px;
text-align: center;
position: relative;
transition-property: box-shadow, transform;
transition-duration: 300ms;
.mx_UseCaseSelectionButton_icon {
/* workaround: design expects a layering of two colors */
background: linear-gradient(0deg, rgba(172, 59, 168, 0.15), rgba(172, 59, 168, 0.15)), #FFFFFF;
border-radius: 14px;
padding: $spacing-8;
margin-bottom: $spacing-16;
&::before {
content: "";
display: block;
/* this has to remain the same color across all themes,
as its background has a fixed color as well */
background: #1E1E1E;
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
width: 22px;
height: 22px;
}
&.mx_UseCaseSelectionButton_messaging::before {
mask-image: url('$(res)/img/element-icons/chat-bubble.svg');
}
&.mx_UseCaseSelectionButton_work::before {
mask-image: url('$(res)/img/element-icons/view-community.svg');
}
&.mx_UseCaseSelectionButton_community::before {
mask-image: url('$(res)/img/globe.svg');
}
}
&:hover, &:focus {
box-shadow: 0 $spacing-4 $spacing-8 rgba(0, 0, 0, 0.08);
transform: translate(0, -$spacing-8);
}
.mx_UseCaseSelectionButton_selectedIcon {
right: -12px;
top: -12px;
position: absolute;
border-radius: 24px;
background: $accent;
padding: 6px;
transition-property: opacity, transform;
transition-duration: 150ms;
opacity: 0;
transform: scale(0.6);
&::before {
content: "";
display: block;
background: $background;
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
width: 12px;
height: 12px;
mask-image: url('$(res)/img/element-icons/check-white.svg');
}
}
&.mx_UseCaseSelectionButton_selected {
border: 2px solid $accent;
padding: calc($spacing-24 - 1px) calc($spacing-16 - 1px);
box-shadow: 0 $spacing-4 $spacing-8 rgba(0, 0, 0, 0.08);
.mx_UseCaseSelectionButton_selectedIcon {
opacity: 1;
transform: scale(1);
}
}
}

3
res/img/element-icons/chat-bubble.svg Normal file
View file

@ -0,0 +1,3 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M 12.046004,0 C 5.4431281,0 0.08988791,5.3729108 0.08988791,12.000001 c 0,2.059897 0.5163635,3.998954 1.42753269,5.692825 l -1.46565664,4.725598 c -0.26501811,0.853738 0.53179935,1.6561 1.38305454,1.392383 L 6.0478246,22.382286 C 7.8109429,23.410602 9.8598215,24 12.046004,24 18.648792,24 24,18.627023 24,12.000001 24,5.3729108 18.648792,0 12.046004,0 Z M 6.7319388,10.667139 c 0.7336504,0 1.3279866,0.596453 1.3279866,1.332862 0,0.736298 -0.5943362,1.332861 -1.3279866,1.33286 -0.7336504,0 -1.3279866,-0.596562 -1.3279865,-1.33286 0,-0.736409 0.5943361,-1.332862 1.3279865,-1.332862 z m 5.3140652,0 c 0.733607,0 1.327986,0.596453 1.327986,1.332862 0,0.736298 -0.594379,1.33286 -1.327986,1.33286 -0.733716,1e-6 -1.327987,-0.596562 -1.327987,-1.33286 0,-0.736409 0.594271,-1.332862 1.327987,-1.332862 z m 5.311946,0 c 0.733607,0 1.330105,0.596453 1.330105,1.332862 0,0.736298 -0.596498,1.332861 -1.330105,1.33286 -0.733715,0 -1.327987,-0.596562 -1.327987,-1.33286 0,-0.736409 0.594272,-1.332862 1.327987,-1.332862 z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

9
res/img/element-icons/group-members.svg
View file

@ -1,8 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-inside-1" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM16.3804 13.412C17.59 13.412 18.5705 12.3498 18.5705 11.0394C18.5705 9.72896 17.59 8.66667 16.3804 8.66667C15.1708 8.66667 14.1902 9.72896 14.1902 11.0394C14.1902 12.3498 15.1708 13.412 16.3804 13.412ZM12.8333 17.7461C12.8333 15.7941 11.4623 14.1623 9.63071 13.7611C9.31877 13.6991 8.99645 13.6667 8.66667 13.6667C6.66814 13.6667 4.94347 14.8594 4.14307 16.5833L7.83334 20.4483H12.8333L12.8333 17.7461ZM14.8333 20.4483H16.3804L20.0844 16.5833C19.3081 15.3356 17.9394 14.5071 16.3804 14.5071C15.5955 14.5071 14.8588 14.7171 14.2216 15.0849C14.6134 15.8884 14.8333 16.7913 14.8333 17.7461L14.8333 20.4483ZM11.1667 9.70833C11.1667 11.2041 10.0474 12.4167 8.66669 12.4167C7.28597 12.4167 6.16669 11.2041 6.16669 9.70833C6.16669 8.21256 7.28597 7 8.66669 7C10.0474 7 11.1667 8.21256 11.1667 9.70833Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM16.3804 13.412C17.59 13.412 18.5705 12.3498 18.5705 11.0394C18.5705 9.72896 17.59 8.66667 16.3804 8.66667C15.1708 8.66667 14.1902 9.72896 14.1902 11.0394C14.1902 12.3498 15.1708 13.412 16.3804 13.412ZM12.8333 17.7461C12.8333 15.7941 11.4623 14.1623 9.63071 13.7611C9.31877 13.6991 8.99645 13.6667 8.66667 13.6667C6.66814 13.6667 4.94347 14.8594 4.14307 16.5833L7.83334 20.4483H12.8333L12.8333 17.7461ZM14.8333 20.4483H16.3804L20.0844 16.5833C19.3081 15.3356 17.9394 14.5071 16.3804 14.5071C15.5955 14.5071 14.8588 14.7171 14.2216 15.0849C14.6134 15.8884 14.8333 16.7913 14.8333 17.7461L14.8333 20.4483ZM11.1667 9.70833C11.1667 11.2041 10.0474 12.4167 8.66669 12.4167C7.28597 12.4167 6.16669 11.2041 6.16669 9.70833C6.16669 8.21256 7.28597 7 8.66669 7C10.0474 7 11.1667 8.21256 11.1667 9.70833Z" fill="black"/>
<path d="M9.63071 13.7611L9.9873 12.1331L9.97144 12.1296L9.95552 12.1264L9.63071 13.7611ZM12.8333 17.7461H11.1667V17.7461L12.8333 17.7461ZM4.14307 16.5833L2.63139 15.8815L2.15278 16.9123L2.93762 17.7343L4.14307 16.5833ZM7.83334 20.4483L6.62789 21.5993L7.1203 22.115H7.83334V20.4483ZM12.8333 20.4483V22.115H14.5L14.5 20.4483L12.8333 20.4483ZM16.3804 20.4483V22.115H17.0916L17.5837 21.6015L16.3804 20.4483ZM14.8333 20.4483L13.1667 20.4483L13.1667 22.115H14.8333V20.4483ZM20.0844 16.5833L21.2877 17.7365L22.1834 16.802L21.4996 15.7029L20.0844 16.5833ZM14.2216 15.0849L13.3884 13.6415L12.0423 14.4185L12.7236 15.8155L14.2216 15.0849ZM14.8333 17.7461H13.1667V17.7461L14.8333 17.7461ZM12 23.6667C18.4433 23.6667 23.6667 18.4433 23.6667 12H20.3333C20.3333 16.6024 16.6024 20.3333 12 20.3333V23.6667ZM0.333333 12C0.333333 18.4433 5.55668 23.6667 12 23.6667V20.3333C7.39763 20.3333 3.66667 16.6024 3.66667 12H0.333333ZM12 0.333333C5.55668 0.333333 0.333333 5.55668 0.333333 12H3.66667C3.66667 7.39763 7.39763 3.66667 12 3.66667V0.333333ZM23.6667 12C23.6667 5.55668 18.4433 0.333333 12 0.333333V3.66667C16.6024 3.66667 20.3333 7.39763 20.3333 12H23.6667ZM16.9039 11.0394C16.9039 11.5574 16.5464 11.7454 16.3804 11.7454V15.0787C18.6335 15.0787 20.2372 13.1421 20.2372 11.0394H16.9039ZM16.3804 10.3333C16.5464 10.3333 16.9039 10.5213 16.9039 11.0394H20.2372C20.2372 8.9366 18.6335 7.00001 16.3804 7.00001V10.3333ZM15.8569 11.0394C15.8569 10.5213 16.2143 10.3333 16.3804 10.3333V7.00001C14.1272 7.00001 12.5235 8.9366 12.5235 11.0394H15.8569ZM16.3804 11.7454C16.2143 11.7454 15.8569 11.5574 15.8569 11.0394H12.5235C12.5235 13.1421 14.1272 15.0787 16.3804 15.0787V11.7454ZM9.27412 15.3892C10.357 15.6264 11.1667 16.5936 11.1667 17.7461H14.5C14.5 14.9945 12.5676 12.6982 9.9873 12.1331L9.27412 15.3892ZM8.66667 15.3333C8.88675 15.3333 9.10029 15.355 9.3059 15.3958L9.95552 12.1264C9.53724 12.0433 9.10614 12 8.66667 12V15.3333ZM5.65474 17.2852C6.19734 16.1166 7.3526 15.3333 8.66667 15.3333V12C5.98369 12 3.68961 13.6023 2.63139 15.8815L5.65474 17.2852ZM9.03878 19.2974L5.34851 15.4324L2.93762 17.7343L6.62789 21.5993L9.03878 19.2974ZM12.8333 18.7817H7.83334V22.115H12.8333V18.7817ZM11.1667 17.7461L11.1667 20.4483L14.5 20.4483L14.5 17.7461L11.1667 17.7461ZM16.3804 18.7817H14.8333V22.115H16.3804V18.7817ZM18.8811 15.4301L15.1771 19.2951L17.5837 21.6015L21.2877 17.7365L18.8811 15.4301ZM16.3804 16.1738C17.3311 16.1738 18.1797 16.6768 18.6693 17.4638L21.4996 15.7029C20.4366 13.9944 18.5477 12.8405 16.3804 12.8405V16.1738ZM15.0549 16.5284C15.4465 16.3023 15.8969 16.1738 16.3804 16.1738V12.8405C15.2941 12.8405 14.2711 13.132 13.3884 13.6415L15.0549 16.5284ZM16.5 17.7461C16.5 16.5328 16.2201 15.3806 15.7196 14.3544L12.7236 15.8155C13.0068 16.3963 13.1667 17.0498 13.1667 17.7461H16.5ZM16.5 20.4483L16.5 17.7461L13.1667 17.7461L13.1667 20.4483L16.5 20.4483ZM8.66669 14.0833C11.091 14.0833 12.8334 11.9965 12.8334 9.70833H9.50002C9.50002 10.4117 9.00383 10.75 8.66669 10.75V14.0833ZM4.50002 9.70833C4.50002 11.9965 6.2424 14.0833 8.66669 14.0833V10.75C8.32955 10.75 7.83335 10.4117 7.83335 9.70833H4.50002ZM8.66669 5.33333C6.2424 5.33333 4.50002 7.42021 4.50002 9.70833H7.83335C7.83335 9.00492 8.32955 8.66667 8.66669 8.66667V5.33333ZM12.8334 9.70833C12.8334 7.42021 11.091 5.33333 8.66669 5.33333V8.66667C9.00383 8.66667 9.50002 9.00492 9.50002 9.70833H12.8334Z" fill="black" mask="url(#path-1-inside-1)"/>
<path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="black" stroke-width="2"/>
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M 12 2 C 6.4771555 2 2 6.4771555 2 12 C 2 17.522794 6.4771555 22 12 22 C 17.522794 22 22 17.522794 22 12 C 22 6.4771555 17.522794 2 12 2 z M 8.6660156 7 C 10.046724 7 11.166016 8.2132159 11.166016 9.7089844 C 11.166016 11.204753 10.046724 12.416016 8.6660156 12.416016 C 7.285297 12.416016 6.1660156 11.204753 6.1660156 9.7089844 C 6.1660156 8.2132159 7.285297 7 8.6660156 7 z M 16.380859 8.6660156 C 17.590458 8.6660156 18.570312 9.7286238 18.570312 11.039062 C 18.570312 12.349461 17.590458 13.412109 16.380859 13.412109 C 15.171261 13.412109 14.189453 12.349461 14.189453 11.039062 C 14.189453 9.7286238 15.171261 8.6660156 16.380859 8.6660156 z M 8.6660156 13.666016 C 8.995795 13.666016 9.31892 13.699719 9.6308594 13.761719 C 11.462446 14.162917 12.833984 15.794098 12.833984 17.746094 L 12.833984 19.957031 C 12.560013 19.985187 12.281622 20 12 20 C 8.8339434 20 6.1088101 18.175143 4.8105469 15.517578 C 5.7276213 14.387632 7.1130646 13.666016 8.6660156 13.666016 z M 16.380859 14.507812 C 17.445748 14.507812 18.420522 14.894445 19.179688 15.537109 C 18.289454 17.346828 16.737071 18.766824 14.833984 19.484375 L 14.833984 17.746094 C 14.833984 16.791296 14.612503 15.887484 14.220703 15.083984 C 14.857901 14.716186 15.595961 14.507812 16.380859 14.507812 z" />
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

9
res/img/element-icons/view-community.svg
View file

@ -1,8 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-inside-1" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17ZM8.3335 7.16667C8.3335 8.36328 7.43807 9.33333 6.3335 9.33333C5.22893 9.33333 4.3335 8.36328 4.3335 7.16667C4.3335 5.97005 5.22893 5 6.3335 5C7.43807 5 8.3335 5.97005 8.3335 7.16667ZM12.5043 10.1297C13.472 10.1297 14.2565 9.27984 14.2565 8.23152C14.2565 7.1832 13.472 6.33337 12.5043 6.33337C11.5367 6.33337 10.7522 7.1832 10.7522 8.23152C10.7522 9.27984 11.5367 10.1297 12.5043 10.1297ZM7.10447 10.4089C8.56975 10.7299 9.66656 12.0353 9.66656 13.5969L9.66656 15.7587H5.66657L2.71436 12.6667C3.35468 11.2876 4.73442 10.3334 6.33324 10.3334C6.59706 10.3334 6.85492 10.3594 7.10447 10.4089ZM11.1665 15.7586H12.5044L15.4676 12.6666C14.8466 11.6684 13.7516 11.0057 12.5044 11.0057C11.8406 11.0057 11.22 11.1934 10.6909 11.5195C10.9956 12.1471 11.1665 12.8519 11.1665 13.5969L11.1665 15.7586Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17ZM8.3335 7.16667C8.3335 8.36328 7.43807 9.33333 6.3335 9.33333C5.22893 9.33333 4.3335 8.36328 4.3335 7.16667C4.3335 5.97005 5.22893 5 6.3335 5C7.43807 5 8.3335 5.97005 8.3335 7.16667ZM12.5043 10.1297C13.472 10.1297 14.2565 9.27984 14.2565 8.23152C14.2565 7.1832 13.472 6.33337 12.5043 6.33337C11.5367 6.33337 10.7522 7.1832 10.7522 8.23152C10.7522 9.27984 11.5367 10.1297 12.5043 10.1297ZM7.10447 10.4089C8.56975 10.7299 9.66656 12.0353 9.66656 13.5969L9.66656 15.7587H5.66657L2.71436 12.6667C3.35468 11.2876 4.73442 10.3334 6.33324 10.3334C6.59706 10.3334 6.85492 10.3594 7.10447 10.4089ZM11.1665 15.7586H12.5044L15.4676 12.6666C14.8466 11.6684 13.7516 11.0057 12.5044 11.0057C11.8406 11.0057 11.22 11.1934 10.6909 11.5195C10.9956 12.1471 11.1665 12.8519 11.1665 13.5969L11.1665 15.7586Z" fill="black"/>
<path d="M9.66656 13.5969H8.33322V13.5969L9.66656 13.5969ZM7.10447 10.4089L7.38974 9.10648L7.37705 9.1037L7.36431 9.10117L7.10447 10.4089ZM9.66656 15.7587V17.092H10.9999L10.9999 15.7587L9.66656 15.7587ZM5.66657 15.7587L4.70222 16.6795L5.09614 17.092H5.66657V15.7587ZM2.71436 12.6667L1.50502 12.1052L1.12213 12.9299L1.75 13.5875L2.71436 12.6667ZM12.5044 15.7586V17.092H13.0733L13.467 16.6812L12.5044 15.7586ZM11.1665 15.7586L9.83313 15.7586L9.83313 17.092H11.1665V15.7586ZM15.4676 12.6666L16.4303 13.5892L17.1468 12.8416L16.5997 11.9623L15.4676 12.6666ZM10.6909 11.5195L9.99128 10.3845L8.96494 11.0171L9.49143 12.1018L10.6909 11.5195ZM11.1665 13.5969H9.83312V13.5969L11.1665 13.5969ZM15.6667 9C15.6667 12.6819 12.6819 15.6667 9 15.6667V18.3333C14.1547 18.3333 18.3333 14.1547 18.3333 9H15.6667ZM9 2.33333C12.6819 2.33333 15.6667 5.3181 15.6667 9H18.3333C18.3333 3.84534 14.1547 -0.333333 9 -0.333333V2.33333ZM2.33333 9C2.33333 5.3181 5.3181 2.33333 9 2.33333V-0.333333C3.84534 -0.333333 -0.333333 3.84534 -0.333333 9H2.33333ZM9 15.6667C5.3181 15.6667 2.33333 12.6819 2.33333 9H-0.333333C-0.333333 14.1547 3.84534 18.3333 9 18.3333V15.6667ZM6.3335 10.6667C8.27292 10.6667 9.66683 8.99717 9.66683 7.16667H7.00016C7.00016 7.7294 6.60321 8 6.3335 8V10.6667ZM3.00016 7.16667C3.00016 8.99717 4.39407 10.6667 6.3335 10.6667V8C6.06378 8 5.66683 7.7294 5.66683 7.16667H3.00016ZM6.3335 3.66667C4.39407 3.66667 3.00016 5.33616 3.00016 7.16667H5.66683C5.66683 6.60393 6.06378 6.33333 6.3335 6.33333V3.66667ZM9.66683 7.16667C9.66683 5.33616 8.27292 3.66667 6.3335 3.66667V6.33333C6.60321 6.33333 7.00016 6.60393 7.00016 7.16667H9.66683ZM12.9231 8.23152C12.9231 8.64596 12.6372 8.79634 12.5043 8.79634V11.463C14.3069 11.463 15.5898 9.91373 15.5898 8.23152H12.9231ZM12.5043 7.66671C12.6372 7.66671 12.9231 7.81709 12.9231 8.23152H15.5898C15.5898 6.54932 14.3069 5.00004 12.5043 5.00004V7.66671ZM12.0855 8.23152C12.0855 7.81709 12.3715 7.66671 12.5043 7.66671V5.00004C10.7018 5.00004 9.41886 6.54932 9.41886 8.23152H12.0855ZM12.5043 8.79634C12.3715 8.79634 12.0855 8.64596 12.0855 8.23152H9.41886C9.41886 9.91373 10.7018 11.463 12.5043 11.463V8.79634ZM10.9999 13.5969C10.9999 11.3957 9.45399 9.5586 7.38974 9.10648L6.8192 11.7114C7.68551 11.9011 8.33322 12.6749 8.33322 13.5969H10.9999ZM10.9999 15.7587L10.9999 13.5969L8.33322 13.5969L8.33323 15.7587L10.9999 15.7587ZM5.66657 17.092H9.66656V14.4254H5.66657V17.092ZM1.75 13.5875L4.70222 16.6795L6.63093 14.8379L3.67871 11.7459L1.75 13.5875ZM6.33324 9.00004C4.18685 9.00004 2.35159 10.2819 1.50502 12.1052L3.92369 13.2282C4.35777 12.2933 5.28198 11.6667 6.33324 11.6667V9.00004ZM7.36431 9.10117C7.0297 9.03469 6.68482 9.00004 6.33324 9.00004V11.6667C6.5093 11.6667 6.68013 11.684 6.84462 11.7167L7.36431 9.10117ZM12.5044 14.4253H11.1665V17.092H12.5044V14.4253ZM14.505 11.7441L11.5417 14.8361L13.467 16.6812L16.4303 13.5892L14.505 11.7441ZM12.5044 12.339C13.2649 12.339 13.9438 12.7414 14.3355 13.371L16.5997 11.9623C15.7493 10.5955 14.2382 9.67234 12.5044 9.67234V12.339ZM11.3906 12.6545C11.7163 12.4538 12.0958 12.339 12.5044 12.339V9.67234C11.5854 9.67234 10.7237 9.93304 9.99128 10.3845L11.3906 12.6545ZM12.4998 13.5969C12.4998 12.6459 12.2813 11.7425 11.8904 10.9373L9.49143 12.1018C9.70988 12.5518 9.83312 13.0578 9.83312 13.5969H12.4998ZM12.4998 15.7586L12.4998 13.5969L9.83312 13.5969L9.83313 15.7586L12.4998 15.7586Z" fill="black" mask="url(#path-1-inside-1)"/>
<path d="M16.25 9C16.25 13.0041 13.0041 16.25 9 16.25C4.99594 16.25 1.75 13.0041 1.75 9C1.75 4.99594 4.99594 1.75 9 1.75C13.0041 1.75 16.25 4.99594 16.25 9Z" stroke="black" stroke-width="1.5"/>
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M 10,0 C 4.4771555,0 0,4.4771555 0,10 0,15.522794 4.4771555,20 10,20 15.522794,20 20,15.522794 20,10 20,4.4771555 15.522794,0 10,0 Z M 6.6660156,5 C 8.046724,5 9.166016,6.2132159 9.166016,7.7089844 c 0,1.4957686 -1.119292,2.7070316 -2.5000004,2.7070316 -1.3807186,0 -2.5,-1.211263 -2.5,-2.7070316 C 4.1660156,6.2132159 5.285297,5 6.6660156,5 Z m 7.7148434,1.6660156 c 1.209599,0 2.189453,1.0626082 2.189453,2.3730464 0,1.310399 -0.979854,2.373047 -2.189453,2.373047 -1.209598,0 -2.191406,-1.062648 -2.191406,-2.373047 0,-1.3104382 0.981808,-2.3730464 2.191406,-2.3730464 z M 6.6660156,11.666016 c 0.3297794,0 0.6529044,0.0337 0.9648438,0.0957 1.8315866,0.401198 3.2031246,2.032379 3.2031246,3.984375 v 2.210937 C 10.560013,17.985187 10.281622,18 10,18 6.8339434,18 4.1088101,16.175143 2.8105469,13.517578 3.7276213,12.387632 5.1130646,11.666016 6.6660156,11.666016 Z m 7.7148434,0.841796 c 1.064889,0 2.039663,0.386633 2.798829,1.029297 -0.890234,1.809719 -2.442617,3.229715 -4.345704,3.947266 v -1.738281 c 0,-0.954798 -0.221481,-1.85861 -0.613281,-2.66211 0.637198,-0.367798 1.375258,-0.576172 2.160156,-0.576172 z" />
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

4
res/img/globe.svg
View file

@ -1,3 +1,3 @@
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8ZM6.53332 5.3468L6.24528 6.23562C6.23346 6.27208 6.21342 6.30534 6.1867 6.33282L5.90913 6.61831L5.59095 6.94559L5.52111 7.01743C5.4003 7.14169 5.19279 7.10832 5.11702 6.95246L4.97216 6.65447C4.96052 6.63052 4.94513 6.60859 4.92657 6.58949L4.63641 6.29104L4.39185 6.0395C4.34478 5.99108 4.28013 5.96377 4.2126 5.96377H3.83831C3.74261 5.96377 3.6553 5.90914 3.61347 5.82307L3.38884 5.36098C3.37228 5.32692 3.36368 5.28955 3.36368 5.25168V4.47996C3.36368 4.38629 3.31132 4.30048 3.22802 4.25764L2.78114 4.02781C2.74577 4.00962 2.70657 4.00013 2.6668 4.00013H2.19658C2.12905 4.00013 2.0644 3.97282 2.01733 3.9244L1.53085 3.42402C1.48223 3.37402 1.45672 3.30599 1.46046 3.23635L1.49316 2.62739C1.4977 2.54285 1.51357 2.45929 1.54034 2.37897L1.65227 2.0432C1.87098 1.38707 2.38792 0.873558 3.0455 0.659224L3.05974 0.654815C3.66901 0.466234 4.32388 0.487134 4.91987 0.714181C4.94274 0.722892 4.96343 0.736497 4.98049 0.754043L5.42152 1.20768C5.51586 1.30471 5.51586 1.45919 5.42152 1.55622L4.70716 2.291C4.66179 2.33766 4.63641 2.40018 4.63641 2.46527V2.71165C4.63641 2.86997 4.49111 2.98843 4.33603 2.95652L3.34587 2.75283C3.1908 2.72093 3.0455 2.83938 3.0455 2.99771V3.09559C3.0455 3.23366 3.15743 3.34559 3.2955 3.34559H3.75004C3.88812 3.34559 4.00004 3.45752 4.00004 3.59559V3.75013C4.00004 3.8882 4.11197 4.00013 4.25004 4.00013H5.16715C5.23467 4.00013 5.29933 4.02745 5.3464 4.07586L5.56243 4.29807C5.58132 4.3175 5.60324 4.33373 5.62734 4.34612L6.19093 4.63596C6.21503 4.64836 6.23695 4.66459 6.25584 4.68402L6.47475 4.90918C6.52012 4.95584 6.5455 5.01836 6.5455 5.08345V5.26973C6.5455 5.2959 6.54139 5.3219 6.53332 5.3468Z" fill="#A9B2BC"/>
<svg viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
<path d="M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8ZM6.53332 5.3468L6.24528 6.23562C6.23346 6.27208 6.21342 6.30534 6.1867 6.33282L5.90913 6.61831L5.59095 6.94559L5.52111 7.01743C5.4003 7.14169 5.19279 7.10832 5.11702 6.95246L4.97216 6.65447C4.96052 6.63052 4.94513 6.60859 4.92657 6.58949L4.63641 6.29104L4.39185 6.0395C4.34478 5.99108 4.28013 5.96377 4.2126 5.96377H3.83831C3.74261 5.96377 3.6553 5.90914 3.61347 5.82307L3.38884 5.36098C3.37228 5.32692 3.36368 5.28955 3.36368 5.25168V4.47996C3.36368 4.38629 3.31132 4.30048 3.22802 4.25764L2.78114 4.02781C2.74577 4.00962 2.70657 4.00013 2.6668 4.00013H2.19658C2.12905 4.00013 2.0644 3.97282 2.01733 3.9244L1.53085 3.42402C1.48223 3.37402 1.45672 3.30599 1.46046 3.23635L1.49316 2.62739C1.4977 2.54285 1.51357 2.45929 1.54034 2.37897L1.65227 2.0432C1.87098 1.38707 2.38792 0.873558 3.0455 0.659224L3.05974 0.654815C3.66901 0.466234 4.32388 0.487134 4.91987 0.714181C4.94274 0.722892 4.96343 0.736497 4.98049 0.754043L5.42152 1.20768C5.51586 1.30471 5.51586 1.45919 5.42152 1.55622L4.70716 2.291C4.66179 2.33766 4.63641 2.40018 4.63641 2.46527V2.71165C4.63641 2.86997 4.49111 2.98843 4.33603 2.95652L3.34587 2.75283C3.1908 2.72093 3.0455 2.83938 3.0455 2.99771V3.09559C3.0455 3.23366 3.15743 3.34559 3.2955 3.34559H3.75004C3.88812 3.34559 4.00004 3.45752 4.00004 3.59559V3.75013C4.00004 3.8882 4.11197 4.00013 4.25004 4.00013H5.16715C5.23467 4.00013 5.29933 4.02745 5.3464 4.07586L5.56243 4.29807C5.58132 4.3175 5.60324 4.33373 5.62734 4.34612L6.19093 4.63596C6.21503 4.64836 6.23695 4.66459 6.25584 4.68402L6.47475 4.90918C6.52012 4.95584 6.5455 5.01836 6.5455 5.08345V5.26973C6.5455 5.2959 6.54139 5.3219 6.53332 5.3468Z" fill="#A9B2BC" />
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
res/img/noise.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.1 KiB

25
res/themes/dark/css/_dark.scss
View file

@ -310,3 +310,28 @@ body {
background: #53232a;
}
// ********************
// Splash Page Gradient
.mx_SplashPage::before {
background-image:
radial-gradient(
53.85% 66.75% at 87.55% 0%,
hsla(0, 0%, 11%, 0.15) 0%,
hsla(250, 100%, 88%, 0) 100%
),
radial-gradient(
41.93% 41.93% at 0% 0%,
hsla(0, 0%, 38%, 0.28) 0%,
hsla(250, 100%, 88%, 0) 100%
),
radial-gradient(
100% 100% at 0% 0%,
hsla(250, 100%, 88%, 0.3) 0%,
hsla(0, 100%, 86%, 0) 100%
),
radial-gradient(
106.35% 96.26% at 100% 0%,
hsla(25, 100%, 88%, 0.4) 0%,
hsla(167, 76%, 82%, 0) 100%
) !important;
}

1
src/PosthogTrackers.ts
View file

@ -30,6 +30,7 @@ const notLoggedInMap: Record<Exclude<Views, Views.LOGGED_IN>, ScreenName> = {
[Views.WELCOME]: "Welcome",
[Views.LOGIN]: "Login",
[Views.REGISTER]: "Register",
[Views.USE_CASE_SELECTION]: "UseCaseSelection",
[Views.FORGOT_PASSWORD]: "ForgotPassword",
[Views.COMPLETE_SECURITY]: "CompleteSecurity",
[Views.E2E_SETUP]: "E2ESetup",

3
src/Views.ts
View file

@ -38,6 +38,9 @@ enum Views {
// flow to setup SSSS / cross-signing on this account
E2E_SETUP,
// screen that allows users to select which use case they’ll use matrix for
USE_CASE_SELECTION,
// we are logged in with an active matrix client. The logged_in state also
// includes guests users as they too are logged in at the client level.
LOGGED_IN,

46
src/components/structures/MatrixChat.tsx
View file

@ -68,6 +68,7 @@ import { FontWatcher } from '../../settings/watchers/FontWatcher';
import { storeRoomAliasInCache } from '../../RoomAliasCache';
import ToastStore from "../../stores/ToastStore";
import * as StorageManager from "../../utils/StorageManager";
import { UseCase } from "../../settings/enums/UseCase";
import type LoggedInViewType from "./LoggedInView";
import LoggedInView from './LoggedInView';
import { Action } from "../../dispatcher/actions";
@ -129,6 +130,7 @@ import { SnakedObject } from "../../utils/SnakedObject";
import { leaveRoomBehaviour } from "../../utils/leave-behaviour";
import VideoChannelStore from "../../stores/VideoChannelStore";
import { IRoomStateEventsActionPayload } from "../../actions/MatrixActionCreators";
import { UseCaseSelection } from '../views/elements/UseCaseSelection';
// legacy export
export { default as Views } from "../../Views";
@ -755,7 +757,8 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
this.state.view !== Views.LOGIN &&
this.state.view !== Views.REGISTER &&
this.state.view !== Views.COMPLETE_SECURITY &&
this.state.view !== Views.E2E_SETUP
this.state.view !== Views.E2E_SETUP &&
this.state.view !== Views.USE_CASE_SELECTION
) {
this.onLoggedIn();
}
@ -1206,6 +1209,40 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
private async onLoggedIn() {
ThemeController.isLogin = false;
this.themeWatcher.recheck();
StorageManager.tryPersistStorage();
if (
MatrixClientPeg.currentUserIsJustRegistered() &&
SettingsStore.getValue("FTUE.useCaseSelection") === null
) {
this.setStateForNewView({ view: Views.USE_CASE_SELECTION });
// Listen to changes in settings and hide the use case screen if appropriate - this is necessary because
// account settings can still be changing at this point in app init (due to the initial sync being cached,
// then subsequent syncs being received from the server)
//
// This seems unlikely for something that should happen directly after registration, but if a user does
// their initial login on another device/browser than they registered on, we want to avoid asking this
// question twice
//
// initPosthogAnalyticsToast pioneered this technique, we’re just reusing it here.
SettingsStore.watchSetting("FTUE.useCaseSelection", null,
(originalSettingName, changedInRoomId, atLevel, newValueAtLevel, newValue) => {
if (newValue !== null && this.state.view === Views.USE_CASE_SELECTION) {
this.onShowPostLoginScreen();
}
});
} else {
return this.onShowPostLoginScreen();
}
}
private async onShowPostLoginScreen(useCase?: UseCase) {
if (useCase) {
PosthogAnalytics.instance.setProperty("ftueUseCaseSelection", useCase);
SettingsStore.setValue("FTUE.useCaseSelection", null, SettingLevel.ACCOUNT, useCase);
}
this.setStateForNewView({ view: Views.LOGGED_IN });
// If a specific screen is set to be shown after login, show that above
// all else, as it probably means the user clicked on something already.
@ -1243,8 +1280,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
this.showScreenAfterLogin();
}
StorageManager.tryPersistStorage();
// Will be moved to a pre-login flow as well
if (PosthogAnalytics.instance.isEnabled() && SettingsStore.isLevelSupported(SettingLevel.ACCOUNT)) {
this.initPosthogAnalyticsToast();
}
@ -2005,6 +2041,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
fragmentAfterLogin={fragmentAfterLogin}
/>
);
} else if (this.state.view === Views.USE_CASE_SELECTION) {
view = (
<UseCaseSelection onFinished={useCase => this.onShowPostLoginScreen(useCase)} />
);
} else {
logger.error(`Unknown view ${this.state.view}`);
}

27
src/components/structures/SplashPage.tsx Normal file
View file

@ -0,0 +1,27 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import classNames from "classnames";
import React, { DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
interface Props extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
className?: string;
children?: ReactNode;
}
export default function SplashPage({ children, className, ...other }: Props) {
const classes = classNames(className, "mx_SplashPage");
return <main {...other} className={classes}>
{ children }
</main>;
}

86
src/components/views/elements/UseCaseSelection.tsx Normal file
View file

@ -0,0 +1,86 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import classNames from "classnames";
import React, { useEffect, useState } from 'react';
import { _t } from "../../../languageHandler";
import { UseCase } from "../../../settings/enums/UseCase";
import SplashPage from "../../structures/SplashPage";
import AccessibleButton from "../elements/AccessibleButton";
import { UseCaseSelectionButton } from "./UseCaseSelectionButton";
interface Props {
onFinished: (useCase: UseCase) => void;
}
const TIMEOUT = 1500;
export function UseCaseSelection({ onFinished }: Props) {
const [selection, setSelected] = useState<UseCase | null>(null);
useEffect(() => {
if (selection) {
setSelected(selection);
let handler: number | null = setTimeout(() => {
handler = null;
onFinished(selection);
}, TIMEOUT);
return () => {
clearTimeout(handler);
handler = null;
};
}
}, [selection, onFinished]);
return (
<SplashPage className={classNames(
"mx_UseCaseSelection", {
"mx_UseCaseSelection_selected": selection !== null,
},
)}>
<div className="mx_UseCaseSelection_title mx_UseCaseSelection_slideIn">
<h1>{ _t("You're in") }</h1>
</div>
<div className="mx_UseCaseSelection_info mx_UseCaseSelection_slideInDelayed">
<h2>{ _t("Who will you chat to the most?") }</h2>
<h4>{ _t("We'll help you get connected.") }</h4>
</div>
<div className="mx_UseCaseSelection_options mx_UseCaseSelection_slideInDelayed">
<UseCaseSelectionButton
useCase={UseCase.PersonalMessaging}
selected={selection === UseCase.PersonalMessaging}
onClick={setSelected}
/>
<UseCaseSelectionButton
useCase={UseCase.WorkMessaging}
selected={selection === UseCase.WorkMessaging}
onClick={setSelected}
/>
<UseCaseSelectionButton
useCase={UseCase.CommunityMessaging}
selected={selection === UseCase.CommunityMessaging}
onClick={setSelected}
/>
</div>
<div className="mx_UseCaseSelection_skip mx_UseCaseSelection_slideInDelayed">
<AccessibleButton kind="link" onClick={async () => setSelected(UseCase.Skip)}>
{ _t("Skip") }
</AccessibleButton>
</div>
</SplashPage>
);
}

59
src/components/views/elements/UseCaseSelectionButton.tsx Normal file
View file

@ -0,0 +1,59 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import classNames from "classnames";
import React from "react";
import { _t } from "../../../languageHandler";
import { UseCase } from "../../../settings/enums/UseCase";
import AccessibleButton from "./AccessibleButton";
interface Props {
useCase: UseCase;
selected: boolean;
onClick: (useCase: UseCase) => void;
}
export function UseCaseSelectionButton({ useCase, onClick, selected }: Props) {
let label: string;
switch (useCase) {
case UseCase.PersonalMessaging:
label = _t("Friends and family");
break;
case UseCase.WorkMessaging:
label = _t("Coworkers and teams");
break;
case UseCase.CommunityMessaging:
label = _t("Online community members");
break;
}
return (
<AccessibleButton
className={classNames("mx_UseCaseSelectionButton", {
"mx_UseCaseSelectionButton_selected": selected,
})}
onClick={async () => onClick(useCase)}>
<div className={classNames("mx_UseCaseSelectionButton_icon", {
"mx_UseCaseSelectionButton_messaging": useCase === UseCase.PersonalMessaging,
"mx_UseCaseSelectionButton_work": useCase === UseCase.WorkMessaging,
"mx_UseCaseSelectionButton_community": useCase === UseCase.CommunityMessaging,
})} />
<span>{ label }</span>
<div className="mx_UseCaseSelectionButton_selectedIcon" />
</AccessibleButton>
);
}

8
src/i18n/strings/en_EN.json
View file

@ -2375,6 +2375,13 @@
"Continue with %(provider)s": "Continue with %(provider)s",
"Sign in with single sign-on": "Sign in with single sign-on",
"And %(count)s more...|other": "And %(count)s more...",
"You're in": "You're in",
"Who will you chat to the most?": "Who will you chat to the most?",
"We'll help you get connected.": "We'll help you get connected.",
"Skip": "Skip",
"Friends and family": "Friends and family",
"Coworkers and teams": "Coworkers and teams",
"Online community members": "Online community members",
"Enter a server name": "Enter a server name",
"Looks good": "Looks good",
"You are not allowed to view this server's rooms list": "You are not allowed to view this server's rooms list",
@ -2744,7 +2751,6 @@
"Please check your email and click on the link it contains. Once this is done, click continue.": "Please check your email and click on the link it contains. Once this is done, click continue.",
"Email address": "Email address",
"This will allow you to reset your password and receive notifications.": "This will allow you to reset your password and receive notifications.",
"Skip": "Skip",
"Share Room": "Share Room",
"Link to most recent message": "Link to most recent message",
"Share User": "Share User",

4
src/settings/Settings.tsx
View file

@ -698,6 +698,10 @@ export const SETTINGS: {[setting: string]: ISetting} = {
displayName: _td('Send analytics data'),
default: null,
},
"FTUE.useCaseSelection": {
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
default: null,
},
"autocompleteDelay": {
supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
default: 200,

22
src/settings/enums/UseCase.tsx Normal file
View file

@ -0,0 +1,22 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
export enum UseCase {
PersonalMessaging = "PersonalMessaging",
WorkMessaging = "WorkMessaging",
CommunityMessaging = "CommunityMessaging",
Skip = "Skip",
}

4
test/end-to-end-tests/src/usecases/signup.ts
View file

@ -77,6 +77,10 @@ export async function signup(
const acceptButton = await session.query('.mx_InteractiveAuthEntryComponents_termsSubmit');
await acceptButton.click();
//now click the 'Skip' button to skip the use case selection
const skipUseCaseButton = await session.query('.mx_UseCaseSelection_skip .mx_AccessibleButton');
await skipUseCaseButton.click();
//wait for registration to finish so the hash gets set
//onhashchange better?

8
yarn.lock
View file

@ -1570,10 +1570,10 @@
resolved "https://registry.yarnpkg.com/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz#497c67a1cef50d1a2459ba60f315e448d2ad87fe"
integrity sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==
"@matrix-org/analytics-events@^0.1.1":
version "0.1.1"
resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.1.1.tgz#ae95b0c1fb86a094c5f51d121f10e6a1b1ddca68"
integrity sha512-PIDkfYMNmph6x/rfgtIeQXUWj9hGzTLnOCFUYZFBnoTiS4UXkH73bz77Ho12uoUezUz4v40mxTXdrFxp8Zo6zA==
"@matrix-org/analytics-events@^0.1.2":
version "0.1.2"
resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.1.2.tgz#820b1a78d1471f21da96274d92eb161b41f9e880"
integrity sha512-TumnmENiuTtSmfcVwzovLDq4pRgRlUmuq1bxOtli9XWMgscs3Z6URu5PJcvuFj87L7bKJrGCNS3zR+DMUxc7kg==
"@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz":
version "3.2.8"