Improve import path select input

Signed-off-by: trivernis <trivernis@protonmail.com>

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)">
+    <input #filesInput matInput [value]="files.join(', ')" (focusout)="this.setFiles(filesInput.value)" class="file-input">
-  </mat-form-field>
 
-  <div class="buttons-native-select" fxFlex="6em">
+    <div class="buttons-native-select">
-    <button (click)="openNativeFileSelectDialog(false)" mat-button>
+      <button *ngIf="mode === 'all'" (click)="openNativeFileSelectDialog(false)" mat-button>
-      <mat-icon>insert_drive_file</mat-icon>
+        <mat-icon>folder</mat-icon>
-    </button>
+      </button>
-    <button (click)="openNativeFileSelectDialog(true)" mat-button>
+      <button *ngIf="mode === 'files'" (click)="openNativeFileSelectDialog(false)" mat-button>
-      <mat-icon>folder</mat-icon>
+        <mat-icon>insert_drive_file</mat-icon>
-    </button>
+      </button>
-  </div>
+      <button *ngIf="mode === 'folders'" (click)="openNativeFileSelectDialog(true)" mat-button>
+        <mat-icon>folder</mat-icon>
+      </button>
+    </div>
 
+  </mat-form-field>
 </div>

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;
+  position: absolute;
-  flex-direction: row;
+  top: 0;
-  padding-top: 4px;
+  right: 0;
+  margin-top: -19px;
+
   button {
     width: 3em;
     height: 3em;
-    margin-left: -10px;
   }
 }