New User Onboarding Task List (#9083)
* Improve type of AccessibleButton to accurately represent available props * Update analytics events
This commit is contained in:
Janne Mareike Koschinski
GitHub
parent
45f6c32eb6
commit
1e4c336fed
32 changed files with 1261 additions and 22 deletions
101
res/css/views/user-onboarding/_UserOnboardingHeader.pcss
Normal file
101
res/css/views/user-onboarding/_UserOnboardingHeader.pcss
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
/*
|
||||
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_UserOnboardingHeader {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: $spacing-32;
|
||||
border-radius: 16px;
|
||||
background: $system;
|
||||
gap: $spacing-64;
|
||||
|
||||
animation-delay: 1500ms;
|
||||
animation-duration: 300ms;
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||
animation-name: mx_UserOnboardingHeader_slideIn;
|
||||
animation-fill-mode: backwards;
|
||||
will-change: opacity, transform;
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
margin: $spacing-32;
|
||||
}
|
||||
|
||||
.mx_UserOnboardingHeader_dot {
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
.mx_UserOnboardingHeader_content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-basis: 50%;
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
gap: $spacing-24;
|
||||
margin-right: auto;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton {
|
||||
margin-top: auto;
|
||||
align-self: flex-start;
|
||||
padding: $spacing-12 $spacing-24;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserOnboardingHeader_image {
|
||||
flex-basis: 30%;
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
align-self: center;
|
||||
height: calc(100% + $spacing-64 + $spacing-64);
|
||||
aspect-ratio: 4 / 3;
|
||||
object-fit: contain;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
margin-top: -$spacing-64;
|
||||
margin-bottom: -$spacing-64;
|
||||
|
||||
animation-delay: 1500ms;
|
||||
animation-duration: 300ms;
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||
animation-name: mx_UserOnboardingHeader_slideInLong;
|
||||
animation-fill-mode: backwards;
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mx_UserOnboardingHeader_slideIn {
|
||||
0% {
|
||||
transform: translate(0, 8px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mx_UserOnboardingHeader_slideInLong {
|
||||
0% {
|
||||
transform: translate(0, 32px);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
79
res/css/views/user-onboarding/_UserOnboardingList.pcss
Normal file
79
res/css/views/user-onboarding/_UserOnboardingList.pcss
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
/*
|
||||
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_UserOnboardingList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 $spacing-32;
|
||||
|
||||
animation-duration: 300ms;
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||
animation-name: mx_UserOnboardingList_slideIn;
|
||||
animation-fill-mode: backwards;
|
||||
will-change: opacity;
|
||||
|
||||
.mx_UserOnboardingList_header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
|
||||
.mx_UserOnboardingList_hint {
|
||||
color: $secondary-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserOnboardingList_progress {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
counter-reset: user-onboarding;
|
||||
|
||||
.mx_ProgressBar {
|
||||
width: auto;
|
||||
margin-top: $spacing-16;
|
||||
height: 16px;
|
||||
|
||||
@mixin ProgressBarBorderRadius 16px;
|
||||
}
|
||||
|
||||
.mx_UserOnboardingFeedback {
|
||||
margin-top: $spacing-16;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserOnboardingList_list {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr max-content;
|
||||
|
||||
appearance: none;
|
||||
list-style: none;
|
||||
margin: $spacing-32 0 0;
|
||||
padding: 0;
|
||||
|
||||
grid-gap: $spacing-24;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mx_UserOnboardingList_slideIn {
|
||||
0% {
|
||||
transform: translate(0, 8px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
35
res/css/views/user-onboarding/_UserOnboardingPage.pcss
Normal file
35
res/css/views/user-onboarding/_UserOnboardingPage.pcss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
/*
|
||||
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_UserOnboardingPage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
align-self: stretch;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto auto;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
||||
gap: $spacing-64;
|
||||
padding: $spacing-64 100px;
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
padding: $spacing-48 $spacing-32;
|
||||
}
|
||||
}
|
||||
116
res/css/views/user-onboarding/_UserOnboardingTask.pcss
Normal file
116
res/css/views/user-onboarding/_UserOnboardingTask.pcss
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
/*
|
||||
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_UserOnboardingTask {
|
||||
display: contents;
|
||||
|
||||
.mx_UserOnboardingTask_number {
|
||||
counter-increment: user-onboarding;
|
||||
grid-column: 1;
|
||||
color: $secondary-content;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
border: 2px solid $quinary-content;
|
||||
border-radius: 32px;
|
||||
line-height: 32px;
|
||||
align-self: center;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: counter(user-onboarding);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserOnboardingTask_content {
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
|
||||
transition: all 500ms;
|
||||
|
||||
.mx_UserOnboardingTask_description {
|
||||
font-size: $font-12px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserOnboardingTask_action.mx_AccessibleButton {
|
||||
grid-column: 3;
|
||||
min-width: 180px;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
grid-column: 2;
|
||||
margin-top: -16px;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_UserOnboardingTask_completed {
|
||||
.mx_UserOnboardingTask_number {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -2px;
|
||||
background: $accent;
|
||||
border-radius: 32px;
|
||||
|
||||
animation-duration: 300ms;
|
||||
animation-fill-mode: both;
|
||||
animation-name: mx_UserOnboardingTask_spring;
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-color: $background;
|
||||
content: "";
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
left: calc(50% - 8px);
|
||||
top: calc(50% - 8px);
|
||||
mask-image: url("$(res)/img/element-icons/check-white.svg");
|
||||
|
||||
animation-duration: 300ms;
|
||||
animation-fill-mode: both;
|
||||
animation-name: mx_UserOnboardingTask_spring;
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserOnboardingTask_content {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mx_UserOnboardingTask_spring {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.6);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue