andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-10-30 19:12:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(console): refine onboarding styles and behavior, i18n (#5616)

Browse Source 
* fix: console onboarding styles and behavior, i18n

* action-row classes

* fix: only consider real user events in the onboarding view (#5617)

* fix(onboarding): only human events

* explicitly exclude system api events

---------

Co-authored-by: Max Peintner <[email protected]>

---------

Co-authored-by: Elio Bischof <[email protected]>
Co-authored-by: Elio Bischof <[email protected]>
This commit is contained in:
Max Peintner
2023-04-06 12:02:46 +00:00
committed by GitHub
co-authored by Elio Bischof Elio Bischof
parent 698f46fe6a
commit 2ee7b9c381
18 changed files with 364 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/modules/nav/nav.component.scss
+1
View File
@@ -189,6 +189,7 @@
border: none;
padding: 2px;
border-radius: 50vw;
cursor: pointer;
&:hover {
background: if($is-dark-theme, #ffffff, $primary-color);
console/src/app/modules/onboarding-card/onboarding-card.component.scss
+1
View File
@@ -72,6 +72,7 @@
margin-right: 1rem;
background-color: if($is-dark-theme, map-get($background, state), #e4e7e4);
box-shadow: 0 0 3px #0000001a;
border: 1px solid rgba(#8795a1, 0.2);
i {
font-size: 1rem;
console/src/app/modules/onboarding/onboarding.component.html
+25 -9
View File
@@ -1,7 +1,5 @@
<div class="onboarding-header">
<h1 class="title" data-e2e="authenticated-welcome">{{ 'HOME.WELCOME' | translate }}</h1>
<p class="desc cnsl-secondary-text">{{ 'ONBOARDING.DESCRIPTION' | translate }}</p>
<h2 class="desc">{{ 'ONBOARDING.DESCRIPTION' | translate }}</h2>
<ng-container *ngIf="!adminService.hideOnboarding && (adminService.progressAllDone | async) === false">
<div class="onboarding-progress-bar-wrapper">
@@ -38,16 +36,34 @@
</div>
<div class="action-content">
<div class="text-block">
<span class="name">{{ 'ONBOARDING.EVENTS.' + action[0] + '.title' | translate }}</span>
<span class="cnsl-secondary-text description">{{
'ONBOARDING.EVENTS.' + action[0] + '.description' | translate
}}</span>
<div class="action-content-row">
<div
class="icon-wrapper"
[ngStyle]="{
background: (themeService.isDarkTheme | async) ? action[1].darkcolor + 50 : action[1].lightcolor + 50
}"
>
<div
class="inner"
[ngStyle]="{
background: (themeService.isDarkTheme | async) ? action[1].darkcolor : action[1].lightcolor,
color: (themeService.isDarkTheme | async) ? action[1].lightcolor : action[1].darkcolor
}"
>
<i class="{{ action[1].iconClasses }}"></i>
</div>
</div>
<div class="text-block">
<span class="name">{{ 'ONBOARDING.EVENTS.' + action[0] + '.title' | translate }}</span>
<span class="cnsl-secondary-text description">{{
'ONBOARDING.EVENTS.' + action[0] + '.description' | translate
}}</span>
</div>
</div>
<span class="fill-space"></span>
<div class="action-row">
<span>{{ 'ACTIONS.SETUP' | translate }}</span>
<span>{{ 'ONBOARDING.EVENTS.' + action[0] + '.action' | translate }}</span>
<mat-icon class="icon">keyboard_arrow_right</mat-icon>
</div>
</div>
console/src/app/modules/onboarding/onboarding.component.scss
+45 -15
View File
@@ -23,14 +23,10 @@
flex-direction: column;
margin-bottom: 2rem;
.title {
font-size: 2rem;
margin-bottom: 1rem;
}
.desc {
font-size: 14px;
font-size: 1.2rem;
margin-top: 0;
text-transform: uppercase;
}
.onboarding-progress-bar-wrapper {
@@ -71,7 +67,6 @@
.action-card {
position: relative;
z-index: 100;
margin: 1rem;
flex-basis: 270px;
text-decoration: none;
@@ -91,18 +86,46 @@
height: 100%;
padding-right: 0.5rem;
.text-block {
.action-content-row {
display: flex;
flex-direction: column;
color: map-get($foreground, text);
padding-top: 1rem;
flex-direction: row;
align-items: flex-start;
.name {
margin-bottom: 1rem;
.icon-wrapper {
display: flex;
justify-content: center;
align-items: center;
padding: 0.5rem;
border-radius: 50vw;
flex-shrink: 0;
margin-right: 1rem;
margin-top: 1rem;
.inner {
border-radius: 50vw;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.75rem;
}
}
.description {
font-size: 14px;
.text-block {
display: flex;
flex-direction: column;
color: map-get($foreground, text);
padding-top: 1rem;
flex: 1;
.name {
margin-bottom: 1rem;
}
.description {
font-size: 14px;
}
}
}
@@ -111,6 +134,12 @@
}
}
&.done {
.action-content {
opacity: 0.5;
}
}
.state-circle {
position: absolute;
top: 0;
@@ -126,6 +155,7 @@
margin-right: 1rem;
background-color: if($is-dark-theme, map-get($background, state), #e4e7e4);
box-shadow: 0 0 3px #0000001a;
border: 1px solid rgba(#8795a1, 0.2);
i {
font-size: 1rem;
console/src/app/modules/onboarding/onboarding.component.ts
+2 -1
View File
@@ -1,5 +1,6 @@
import { Component } from '@angular/core';
import { AdminService } from 'src/app/services/admin.service';
import { ThemeService } from 'src/app/services/theme.service';
import { ONBOARDING_EVENTS } from 'src/app/utils/onboarding';
@Component({
@@ -10,7 +11,7 @@ import { ONBOARDING_EVENTS } from 'src/app/utils/onboarding';
export class OnboardingComponent {
public actions = this.adminService.progressEvents;
constructor(public adminService: AdminService) {
constructor(public adminService: AdminService, public themeService: ThemeService) {
this.adminService.loadEvents.next(ONBOARDING_EVENTS);
}
}
console/src/app/modules/shortcuts/shortcuts.component.scss
+5
View File
@@ -28,6 +28,11 @@
display: flex;
align-items: center;
h2 {
text-transform: uppercase;
font-size: 1.2rem;
}
.shortcut-btn {
margin-left: 0.5rem;
}