feat(console): apply private labeling settings (#2059)

* fetch org design an calc palette

* distinct theme deriv

* calculate self theme

* background palette, fix styles

* component fixes, warn color

* warn color

* stylelint config, set warn color

* lint

* fallback theme

* lint

* granted, owned proejct grid

* dynamic privacy policy, fix home layout, dismissables, info-section

* lint

* apply theme from settings

* enable cache

* fix: add primary tint
This commit is contained in:
Max Peintner
2021-07-28 14:59:52 +02:00
committed by GitHub
parent fb06aed238
commit 7d3c768d8b
47 changed files with 963 additions and 588 deletions
@@ -1,6 +1,6 @@
<app-detail-layout [backRouterLink]="[ '/users/list/machines']" title="{{ 'USER.CREATE.TITLE' | translate }}"
description="{{ 'USER.CREATE.DESCRIPTION' | translate }}">
<mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>
<mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
<form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="form">
<div class="content">
@@ -1,6 +1,6 @@
<app-detail-layout [backRouterLink]="[ '/users/list/humans']" title="{{ 'USER.CREATE.TITLE' | translate }}"
description="{{ 'USER.CREATE.DESCRIPTION' | translate }}">
<mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>
<mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
<form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="form">
<div class="content">
@@ -10,7 +10,7 @@
<app-theme-setting></app-theme-setting>
</div>
</div>
<mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>
<mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
<span *ngIf="!loading && !user">{{ 'USER.PAGES.NOUSER' | translate }}</span>
@@ -3,12 +3,14 @@
@mixin theme-card($theme) {
/* stylelint-disable */
$primary: map-get($theme, primary);
$primary-dark: mat.get-color-from-palette($primary, A900);
$background: map-get($theme, background);
$is-dark-theme: map-get($theme, is-dark);
$back: map-get($background, background);
/* stylelint-enable */
.theme-conent,
.crescent {
background-color: $primary-dark;
background-color: $back;
transition: background-color .3s cubic-bezier(.645, .045, .355, 1); // cubic-bezier(.645, .045, .355, 1);
}
}
@@ -1,6 +1,3 @@
$dark-background: #212224;
$light-background: rgb(220, 220, 220);
:root {
transition: none;
}
@@ -31,7 +28,6 @@ $light-background: rgb(220, 220, 220);
right: 0;
width: 40px;
height: 40px;
background: $light-background;
transform: scale(0);
transform-origin: top right;
transition: transform .2s cubic-bezier(.645, .045, .355, 1);
@@ -57,7 +53,6 @@ label {
.toggle {
position: absolute;
background-color: $light-background;
box-shadow: 0 2px 15px rgba(0, 0, 0, .15);
}
@@ -82,7 +77,6 @@ label {
[type="checkbox"]:checked {
.toggle {
transform: translateX(100%);
background-color: $dark-background;
}
.light {
@@ -101,7 +95,6 @@ label {
[type="checkbox"]:checked + .theme-app .crescent {
transform: scale(1);
background: $dark-background;
}
[type="checkbox"]:checked + .theme-app .circle {
@@ -111,8 +104,3 @@ label {
[type="checkbox"]:checked + .theme-app .main-circle {
background: linear-gradient(40deg, #8983f7, #a3dafb 70%);
}
[type="checkbox"]:checked + .app .toggle {
transform: translateX(100%);
background-color: #34323d;
}
@@ -3,9 +3,8 @@
@mixin membership-theme($theme) {
/* stylelint-disable */
$primary: map-get($theme, primary);
$primary-dark: mat.get-color-from-palette($primary, A900);
$accent: map-get($theme, accent);
$accent-color: mat.get-color-from-palette($accent, 500);
$is-dark-theme: map-get($theme, is-dark);
$primary-color: mat.get-color-from-palette($primary, 500);
/* stylelint-enable */
.membership-groups {
@@ -91,7 +90,7 @@
font-size: 8px;
border-radius: .5rem;
transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
background-color: $accent-color;
background-color: $primary-color;
cursor: pointer;
flex-direction: column;
overflow: hidden;
@@ -24,7 +24,7 @@
</ng-template>
</div>
<mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>
<mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
<span *ngIf="!loading && !user">{{ 'USER.PAGES.NOUSER' | translate }}</span>