mirror of
https://github.com/andwati/zitadel.git
synced 2026-11-09 07:35:13 +00:00
feat: rehauled console (#3525)
* new console * move npm ci to angular build * rel path for assets * local grpc copy * login policy, rm clear views, features rel path * lock Co-authored-by: Livio Amstutz <[email protected]>
This commit is contained in:
Max Peintner
co-authored by
Livio Amstutz
Livio Amstutz
parent
00f7dbe875
commit
08ae39ae19
@@ -1,42 +1,34 @@
|
||||
<div class="groups">
|
||||
<span class="co-header">{{ title }}</span>
|
||||
<span class="sub-header">{{ description }} {{'MEMBER.DOCSINFO' | translate}} <a
|
||||
href="https://docs.zitadel.ch/docs/manuals/admin-managers" target="_blank">ZITADEL Managers</a>.
|
||||
</span>
|
||||
<div class="people">
|
||||
<div class="img-list" [@cardAnimation]="totalResult">
|
||||
<div class="contributor-groups">
|
||||
<div class="contributor-people">
|
||||
<div class="contributor-img-list" [ngClass]="{'padd-left': totalResult > 0}" [@cardAnimation]="totalResult">
|
||||
<mat-spinner class="spinner" diameter="20" *ngIf="loading"></mat-spinner>
|
||||
<ng-container *ngIf="totalResult < 10; else compact">
|
||||
<ng-container *ngFor="let member of membersSubject | async; index as i">
|
||||
<div @animate (click)="emitShowDetail()" class="avatar-circle"
|
||||
matTooltip="{{ member.displayName }} | {{member.rolesList?.join(' ')}}" [ngStyle]="{'z-index': 100 - i}">
|
||||
<div @animate (click)="emitShowDetail()" class="contributor-avatar-circle"
|
||||
matTooltip="{{ member.displayName }} | {{member.rolesList | roletransform}}"
|
||||
[ngStyle]="{'z-index': 20 - i}">
|
||||
<cnsl-avatar *ngIf="member && member.displayName && member.firstName && member.lastName; else cog"
|
||||
class="avatar dontcloseonclick" [avatarUrl]="member.avatarUrl|| ''"
|
||||
[forColor]="member.preferredLoginName ?? 'A'"
|
||||
[name]="member.displayName ? member.displayName : (member.firstName + ' '+ member.lastName)" [size]="32">
|
||||
class="contributor-avatar dontcloseonclick" [avatarUrl]="member.avatarUrl|| ''"
|
||||
[name]="member.displayName ? member.displayName : (member.firstName + ' '+ member.lastName)"
|
||||
[forColor]="member.preferredLoginName" [size]="32">
|
||||
</cnsl-avatar>
|
||||
<ng-template #cog>
|
||||
<div class="sa-icon">
|
||||
<i class="las la-user-cog"></i>
|
||||
</div>
|
||||
<cnsl-avatar [forColor]="member.preferredLoginName" [isMachine]="true">
|
||||
<i class="las la-robot"></i>
|
||||
</cnsl-avatar>
|
||||
</ng-template>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<ng-template #compact>
|
||||
<div (click)="emitShowDetail()" class="avatar-circle" matTooltip="Click to show detail">
|
||||
<div (click)="emitShowDetail()" class="contributor-avatar-circle" matTooltip="Click to show detail">
|
||||
<span>{{totalResult}}</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<button class="add-img" (click)="emitAddMember()" [disabled]="disabled" mat-icon-button
|
||||
matTooltip="{{'ACTIONS.ADD' | translate}}" aria-label="Edit contributors">
|
||||
<button class="add-img" [ngClass]="{'no-margin': totalResult === 0}" (click)="emitAddMember()"
|
||||
[disabled]="disabled" mat-icon-button aria-label="Add member">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
<span class="fill-space"></span>
|
||||
<button matTooltip="{{'ACTIONS.REFRESH' | translate}}" class="refresh-img" (click)="emitRefresh()" mat-icon-button
|
||||
aria-label="refresh contributors">
|
||||
<mat-icon class="icon">refresh</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,92 +1,81 @@
|
||||
.groups {
|
||||
padding-top: 1rem;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.co-header {
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
letter-spacing: .05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@mixin contributors-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
$background: map-get($theme, background);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
.sub-header {
|
||||
font-size: .8rem;
|
||||
color: var(--grey);
|
||||
}
|
||||
.contributor-groups {
|
||||
padding: 0.5rem 0;
|
||||
|
||||
.people {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.owner {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.img-list {
|
||||
width: 100%;
|
||||
margin-top: .5rem;
|
||||
margin-left: 1rem;
|
||||
.contributor-people {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
border-radius: 50vw;
|
||||
padding: 6px 9px;
|
||||
background-color: map-get($background, contributor);
|
||||
padding-left: 9px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
.spinner {
|
||||
margin-left: -15px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.add-img {
|
||||
float: left;
|
||||
margin: 0 8px 0 -15px;
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.refresh-img {
|
||||
float: left;
|
||||
margin: 0 0 0 -15px;
|
||||
|
||||
.icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-circle {
|
||||
float: left;
|
||||
margin: 0 8px 0 -15px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
-webkit-box-shadow: 2px 0 7px -1px rgba(33, 34, 36, .5);
|
||||
-moz-box-shadow: 2px 0 7px -1px rgba(33, 34, 36, .5);
|
||||
box-shadow: 2px 0 7px -1px rgba(33, 34, 36, .5);
|
||||
cursor: pointer;
|
||||
.contributor-img-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.avatar {
|
||||
pointer-events: none;
|
||||
&.padd-left {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.sa-icon {
|
||||
display: block;
|
||||
width: 32px;
|
||||
margin: 0 .5rem;
|
||||
.spinner {
|
||||
margin: -10px 20px -10px -15px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin: auto;
|
||||
font-size: 1.2rem;
|
||||
.add-img {
|
||||
float: left;
|
||||
margin: 0 0 0 -8px;
|
||||
|
||||
&.no-margin {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.margin-neg {
|
||||
margin-left: -1rem;
|
||||
.contributor-avatar-circle {
|
||||
float: left;
|
||||
margin: 0 8px 0 -15px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
line-height: 1rem;
|
||||
border-radius: 50%;
|
||||
-webkit-box-shadow: 2px 0 7px -1px rgba(33, 34, 36, 0.5);
|
||||
-moz-box-shadow: 2px 0 7px -1px rgba(33, 34, 36, 0.5);
|
||||
box-shadow: 2px 0 7px -1px rgba(33, 34, 36, 0.5);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: map-get($background, contributor-avatar);
|
||||
color: white;
|
||||
|
||||
.contributor-avatar {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sa-icon {
|
||||
display: block;
|
||||
width: 32px;
|
||||
margin: 0 0.5rem;
|
||||
|
||||
i {
|
||||
margin: auto;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.margin-neg {
|
||||
margin-left: -1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,25 +5,23 @@ import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { RoleTransformPipeModule } from 'src/app/pipes/role-transform/role-transform.module';
|
||||
|
||||
import { AvatarModule } from '../avatar/avatar.module';
|
||||
import { ContributorsComponent } from './contributors.component';
|
||||
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [ContributorsComponent],
|
||||
imports: [
|
||||
CommonModule,
|
||||
AvatarModule,
|
||||
MatIconModule,
|
||||
MatTooltipModule,
|
||||
MatButtonModule,
|
||||
MatProgressSpinnerModule,
|
||||
TranslateModule,
|
||||
],
|
||||
exports: [
|
||||
ContributorsComponent,
|
||||
],
|
||||
declarations: [ContributorsComponent],
|
||||
imports: [
|
||||
CommonModule,
|
||||
AvatarModule,
|
||||
MatIconModule,
|
||||
MatTooltipModule,
|
||||
MatButtonModule,
|
||||
MatProgressSpinnerModule,
|
||||
RoleTransformPipeModule,
|
||||
TranslateModule,
|
||||
],
|
||||
exports: [ContributorsComponent],
|
||||
})
|
||||
export class ContributorsModule { }
|
||||
export class ContributorsModule {}
|
||||
|
||||
Reference in New Issue
Block a user