diff --git a/frontend/src/app/main/ui/components/select.cljs b/frontend/src/app/main/ui/components/select.cljs index 344ea38e0..8e1396530 100644 --- a/frontend/src/app/main/ui/components/select.cljs +++ b/frontend/src/app/main/ui/components/select.cljs @@ -12,9 +12,9 @@ [app.main.ui.icons :as i] [rumext.v2 :as mf])) -(mf/defc select [{:keys [default-value options class on-change]}] +(mf/defc select [{:keys [default-value options class is-open? on-change on-pointer-enter-option on-pointer-leave-option]}] (let [state (mf/use-state {:id (uuid/next) - :is-open? false + :is-open? (or is-open? false) :current-value default-value}) open-dropdown #(swap! state assoc :is-open? true) close-dropdown #(swap! state assoc :is-open? false) @@ -22,14 +22,20 @@ (fn [_] (swap! state assoc :current-value value) (when on-change (on-change value)))) + highlight-item (fn [value] + (when on-pointer-enter-option (on-pointer-enter-option value))) + unhighlight-item (fn [value] + (when on-pointer-leave-option (on-pointer-leave-option value))) as-key-value (fn [item] (if (map? item) [(:value item) (:label item)] [item item])) value->label (into {} (->> options (map as-key-value))) ] (mf/use-effect (mf/deps options) - #(reset! state {:is-open? false - :current-value default-value})) + #(if is-open? + (reset! state (assoc @state :current-value default-value)) + (reset! state {:is-open? false + :current-value default-value}))) [:div.custom-select {:on-click open-dropdown :class class} @@ -45,6 +51,8 @@ [:li.checked-element {:key (dm/str (:id @state) "-" index) :class (when (= value (-> @state :current-value)) "is-selected") + :on-pointer-enter #(highlight-item value) + :on-pointer-leave #(unhighlight-item value) :on-click (select-item value)} [:span.check-icon i/tick] [:span label]])))]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs index 5623ed669..c02501c5a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs @@ -10,6 +10,7 @@ [app.main.data.workspace.changes :as dch] [app.main.store :as st] [app.main.ui.components.numeric-input :refer [numeric-input]] + [app.main.ui.components.select :refer [select]] [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -28,7 +29,11 @@ (dom/select-text! (dom/get-target event))) (mf/defc layer-menu [{:keys [ids type values]}] - (let [change! + (let [selected-blend-mode (mf/use-state (or (d/name (:blend-mode values)) "normal")) + is-option-highlighted? (mf/use-state false) + is-preview-complete? (mf/use-state true) + + change! (mf/use-callback (mf/deps ids) (fn [prop value] @@ -37,10 +42,30 @@ handle-change-blend-mode (mf/use-callback (mf/deps change!) - (fn [event] - (let [value (-> (dom/get-target-val event) (keyword))] + (fn [value] + (when (not= "multiple" value) + (reset! selected-blend-mode value) + (reset! is-option-highlighted? false) + (reset! is-preview-complete? true) (change! :blend-mode value)))) + handle-option-enter + (mf/use-callback + (mf/deps change!) + (fn [value] + (when (not= :multiple (:blend-mode values)) + (reset! is-preview-complete? false) + (reset! is-option-highlighted? true) + (change! :blend-mode value)))) + + handle-option-leave + (mf/use-callback + (mf/deps change!) + (fn [value] + (when (not= :multiple (:blend-mode values)) + (reset! is-preview-complete? true) + (change! :blend-mode @selected-blend-mode)))) + handle-opacity-change (mf/use-callback (mf/deps change!) @@ -71,6 +96,11 @@ (mf/deps change!) (fn [_] (change! :blocked false)))] + + (mf/use-effect + (mf/deps (:blend-mode values)) + #(when (or (not @is-option-highlighted?) (and @is-option-highlighted? @is-preview-complete?)) + (reset! selected-blend-mode (or (d/name (:blend-mode values)) "normal")))) [:div.element-set [:div.element-set-title @@ -82,33 +112,31 @@ [:div.element-set-content [:div.row-flex - [:select.input-select {:on-change handle-change-blend-mode - :value (d/name (:blend-mode values) "normal")} - - (when (= :multiple (:blend-mode values)) - [:option {:value "multiple"} "--"]) - - [:option {:value "normal"} (tr "workspace.options.layer-options.blend-mode.normal")] - - [:option {:value "darken"} (tr "workspace.options.layer-options.blend-mode.darken")] - [:option {:value "multiply"} (tr "workspace.options.layer-options.blend-mode.multiply")] - [:option {:value "color-burn"} (tr "workspace.options.layer-options.blend-mode.color-burn")] - - [:option {:value "lighten"} (tr "workspace.options.layer-options.blend-mode.lighten")] - [:option {:value "screen"} (tr "workspace.options.layer-options.blend-mode.screen")] - [:option {:value "color-dodge"} (tr "workspace.options.layer-options.blend-mode.color-dodge")] - - [:option {:value "overlay"} (tr "workspace.options.layer-options.blend-mode.overlay")] - [:option {:value "soft-light"} (tr "workspace.options.layer-options.blend-mode.soft-light")] - [:option {:value "hard-light"} (tr "workspace.options.layer-options.blend-mode.hard-light")] - - [:option {:value "difference"} (tr "workspace.options.layer-options.blend-mode.difference")] - [:option {:value "exclusion"} (tr "workspace.options.layer-options.blend-mode.exclusion")] - - [:option {:value "hue"} (tr "workspace.options.layer-options.blend-mode.hue")] - [:option {:value "saturation"} (tr "workspace.options.layer-options.blend-mode.saturation")] - [:option {:value "color"} (tr "workspace.options.layer-options.blend-mode.color")] - [:option {:value "luminosity"} (tr "workspace.options.layer-options.blend-mode.luminosity")]] + [:& select + {:class "flex-grow" + :default-value @selected-blend-mode + :options (concat (when (= :multiple (:blend-mode values)) + [{:value "multiple" :label "--"}]) + [{:value "normal" :label (tr "workspace.options.layer-options.blend-mode.normal")} + {:value "darken" :label (tr "workspace.options.layer-options.blend-mode.darken")} + {:value "multiply" :label (tr "workspace.options.layer-options.blend-mode.multiply")} + {:value "color-burn" :label (tr "workspace.options.layer-options.blend-mode.color-burn")} + {:value "lighten" :label (tr "workspace.options.layer-options.blend-mode.lighten")} + {:value "screen" :label (tr "workspace.options.layer-options.blend-mode.screen")} + {:value "color-dodge" :label (tr "workspace.options.layer-options.blend-mode.color-dodge")} + {:value "overlay" :label (tr "workspace.options.layer-options.blend-mode.overlay")} + {:value "soft-light" :label (tr "workspace.options.layer-options.blend-mode.soft-light")} + {:value "hard-light" :label (tr "workspace.options.layer-options.blend-mode.hard-light")} + {:value "difference" :label (tr "workspace.options.layer-options.blend-mode.difference")} + {:value "exclusion" :label (tr "workspace.options.layer-options.blend-mode.exclusion")} + {:value "hue" :label (tr "workspace.options.layer-options.blend-mode.hue")} + {:value "saturation" :label (tr "workspace.options.layer-options.blend-mode.saturation")} + {:value "color" :label (tr "workspace.options.layer-options.blend-mode.color")} + {:value "luminosity" :label (tr "workspace.options.layer-options.blend-mode.luminosity")}]) + :on-change handle-change-blend-mode + :is-open? @is-option-highlighted? + :on-pointer-enter-option handle-option-enter + :on-pointer-leave-option handle-option-leave}] [:div.input-element {:title (tr "workspace.options.opacity") :class "percentail"} [:> numeric-input {:value (-> values :opacity opacity->string)