andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-10-31 03:22:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/modules/app-card/app-card.component.scss
+4 -2
View File
@@ -3,10 +3,12 @@
@mixin app-card-theme($theme) {
/* stylelint-disable */
$primary: map-get($theme, primary);
$primary-dark: mat.get-color-from-palette($primary, A900);
$background: map-get($theme, background);
$accent: map-get($theme, accent);
$is-dark-theme: map-get($theme, is-dark);
$accent-color: mat.get-color-from-palette($primary, 500);
$back: map-get($background, background);
/* stylelint-enable */
.cnsl-app-card {
@@ -25,7 +27,7 @@
text-transform: uppercase;
border-radius: .5rem;
font-weight: 800;
background-color: $primary-dark;
background-color: $back;
transition: background-color box-shadow .3s ease-in;
&.web {
console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss
+1 -1
View File
@@ -93,7 +93,7 @@
span {
margin: 2rem;
font-size: 30px;
color: if($is-dark-theme, #21222450, #ffffff50);
color: if($is-dark-theme, #00000050, #ffffff50);
}
}
console/src/app/modules/app-radio/app-type-radio/app-type-radio.component.scss
+1 -1
View File
@@ -50,7 +50,7 @@
span {
margin: 2rem;
font-size: 30px;
color: if($is-dark-theme, #21222450, #ffffff50);
color: if($is-dark-theme, #00000050, #ffffff50);
}
}
console/src/app/modules/card/card.component.html
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="card">
<div class="card" [ngClass]="{'nomargin': nomargin}">
<div *ngIf="title || description" class="header" [ngClass]="{'bottom-margin': expanded}">
<div *ngIf="title" class="row">
<h2 class="title">{{title}}</h2>
console/src/app/modules/card/card.component.scss
+4 -1
View File
@@ -1,4 +1,3 @@
.card {
margin: 1rem 0;
padding: 1.5rem;
@@ -6,6 +5,10 @@
padding-top: 1rem;
min-width: 300px;
&.nomargin {
margin: 0;
}
.header {
margin-top: 0;
console/src/app/modules/card/card.component.ts
+19 -18
View File
@@ -2,24 +2,25 @@ import { animate, style, transition, trigger } from '@angular/animations';
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-card',
templateUrl: './card.component.html',
styleUrls: ['./card.component.scss'],
animations: [
trigger('openClose', [
transition(':enter', [
style({ height: '0', opacity: 0 }),
animate('150ms ease-in-out', style({ height: '*', opacity: 1 })),
]),
transition(':leave', [
animate('150ms ease-in-out', style({ height: '0', opacity: 0 })),
]),
]),
],
selector: 'app-card',
templateUrl: './card.component.html',
styleUrls: ['./card.component.scss'],
animations: [
trigger('openClose', [
transition(':enter', [
style({ height: '0', opacity: 0 }),
animate('150ms ease-in-out', style({ height: '*', opacity: 1 })),
]),
transition(':leave', [
animate('150ms ease-in-out', style({ height: '0', opacity: 0 })),
]),
]),
],
})
export class CardComponent {
@Input() public expanded: boolean = true;
@Input() public title: string = '';
@Input() public description: string = '';
@Input() public animate: boolean = false;
@Input() public expanded: boolean = true;
@Input() public title: string = '';
@Input() public description: string = '';
@Input() public animate: boolean = false;
@Input() public nomargin?: boolean = false;
}
console/src/app/modules/card/card.scss
+9 -7
View File
@@ -1,18 +1,20 @@
@use '~@angular/material' as mat;
@mixin card-theme($theme) {
/* stylelint-disable */
/* stylelint-disable */
$primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500);
$primary-dark: mat.get-color-from-palette($primary, A800);
$border-color: mat.get-color-from-palette($primary, A700);
$border-selected-color: mat.get-color-from-palette($primary, A600);
/* stylelint-enable */
$background: map-get($theme, background);
$card-background-color: mat.get-color-from-palette($background, card);
$is-dark-theme: map-get($theme, is-dark);
$border-color: if($is-dark-theme, rgba(#8795a1, .2), rgba(#8795a1, .2));
$border-selected-color: if($is-dark-theme, #ffffff, #000000);
/* stylelint-enable */
.card {
background-color: $primary-dark;
background-color: $card-background-color;
transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
border: 1px solid rgba($border-color, .2);
border: 1px solid $border-color;
box-sizing: border-box;
border-radius: .5rem;
outline: none;
console/src/app/modules/changes/changes.component.scss
+6 -3
View File
@@ -22,11 +22,12 @@
@mixin changes-theme($theme) {
$is-dark-theme: map-get($theme, is-dark);
$foreground: map-get($theme, foreground);
.scroll-container {
max-height: 50vh;
overflow-y: scroll;
border-bottom: 1px solid if($is-dark-theme, #303131, #e3e8ee);
border-bottom: 1px solid map-get($foreground, divider);
margin-bottom: .5rem;
.date {
@@ -114,11 +115,13 @@
/* stylelint-disable */
$primary: map-get($theme, primary);
$primary-dark: mat.get-color-from-palette($primary, A800);
$is-dark-theme: map-get($theme, is-dark);
$transparent-color: if($is-dark-theme, rgba(#8795a1, .2), rgba(#8795a1, .2));
/* stylelint-enable */
&.change-item-back {
background-color: rgba($primary-dark, .93);
background-color: rgba($transparent-color, .93);
transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
}
}
console/src/app/modules/detail-layout/detail-layout.component.scss
+1 -1
View File
@@ -4,7 +4,7 @@
/* stylelint-disable */
$primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500);
$primary-dark: mat.get-color-from-palette($primary, A800);
$is-dark-theme: map-get($theme, is-dark);
/* stylelint-enable */
$lighter-color: rgba(mat.get-color-from-palette($primary, 300), .5);
console/src/app/modules/features/features.component.html
+1 -1
View File
@@ -35,7 +35,7 @@
<p class="error" *ngIf="(stripeCustomer || stripeCustomer == null) && !customerValid">{{'FEATURES.TIER.CUSTOMERINVALID' | translate}}</p>
<div class="current-tier">
<a [disabled]="!org.id || !customerValid || !stripeURL" mat-raised-button [href]="stripeURL" target="_blank"
<a color="primary" [disabled]="!org.id || !customerValid || !stripeURL" mat-raised-button [href]="stripeURL" target="_blank"
alt="change tier">{{'FEATURES.TIER.BTN' | translate}}</a>
</div>
</ng-container>
console/src/app/modules/info-section/info-section.component.scss
+11 -9
View File
@@ -2,6 +2,8 @@
@mixin info-section-theme($theme) {
$primary: map-get($theme, primary);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$primary-color: mat.get-color-from-palette($primary, 500);
$is-dark-theme: map-get($theme, is-dark);
@@ -25,29 +27,29 @@
}
&.info {
background-color: if($is-dark-theme, #6d6f7382, #e4e4e4);
color: if($is-dark-theme, #f0f0f0, #4a4a4a);
background-color: map-get($background, infosection);
color: map-get($foreground, infosection);
.icon {
color: $primary-color;
color: map-get($foreground, infosection);
}
}
&.success {
background-color: if($is-dark-theme, #4f566b, #cbf4c9);
color: if($is-dark-theme, #cbf4c9, #0e6245);
background-color: map-get($background, successinfosection);
color: map-get($foreground, successinfosection);
.icon {
color: $primary-color;
color: map-get($foreground, successinfosection);
}
}
&.warn {
background-color: if($is-dark-theme, #4f566b, #ffc1c1);
color: if($is-dark-theme, #ffc1c1, #620e0e);
background-color: map-get($background, warninfosection);
color: map-get($foreground, warninfosection);
.icon {
color: if($is-dark-theme, #ffc1c1, #620e0e);
color: map-get($foreground, warninfosection);
}
}
}
console/src/app/modules/onboarding/onboarding.component.scss
+4 -2
View File
@@ -5,10 +5,12 @@
$primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500);
$is-dark-theme: map-get($theme, is-dark);
$foreground: map-get($theme, foreground);
/* stylelint-enable */
.onboarding-row {
box-shadow: inset 0 -1px if($is-dark-theme, #303131, #e3e8ee);
box-shadow: inset 0 -1px map-get($foreground, divider);
.prev {
background: $primary-color;
@@ -17,7 +19,7 @@
.goto {
text-decoration: none;
background: white;
border: 1px solid if($is-dark-theme, #303131, #e3e8ee);
border: 1px solid map-get($foreground, divider);
&.docs {
background-color: $primary-color;
console/src/app/modules/policies/login-policy/login-policy.component.html
+2 -2
View File
@@ -8,14 +8,14 @@
</div>
<ng-container *ngIf="serviceType === PolicyComponentServiceType.MGMT">
<ng-template appHasRole [appHasRole]="['policy.delete']">
<button *ngIf="!isDefault" matTooltip="{{'POLICY.RESET' | translate}}" color="warn" (click)="removePolicy()"
<button *ngIf="!isDefault" color="primary" matTooltip="{{'POLICY.RESET' | translate}}" color="warn" (click)="removePolicy()"
mat-stroked-button>
{{'POLICY.RESET' | translate}}
</button>
</ng-template>
<ng-template appHasRole [appHasRole]="['policy.write']">
<button *ngIf="isDefault" matTooltip="{{'POLICY.CREATECUSTOM' | translate}}" (click)="savePolicy()"
<button *ngIf="isDefault" color="primary" matTooltip="{{'POLICY.CREATECUSTOM' | translate}}" (click)="savePolicy()"
mat-raised-button>
{{'POLICY.CREATECUSTOM' | translate}}
</button>
console/src/app/modules/policies/login-policy/login-policy.component.scss
-5
View File
@@ -95,11 +95,6 @@
padding: 2px;
}
.meta-info {
font-size: 12px;
color: #fafafa;
}
.rm {
color: #f44336;
position: absolute;
console/src/app/modules/policies/private-labeling-policy/preview/preview.component.scss
+1 -5
View File
@@ -19,7 +19,7 @@
.dashed {
border: 2px dashed rgba(#697386, .5);
border-radius: 1rem;
border-radius: .5rem;
padding: 100px 20px;
.login-wrapper {
@@ -74,16 +74,12 @@
}
&.light {
background: #fff;
.login-wrapper *:not(.cnsl-label):not(.mat-button-wrapper) {
color: #000;
}
}
&.dark {
background: #212224;
.login-wrapper *:not(.cnsl-label):not(.mat-button-wrapper) {
color: #fff;
}
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html
+10 -13
View File
@@ -66,7 +66,7 @@
<mat-spinner class="spinner" color="primary" diameter="25" *ngIf="loadingImages"></mat-spinner>
<container [ngSwitch]="theme">
<div class="logo-view" *ngSwitchCase="Theme.DARK">
<div class="img-wrapper" *ngIf="images['previewDarkLogo']" >
<div class="img-wrapper mat-elevation-z3" *ngIf="images['previewDarkLogo']" >
<mat-icon matTooltip="{{'ACTIONS.DELETE' | translate}}" color="warn" class="dl-btn" (click)="deleteAsset(AssetType.LOGO, theme)">remove_circle</mat-icon>
<img matTooltip="Preview" class="prev" [src]="images['previewDarkLogo']" alt="dark logo preview"/>
</div>
@@ -90,11 +90,10 @@
(dropped)="onDropLogo(theme, $event)"
[class.hovering]="isHoveringOverDarkLogo">
<label class="file-label">
<input #selectedFile style="display: none;" class="file-input" type="file" (change)="onDropLogo(theme, $event.target.files)">
<button mat-stroked-button class="btn" [disabled]="serviceType == PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async) == false" mat-raised-button type="button" (click)="selectedFile.click();">{{'POLICY.PRIVATELABELING.BTN' | translate}}</button>
<i class="icon las la-cloud-upload-alt"></i>
<i class="icon las la-image"></i>
<span>{{isHoveringOverDarkLogo ? ('POLICY.PRIVATELABELING.RELEASE' | translate): ('POLICY.PRIVATELABELING.DROP' | translate)}}</span>
<input #selectedFile style="display: none;" class="file-input" type="file" (change)="onDropLogo(theme, $event.target.files)">
<a class="btn" *ngIf="serviceType == PolicyComponentServiceType.ADMIN || (serviceType == PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async))" (click)="selectedFile.click();">{{'POLICY.PRIVATELABELING.BTN' | translate}}</a>
</label>
</div>
</div>
@@ -130,11 +129,10 @@
(dropped)="onDropIcon(theme, $event)"
[class.hovering]="isHoveringOverDarkIcon">
<label class="file-label">
<input #selectedFileIcon style="display: none;" class="file-input" type="file" (change)="onDropIcon(theme, $event.target.files)">
<button mat-stroked-button class="btn" [disabled]="serviceType == PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async) == false" mat-raised-button type="button" (click)="selectedFileIcon.click();">{{'POLICY.PRIVATELABELING.BTN' | translate}}</button>
<i class="icon las la-cloud-upload-alt"></i>
<i class="icon las la-image"></i>
<span>{{isHoveringOverDarkIcon ? ('POLICY.PRIVATELABELING.RELEASE' | translate): ('POLICY.PRIVATELABELING.DROP' | translate)}}</span>
<input #selectedFileIcon style="display: none;" class="file-input" type="file" (change)="onDropIcon(theme, $event.target.files)">
<a class="btn" *ngIf="serviceType == PolicyComponentServiceType.ADMIN || (serviceType == PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async))" (click)="selectedFileIcon.click();">{{'POLICY.PRIVATELABELING.BTN' | translate}}</a>
</label>
</div>
</div>
@@ -219,11 +217,10 @@
(dropped)="onDropFont($event)"
[class.hovering]="isHoveringOverFont">
<label class="file-label">
<input #selectedFontFile style="display: none;" class="file-input" type="file" (change)="onDropFont($event.target.files)">
<button mat-stroked-button class="btn" [disabled]="serviceType == PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async) == false" mat-raised-button type="button" (click)="selectedFontFile.click();">{{'POLICY.PRIVATELABELING.BTN' | translate}}</button>
<i class="icon las la-cloud-upload-alt"></i>
<i class="icon las la-file"></i>
<span >{{isHoveringOverFont ? ('POLICY.PRIVATELABELING.RELEASEFONT' | translate): ('POLICY.PRIVATELABELING.DROPFONT' | translate)}}</span>
<input #selectedFontFile style="display: none;" class="file-input" type="file" (change)="onDropFont($event.target.files)">
<a class="btn" *ngIf="serviceType == PolicyComponentServiceType.ADMIN || (serviceType == PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async))" (click)="selectedFontFile.click()">{{'POLICY.PRIVATELABELING.BTN' | translate}}</a>
</label>
</div>
</div>
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.scss
+15 -22
View File
@@ -6,6 +6,8 @@
$primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500);
$is-dark-theme: map-get($theme, is-dark);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
.policy {
.header {
@@ -157,8 +159,6 @@
margin-bottom: 2rem;
.expansion {
background: if($is-dark-theme, #2d2e30, #fff) !important;
.header {
justify-content: flex-start;
}
@@ -189,8 +189,7 @@
height: 150px;
width: 100%;
border-radius: .5rem;
background: if($is-dark-theme, #2d2e30, #fff);
border: 1px solid if($is-dark-theme, #4a4b4b, #ddd);
border: 1px solid map-get($foreground, divider);
display: flex;
justify-content: center;
align-items: center;
@@ -202,11 +201,8 @@
flex-direction: column;
align-items: center;
.btn {
a {
margin-bottom: .5rem;
}
.btn:not[disabled] {
cursor: pointer;
}
@@ -272,32 +268,29 @@
margin-bottom: 1rem;
.img-wrapper {
flex: 1;
position: relative;
min-height: 80px;
border: 1px solid if($is-dark-theme, #ffffff20, #00000020);
border-radius: .5rem;
max-width: 120px;
height: 80px;
width: 80px;
border-radius: 50vw;
background-color: #00000020;
.dl-btn {
z-index: 2;
position: absolute;
top: -12px;
left: -12px;
top: 0;
left: 0;
cursor: pointer;
visibility: hidden;
}
.prev,
.curr {
position: absolute;
top: 50%;
transform: translateY(-50%);
top: 0;
left: 0;
max-height: 80px;
max-width: 120px;
width: 80px;
height: 80px;
object-fit: contain;
border-radius: .5rem;
border-radius: 50%;
}
&:hover {
@@ -412,7 +405,7 @@
position: absolute;
top: .5rem;
left: .5rem;
border-radius: 10px !important;
border-radius: 8px !important;
z-index: 1;
span {
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts
+24
View File
@@ -22,6 +22,7 @@ import { AssetEndpoint, AssetService, AssetType } from 'src/app/services/asset.s
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { StorageService } from 'src/app/services/storage.service';
import { ThemeService } from 'src/app/services/theme.service';
import { ToastService } from 'src/app/services/toast.service';
import { GridPolicy, PRIVATELABEL_POLICY } from '../../policy-grid/policies';
@@ -95,6 +96,7 @@ export class PrivateLabelingPolicyComponent implements OnDestroy {
private assetService: AssetService,
private sanitizer: DomSanitizer,
private storageService: StorageService,
private themeService: ThemeService,
) {
const org: Org.AsObject | null = (this.storageService.getItem(ORG_STORAGE_KEY));
@@ -587,6 +589,7 @@ export class PrivateLabelingPolicyComponent implements OnDestroy {
if (data.policy) {
this.data = data.policy;
this.applyToConsole(data.policy);
this.loadImages();
}
});
@@ -603,6 +606,7 @@ export class PrivateLabelingPolicyComponent implements OnDestroy {
if (data.policy) {
this.data = data.policy;
this.applyToConsole(data.policy);
this.loadImages();
}
});
@@ -613,6 +617,26 @@ export class PrivateLabelingPolicyComponent implements OnDestroy {
}
}
private applyToConsole(labelpolicy: LabelPolicy.AsObject): void {
const darkPrimary = labelpolicy?.primaryColorDark || '#5282c1';
const lightPrimary = labelpolicy?.primaryColor || '#5282c1';
const darkWarn = labelpolicy?.warnColorDark || '#F44336';
const lightWarn = labelpolicy?.warnColor || '#F44336';
const darkBackground = labelpolicy?.backgroundColorDark || '#212224';
const lightBackground = labelpolicy?.backgroundColor || '#fafafa';
this.themeService.savePrimaryColor(darkPrimary, true);
this.themeService.savePrimaryColor(lightPrimary, false);
this.themeService.saveWarnColor(darkWarn, true);
this.themeService.saveWarnColor(lightWarn, false);
this.themeService.saveBackgroundColor(darkBackground, true);
this.themeService.saveBackgroundColor(lightBackground, false);
}
public resetPolicy(): Promise<any> {
return (this.service as ManagementService).resetLabelPolicyToDefault().then(() => {
this.toast.showInfo('POLICY.PRIVATELABELING.RESET', true);