Browse Source

enhance: improve tooltips for keyboard shortcuts

Devon Zuegel 3 years ago
parent
commit
ff4bee8f07

+ 56 - 67
src/main/frontend/components/header.cljs

@@ -22,17 +22,21 @@
             [frontend.util :as util]
             [cljs-bean.core :as bean]
             [reitit.frontend.easy :as rfe]
-            [frontend.modules.shortcut.data-helper :as shortcut-helper]
             [rum.core :as rum]
             [frontend.mobile.util :as mobile-util]
             [frontend.components.widgets :as widgets]))
 
-(rum/defc home-button
-  []
-  [:a.button
-   {:href     (rfe/href :home)
-    :on-click route-handler/go-to-journals!}
-   (ui/icon "home" {:style {:fontSize 20}})])
+(rum/defc home-button []
+  (ui/tippy
+   {:html [:div.text-sm.font-medium (ui/keyboard-shortcut-from-config :go/home)]
+    :interactive true
+    :position    "left"
+    :theme       "extra-padding-y"
+    :arrow       true}
+   [:a.button
+    {:href     (rfe/href :home)
+     :on-click route-handler/go-to-journals!}
+    (ui/icon "home" {:style {:fontSize 20}})]))
 
 (rum/defc login
   [logged?]
@@ -57,44 +61,19 @@
           list))
        nil))))
 
-(defn keyboard-shortcut [shortcut-name]
-  (print "state/shortcuts: " (state/shortcuts))
-  (ui/keyboard-shortcut (or (shortcut-helper/decorate-binding
-                             "(:go/search (state/shortcuts))"
-                             #_(get (state/shortcuts) shortcut-name))
-                            ["x"])))
-
 (rum/defc left-menu-button < rum/reactive
   [{:keys [on-click]}]
-
   (ui/tippy
-   {:html [:div.text-sm.font-medium
-           #_(ui/keyboard-shortcut "x")
-           (keyboard-shortcut :ui/toggle-left-sidebar)]
-    :position "right"
+   {:html [:div.text-sm.font-medium (ui/keyboard-shortcut-from-config :ui/toggle-left-sidebar)]
+    :position    "bottom"
     :interactive true
-    :arrow true}
+    :arrow       true}
 
    [:a#left-menu.cp__header-left-menu.button
     {:on-click on-click
      :style {:margin-left 12}}
     (ui/icon "menu-2" {:style {:fontSize 20}})]))
 
-    #_(ui/tippy
-      {:html [:div.text-sm.font-medium
-              "Shortcut: "
-              [:code (util/->platform-shortcut "t l")]]
-       :delay 2000
-       :hideDelay 1
-       :position "right"
-       :interactive true
-       :arrow true}
-
-      [:a#left-menu.cp__header-left-menu.button
-       {:on-click on-click
-        :style {:margin-left 12}}
-       (ui/icon "menu-2" {:style {:fontSize 20}})])
-
 (rum/defc dropdown-menu < rum/reactive
   [{:keys [me current-repo t default-home]}]
   (let [projects (state/sub [:me :projects])
@@ -151,28 +130,42 @@
 (rum/defc back-and-forward
   []
   [:div.flex.flex-row
-   [:a.it.navigation.nav-left.button
-    {:title "Go Back" :on-click #(js/window.history.back)}
-    (ui/icon "arrow-left")]
-   [:a.it.navigation.nav-right.button
-    {:title "Go Forward" :on-click #(js/window.history.forward)}
-    (ui/icon "arrow-right")]])
+
+   (ui/tippy
+    {:html [:div.text-sm.font-medium (ui/keyboard-shortcut-from-config :go/backward)]
+     :interactive true
+     :position    "bottom"
+     :theme       "extra-padding-y"
+     :arrow       true}
+    [:a.it.navigation.nav-left.button
+     {:title "Go back" :on-click #(js/window.history.back)}
+     (ui/icon "arrow-left")])
+   
+   (ui/tippy
+    {:html [:div.text-sm.font-medium (ui/keyboard-shortcut-from-config :go/forward)]
+     :interactive true
+     :position    "bottom"
+     :theme       "extra-padding-y"
+     :arrow       true}
+    [:a.it.navigation.nav-right.button
+     {:title "Go forward" :on-click #(js/window.history.forward)}
+     (ui/icon "arrow-right")])])
 
 (rum/defc updater-tips-new-version
   [t]
   (let [[downloaded, set-downloaded] (rum/use-state nil)
         _ (rum/use-effect!
-           (fn []
-             (when-let [channel (and (util/electron?) "auto-updater-downloaded")]
-               (let [callback (fn [_ args]
-                                (js/console.debug "[new-version downloaded] args:" args)
-                                (let [args (bean/->clj args)]
-                                  (set-downloaded args)
-                                  (state/set-state! :electron/auto-updater-downloaded args))
-                                nil)]
-                 (js/apis.addListener channel callback)
-                 #(js/apis.removeListener channel callback))))
-           [])]
+            (fn []
+              (when-let [channel (and (util/electron?) "auto-updater-downloaded")]
+                (let [callback (fn [_ args]
+                                 (js/console.debug "[new-version downloaded] args:" args)
+                                 (let [args (bean/->clj args)]
+                                   (set-downloaded args)
+                                   (state/set-state! :electron/auto-updater-downloaded args))
+                                 nil)]
+                  (js/apis.addListener channel callback)
+                  #(js/apis.removeListener channel callback))))
+            [])]
 
     (when downloaded
       [:div.cp__header-tips
@@ -204,26 +197,22 @@
         (left-menu-button {:on-click (fn []
                                        (open-fn)
                                        (state/set-left-sidebar-open!
-                                        (not (:ui/left-sidebar-open? @state/state))))})
+                                         (not (:ui/left-sidebar-open? @state/state))))})
 
-        (when current-repo
+        (when current-repo ;; this is for the Search button
           (ui/tippy
-           {:html        [:div.text-sm.font-medium
-                          "Shortcut: "
-                           ;; TODO: Pull from config so it displays custom shortcut, not just the default
-                          [:code (util/->platform-shortcut "Ctrl + k")]]
-            :interactive true
-            :delay       2000
-            :position    "right"
-            :arrow       true}
-           [:a.button#search-button
-            {:on-click #(state/pub-event! [:go/search])}
-            (ui/icon "search" {:style {:fontSize 20}})]))]
+            {:html [:div.text-sm.font-medium (ui/keyboard-shortcut-from-config :go/search)]
+             :interactive true
+             :position    "right"
+             :arrow       true}
+            [:a.button#search-button
+             {:on-click #(state/pub-event! [:go/search])}
+             (ui/icon "search" {:style {:fontSize 20}})]))]
 
        [:div.r.flex
         (when (and
-               (not (mobile-util/is-native-platform?))
-               (not (util/electron?)))
+                (not (mobile-util/is-native-platform?))
+                (not (util/electron?)))
           (login logged?))
 
         (when plugin-handler/lsp-enabled?

+ 4 - 6
src/main/frontend/components/right_sidebar.cljs

@@ -24,13 +24,11 @@
   (when-not (util/mobile?)
     (ui/tippy
       {:html [:div.text-sm.font-medium
-              "Shortcut: "
-              [:code (util/->platform-shortcut "t r")]]
-       :delay 2000
-       :hideDelay 1
-       :position "left"
+              (ui/keyboard-shortcut-from-config :ui/toggle-right-sidebar)]
+       :position    "left"
+       :theme       "extra-padding-y"
        :interactive true
-       :arrow true}
+       :arrow       true}
 
       [:a.button.fade-link.toggle
        {:on-click state/toggle-sidebar-open?!}

+ 9 - 5
src/main/frontend/components/search.cljs

@@ -276,10 +276,11 @@
    [:div.px-4.py-2.text-sm.opacity-70.flex.flex-row.justify-between.align-items
     [:div "Recent search:"]
     (ui/tippy {:html [:div.text-sm.font-medium
-                      "Shortcut: "
-                      [:code (util/->platform-shortcut "Ctrl + Shift + k")]]
+                      (ui/keyboard-shortcut-from-config :go/search-in-page)]
+               :arrow           true
                :interactive     true
-               :arrow true}
+               :theme           "extra-padding-y"
+               }
               [:div.flex-row.flex.align-items
                [:div.mr-2 "Search in page:"]
                [:div {:style {:margin-top 3}}
@@ -288,9 +289,12 @@
                              (state/set-search-mode! (if in-page-search? :global :page)))
                            true)]
                (ui/tippy {:html [:div
-                                 "Tip: " [:code (util/->platform-shortcut "Ctrl+Shift+p")] " to open the commands palette"]
+                                  ;; TODO: fetch from config
+                                 "Tip: " [:code (util/->platform-shortcut "Ctrl + Shift + p")] " to open the commands palette"]
                           :interactive     true
-                          :arrow true}
+                          :arrow           true
+                          :theme           "extra-padding-y"
+                          }
                          [:a.inline-block.fade-link
                           {:style {:margin-left 12}
                            :on-click #(state/toggle! :ui/command-palette-open?)}

+ 2 - 2
src/main/frontend/components/settings.cljs

@@ -176,7 +176,7 @@
                 config-handler/toggle-ui-show-brackets!
                 true)]]
    [:div {:style {:text-align "right"}}
-    (ui/keyboard-shortcut (shortcut-helper/gen-shortcut-seq :ui/toggle-brackets))]])
+    (ui/render-keyboard-shortcut (shortcut-helper/gen-shortcut-seq :ui/toggle-brackets))]])
 
 (rum/defcs switch-spell-check-row < rum/reactive
   [state t]
@@ -286,7 +286,7 @@
             :class    (classnames [{:active system-theme?}])} [:i.mode-system] [:strong "system"]]]]
 
     [:div.pl-16
-     (ui/keyboard-shortcut (shortcut-helper/gen-shortcut-seq :ui/toggle-theme))]]])
+     (ui/render-keyboard-shortcut (shortcut-helper/gen-shortcut-seq :ui/toggle-theme))]]])
 
 (defn file-format-row [t preferred-format]
   [:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-start

+ 7 - 7
src/main/frontend/components/shortcut.cljs

@@ -19,10 +19,10 @@
      [:div
       [:p.mb-4 "Press any sequence of keys to set the shortcut for the " [:b action-name] " action."]
       [:p.mb-4.mt-4
-       (ui/keyboard-shortcut (-> keyboard-shortcut
-                                 (str/trim)
-                                 (str/lower-case)
-                                 (str/split  #" |\+")))
+       (ui/render-keyboard-shortcut (-> keyboard-shortcut
+                                        (str/trim)
+                                        (str/lower-case)
+                                        (str/split  #" |\+")))
        " "
        [:a.text-sm
         {:style {:margin-left "12px"}
@@ -44,7 +44,7 @@
     (customize-shortcut-dialog-inner k action-name displayed-binding)))
 
 (rum/defc shortcut-col [k binding configurable? action-name]
-  (let [conflict?         (dh/potential-confilct? k)
+  (let [conflict?         (dh/potential-conflict? k)
         displayed-binding (dh/binding-for-display k binding)
         disabled?         (clojure.string/includes? displayed-binding "system default")]
     (if (not configurable?)
@@ -105,10 +105,10 @@
        [:td.text-right [:code "(())"]]]
       [:tr
        [:td.text-left (t :command.editor/open-link-in-sidebar)]
-       [:td.text-right (ui/keyboard-shortcut ["shift" "click"])]]
+       [:td.text-right (ui/render-keyboard-shortcut ["shift" "click"])]]
       [:tr
        [:td.text-left (t :help/context-menu)]
-       [:td.text-right (ui/keyboard-shortcut ["right click"])]]]]))
+       [:td.text-right (ui/render-keyboard-shortcut ["right" "click"])]]]]))
 
 (defn markdown-and-orgmode-syntax []
   (rum/with-context [[t] i18n/*tongue-context*]

+ 2 - 2
src/main/frontend/components/sidebar.cljs

@@ -453,11 +453,11 @@
                       [:p.mb-2 [:b "Document mode"]]
                       [:ul
                        [:li
-                        [:div.inline-block.mr-1 (ui/keyboard-shortcut (shortcut-dh/gen-shortcut-seq :editor/new-line))]
+                        [:div.inline-block.mr-1 (ui/render-keyboard-shortcut (shortcut-dh/gen-shortcut-seq :editor/new-line))]
                         [:p.inline-block  "to create new block"]]
                        [:li
                         [:p.inline-block.mr-1 "Click `D` or type"]
-                        [:div.inline-block.mr-1 (ui/keyboard-shortcut (shortcut-dh/gen-shortcut-seq :ui/toggle-document-mode))]
+                        [:div.inline-block.mr-1 (ui/render-keyboard-shortcut (shortcut-dh/gen-shortcut-seq :ui/toggle-document-mode))]
                         [:p.inline-block "to toggle document mode"]]]]}
               [:a.block.px-1.text-sm.font-medium.bg-base-2.rounded-md.mx-2
                {:on-click state/toggle-document-mode!}

+ 7 - 7
src/main/frontend/extensions/srs.cljs

@@ -457,15 +457,15 @@
             [:div.flex-1
              (when-not (and (not preview?) (= next-phase 1))
                (ui/button (case next-phase
-                            1 [:span "Hide answers " (ui/keyboard-shortcut [:s])]
-                            2 [:span "Show answers " (ui/keyboard-shortcut [:s])]
-                            3 [:span "Show clozes " (ui/keyboard-shortcut [:s])])
+                            1 [:span "Hide answers " (ui/render-keyboard-shortcut [:s])]
+                            2 [:span "Show answers " (ui/render-keyboard-shortcut [:s])]
+                            3 [:span "Show clozes " (ui/render-keyboard-shortcut [:s])])
                           :id "card-answers"
                           :class "mr-2"
                  :on-click #(reset! phase next-phase)))
 
              (when (and (> (count cards) 1) preview?)
-               (ui/button [:span "Next " (ui/keyboard-shortcut [:n])]
+               (ui/button [:span "Next " (ui/render-keyboard-shortcut [:n])]
                           :id "card-next"
                           :class "mr-2"
                  :on-click #(skip-card card card-index cards phase review-records cb)))
@@ -477,7 +477,7 @@
                  [:div.flex.flex-row.justify-between
                   (ui/button (if (util/mobile?)
                                "Forgotten"
-                               [:span "Forgotten " (ui/keyboard-shortcut [:f])])
+                               [:span "Forgotten " (ui/render-keyboard-shortcut [:f])])
                     :id "card-forgotten"
                     :on-click (fn []
                                 (score-and-next-card 1 card card-index cards phase review-records cb)
@@ -486,13 +486,13 @@
 
                   (ui/button (if (util/mobile?)
                                  "Remembered"
-                                 [:span "Remembered " (ui/keyboard-shortcut [:r])])
+                                 [:span "Remembered " (ui/render-keyboard-shortcut [:r])])
                     :id "card-remembered"
                     :on-click #(score-and-next-card 5 card card-index cards phase review-records cb))
 
                   (ui/button (if (util/mobile?)
                                "Hard"
-                               [:span "Took a while to recall " (ui/keyboard-shortcut [:t])])
+                               [:span "Took a while to recall " (ui/render-keyboard-shortcut [:t])])
                     :id "card-recall"
                     :on-click #(score-and-next-card 3 card card-index cards phase review-records cb))]))]
 

+ 1 - 1
src/main/frontend/handler.cljs

@@ -233,7 +233,7 @@
                                             [:div
                                              [:h1.title "Reload Logseq?"]
                                              (ui/button
-                                              [:span "Yes " (ui/keyboard-shortcut ["enter"])]
+                                              [:span "Yes " (ui/render-keyboard-shortcut ["enter"])]
                                               :autoFocus "on"
                                               :large? true
                                               :on-click (fn []

+ 10 - 7
src/main/frontend/modules/shortcut/data_helper.cljs

@@ -91,14 +91,17 @@
        (into {})))
 
 (defn decorate-binding [binding]
-  (-> binding
+  (-> (if (string? binding) binding (str/join "+"  binding))
       (str/replace "mod" (if util/mac? "cmd" "ctrl"))
+      (str/replace "ctrl" (if util/mac? "cmd" "ctrl"))
+      (str/replace "cmd" (if util/mac? "cmd" "ctrl"))
       (str/replace "alt" (if util/mac? "opt" "alt"))
       (str/replace "shift+/" "?")
+      (str/replace "left" "←")
+      (str/replace "right" "→")
       (str/replace "open-square-bracket" "[")
       (str/replace "close-square-bracket" "]")
-      (str/lower-case)
-      (or binding "")))
+      (str/lower-case)))
 
 ;; if multiple bindings, gen seq for first binding only for now
 (defn gen-shortcut-seq [id]
@@ -162,15 +165,15 @@
        (map key)
        (first)))
 
-(defn potential-confilct? [k]
+(defn potential-conflict? [k]
   (if-not (shortcut-binding k)
     false
     (let [handler-id    (get-group k)
           shortcut-m    (shortcut-map handler-id)
           bindings      (->> (shortcut-binding k)
-                            (map mod-key)
-                            (map KeyboardShortcutHandler/parseStringShortcut)
-                            (map js->clj))
+                             (map mod-key)
+                             (map KeyboardShortcutHandler/parseStringShortcut)
+                             (map js->clj))
           rest-bindings (->> (map key shortcut-m)
                              (remove #{k})
                              (map shortcut-binding)

+ 19 - 5
src/main/frontend/ui.cljs

@@ -13,6 +13,8 @@
             [frontend.handler.plugin :as plugin-handler]
             [cljs-bean.core :as bean]
             [goog.dom :as gdom]
+            [frontend.modules.shortcut.config :as shortcut-config]
+            [frontend.modules.shortcut.data-helper :as shortcut-helper]
             [promesa.core :as p]
             [goog.object :as gobj]
             [lambdaisland.glogi :as log]
@@ -441,9 +443,15 @@
       {:class       (if on? (if small? "translate-x-4" "translate-x-5") "translate-x-0")
        :aria-hidden "true"}]]]))
 
-;; `sequence` can be a list of symbols or strings
-(defn keyboard-shortcut [sequence]
-  [:span.keyboard-shortcut
+;; `sequence` can be a list of symbols, a list of strings, or a string
+(defn render-keyboard-shortcut [sequence]
+  (let [sequence (if (string? sequence)
+                   (-> sequence ;; turn string into sequence
+                       (str/trim)
+                       (str/lower-case)
+                       (str/split  #" |\+"))
+                   sequence)]
+    [:span.keyboard-shortcut
    (map-indexed (fn [i key]
                   [:code {:key i}
                    ;; Display "cmd" rather than "meta" to the user to describe the Mac
@@ -451,7 +459,13 @@
                    (if (or (= :meta key) (= "meta" key))
                      (util/meta-key-name)
                      (name key))])
-                sequence)])
+                sequence)]))
+
+(defn keyboard-shortcut-from-config [shortcut-name]
+  (let [default-binding (:binding (get shortcut-config/all-default-keyboard-shortcuts shortcut-name))
+        custom-binding  (when (state/shortcuts) (get (state/shortcuts) shortcut-name))
+        binding         (or custom-binding default-binding)]
+    (render-keyboard-shortcut (shortcut-helper/decorate-binding binding))))
 
 (defonce modal-show? (atom false))
 (rum/defc modal-overlay
@@ -707,7 +721,7 @@
                              (when-let [html (:html opts)]
                                (if (fn? html)
                                  (html)
-                                 [:div.pr-3.py-1
+                                 [:div.px-2.py-2
                                   html]))
                              (catch js/Error e
                                (log/error :exception e)