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

fix(console): onboarding actions with external links (#6822)

Browse Source 
* fix: attr for external links

* template outlet
This commit is contained in:
Max Peintner
2023-11-22 09:14:37 +00:00
committed by GitHub
parent d4b18a3eda
commit 5fa596a871
3 changed files with 63 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/modules/onboarding/onboarding.component.html
+59 -41
View File
@@ -24,53 +24,71 @@
>
<ng-container *ngFor="let action of actions | async">
<a
*ngIf="!action[1].externalLink"
[routerLink]="action[1].link"
[queryParams]="{ id: action[1].fragment }"
class="action-card card"
[ngClass]="{ done: action[1].reached !== undefined }"
>
<div class="state-circle">
<mat-icon
*ngIf="action[1]?.reached !== undefined"
matTooltip="{{ action[1].reached | milestone }}"
class="success-icon"
>check_circle</mat-icon
>
</div>
<div class="action-content">
<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.MILESTONES.' + action[0] + '.title' | translate }}</span>
<span class="cnsl-secondary-text description">{{
'ONBOARDING.MILESTONES.' + action[0] + '.description' | translate
}}</span>
</div>
</div>
<span class="fill-space"></span>
<div class="action-row">
<span>{{ 'ONBOARDING.MILESTONES.' + action[0] + '.action' | translate }}</span>
<mat-icon class="icon">keyboard_arrow_right</mat-icon>
</div>
</div>
<ng-template
[ngTemplateOutlet]="onboardingContent"
[ngTemplateOutletContext]="{ title: action[0], action: action[1] }"
>
</ng-template>
</a>
<a
*ngIf="action[1].externalLink"
[href]="action[1].link"
class="action-card card"
[ngClass]="{ done: action[1].reached !== undefined }"
>
<ng-template
[ngTemplateOutlet]="onboardingContent"
[ngTemplateOutletContext]="{ title: action[0], action: action[1] }"
>
</ng-template>
</a>
</ng-container>
</div>
</div>
<ng-template #onboardingContent let-action="action" let-title="title">
<div class="state-circle">
<mat-icon *ngIf="action?.reached !== undefined" matTooltip="{{ action.reached | milestone }}" class="success-icon"
>check_circle</mat-icon
>
</div>
<div class="action-content">
<div class="action-content-row">
<div
class="icon-wrapper"
[ngStyle]="{
background: (themeService.isDarkTheme | async) ? action.darkcolor + 50 : action.lightcolor + 50
}"
>
<div
class="inner"
[ngStyle]="{
background: (themeService.isDarkTheme | async) ? action.darkcolor : action.lightcolor,
color: (themeService.isDarkTheme | async) ? action.lightcolor : action.darkcolor
}"
>
<i class="{{ action.iconClasses }}"></i>
</div>
</div>
<div class="text-block">
<span class="name">{{ 'ONBOARDING.MILESTONES.' + title + '.title' | translate }}</span>
<span class="cnsl-secondary-text description">{{
'ONBOARDING.MILESTONES.' + title + '.description' | translate
}}</span>
</div>
</div>
<span class="fill-space"></span>
<div class="action-row">
<span>{{ 'ONBOARDING.MILESTONES.' + title + '.action' | translate }}</span>
<mat-icon class="icon">keyboard_arrow_right</mat-icon>
</div>
</div>
</ng-template>