From 8a387e1a9b8951018b9ec5eef7a0f1f55259919a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henry=20T=C3=A4schner?=
 <129834483+HenryT-CG@users.noreply.github.com>
Date: Thu, 8 Aug 2024 15:04:54 +0200
Subject: [PATCH] Fix import layout (#211)

* fix: import layout

* fix: import layout
---
 src/_mixins.scss                              | 26 +++++++++++++++++++
 .../theme-import/theme-import.component.html  | 15 ++++++-----
 .../theme-import/theme-import.component.scss  | 26 +++----------------
 3 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/src/_mixins.scss b/src/_mixins.scss
index 5c1cd1f..d83d3ee 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -158,6 +158,32 @@
   }
 }
 
+@mixin correct-file-upload {
+  :host ::ng-deep {
+    .p-fileupload {
+      .p-fileupload-buttonbar,
+      .p-fileupload-content {
+        background-color: var(--surface-100) !important;
+      }
+      .p-fileupload-content {
+        padding: 0.5rem;
+        .p-fileupload-row {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          gap: 0;
+          > div {
+            width: unset;
+            &.p-fileupload-filename {
+              max-width: 25rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 @mixin search-criteria-select-button-slim {
   :host ::ng-deep {
     .slim-selectbutton {
diff --git a/src/app/theme/theme-import/theme-import.component.html b/src/app/theme/theme-import/theme-import.component.html
index 4d99ad0..1233965 100644
--- a/src/app/theme/theme-import/theme-import.component.html
+++ b/src/app/theme/theme-import/theme-import.component.html
@@ -7,7 +7,7 @@
   (onHide)="onImportThemeHide()"
 >
   <p-fileUpload
-    inputId="portal_detail_item_upload"
+    inputId="theme_import_upload"
     mode="advanced"
     name="file"
     accept=".json"
@@ -24,13 +24,12 @@
     [cancelLabel]="'ACTIONS.CANCEL' | translate"
     [chooseLabel]="'ACTIONS.CHOOSE' | translate"
   ></p-fileUpload>
-  <label class="ocx-required-label" for="portal_detail_item_upload">{{ 'THEME.THEME_NAME' | translate }}</label>
   <div *ngIf="themeSnapshot" class="flex flex-wrap justify-content-between align-items-center gap-2 mt-4">
     <span class="p-float-label" controlErrorAnchor>
       <input
         pInputText
         type="text"
-        id="theme_import_themeName"
+        id="theme_import_theme_name"
         class="w-full pt-3 pb-2"
         [(ngModel)]="themeName"
         (ngModelChange)="checkThemeExistence()"
@@ -39,7 +38,7 @@
         tooltipPosition="top"
         tooltipEvent="focus"
       />
-      <label class="ocx-required-label" for="portal_detail_item_portalName">{{ 'THEME.THEME_NAME' | translate }}</label>
+      <label class="ocx-required-label" for="theme_import_theme_name">{{ 'THEME.THEME_NAME' | translate }}</label>
     </span>
     <app-theme-color-box *ngIf="properties" [properties]="properties" styleClass="h-inputtext" />
     <div *ngIf="!properties">{{ 'THEME.NO_PROPERTIES' | translate }}</div>
@@ -62,10 +61,12 @@
       pButton
       type="button"
       icon="pi pi-times"
-      id="portal_import_button_close"
-      [label]="'ACTIONS.NAVIGATION.CLOSE' | translate"
-      [title]="'ACTIONS.NAVIGATION.CLOSE_WITHOUT_SAVE' | translate"
+      id="theme_import_button_close"
       (click)="onImportThemeHide()"
+      [label]="'ACTIONS.NAVIGATION.CLOSE' | translate"
+      [pTooltip]="'ACTIONS.NAVIGATION.CLOSE_WITHOUT_SAVE' | translate"
+      tooltipPosition="top"
+      tooltipEvent="focus"
     ></button>
   </div>
 </p-dialog>
diff --git a/src/app/theme/theme-import/theme-import.component.scss b/src/app/theme/theme-import/theme-import.component.scss
index 94f2e60..4eeb34a 100644
--- a/src/app/theme/theme-import/theme-import.component.scss
+++ b/src/app/theme/theme-import/theme-import.component.scss
@@ -1,23 +1,3 @@
-:host ::ng-deep {
-  .p-fileupload {
-    .p-fileupload-buttonbar,
-    .p-fileupload-content {
-      background-color: var(--surface-100) !important;
-    }
-    .p-fileupload-content {
-      padding: 0.5rem;
-      .p-fileupload-row {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        gap: 0;
-        > div {
-          width: unset;
-          &:first-child {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-}
+@import 'src/_mixins.scss';
+
+@include correct-file-upload;