feat: remove help modal for ISO selection to simplify user interface
This commit is contained in:
@@ -255,69 +255,11 @@
|
||||
@endforeach
|
||||
</select>
|
||||
<!-- Dropdown Arrow Icon -->
|
||||
<div class="absolute right-8 top-1/2 -translate-y-1/2 pointer-events-none">
|
||||
<div class="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-base/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Help Modal Icon -->
|
||||
<div class="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none">
|
||||
<div class="relative" x-data="{ open: false }" x-cloak>
|
||||
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors pointer-events-auto">
|
||||
<x-ri-question-line class="size-3.5" />
|
||||
</button>
|
||||
<!-- Modal Backdrop -->
|
||||
<div x-show="open"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
||||
style="display: none;">
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<div x-show="open"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
@click.away="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
style="display: none;">
|
||||
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
|
||||
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
|
||||
<x-ri-close-line class="size-5" />
|
||||
</button>
|
||||
<div class="flex items-center gap-3 mb-4 pr-8">
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
|
||||
<x-ri-file-list-3-line class="size-5 text-primary" />
|
||||
</div>
|
||||
<h6 class="font-sans text-lg font-semibold leading-tight text-base">
|
||||
ISO Selection
|
||||
</h6>
|
||||
</div>
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
Displays all available ISO images from cephfs storage. Select an ISO to mount it to the drive, or choose "None" to leave the drive empty.
|
||||
</p>
|
||||
<div class="pt-4 mt-4 border-t border-neutral/30">
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75 mb-2">
|
||||
The dropdown shows only the filename (storage prefix is hidden for clarity). Changes to the selection are tracked in real-time, but you must click <span class="font-semibold text-base/90">Apply</span> to actually mount the ISO.
|
||||
</p>
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
The Apply button will be disabled if the selected ISO matches what's currently mounted.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2 w-full sm:w-auto min-w-0">
|
||||
<x-button.primary wire:click="applyIso('{{ $drive }}')"
|
||||
|
||||
Reference in New Issue
Block a user