TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-01-05 22:52:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(console): phone, email, branding dialogs (#7539)

Browse Source 
* fix: phone, email, branding dialogs

* use full width for phone number

* fix user create phone width

* reset width

---------

Co-authored-by: Elio Bischof <elio@zitadel.com>
This commit is contained in:
Max Peintner 2024-03-14 14:38:09 +01:00 committed by GitHub
parent 802b6c7fd1
commit 8be64f4991
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 44 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
console/src/app/modules/project-private-labeling-dialog/project-private-labeling-dialog.component.html
View File

@ -1,6 +1,8 @@
<h1 class="title">{{ 'PROJECT.PAGES.PRIVATELABEL.DIALOG.TITLE' | translate }} {{ data?.number }}</h1>
<p class="desc cnsl-secondary-text">{{ 'PROJECT.PAGES.PRIVATELABEL.DIALOG.DESCRIPTION' | translate }}</p>
<h1 mat-dialog-title class="title">{{ 'PROJECT.PAGES.PRIVATELABEL.DIALOG.TITLE' | translate }} {{ data?.number }}</h1>
<div mat-dialog-content>
<p class="desc cnsl-secondary-text">{{ 'PROJECT.PAGES.PRIVATELABEL.DIALOG.DESCRIPTION' | translate }}</p>
<mat-radio-group class="project-radio-group" [(ngModel)]="setting">
<mat-radio-button class="radio-button" *ngFor="let selection of settings" [value]="selection">
<span class="label">{{ 'PROJECT.PAGES.PRIVATELABEL.' + selection + '.TITLE' | translate }}</span>

1
console/src/app/pages/users/user-create/user-create.component.scss
View File

@ -56,7 +56,6 @@
}
.phone-grid {
max-width: 22rem;
display: grid;
grid-template-columns: auto 1fr;
column-gap: 1rem;

33
console/src/app/pages/users/user-detail/auth-user-detail/edit-dialog/edit-dialog.component.html
View File

@ -1,18 +1,22 @@
<h1 mat-dialog-title>
<span class="title">{{ data.titleKey | translate }}</span>
</h1>
<p class="desc cnsl-secondary-text">{{ data.descriptionKey | translate }}</p>
<div mat-dialog-content>
<form [formGroup]="dialogForm" (ngSubmit)="closeDialogWithValue()">
<div class="phone-grid">
<cnsl-form-field *ngIf="isPhone">
<p class="desc cnsl-secondary-text">{{ data.descriptionKey | translate }}</p>
<form class="edit-dialog-form" [formGroup]="dialogForm" (ngSubmit)="closeDialogWithValue()">
<div class="phone-grid" *ngIf="isPhone">
<cnsl-form-field class="edit-dialog-formfield">
<cnsl-label>{{ 'USER.PROFILE.COUNTRY' | translate }}</cnsl-label>
<mat-select [(value)]="selected" [compareWith]="compareCountries" (selectionChange)="setCountryCallingCode()">
<mat-select-trigger> <span class="fi fi-{{ selected?.countryCode | lowercase }}"></span></mat-select-trigger>
<mat-select-trigger>
<span class="fi fi-{{ selected?.countryCode | lowercase }}"></span>
<span class="edit-dialog-phone-country-name">{{ selected?.countryName }}</span>
</mat-select-trigger>
<mat-option *ngFor="let country of countryPhoneCodes" [value]="country">
<span class="fi fi-{{ country.countryCode | lowercase }}"></span>
<span class="phone-country-name">{{ country.countryName }}</span>
<span class="phone-country-code">+{{ country.countryCallingCode }}</span>
<span class="edit-dialog-phone-country-name">{{ country.countryName }}</span>
<span class="edit-dialog-phone-country-code">+{{ country.countryCallingCode }}</span>
</mat-option>
</mat-select>
</cnsl-form-field>
@ -26,6 +30,17 @@
/>
</cnsl-form-field>
</div>
<div *ngIf="!isPhone">
<cnsl-form-field>
<cnsl-label>{{ data.labelKey | translate }}</cnsl-label>
<input
cnslInput
[formControlName]="controlKey"
matTooltip="{{ 'USER.PROFILE.PHONE_HINT' | translate }}"
[matTooltipDisabled]="!isPhone"
/>
</cnsl-form-field>
</div>
<ng-container *ngIf="data.type === EditDialogType.EMAIL && data.isVerifiedTextKey">
<mat-checkbox class="verified-checkbox" [(ngModel)]="isVerified">
@ -37,8 +52,8 @@
</ng-container>
</form>
</div>
<div mat-dialog-actions class="action">
<button mat-stroked-button class="ok-button" (click)="closeDialog()">
<div mat-dialog-actions class="edit-dialog-actions">
<button mat-stroked-button (click)="closeDialog()">
{{ data.cancelKey | translate }}
</button>

32
console/src/app/pages/users/user-detail/auth-user-detail/edit-dialog/edit-dialog.component.scss
View File

@ -1,4 +1,4 @@
.formfield {
.edit-dialog-formfield {
width: 100%;
}
@ -10,34 +10,34 @@
font-size: 14px;
}
.action {
.edit-dialog-actions {
display: flex;
justify-content: flex-end;
.ok-button {
margin-left: 0.5rem;
}
justify-content: space-between;
button {
border-radius: 0.5rem;
}
}
.phone-grid {
max-width: 22rem;
display: grid;
grid-template-columns: auto 1fr;
column-gap: 1rem;
.edit-dialog-form {
width: 100%;
@media only screen and (max-width: 500px) {
grid-template-columns: 1fr;
.phone-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
column-gap: 1rem;
@media only screen and (max-width: 500px) {
grid-template-columns: 1fr;
}
}
}
.phone-country-name {
.edit-dialog-phone-country-name {
padding: 0 0.5em;
margin-left: 1rem;
}
.phone-country-code {
.edit-dialog-phone-country-code {
color: darkgrey;
}