dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

enhance(settings-dropdown): add icons to buttons for improved UI in settings dropdown

Browse Source
This commit is contained in:
Andras Bacsai
2025-08-08 13:53:42 +02:00
parent cbd2c88cb4
commit 022cc7c973
1 changed files with 55 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
resources/views/livewire/settings-dropdown.blade.php
View File

@@ -122,7 +122,12 @@
@if ($unreadCount > 0) @if ($unreadCount > 0)
<button wire:click="openWhatsNewModal" @click="dropdownOpen = false" <button wire:click="openWhatsNewModal" @click="dropdownOpen = false"
class="px-1 dropdown-item-no-padding flex items-center justify-between"> class="px-1 dropdown-item-no-padding flex items-center justify-between">
<span>What's New</span> <div class="flex items-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>What's New</span>
</div>
<span <span
class="bg-error text-white text-xs rounded-full w-5 h-5 flex items-center justify-center"> class="bg-error text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
{{ $unreadCount > 9 ? '9+' : $unreadCount }} {{ $unreadCount > 9 ? '9+' : $unreadCount }}
@@ -130,8 +135,11 @@
</button> </button>
@else @else
<button wire:click="openWhatsNewModal" @click="dropdownOpen = false" <button wire:click="openWhatsNewModal" @click="dropdownOpen = false"
class="px-1 dropdown-item-no-padding"> class="px-1 dropdown-item-no-padding flex items-center gap-2">
Changelog <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<span>Changelog</span>
</button> </button>
@endif @endif
@@ -142,29 +150,64 @@
<div class="font-bold border-b dark:border-coolgray-500 border-neutral-300 dark:text-white pb-1"> <div class="font-bold border-b dark:border-coolgray-500 border-neutral-300 dark:text-white pb-1">
Appearance</div> Appearance</div>
<button @click="setTheme('dark'); dropdownOpen = false" <button @click="setTheme('dark'); dropdownOpen = false"
class="px-1 dropdown-item-no-padding">Dark</button> class="px-1 dropdown-item-no-padding flex items-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
<span>Dark</span>
</button>
<button @click="setTheme('light'); dropdownOpen = false" <button @click="setTheme('light'); dropdownOpen = false"
class="px-1 dropdown-item-no-padding">Light</button> class="px-1 dropdown-item-no-padding flex items-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
<span>Light</span>
</button>
<button @click="setTheme('system'); dropdownOpen = false" <button @click="setTheme('system'); dropdownOpen = false"
class="px-1 dropdown-item-no-padding">System</button> class="px-1 dropdown-item-no-padding flex items-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<span>System</span>
</button>
<!-- Width Section --> <!-- Width Section -->
<div <div
class="my-1 font-bold border-b dark:border-coolgray-500 border-neutral-300 dark:text-white text-md"> class="my-1 font-bold border-b dark:border-coolgray-500 border-neutral-300 dark:text-white text-md">
Width</div> Width</div>
<button @click="switchWidth(); dropdownOpen = false" class="px-1 dropdown-item-no-padding" <button @click="switchWidth(); dropdownOpen = false" class="px-1 dropdown-item-no-padding flex items-center gap-2"
x-show="full === 'full'">Center</button> x-show="full === 'full'">
<button @click="switchWidth(); dropdownOpen = false" class="px-1 dropdown-item-no-padding" <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
x-show="full === 'center'">Full</button> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
</svg>
<span>Center</span>
</button>
<button @click="switchWidth(); dropdownOpen = false" class="px-1 dropdown-item-no-padding flex items-center gap-2"
x-show="full === 'center'">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<span>Full</span>
</button>
<!-- Zoom Section --> <!-- Zoom Section -->
<div <div
class="my-1 font-bold border-b dark:border-coolgray-500 border-neutral-300 dark:text-white text-md"> class="my-1 font-bold border-b dark:border-coolgray-500 border-neutral-300 dark:text-white text-md">
Zoom</div> Zoom</div>
<button @click="setZoom(100); dropdownOpen = false" <button @click="setZoom(100); dropdownOpen = false"
class="px-1 dropdown-item-no-padding">100%</button> class="px-1 dropdown-item-no-padding flex items-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<span>100%</span>
</button>
<button @click="setZoom(90); dropdownOpen = false" <button @click="setZoom(90); dropdownOpen = false"
class="px-1 dropdown-item-no-padding">90%</button> class="px-1 dropdown-item-no-padding flex items-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 10h4v4h-4v-4z" />
</svg>
<span>90%</span>
</button>
</div> </div>
</div> </div>
</div> </div>