Browse Source

Enhance shortcut rendering in CMD K component

- Updated shortcut rendering logic to conditionally apply styles based on the presence of modifier keys, improving visual clarity.
- Refined the display of shortcuts in tooltips for better user experience and accessibility.
scheinriese 6 days ago
parent
commit
ff8efe42b1
1 changed files with 11 additions and 4 deletions
  1. 11 4
      src/main/frontend/components/cmdk/core.cljs

+ 11 - 4
src/main/frontend/components/cmdk/core.cljs

@@ -908,7 +908,7 @@
      (shui/shortcut "/")
      [:div "to filter search results"]]
     [:div.flex.flex-row.gap-1.items-center.opacity-50.hover:opacity-100
-     (shui/shortcut ["mod" "enter"])
+     (shui/shortcut ["mod" "enter"] {:style :combo})
      [:div "to open search in the sidebar"]]]))
 
 (rum/defcs tip <
@@ -936,9 +936,16 @@
    [[:span.opacity-60 text]
      ;; shortcut
     (when (not-empty shortcut)
-      (shui/shortcut shortcut {:style :separate
-                               :interactive? false
-                               :aria-hidden? true}))]))
+      (let [has-modifier? (and (coll? shortcut)
+                               (some #(#{"shift" "ctrl" "alt" "cmd" "mod" "⌘" "⌥" "⌃"}
+                                       (string/lower-case (str %)))
+                                     shortcut))
+            style (if (and (> (count shortcut) 1) has-modifier?)
+                    :combo
+                    :auto)]
+        (shui/shortcut shortcut {:style style
+                                 :interactive? false
+                                 :aria-hidden? true})))]))
 
 (rum/defc hints
   [state]