Improve import path select input

Signed-off-by: trivernis <trivernis@protonmail.com>
pull/4/head
trivernis 3 years ago
parent af8b84e975
commit b5dcc17723

@ -1,17 +1,20 @@
<div class="file-select-inner" fxLayout="row"> <div class="file-select-inner" fxLayout="row">
<mat-form-field appearance="fill" fxFlex fxFlexFill> <mat-form-field appearance="fill">
<mat-label>{{label}}</mat-label> <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> </div>

@ -2,13 +2,21 @@
width: 100%; width: 100%;
} }
.file-input {
width: calc(100% - 3em);
float: left;
text-overflow: ellipsis;
}
.buttons-native-select { .buttons-native-select {
display: flex; position: absolute;
flex-direction: row; top: 0;
padding-top: 4px; right: 0;
margin-top: -19px;
button { button {
width: 3em; width: 3em;
height: 3em; height: 3em;
margin-left: -10px;
} }
} }

Loading…
Cancel
Save