Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-5445 - updated input design, abort the editing when the user clicks somewhere else on the screen

Browse Source
This commit is contained in:
Valentin Mihai 2023-02-26 19:43:00 +02:00
parent 4dd9185edf
commit 39ce5b0826
4 changed files with 66 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.html
View File

@ -3,8 +3,9 @@
<ng-template #date>
<span class="clamp-3"> {{ fileAttributeValue ? (fileAttributeValue | date : 'd MMM yyyy') : '-' }}</span>
</ng-template>
<ng-container *ngIf="(selectedFile$ | async) === false && ((isEditingFileAttribute$ | async) === false || isInEditMode)">
<div class="edit-button" *ngIf="!isInEditMode">
<ng-container *ngIf="(isEditingFileAttribute$ | async) === false || isInEditMode">
<div class="edit-button" *ngIf="!isInEditMode; else input">
<iqser-circle-button
id="edit-attribute-button"
*ngIf="permissionsService.canEditFileAttributes(file, dossier)"
@ -14,20 +15,30 @@
[tooltip]="'file-attribute.actions.edit' | translate"
></iqser-circle-button>
</div>
<div *ngIf="isInEditMode" class="edit">
<form (submit)="save()" [formGroup]="form">
<iqser-dynamic-input
[formControlName]="fileAttribute.id"
[id]="fileAttribute.id"
[type]="fileAttribute.type"
[classList]="'w-full'"
(keydown.escape)="close()"
>
</iqser-dynamic-input>
<ng-template #input>
<div class="edit-input" (click)="$event?.stopPropagation()">
<form (submit)="save()" [formGroup]="form">
<iqser-dynamic-input
[formControlName]="fileAttribute.id"
[id]="fileAttribute.id"
[type]="fileAttribute.type"
(keydown.escape)="close()"
(closedDatepicker)="closedDatepicker = $event"
>
</iqser-dynamic-input>
<iqser-circle-button [icon]="'iqser:check'" [disabled]="disabled" (action)="save($event)"></iqser-circle-button>
<iqser-circle-button [icon]="'iqser:close'" (action)="close($event)"></iqser-circle-button>
</form>
</div>
<iqser-circle-button
class="save"
[icon]="'iqser:check'"
[disabled]="disabled"
(action)="save($event)"
></iqser-circle-button>
<iqser-circle-button [icon]="'iqser:close'" (action)="close($event)"></iqser-circle-button>
</form>
</div>
</ng-template>
</ng-container>
</div>
<!-- A hack to avoid subscribing in component -->
<ng-container *ngIf="selectedFile$ | async"></ng-container>

68
apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.scss
View File

@ -5,52 +5,18 @@
align-items: center;
.edit-button {
transform: translate(-25%);
background: radial-gradient(var(--iqser-side-nav) 10%, rgba(244, 245, 247, 0) 60%);
#edit-attribute-button {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
}
}
.edit-button,
.edit {
position: absolute;
display: none;
top: 0;
background: radial-gradient(var(--iqser-side-nav) 10%, rgba(244, 245, 247, 0) 60%);
height: 100%;
width: 150%;
z-index: 1;
}
iqser-dynamic-input {
margin-top: 0;
}
.edit {
width: 300%;
display: block;
background: radial-gradient(var(--iqser-side-nav) 10%, rgba(244, 245, 247, 0) 95%);
form {
display: flex;
gap: 5px;
align-items: center;
z-index: 10;
width: 75%;
transform: translate(-25%);
iqser-circle-button {
position: absolute;
top: 50%;
transform: translate(0%, -50%);
}
iqser-dynamic-input {
width: 75%;
margin-top: 0;
left: 50%;
transform: translate(-50%, -50%);
}
}
@ -59,4 +25,28 @@
display: block;
}
}
.edit-input {
cursor: default;
display: flex;
z-index: 1;
border: solid var(--iqser-grey-4);
border-radius: 10px;
background: var(--iqser-background);
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
form {
margin: 5px;
display: flex;
align-items: center;
iqser-dynamic-input {
margin-top: 0;
}
.save {
margin-left: 7px;
}
}
}
}

10
apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.ts
View File

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, HostListener, Input, OnInit } from '@angular/core';
import { Dossier, File, FileAttributeConfigTypes, IFileAttributeConfig } from '@red/domain';
import { BaseFormComponent, ListingService, Toaster } from '@iqser/common-ui';
import { PermissionsService } from '@services/permissions.service';
@ -24,6 +24,7 @@ export class FileAttributeComponent extends BaseFormComponent implements OnInit
@Input() dossier!: Dossier;
isInEditMode = false;
closedDatepicker = true;
readonly isEditingFileAttribute$: BehaviorSubject<boolean>;
readonly selectedFile$: Observable<boolean>;
@ -139,4 +140,11 @@ export class FileAttributeComponent extends BaseFormComponent implements OnInit
input.focus();
}, 100);
}
@HostListener('document:click')
clickOutside() {
if (this.isInEditMode && this.closedDatepicker) {
this.close();
}
}
}

2
libs/common-ui

@ -1 +1 @@
Subproject commit d9a92992c3b6f4700fbbdb3662d981bfe23b979b
Subproject commit cdfd0b59b4e1f63693366ac5c9e80d3c309d687d