RNS-Things/reticulum-meshchatX
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 8 Wiki Activity

ui adjustments

Browse Source
This commit is contained in:
liamcottle
2025-01-01 17:19:05 +13:00
parent 12c3310943
commit e0585d8bcf
1 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/frontend/components/interfaces/ImportInterfacesModal.vue
View File

@@ -8,32 +8,34 @@
</div>
<!-- content -->
<div class="divide-y">
<div class="divide-y dark:divide-zinc-700">
<!-- file input -->
<div class="p-4">
<label class="block text-sm font-medium text-gray-700 dark:text-zinc-200">Select Configuration File</label>
<input ref="import-interfaces-file-input" type="file" @change="onFileSelected" accept="*"
class="mt-1 block w-full text-sm text-gray-500 dark:text-zinc-400
<div class="p-2">
<div class="text-sm font-medium text-gray-700 dark:text-zinc-200">Select a Configuration File</div>
<div>
<input ref="import-interfaces-file-input" type="file" @change="onFileSelected" accept="*"
class="mt-1 block w-full text-sm text-gray-500 dark:text-zinc-400
file:mr-4 file:py-2 file:px-4
file:rounded-md file:border-0
file:text-sm file:font-semibold
file:bg-gray-500 file:text-white
hover:file:bg-gray-400
dark:file:bg-zinc-700 dark:hover:file:bg-zinc-600">
</div>
</div>
<!-- select interfaces -->
<div v-if="importableInterfaces.length > 0" class="p-4">
<div class="flex justify-between mb-2">
<label class="block text-sm font-medium text-gray-700 dark:text-zinc-200">Select Interfaces to Import</label>
<div class="space-x-2">
<button @click="selectAllInterfaces" class="text-sm text-blue-500">Select All</button>
<button @click="deselectAllInterfaces" class="text-sm text-blue-500">Deselect All</button>
<div v-if="importableInterfaces.length > 0" class="divide-y dark:divide-zinc-700">
<div class="flex p-2">
<div class="my-auto mr-auto text-sm font-medium text-gray-700 dark:text-zinc-200">Select Interfaces to Import</div>
<div class="my-auto space-x-2">
<button @click="selectAllInterfaces" class="text-sm text-blue-500 hover:underline">Select All</button>
<button @click="deselectAllInterfaces" class="text-sm text-blue-500 hover:underline">Deselect All</button>
</div>
</div>
<div class="space-y-2 max-h-60 overflow-y-auto">
<div @click="toggleSelectedInterface(iface.name)" v-for="iface in importableInterfaces" :key="iface.name" class="cursor-pointer flex items-center p-2 border rounded dark:border-zinc-700">
<div class="p-2 space-y-2 max-h-72 overflow-y-auto">
<div @click="toggleSelectedInterface(iface.name)" v-for="iface in importableInterfaces" :key="iface.name" class="cursor-pointer flex items-center p-2 border rounded dark:border-zinc-700 shadow">
<div class="mr-auto text-sm text-gray-700 dark:text-zinc-200">
<div class="font-semibold">{{ iface.name }}</div>
<div class="text-sm text-gray-500">{{ iface.type }}</div>