TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-06-01 09:49:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(console): change icon of past steps to checkbox (#5580)

Browse Source 
checkbox for app create stepper
This commit is contained in:
Miguel Cabrerizo 2023-04-11 15:07:35 +02:00 committed by GitHub
parent ef7c53a6dc
commit c0c76a8ea9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 47 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
console/src/app/modules/create-layout/create-layout.component.scss
View File

@ -1,3 +1,33 @@
@use '@angular/material' as mat;
@mixin app-create-theme($theme) {
$primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500);
// Number of steps creating app
$steps: 3;
.app-create-wrapper {
// Reference: https://github.com/angular/components/issues/10681#issuecomment-695185806
@for $i from 1 through $steps {
@for $j from 1 through $i {
.last-edited-step-#{$i}
.mat-horizontal-stepper-header-container
.mat-step-header:nth-child(#{1 + 2 * ($j - 1)})::after,
.last-edited-step-#{$i}
.mat-horizontal-stepper-header-container
.mat-stepper-horizontal-line:nth-child(#{2 + 2 * ($j - 1)}),
.last-edited-step-#{$i}
.mat-horizontal-stepper-header-container
.mat-step-header:nth-child(#{3 + 2 * ($j - 1)})::before {
border-top-width: 3px;
border-top-color: $primary-color;
}
}
}
}
}
.create-layout-container {
display: flex;
align-items: center;

8
console/src/app/pages/projects/apps/app-create/app-create.component.html
View File

@ -1,5 +1,6 @@
<cnsl-create-layout
title="{{ 'APP.PAGES.CREATE' | translate }}"
class="app-create-wrapper"
[createSteps]="
appType?.value?.createType === AppCreateType.OIDC
? appType?.value.oidcAppType !== OIDCAppType.OIDC_APP_TYPE_NATIVE
@ -22,7 +23,7 @@
</mat-checkbox>
<mat-horizontal-stepper
class="stepper"
class="stepper {{ 'last-edited-step-' + stepper.selectedIndex }}"
*ngIf="!devmode"
linear
#stepper
@ -334,6 +335,11 @@
</button>
</div>
</mat-step>
<!-- Icon override -->
<ng-template matStepperIcon="edit">
<mat-icon>check</mat-icon>
</ng-template>
</mat-horizontal-stepper>
<div *ngIf="devmode" class="dev">

8
console/src/app/pages/projects/apps/app-create/app-create.component.scss
View File

@ -50,6 +50,14 @@ p.desc {
.step-description {
font-size: 0.9rem;
}
.mat-step-icon-content {
position: absolute;
transform: translate(-50%, -50%);
display: flex;
top: 50%;
left: 50%;
}
}
.checkbox-container {

2
console/src/component-themes.scss
View File

@ -65,6 +65,7 @@
@import 'src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss';
@import 'src/app/modules/policies/login-policy/factor-table/factor-table.component.scss';
@import 'src/app/modules/info-overlay/info-overlay.component.scss';
@import 'src/app/modules/create-layout/create-layout.component.scss';
@import './styles/codemirror.scss';
@mixin component-themes($theme) {
@ -136,4 +137,5 @@
@include action-keys-theme($theme);
@include codemirror-theme($theme);
@include contact-theme($theme);
@include app-create-theme($theme);
}