mirror of
https://github.com/vee1e/bulk-questionnaire-upload.git
synced 2026-09-01 17:57:10 +00:00
fix(frontend): center delete-all, rework keyboard shortcuts, add preview backdrop
- Center 'Delete All Forms' button and add bottom padding - Search shortcut: Shift+K -> Ctrl/Cmd+K - Form navigation: Ctrl/Cmd+J/K -> Shift+J/K (frees Ctrl/Cmd+K for search) - Keep navbar title centered when preview actions appear - Add dark backdrop that blocks background clicks when form preview is open - Center close + form action icons inside their icon buttons
This commit is contained in:
parent
5dd03b6096
commit
a0625fdd8f
4 changed files with 88 additions and 12 deletions
|
|
@ -83,9 +83,9 @@ import { FormData } from '../../services/form.service';
|
|||
}
|
||||
|
||||
.delete-all-wrapper {
|
||||
padding: 0.5rem 1rem 0.5rem 1rem;
|
||||
padding: 0.5rem 1rem 1.25rem 1rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
|
|
@ -160,6 +160,27 @@ import { FormData } from '../../services/form.service';
|
|||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
flex-shrink: 0;
|
||||
|
||||
::ng-deep .mat-mdc-icon-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
|
||||
.mat-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`]
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ import { Subscription } from 'rxjs';
|
|||
|
||||
<div class="navbar-actions" *ngIf="selectedFormDetails">
|
||||
<div class="keyboard-shortcuts">
|
||||
<span class="shortcut-hint">Ctrl+J/K: forms • Ctrl+Shift+J/K: questions • Esc: exit</span>
|
||||
<span class="shortcut-hint">Shift+J/K: forms • Ctrl+Shift+J/K: questions • Esc: exit</span>
|
||||
</div>
|
||||
<button mat-icon-button (click)="closePreview()" class="close-preview-btn">
|
||||
<mat-icon>close</mat-icon>
|
||||
|
|
@ -33,6 +33,11 @@ import { Subscription } from 'rxjs';
|
|||
</div>
|
||||
</mat-toolbar>
|
||||
|
||||
<!-- Backdrop to block background interaction when preview is open -->
|
||||
<div class="form-preview-backdrop"
|
||||
*ngIf="selectedFormDetails"
|
||||
(click)="closePreview()"></div>
|
||||
|
||||
<!-- Form Preview Panel -->
|
||||
<div class="form-preview-panel"
|
||||
[class.open]="selectedFormDetails"
|
||||
|
|
@ -109,21 +114,30 @@ import { Subscription } from 'rxjs';
|
|||
z-index: 1000;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.center-navbar { justify-content: center; width: 100%; display: flex; }
|
||||
.navbar { justify-content: center; }
|
||||
.center-navbar {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
font-size: 24px;
|
||||
|
|
@ -136,6 +150,8 @@ import { Subscription } from 'rxjs';
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.keyboard-shortcuts {
|
||||
|
|
@ -153,12 +169,46 @@ import { Subscription } from 'rxjs';
|
|||
.close-preview-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ffffff;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 1;
|
||||
|
||||
::ng-deep .mat-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.form-preview-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
backdrop-filter: blur(6px);
|
||||
z-index: 998;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.form-preview-panel {
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import { MatIconModule } from '@angular/material/icon';
|
|||
<mat-icon matPrefix>search</mat-icon>
|
||||
<input #searchInput
|
||||
matInput
|
||||
placeholder="Search forms... (Shift+K)"
|
||||
placeholder="Search forms... (Ctrl/⌘+K)"
|
||||
[(ngModel)]="searchQuery"
|
||||
(input)="onSearch()">
|
||||
</mat-form-field>
|
||||
|
|
@ -190,8 +190,13 @@ export class SearchComponent implements OnInit, OnDestroy {
|
|||
|
||||
@HostListener('window:keydown', ['$event'])
|
||||
handleKeyboardShortcut(event: KeyboardEvent) {
|
||||
// Check for Shift+K
|
||||
if (event.shiftKey && event.key.toLowerCase() === 'k') {
|
||||
// Check for Ctrl/Cmd + K (without Shift)
|
||||
if (
|
||||
(event.ctrlKey || event.metaKey) &&
|
||||
!event.shiftKey &&
|
||||
!event.altKey &&
|
||||
event.key.toLowerCase() === 'k'
|
||||
) {
|
||||
event.preventDefault();
|
||||
this.focusSearch();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1165,11 +1165,11 @@ export class UploadComponent implements OnInit, OnChanges {
|
|||
|
||||
@HostListener('document:keydown', ['$event'])
|
||||
onKeyDown(event: KeyboardEvent): void {
|
||||
if (event.ctrlKey || event.metaKey) {
|
||||
if (event.key === 'j') {
|
||||
if (event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey) {
|
||||
if (event.key === 'j' || event.key === 'J') {
|
||||
event.preventDefault();
|
||||
this.navigateToNextForm();
|
||||
} else if (event.key === 'k') {
|
||||
} else if (event.key === 'k' || event.key === 'K') {
|
||||
event.preventDefault();
|
||||
this.navigateToPreviousForm();
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue