fix(console): create user route, common mixin for app grid, avatar (#505)

* warn color, move themed conf to destination

* fix user creation

* cleanup create component
This commit is contained in:
Max Peintner
2020-07-22 14:40:37 +02:00
committed by GitHub
parent c66d9d3490
commit 7dcc5f9e58
12 changed files with 85 additions and 140 deletions
@@ -1,4 +1,4 @@
<div class="header">
<div class="app-grid-header">
<h3>{{'APP.LIST' | translate}}</h3>
<span class="fill-space"></span>
<button mat-icon-button (click)="closeView()">
@@ -1,35 +1,57 @@
.header {
display: flex;
align-items: center;
@import '~@angular/material/theming';
.fill-space {
flex: 1;
}
}
@mixin application-grid-theme($theme) {
$primary: map-get($theme, primary);
$primary-dark: mat-color($primary, A900);
$accent: map-get($theme, accent);
$accent-color: mat-color($accent, 500);
.app-container {
display: flex;
flex-wrap: wrap;
margin: 0 -1rem;
padding-bottom: 2rem;
.app-wrap {
outline: none;
.app-grid-header {
display: flex;
flex-direction: column;
align-items: center;
max-width: 150px;
.morph-card {
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
.fill-space {
flex: 1;
}
}
.name {
font-size: .8rem;
color: #8a868a;
.app-container {
display: flex;
flex-wrap: wrap;
margin: 0 -1rem;
padding-bottom: 2rem;
.app-wrap {
outline: none;
display: flex;
flex-direction: column;
align-items: center;
max-width: 150px;
.morph-card {
cursor: pointer;
animation: all .2s;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
height: 80px;
width: 80px;
margin: 1rem;
border-radius: .5rem;
border: 1px solid $accent-color;
background-color: $primary-dark;
transition: background-color .4s ease-in-out;
&.add {
background: $accent-color;
}
}
.name {
font-size: .8rem;
color: #8a868a;
}
}
}
}
@@ -15,10 +15,10 @@
<span class="fill-space"></span>
<button mat-stroked-button color="accent" [disabled]="isZitadel"
<button mat-stroked-button color="warn" [disabled]="isZitadel"
*ngIf="project?.state === ProjectState.PROJECTSTATE_ACTIVE" class="state-button"
(click)="changeState(ProjectState.PROJECTSTATE_INACTIVE)">{{'PROJECT.TABLE.DEACTIVATE' | translate}}</button>
<button mat-stroked-button color="accent" [disabled]="isZitadel"
<button mat-stroked-button color="warn" [disabled]="isZitadel"
*ngIf="project?.state === ProjectState.PROJECTSTATE_INACTIVE" class="state-button"
(click)="changeState(ProjectState.PROJECTSTATE_ACTIVE)">{{'PROJECT.TABLE.ACTIVATE' | translate}}</button>
@@ -27,10 +27,10 @@
<span class="fill-space"></span>
<div>
<button mat-stroked-button color="accent"
<button mat-stroked-button color="warn"
*ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_ACTIVE" class="state-button"
(click)="changeState(ProjectGrantState.PROJECTGRANTSTATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' | translate}}</button>
<button mat-stroked-button color="accent"
<button mat-stroked-button color="warn"
*ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_INACTIVE" class="state-button"
(click)="changeState(ProjectGrantState.PROJECTGRANTSTATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' | translate}}</button>
</div>