From b5dcc177232c818a07ace00c170b48a9f012edc1 Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Mon, 8 Nov 2021 21:06:46 +0100
Subject: [PATCH] Improve import path select input

Signed-off-by: trivernis <trivernis@protonmail.com>
---
 .../native-file-select.component.html         | 25 +++++++++++--------
 .../native-file-select.component.scss         | 16 +++++++++---
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.html b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.html
index 6f9d654..aab3dc1 100644
--- a/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.html
+++ b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.html
@@ -1,17 +1,20 @@
 <div class="file-select-inner" fxLayout="row">
 
-  <mat-form-field appearance="fill" fxFlex fxFlexFill>
+  <mat-form-field appearance="fill">
     <mat-label>{{label}}</mat-label>
-    <input #filesInput matInput [value]="files.join(', ')" (focusout)="this.setFiles(filesInput.value)">
-  </mat-form-field>
+    <input #filesInput matInput [value]="files.join(', ')" (focusout)="this.setFiles(filesInput.value)" class="file-input">
 
-  <div class="buttons-native-select" fxFlex="6em">
-    <button (click)="openNativeFileSelectDialog(false)" mat-button>
-      <mat-icon>insert_drive_file</mat-icon>
-    </button>
-    <button (click)="openNativeFileSelectDialog(true)" mat-button>
-      <mat-icon>folder</mat-icon>
-    </button>
-  </div>
+    <div class="buttons-native-select">
+      <button *ngIf="mode === 'all'" (click)="openNativeFileSelectDialog(false)" mat-button>
+        <mat-icon>folder</mat-icon>
+      </button>
+      <button *ngIf="mode === 'files'" (click)="openNativeFileSelectDialog(false)" mat-button>
+        <mat-icon>insert_drive_file</mat-icon>
+      </button>
+      <button *ngIf="mode === 'folders'" (click)="openNativeFileSelectDialog(true)" mat-button>
+        <mat-icon>folder</mat-icon>
+      </button>
+    </div>
 
+  </mat-form-field>
 </div>
diff --git a/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.scss b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.scss
index e95ec32..10d05c5 100644
--- a/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.scss
+++ b/mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.scss
@@ -2,13 +2,21 @@
   width: 100%;
 }
 
+
+.file-input {
+  width: calc(100% - 3em);
+  float: left;
+  text-overflow: ellipsis;
+}
+
 .buttons-native-select {
-  display: flex;
-  flex-direction: row;
-  padding-top: 4px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin-top: -19px;
+
   button {
     width: 3em;
     height: 3em;
-    margin-left: -10px;
   }
 }