diff --git a/src/main/frontend/components/shortcut.cljs b/src/main/frontend/components/shortcut.cljs index eb84b8170c..87e0512c4f 100644 --- a/src/main/frontend/components/shortcut.cljs +++ b/src/main/frontend/components/shortcut.cljs @@ -716,6 +716,7 @@ (false? (first binding))) unset? (and (not disabled?) (or (= user-binding []) + (and (nil? binding) (nil? user-binding)) (and (= binding []) (nil? user-binding))))]] @@ -753,23 +754,22 @@ {:class (util/classnames [{:disabled disabled?}])} (cond - (or unset? user-binding (false? user-binding)) - [:code - (if unset? - (t :keymap/unset) - (str (t :keymap/custom) ": " - (if disabled? - (t :keymap/disabled) - (bean/->js - (map #(if (false? %) - (t :keymap/disabled) - (shortcut-utils/decorate-binding %)) user-binding)))))] + unset? + [:span.shortcut-status-label (t :keymap/unset)] - (not unset?) - [:code.flex.items-center.bg-transparent - {:style {:min-height "20px" - :flex-wrap "nowrap" - :white-space "nowrap"}} - (shui/shortcut - (string/join " | " (map #(dh/binding-for-display id %) binding)) - {:raw-binding binding})])]]))))])])]])) + (or user-binding (false? user-binding)) + [:<> + [:span.shortcut-status-label (str (t :keymap/custom) ":")] + (if disabled? + [:span.shortcut-status-label (t :keymap/disabled)] + (for [b user-binding + :when (string? b)] + [:span {:key b} + (shui/shortcut b)]))] + + :else + (for [b binding + :when (string? b)] + [:span {:key b} + (shui/shortcut (dh/binding-for-display id b) + {:raw-binding [b]})]))]]))))])])]])) diff --git a/src/main/frontend/components/shortcut.css b/src/main/frontend/components/shortcut.css index 823c7d4adc..f98c204263 100644 --- a/src/main/frontend/components/shortcut.css +++ b/src/main/frontend/components/shortcut.css @@ -106,15 +106,28 @@ .label-wrap { @apply flex flex-1; + min-width: 120px; } .action-wrap { - @apply flex space-x-2 items-center flex-nowrap + @apply flex items-center flex-wrap justify-end select-none; + column-gap: 16px; + row-gap: 6px; + max-width: 55%; &.disabled { @apply opacity-60 cursor-default; } + + .shortcut-status-label { + @apply text-xs whitespace-nowrap; + opacity: 0.5; + + &:not(:only-child) { + margin-right: -8px; + } + } } } diff --git a/src/main/frontend/modules/shortcut/data_helper.cljs b/src/main/frontend/modules/shortcut/data_helper.cljs index f5215123c9..9194d450ee 100644 --- a/src/main/frontend/modules/shortcut/data_helper.cljs +++ b/src/main/frontend/modules/shortcut/data_helper.cljs @@ -104,7 +104,9 @@ (->> (if plugin? (->> (keys dict) (filter #(string/starts-with? (str %) ":plugin."))) (shortcut-config/get-category-shortcuts name)) - (mapv (fn [k] [k (assoc (get dict k) :category name)]))))) + (keep (fn [k] (when-let [m (get dict k)] + [k (assoc m :category name)]))) + (vec)))) (defn shortcuts-map-full []