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

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

@@ -1,20 +1,28 @@
 <div class="file-attribute">
+    <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">
+    <ng-container
-        <div *ngIf="!isInEditMode; else input" class="action-buttons edit-button">
+        *ngIf="
-            <iqser-circle-button
+            ((fileAttributesService.isEditingFileAttribute$ | async) === false || isInEditMode) &&
-                (action)="editFileAttribute()"
+            !file.isInitialProcessing &&
-                *ngIf="permissionsService.canEditFileAttributes(file, dossier)"
+            permissionsService.canEditFileAttributes(file, dossier)
-                [disabled]="!fileAttribute.editable"
+        "
-                [icon]="'iqser:edit'"
+    >
-                [tooltip]="'file-attribute.actions.edit' | translate"
+        <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'"
-                id="edit-attribute-button"
+        >
-            ></iqser-circle-button>
+            <div class="edit-icon">
+                <mat-icon [svgIcon]="'iqser:edit'"></mat-icon>
+            </div>
         </div>
 
         <ng-template #input>

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

@@ -4,29 +4,32 @@
     display: flex;
     align-items: center;
 
-    .edit-button {
+    .value {
-        position: absolute;
+        z-index: 1;
-        height: 100%;
-        right: 10%;
-        width: 90%;
-        background: linear-gradient(to left, var(--iqser-side-nav) 20%, rgba(244, 245, 247, 0) 60%);
-
-        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;
+        z-index: 2;
-        border: solid var(--iqser-grey-4);
+        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;
+        }
+    }
+}

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

@@ -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();
     }