Просмотр исходного кода

enhance(ui): polish logseq accent colors

charlie 1 год назад
Родитель
Сommit
d905dbfe4b
2 измененных файлов с 26 добавлено и 16 удалено
  1. 3 0
      resources/css/shui.css
  2. 23 16
      src/main/frontend/components/settings.cljs

+ 3 - 0
resources/css/shui.css

@@ -69,6 +69,9 @@ html {
   }
 
   &[data-color=none] {
+    --ls-block-bullet-color: var(--rx-gray-08);
+    --ls-block-bullet-active-color: var(--rx-gray-12);
+
     ::selection {
       @apply bg-primary/20;
     }

+ 23 - 16
src/main/frontend/components/settings.cljs

@@ -340,22 +340,29 @@
                           :let [active? (= color color-accent)
                                 none? (= color :none)]]
                       [:div.flex.items-center {:style {:height 28}}
-                       (shui-ui/button
-                         {:class      "w-5 h-5 px-1 rounded-full flex justify-center items-center transition ease-in duration-100 hover:cursor-pointer hover:opacity-100"
-                          :title      color
-                          :auto-focus (and _in-modal? active?)
-                          :style      {:background-color (colors/variable color :09)
-                                       :outline-color    (colors/variable color (if active? :07 :06))
-                                       :outline-width    (if active? "4px" "1px")
-                                       :outline-style    :solid
-                                       :opacity          (if active? 1 0.5)}
-                          :variant    :text
-                          :on-click   (fn [_e] (state/set-color-accent! color))}
-                         [:strong
-                          {:class (if none? "h-0.5 w-full bg-red-700"
-                                            "w-2 h-2 rounded-full transition ease-in duration-100")
-                           :style {:background-color (if-not none? (str "var(--rx-" (name color) "-07)") "")
-                                   :opacity          (if (or none? active?) 1 0)}}])])]]
+                       (ui/tippy
+                         {:html (case color
+                                  :none [:p {:style {:max-width "300px"}}
+                                         "Cancel accent color. This is currently in beta stage and mainly used for compatibility with custom themes."]
+                                  :logseq "Logseq classical color"
+                                  (str (name color) " color") )
+                          :delay [1000, 100]}
+                         (shui-ui/button
+                           {:class      "w-5 h-5 px-1 rounded-full flex justify-center items-center transition ease-in duration-100 hover:cursor-pointer hover:opacity-100"
+                            :auto-focus (and _in-modal? active?)
+                            :style      {:background-color (colors/variable color :09)
+                                         :outline-color    (colors/variable color (if active? :07 :06))
+                                         :outline-width    (if active? "4px" "1px")
+                                         :outline-style    :solid
+                                         :opacity          (if active? 1 0.5)}
+                            :variant    :text
+                            :on-click   (fn [_e] (state/set-color-accent! color))}
+                           [:strong
+                            {:class (if none? "h-0.5 w-full bg-red-700"
+                                              "w-2 h-2 rounded-full transition ease-in duration-100")
+                             :style {:background-color (if-not none? (str "var(--rx-" (name color) "-07)") "")
+                                     :opacity          (if (or none? active?) 1 0)}}]))
+                       ])]]
 
     [:<>
      (row-with-button-action {:left-label  "Accent color"