mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 01:01:30 -05:00
Merge pull request #3436 from penpot/niwinz-enhancements
✨ Several enhacements
This commit is contained in:
commit
35f931c05a
43 changed files with 648 additions and 505 deletions
|
@ -6,7 +6,6 @@
|
||||||
rumext.v2/defc clojure.core/defn
|
rumext.v2/defc clojure.core/defn
|
||||||
rumext.v2/fnc clojure.core/fn
|
rumext.v2/fnc clojure.core/fn
|
||||||
app.common.data/export clojure.core/def
|
app.common.data/export clojure.core/def
|
||||||
app.db/with-atomic clojure.core/with-open
|
|
||||||
app.common.data.macros/get-in clojure.core/get-in
|
app.common.data.macros/get-in clojure.core/get-in
|
||||||
app.common.data.macros/with-open clojure.core/with-open
|
app.common.data.macros/with-open clojure.core/with-open
|
||||||
app.common.data.macros/select-keys clojure.core/select-keys
|
app.common.data.macros/select-keys clojure.core/select-keys
|
||||||
|
@ -18,6 +17,7 @@
|
||||||
potok.core/reify hooks.export/potok-reify
|
potok.core/reify hooks.export/potok-reify
|
||||||
app.util.services/defmethod hooks.export/service-defmethod
|
app.util.services/defmethod hooks.export/service-defmethod
|
||||||
app.common.record/defrecord hooks.export/penpot-defrecord
|
app.common.record/defrecord hooks.export/penpot-defrecord
|
||||||
|
app.db/with-atomic hooks.export/penpot-with-atomic
|
||||||
}}
|
}}
|
||||||
|
|
||||||
:output
|
:output
|
||||||
|
|
|
@ -39,6 +39,20 @@
|
||||||
other))]
|
other))]
|
||||||
{:node result})))
|
{:node result})))
|
||||||
|
|
||||||
|
(defn penpot-with-atomic
|
||||||
|
[{:keys [node]}]
|
||||||
|
(let [[_ params & other] (:children node)
|
||||||
|
|
||||||
|
result (if (api/vector-node? params)
|
||||||
|
(api/list-node
|
||||||
|
(into [(api/token-node (symbol "clojure.core" "with-open")) params] other))
|
||||||
|
(api/list-node
|
||||||
|
(into [(api/token-node (symbol "clojure.core" "with-open"))
|
||||||
|
(api/vector-node [params params])]
|
||||||
|
other)))
|
||||||
|
|
||||||
|
]
|
||||||
|
{:node result}))
|
||||||
|
|
||||||
(defn penpot-defrecord
|
(defn penpot-defrecord
|
||||||
[{:keys [:node]}]
|
[{:keys [:node]}]
|
||||||
|
|
|
@ -218,7 +218,13 @@
|
||||||
|
|
||||||
(defmacro with-atomic
|
(defmacro with-atomic
|
||||||
[& args]
|
[& args]
|
||||||
`(jdbc/with-transaction ~@args))
|
(if (symbol? (first args))
|
||||||
|
(let [cfgs (first args)
|
||||||
|
body (rest args)]
|
||||||
|
`(jdbc/with-transaction [conn# (::pool ~cfgs)]
|
||||||
|
(let [~cfgs (assoc ~cfgs ::conn conn#)]
|
||||||
|
~@body)))
|
||||||
|
`(jdbc/with-transaction ~@args)))
|
||||||
|
|
||||||
(defn open
|
(defn open
|
||||||
[pool]
|
[pool]
|
||||||
|
|
|
@ -222,9 +222,7 @@
|
||||||
:body (http/transit-data {:events events})}]
|
:body (http/transit-data {:events events})}]
|
||||||
(->> (http/send! params)
|
(->> (http/send! params)
|
||||||
(rx/mapcat rp/handle-response)
|
(rx/mapcat rp/handle-response)
|
||||||
(rx/catch (fn [_]
|
(rx/catch (fn [_] (rx/of nil)))))
|
||||||
(l/error :hint "unexpected error on persisting audit events")
|
|
||||||
(rx/of nil)))))
|
|
||||||
|
|
||||||
(rx/of nil)))
|
(rx/of nil)))
|
||||||
|
|
||||||
|
|
|
@ -177,41 +177,46 @@
|
||||||
[:div.buttons-stack
|
[:div.buttons-stack
|
||||||
(when (or (contains? cf/flags :login)
|
(when (or (contains? cf/flags :login)
|
||||||
(contains? cf/flags :login-with-password))
|
(contains? cf/flags :login-with-password))
|
||||||
[:& fm/submit-button
|
[:> fm/submit-button*
|
||||||
{:label (tr "auth.login-submit")
|
{:label (tr "auth.login-submit")
|
||||||
:data-test "login-submit"}])
|
:data-test "login-submit"}])
|
||||||
|
|
||||||
(when (contains? cf/flags :login-with-ldap)
|
(when (contains? cf/flags :login-with-ldap)
|
||||||
[:& fm/submit-button
|
[:> fm/submit-button*
|
||||||
{:label (tr "auth.login-with-ldap-submit")
|
{:label (tr "auth.login-with-ldap-submit")
|
||||||
:on-click on-submit-ldap}])]]]))
|
:on-click on-submit-ldap}])]]]))
|
||||||
|
|
||||||
(mf/defc login-buttons
|
(mf/defc login-buttons
|
||||||
[{:keys [params] :as props}]
|
[{:keys [params] :as props}]
|
||||||
[:div.auth-buttons
|
(let [login-with-google (mf/use-fn (mf/deps params) #(login-with-oidc % :google params))
|
||||||
(when (contains? cf/flags :login-with-google)
|
login-with-github (mf/use-fn (mf/deps params) #(login-with-oidc % :github params))
|
||||||
[:& bl/button-link {:action #(login-with-oidc % :google params)
|
login-with-gitlab (mf/use-fn (mf/deps params) #(login-with-oidc % :gitlab params))
|
||||||
:icon i/brand-google
|
login-with-oidc (mf/use-fn (mf/deps params) #(login-with-oidc % :oidc params))]
|
||||||
:name (tr "auth.login-with-google-submit")
|
|
||||||
:klass "btn-google-auth"}])
|
|
||||||
|
|
||||||
(when (contains? cf/flags :login-with-github)
|
[:div.auth-buttons
|
||||||
[:& bl/button-link {:action #(login-with-oidc % :github params)
|
(when (contains? cf/flags :login-with-google)
|
||||||
:icon i/brand-github
|
[:& bl/button-link {:on-click login-with-google
|
||||||
:name (tr "auth.login-with-github-submit")
|
:icon i/brand-google
|
||||||
:klass "btn-github-auth"}])
|
:label (tr "auth.login-with-google-submit")
|
||||||
|
:class "btn-google-auth"}])
|
||||||
|
|
||||||
(when (contains? cf/flags :login-with-gitlab)
|
(when (contains? cf/flags :login-with-github)
|
||||||
[:& bl/button-link {:action #(login-with-oidc % :gitlab params)
|
[:& bl/button-link {:on-click login-with-github
|
||||||
:icon i/brand-gitlab
|
:icon i/brand-github
|
||||||
:name (tr "auth.login-with-gitlab-submit")
|
:label (tr "auth.login-with-github-submit")
|
||||||
:klass "btn-gitlab-auth"}])
|
:class "btn-github-auth"}])
|
||||||
|
|
||||||
(when (contains? cf/flags :login-with-oidc)
|
(when (contains? cf/flags :login-with-gitlab)
|
||||||
[:& bl/button-link {:action #(login-with-oidc % :oidc params)
|
[:& bl/button-link {:on-click login-with-gitlab
|
||||||
:icon i/brand-openid
|
:icon i/brand-gitlab
|
||||||
:name (tr "auth.login-with-oidc-submit")
|
:label (tr "auth.login-with-gitlab-submit")
|
||||||
:klass "btn-github-auth"}])])
|
:class "btn-gitlab-auth"}])
|
||||||
|
|
||||||
|
(when (contains? cf/flags :login-with-oidc)
|
||||||
|
[:& bl/button-link {:on-click login-with-oidc
|
||||||
|
:icon i/brand-openid
|
||||||
|
:label (tr "auth.login-with-oidc-submit")
|
||||||
|
:class "btn-github-auth"}])]))
|
||||||
|
|
||||||
(mf/defc login-button-oidc
|
(mf/defc login-button-oidc
|
||||||
[{:keys [params] :as props}]
|
[{:keys [params] :as props}]
|
||||||
|
|
|
@ -72,7 +72,7 @@
|
||||||
:name :password-2
|
:name :password-2
|
||||||
:label (tr "auth.confirm-password")}]]
|
:label (tr "auth.confirm-password")}]]
|
||||||
|
|
||||||
[:& fm/submit-button
|
[:> fm/submit-button*
|
||||||
{:label (tr "auth.recovery-submit")}]]))
|
{:label (tr "auth.recovery-submit")}]]))
|
||||||
|
|
||||||
;; --- Recovery Request Page
|
;; --- Recovery Request Page
|
||||||
|
|
|
@ -32,7 +32,7 @@
|
||||||
|
|
||||||
(mf/defc recovery-form
|
(mf/defc recovery-form
|
||||||
[{:keys [on-success-callback] :as props}]
|
[{:keys [on-success-callback] :as props}]
|
||||||
(let [form (fm/use-form :spec ::recovery-request-form
|
(let [form (fm/use-form :spec ::recovery-request-form
|
||||||
:validators [handle-error-messages]
|
:validators [handle-error-messages]
|
||||||
:initial {})
|
:initial {})
|
||||||
submitted (mf/use-state false)
|
submitted (mf/use-state false)
|
||||||
|
@ -82,7 +82,7 @@
|
||||||
:help-icon i/at
|
:help-icon i/at
|
||||||
:type "text"}]]
|
:type "text"}]]
|
||||||
|
|
||||||
[:& fm/submit-button
|
[:> fm/submit-button*
|
||||||
{:label (tr "auth.recovery-request-submit")
|
{:label (tr "auth.recovery-request-submit")
|
||||||
:data-test "recovery-resquest-submit"}]]))
|
:data-test "recovery-resquest-submit"}]]))
|
||||||
|
|
||||||
|
|
|
@ -124,7 +124,7 @@
|
||||||
:label (tr "auth.password")
|
:label (tr "auth.password")
|
||||||
:type "password"}]]
|
:type "password"}]]
|
||||||
|
|
||||||
[:& fm/submit-button
|
[:> fm/submit-button*
|
||||||
{:label (tr "auth.register-submit")
|
{:label (tr "auth.register-submit")
|
||||||
:disabled @submitted?
|
:disabled @submitted?
|
||||||
:data-test "register-form-submit"}]]))
|
:data-test "register-form-submit"}]]))
|
||||||
|
@ -259,7 +259,7 @@
|
||||||
[:span ",\u00A0"]
|
[:span ",\u00A0"]
|
||||||
[:a {:href "https://penpot.app/privacy" :target "_blank"} (tr "auth.privacy-policy")]]])
|
[:a {:href "https://penpot.app/privacy" :target "_blank"} (tr "auth.privacy-policy")]]])
|
||||||
|
|
||||||
[:& fm/submit-button
|
[:> fm/submit-button*
|
||||||
{:label (tr "auth.register-submit")
|
{:label (tr "auth.register-submit")
|
||||||
:disabled @submitted?}]]))
|
:disabled @submitted?}]]))
|
||||||
|
|
||||||
|
|
|
@ -11,16 +11,17 @@
|
||||||
|
|
||||||
(mf/defc button-link
|
(mf/defc button-link
|
||||||
{::mf/wrap-props false}
|
{::mf/wrap-props false}
|
||||||
[{:keys [action icon name klass]}]
|
[{:keys [on-click icon label class]}]
|
||||||
(let [on-key-down (mf/use-fn
|
(let [on-key-down (mf/use-fn
|
||||||
(mf/deps action)
|
(mf/deps on-click)
|
||||||
(fn [event]
|
(fn [event]
|
||||||
(when (kbd/enter? event)
|
(when (kbd/enter? event)
|
||||||
(action event))))]
|
(when (fn? on-click)
|
||||||
|
(on-click event)))))]
|
||||||
[:a.btn-primary.btn-large.button-link
|
[:a.btn-primary.btn-large.button-link
|
||||||
{:class klass
|
{:class class
|
||||||
:tab-index "0"
|
:tab-index "0"
|
||||||
:on-click action
|
:on-click on-click
|
||||||
:on-key-down on-key-down}
|
:on-key-down on-key-down}
|
||||||
[:span.logo icon]
|
[:span.logo icon]
|
||||||
name]))
|
label]))
|
||||||
|
|
|
@ -9,12 +9,13 @@
|
||||||
["highlight.js" :as hljs]
|
["highlight.js" :as hljs]
|
||||||
[rumext.v2 :as mf]))
|
[rumext.v2 :as mf]))
|
||||||
|
|
||||||
(mf/defc code-block [{:keys [code type]}]
|
(mf/defc code-block
|
||||||
|
{::mf/wrap-props false}
|
||||||
|
[{:keys [code type]}]
|
||||||
(let [block-ref (mf/use-ref)]
|
(let [block-ref (mf/use-ref)]
|
||||||
(mf/use-effect
|
(mf/with-effect [code type]
|
||||||
(mf/deps code type block-ref)
|
(when-let [node (mf/ref-val block-ref)]
|
||||||
(fn []
|
(hljs/highlightElement node)))
|
||||||
(hljs/highlightElement (mf/ref-val block-ref))))
|
|
||||||
[:pre.code-display {:class type
|
[:pre.code-display {:class type :ref block-ref} code]))
|
||||||
:ref block-ref} code]))
|
|
||||||
|
|
||||||
|
|
|
@ -40,10 +40,10 @@
|
||||||
(mf/defc color-name
|
(mf/defc color-name
|
||||||
{::mf/wrap-props false}
|
{::mf/wrap-props false}
|
||||||
[{:keys [color size on-click on-double-click]}]
|
[{:keys [color size on-click on-double-click]}]
|
||||||
(let [color (if (string? color) {:color color :opacity 1} color)
|
(let [{:keys [name color gradient]} (if (string? color) {:color color :opacity 1} color)]
|
||||||
{:keys [name color gradient]} color
|
|
||||||
color-str (or name color (uc/gradient-type->string (:type gradient)))]
|
|
||||||
(when (or (not size) (= size :big))
|
(when (or (not size) (= size :big))
|
||||||
[:span.color-text {:on-click #(when on-click (on-click %))
|
[:span.color-text
|
||||||
:on-double-click #(when on-double-click (on-double-click %))
|
{:on-click on-click
|
||||||
:title name} color-str])))
|
:on-double-click on-double-click
|
||||||
|
:title name}
|
||||||
|
(or name color (uc/gradient-type->string (:type gradient)))])))
|
||||||
|
|
|
@ -23,7 +23,7 @@
|
||||||
(uc/parse-color)
|
(uc/parse-color)
|
||||||
(uc/prepend-hash)))
|
(uc/prepend-hash)))
|
||||||
|
|
||||||
(mf/defc color-input
|
(mf/defc color-input*
|
||||||
{::mf/wrap-props false
|
{::mf/wrap-props false
|
||||||
::mf/forward-ref true}
|
::mf/forward-ref true}
|
||||||
[props external-ref]
|
[props external-ref]
|
||||||
|
|
|
@ -14,51 +14,89 @@
|
||||||
[rumext.v2 :as mf]))
|
[rumext.v2 :as mf]))
|
||||||
|
|
||||||
(mf/defc editable-label
|
(mf/defc editable-label
|
||||||
[{:keys [value on-change on-cancel editing? disable-dbl-click? class-name] :as props}]
|
{::mf/wrap-props false}
|
||||||
(let [display-value (get props :display-value value)
|
[props]
|
||||||
tooltip (get props :tooltip)
|
(let [display-value (unchecked-get props "display-value")
|
||||||
input (mf/use-ref nil)
|
value (unchecked-get props "value")
|
||||||
state (mf/use-state (:editing false))
|
on-change (unchecked-get props "on-change")
|
||||||
new-css-system (mf/use-ctx ctx/new-css-system)
|
on-cancel (unchecked-get props "on-cancel")
|
||||||
is-editing (:editing @state)
|
editing? (unchecked-get props "editing")
|
||||||
start-editing (fn []
|
dbl-click? (unchecked-get props "disable-dbl-click")
|
||||||
(swap! state assoc :editing true)
|
class (unchecked-get props "class")
|
||||||
(timers/schedule 100 #(dom/focus! (mf/ref-val input))))
|
tooltip (unchecked-get props "tooltip")
|
||||||
stop-editing (fn [] (swap! state assoc :editing false))
|
|
||||||
accept-editing (fn []
|
|
||||||
(when (:editing @state)
|
|
||||||
(let [value (-> (mf/ref-val input) dom/get-value)]
|
|
||||||
(on-change value)
|
|
||||||
(stop-editing))))
|
|
||||||
cancel-editing (fn []
|
|
||||||
(stop-editing)
|
|
||||||
(when on-cancel (on-cancel)))
|
|
||||||
on-dbl-click (fn [_] (when (not disable-dbl-click?) (start-editing)))
|
|
||||||
on-key-up (fn [e]
|
|
||||||
(cond
|
|
||||||
(kbd/esc? e)
|
|
||||||
(cancel-editing)
|
|
||||||
|
|
||||||
(kbd/enter? e)
|
new-css-system (mf/use-ctx ctx/new-css-system)
|
||||||
(accept-editing)))]
|
input-ref (mf/use-ref nil)
|
||||||
|
internal-editing* (mf/use-state false)
|
||||||
|
internal-editing? (deref internal-editing*)
|
||||||
|
|
||||||
(mf/use-effect
|
start-edition
|
||||||
(mf/deps editing?)
|
(mf/use-fn
|
||||||
(fn []
|
(fn []
|
||||||
(when (and editing? (not (:editing @state)))
|
(reset! internal-editing* true)
|
||||||
(start-editing))))
|
(timers/schedule 100 (fn []
|
||||||
|
(when-let [node (mf/ref-val input-ref)]
|
||||||
|
(dom/focus! node))))))
|
||||||
|
|
||||||
(if is-editing
|
stop-edition
|
||||||
[:div.editable-label {:class class-name}
|
(mf/use-fn #(reset! internal-editing* false))
|
||||||
[:input.editable-label-input {:ref input
|
|
||||||
:default-value value
|
accept-edition
|
||||||
:on-key-up on-key-up
|
(mf/use-fn
|
||||||
:on-blur cancel-editing}]
|
(mf/deps internal-editing? on-change stop-edition)
|
||||||
|
(fn []
|
||||||
[:span.editable-label-close {:on-click cancel-editing}
|
(when internal-editing?
|
||||||
(if new-css-system
|
(let [value (dom/get-value (mf/ref-val input-ref))]
|
||||||
|
(when (fn? on-change)
|
||||||
|
(on-change value))
|
||||||
|
|
||||||
|
(stop-edition)))))
|
||||||
|
|
||||||
|
cancel-edition
|
||||||
|
(mf/use-fn
|
||||||
|
(mf/deps stop-edition on-cancel)
|
||||||
|
(fn []
|
||||||
|
(stop-edition)
|
||||||
|
(when (fn? on-cancel)
|
||||||
|
(on-cancel))))
|
||||||
|
|
||||||
|
|
||||||
|
on-dbl-click
|
||||||
|
(mf/use-fn
|
||||||
|
(mf/deps dbl-click? start-edition)
|
||||||
|
(fn [_]
|
||||||
|
(when-not dbl-click?
|
||||||
|
(start-edition))))
|
||||||
|
|
||||||
|
on-key-up
|
||||||
|
(mf/use-fn
|
||||||
|
(mf/deps cancel-edition accept-edition)
|
||||||
|
(fn [event]
|
||||||
|
(cond
|
||||||
|
(kbd/esc? event)
|
||||||
|
(cancel-edition)
|
||||||
|
|
||||||
|
(kbd/enter? event)
|
||||||
|
(accept-edition))))]
|
||||||
|
|
||||||
|
(mf/with-effect [editing? internal-editing? start-edition]
|
||||||
|
(when (and editing? (not internal-editing?))
|
||||||
|
(start-edition)))
|
||||||
|
|
||||||
|
(if ^boolean internal-editing?
|
||||||
|
[:div.editable-label {:class class}
|
||||||
|
[:input.editable-label-input
|
||||||
|
{:ref input-ref
|
||||||
|
:default-value value
|
||||||
|
:on-key-up on-key-up
|
||||||
|
:on-blur cancel-edition}]
|
||||||
|
|
||||||
|
[:span.editable-label-close {:on-click cancel-edition}
|
||||||
|
(if ^boolean new-css-system
|
||||||
i/delete-text-refactor
|
i/delete-text-refactor
|
||||||
i/close)]]
|
i/close)]]
|
||||||
[:span.editable-label {:class class-name
|
[:span.editable-label
|
||||||
:title tooltip
|
{:class class
|
||||||
:on-double-click on-dbl-click} display-value])))
|
:title tooltip
|
||||||
|
:on-double-click on-dbl-click}
|
||||||
|
display-value])))
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -236,56 +236,98 @@
|
||||||
i/arrow-slide]]]))
|
i/arrow-slide]]]))
|
||||||
|
|
||||||
(mf/defc radio-buttons
|
(mf/defc radio-buttons
|
||||||
[{:keys [name options form trim on-change-value] :as props}]
|
{::mf/wrap-props false}
|
||||||
(let [form (or form (mf/use-ctx form-ctx))
|
[props]
|
||||||
value (get-in @form [:data name] "")
|
(let [form (or (unchecked-get props "form")
|
||||||
on-change-value (or on-change-value (constantly nil))
|
(mf/use-ctx form-ctx))
|
||||||
on-change (fn [event]
|
name (unchecked-get props "name")
|
||||||
(let [value (-> event dom/get-target dom/get-value)]
|
|
||||||
(swap! form assoc-in [:touched name] true)
|
|
||||||
(fm/on-input-change form name value trim)
|
|
||||||
(on-change-value name value)))]
|
|
||||||
[:div.custom-radio
|
|
||||||
(for [item options]
|
|
||||||
(let [id (str/ffmt "%-%" name (:value item))
|
|
||||||
image (:image item)]
|
|
||||||
[:div.input-radio {:key id :class (when image "with-image")}
|
|
||||||
[:input {:on-change on-change
|
|
||||||
:type "radio"
|
|
||||||
:id id
|
|
||||||
:name name
|
|
||||||
:value (:value item)
|
|
||||||
:checked (= value (:value item))}]
|
|
||||||
[:label {:for id
|
|
||||||
:style {:background-image (when image (str/ffmt "url(%)" image))}
|
|
||||||
:class (when image "with-image")}
|
|
||||||
(:label item)]]))]))
|
|
||||||
|
|
||||||
(mf/defc submit-button
|
current-value (or (dm/get-in @form [:data name] "")
|
||||||
[{:keys [label form on-click disabled data-test] :as props}]
|
(unchecked-get props "value"))
|
||||||
(let [form (or form (mf/use-ctx form-ctx))]
|
on-change (unchecked-get props "on-change")
|
||||||
[:input.btn-primary.btn-large
|
options (unchecked-get props "options")
|
||||||
{:name "submit"
|
trim? (unchecked-get props "trim")
|
||||||
:class (when (or (not (:valid @form)) (true? disabled)) "btn-disabled")
|
encode-fn (d/nilv (unchecked-get props "encode-fn") identity)
|
||||||
:disabled (or (not (:valid @form)) (true? disabled))
|
decode-fn (d/nilv (unchecked-get props "decode-fn") identity)
|
||||||
:tab-index "0"
|
|
||||||
:on-click on-click
|
on-change'
|
||||||
:on-key-down (fn [event]
|
(mf/use-fn
|
||||||
(when (kbd/enter? event)
|
(mf/deps on-change form name)
|
||||||
(on-click)))
|
(fn [event]
|
||||||
:value label
|
(let [value (-> event dom/get-target dom/get-value decode-fn)]
|
||||||
:data-test data-test
|
(when (some? form)
|
||||||
:type "submit"}]))
|
(swap! form assoc-in [:touched name] true)
|
||||||
|
(fm/on-input-change form name value trim?))
|
||||||
|
|
||||||
|
(when (fn? on-change)
|
||||||
|
(on-change name value)))))]
|
||||||
|
|
||||||
|
[:div.custom-radio
|
||||||
|
(for [{:keys [image value label]} options]
|
||||||
|
(let [image? (some? image)
|
||||||
|
value' (encode-fn value)
|
||||||
|
key (str/ffmt "%-%" name value')]
|
||||||
|
[:div.input-radio {:key key :class (when image? "with-image")}
|
||||||
|
[:input {:on-change on-change'
|
||||||
|
:type "radio"
|
||||||
|
:id key
|
||||||
|
:name name
|
||||||
|
:value value'
|
||||||
|
:checked (= value current-value)}]
|
||||||
|
[:label {:for key
|
||||||
|
:style {:background-image (when image? (str/ffmt "url(%)" image))}
|
||||||
|
:class (when image? "with-image")}
|
||||||
|
label]]))]))
|
||||||
|
|
||||||
|
(mf/defc submit-button*
|
||||||
|
{::mf/wrap-props false}
|
||||||
|
[props]
|
||||||
|
(let [form (or (unchecked-get props "form")
|
||||||
|
(mf/use-ctx form-ctx))
|
||||||
|
|
||||||
|
label (unchecked-get props "label")
|
||||||
|
on-click (unchecked-get props "onClick")
|
||||||
|
children (unchecked-get props "children")
|
||||||
|
|
||||||
|
class (d/nilv (unchecked-get props "className") "btn-primary btn-large")
|
||||||
|
name (d/nilv (unchecked-get props "name") "submit")
|
||||||
|
|
||||||
|
disabled? (or (and (some? form) (not (:valid @form)))
|
||||||
|
(true? (unchecked-get props "disabled")))
|
||||||
|
|
||||||
|
klass (dm/str class " " (if disabled? "btn-disabled" ""))
|
||||||
|
|
||||||
|
on-key-down
|
||||||
|
(mf/use-fn
|
||||||
|
(mf/deps on-click)
|
||||||
|
(fn [event]
|
||||||
|
(when (and (kbd/enter? event) (fn? on-click))
|
||||||
|
(on-click event))))
|
||||||
|
|
||||||
|
props (-> (obj/clone props)
|
||||||
|
(obj/unset! "children")
|
||||||
|
(obj/set! "disabled" disabled?)
|
||||||
|
(obj/set! "onKeyDown" on-key-down)
|
||||||
|
(obj/set! "name" name)
|
||||||
|
(obj/set! "label" mf/undefined)
|
||||||
|
(obj/set! "className" klass)
|
||||||
|
(obj/set! "type" "submit"))]
|
||||||
|
|
||||||
|
[:> "button" props
|
||||||
|
(if (some? children)
|
||||||
|
children
|
||||||
|
[:span label])]))
|
||||||
|
|
||||||
(mf/defc form
|
(mf/defc form
|
||||||
[{:keys [on-submit form children class] :as props}]
|
{::mf/wrap-props false}
|
||||||
(let [on-submit (or on-submit (constantly nil))]
|
[{:keys [on-submit form children class]}]
|
||||||
|
(let [on-submit' (mf/use-fn
|
||||||
|
(fn [event]
|
||||||
|
(dom/prevent-default event)
|
||||||
|
(when (fn? on-submit)
|
||||||
|
(on-submit form event))))]
|
||||||
[:& (mf/provider form-ctx) {:value form}
|
[:& (mf/provider form-ctx) {:value form}
|
||||||
[:form {:class class
|
[:form {:class class :on-submit on-submit'} children]]))
|
||||||
:on-submit (fn [event]
|
|
||||||
(dom/prevent-default event)
|
|
||||||
(on-submit form event))}
|
|
||||||
children]]))
|
|
||||||
|
|
||||||
(defn- conj-dedup
|
(defn- conj-dedup
|
||||||
"A helper that adds item into a vector and removes possible
|
"A helper that adds item into a vector and removes possible
|
||||||
|
|
|
@ -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]
|
||||||
|
|
|
@ -5,58 +5,73 @@
|
||||||
;; Copyright (c) KALEIDOS INC
|
;; Copyright (c) KALEIDOS INC
|
||||||
|
|
||||||
(ns app.main.ui.components.radio-buttons
|
(ns app.main.ui.components.radio-buttons
|
||||||
(:require-macros [app.main.style :refer [css]])
|
(:require-macros [app.main.style :as stl])
|
||||||
(:require
|
(:require
|
||||||
|
[app.common.data :as d]
|
||||||
[app.common.math :as math]
|
[app.common.math :as math]
|
||||||
[app.main.ui.formats :as fmt]
|
[app.main.ui.formats :as fmt]
|
||||||
[app.util.dom :as dom]
|
[app.util.dom :as dom]
|
||||||
[rumext.v2 :as mf]))
|
[rumext.v2 :as mf]))
|
||||||
|
|
||||||
(def ctx-radio-button (mf/create-context nil))
|
(def context
|
||||||
|
(mf/create-context nil))
|
||||||
|
|
||||||
(mf/defc radio-button
|
(mf/defc radio-button
|
||||||
{::mf/wrap-props false}
|
{::mf/wrap-props false}
|
||||||
[props]
|
[props]
|
||||||
(let [ctx (mf/use-ctx ctx-radio-button)
|
(let [context (mf/use-ctx context)
|
||||||
icon (unchecked-get props "icon")
|
|
||||||
id (unchecked-get props "id")
|
icon (unchecked-get props "icon")
|
||||||
on-change (:on-change ctx)
|
id (unchecked-get props "id")
|
||||||
selected (:selected ctx)
|
value (unchecked-get props "value")
|
||||||
value (unchecked-get props "value")
|
|
||||||
checked? (= selected value)
|
on-change (unchecked-get context "on-change")
|
||||||
name (:name ctx)]
|
selected (unchecked-get context "selected")
|
||||||
|
name (unchecked-get context "name")
|
||||||
|
|
||||||
|
encode-fn (unchecked-get context "encode-fn")
|
||||||
|
checked? (= selected value)]
|
||||||
|
|
||||||
[:label {:for id
|
[:label {:for id
|
||||||
:class (dom/classnames (css :radio-icon) true
|
:class (stl/css-case
|
||||||
(css :checked) checked?)}
|
:radio-icon true
|
||||||
icon
|
:checked checked?)}
|
||||||
|
|
||||||
|
(when (some? icon) icon)
|
||||||
|
|
||||||
[:input {:id id
|
[:input {:id id
|
||||||
:on-change on-change
|
:on-change on-change
|
||||||
:type "radio"
|
:type "radio"
|
||||||
:name name
|
:name name
|
||||||
:value value
|
:value (encode-fn value)
|
||||||
:checked checked?}]]))
|
:checked checked?}]]))
|
||||||
|
|
||||||
(mf/defc nilable-option
|
(mf/defc nilable-option
|
||||||
{::mf/wrap-props false}
|
{::mf/wrap-props false}
|
||||||
[props]
|
[props]
|
||||||
(let [ctx (mf/use-ctx ctx-radio-button)
|
(let [context (mf/use-ctx context)
|
||||||
icon (unchecked-get props "icon")
|
icon (unchecked-get props "icon")
|
||||||
id (unchecked-get props "id")
|
id (unchecked-get props "id")
|
||||||
on-change (:on-change ctx)
|
value (unchecked-get props "value")
|
||||||
selected (:selected ctx)
|
|
||||||
value (unchecked-get props "value")
|
on-change (unchecked-get context "on-change")
|
||||||
checked? (= selected value)
|
selected (unchecked-get context "selected")
|
||||||
name (:name ctx)]
|
name (unchecked-get context "name")
|
||||||
|
|
||||||
|
encode-fn (unchecked-get context "encode-fn")
|
||||||
|
checked? (= selected value)]
|
||||||
|
|
||||||
[:label {:for id
|
[:label {:for id
|
||||||
:class (dom/classnames (css :radio-icon) true
|
:class (stl/css-case
|
||||||
(css :checked) checked?)}
|
:radio-icon true
|
||||||
|
:checked checked?)}
|
||||||
icon
|
icon
|
||||||
[:input {:id id
|
[:input {:id id
|
||||||
:on-change on-change
|
:on-change on-change
|
||||||
:type "checkbox"
|
:type "checkbox"
|
||||||
:name name
|
:name name
|
||||||
:value value
|
:value (encode-fn value)
|
||||||
:checked checked?}]]))
|
:checked checked?}]]))
|
||||||
|
|
||||||
(mf/defc radio-buttons
|
(mf/defc radio-buttons
|
||||||
{::mf/wrap-props false}
|
{::mf/wrap-props false}
|
||||||
|
@ -65,14 +80,36 @@
|
||||||
on-change (unchecked-get props "on-change")
|
on-change (unchecked-get props "on-change")
|
||||||
selected (unchecked-get props "selected")
|
selected (unchecked-get props "selected")
|
||||||
name (unchecked-get props "name")
|
name (unchecked-get props "name")
|
||||||
calculate-width (fmt/format-pixels (+ (math/pow 2 (count children)) (* 28 (count children))))
|
|
||||||
handle-change
|
encode-fn (d/nilv (unchecked-get props "encode-fn") identity)
|
||||||
|
decode-fn (d/nilv (unchecked-get props "encode-fn") identity)
|
||||||
|
|
||||||
|
nitems (if (array? children)
|
||||||
|
(alength children)
|
||||||
|
1)
|
||||||
|
|
||||||
|
width (mf/with-memo [nitems]
|
||||||
|
(fmt/format-pixels
|
||||||
|
(+ (math/pow 2 nitems)
|
||||||
|
(* 28 nitems))))
|
||||||
|
|
||||||
|
on-change'
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
(mf/deps on-change)
|
(mf/deps on-change)
|
||||||
(fn [event]
|
(fn [event]
|
||||||
(let [value (dom/get-target-val event)]
|
(let [value (dom/get-target-val event)]
|
||||||
(on-change value event))))]
|
(when (fn? on-change)
|
||||||
[:& (mf/provider ctx-radio-button) {:value {:selected selected :on-change handle-change :name name}}
|
(on-change (decode-fn value) event)))))
|
||||||
[:div {:class (css :radio-btn-wrapper)
|
|
||||||
:style {:width calculate-width}}
|
context-value
|
||||||
|
(mf/with-memo [selected on-change' name encode-fn decode-fn]
|
||||||
|
#js {:selected selected
|
||||||
|
:on-change on-change'
|
||||||
|
:name name
|
||||||
|
:encode-fn encode-fn
|
||||||
|
:decode-fn decode-fn})]
|
||||||
|
|
||||||
|
[:& (mf/provider context) {:value context-value}
|
||||||
|
[:div {:class (stl/css :radio-btn-wrapper)
|
||||||
|
:style {:width width}}
|
||||||
children]]))
|
children]]))
|
||||||
|
|
|
@ -185,7 +185,7 @@
|
||||||
:profile profile
|
:profile profile
|
||||||
:section section
|
:section section
|
||||||
:search-term search-term}]
|
:search-term search-term}]
|
||||||
(when (and team (seq projects))
|
(when (and team profile (seq projects))
|
||||||
[:& dashboard-content
|
[:& dashboard-content
|
||||||
{:projects projects
|
{:projects projects
|
||||||
:profile profile
|
:profile profile
|
||||||
|
|
|
@ -185,9 +185,10 @@
|
||||||
:on-submit on-submit}]]
|
:on-submit on-submit}]]
|
||||||
|
|
||||||
[:div.action-buttons
|
[:div.action-buttons
|
||||||
[:& fm/submit-button {:label (tr "modals.invite-member-confirm.accept")
|
[:> fm/submit-button*
|
||||||
:disabled (and (boolean (some current-data-emails current-members-emails))
|
{:label (tr "modals.invite-member-confirm.accept")
|
||||||
(empty? (remove current-members-emails current-data-emails)))}]]]]))
|
:disabled (and (boolean (some current-data-emails current-members-emails))
|
||||||
|
(empty? (remove current-members-emails current-data-emails)))}]]]]))
|
||||||
|
|
||||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
;; MEMBERS SECTION
|
;; MEMBERS SECTION
|
||||||
|
@ -814,7 +815,7 @@
|
||||||
{:type "button"
|
{:type "button"
|
||||||
:value (tr "labels.cancel")
|
:value (tr "labels.cancel")
|
||||||
:on-click #(modal/hide!)}]
|
:on-click #(modal/hide!)}]
|
||||||
[:& fm/submit-button
|
[:> fm/submit-button*
|
||||||
{:label (if webhook
|
{:label (if webhook
|
||||||
(tr "modals.edit-webhook.submit-label")
|
(tr "modals.edit-webhook.submit-label")
|
||||||
(tr "modals.create-webhook.submit-label"))}]]]]]]))
|
(tr "modals.create-webhook.submit-label"))}]]]]]]))
|
||||||
|
|
|
@ -95,7 +95,7 @@
|
||||||
|
|
||||||
[:div.modal-footer
|
[:div.modal-footer
|
||||||
[:div.action-buttons
|
[:div.action-buttons
|
||||||
[:& fm/submit-button
|
[:> fm/submit-button*
|
||||||
{:label (if team
|
{:label (if team
|
||||||
(tr "labels.update-team")
|
(tr "labels.update-team")
|
||||||
(tr "labels.create-team"))}]]]]]]))
|
(tr "labels.create-team"))}]]]]]]))
|
||||||
|
|
|
@ -26,7 +26,7 @@
|
||||||
children
|
children
|
||||||
[:div.buttons
|
[:div.buttons
|
||||||
[:div.step-next
|
[:div.step-next
|
||||||
[:& fm/submit-button
|
[:> fm/submit-button*
|
||||||
{:label (if (< step 4) (tr "questions.next") (tr "questions.start"))
|
{:label (if (< step 4) (tr "questions.next") (tr "questions.start"))
|
||||||
:class "step-next"}]]
|
:class "step-next"}]]
|
||||||
|
|
||||||
|
@ -114,7 +114,7 @@
|
||||||
{:label (tr "questions.never-used-a-tool") :value "never-used-a-tool" :image "images/form/never-used.png"}
|
{:label (tr "questions.never-used-a-tool") :value "never-used-a-tool" :image "images/form/never-used.png"}
|
||||||
{:label (tr "questions.other") :value "other"}]
|
{:label (tr "questions.other") :value "other"}]
|
||||||
:name :experience-design-tool
|
:name :experience-design-tool
|
||||||
:on-change-value on-design-tool-change}]
|
:on-change on-design-tool-change}]
|
||||||
[:div.other
|
[:div.other
|
||||||
[:label (tr "questions.other")]
|
[:label (tr "questions.other")]
|
||||||
[:& fm/input {:name :experience-design-tool-other :label (tr "questions.other") :disabled (not= experience-design-tool "other")}]]]))
|
[:& fm/input {:name :experience-design-tool-other :label (tr "questions.other") :disabled (not= experience-design-tool "other")}]]]))
|
||||||
|
@ -152,7 +152,7 @@
|
||||||
{:label (tr "questions.student-teacher") :value "student-teacher"}
|
{:label (tr "questions.student-teacher") :value "student-teacher"}
|
||||||
{:label (tr "questions.other") :value "other"}]
|
{:label (tr "questions.other") :value "other"}]
|
||||||
:name :role
|
:name :role
|
||||||
:on-change-value on-role-change}]
|
:on-change on-role-change}]
|
||||||
[:div.other
|
[:div.other
|
||||||
[:label (tr "questions.other")]
|
[:label (tr "questions.other")]
|
||||||
[:& fm/input {:name :role-other :label (tr "questions.other") :disabled (not= role "other")}]]
|
[:& fm/input {:name :role-other :label (tr "questions.other") :disabled (not= role "other")}]]
|
||||||
|
|
|
@ -87,7 +87,7 @@
|
||||||
:name :name
|
:name :name
|
||||||
:label (tr "onboarding.choice.team-up.create-team-placeholder")}]
|
:label (tr "onboarding.choice.team-up.create-team-placeholder")}]
|
||||||
|
|
||||||
[:& fm/submit-button
|
[:> fm/submit-button*
|
||||||
{:label (tr "labels.continue")}]]
|
{:label (tr "labels.continue")}]]
|
||||||
|
|
||||||
[:button.skip-action {:on-click on-skip} (tr "onboarding.choice.team-up.create-later")]]
|
[:button.skip-action {:on-click on-skip} (tr "onboarding.choice.team-up.create-later")]]
|
||||||
|
@ -199,8 +199,9 @@
|
||||||
:name name
|
:name name
|
||||||
:step 2}))}
|
:step 2}))}
|
||||||
(tr "labels.back")]
|
(tr "labels.back")]
|
||||||
[:& fm/submit-button
|
[:> fm/submit-button*
|
||||||
{:label (tr "onboarding.choice.team-up.invite-members-submit")}]]
|
{:label (tr "onboarding.choice.team-up.invite-members-submit")}]]
|
||||||
|
|
||||||
[:div.skip-action
|
[:div.skip-action
|
||||||
{:on-click on-skip}
|
{:on-click on-skip}
|
||||||
[:div.action (tr "onboarding.choice.team-up.invite-members-skip")]]]]
|
[:div.action (tr "onboarding.choice.team-up.invite-members-skip")]]]]
|
||||||
|
|
|
@ -166,7 +166,7 @@
|
||||||
{:type "button"
|
{:type "button"
|
||||||
:value (tr "labels.cancel")
|
:value (tr "labels.cancel")
|
||||||
:on-click #(modal/hide!)}]
|
:on-click #(modal/hide!)}]
|
||||||
[:& fm/submit-button
|
[:> fm/submit-button*
|
||||||
{:label (tr "modals.create-access-token.submit-label")}]])]]]]]))
|
{:label (tr "modals.create-access-token.submit-label")}]])]]]]]))
|
||||||
|
|
||||||
(mf/defc access-tokens-hero
|
(mf/defc access-tokens-hero
|
||||||
|
|
|
@ -129,7 +129,7 @@
|
||||||
|
|
||||||
[:div.modal-footer
|
[:div.modal-footer
|
||||||
[:div.action-buttons {:data-test "change-email-submit"}
|
[:div.action-buttons {:data-test "change-email-submit"}
|
||||||
[:& fm/submit-button
|
[:> fm/submit-button*
|
||||||
{:label (tr "modals.change-email.submit")}]]]]]]))
|
{:label (tr "modals.change-email.submit")}]]]]]]))
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -76,7 +76,7 @@
|
||||||
:name :content
|
:name :content
|
||||||
:rows 5}]]
|
:rows 5}]]
|
||||||
|
|
||||||
[:& fm/submit-button
|
[:> fm/submit-button*
|
||||||
{:label (if @loading (tr "labels.sending") (tr "labels.send"))
|
{:label (if @loading (tr "labels.sending") (tr "labels.send"))
|
||||||
:disabled @loading}]
|
:disabled @loading}]
|
||||||
|
|
||||||
|
|
|
@ -35,6 +35,7 @@
|
||||||
(st/emit! (du/update-profile (with-meta data mdata)))))
|
(st/emit! (du/update-profile (with-meta data mdata)))))
|
||||||
|
|
||||||
(mf/defc options-form
|
(mf/defc options-form
|
||||||
|
{::mf/wrap-props false}
|
||||||
[]
|
[]
|
||||||
(let [profile (mf/deref refs/profile)
|
(let [profile (mf/deref refs/profile)
|
||||||
initial (mf/with-memo [profile]
|
initial (mf/with-memo [profile]
|
||||||
|
@ -66,7 +67,7 @@
|
||||||
:options [{:label "Penpot Dark (default)" :value "default"}
|
:options [{:label "Penpot Dark (default)" :value "default"}
|
||||||
{:label "Penpot Light" :value "light"}]
|
{:label "Penpot Light" :value "light"}]
|
||||||
:data-test "setting-theme"}]])
|
:data-test "setting-theme"}]])
|
||||||
[:& fm/submit-button
|
[:> fm/submit-button*
|
||||||
{:label (tr "dashboard.update-settings")
|
{:label (tr "dashboard.update-settings")
|
||||||
:data-test "submit-lang-change"}]]))
|
:data-test "submit-lang-change"}]]))
|
||||||
|
|
||||||
|
|
|
@ -98,7 +98,7 @@
|
||||||
:name :password-2
|
:name :password-2
|
||||||
:label (t locale "labels.confirm-password")}]]
|
:label (t locale "labels.confirm-password")}]]
|
||||||
|
|
||||||
[:& fm/submit-button
|
[:> fm/submit-button*
|
||||||
{:label (t locale "dashboard.update-settings")
|
{:label (t locale "dashboard.update-settings")
|
||||||
:data-test "submit-password"}]]))
|
:data-test "submit-password"}]]))
|
||||||
|
|
||||||
|
|
|
@ -69,7 +69,7 @@
|
||||||
[:a {:on-click #(modal/show! :change-email {})}
|
[:a {:on-click #(modal/show! :change-email {})}
|
||||||
(tr "dashboard.change-email")]]]]
|
(tr "dashboard.change-email")]]]]
|
||||||
|
|
||||||
[:& fm/submit-button
|
[:> fm/submit-button*
|
||||||
{:label (tr "dashboard.save-settings")
|
{:label (tr "dashboard.save-settings")
|
||||||
:disabled (empty? (:touched @form))}]
|
:disabled (empty? (:touched @form))}]
|
||||||
|
|
||||||
|
|
|
@ -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}]]]]]]))
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
;; Copyright (c) KALEIDOS INC
|
;; Copyright (c) KALEIDOS INC
|
||||||
|
|
||||||
(ns app.main.ui.workspace.sidebar.assets.components
|
(ns app.main.ui.workspace.sidebar.assets.components
|
||||||
(:require-macros [app.main.style :refer [css]])
|
(:require-macros [app.main.style :as stl :refer [css]])
|
||||||
(:require
|
(:require
|
||||||
[app.common.data :as d]
|
[app.common.data :as d]
|
||||||
[app.common.data.macros :as dm]
|
[app.common.data.macros :as dm]
|
||||||
|
@ -146,15 +146,15 @@
|
||||||
(let [renaming? (= renaming (:id component))]
|
(let [renaming? (= renaming (:id component))]
|
||||||
[:*
|
[:*
|
||||||
[:& editable-label
|
[:& editable-label
|
||||||
{:class-name (dom/classnames
|
{:class (dom/classnames
|
||||||
(css :cell-name) listing-thumbs?
|
(css :cell-name) listing-thumbs?
|
||||||
(css :item-name) (not listing-thumbs?)
|
(css :item-name) (not listing-thumbs?)
|
||||||
(css :editing) renaming?)
|
(css :editing) renaming?)
|
||||||
:value (cph/merge-path-item (:path component) (:name component))
|
:value (cph/merge-path-item (:path component) (:name component))
|
||||||
:tooltip (cph/merge-path-item (:path component) (:name component))
|
:tooltip (cph/merge-path-item (:path component) (:name component))
|
||||||
:display-value (:name component)
|
:display-value (:name component)
|
||||||
:editing? renaming?
|
:editing renaming?
|
||||||
:disable-dbl-click? true
|
:disable-dbl-click true
|
||||||
:on-change do-rename
|
:on-change do-rename
|
||||||
:on-cancel cancel-rename}]
|
:on-cancel cancel-rename}]
|
||||||
|
|
||||||
|
@ -185,15 +185,15 @@
|
||||||
(let [renaming? (= renaming (:id component))]
|
(let [renaming? (= renaming (:id component))]
|
||||||
[:*
|
[:*
|
||||||
[:& editable-label
|
[:& editable-label
|
||||||
{:class-name (dom/classnames
|
{:class (dom/classnames
|
||||||
:cell-name listing-thumbs?
|
:cell-name listing-thumbs?
|
||||||
:item-name (not listing-thumbs?)
|
:item-name (not listing-thumbs?)
|
||||||
:editing renaming?)
|
:editing renaming?)
|
||||||
:value (cph/merge-path-item (:path component) (:name component))
|
:value (cph/merge-path-item (:path component) (:name component))
|
||||||
:tooltip (cph/merge-path-item (:path component) (:name component))
|
:tooltip (cph/merge-path-item (:path component) (:name component))
|
||||||
:display-value (:name component)
|
:display-value (:name component)
|
||||||
:editing? renaming?
|
:editing renaming?
|
||||||
:disable-dbl-click? true
|
:disable-dbl-click true
|
||||||
:on-change do-rename
|
:on-change do-rename
|
||||||
:on-cancel cancel-rename}]
|
:on-cancel cancel-rename}]
|
||||||
|
|
||||||
|
@ -569,29 +569,27 @@
|
||||||
:open? open?}
|
:open? open?}
|
||||||
(if ^boolean new-css-system
|
(if ^boolean new-css-system
|
||||||
[:& cmm/asset-section-block {:role :title-button}
|
[:& cmm/asset-section-block {:role :title-button}
|
||||||
|
[:*
|
||||||
|
(when open?
|
||||||
|
[:div {:class (stl/css :listing-options)}
|
||||||
|
[:& radio-buttons {:selected (if listing-thumbs? "grid" "list")
|
||||||
|
:on-change toggle-list-style
|
||||||
|
:name "listing-style"}
|
||||||
|
[:& radio-button {:icon i/view-as-list-refactor
|
||||||
|
:value "list"
|
||||||
|
:id :list}]
|
||||||
|
[:& radio-button {:icon i/flex-grid-refactor
|
||||||
|
:value "grid"
|
||||||
|
:id :grid}]]])
|
||||||
|
|
||||||
(when open?
|
(when (and components-v2 (not read-only?) local?)
|
||||||
[:div {:class (dom/classnames (css :listing-options) true)}
|
[:div {:on-click add-component
|
||||||
(let [option-selected (if listing-thumbs?
|
:class (dom/classnames (css :add-component) true)}
|
||||||
"grid"
|
i/add-refactor
|
||||||
"list")]
|
[:& file-uploader {:accept cm/str-image-types
|
||||||
[:& radio-buttons {:selected option-selected
|
:multi true
|
||||||
:on-change toggle-list-style
|
:ref input-ref
|
||||||
:name "listing-style"}
|
:on-selected on-file-selected}]])]]
|
||||||
[:& radio-button {:icon (mf/html i/view-as-list-refactor)
|
|
||||||
:value "list"
|
|
||||||
:id :list}]
|
|
||||||
[:& radio-button {:icon (mf/html i/flex-grid-refactor)
|
|
||||||
:value "grid"
|
|
||||||
:id :grid}]])])
|
|
||||||
(when (and components-v2 (not read-only?) local?)
|
|
||||||
[:div {:on-click add-component
|
|
||||||
:class (dom/classnames (css :add-component) true)}
|
|
||||||
i/add-refactor
|
|
||||||
[:& file-uploader {:accept cm/str-image-types
|
|
||||||
:multi true
|
|
||||||
:ref input-ref
|
|
||||||
:on-selected on-file-selected}]])]
|
|
||||||
(when local?
|
(when local?
|
||||||
[:& cmm/asset-section-block {:role :title-button}
|
[:& cmm/asset-section-block {:role :title-button}
|
||||||
(when (and components-v2 (not read-only?))
|
(when (and components-v2 (not read-only?))
|
||||||
|
|
|
@ -108,15 +108,15 @@
|
||||||
(let [renaming? (= renaming (:id object))]
|
(let [renaming? (= renaming (:id object))]
|
||||||
[:*
|
[:*
|
||||||
[:& editable-label
|
[:& editable-label
|
||||||
{:class-name (dom/classnames
|
{:class (dom/classnames
|
||||||
(css :cell-name) listing-thumbs?
|
(css :cell-name) listing-thumbs?
|
||||||
(css :item-name) (not listing-thumbs?)
|
(css :item-name) (not listing-thumbs?)
|
||||||
(css :editing) renaming?)
|
(css :editing) renaming?)
|
||||||
:value (cph/merge-path-item (:path object) (:name object))
|
:value (cph/merge-path-item (:path object) (:name object))
|
||||||
:tooltip (cph/merge-path-item (:path object) (:name object))
|
:tooltip (cph/merge-path-item (:path object) (:name object))
|
||||||
:display-value (:name object)
|
:display-value (:name object)
|
||||||
:editing? renaming?
|
:editing renaming?
|
||||||
:disable-dbl-click? true
|
:disable-dbl-click true
|
||||||
:on-change do-rename
|
:on-change do-rename
|
||||||
:on-cancel cancel-rename}]
|
:on-cancel cancel-rename}]
|
||||||
|
|
||||||
|
@ -145,15 +145,15 @@
|
||||||
(let [renaming? (= renaming (:id object))]
|
(let [renaming? (= renaming (:id object))]
|
||||||
[:*
|
[:*
|
||||||
[:& editable-label
|
[:& editable-label
|
||||||
{:class-name (dom/classnames
|
{:class (dom/classnames
|
||||||
:cell-name listing-thumbs?
|
:cell-name listing-thumbs?
|
||||||
:item-name (not listing-thumbs?)
|
:item-name (not listing-thumbs?)
|
||||||
:editing renaming?)
|
:editing renaming?)
|
||||||
:value (cph/merge-path-item (:path object) (:name object))
|
:value (cph/merge-path-item (:path object) (:name object))
|
||||||
:tooltip (cph/merge-path-item (:path object) (:name object))
|
:tooltip (cph/merge-path-item (:path object) (:name object))
|
||||||
:display-value (:name object)
|
:display-value (:name object)
|
||||||
:editing? renaming?
|
:editing renaming?
|
||||||
:disable-dbl-click? true
|
:disable-dbl-click true
|
||||||
:on-change do-rename
|
:on-change do-rename
|
||||||
:on-cancel cancel-rename}]
|
:on-cancel cancel-rename}]
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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}]
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -14,8 +14,8 @@
|
||||||
[app.main.refs :as refs]
|
[app.main.refs :as refs]
|
||||||
[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]
|
||||||
|
@ -193,26 +193,26 @@
|
||||||
:else
|
:else
|
||||||
[:*
|
[:*
|
||||||
[:div.color-info
|
[:div.color-info
|
||||||
[:> color-input {:value (if (uc/multiple? color)
|
[:> color-input* {:value (if (uc/multiple? color)
|
||||||
""
|
""
|
||||||
(-> color :color uc/remove-hash))
|
(-> color :color uc/remove-hash))
|
||||||
:placeholder (tr "settings.multiple")
|
:placeholder (tr "settings.multiple")
|
||||||
:on-focus on-focus
|
:on-focus on-focus
|
||||||
:on-blur on-blur
|
:on-blur on-blur
|
||||||
:on-change handle-value-change}]]
|
:on-change handle-value-change}]]
|
||||||
|
|
||||||
(when (and (not disable-opacity)
|
(when (and (not disable-opacity)
|
||||||
(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])])
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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")
|
||||||
|
|
Loading…
Add table
Reference in a new issue