3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-15 20:16:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Refactor numeric-input naming

Browse source
This commit is contained in:
Andrey Antukh 2023-07-20 11:09:49 +02:00
parent 02c853cf57
commit 5f558d6fdc
15 changed files with 258 additions and 258 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/app/main/ui/components/editable_select.cljs
View file

@ -10,7 +10,7 @@
[app.common.math :as mth] [app.common.math :as mth]
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.keyboard :as kbd] [app.util.keyboard :as kbd]
@ -143,11 +143,11 @@
[:div.editable-select {:class class [:div.editable-select {:class class
:ref on-node-load} :ref on-node-load}
(if (= type "number") (if (= type "number")
[:> numeric-input {:value (or (some-> @state :current-value value->label) "") [:> numeric-input* {:value (or (some-> @state :current-value value->label) "")
:on-change set-value :on-change set-value
:on-focus handle-focus :on-focus handle-focus
:on-blur handle-blur :on-blur handle-blur
:placeholder placeholder}] :placeholder placeholder}]
[:input.input-text {:value (or (some-> @state :current-value value->label) "") [:input.input-text {:value (or (some-> @state :current-value value->label) "")
:on-change handle-change-input :on-change handle-change-input
:on-key-down handle-key-down :on-key-down handle-key-down

2
frontend/src/app/main/ui/components/numeric_input.cljs
View file

@ -20,7 +20,7 @@
[goog.events :as events] [goog.events :as events]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(mf/defc numeric-input (mf/defc numeric-input*
{::mf/wrap-props false {::mf/wrap-props false
::mf/forward-ref true} ::mf/forward-ref true}
[props external-ref] [props external-ref]

14
frontend/src/app/main/ui/workspace/nudge.cljs
View file

@ -10,7 +10,7 @@
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
@ -49,12 +49,12 @@
[:div.input-wrapper [:div.input-wrapper
[:span [:span
[:p.nudge-subtitle (tr "modals.small-nudge")] [:p.nudge-subtitle (tr "modals.small-nudge")]
[:> numeric-input {:min 0.01 [:> numeric-input* {:min 0.01
:value (:small nudge) :value (:small nudge)
:on-change update-small}]]] :on-change update-small}]]]
[:div.input-wrapper [:div.input-wrapper
[:span [:span
[:p.nudge-subtitle (tr "modals.big-nudge")] [:p.nudge-subtitle (tr "modals.big-nudge")]
[:> numeric-input {:min 0.01 [:> numeric-input* {:min 0.01
:value (:big nudge) :value (:big nudge)
:on-change update-big}]]]]]])) :on-change update-big}]]]]]]))

12
frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
View file

@ -11,7 +11,7 @@
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.editable-select :refer [editable-select]] [app.main.ui.components.editable-select :refer [editable-select]]
[app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.components.select :refer [select]] [app.main.ui.components.select :refer [select]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.common :refer [advanced-options]] [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
@ -138,10 +138,10 @@
(if (= type :square) (if (= type :square)
[:div.input-element.pixels {:title (tr "workspace.options.size")} [:div.input-element.pixels {:title (tr "workspace.options.size")}
[:> numeric-input {:min 0.01 [:> numeric-input* {:min 0.01
:value (or (:size params) "") :value (or (:size params) "")
:no-validate true :no-validate true
:on-change (handle-change :params :size)}]] :on-change (handle-change :params :size)}]]
[:& editable-select {:value (:size params) [:& editable-select {:value (:size params)
:type "number" :type "number"
@ -202,7 +202,7 @@
:label (if (= :row type) :label (if (= :row type)
(tr "workspace.options.grid.params.height") (tr "workspace.options.grid.params.height")
(tr "workspace.options.grid.params.width"))} (tr "workspace.options.grid.params.width"))}
[:> numeric-input [:> numeric-input*
{:placeholder "Auto" {:placeholder "Auto"
:value (or (:item-length params) "") :value (or (:item-length params) "")
:nillable true :nillable true

14
frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs
View file

@ -10,7 +10,7 @@
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.main.data.workspace.shape-layout :as dwsl] [app.main.data.workspace.shape-layout :as dwsl]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.menus.layout-container :as lyc] [app.main.ui.workspace.sidebar.options.menus.layout-container :as lyc]
[app.util.dom :as dom] [app.util.dom :as dom]
@ -125,7 +125,7 @@
[:div.grid-columns-auto [:div.grid-columns-auto
[:span.icon i/layout-rows] [:span.icon i/layout-rows]
[:div.input-wrapper [:div.input-wrapper
[:> numeric-input [:> numeric-input*
{:placeholder "--" {:placeholder "--"
:on-click #(dom/select-target %) :on-click #(dom/select-target %)
:on-change (partial on-change :all :column) :on-change (partial on-change :all :column)
@ -133,7 +133,7 @@
[:div.grid-rows-auto [:div.grid-rows-auto
[:span.icon i/layout-columns] [:span.icon i/layout-columns]
[:div.input-wrapper [:div.input-wrapper
[:> numeric-input [:> numeric-input*
{:placeholder "--" {:placeholder "--"
:on-click #(dom/select-target %) :on-click #(dom/select-target %)
:on-change (partial on-change :all :row) :on-change (partial on-change :all :row)
@ -156,12 +156,12 @@
[:div.grid-columns-auto [:div.grid-columns-auto
[:span.icon i/layout-rows] [:span.icon i/layout-rows]
[:div.input-wrapper [:div.input-wrapper
[:> numeric-input [:> numeric-input*
{:placeholder "--" {:placeholder "--"
:on-pointer-down #(dom/select-target %) :on-pointer-down #(dom/select-target %)
:on-change (partial on-change :start :column) :on-change (partial on-change :start :column)
:value column}] :value column}]
[:> numeric-input [:> numeric-input*
{:placeholder "--" {:placeholder "--"
:on-pointer-down #(dom/select-target %) :on-pointer-down #(dom/select-target %)
:on-change (partial on-change :end :column) :on-change (partial on-change :end :column)
@ -169,12 +169,12 @@
[:div.grid-rows-auto [:div.grid-rows-auto
[:span.icon i/layout-columns] [:span.icon i/layout-columns]
[:div.input-wrapper [:div.input-wrapper
[:> numeric-input [:> numeric-input*
{:placeholder "--" {:placeholder "--"
:on-pointer-down #(dom/select-target %) :on-pointer-down #(dom/select-target %)
:on-change (partial on-change :start :row) :on-change (partial on-change :start :row)
:value row}] :value row}]
[:> numeric-input [:> numeric-input*
{:placeholder "--" {:placeholder "--"
:on-pointer-down #(dom/select-target %) :on-pointer-down #(dom/select-target %)
:on-change (partial on-change :end :row) :on-change (partial on-change :end :row)

228
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
View file

@ -17,7 +17,7 @@
[app.main.data.workspace.interactions :as dwi] [app.main.data.workspace.interactions :as dwi]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
@ -29,7 +29,7 @@
(defn- event-type-names (defn- event-type-names
[] []
{:click (tr "workspace.options.interaction-on-click") {:click (tr "workspace.options.interaction-on-click")
; TODO: need more UX research ; TODO: need more UX research
;; :mouse-over (tr "workspace.options.interaction-while-hovering") ;; :mouse-over (tr "workspace.options.interaction-while-hovering")
;; :mouse-press (tr "workspace.options.interaction-while-pressing") ;; :mouse-press (tr "workspace.options.interaction-while-pressing")
:mouse-enter (tr "workspace.options.interaction-mouse-enter") :mouse-enter (tr "workspace.options.interaction-mouse-enter")
@ -57,7 +57,7 @@
:open-overlay (tr "workspace.options.interaction-open-overlay-dest" :open-overlay (tr "workspace.options.interaction-open-overlay-dest"
(get destination :name (tr "workspace.options.interaction-none"))) (get destination :name (tr "workspace.options.interaction-none")))
:toggle-overlay (tr "workspace.options.interaction-toggle-overlay-dest" :toggle-overlay (tr "workspace.options.interaction-toggle-overlay-dest"
(get destination :name (tr "workspace.options.interaction-none"))) (get destination :name (tr "workspace.options.interaction-none")))
:close-overlay (tr "workspace.options.interaction-close-overlay-dest" :close-overlay (tr "workspace.options.interaction-close-overlay-dest"
(get destination :name (tr "workspace.options.interaction-self"))) (get destination :name (tr "workspace.options.interaction-self")))
:prev-screen (tr "workspace.options.interaction-prev-screen") :prev-screen (tr "workspace.options.interaction-prev-screen")
@ -78,8 +78,8 @@
(defn- animation-type-names (defn- animation-type-names
[interaction] [interaction]
(cond-> (cond->
{:dissolve (tr "workspace.options.interaction-animation-dissolve") {:dissolve (tr "workspace.options.interaction-animation-dissolve")
:slide (tr "workspace.options.interaction-animation-slide")} :slide (tr "workspace.options.interaction-animation-slide")}
(ctsi/allow-push? (:action-type interaction)) (ctsi/allow-push? (:action-type interaction))
(assoc :push (tr "workspace.options.interaction-animation-push")))) (assoc :push (tr "workspace.options.interaction-animation-push"))))
@ -121,22 +121,22 @@
(when (kbd/esc? event) (cancel-edit)))] (when (kbd/esc? event) (cancel-edit)))]
(mf/use-effect (mf/use-effect
(fn [] (fn []
#(when editing? #(when editing?
(cancel-edit)))) (cancel-edit))))
(mf/use-effect (mf/use-effect
(mf/deps flow-for-rename) (mf/deps flow-for-rename)
#(when (and (= flow-for-rename (:id flow)) #(when (and (= flow-for-rename (:id flow))
(not @editing?)) (not @editing?))
(start-edit))) (start-edit)))
(mf/use-effect (mf/use-effect
(mf/deps @editing?) (mf/deps @editing?)
#(when @editing? #(when @editing?
(let [name-input (mf/ref-val name-ref)] (let [name-input (mf/ref-val name-ref)]
(dom/select-text! name-input)) (dom/select-text! name-input))
nil)) nil))
[:div.flow-element [:div.flow-element
[:div.flow-button {:on-click #(st/emit! (dw/select-shape (:starting-frame flow)))} [:div.flow-button {:on-click #(st/emit! (dw/select-shape (:starting-frame flow)))}
@ -301,9 +301,9 @@
[:* [:*
[:div.element-set-options-group {:class (dom/classnames [:div.element-set-options-group {:class (dom/classnames
:open @extended-open?)} :open @extended-open?)}
; Summary ; Summary
[:div.element-set-actions-button {:on-click #(swap! extended-open? not)} [:div.element-set-actions-button {:on-click #(swap! extended-open? not)}
i/actions] i/actions]
[:div.interactions-summary {:on-click #(swap! extended-open? not)} [:div.interactions-summary {:on-click #(swap! extended-open? not)}
@ -315,7 +315,7 @@
(when @extended-open? (when @extended-open?
[:div.element-set-content [:div.element-set-content
; Trigger select ; Trigger select
[:div.interactions-element.separator [:div.interactions-element.separator
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-trigger")] [:span.element-set-subtitle.wide (tr "workspace.options.interaction-trigger")]
[:select.input-select [:select.input-select
@ -327,18 +327,18 @@
[:option {:key (dm/str value) [:option {:key (dm/str value)
:value (dm/str value)} name]))]] :value (dm/str value)} name]))]]
; Delay ; Delay
(when (ctsi/has-delay interaction) (when (ctsi/has-delay interaction)
[:div.interactions-element [:div.interactions-element
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-delay")] [:span.element-set-subtitle.wide (tr "workspace.options.interaction-delay")]
[:div.input-element {:title (tr "workspace.options.interaction-ms")} [:div.input-element {:title (tr "workspace.options.interaction-ms")}
[:> numeric-input {:ref ext-delay-ref [:> numeric-input* {:ref ext-delay-ref
:on-change change-delay :on-change change-delay
:value (:delay interaction) :value (:delay interaction)
:title (tr "workspace.options.interaction-ms")}] :title (tr "workspace.options.interaction-ms")}]
[:span.after (tr "workspace.options.interaction-ms")]]]) [:span.after (tr "workspace.options.interaction-ms")]]])
; Action select ; Action select
[:div.interactions-element.separator [:div.interactions-element.separator
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-action")] [:span.element-set-subtitle.wide (tr "workspace.options.interaction-action")]
[:select.input-select [:select.input-select
@ -348,7 +348,7 @@
[:option {:key (dm/str "action-" value) [:option {:key (dm/str "action-" value)
:value (str value)} name])]] :value (str value)} name])]]
; Destination ; Destination
(when (ctsi/has-destination interaction) (when (ctsi/has-destination interaction)
[:div.interactions-element [:div.interactions-element
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-destination")] [:span.element-set-subtitle.wide (tr "workspace.options.interaction-destination")]
@ -364,7 +364,7 @@
[:option {:key (dm/str "destination-" (:id frame)) [:option {:key (dm/str "destination-" (:id frame))
:value (str (:id frame))} (:name frame)]))]]) :value (str (:id frame))} (:name frame)]))]])
; Preserve scroll ; Preserve scroll
(when (ctsi/has-preserve-scroll interaction) (when (ctsi/has-preserve-scroll interaction)
[:div.interactions-element [:div.interactions-element
[:div.input-checkbox [:div.input-checkbox
@ -375,7 +375,7 @@
[:label {:for (str "preserve-" index)} [:label {:for (str "preserve-" index)}
(tr "workspace.options.interaction-preserve-scroll")]]]) (tr "workspace.options.interaction-preserve-scroll")]]])
; URL ; URL
(when (ctsi/has-url interaction) (when (ctsi/has-url interaction)
[:div.interactions-element [:div.interactions-element
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-url")] [:span.element-set-subtitle.wide (tr "workspace.options.interaction-url")]
@ -386,7 +386,7 @@
(when (ctsi/has-overlay-opts interaction) (when (ctsi/has-overlay-opts interaction)
[:* [:*
; Overlay position relative-to (select) ; Overlay position relative-to (select)
[:div.interactions-element [:div.interactions-element
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-relative-to")] [:span.element-set-subtitle.wide (tr "workspace.options.interaction-relative-to")]
[:select.input-select [:select.input-select
@ -401,7 +401,7 @@
[:option {:key (dm/str "position-relative-to-" (:id shape)) [:option {:key (dm/str "position-relative-to-" (:id shape))
:value (str (:id shape))} (:name shape) " (" (tr "workspace.options.interaction-self") ")"]]] :value (str (:id shape))} (:name shape) " (" (tr "workspace.options.interaction-self") ")"]]]
; Overlay position (select) ; Overlay position (select)
[:div.interactions-element [:div.interactions-element
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-position")] [:span.element-set-subtitle.wide (tr "workspace.options.interaction-position")]
[:select.input-select [:select.input-select
@ -410,7 +410,7 @@
(for [[value name] (overlay-pos-type-names)] (for [[value name] (overlay-pos-type-names)]
[:option {:value (str value)} name])]] [:option {:value (str value)} name])]]
; Overlay position (buttons) ; Overlay position (buttons)
[:div.interactions-element.interactions-pos-buttons [:div.interactions-element.interactions-pos-buttons
[:div.element-set-actions-button [:div.element-set-actions-button
{:class (dom/classnames :active (= overlay-pos-type :center)) {:class (dom/classnames :active (= overlay-pos-type :center))
@ -441,7 +441,7 @@
:on-click #(toggle-overlay-pos-type :bottom-center)} :on-click #(toggle-overlay-pos-type :bottom-center)}
i/position-bottom-center]] i/position-bottom-center]]
; Overlay click outside ; Overlay click outside
[:div.interactions-element [:div.interactions-element
[:div.input-checkbox [:div.input-checkbox
[:input {:type "checkbox" [:input {:type "checkbox"
@ -451,7 +451,7 @@
[:label {:for (str "close-" index)} [:label {:for (str "close-" index)}
(tr "workspace.options.interaction-close-outside")]]] (tr "workspace.options.interaction-close-outside")]]]
; Overlay background ; Overlay background
[:div.interactions-element [:div.interactions-element
[:div.input-checkbox [:div.input-checkbox
[:input {:type "checkbox" [:input {:type "checkbox"
@ -463,94 +463,94 @@
(when (ctsi/has-animation? interaction) (when (ctsi/has-animation? interaction)
[:* [:*
; Animation select ; Animation select
[:div.interactions-element.separator [:div.interactions-element.separator
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-animation")] [:span.element-set-subtitle.wide (tr "workspace.options.interaction-animation")]
[:select.input-select [:select.input-select
{:value (str (-> interaction :animation :animation-type)) {:value (str (-> interaction :animation :animation-type))
:on-change change-animation-type} :on-change change-animation-type}
[:option {:value ""} (tr "workspace.options.interaction-animation-none")] [:option {:value ""} (tr "workspace.options.interaction-animation-none")]
(for [[value name] (animation-type-names interaction)] (for [[value name] (animation-type-names interaction)]
[:option {:value (str value)} name])]] [:option {:value (str value)} name])]]
; Direction ; Direction
(when (ctsi/has-way? interaction) (when (ctsi/has-way? interaction)
[:div.interactions-element.interactions-way-buttons [:div.interactions-element.interactions-way-buttons
[:div.input-radio [:div.input-radio
[:input {:type "radio" [:input {:type "radio"
:id "way-in" :id "way-in"
:checked (= :in way) :checked (= :in way)
:name "animation-way" :name "animation-way"
:value ":in" :value ":in"
:on-change change-way}] :on-change change-way}]
[:label {:for "way-in"} (tr "workspace.options.interaction-in")]] [:label {:for "way-in"} (tr "workspace.options.interaction-in")]]
[:div.input-radio [:div.input-radio
[:input {:type "radio" [:input {:type "radio"
:id "way-out" :id "way-out"
:checked (= :out way) :checked (= :out way)
:name "animation-way" :name "animation-way"
:value ":out" :value ":out"
:on-change change-way}] :on-change change-way}]
[:label {:for "way-out"} (tr "workspace.options.interaction-out")]]]) [:label {:for "way-out"} (tr "workspace.options.interaction-out")]]])
; Direction ; Direction
(when (ctsi/has-direction? interaction) (when (ctsi/has-direction? interaction)
[:div.interactions-element.interactions-direction-buttons [:div.interactions-element.interactions-direction-buttons
[:div.element-set-actions-button [:div.element-set-actions-button
{:class (dom/classnames :active (= direction :right)) {:class (dom/classnames :active (= direction :right))
:on-click #(change-direction :right)} :on-click #(change-direction :right)}
i/animate-right] i/animate-right]
[:div.element-set-actions-button [:div.element-set-actions-button
{:class (dom/classnames :active (= direction :down)) {:class (dom/classnames :active (= direction :down))
:on-click #(change-direction :down)} :on-click #(change-direction :down)}
i/animate-down] i/animate-down]
[:div.element-set-actions-button [:div.element-set-actions-button
{:class (dom/classnames :active (= direction :left)) {:class (dom/classnames :active (= direction :left))
:on-click #(change-direction :left)} :on-click #(change-direction :left)}
i/animate-left] i/animate-left]
[:div.element-set-actions-button [:div.element-set-actions-button
{:class (dom/classnames :active (= direction :up)) {:class (dom/classnames :active (= direction :up))
:on-click #(change-direction :up)} :on-click #(change-direction :up)}
i/animate-up]]) i/animate-up]])
; Duration ; Duration
(when (ctsi/has-duration? interaction) (when (ctsi/has-duration? interaction)
[:div.interactions-element [:div.interactions-element
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-duration")] [:span.element-set-subtitle.wide (tr "workspace.options.interaction-duration")]
[:div.input-element {:title (tr "workspace.options.interaction-ms")} [:div.input-element {:title (tr "workspace.options.interaction-ms")}
[:> numeric-input {:ref ext-duration-ref [:> numeric-input* {:ref ext-duration-ref
:on-change change-duration :on-change change-duration
:value (-> interaction :animation :duration) :value (-> interaction :animation :duration)
:title (tr "workspace.options.interaction-ms")}] :title (tr "workspace.options.interaction-ms")}]
[:span.after (tr "workspace.options.interaction-ms")]]]) [:span.after (tr "workspace.options.interaction-ms")]]])
; Easing ; Easing
(when (ctsi/has-easing? interaction) (when (ctsi/has-easing? interaction)
[:div.interactions-element [:div.interactions-element
[:span.element-set-subtitle.wide (tr "workspace.options.interaction-easing")] [:span.element-set-subtitle.wide (tr "workspace.options.interaction-easing")]
[:select.input-select [:select.input-select
{:value (str (-> interaction :animation :easing)) {:value (str (-> interaction :animation :easing))
:on-change change-easing} :on-change change-easing}
(for [[value name] (easing-names)] (for [[value name] (easing-names)]
[:option {:value (str value)} name])] [:option {:value (str value)} name])]
[:div.interactions-easing-icon [:div.interactions-easing-icon
(case (-> interaction :animation :easing) (case (-> interaction :animation :easing)
:linear i/easing-linear :linear i/easing-linear
:ease i/easing-ease :ease i/easing-ease
:ease-in i/easing-ease-in :ease-in i/easing-ease-in
:ease-out i/easing-ease-out :ease-out i/easing-ease-out
:ease-in-out i/easing-ease-in-out)]]) :ease-in-out i/easing-ease-in-out)]])
; Offset effect ; Offset effect
(when (ctsi/has-offset-effect? interaction) (when (ctsi/has-offset-effect? interaction)
[:div.interactions-element [:div.interactions-element
[:div.input-checkbox [:div.input-checkbox
[:input {:type "checkbox" [:input {:type "checkbox"
:id (str "offset-effect-" index) :id (str "offset-effect-" index)
:checked (-> interaction :animation :offset-effect) :checked (-> interaction :animation :offset-effect)
:on-change change-offset-effect}] :on-change change-offset-effect}]
[:label {:for (str "offset-effect-" index)} [:label {:for (str "offset-effect-" index)}
(tr "workspace.options.interaction-offset-effect")]]])])])]])) (tr "workspace.options.interaction-offset-effect")]]])])])]]))
(mf/defc interactions-menu (mf/defc interactions-menu
[{:keys [shape] :as props}] [{:keys [shape] :as props}]

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
View file

@ -11,7 +11,7 @@
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
[app.main.data.workspace.changes :as dch] [app.main.data.workspace.changes :as dch]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.components.select :refer [select]] [app.main.ui.components.select :refer [select]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
@ -162,7 +162,7 @@
[:div.input-element {:title (tr "workspace.options.opacity") [:div.input-element {:title (tr "workspace.options.opacity")
:class "percentail"} :class "percentail"}
[:> numeric-input [:> numeric-input*
{:value (opacity->string current-opacity) {:value (opacity->string current-opacity)
:placeholder (tr "settings.multiple") :placeholder (tr "settings.multiple")
:on-change handle-opacity-change :on-change handle-opacity-change

66
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View file

@ -15,7 +15,7 @@
[app.main.features :as features] [app.main.features :as features]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.components.select :refer [select]] [app.main.ui.components.select :refer [select]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom] [app.util.dom :as dom]
@ -278,7 +278,7 @@
[:div.padding-item.tooltip.tooltip-bottom-left [:div.padding-item.tooltip.tooltip-bottom-left
{:alt "Vertical padding"} {:alt "Vertical padding"}
[:span.icon.rotated i/auto-padding-both-sides] [:span.icon.rotated i/auto-padding-both-sides]
[:> numeric-input [:> numeric-input*
{:placeholder "--" {:placeholder "--"
:on-change (partial on-change :simple :p1) :on-change (partial on-change :simple :p1)
:on-focus #(do :on-focus #(do
@ -289,7 +289,7 @@
[:div.padding-item.tooltip.tooltip-bottom-left [:div.padding-item.tooltip.tooltip-bottom-left
{:alt "Horizontal padding"} {:alt "Horizontal padding"}
[:span.icon i/auto-padding-both-sides] [:span.icon i/auto-padding-both-sides]
[:> numeric-input [:> numeric-input*
{:placeholder "--" {:placeholder "--"
:on-change (partial on-change :simple :p2) :on-change (partial on-change :simple :p2)
:on-focus #(do (dom/select-target %) :on-focus #(do (dom/select-target %)
@ -308,7 +308,7 @@
:p3 "Bottom" :p3 "Bottom"
:p4 "Left")} :p4 "Left")}
[:div.input-element.auto [:div.input-element.auto
[:> numeric-input [:> numeric-input*
{:placeholder "--" {:placeholder "--"
:on-change (partial on-change :multiple num) :on-change (partial on-change :multiple num)
:on-focus #(do (dom/select-target %) :on-focus #(do (dom/select-target %)
@ -342,35 +342,35 @@
{:alt "Column gap"} {:alt "Column gap"}
[:span.icon [:span.icon
i/auto-gap] i/auto-gap]
[:> numeric-input {:no-validate true [:> numeric-input* {:no-validate true
:placeholder "--" :placeholder "--"
:on-focus (fn [event] :on-focus (fn [event]
(select-gap :column-gap) (select-gap :column-gap)
(reset! gap-selected? :column-gap) (reset! gap-selected? :column-gap)
(dom/select-target event)) (dom/select-target event))
:on-change (partial set-gap (= :nowrap wrap-type) :column-gap) :on-change (partial set-gap (= :nowrap wrap-type) :column-gap)
:on-blur (fn [_] :on-blur (fn [_]
(select-gap nil) (select-gap nil)
(reset! gap-selected? :none)) (reset! gap-selected? :none))
:value (:column-gap gap-value) :value (:column-gap gap-value)
:disabled (and (= :nowrap wrap-type) is-col?)}]] :disabled (and (= :nowrap wrap-type) is-col?)}]]
[:div.gap-row.tooltip.tooltip-bottom-left [:div.gap-row.tooltip.tooltip-bottom-left
{:alt "Row gap"} {:alt "Row gap"}
[:span.icon.rotated [:span.icon.rotated
i/auto-gap] i/auto-gap]
[:> numeric-input {:no-validate true [:> numeric-input* {:no-validate true
:placeholder "--" :placeholder "--"
:on-focus (fn [event] :on-focus (fn [event]
(select-gap :row-gap) (select-gap :row-gap)
(reset! gap-selected? :row-gap) (reset! gap-selected? :row-gap)
(dom/select-target event)) (dom/select-target event))
:on-change (partial set-gap (= :nowrap wrap-type) :row-gap) :on-change (partial set-gap (= :nowrap wrap-type) :row-gap)
:on-blur (fn [_] :on-blur (fn [_]
(select-gap nil) (select-gap nil)
(reset! gap-selected? :none)) (reset! gap-selected? :none))
:value (:row-gap gap-value) :value (:row-gap gap-value)
:disabled (and (= :nowrap wrap-type) (not is-col?))}]]]])) :disabled (and (= :nowrap wrap-type) (not is-col?))}]]]]))
(mf/defc grid-edit-mode (mf/defc grid-edit-mode
[{:keys [id] :as props}] [{:keys [id] :as props}]
@ -465,11 +465,11 @@
i/layout-columns)] i/layout-columns)]
[:div.grid-column-value [:div.grid-column-value
[:> numeric-input {:no-validate true [:> numeric-input* {:no-validate true
:value (:value column) :value (:value column)
:on-change #(set-column-value type index %) :on-change #(set-column-value type index %)
:placeholder "--" :placeholder "--"
:disabled (= :auto (:type column))}]] :disabled (= :auto (:type column))}]]
[:div.grid-column-unit [:div.grid-column-unit
[:& select [:& select
{:class "grid-column-unit-selector" {:class "grid-column-unit-selector"

12
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
View file

@ -13,7 +13,7 @@
[app.main.data.workspace.shape-layout :as dwsl] [app.main.data.workspace.shape-layout :as dwsl]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.menus.layout-container :refer [get-layout-flex-icon]] [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [get-layout-flex-icon]]
[app.util.dom :as dom] [app.util.dom :as dom]
@ -68,7 +68,7 @@
[:div.margin-item.tooltip.tooltip-bottom-left [:div.margin-item.tooltip.tooltip-bottom-left
{:alt "Vertical margin"} {:alt "Vertical margin"}
[:span.icon i/auto-margin-both-sides] [:span.icon i/auto-margin-both-sides]
[:> numeric-input [:> numeric-input*
{:placeholder "--" {:placeholder "--"
:on-focus (fn [event] :on-focus (fn [event]
(select-margins true false true false) (select-margins true false true false)
@ -80,7 +80,7 @@
[:div.margin-item.tooltip.tooltip-bottom-left [:div.margin-item.tooltip.tooltip-bottom-left
{:alt "Horizontal margin"} {:alt "Horizontal margin"}
[:span.icon.rotated i/auto-margin-both-sides] [:span.icon.rotated i/auto-margin-both-sides]
[:> numeric-input [:> numeric-input*
{:placeholder "--" {:placeholder "--"
:on-focus (fn [event] :on-focus (fn [event]
(select-margins false true false true) (select-margins false true false true)
@ -100,7 +100,7 @@
:m3 "Bottom" :m3 "Bottom"
:m4 "Left")} :m4 "Left")}
[:div.input-element.auto [:div.input-element.auto
[:> numeric-input [:> numeric-input*
{:placeholder "--" {:placeholder "--"
:on-focus (fn [event] :on-focus (fn [event]
(select-margin num) (select-margin num)
@ -269,7 +269,7 @@
[:div.tooltip.tooltip-bottom-left.z-index {:alt "z-index"} [:div.tooltip.tooltip-bottom-left.z-index {:alt "z-index"}
i/layers i/layers
[:> numeric-input [:> numeric-input*
{:placeholder "--" {:placeholder "--"
:on-focus #(dom/select-target %) :on-focus #(dom/select-target %)
:on-change #(on-change-z-index %) :on-change #(on-change-z-index %)
@ -317,7 +317,7 @@
"minW" (= item :layout-item-min-w))} "minW" (= item :layout-item-min-w))}
[:div.input-element [:div.input-element
{:alt (tr (dm/str "workspace.options.layout-item." (d/name item)))} {:alt (tr (dm/str "workspace.options.layout-item." (d/name item)))}
[:> numeric-input [:> numeric-input*
{:no-validate true {:no-validate true
:min 0 :min 0
:data-wrap true :data-wrap true

58
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
View file

@ -18,7 +18,7 @@
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.hooks :as hooks] [app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom] [app.util.dom :as dom]
@ -316,20 +316,20 @@
[:div.row-flex [:div.row-flex
[:span.element-set-subtitle (tr "workspace.options.size")] [:span.element-set-subtitle (tr "workspace.options.size")]
[:div.input-element.width {:title (tr "workspace.options.width")} [:div.input-element.width {:title (tr "workspace.options.width")}
[:> numeric-input {:min 0.01 [:> numeric-input* {:min 0.01
:no-validate true :no-validate true
:placeholder "--" :placeholder "--"
:on-change on-width-change :on-change on-width-change
:disabled disabled-width-sizing? :disabled disabled-width-sizing?
:value (:width values)}]] :value (:width values)}]]
[:div.input-element.height {:title (tr "workspace.options.height")} [:div.input-element.height {:title (tr "workspace.options.height")}
[:> numeric-input {:min 0.01 [:> numeric-input* {:min 0.01
:no-validate true :no-validate true
:placeholder "--" :placeholder "--"
:on-change on-height-change :on-change on-height-change
:disabled disabled-height-sizing? :disabled disabled-height-sizing?
:value (:height values)}]] :value (:height values)}]]
[:div.lock-size {:class (dom/classnames [:div.lock-size {:class (dom/classnames
:selected (true? proportion-lock) :selected (true? proportion-lock)
@ -344,24 +344,24 @@
[:div.row-flex [:div.row-flex
[:span.element-set-subtitle (tr "workspace.options.position")] [:span.element-set-subtitle (tr "workspace.options.position")]
[:div.input-element.Xaxis {:title (tr "workspace.options.x")} [:div.input-element.Xaxis {:title (tr "workspace.options.x")}
[:> numeric-input {:no-validate true [:> numeric-input* {:no-validate true
:placeholder "--" :placeholder "--"
:on-change on-pos-x-change :on-change on-pos-x-change
:disabled disabled-position-x? :disabled disabled-position-x?
:value (:x values)}]] :value (:x values)}]]
[:div.input-element.Yaxis {:title (tr "workspace.options.y")} [:div.input-element.Yaxis {:title (tr "workspace.options.y")}
[:> numeric-input {:no-validate true [:> numeric-input* {:no-validate true
:placeholder "--" :placeholder "--"
:disabled disabled-position-y? :disabled disabled-position-y?
:on-change on-pos-y-change :on-change on-pos-y-change
:value (:y values)}]]]) :value (:y values)}]]])
;; ROTATION ;; ROTATION
(when (options :rotation) (when (options :rotation)
[:div.row-flex [:div.row-flex
[:span.element-set-subtitle (tr "workspace.options.rotation")] [:span.element-set-subtitle (tr "workspace.options.rotation")]
[:div.input-element.degrees {:title (tr "workspace.options.rotation")} [:div.input-element.degrees {:title (tr "workspace.options.rotation")}
[:> numeric-input [:> numeric-input*
{:no-validate true {:no-validate true
:min 0 :min 0
:max 359 :max 359
@ -390,7 +390,7 @@
(cond (cond
(= radius-mode :radius-1) (= radius-mode :radius-1)
[:div.input-element.mini {:title (tr "workspace.options.radius")} [:div.input-element.mini {:title (tr "workspace.options.radius")}
[:> numeric-input [:> numeric-input*
{:placeholder "--" {:placeholder "--"
:ref radius-input-ref :ref radius-input-ref
:min 0 :min 0
@ -409,28 +409,28 @@
(= radius-mode :radius-4) (= radius-mode :radius-4)
[:* [:*
[:div.input-element.mini {:title (tr "workspace.options.radius-top-left")} [:div.input-element.mini {:title (tr "workspace.options.radius-top-left")}
[:> numeric-input [:> numeric-input*
{:placeholder "--" {:placeholder "--"
:min 0 :min 0
:on-change on-radius-r1-change :on-change on-radius-r1-change
:value (:r1 values)}]] :value (:r1 values)}]]
[:div.input-element.mini {:title (tr "workspace.options.radius-top-right")} [:div.input-element.mini {:title (tr "workspace.options.radius-top-right")}
[:> numeric-input [:> numeric-input*
{:placeholder "--" {:placeholder "--"
:min 0 :min 0
:on-change on-radius-r2-change :on-change on-radius-r2-change
:value (:r2 values)}]] :value (:r2 values)}]]
[:div.input-element.mini {:title (tr "workspace.options.radius-bottom-right")} [:div.input-element.mini {:title (tr "workspace.options.radius-bottom-right")}
[:> numeric-input [:> numeric-input*
{:placeholder "--" {:placeholder "--"
:min 0 :min 0
:on-change on-radius-r3-change :on-change on-radius-r3-change
:value (:r3 values)}]] :value (:r3 values)}]]
[:div.input-element.mini {:title (tr "workspace.options.radius-bottom-left")} [:div.input-element.mini {:title (tr "workspace.options.radius-bottom-left")}
[:> numeric-input [:> numeric-input*
{:placeholder "--" {:placeholder "--"
:min 0 :min 0
:on-change on-radius-r4-change :on-change on-radius-r4-change

58
frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
View file

@ -15,7 +15,7 @@
[app.main.data.workspace.colors :as dc] [app.main.data.workspace.colors :as dc]
[app.main.data.workspace.undo :as dwu] [app.main.data.workspace.undo :as dwu]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.hooks :as h] [app.main.ui.hooks :as h]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.common :refer [advanced-options]] [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
@ -127,11 +127,11 @@
on-toggle-open-shadow on-toggle-open-shadow
(fn [] (fn []
(swap! open-state-ref update shadow-id not))] (swap! open-state-ref update shadow-id not))]
[:* [:*
[:div.shadow-option {:class (dom/classnames [:div.shadow-option {:class (dom/classnames
:dnd-over-top (= (:over dprops) :top) :dnd-over-top (= (:over dprops) :top)
:dnd-over-bot (= (:over dprops) :bot)) :dnd-over-bot (= (:over dprops) :bot))
:ref dref} :ref dref}
[:div.shadow-option-main {:style {:display (when open-shadow "none")}} [:div.shadow-option-main {:style {:display (when open-shadow "none")}}
[:div.element-set-actions-button [:div.element-set-actions-button
@ -178,41 +178,41 @@
[:div.row-grid-2 [:div.row-grid-2
[:div.input-element {:title (tr "workspace.options.shadow-options.offsetx")} [:div.input-element {:title (tr "workspace.options.shadow-options.offsetx")}
[:> numeric-input {:ref adv-offset-x-ref [:> numeric-input* {:ref adv-offset-x-ref
:no-validate true :no-validate true
:placeholder "--" :placeholder "--"
:on-change (update-attr index :offset-x basic-offset-x-ref) :on-change (update-attr index :offset-x basic-offset-x-ref)
:on-blur on-blur :on-blur on-blur
:value (:offset-x value)}] :value (:offset-x value)}]
[:span.after (tr "workspace.options.shadow-options.offsetx")]] [:span.after (tr "workspace.options.shadow-options.offsetx")]]
[:div.input-element {:title (tr "workspace.options.shadow-options.offsety")} [:div.input-element {:title (tr "workspace.options.shadow-options.offsety")}
[:> numeric-input {:ref adv-offset-y-ref [:> numeric-input* {:ref adv-offset-y-ref
:no-validate true :no-validate true
:placeholder "--" :placeholder "--"
:on-change (update-attr index :offset-y basic-offset-y-ref) :on-change (update-attr index :offset-y basic-offset-y-ref)
:on-blur on-blur :on-blur on-blur
:value (:offset-y value)}] :value (:offset-y value)}]
[:span.after (tr "workspace.options.shadow-options.offsety")]]] [:span.after (tr "workspace.options.shadow-options.offsety")]]]
[:div.row-grid-2 [:div.row-grid-2
[:div.input-element {:title (tr "workspace.options.shadow-options.blur")} [:div.input-element {:title (tr "workspace.options.shadow-options.blur")}
[:> numeric-input {:ref adv-blur-ref [:> numeric-input* {:ref adv-blur-ref
:no-validate true :no-validate true
:placeholder "--" :placeholder "--"
:on-change (update-attr index :blur basic-blur-ref) :on-change (update-attr index :blur basic-blur-ref)
:on-blur on-blur :on-blur on-blur
:min 0 :min 0
:value (:blur value)}] :value (:blur value)}]
[:span.after (tr "workspace.options.shadow-options.blur")]] [:span.after (tr "workspace.options.shadow-options.blur")]]
[:div.input-element {:title (tr "workspace.options.shadow-options.spread")} [:div.input-element {:title (tr "workspace.options.shadow-options.spread")}
[:> numeric-input {:ref adv-spread-ref [:> numeric-input* {:ref adv-spread-ref
:no-validate true :no-validate true
:placeholder "--" :placeholder "--"
:on-change (update-attr index :spread) :on-change (update-attr index :spread)
:on-blur on-blur :on-blur on-blur
:value (:spread value)}] :value (:spread value)}]
[:span.after (tr "workspace.options.shadow-options.spread")]]] [:span.after (tr "workspace.options.shadow-options.spread")]]]
[:div.color-row-wrap [:div.color-row-wrap

10
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
View file

@ -19,7 +19,7 @@
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.editable-select :refer [editable-select]] [app.main.ui.components.editable-select :refer [editable-select]]
[app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.components.radio-buttons :refer [nilable-option radio-buttons]] [app.main.ui.components.radio-buttons :refer [nilable-option radio-buttons]]
[app.main.ui.components.search-bar :refer [search-bar]] [app.main.ui.components.search-bar :refer [search-bar]]
[app.main.ui.components.select :refer [select]] [app.main.ui.components.select :refer [select]]
@ -456,7 +456,7 @@
:alt (tr "workspace.options.text-options.line-height")} :alt (tr "workspace.options.text-options.line-height")}
i/text-lineheight-refactor] i/text-lineheight-refactor]
[:> numeric-input [:> numeric-input*
{:min -200 {:min -200
:max 200 :max 200
:step 0.1 :step 0.1
@ -473,7 +473,7 @@
{:class (css :icon) {:class (css :icon)
:alt (tr "workspace.options.text-options.letter-spacing")} :alt (tr "workspace.options.text-options.letter-spacing")}
i/text-letterspacing-refactor] i/text-letterspacing-refactor]
[:> numeric-input [:> numeric-input*
{:min -200 {:min -200
:max 200 :max 200
:step 0.1 :step 0.1
@ -488,7 +488,7 @@
[:span.icon-before.tooltip.tooltip-bottom [:span.icon-before.tooltip.tooltip-bottom
{:alt (tr "workspace.options.text-options.line-height")} {:alt (tr "workspace.options.text-options.line-height")}
i/line-height] i/line-height]
[:> numeric-input [:> numeric-input*
{:min -200 {:min -200
:max 200 :max 200
:step 0.1 :step 0.1
@ -503,7 +503,7 @@
[:span.icon-before.tooltip.tooltip-bottom [:span.icon-before.tooltip.tooltip-bottom
{:alt (tr "workspace.options.text-options.letter-spacing")} {:alt (tr "workspace.options.text-options.letter-spacing")}
i/letter-spacing] i/letter-spacing]
[:> numeric-input [:> numeric-input*
{:min -200 {:min -200
:max 200 :max 200
:step 0.1 :step 0.1

18
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
View file

@ -15,7 +15,7 @@
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.color-bullet :as cb] [app.main.ui.components.color-bullet :as cb]
[app.main.ui.components.color-input :refer [color-input]] [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.context :as ctx]
[app.main.ui.formats :as fmt] [app.main.ui.formats :as fmt]
[app.main.ui.hooks :as h] [app.main.ui.hooks :as h]
@ -205,14 +205,14 @@
(not (:gradient color))) (not (:gradient color)))
[:div.input-element [:div.input-element
{:class (dom/classnames :percentail (not= (:opacity color) :multiple))} {:class (dom/classnames :percentail (not= (:opacity color) :multiple))}
[:> numeric-input {:value (-> color :opacity opacity->string) [:> numeric-input* {:value (-> color :opacity opacity->string)
:placeholder (tr "settings.multiple") :placeholder (tr "settings.multiple")
:select-on-focus select-on-focus :select-on-focus select-on-focus
:on-focus on-focus :on-focus on-focus
:on-blur on-blur :on-blur on-blur
:on-change handle-opacity-change :on-change handle-opacity-change
:min 0 :min 0
:max 100}]]) :max 100}]])
(when select-only (when select-only
[:div.element-set-actions-button {:on-click handle-select} [:div.element-set-actions-button {:on-click handle-select}
i/pointer-inner])]) i/pointer-inner])])

4
frontend/src/app/main/ui/workspace/sidebar/options/rows/input_row.cljs
View file

@ -7,7 +7,7 @@
(ns app.main.ui.workspace.sidebar.options.rows.input-row (ns app.main.ui.workspace.sidebar.options.rows.input-row
(:require (:require
[app.main.ui.components.editable-select :refer [editable-select]] [app.main.ui.components.editable-select :refer [editable-select]]
[app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.components.select :refer [select]] [app.main.ui.components.select :refer [select]]
[app.util.object :as obj] [app.util.object :as obj]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -40,7 +40,7 @@
:class "input-text" :class "input-text"
:on-change on-change} ] :on-change on-change} ]
[:> numeric-input [:> numeric-input*
{:placeholder placeholder {:placeholder placeholder
:min min :min min
:max max :max max

4
frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
View file

@ -9,7 +9,7 @@
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.hooks :as h] [app.main.ui.hooks :as h]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
@ -97,7 +97,7 @@
{:class (dom/classnames :pixels (not= (:stroke-width stroke) :multiple)) {:class (dom/classnames :pixels (not= (:stroke-width stroke) :multiple))
:title (tr "workspace.options.stroke-width")} :title (tr "workspace.options.stroke-width")}
[:> numeric-input [:> numeric-input*
{:min 0 {:min 0
:value (-> (:stroke-width stroke) width->string) :value (-> (:stroke-width stroke) width->string)
:placeholder (tr "settings.multiple") :placeholder (tr "settings.multiple")