fix: added hover, fix create dialog (#216)

* fix: added hover, fix create dialog * fix: translations
onecx · Feb 2, 2025 · ee63220 · ee63220
1 parent b4a47d5
commit ee63220
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 39 deletions.
diff --git a/src/app/welcome/welcome-configure/image-create/image-create.component.html b/src/app/welcome/welcome-configure/image-create/image-create.component.html
@@ -1,14 +1,12 @@
 <p-dialog
-  header="{{ 'ACTIONS.CREATE.TITLE' | translate }}"
+  [header]="'ACTIONS.CREATE.TITLE' | translate"
   [(visible)]="displayCreateDialog"
   (onHide)="onDialogHide()"
-  [baseZIndex]="10000"
+  [modal]="true"
+  [closable]="true"
   [draggable]="true"
   [resizable]="true"
-  [closable]="true"
-  [modal]="true"
   [style]="{ 'min-width': '600px' }"
-  [showHeader]="true"
   [breakpoints]="{
     '992px': '65vw',
     '700px': '80vw',
@@ -22,8 +20,8 @@
         #fileUpload
         id="wc_image_create_action_upload"
         class="w-full"
-        (onRemove)="this.handleFileRemoval()"
-        (onSelect)="this.handleFileSelected($event.files[0])"
+        (onRemove)="onFileRemoval()"
+        (onSelect)="onFileSelected($event.files[0])"
         [maxFileSize]="1000000"
         previewWidth="300"
         [showUploadButton]="false"
@@ -42,11 +40,22 @@
         tooltipEvent="hover"
       ></p-fileUpload>
       <div class="w-12">
-        <span class="p-float-label" controlErrorAnchor>
+        <span class="p-float-label w-full p-input-icon-right" controlErrorAnchor>
+          <a
+            *ngIf="createUrl.value !== ''"
+            [id]="'wc_image_create_form_url_action_remove'"
+            class="pi pi-times cursor-pointer"
+            (click)="formGroup.controls['url'].reset()"
+            [attr.aria-label]="'ACTIONS.CREATE.URL.REMOVE' | translate"
+            [pTooltip]="'ACTIONS.CREATE.URL.REMOVE' | translate"
+            tooltipPosition="top"
+            tooltipEvent="hover"
+          ></a>
           <input
+            #createUrl
             pInputText
             id="wc_image_create_form_url"
-            class="w-full"
+            class="w-full text-responsive"
             formControlName="url"
             [attr.aria-label]="'ACTIONS.CREATE.URL' | translate"
             [pTooltip]="'ACTIONS.CREATE.URL.TOOLTIP' | translate"

diff --git a/src/app/welcome/welcome-configure/image-create/image-create.component.scss b/src/app/welcome/welcome-configure/image-create/image-create.component.scss
@@ -2,3 +2,5 @@
 
 @include correct-file-upload;
 @include dialog-footer-buttons;
+@include displaying-text-responsive;
+@include input-clear-icon;
diff --git a/src/app/welcome/welcome-configure/image-create/image-create.component.spec.ts b/src/app/welcome/welcome-configure/image-create/image-create.component.spec.ts
@@ -96,7 +96,7 @@ describe('ImageCreateComponent', () => {
   })
   it('should save image with fileUpload', () => {
     component.ngOnInit()
-    component.handleFileSelected(new Blob())
+    component.onFileSelected(new Blob())
 
     fixture.detectChanges()
     const dElement = fixture.debugElement
@@ -114,9 +114,9 @@ describe('ImageCreateComponent', () => {
 
   it('should handle file removal', () => {
     component.ngOnInit()
-    component.handleFileSelected(new Blob())
+    component.onFileSelected(new Blob())
     expect(component.selectedFile).toBeDefined()
-    component.handleFileRemoval()
+    component.onFileRemoval()
     expect(component.selectedFile).toBeUndefined()
   })
 
@@ -131,7 +131,7 @@ describe('ImageCreateComponent', () => {
   it('should handle error when creating image data', () => {
     component.ngOnInit()
 
-    component.handleFileSelected(new Blob())
+    component.onFileSelected(new Blob())
 
     apiServiceSpy.createImageInfo.and.returnValue(of({ id: '123', position: '1', modificationCount: 0 } as ImageInfo))
 
@@ -145,7 +145,7 @@ describe('ImageCreateComponent', () => {
   it('should handle error when updating image info', () => {
     component.ngOnInit()
 
-    component.handleFileSelected(new Blob())
+    component.onFileSelected(new Blob())
 
     apiServiceSpy.createImageInfo.and.returnValue(of({ id: '123', position: '1', modificationCount: 0 } as ImageInfo))
     apiServiceSpy.createImage.and.returnValue(of({ imageId: '1234' } as ImageDataResponse))

diff --git a/src/app/welcome/welcome-configure/image-create/image-create.component.ts b/src/app/welcome/welcome-configure/image-create/image-create.component.ts
@@ -1,24 +1,22 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core'
 import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidatorFn } from '@angular/forms'
 
-import { Action, AppStateService, PortalMessageService } from '@onecx/portal-integration-angular'
+import { AppStateService, PortalMessageService } from '@onecx/portal-integration-angular'
 import { ImageInfo, ImagesInternalAPIService } from 'src/app/shared/generated'
 
 @Component({
   selector: 'app-image-create',
   templateUrl: './image-create.component.html',
   styleUrls: ['./image-create.component.scss']
 })
-export class ImageCreateComponent implements OnInit {
+export class ImageCreateComponent implements OnInit, OnChanges {
   @Input() public displayCreateDialog = false
   @Input() public imageInfoCount: number = 0
   @Output() public hideDialogAndChanged = new EventEmitter<boolean>()
   @ViewChild('fileUpload', { static: true }) fileUpload: any
 
-  actions: Action[] = []
   public isLoading = false
   formGroup: FormGroup
-  autoResize!: boolean
   selectedFile: any
   uploadDisabled: boolean = false
   currentWorkspaceName: string = ''
@@ -33,27 +31,29 @@ export class ImageCreateComponent implements OnInit {
       url: new FormControl(null, this.imageSrcValidator()),
       image: new FormControl(null)
     })
-    this.autoResize = true
     this.currentWorkspaceName = this.appstateService.currentWorkspace$.getValue()?.workspaceName || ''
   }
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.formGroup.get('url')?.valueChanges.subscribe((v) => {
-      v !== null && v !== '' ? this.disableUpload(true) : this.disableUpload(false)
+      this.uploadDisabled = v !== null && v !== ''
     })
   }
-  disableUpload(disable: boolean) {
-    this.uploadDisabled = disable
-  }
-  public onDialogHide() {
-    this.displayCreateDialog = false
-    this.hideDialogAndChanged.emit(false)
+
+  ngOnChanges(): void {
+    this.formGroup.get('url')?.reset()
   }
-  imageSrcValidator(): ValidatorFn {
+
+  private imageSrcValidator(): ValidatorFn {
     return (control: AbstractControl): { [key: string]: any } | null =>
       control.value !== null && control.value != '' ? null : { srcMissing: 'image src missing' }
   }
 
+  public onDialogHide(): void {
+    this.displayCreateDialog = false
+    this.hideDialogAndChanged.emit(false)
+  }
+
   public onSave(): void {
     if (this.formGroup.valid) {
       const imageInfo = this.submitFormValues() as ImageInfo
@@ -88,7 +88,7 @@ export class ImageCreateComponent implements OnInit {
                         next: () => {
                           this.msgService.success({ summaryKey: 'ACTIONS.CREATE.SUCCESS' })
                           this.hideDialogAndChanged.emit(true)
-                          this.handleFileRemoval()
+                          this.onFileRemoval()
                           this.fileUpload.clear()
                         },
                         error: () => {
@@ -111,14 +111,14 @@ export class ImageCreateComponent implements OnInit {
     }
   }
 
-  public handleFileSelected(selectedFile: Blob) {
+  public onFileSelected(selectedFile: Blob) {
     if (selectedFile.size < 1000000) {
       this.selectedFile = selectedFile
       this.formGroup.controls['url'].disable()
     }
   }
 
-  public handleFileRemoval() {
+  public onFileRemoval() {
     this.formGroup.controls['url'].enable()
     this.selectedFile = undefined
   }

diff --git a/src/app/welcome/welcome-configure/welcome-configure.component.html b/src/app/welcome/welcome-configure/welcome-configure.component.html
@@ -26,10 +26,16 @@
     <div class="flex flex-row flex-wrap gap-4">
       <div class="p-card" styleClass="h-full" *ngFor="let info of imageInfos; let i = index">
         <div class="p-card-body w-20rem h-18rem flex flex-column flex-nowrap justify-content-between">
-          <div class="aw-18rem ah-14rem flex justify-content-center align-items-center">
+          <div
+            class="flex justify-content-center align-items-center border-round border-3 border-solid hover:border-400 cursor-pointer"
+            style="border-color: transparent"
+            (click)="onOpenDetailDialog(i)"
+            (keydown.enter)="onOpenDetailDialog(i)"
+            (keydown.space)="onOpenDetailDialog(i)"
+          >
             <img
               [id]="'wc_configure_card_item_' + i + '_image'"
-              class="w-18rem h-13rem cursor-pointer"
+              class="w-18rem h-13rem"
               [ngStyle]="{
                 'object-fit': info.objectFit ?? 'scale-down',
                 'object-position': info.objectPosition ?? 'center center',
@@ -38,9 +44,6 @@
               [attr.tabindex]="0"
               [alt]="('DIALOG.DETAIL.PIC' | translate) + '_' + i"
               [src]="buildImageSrc(info)"
-              (click)="onOpenDetailDialog(i)"
-              (keydown.enter)="onOpenDetailDialog(i)"
-              (keydown.space)="onOpenDetailDialog(i)"
               [attr.aria-label]="'DIALOG.DETAIL.TOOLTIP' | translate"
               [pTooltip]="'DIALOG.DETAIL.TOOLTIP' | translate"
               tooltipPosition="top"

diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
@@ -47,6 +47,7 @@
         "INVALID_TYPE_SUMMARY": "Unzulässiges Dateiformat."
       },
       "URL": "Externe URL",
+      "URL.REMOVE": "Inhalt löschen",
       "URL.TOOLTIP": "Eine externe URL als Alternative zum Hochladen",
       "SELECT": "Bild auswählen",
       "SELECT.TOOLTIP": "Ein Bild auswählen und hochladen",
@@ -78,7 +79,7 @@
     "DETAIL": {
       "PIC": "Bild",
       "HEADER": "Bild konfigurieren",
-      "TOOLTIP": "Klicken, um vergrößerte Ansicht des Bildes zu sehen",
+      "TOOLTIP": "Klicken, um das Erscheinungsbild des Bildes zu konfigurieren",
       "AREA.CSS": "CSS Eigenschaften",
       "AREA.IMAGE": "Vorschau"
     }

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -47,6 +47,7 @@
         "INVALID_TYPE_SUMMARY": "Invalid file type."
       },
       "URL": "External URL",
+      "URL.REMOVE": "Remove content",
       "URL.TOOLTIP": "An external URL as an alternative to upload",
       "SELECT": "Select Image",
       "SELECT.TOOLTIP": "Select and Upload an Image",
@@ -78,7 +79,7 @@
     "DETAIL": {
       "PIC": "Picture",
       "HEADER": "Image configuration",
-      "TOOLTIP": "Click for an enlarged view of the image",
+      "TOOLTIP": "Click to configure the appearance of the image",
       "AREA.CSS": "CSS Properties",
       "AREA.IMAGE": "Preview"
     }