feat: redesign CMD+K button as macOS Spotlight-style search bar
Replace simple search button with search bar design in action bar: - Semi-transparent styling integrated with dark action bar - Keyboard shortcut indicators (⌘ K) shown as individual kbd elements - Search icon and "Search" text for better discoverability - Responsive: kbd keys hidden on mobile (<900px) - Remove unused cmd-k-button.html partial template Update test to verify new search bar structure (styling, kbd elements, icon).
This commit is contained in:
@@ -24,11 +24,15 @@
|
||||
{{.UI.Widgets.ActionButtons.PrintFriendly}}
|
||||
</button>
|
||||
<button
|
||||
class="action-btn search-btn has-tooltip cmd-k-trigger"
|
||||
aria-label="{{.UI.Widgets.ActionButtons.SearchAriaLabel}}"
|
||||
data-tooltip="{{.UI.Widgets.ActionButtons.Search}}">
|
||||
<iconify-icon icon="mdi:magnify" width="24" height="24"></iconify-icon>
|
||||
{{.UI.Widgets.ActionButtons.Search}}
|
||||
id="cmd-k-button"
|
||||
class="action-btn search-bar-btn cmd-k-trigger"
|
||||
aria-label="{{.UI.Widgets.ActionButtons.SearchAriaLabel}}">
|
||||
<iconify-icon icon="mdi:magnify" width="18" height="18" class="search-bar-icon"></iconify-icon>
|
||||
<span class="search-bar-text">{{.UI.Widgets.ActionButtons.Search}}</span>
|
||||
<span class="search-bar-keys">
|
||||
<kbd>⌘</kbd>
|
||||
<kbd>K</kbd>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
{{define "cmd-k-button"}}
|
||||
<!-- CMD+K Command Bar Button (Fixed Left - Last) -->
|
||||
<!-- Uses lazy loading - ninja-keys loads on first click -->
|
||||
<button
|
||||
id="cmd-k-button"
|
||||
class="fixed-btn cmd-k-btn no-print has-tooltip cmd-k-trigger"
|
||||
aria-label="{{.UI.CmdK.Button.AriaLabel}}"
|
||||
data-tooltip="{{.UI.CmdK.Button.Tooltip}}">
|
||||
<iconify-icon icon="mdi:text-box-search-outline"></iconify-icon>
|
||||
</button>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user