mirror of https://github.com/logseq/logseq
enhance(ui): polish custom colors for the icons picker
parent
21f959e5c0
commit
4764dfaa80
|
@ -239,6 +239,7 @@
|
|||
(rum/defc color-picker
|
||||
[*color]
|
||||
(let [[color, set-color!] (rum/use-state @*color)
|
||||
_ (prn "==>>" color)
|
||||
*el (rum/use-ref nil)
|
||||
content-fn (fn []
|
||||
(let [colors ["#6e7b8b" "#5e69d2" "#00b5ed" "#00b55b"
|
||||
|
@ -252,9 +253,9 @@
|
|||
(if c "" (shui/tabler-icon "minus" {:class "scale-75 opacity-70"}))))]))]
|
||||
(rum/use-effect!
|
||||
(fn []
|
||||
(when-let [^js section (some-> (rum/deref *el) (.closest ".cp__emoji-icon-picker") (.querySelector ".pane-section"))]
|
||||
(when-let [^js picker (some-> (rum/deref *el) (.closest ".cp__emoji-icon-picker"))]
|
||||
(let [color (if (string/blank? color) "inherit" color)]
|
||||
(set! (. (.-style section) -color) color)
|
||||
(.setProperty (.-style picker) "--ls-color-icon-preset" color)
|
||||
(storage/set :ls-icon-color-preset color)))
|
||||
(reset! *color color))
|
||||
[color])
|
||||
|
@ -272,8 +273,9 @@
|
|||
(rum/local nil ::result)
|
||||
(rum/local false ::select-mode?)
|
||||
(rum/local :all ::tab)
|
||||
(rum/local (storage/get :ls-icon-color-preset) ::color)
|
||||
(rum/local nil ::hover)
|
||||
{:init (fn [s]
|
||||
(assoc s ::color (atom (storage/get :ls-icon-color-preset))))}
|
||||
[state {:keys [on-chosen] :as opts}]
|
||||
(let [*q (::q state)
|
||||
*result (::result state)
|
||||
|
@ -370,7 +372,7 @@
|
|||
:class (util/classnames [{:active active?} "tab-item"])
|
||||
:on-click #(reset! *tab id)}
|
||||
label)))]
|
||||
(when (= :icon @*tab)
|
||||
(when (not= :emoji @*tab)
|
||||
(color-picker *color))]
|
||||
|
||||
;; preview
|
||||
|
|
|
@ -1,4 +1,6 @@
|
|||
.cp__emoji-icon-picker {
|
||||
--ls-color-icon-preset: "inherit";
|
||||
|
||||
@apply w-[380px] max-h-[396px] relative flex flex-col overflow-hidden;
|
||||
@apply pt-14 pb-[40px];
|
||||
|
||||
|
@ -54,6 +56,8 @@
|
|||
.pane-section {
|
||||
@apply pl-2 overflow-y-scroll h-full;
|
||||
|
||||
color: var(--ls-color-icon-preset);
|
||||
|
||||
> .its, .icons-row {
|
||||
@apply flex gap-1 py-1 flex-wrap;
|
||||
|
||||
|
|
Loading…
Reference in New Issue