TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-08-11 19:07:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(console): improve project counters, dark primary color change, smaller UI improvements (#4620)

Browse Source 
* dark primary color change, project counter, link color improvements

* update fallback colors

* fallback colors

Co-authored-by: Livio Spring <livio.a@gmail.com>
This commit is contained in:
Max Peintner
2022-11-17 08:43:53 +01:00
committed by GitHub
parent dbb18342a1
commit 7db87f4646
15 changed files with 323 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
console/src/app/modules/footer/footer.component.scss
View File

@@ -3,7 +3,9 @@
$warn: map-get($theme, warn);
$background: map-get($theme, background);
$accent: map-get($theme, accent);
$primary-color: mat.get-color-from-palette($primary, 500);
$lighter-primary-color: mat.get-color-from-palette($primary, 300);
$darker-primary-color: mat.get-color-from-palette($primary, 700);
$warn-color: mat.get-color-from-palette($warn, 500);
$accent-color: mat.get-color-from-palette($accent, 500);
@@ -11,6 +13,7 @@
$is-dark-theme: map-get($theme, is-dark);
$back: map-get($background, background);
$secondary-text: map-get($foreground, secondary-text);
$link-hover-color: if($is-dark-theme, $lighter-primary-color, $darker-primary-color);
.footer-wrapper {
padding: 2rem;
@@ -46,7 +49,7 @@
}
&:hover {
color: $primary-color;
color: $link-hover-color;
}
}
}
@@ -114,7 +117,7 @@
}
&:hover {
color: $primary-color;
color: $link-hover-color;
i {
visibility: visible;

7
console/src/app/modules/nav-toggle/nav-toggle.component.html
View File

@@ -1,6 +1,11 @@
<button class="nav-toggle" [ngClass]="{active}" (click)="clicked.emit()">
<div class="c_label">
<span> {{ label }} </span>
<small *ngIf="count" class="count">({{ count }})</small>
<div *ngIf="count && count < 100" class="count">
<span>{{ count }}</span>
</div>
<div *ngIf="count && count >= 100" class="count">
<span>99+</span>
</div>
</div>
</button>

17
console/src/app/modules/nav-toggle/nav-toggle.component.scss
View File

@@ -31,6 +31,8 @@
background: none;
cursor: pointer;
font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
box-sizing: border-box;
height: 27px;
.c_label {
display: flex;
@@ -38,8 +40,19 @@
text-align: center;
.count {
display: none;
display: flex;
align-items: center;
justify-content: center;
height: 17px;
width: 17px;
border-radius: 50%;
padding: 2px;
margin: -2px -9px -2px 8px;
margin-left: 6px;
background-color: if($is-dark-theme, #ffffff20, #00000020);
line-height: 18px;
font-size: 11px;
transition: background 0.2s ease;
}
}
@@ -63,7 +76,7 @@
.c_label {
.count {
display: inline-block;
background-color: if($is-dark-theme, #00000020, #ffffff20);
}
}
}

16
console/src/app/modules/nav/nav.component.html
View File

@@ -121,14 +121,14 @@
>
<div class="c_label">
<span> {{ 'MENU.PROJECT' | translate }} </span>
<small
*ngIf="(mgmtService?.ownedProjectsCount | async) && (mgmtService?.grantedProjectsCount | async)"
class="count"
>({{
((mgmtService.ownedProjectsCount | async) ?? 0) +
((mgmtService.grantedProjectsCount | async) ?? 0)
}})</small
>
<ng-container *ngIf="projectcounter | async as count">
<div *ngIf="count < 100" class="count">
<span>{{ count }}</span>
</div>
<div *ngIf="count >= 100" class="count">
<span>99+</span>
</div>
</ng-container>
</div>
</a>
</ng-template>

14
console/src/app/modules/nav/nav.component.scss
View File

@@ -64,6 +64,8 @@
margin: 0.25rem 2px;
white-space: nowrap;
position: relative;
box-sizing: border-box;
height: 27px;
.c_label {
display: flex;
@@ -72,7 +74,18 @@
.count {
display: none;
align-items: center;
justify-content: center;
height: 17px;
width: 17px;
border-radius: 50%;
padding: 2px;
margin: -2px -9px -2px 8px;
margin-left: 6px;
background-color: if($is-dark-theme, #ffffff20, #00000020);
line-height: 18px;
font-size: 11px;
transition: background 0.2s ease;
}
}
@@ -97,6 +110,7 @@
.c_label {
.count {
display: inline-block;
background-color: if($is-dark-theme, #00000020, #ffffff20);
}
}
}

13
console/src/app/modules/nav/nav.component.ts
View File

@@ -4,7 +4,7 @@ import { HttpClient } from '@angular/common/http';
import { Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
import { Router } from '@angular/router';
import { BehaviorSubject, map, Observable, Subject, take } from 'rxjs';
import { BehaviorSubject, combineLatest, forkJoin, map, merge, Observable, Subject, switchMap, take } from 'rxjs';
import { Org } from 'src/app/proto/generated/zitadel/org_pb';
import { User } from 'src/app/proto/generated/zitadel/user_pb';
import { AuthenticationService } from 'src/app/services/authentication.service';
@@ -132,4 +132,15 @@ export class NavComponent implements OnDestroy {
public openHelp() {
this.shortcutService.openOverviewDialog();
}
public get projectcounter(): Observable<number> {
return combineLatest({
owned: this.mgmtService.ownedProjectsCount,
granted: this.mgmtService.grantedProjectsCount,
}).pipe(
map(({ owned, granted }) => {
return (owned ?? 0) + (granted ?? 0);
}),
);
}
}

22
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts
View File

@@ -20,7 +20,15 @@ import { AdminService } from 'src/app/services/admin.service';
import { AssetEndpoint, AssetService, AssetType } from 'src/app/services/asset.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { StorageKey, StorageLocation, StorageService } from 'src/app/services/storage.service';
import { ThemeService } from 'src/app/services/theme.service';
import {
BACKGROUND,
DARK_BACKGROUND,
DARK_PRIMARY,
DARK_WARN,
PRIMARY,
ThemeService,
WARN,
} from 'src/app/services/theme.service';
import { ToastService } from 'src/app/services/toast.service';
import { InfoSectionType } from '../../info-section/info-section.component';
@@ -637,14 +645,14 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
}
private applyToConsole(labelpolicy: LabelPolicy.AsObject): void {
const darkPrimary = labelpolicy?.primaryColorDark || '#bbbafa';
const lightPrimary = labelpolicy?.primaryColor || '#5469d4';
const darkPrimary = labelpolicy?.primaryColorDark || DARK_PRIMARY;
const lightPrimary = labelpolicy?.primaryColor || PRIMARY;
const darkWarn = labelpolicy?.warnColorDark || '#ff3b5b';
const lightWarn = labelpolicy?.warnColor || '#cd3d56';
const darkWarn = labelpolicy?.warnColorDark || DARK_WARN;
const lightWarn = labelpolicy?.warnColor || WARN;
const darkBackground = labelpolicy?.backgroundColorDark || '#111827';
const lightBackground = labelpolicy?.backgroundColor || '#fafafa';
const darkBackground = labelpolicy?.backgroundColorDark || DARK_BACKGROUND;
const lightBackground = labelpolicy?.backgroundColor || BACKGROUND;
this.themeService.savePrimaryColor(darkPrimary, true);
this.themeService.savePrimaryColor(lightPrimary, false);

12
console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss
View File

@@ -3,9 +3,16 @@
@mixin search-user-autocomplete-theme($theme) {
$primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500);
$lighter-primary-color: mat.get-color-from-palette($primary, 300);
$darker-primary-color: mat.get-color-from-palette($primary, 700);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$secondary-text: map-get($foreground, secondary-text);
$is-dark-theme: map-get($theme, is-dark);
$link-hover-color: if($is-dark-theme, mat.get-color-from-palette($primary, 200), $primary-color);
$link-color: if($is-dark-theme, $lighter-primary-color, $primary-color);
.user-autocomplete-found {
margin: 0.5rem 0;
@@ -67,11 +74,12 @@
margin-top: 0.5rem;
a {
color: $primary-color;
color: $link-color;
transition: color 0.2s ease;
&:hover {
cursor: pointer;
color: mat.get-color-from-palette($primary, 400);
color: $link-hover-color;
text-decoration: underline;
}
}

4
console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html
View File

@@ -12,7 +12,9 @@
</cnsl-top-view>
<div *ngIf="loading" class="max-width-container">
<mat-progress-spinner diameter="25" color="primary" mode="indeterminate"></mat-progress-spinner>
<div class="user-spinner-wrapper">
<mat-progress-spinner diameter="25" color="primary" mode="indeterminate"></mat-progress-spinner>
</div>
</div>
<div class="max-width-container">

4
console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.scss
View File

@@ -88,6 +88,10 @@
}
}
.user-spinner-wrapper {
margin: 1rem 0;
}
.icon-button {
.icon {
font-size: 1.2rem;

16
console/src/app/services/theme.service.ts
View File

@@ -13,17 +13,17 @@ export interface Color {
contrastColor: string;
}
const DARK_PRIMARY = '#bbbafa';
const PRIMARY = '#5469d4';
export const DARK_PRIMARY = '#2073c4';
export const PRIMARY = '#5469d4';
const DARK_WARN = '#ff3b5b';
const WARN = '#cd3d56';
export const DARK_WARN = '#ff3b5b';
export const WARN = '#cd3d56';
const DARK_BACKGROUND = '#111827';
const BACKGROUND = '#fafafa';
export const DARK_BACKGROUND = '#111827';
export const BACKGROUND = '#fafafa';
const DARK_TEXT = '#ffffff';
const TEXT = '#000000';
export const DARK_TEXT = '#ffffff';
export const TEXT = '#000000';
@Injectable()
export class ThemeService {