diff --git a/src/main/frontend/components/icon.cljs b/src/main/frontend/components/icon.cljs index 95862ab98..2a7bcc61c 100644 --- a/src/main/frontend/components/icon.cljs +++ b/src/main/frontend/components/icon.cljs @@ -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 diff --git a/src/main/frontend/components/icon.css b/src/main/frontend/components/icon.css index d07723879..524369115 100644 --- a/src/main/frontend/components/icon.css +++ b/src/main/frontend/components/icon.css @@ -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;