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

fix(console): preserve logo and icon aspect ratios, remove border radius in header (#4585)

Browse Source
This commit is contained in:
Max Peintner
2022-10-22 11:59:38 +02:00
committed by GitHub
parent 5809dec342
commit afa1e2b7c1
12 changed files with 112 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/modules/header/header.component.scss
+8 -5
View File
@@ -184,11 +184,13 @@
.logo-placeholder {
height: 40px;
width: 40px;
border-radius: 50%;
background-color: if($is-dark-theme, #00000020, #00000010);
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
object-fit: cover;
object-position: center;
}
.title {
@@ -202,17 +204,18 @@
height: 40px;
width: 40px;
box-sizing: border-box;
object-fit: cover;
object-position: center;
}
&.custom {
border-radius: 50%;
border-radius: 2px;
height: 40px;
width: 40px;
box-sizing: border-box;
background-color: if($is-dark-theme, #00000020, #00000010);
.logo {
border-radius: 50%;
border-radius: 2px;
}
}
}
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html
+50 -42
View File
@@ -569,49 +569,57 @@
</mat-panel-title>
</mat-expansion-panel-header>
<div class="adv-container">
<mat-slide-toggle
class="toggle"
color="primary"
ngDefaultControl
[disabled]="
view === View.CURRENT ||
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
[(ngModel)]="view === View.CURRENT ? data.hideLoginNameSuffix : previewData.hideLoginNameSuffix"
(change)="savePolicy()"
>
{{ 'POLICY.DATA.HIDELOGINNAMESUFFIX' | translate }}
</mat-slide-toggle>
<cnsl-info-section>
<div class="checkbox-info-section">
<mat-checkbox
class="toggle"
color="primary"
[disabled]="
view === View.CURRENT ||
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
[(ngModel)]="view === View.CURRENT ? data.hideLoginNameSuffix : previewData.hideLoginNameSuffix"
(change)="savePolicy()"
>
{{ 'POLICY.DATA.HIDELOGINNAMESUFFIX' | translate }}
</mat-checkbox>
<span class="label">{{ 'POLICY.DATA.HIDELOGINNAMESUFFIX_DESC' | translate }}</span>
</div>
</cnsl-info-section>
<mat-slide-toggle
class="toggle"
color="primary"
ngDefaultControl
[(ngModel)]="view === View.CURRENT ? data.disableWatermark : previewData.disableWatermark"
(change)="savePolicy()"
[disabled]="
view === View.CURRENT ||
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
>
{{ 'POLICY.DATA.DISABLEWATERMARK' | translate }}
</mat-slide-toggle>
<cnsl-info-section>
<div class="checkbox-info-section">
<mat-checkbox
class="toggle"
color="primary"
[(ngModel)]="view === View.CURRENT ? data.disableWatermark : previewData.disableWatermark"
(change)="savePolicy()"
[disabled]="
view === View.CURRENT ||
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
>
{{ 'POLICY.DATA.DISABLEWATERMARK' | translate }}
</mat-checkbox>
<span class="label">{{ 'POLICY.DATA.DISABLEWATERMARK_DESC' | translate }}</span>
</div>
</cnsl-info-section>
</div>
</mat-expansion-panel>
</mat-accordion>
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.scss
+6 -5
View File
@@ -295,12 +295,13 @@
flex-direction: column;
padding-bottom: 50px;
.info {
margin-bottom: 0.5rem;
}
.checkbox-info-section {
display: flex;
flex-direction: column;
.toggle {
margin-bottom: 1rem;
.label {
margin-top: 0.5rem;
}
}
}
}
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts
+32 -11
View File
@@ -238,17 +238,38 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
}
break;
case PolicyComponentServiceType.MGMT:
if (type === AssetType.LOGO) {
if (theme === Theme.DARK) {
return previewHandler(this.service.removeLabelPolicyLogoDark());
} else if (theme === Theme.LIGHT) {
return previewHandler(this.service.removeLabelPolicyLogo());
}
} else if (type === AssetType.ICON) {
if (theme === Theme.DARK) {
return previewHandler(this.service.removeLabelPolicyIconDark());
} else if (theme === Theme.LIGHT) {
return previewHandler(this.service.removeLabelPolicyIcon());
if ((this.previewData as LabelPolicy.AsObject).isDefault) {
const req0 = new AddCustomLabelPolicyRequest();
this.overwriteValues(req0);
return (this.service as ManagementService)
.addCustomLabelPolicy(req0)
.then(() => {
if (this.previewData) {
this.previewData.isDefault = false;
}
this.toast.showInfo('POLICY.TOAST.SET', true);
setTimeout(() => {
this.fetchData();
}, 1000);
})
.catch((error: HttpErrorResponse) => {
this.toast.showError(error);
});
} else {
if (type === AssetType.LOGO) {
if (theme === Theme.DARK) {
return previewHandler(this.service.removeLabelPolicyLogoDark());
} else if (theme === Theme.LIGHT) {
return previewHandler(this.service.removeLabelPolicyLogo());
}
} else if (type === AssetType.ICON) {
if (theme === Theme.DARK) {
return previewHandler(this.service.removeLabelPolicyIconDark());
} else if (theme === Theme.LIGHT) {
return previewHandler(this.service.removeLabelPolicyIcon());
}
}
}
break;
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.module.ts
+2 -2
View File
@@ -4,11 +4,11 @@ import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDialogModule } from '@angular/material/dialog';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { ColorChromeModule } from 'ngx-color/chrome';
@@ -40,10 +40,10 @@ import { PrivateLabelingPolicyComponent } from './private-labeling-policy.compon
CardModule,
MatIconModule,
HasRoleModule,
MatSlideToggleModule,
MatTooltipModule,
TranslateModule,
DetailLayoutModule,
MatCheckboxModule,
DropzoneModule,
MatDialogModule,
WarnDialogModule,