Feat/cmdk radix tweaks (#10493)

* prefer --lx-gray-11 * Fix sidebar item color * Update theme mode images * Update shortcuts globally * Assets updated to support radix * fix: add missing keyboard-shortcut class * fix: custom button background * fix: lower case shortcuts * chore: remove old shortcut list * fix: shortcut ns * enhance: shortcut accepts both sequence and string * fix: shortcut remap ux * fix: remove codemirror box shadow --------- Co-authored-by: Ben Yorke <ben@yorke.io>
logseq · Nov 12, 2023 · 9669343 · 9669343
1 parent acf7881
commit 9669343
Show file tree

Hide file tree

Showing 26 changed files with 688 additions and 754 deletions.
diff --git a/deps/shui/src/logseq/shui/button/v2.cljs b/deps/shui/src/logseq/shui/button/v2.cljs
@@ -38,7 +38,7 @@
                [:<>
                 (when (< 0 index)
                   [:div.shui__button__tile-separator])
-                [:div.shui__button__tile {:class ""} tile]]))
+                [:div.shui__button__tile tile]]))
 
      (when icon
        (icon/root icon icon-props))

diff --git a/deps/shui/src/logseq/shui/core.cljs b/deps/shui/src/logseq/shui/core.cljs
@@ -14,7 +14,7 @@
 
 ;; shortcut
 (def shortcut shui.shortcut.v1/root)
-(def shortcut-v2 shui.shortcut.v1/root)
+(def shortcut-v1 shui.shortcut.v1/root)
 
 ;; button component
 (def button shui.button.v2/root)

diff --git a/deps/shui/src/logseq/shui/shortcut/v1.cljs b/deps/shui/src/logseq/shui/shortcut/v1.cljs
@@ -1,11 +1,13 @@
 (ns logseq.shui.shortcut.v1
   (:require [clojure.string :as string]
             [logseq.shui.button.v2 :as button]
-            [rum.core :as rum]))
+            [rum.core :as rum]
+            [goog.userAgent]))
 
+(def mac? goog.userAgent/MAC)
 (defn print-shortcut-key [key]
   (case key
-    ("cmd" "command" "mod" "⌘") "⌘"
+    ("cmd" "command" "mod" "⌘" "meta") (if mac? "⌘" "⊞ win")
     ("return" "enter" "⏎") "⏎"
     ("shift" "⇧") "⇧"
     ("alt" "option" "opt" "⌥") "⌥"
@@ -15,9 +17,20 @@
     ("down" "↓") "↓"
     ("left" "←") "←"
     ("right" "→") "→"
-    ("disabled" "Disabled") ""
-    ("backspace" "delete") ""
-    ("tab") ""
+    ("tab") "⇥"
+    ("open-square-bracket") "["
+    ("close-square-bracket") "]"
+    ("dash") "-"
+    ("semicolon") ";"
+    ("equals") "="
+    ("single-quote") "'"
+    ("backslash") "\\"
+    ("comma") ","
+    ("period") "."
+    ("slash") "/"
+    ("grave-accent") "`"
+    ("page-up") ""
+    ("page-down") ""
     (nil) ""
     (name key)))
 
@@ -36,19 +49,52 @@
   [shortcut context & {:keys [tiled size]
                        :or {tiled true
                             size :sm}}]
-  [:<>
-   (for [[index option] (map-indexed vector (string/split shortcut #" \| "))]
-     [:<>
-      (when (< 0 index)
-        [:div.text-gray-11.text-sm "|"])
-      (for [sequence (string/split option #" ")
-            :let [text (->> (string/split sequence #"\+")
-                            (map print-shortcut-key)
-                            (apply str))]]
-        (button/root {:theme :gray
-                      :interactive false
-                      :text (string/upper-case (to-string text))
-                      :tiled tiled
-                      :size size
-                      :mused true}
-                     context))])])
+  (when (seq shortcut)
+    (if (coll? shortcut)
+      (let [texts (map print-shortcut-key shortcut)
+            tiled? (every? #(= (count %) 1) texts)]
+        (if tiled?
+          [:div.flex.flex-row
+           (for [text texts]
+             (button/root {:theme :gray
+                           :interactive false
+                           :text (to-string text)
+                           :tiled tiled?
+                           :size size
+                           :mused true}
+                          context))]
+          (let [text' (string/join " " texts)]
+            (button/root {:theme :gray
+                          :interactive false
+                          :text text'
+                          :tiled false
+                          :size size
+                          :mused true}
+                         context))))
+      [:<>
+       (for [[index option] (map-indexed vector (string/split shortcut #" \| "))]
+         [:<>
+          (when (< 0 index)
+            [:div.text-gray-11.text-sm "|"])
+          (let [[system-default option] (if (.startsWith option "system default: ")
+                                          [true (subs option 16)]
+                                          [false option])]
+            [:<>
+             (when system-default
+               [:div.mr-1.text-xs "System default: "])
+             (for [sequence (string/split option #" ")
+                   :let [text (->> (string/split sequence #"\+")
+                                   (map print-shortcut-key)
+                                   (apply str))]]
+               (let [tiled? (if (contains?
+                                 #{"backspace" "delete" "home" "end" "insert"}
+                                 (string/lower-case text))
+                              false
+                              tiled)]
+                 (button/root {:theme :gray
+                               :interactive false
+                               :text (to-string text)
+                               :tiled tiled?
+                               :size size
+                               :mused true}
+                              context)))])])])))
diff --git a/resources/css/codemirror.lsradix.css b/resources/css/codemirror.lsradix.css
@@ -17,7 +17,7 @@ http://ethanschoonover.com/lsradix/img/lsradix-palette.png
 .lsradix.base0         { color: or(--lx-gray-09, #839496); }
 .lsradix.base1         { color: or(--lx-gray-10, #93a1a1); }
 .lsradix.base2         { color: or(--lx-gray-11, #eee8d5); }
-.lsradix.base3         { color: or(--lx-gray-12, #fdf6e3); }
+.lsradix.base3         { color: or(--lx-gray-11, #fdf6e3); }
 .lsradix.solar-yellow  { color: or(--rx-yellow-11, #b58900); }
 .lsradix.solar-orange  { color: or(--rx-orange-11, #cb4b16); }
 .lsradix.solar-red     { color: or(--rx-red-11, #dc322f); }

diff --git a/resources/css/shui.css b/resources/css/shui.css
@@ -245,9 +245,8 @@
 .shui__button-theme-color.shui__button-color-custom  { background-color: hsl(var(--ls-button-background-hsl) / 0.9);
                                                        color: white; }
 
-.shui__button-color-custom:hover, .dark .shui__button-color-custom:hover {
+.shui__button-theme-color.shui__button-color-custom:hover {
     background: var(--ls-button-background);
-    color: white;
 }
 
 .shui__button-theme-color.shui__button-color-lime    { color: white; background-color: var(--rx-lime-09); &:hover { background-color: var(--rx-lime-10); } &:active { background-color: var(--rx-lime-08); }}

diff --git a/resources/img/dark-theme.png b/resources/img/dark-theme.png
diff --git a/resources/img/file-sync-unavailale-nonbacker-dark.png b/resources/img/file-sync-unavailale-nonbacker-dark.png
diff --git a/resources/img/file-sync-unavailale-nonbacker-light.png b/resources/img/file-sync-unavailale-nonbacker-light.png
diff --git a/resources/img/file-sync-welcome-backer-dark.png b/resources/img/file-sync-welcome-backer-dark.png
diff --git a/resources/img/file-sync-welcome-backer-light.png b/resources/img/file-sync-welcome-backer-light.png
diff --git a/resources/img/light-theme.png b/resources/img/light-theme.png
diff --git a/resources/img/system-theme.png b/resources/img/system-theme.png
diff --git a/resources/img/whiteboard-welcome-dark.png b/resources/img/whiteboard-welcome-dark.png
diff --git a/resources/img/whiteboard-welcome-light.png b/resources/img/whiteboard-welcome-light.png
diff --git a/src/main/frontend/common.css b/src/main/frontend/common.css
@@ -529,7 +529,7 @@ i.ti {
 /* region FIXME: override elements (?) */
 h1.title {
   margin-bottom: 1.5rem;
-  color: or(--ls-journal-title-color, --lx-gray-12, --ls-title-text-color, #222);
+  color: or(--ls-journal-title-color, --lx-gray-11, --ls-title-text-color, #222);
   font-size: var(--ls-page-title-size, 36px);
   font-weight: 500;
 }

diff --git a/src/main/frontend/components/container.css b/src/main/frontend/components/container.css
@@ -16,7 +16,7 @@
 
 #root {
   > div {
-    color: or(--ls-document-text-color, --lx-gray-12, --ls-primary-text-color, #24292e);
+    color: or(--ls-document-text-color, --lx-gray-11, --ls-primary-text-color, #24292e);
     font-size: var(--ls-page-text-size);
   }
 }
@@ -170,7 +170,7 @@
     }
 
     &.active, &:active {
-      background-color: or(--ls-left-sidebar-active-background, --lx-gray-05, --ls-quaternary-background-color);
+      background-color: or(--ls-left-sidebar-active-background, --lx-gray-04, --ls-quaternary-background-color);
       color: or(--ls-left-sidebar-active-text-color, --lx-gray-12);
       .ui__icon {
         opacity: .9;

diff --git a/src/main/frontend/components/right_sidebar.cljs b/src/main/frontend/components/right_sidebar.cljs
@@ -4,7 +4,7 @@
             [frontend.components.block :as block]
             [frontend.components.onboarding :as onboarding]
             [frontend.components.page :as page]
-            [frontend.components.shortcut :as shortcut]
+            [frontend.components.shortcut-help :as shortcut-help]
             [frontend.components.cmdk :as cmdk]
             [frontend.context.i18n :refer [t]]
             [frontend.date :as date]
@@ -56,7 +56,7 @@
 (rum/defc shortcut-settings
   []
   [:div.contents.flex-col.flex.ml-3
-   (shortcut/shortcut-page {:show-title? false})])
+   (shortcut-help/shortcut-page {:show-title? false})])
 
 (defn- block-with-breadcrumb
   [repo block idx sidebar-key ref?]

diff --git a/src/main/frontend/components/settings.cljs b/src/main/frontend/components/settings.cljs
@@ -26,7 +26,7 @@
             [frontend.mobile.util :as mobile-util]
             [frontend.modules.instrumentation.core :as instrument]
             [frontend.modules.shortcut.data-helper :as shortcut-helper]
-            [frontend.components.shortcut2 :as shortcut2]
+            [frontend.components.shortcut :as shortcut]
             [frontend.spec.storage :as storage-spec]
             [frontend.state :as state]
             [frontend.storage :as storage]
@@ -302,13 +302,14 @@
                              :action     action})))
 
 (defn theme-modes-row [t switch-theme system-theme? dark?]
-  (let [pick-theme [:ul.theme-modes-options
+  (let [color-accent (state/sub :ui/radix-color)
+        pick-theme [:ul.theme-modes-options
                     [:li {:on-click (partial state/use-theme-mode! "light")
-                          :class    (classnames [{:active (and (not system-theme?) (not dark?))}])} [:i.mode-light] [:strong (t :settings-page/theme-light)]]
+                          :class    (classnames [{:active (and (not system-theme?) (not dark?))}])} [:i.mode-light {:class (when color-accent "radix")}] [:strong (t :settings-page/theme-light)]]
                     [:li {:on-click (partial state/use-theme-mode! "dark")
-                          :class    (classnames [{:active (and (not system-theme?) dark?)}])} [:i.mode-dark] [:strong (t :settings-page/theme-dark)]]
+                          :class    (classnames [{:active (and (not system-theme?) dark?)}])} [:i.mode-dark {:class (when color-accent "radix")}] [:strong (t :settings-page/theme-dark)]]
                     [:li {:on-click (partial state/use-theme-mode! "system")
-                          :class    (classnames [{:active system-theme?}])} [:i.mode-system] [:strong (t :settings-page/theme-system)]]]]
+                          :class    (classnames [{:active system-theme?}])} [:i.mode-system {:class (when color-accent "radix")}] [:strong (t :settings-page/theme-system)]]]]
     (row-with-button-action {:left-label (t :right-side-bar/switch-theme (string/capitalize switch-theme))
                              :-for       "toggle_theme"
                              :action     pick-theme
@@ -1177,7 +1178,7 @@
          (settings-editor current-repo)
 
          :keymap
-         (shortcut2/shortcut-keymap-x)
+         (shortcut/shortcut-keymap-x)
 
          :version-control
          (settings-git)

diff --git a/src/main/frontend/components/settings.css b/src/main/frontend/components/settings.css
@@ -222,6 +222,18 @@
           &.mode-system {
             background-position-x: -194px;
           }
+
+          &.mode-dark.radix {
+            background: url('../img/dark-theme.png') no-repeat center / cover;
+          }
+
+          &.mode-light.radix {
+            background: url('../img/light-theme.png') no-repeat center / cover;
+          }
+
+          &.mode-system.radix {
+            background: url('../img/system-theme.png') no-repeat center / cover;
+          }
         }
 
         > strong {