TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-02-28 23:57:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(console): broken layout and colors in keyboard shortcuts modal (#7276)

Browse Source 
* fix(console): broken styles in keyboards shortcut modal

* fix(e2e): increase timeout for org delete test

* fix: ugly space in button between top border and background color when hovered
This commit is contained in:
Miguel Cabrerizo 2024-02-14 16:45:41 +01:00 committed by GitHub
parent e81a24b92d
commit 518c8f486e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 62 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.html
View File

@ -1,49 +1,51 @@
<h1 class="title" mat-dialog-title>{{ 'KEYBOARDSHORTCUTS.TITLE' | translate }}</h1> <div class="container">
<div mat-dialog-content> <h1 class="title" mat-dialog-title>{{ 'KEYBOARDSHORTCUTS.TITLE' | translate }}</h1>
<div *ngIf="isNotOnSystem" class="keyboard-shortcuts-group"> <div mat-dialog-content>
<h2>{{ 'KEYBOARDSHORTCUTS.UNDERORGCONTEXT' | translate }}</h2> <div *ngIf="isNotOnSystem" class="keyboard-shortcuts-group">
<div class="keyboard-shortcuts-wrapper"> <h2>{{ 'KEYBOARDSHORTCUTS.UNDERORGCONTEXT' | translate }}</h2>
<div class="keyboard-shortcut" *ngFor="let shortcut of orgShortcuts"> <div class="keyboard-shortcuts-wrapper">
<span class="keyboard-shortcut-name cnsl-secondary-text" [innerHTML]="shortcut.i18nKey | translate"></span> <div class="keyboard-shortcut" *ngFor="let shortcut of orgShortcuts">
<span class="fill-space"></span> <span class="keyboard-shortcut-name cnsl-secondary-text" [innerHTML]="shortcut.i18nKey | translate"></span>
<template <span class="fill-space"></span>
*ngFor="let key of shortcut.keyboardKeys; index as i" <template
[ngTemplateOutlet]="actionkey" *ngFor="let key of shortcut.keyboardKeys; index as i"
[ngTemplateOutletContext]="{ key: key, last: i === shortcut.keyboardKeys.length - 1 }" [ngTemplateOutlet]="actionkey"
></template> [ngTemplateOutletContext]="{ key: key, last: i === shortcut.keyboardKeys.length - 1 }"
></template>
</div>
</div>
</div>
<div class="keyboard-shortcuts-group">
<h2>{{ 'KEYBOARDSHORTCUTS.SIDEWIDE' | translate }}</h2>
<div class="keyboard-shortcuts-wrapper">
<ng-container *ngFor="let shortcut of shortcuts">
<ng-template cnslHasRole [hasRole]="shortcut.permissions">
<div class="keyboard-shortcut">
<span class="keyboard-shortcut-name cnsl-secondary-text" [innerHTML]="shortcut.i18nKey | translate"></span>
<span class="fill-space"></span>
<template
*ngFor="let key of shortcut.keyboardKeys; index as i"
[ngTemplateOutlet]="actionkey"
[ngTemplateOutletContext]="{ key: key, last: i === shortcut.keyboardKeys.length - 1 }"
></template>
</div>
</ng-template>
</ng-container>
</div> </div>
</div> </div>
</div> </div>
<div class="keyboard-shortcuts-group"> <div mat-dialog-actions class="action">
<h2>{{ 'KEYBOARDSHORTCUTS.SIDEWIDE' | translate }}</h2> <button cdkFocusInitial mat-stroked-button (click)="closeDialog()">
<div class="keyboard-shortcuts-wrapper"> {{ 'ACTIONS.CLOSE' | translate }}
<ng-container *ngFor="let shortcut of shortcuts"> </button>
<ng-template cnslHasRole [hasRole]="shortcut.permissions"> <span class="fill-space"></span>
<div class="keyboard-shortcut">
<span class="keyboard-shortcut-name cnsl-secondary-text" [innerHTML]="shortcut.i18nKey | translate"></span>
<span class="fill-space"></span>
<template
*ngFor="let key of shortcut.keyboardKeys; index as i"
[ngTemplateOutlet]="actionkey"
[ngTemplateOutletContext]="{ key: key, last: i === shortcut.keyboardKeys.length - 1 }"
></template>
</div>
</ng-template>
</ng-container>
</div>
</div> </div>
</div>
<div mat-dialog-actions class="action">
<button cdkFocusInitial mat-stroked-button (click)="closeDialog()">
{{ 'ACTIONS.CLOSE' | translate }}
</button>
<span class="fill-space"></span>
</div>
<ng-template #actionkey let-key="key" let-last="last"> <ng-template #actionkey let-key="key" let-last="last">
<div class="keyboard-shortcuts-action-key"> <div class="keyboard-shortcuts-action-key">
<div class="keyboard-shortcuts-key-overlay"></div> <div class="keyboard-shortcuts-key-overlay"></div>
<span class="keyboard-shortcuts-span">{{ key }}</span> <span class="keyboard-shortcuts-span">{{ key }}</span>
</div> </div>
<!-- <span *ngIf="!last" class="keyboard-shortcuts-plus cnsl-secondary-text">+</span> --> <!-- <span *ngIf="!last" class="keyboard-shortcuts-plus cnsl-secondary-text">+</span> -->
</ng-template> </ng-template>
</div>

20
console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.scss
View File

@ -21,6 +21,7 @@
h2 { h2 {
font-size: 1rem; font-size: 1rem;
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
color: $text-color;
} }
.keyboard-shortcuts-wrapper { .keyboard-shortcuts-wrapper {
@ -85,21 +86,30 @@
.keyboard-shortcuts-plus { .keyboard-shortcuts-plus {
font-size: 14px; font-size: 14px;
} }
}
.title { .title {
font-size: 1.2rem; font-size: 1.2rem;
margin-top: 0; margin-top: 0;
color: $text-color;
}
} }
.action { .action {
display: flex; display: flex;
margin-top: 1rem;
button { button {
border-radius: 0.5rem; border-radius: 0.5rem;
.mat-mdc-button-persistent-ripple {
border-style: none !important;
}
} }
.fill-space { .fill-space {
flex: 1; flex: 1;
} }
} }
.container {
padding: 1.5rem;
border-radius: 6px !important;
}

2
e2e/cypress/e2e/organization/organizations.cy.ts
View File

@ -27,7 +27,7 @@ describe('organizations', () => {
cy.visit(orgsPath); cy.visit(orgsPath);
cy.contains('tr', newOrg).click(); cy.contains('tr', newOrg).click();
cy.get('[data-e2e="actions"]').click(); cy.get('[data-e2e="actions"]').click();
cy.get('[data-e2e="delete"]', { timeout: 1000 }).should('be.visible').click(); cy.get('[data-e2e="delete"]', { timeout: 3000 }).should('be.visible').click();
cy.get('[data-e2e="confirm-dialog-input"]').focus().clear().type(newOrg); cy.get('[data-e2e="confirm-dialog-input"]').focus().clear().type(newOrg);
cy.get('[data-e2e="confirm-dialog-button"]').click(); cy.get('[data-e2e="confirm-dialog-button"]').click();
cy.shouldConfirmSuccess(); cy.shouldConfirmSuccess();