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">
<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>

@ -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;
}
}

Loading…
Cancel
Save