diff --git a/CHANGES.md b/CHANGES.md index 05883f9470..1ebaa563f7 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -14,10 +14,11 @@ ### :bug: Bugs fixed -- Remove unnecesary redirect from history when user goes to workspace from dashboard [Taiga 1820](https://tree.taiga.io/project/penpot/issue/1820). -- Fix tooltip position on view application [Taiga 1819](https://tree.taiga.io/project/penpot/issue/1819). -- Fix dashboard navigation on moving file to other team [Taiga 1817](https://tree.taiga.io/project/penpot/issue/1817). -- Fix workspace header presence styles and invalid link [Taiga 1813](https://tree.taiga.io/project/penpot/issue/1813). +- Remove unnecesary redirect from history when user goes to workspace from dashboard [Taiga #1820](https://tree.taiga.io/project/penpot/issue/1820). +- Fix tooltip position on view application [Taiga #1819](https://tree.taiga.io/project/penpot/issue/1819). +- Fix dashboard navigation on moving file to other team [Taiga #1817](https://tree.taiga.io/project/penpot/issue/1817). +- Fix workspace header presence styles and invalid link [Taiga #1813](https://tree.taiga.io/project/penpot/issue/1813). +- Fix color-input wrong behavior (on workspace page color) [Taiga #1795](https://tree.taiga.io/project/penpot/issue/1795). ### :arrow_up: Deps updates ### :boom: Breaking changes diff --git a/frontend/src/app/main/ui/components/color_input.cljs b/frontend/src/app/main/ui/components/color_input.cljs index e6019d5b36..8b851e5465 100644 --- a/frontend/src/app/main/ui/components/color_input.cljs +++ b/frontend/src/app/main/ui/components/color_input.cljs @@ -22,46 +22,46 @@ {::mf/wrap-props false ::mf/forward-ref true} [props external-ref] - (let [value (obj/get props "value") + (let [value (obj/get props "value") on-change (obj/get props "onChange") ;; We need a ref pointing to the input dom element, but the user ;; of this component may provide one (that is forwarded here). ;; So we use the external ref if provided, and the local one if not. local-ref (mf/use-ref) - ref (or external-ref local-ref) + ref (or external-ref local-ref) parse-value (mf/use-callback - (mf/deps ref) - (fn [] - (let [input-node (mf/ref-val ref)] - (try - (let [new-value (-> (dom/get-value input-node) - (uc/expand-hex) - (uc/parse-color) - (uc/prepend-hash))] - (dom/set-validity! input-node "") - new-value) - (catch :default _ - (dom/set-validity! input-node (tr "errors.invalid-color")) - nil))))) + (mf/deps ref) + (fn [] + (let [input-node (mf/ref-val ref)] + (try + (let [new-value (-> (dom/get-value input-node) + (uc/expand-hex) + (uc/parse-color) + (uc/prepend-hash))] + (dom/set-validity! input-node "") + new-value) + (catch :default _e + (dom/set-validity! input-node (tr "errors.invalid-color")) + nil))))) update-input (mf/use-callback - (mf/deps ref) - (fn [new-value] - (let [input-node (mf/ref-val ref)] - (dom/set-value! input-node (uc/remove-hash new-value))))) + (mf/deps ref) + (fn [new-value] + (let [input-node (mf/ref-val ref)] + (dom/set-value! input-node (uc/remove-hash new-value))))) apply-value (mf/use-callback - (mf/deps on-change update-input) - (fn [new-value] - (when new-value - (when on-change - (on-change new-value)) - (update-input new-value)))) + (mf/deps on-change update-input) + (fn [new-value] + (when new-value + (when on-change + (on-change new-value)) + (update-input new-value)))) handle-key-down (mf/use-callback @@ -79,12 +79,12 @@ handle-blur (mf/use-callback - (mf/deps parse-value apply-value update-input) - (fn [event] - (let [new-value (parse-value)] - (if new-value - (apply-value new-value) - (update-input value))))) + (mf/deps parse-value apply-value update-input) + (fn [event] + (let [new-value (parse-value)] + (if new-value + (apply-value new-value) + (update-input value))))) ;; list-id (str "colors-" (uuid/next)) @@ -97,6 +97,12 @@ (obj/set! "onKeyDown" handle-key-down) (obj/set! "onBlur" handle-blur))] + (mf/use-effect + (mf/deps value) + (fn [] + (when-let [node (mf/ref-val ref)] + (dom/set-value! node value)))) + [:* [:> :input props] ;; FIXME: this causes some weird interactions because of using apply-value diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.cljs b/frontend/src/app/main/ui/workspace/sidebar/options.cljs index ec9424f50b..8f072fcd9e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options.cljs @@ -66,7 +66,7 @@ [:div.element-options [:& align-options] (case (count selected) - 0 [:& page/options {:page-id page-id}] + 0 [:& page/options] 1 [:& shape-options {:shape (first shapes) :page-id page-id :file-id file-id diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs index ef96fe0db7..a5859e682f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs @@ -7,46 +7,39 @@ (ns app.main.ui.workspace.sidebar.options.page "Page options menu entries." (:require - [rumext.alpha :as mf] - [okulary.core :as l] + [app.main.data.workspace :as dw] + [app.main.data.workspace.undo :as dwu] [app.main.refs :as refs] [app.main.store :as st] - [app.main.data.workspace :as dw] - [app.main.data.workspace.common :as dwc] - [app.main.data.workspace.undo :as dwu] - [app.util.i18n :as i18n :refer [t]] - [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]])) - -(defn use-change-color [page-id] - (mf/use-callback - (mf/deps page-id) - (fn [value] - (st/emit! (dw/change-canvas-color value))))) + [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] + [app.util.i18n :as i18n :refer [tr]] + [rumext.alpha :as mf])) (mf/defc options - [{:keys [page-id] :as props}] - (let [locale (i18n/use-locale) - options (mf/deref refs/workspace-page-options) - handle-change-color (use-change-color page-id) + {::mf/wrap [mf/memo]} + [] + (let [options (mf/deref refs/workspace-page-options) + + on-change + (fn [value] + (st/emit! (dw/change-canvas-color value))) on-open - (mf/use-callback - (mf/deps page-id) - #(st/emit! (dwu/start-undo-transaction))) + (fn [] + (st/emit! (dwu/start-undo-transaction))) on-close - (mf/use-callback - (mf/deps page-id) - #(st/emit! (dwu/commit-undo-transaction)))] + (fn [] + (st/emit! (dwu/commit-undo-transaction)))] [:div.element-set - [:div.element-set-title (t locale "workspace.options.canvas-background")] + [:div.element-set-title (tr "workspace.options.canvas-background")] [:div.element-set-content [:& color-row {:disable-gradient true :disable-opacity true :color {:color (get options :background "#E8E9EA") :opacity 1} - :on-change handle-change-color + :on-change on-change :on-open on-open :on-close on-close}]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs index be8a067efd..f7f050e22c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs @@ -6,23 +6,22 @@ (ns app.main.ui.workspace.sidebar.options.rows.color-row (:require - [rumext.alpha :as mf] - [cuerdas.core :as str] + [app.common.data :as d] [app.common.math :as math] [app.common.pages :as cp] - [app.common.data :as d] - [app.util.dom :as dom] - [app.util.data :refer [classnames]] - [app.util.i18n :as i18n :refer [tr]] - [app.util.color :as uc] - [app.main.refs :as refs] [app.main.data.modal :as modal] - [app.main.ui.hooks :as h] - [app.main.ui.icons :as i] - [app.main.ui.context :as ctx] + [app.main.refs :as refs] [app.main.ui.components.color-bullet :as cb] [app.main.ui.components.color-input :refer [color-input]] - [app.main.ui.components.numeric-input :refer [numeric-input]])) + [app.main.ui.components.numeric-input :refer [numeric-input]] + [app.main.ui.context :as ctx] + [app.main.ui.hooks :as h] + [app.main.ui.icons :as i] + [app.util.color :as uc] + [app.util.data :refer [classnames]] + [app.util.dom :as dom] + [app.util.i18n :as i18n :refer [tr]] + [rumext.alpha :as mf])) (defn color-picker-callback [color disable-gradient disable-opacity handle-change-color handle-open handle-close] diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index b5acc982a0..13de17231b 100644 --- a/frontend/src/app/util/dom.cljs +++ b/frontend/src/app/util/dom.cljs @@ -128,7 +128,7 @@ (defn set-value! [node value] - (set! (.-value node) value)) + (set! (.-value ^js node) value)) (defn select-text! [node]