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

RED-6410 - File attributes in-place editing look & feel changes in file list

Browse Source
This commit is contained in:
Valentin Mihai 2023-05-03 22:49:20 +03:00
parent 0cad739a4e
commit ecccd4bdaa
3 changed files with 75 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,20 +1,28 @@
<div class="file-attribute">
<span *ngIf="!isDate; else date" class="clamp-3"> {{ fileAttributeValue || '-' }}</span>
<ng-template #date>
<span class="clamp-3"> {{ fileAttributeValue ? (fileAttributeValue | date : 'd MMM yyyy') : '-' }}</span>
</ng-template>
<div class="value">
<span *ngIf="!isDate; else date" class="clamp-3"> {{ fileAttributeValue || '-' }}</span>
<ng-template #date>
<span class="clamp-3"> {{ fileAttributeValue ? (fileAttributeValue | date : 'd MMM yyyy') : '-' }}</span>
</ng-template>
</div>
<ng-container *ngIf="((fileAttributesService.isEditingFileAttribute$ | async) === false || isInEditMode) && !file.isInitialProcessing">
<div *ngIf="!isInEditMode; else input" class="action-buttons edit-button">
<iqser-circle-button
(action)="editFileAttribute()"
*ngIf="permissionsService.canEditFileAttributes(file, dossier)"
[disabled]="!fileAttribute.editable"
[icon]="'iqser:edit'"
[tooltip]="'file-attribute.actions.edit' | translate"
[attr.help-mode-key]="'edit-file-attributes'"
id="edit-attribute-button"
></iqser-circle-button>
<ng-container
*ngIf="
((fileAttributesService.isEditingFileAttribute$ | async) === false || isInEditMode) &&
!file.isInitialProcessing &&
permissionsService.canEditFileAttributes(file, dossier)
"
>
<div
*ngIf="!isInEditMode; else input"
class="action-buttons edit-button"
[class.help-mode-button]="helpModeService.isHelpModeActive$ | async"
(click)="editFileAttribute($event)"
[attr.help-mode-key]="'edit-file-attributes'"
>
<div class="edit-icon">
<mat-icon [svgIcon]="'iqser:edit'"></mat-icon>
</div>
</div>
<ng-template #input>

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

@ -4,29 +4,32 @@
display: flex;
align-items: center;
.edit-button {
position: absolute;
height: 100%;
right: 10%;
width: 90%;
background: linear-gradient(to left, var(--iqser-side-nav) 20%, rgba(244, 245, 247, 0) 60%);
.value {
z-index: 1;
}
iqser-circle-button {
position: absolute;
top: 50%;
left: 80%;
transform: translate(-50%, -50%);
}
.edit-icon {
display: none;
}
.help-mode-button {
background-color: var(--iqser-grey-6);
width: 90%;
height: 50%;
border-radius: 4px;
position: absolute;
margin-left: -10px;
}
.edit-input {
cursor: default;
display: flex;
z-index: 1;
border: solid var(--iqser-grey-4);
z-index: 2;
border: solid var(--iqser-grey-6);
border-radius: 10px;
background: var(--iqser-background);
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
margin-left: -10px;
form {
margin: 5px;
@ -43,3 +46,34 @@
}
}
}
.file-attribute:hover {
.edit-button {
background-color: var(--iqser-grey-6);
width: 100%;
height: 50%;
border-radius: 4px;
position: absolute;
margin-left: -10px;
}
.edit-icon {
z-index: 1;
background: white;
width: 23px;
height: 23px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0;
border-radius: 50%;
margin-top: -8px;
margin-right: -8px;
mat-icon {
width: 13px;
height: 13px;
}
}
}

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

@ -1,6 +1,6 @@
import { Component, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
import { Dossier, File, FileAttributeConfigTypes, IFileAttributeConfig } from '@red/domain';
import { BaseFormComponent, ListingService, Toaster } from '@iqser/common-ui';
import { BaseFormComponent, HelpModeService, ListingService, Toaster } from '@iqser/common-ui';
import { PermissionsService } from '@services/permissions.service';
import { FormBuilder, UntypedFormGroup } from '@angular/forms';
import { FileAttributesService } from '@services/entity-services/file-attributes.service';
@ -33,6 +33,7 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
readonly permissionsService: PermissionsService,
private readonly _listingService: ListingService<File>,
readonly fileAttributesService: FileAttributesService,
readonly helpModeService: HelpModeService,
) {
super();
const sub = router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => this.close());
@ -57,7 +58,8 @@ export class FileAttributeComponent extends BaseFormComponent implements OnDestr
this.#subscriptions.unsubscribe();
}
async editFileAttribute(): Promise<void> {
async editFileAttribute($event: MouseEvent): Promise<void> {
$event.stopPropagation();
this.#toggleEdit();
}