mirror of
https://github.com/penpot/penpot.git
synced 2026-07-04 05:15:08 +00:00
♻️ Migrate shared ancillary components to modern syntax (#10527)
* ♻️ Migrate shared ancillary components to modern syntax * ♻️ Address shared ancillary syntax review * ♻️ Apply Step 3 props destructuring on numeric-input* Replaces the legacy ?-suffixed prop aliases with clean :keys destructuring and updates internal references, addressing review on PR #9406. * 🐛 Fix some problems on refactored components --------- Co-authored-by: sxxtony <166789813+sxxtony@users.noreply.github.com>
This commit is contained in:
Eva Marco
GitHub
parent
2e32a8743e
commit
0387cdf7e4
@ -12,7 +12,7 @@
|
||||
[app.common.math :as mth]
|
||||
[app.common.uuid :as uuid]
|
||||
[app.main.ui.components.dropdown :refer [dropdown]]
|
||||
[app.main.ui.components.numeric-input :refer [numeric-input*]]
|
||||
[app.main.ui.components.numeric-input :as deprecated-input]
|
||||
[app.main.ui.icons :as deprecated-icon]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.keyboard :as kbd]
|
||||
@ -163,13 +163,13 @@
|
||||
[:div {:class (dm/str class " " (stl/css :editable-select))
|
||||
:ref on-node-load}
|
||||
(if (= type "number")
|
||||
[:> numeric-input* {:value (or (some-> current-value value->label) "")
|
||||
:className input-class
|
||||
:on-change set-value
|
||||
:on-focus handle-focus
|
||||
:on-blur handle-blur
|
||||
:aria-label aria-label
|
||||
:placeholder placeholder}]
|
||||
[:> deprecated-input/numeric-input* {:value (or (some-> current-value value->label) "")
|
||||
:class input-class
|
||||
:on-change set-value
|
||||
:on-focus handle-focus
|
||||
:on-blur handle-blur
|
||||
:aria-label aria-label
|
||||
:placeholder placeholder}]
|
||||
[:input {:value (if (= value :multiple) nil (or (some-> current-value value->label) ""))
|
||||
:class input-class
|
||||
:on-change handle-change-input
|
||||
|
||||
@ -14,7 +14,6 @@
|
||||
[app.util.dom :as dom]
|
||||
[app.util.globals :as globals]
|
||||
[app.util.keyboard :as kbd]
|
||||
[app.util.object :as obj]
|
||||
[app.util.simple-math :as smt]
|
||||
[cljs.core :as c]
|
||||
[cuerdas.core :as str]
|
||||
@ -22,30 +21,22 @@
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc numeric-input*
|
||||
{::mf/wrap-props false
|
||||
::mf/forward-ref true}
|
||||
[props external-ref]
|
||||
(let [value-str (unchecked-get props "value")
|
||||
min-value (unchecked-get props "min")
|
||||
max-value (unchecked-get props "max")
|
||||
step-value (unchecked-get props "step")
|
||||
wrap-value? (unchecked-get props "data-wrap")
|
||||
on-change (unchecked-get props "onChange")
|
||||
on-blur (unchecked-get props "onBlur")
|
||||
on-focus (unchecked-get props "onFocus")
|
||||
|
||||
title (unchecked-get props "title")
|
||||
default (unchecked-get props "default")
|
||||
nillable? (unchecked-get props "nillable")
|
||||
class (d/nilv (unchecked-get props "className") "")
|
||||
{::mf/forward-ref true}
|
||||
[{:keys [value min max step data-wrap on-change on-blur on-focus title default
|
||||
select-on-focus class is-disabled is-nillable is-integer]
|
||||
:rest props} external-ref]
|
||||
(let [value-str value
|
||||
min-value min
|
||||
max-value max
|
||||
step-value step
|
||||
wrap-value? data-wrap
|
||||
|
||||
min-value (d/parse-double min-value)
|
||||
max-value (d/parse-double max-value)
|
||||
step-value (d/parse-double step-value 1)
|
||||
default (d/parse-double default (when-not nillable? 0))
|
||||
default (d/parse-double default (when-not is-nillable 0))
|
||||
|
||||
integer? (unchecked-get props "integer")
|
||||
select-on-focus? (d/nilv (unchecked-get props "selectOnFocus") true)
|
||||
select-on-focus? (d/nilv select-on-focus true)
|
||||
|
||||
;; We need a ref pointing to the input dom element, but the user
|
||||
;; of this component may provide one (that is forwarded here).
|
||||
@ -63,9 +54,13 @@
|
||||
;; Last value input by the user we need to store to save on unmount
|
||||
last-value* (mf/use-var value)
|
||||
|
||||
drag-state* (mf/use-ref :idle)
|
||||
drag-start-x* (mf/use-ref 0)
|
||||
drag-start-val* (mf/use-ref 0)
|
||||
|
||||
parse-value
|
||||
(mf/use-fn
|
||||
(mf/deps min-value max-value value nillable? default integer?)
|
||||
(mf/deps min-value max-value value is-nillable default is-integer)
|
||||
(fn []
|
||||
(when-let [node (mf/ref-val ref)]
|
||||
(let [new-value (-> (dom/get-value node)
|
||||
@ -74,7 +69,7 @@
|
||||
(cond
|
||||
(d/num? new-value)
|
||||
(-> new-value
|
||||
(cond-> integer? mth/round)
|
||||
(cond-> is-integer mth/round)
|
||||
(d/max (/ sm/min-safe-int 2))
|
||||
(d/min (/ sm/max-safe-int 2))
|
||||
(cond-> (d/num? min-value)
|
||||
@ -82,7 +77,7 @@
|
||||
(cond-> (d/num? max-value)
|
||||
(d/min max-value)))
|
||||
|
||||
nillable?
|
||||
is-nillable
|
||||
default
|
||||
|
||||
:else value)))))
|
||||
@ -150,7 +145,7 @@
|
||||
max-value
|
||||
|
||||
:else new-value)
|
||||
new-value (if integer? (mth/round new-value) new-value)]
|
||||
new-value (if is-integer (mth/round new-value) new-value)]
|
||||
|
||||
(apply-value event new-value))))))
|
||||
|
||||
@ -197,7 +192,7 @@
|
||||
(fn [event]
|
||||
(when (mf/ref-val dirty-ref)
|
||||
(let [new-value (or @last-value* default)]
|
||||
(if (or nillable? new-value)
|
||||
(if (or is-nillable new-value)
|
||||
(apply-value event new-value)
|
||||
(update-input new-value)))
|
||||
(when (fn? on-blur)
|
||||
@ -214,33 +209,100 @@
|
||||
(dom/blur! node)))))
|
||||
|
||||
handle-focus
|
||||
(mf/use-fn
|
||||
(mf/use-callback
|
||||
(mf/deps on-focus select-on-focus?)
|
||||
(fn [event]
|
||||
(reset! last-value* (parse-value))
|
||||
(let [target (dom/get-target event)]
|
||||
(when on-focus
|
||||
(mf/set-ref-val! dirty-ref true)
|
||||
(on-focus event))
|
||||
(when select-on-focus?
|
||||
(dom/select-text! target)
|
||||
;; In webkit browsers the mouseup event will be called after the on-focus causing and unselect
|
||||
(.addEventListener target "mouseup" dom/prevent-default #js {:once true})))))
|
||||
(when-not (= :dragging (mf/ref-val drag-state*))
|
||||
(reset! last-value* (parse-value))
|
||||
(let [target (dom/get-target event)]
|
||||
(when on-focus
|
||||
(mf/set-ref-val! dirty-ref true)
|
||||
(on-focus event))
|
||||
|
||||
props (-> (obj/clone props)
|
||||
(obj/unset! "selectOnFocus")
|
||||
(obj/unset! "nillable")
|
||||
(obj/unset! "integer")
|
||||
(obj/set! "value" mf/undefined)
|
||||
(obj/set! "onChange" handle-change)
|
||||
(obj/set! "className" class)
|
||||
(obj/set! "type" "text")
|
||||
(obj/set! "ref" ref)
|
||||
(obj/set! "defaultValue" (fmt/format-number value))
|
||||
(obj/set! "title" title)
|
||||
(obj/set! "onKeyDown" handle-key-down)
|
||||
(obj/set! "onBlur" handle-blur)
|
||||
(obj/set! "onFocus" handle-focus))]
|
||||
(when select-on-focus?
|
||||
(dom/select-text! target)
|
||||
;; In webkit browsers the mouseup event will be called after the on-focus causing and unselect
|
||||
(.addEventListener target "mouseup" dom/prevent-default #js {:once true}))))))
|
||||
|
||||
on-scrub-pointer-down
|
||||
(mf/use-fn
|
||||
(mf/deps value value-str min-value max-value default)
|
||||
(fn [event]
|
||||
(let [disabled? (unchecked-get props "disabled")
|
||||
node (mf/ref-val ref)
|
||||
is-focused (and (some? node) (dom/active? node))]
|
||||
(when-not (or disabled? is-focused (= :multiple value-str))
|
||||
(let [client-x (.-clientX event)
|
||||
start-val (or value default 0)]
|
||||
(mf/set-ref-val! drag-state* :maybe-dragging)
|
||||
(mf/set-ref-val! drag-start-x* client-x)
|
||||
(mf/set-ref-val! drag-start-val* start-val)
|
||||
(dom/capture-pointer event))))))
|
||||
|
||||
on-scrub-pointer-move
|
||||
(mf/use-fn
|
||||
(mf/deps apply-value update-input step-value min-value max-value)
|
||||
(fn [event]
|
||||
(let [state (mf/ref-val drag-state*)]
|
||||
(when (or (= state :maybe-dragging) (= state :dragging))
|
||||
(let [client-x (.-clientX event)
|
||||
start-x (mf/ref-val drag-start-x*)
|
||||
delta-x (- client-x start-x)]
|
||||
(when (and (= state :maybe-dragging)
|
||||
(>= (js/Math.abs delta-x) 3))
|
||||
(mf/set-ref-val! drag-state* :dragging)
|
||||
(dom/add-class! (dom/get-body) "cursor-drag-scrub"))
|
||||
(when (= (mf/ref-val drag-state*) :dragging)
|
||||
(let [effective-step (cond
|
||||
(.-shiftKey event) (* step-value 10)
|
||||
(.-ctrlKey event) (* step-value 0.1)
|
||||
:else step-value)
|
||||
steps (js/Math.round (/ delta-x 1))
|
||||
new-val (+ (mf/ref-val drag-start-val*)
|
||||
(* steps effective-step))
|
||||
new-val (cond-> new-val
|
||||
(d/num? min-value) (mth/max min-value)
|
||||
(d/num? max-value) (mth/min max-value))]
|
||||
(update-input new-val)
|
||||
(apply-value event new-val))))))))
|
||||
|
||||
on-scrub-pointer-up
|
||||
(mf/use-fn
|
||||
(mf/deps ref)
|
||||
(fn [event]
|
||||
(let [state (mf/ref-val drag-state*)]
|
||||
(when (= state :maybe-dragging)
|
||||
(mf/set-ref-val! drag-state* :idle)
|
||||
(dom/release-pointer event)
|
||||
(when-let [node (mf/ref-val ref)]
|
||||
(dom/focus! node)))
|
||||
(when (= state :dragging)
|
||||
(mf/set-ref-val! drag-state* :idle)
|
||||
(dom/remove-class! (dom/get-body) "cursor-drag-scrub")
|
||||
(dom/release-pointer event)))))
|
||||
|
||||
on-scrub-lost-pointer-capture
|
||||
(mf/use-fn
|
||||
(fn [_event]
|
||||
(mf/set-ref-val! drag-state* :idle)
|
||||
(dom/remove-class! (dom/get-body) "cursor-drag-scrub")))
|
||||
|
||||
props (mf/spread-props props
|
||||
{:value mf/undefined
|
||||
:on-change handle-change
|
||||
:class class
|
||||
:type "text"
|
||||
:ref ref
|
||||
:default-value (fmt/format-number value)
|
||||
:title title
|
||||
:disabled is-disabled
|
||||
:on-key-down handle-key-down
|
||||
:on-blur handle-blur
|
||||
:on-focus handle-focus
|
||||
:on-pointer-down on-scrub-pointer-down
|
||||
:on-pointer-move on-scrub-pointer-move
|
||||
:on-pointer-up on-scrub-pointer-up
|
||||
:on-lost-pointer-capture on-scrub-lost-pointer-capture})]
|
||||
|
||||
(mf/with-effect [value]
|
||||
(when-let [input-node (mf/ref-val ref)]
|
||||
@ -258,4 +320,4 @@
|
||||
(let [key (events/listen node "wheel" handle-mouse-wheel #js {:passive false})]
|
||||
#(events/unlistenByKey key))))
|
||||
|
||||
[:> :input props]))
|
||||
[:> :input props]))
|
||||
@ -11,7 +11,6 @@
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc org-avatar*
|
||||
{::mf/props :obj}
|
||||
[{:keys [org size]}]
|
||||
(let [name (:name org)
|
||||
custom-photo (:custom-photo org)
|
||||
|
||||
@ -1,74 +0,0 @@
|
||||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; Copyright (c) KALEIDOS INC Sucursal en España SL
|
||||
|
||||
(ns app.main.ui.components.tab-container
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.data.macros :as dm]
|
||||
[app.main.ui.icons :as deprecated-icon]
|
||||
[app.util.array :as array]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :refer [tr]]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(set! *warn-on-infer* false)
|
||||
|
||||
(mf/defc tab-element
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [children]}]
|
||||
children)
|
||||
|
||||
(mf/defc tab-container
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [children selected on-change-tab collapsable handle-collapse header-class content-class]}]
|
||||
(let [children (-> (array/normalize-to-array children)
|
||||
(array/without-nils))
|
||||
|
||||
selected* (mf/use-state #(or selected (-> children first .-props .-id)))
|
||||
selected (or selected @selected*)
|
||||
|
||||
on-click (mf/use-fn
|
||||
(mf/deps on-change-tab)
|
||||
(fn [event]
|
||||
(let [id (-> event
|
||||
(dom/get-current-target)
|
||||
(dom/get-data "id")
|
||||
(keyword))]
|
||||
(reset! selected* id)
|
||||
(when (fn? on-change-tab)
|
||||
(on-change-tab id)))))]
|
||||
|
||||
[:section {:class (stl/css :tab-container)}
|
||||
[:header {:class (dm/str header-class " " (stl/css :tab-container-tabs))}
|
||||
(when ^boolean collapsable
|
||||
[:button
|
||||
{:on-click handle-collapse
|
||||
:class (stl/css :collapse-sidebar)
|
||||
:aria-label (tr "workspace.sidebar.collapse")}
|
||||
deprecated-icon/arrow])
|
||||
[:div {:class (stl/css :tab-container-tab-wrapper)}
|
||||
(for [tab children]
|
||||
(let [props (.-props tab)
|
||||
id (.-id props)
|
||||
title (.-title props)
|
||||
sid (d/name id)
|
||||
tooltip (if (string? title) title nil)]
|
||||
[:div {:key (str/concat "tab-" sid)
|
||||
:title tooltip
|
||||
:data-id sid
|
||||
:data-testid sid
|
||||
:on-click on-click
|
||||
:class (stl/css-case
|
||||
:tab-container-tab-title true
|
||||
:current (= selected id))}
|
||||
[:span {:class (stl/css :content)}
|
||||
title]]))]]
|
||||
|
||||
[:div {:class (dm/str content-class " " (stl/css :tab-container-content))}
|
||||
(d/seek #(= selected (-> % .-props .-id))
|
||||
children)]]))
|
||||
@ -1,127 +0,0 @@
|
||||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC Sucursal en España SL
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
|
||||
.tab-container {
|
||||
display: grid;
|
||||
grid-template-rows: deprecated.$s-32 1fr;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tab-container-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: deprecated.$s-2;
|
||||
border-radius: deprecated.$br-8;
|
||||
background: var(--tabs-background-color);
|
||||
cursor: pointer;
|
||||
font-size: deprecated.$fs-12;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tab-container-tab-wrapper {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tab-container-tab-title {
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 deprecated.$s-8;
|
||||
margin: 0;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: transparent;
|
||||
color: var(--tab-foreground-color);
|
||||
border: deprecated.$s-2 solid var(--tab-border-color);
|
||||
min-width: 0;
|
||||
|
||||
svg {
|
||||
@extend %button-icon;
|
||||
|
||||
stroke: var(--tab-foreground-color);
|
||||
}
|
||||
|
||||
.content {
|
||||
@include deprecated.headline-small-typography;
|
||||
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&.current,
|
||||
&.current:hover {
|
||||
background: var(--tab-background-color-selected);
|
||||
border-color: var(--tab-border-color-selected);
|
||||
color: var(--tab-foreground-color-selected);
|
||||
|
||||
svg {
|
||||
stroke: var(--tab-foreground-color-selected);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--tab-foreground-color-hover);
|
||||
|
||||
svg {
|
||||
stroke: var(--tab-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-sidebar {
|
||||
@include deprecated.flex-center;
|
||||
@include deprecated.button-style;
|
||||
|
||||
height: 100%;
|
||||
width: deprecated.$s-24;
|
||||
min-width: deprecated.$s-24;
|
||||
padding: 0 deprecated.$s-6;
|
||||
border-radius: deprecated.$br-5;
|
||||
|
||||
svg {
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-16;
|
||||
width: deprecated.$s-16;
|
||||
stroke: var(--icon-foreground);
|
||||
transform: rotate(180deg);
|
||||
fill: none;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
stroke: var(--icon-foreground-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
svg {
|
||||
transform: rotate(0deg);
|
||||
padding: 0 0 0 deprecated.$s-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-container-content {
|
||||
overflow: hidden auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// Firefox doesn't respect scrollbar-gutter
|
||||
@supports (-moz-appearance: none) {
|
||||
.tab-container-content {
|
||||
padding-right: deprecated.$s-8;
|
||||
}
|
||||
}
|
||||
@ -72,9 +72,8 @@
|
||||
(def ^:private group-icon
|
||||
(deprecated-icon/icon-xref :group (stl/css :group-icon)))
|
||||
|
||||
(mf/defc header
|
||||
{::mf/wrap [mf/memo]
|
||||
::mf/props :obj}
|
||||
(mf/defc header*
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [section team profile]}]
|
||||
(let [on-nav-members (mf/use-fn #(st/emit! (dcm/go-to-dashboard-members)))
|
||||
on-nav-settings (mf/use-fn #(st/emit! (dcm/go-to-dashboard-settings)))
|
||||
@ -340,8 +339,7 @@
|
||||
;; MEMBERS SECTION
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(mf/defc member-info
|
||||
{::mf/props :obj}
|
||||
(mf/defc member-info*
|
||||
[{:keys [member profile]}]
|
||||
(let [is-you? (= (:id profile) (:id member))]
|
||||
[:*
|
||||
@ -553,7 +551,7 @@
|
||||
|
||||
[:div {:class (stl/css :table-row)}
|
||||
[:div {:class (stl/css :table-field :field-name)}
|
||||
[:& member-info {:member member :profile profile}]]
|
||||
[:> member-info* {:member member :profile profile}]]
|
||||
|
||||
[:div {:class (stl/css :table-field :field-roles)}
|
||||
[:> rol-info* {:member member
|
||||
@ -623,9 +621,9 @@
|
||||
(st/emit! (dtm/fetch-members)))
|
||||
|
||||
[:*
|
||||
[:& header {:section :dashboard-team-members
|
||||
:team team
|
||||
:profile profile}]
|
||||
[:> header* {:section :dashboard-team-members
|
||||
:team team
|
||||
:profile profile}]
|
||||
[:section {:class (stl/css :dashboard-container :dashboard-team-members)}
|
||||
|
||||
[:> team-members*
|
||||
@ -1199,9 +1197,9 @@
|
||||
(st/emit! (dtm/fetch-invitations)))
|
||||
|
||||
[:*
|
||||
[:& header {:section :dashboard-team-invitations
|
||||
:team team
|
||||
:profile profile}]
|
||||
[:> header* {:section :dashboard-team-invitations
|
||||
:team team
|
||||
:profile profile}]
|
||||
[:section {:class (stl/css :dashboard-team-invitations)}
|
||||
|
||||
[:> invitation-section* {:team team :profile profile}]
|
||||
@ -1479,7 +1477,7 @@
|
||||
(st/emit! (dtm/fetch-webhooks)))
|
||||
|
||||
[:*
|
||||
[:& header {:team team :section :dashboard-team-webhooks}]
|
||||
[:> header* {:team team :section :dashboard-team-webhooks}]
|
||||
[:section {:class (stl/css :dashboard-container :dashboard-team-webhooks)}
|
||||
[:*
|
||||
[:> webhooks-hero* {}]
|
||||
@ -1586,7 +1584,7 @@
|
||||
(dtm/fetch-stats)))
|
||||
|
||||
[:*
|
||||
[:& header {:section :dashboard-team-settings :team team}]
|
||||
[:> header* {:section :dashboard-team-settings :team team}]
|
||||
[:section {:class (stl/css :dashboard-team-settings)}
|
||||
[:div {:class (stl/css :settings-container)}
|
||||
[:div {:class (stl/css :block :info-block)}
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
|
||||
(mf/defc tab-nav*
|
||||
{::mf/private true
|
||||
::mf/memo true}
|
||||
::mf/wrap [mf/memo]}
|
||||
[{:keys [ref tabs selected on-click button-position action-button] :rest props}]
|
||||
(let [nav-class
|
||||
(stl/css-case :tab-nav true
|
||||
|
||||
@ -22,14 +22,10 @@
|
||||
;; Context to store a re-mapping of the ids
|
||||
(def svg-ids-ctx (mf/create-context nil))
|
||||
|
||||
(mf/defc svg-root
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(mf/defc svg-root*
|
||||
[{:keys [shape children]}]
|
||||
|
||||
(let [shape (unchecked-get props "shape")
|
||||
children (unchecked-get props "children")
|
||||
|
||||
x (dm/get-prop shape :x)
|
||||
(let [x (dm/get-prop shape :x)
|
||||
y (dm/get-prop shape :y)
|
||||
w (dm/get-prop shape :width)
|
||||
h (dm/get-prop shape :height)
|
||||
@ -53,13 +49,9 @@
|
||||
[:g.svg-raw {:transform (gsh/transform-str shape)}
|
||||
[:> "svg" props children]]]))
|
||||
|
||||
(mf/defc svg-element
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [shape (unchecked-get props "shape")
|
||||
children (unchecked-get props "children")
|
||||
|
||||
ids-mapping (mf/use-ctx svg-ids-ctx)
|
||||
(mf/defc svg-element*
|
||||
[{:keys [shape children]}]
|
||||
(let [ids-mapping (mf/use-ctx svg-ids-ctx)
|
||||
render-id (mf/use-ctx muc/render-id)
|
||||
|
||||
tag (-> shape :content :tag)
|
||||
@ -119,13 +111,13 @@
|
||||
[:style style-content]
|
||||
|
||||
^boolean svg-root?
|
||||
[:& svg-root {:shape shape}
|
||||
[:> svg-root* {:shape shape}
|
||||
(for [item childs]
|
||||
[:& shape-wrapper {:shape item :key (dm/str (:id item))}])]
|
||||
|
||||
(and ^boolean svg-tag?
|
||||
^boolean valid-tag?)
|
||||
[:& svg-element {:shape shape}
|
||||
[:> svg-element* {:shape shape}
|
||||
(for [item childs]
|
||||
[:& shape-wrapper {:shape item :key (dm/str (:id item))}])]
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
[app.common.types.color :as cc]
|
||||
[app.common.types.fills :as types.fills]
|
||||
[app.main.features :as features]
|
||||
[app.main.ui.components.numeric-input :refer [numeric-input*]]
|
||||
[app.main.ui.components.numeric-input :as deprecated-input]
|
||||
[app.main.ui.components.reorder-handler :refer [reorder-handler*]]
|
||||
[app.main.ui.components.select :refer [select]]
|
||||
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
|
||||
@ -147,7 +147,7 @@
|
||||
|
||||
[:div {:class (stl/css :offset-input-wrapper)}
|
||||
[:span {:class (stl/css :icon-text)} "%"]
|
||||
[:> numeric-input*
|
||||
[:> deprecated-input/numeric-input*
|
||||
{:value (-> offset offset->string)
|
||||
:on-change handle-change-offset
|
||||
:default 100
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.numeric-input :refer [numeric-input*]]
|
||||
[app.main.ui.components.numeric-input :as deprecated-input]
|
||||
[app.main.ui.icons :as deprecated-icon]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
@ -50,14 +50,14 @@
|
||||
[:div {:class (stl/css :input-wrapper)}
|
||||
[:label {:class (stl/css :modal-msg)
|
||||
:for "nudge-small"} (tr "modals.small-nudge")]
|
||||
[:> numeric-input* {:min 0.01
|
||||
:id "nudge-small"
|
||||
:value (:small nudge)
|
||||
:on-change update-small}]]
|
||||
[:> deprecated-input/numeric-input* {:min 0.01
|
||||
:id "nudge-small"
|
||||
:value (:small nudge)
|
||||
:on-change update-small}]]
|
||||
[:div {:class (stl/css :input-wrapper)}
|
||||
[:label {:class (stl/css :modal-msg)
|
||||
:for "nudge-big"} (tr "modals.big-nudge")]
|
||||
[:> numeric-input* {:min 0.01
|
||||
:id "nudge-big"
|
||||
:value (:big nudge)
|
||||
:on-change update-big}]]]]]))
|
||||
[:> deprecated-input/numeric-input* {:min 0.01
|
||||
:id "nudge-big"
|
||||
:value (:big nudge)
|
||||
:on-change update-big}]]]]]))
|
||||
|
||||
@ -248,10 +248,9 @@
|
||||
(get-contrast-color background-color)))
|
||||
(get-contrast-color background-color)))
|
||||
|
||||
(mf/defc text-editor-html
|
||||
(mf/defc text-editor-html*
|
||||
"Text editor (HTML)"
|
||||
{::mf/wrap [mf/memo]
|
||||
::mf/props :obj}
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [shape canvas-ref render-wasm?] :or {render-wasm? false}}]
|
||||
(let [content (:content shape)
|
||||
shape-id (dm/get-prop shape :id)
|
||||
@ -485,7 +484,7 @@
|
||||
|
||||
[:foreignObject {:x x :y y :width width :height height}
|
||||
[:div {:style style}
|
||||
[:& text-editor-html {:shape shape
|
||||
:canvas-ref canvas-ref
|
||||
:render-wasm? render-wasm?
|
||||
:key (dm/str shape-id)}]]]]))
|
||||
[:> text-editor-html* {:shape shape
|
||||
:canvas-ref canvas-ref
|
||||
:render-wasm? render-wasm?
|
||||
:key (dm/str shape-id)}]]]]))
|
||||
|
||||
@ -300,7 +300,7 @@
|
||||
:else
|
||||
"--")
|
||||
:min 0
|
||||
:nillable true
|
||||
:is-nillable true
|
||||
:on-change on-all-radius-change
|
||||
:value (if all-values-equal?
|
||||
(if (nil? (:r1 values))
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.editable-select :refer [editable-select]]
|
||||
[app.main.ui.components.numeric-input :refer [numeric-input*]]
|
||||
[app.main.ui.components.numeric-input :as deprecated-input]
|
||||
[app.main.ui.components.select :refer [select]]
|
||||
[app.main.ui.components.title-bar :refer [title-bar*]]
|
||||
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
|
||||
@ -163,11 +163,11 @@
|
||||
(if (= type :square)
|
||||
[:div {:class (stl/css :grid-size)
|
||||
:title (tr "workspace.options.size")}
|
||||
[:> numeric-input* {:min 0.01
|
||||
:value (or (:size params) "")
|
||||
:no-validate true
|
||||
:className (stl/css :numeric-input)
|
||||
:on-change (handle-change :params :size)}]]
|
||||
[:> deprecated-input/numeric-input* {:min 0.01
|
||||
:value (or (:size params) "")
|
||||
:no-validate true
|
||||
:class (stl/css :numeric-input)
|
||||
:on-change (handle-change :params :size)}]]
|
||||
|
||||
[:div {:class (stl/css :editable-select-wrapper)}
|
||||
[:& editable-select {:value (:size params)
|
||||
@ -256,33 +256,33 @@
|
||||
(if (= :row type)
|
||||
"H"
|
||||
"W")]
|
||||
[:> numeric-input* {:placeholder "Auto"
|
||||
:on-change handle-change-item-length
|
||||
:nillable true
|
||||
:className (stl/css :numeric-input)
|
||||
:value (or (:item-length params) "")}]]
|
||||
[:> deprecated-input/numeric-input* {:placeholder "Auto"
|
||||
:on-change handle-change-item-length
|
||||
:is-nillable true
|
||||
:class (stl/css :numeric-input)
|
||||
:value (or (:item-length params) "")}]]
|
||||
|
||||
[:div {:class (stl/css :gutter)
|
||||
:title (tr "workspace.options.grid.params.gutter")}
|
||||
[:span {:class (stl/css-case :icon true
|
||||
:rotated (= type :row))}
|
||||
deprecated-icon/gap-horizontal]
|
||||
[:> numeric-input* {:placeholder "0"
|
||||
:on-change (handle-change :params :gutter)
|
||||
:nillable true
|
||||
:className (stl/css :numeric-input)
|
||||
:value (or (:gutter params) 0)}]]
|
||||
[:> deprecated-input/numeric-input* {:placeholder "0"
|
||||
:on-change (handle-change :params :gutter)
|
||||
:is-nillable true
|
||||
:class (stl/css :numeric-input)
|
||||
:value (or (:gutter params) 0)}]]
|
||||
|
||||
[:div {:class (stl/css :margin)
|
||||
:title (tr "workspace.options.grid.params.margin")}
|
||||
[:span {:class (stl/css-case :icon true
|
||||
:rotated (= type :column))}
|
||||
deprecated-icon/grid-margin]
|
||||
[:> numeric-input* {:placeholder "0"
|
||||
:on-change (handle-change :params :margin)
|
||||
:nillable true
|
||||
:className (stl/css :numeric-input)
|
||||
:value (or (:margin params) 0)}]]
|
||||
[:> deprecated-input/numeric-input* {:placeholder "0"
|
||||
:on-change (handle-change :params :margin)
|
||||
:is-nillable true
|
||||
:class (stl/css :numeric-input)
|
||||
:value (or (:margin params) 0)}]]
|
||||
|
||||
[:button {:class (stl/css-case :show-more-options true
|
||||
:selected show-more-options?)
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
[app.main.data.workspace.grid-layout.editor :as dwge]
|
||||
[app.main.data.workspace.shape-layout :as dwsl]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.numeric-input :refer [numeric-input*]]
|
||||
[app.main.ui.components.numeric-input :as deprecated-input]
|
||||
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
|
||||
[app.main.ui.components.title-bar :refer [title-bar*]]
|
||||
[app.main.ui.ds.foundations.assets.icon :as i]
|
||||
@ -225,23 +225,23 @@
|
||||
[:div {:class (stl/css :grid-coord-group)}
|
||||
[:span {:class (stl/css :icon)} deprecated-icon/flex-vertical]
|
||||
[:div {:class (stl/css :coord-input)}
|
||||
[:> numeric-input*
|
||||
[:> deprecated-input/numeric-input*
|
||||
{:placeholder "--"
|
||||
:title "Column"
|
||||
:on-click #(dom/select-target %)
|
||||
:on-change (partial on-grid-coordinates :all :column)
|
||||
:integer true
|
||||
:is-integer true
|
||||
:value column}]]]
|
||||
|
||||
[:div {:class (stl/css :grid-coord-group)}
|
||||
[:span {:class (stl/css :icon)} deprecated-icon/flex-horizontal]
|
||||
[:div {:class (stl/css :coord-input)}
|
||||
[:> numeric-input*
|
||||
[:> deprecated-input/numeric-input*
|
||||
{:placeholder "--"
|
||||
:title "Row"
|
||||
:on-click #(dom/select-target %)
|
||||
:on-change (partial on-grid-coordinates :all :row)
|
||||
:integer true
|
||||
:is-integer true
|
||||
:value row}]]]])
|
||||
|
||||
(when (and (not multiple?) (or (= :manual cell-mode) (= :area cell-mode)))
|
||||
@ -249,35 +249,35 @@
|
||||
[:div {:class (stl/css :grid-coord-group)}
|
||||
[:span {:class (stl/css :icon)} deprecated-icon/flex-vertical]
|
||||
[:div {:class (stl/css :coord-input)}
|
||||
[:> numeric-input*
|
||||
[:> deprecated-input/numeric-input*
|
||||
{:placeholder "--"
|
||||
:on-pointer-down #(dom/select-target %)
|
||||
:on-change (partial on-grid-coordinates :start :column)
|
||||
:integer true
|
||||
:is-integer true
|
||||
:value column}]]
|
||||
[:div {:class (stl/css :coord-input)}
|
||||
[:> numeric-input*
|
||||
[:> deprecated-input/numeric-input*
|
||||
{:placeholder "--"
|
||||
:on-pointer-down #(dom/select-target %)
|
||||
:on-change (partial on-grid-coordinates :end :column)
|
||||
:integer true
|
||||
:is-integer true
|
||||
:value column-end}]]]
|
||||
|
||||
[:div {:class (stl/css :grid-coord-group)}
|
||||
[:span {:class (stl/css :icon)} deprecated-icon/flex-horizontal]
|
||||
[:div {:class (stl/css :coord-input :double)}
|
||||
[:> numeric-input*
|
||||
[:> deprecated-input/numeric-input*
|
||||
{:placeholder "--"
|
||||
:on-pointer-down #(dom/select-target %)
|
||||
:on-change (partial on-grid-coordinates :start :row)
|
||||
:integer true
|
||||
:is-integer true
|
||||
:value row}]]
|
||||
[:div {:class (stl/css :coord-input)}
|
||||
[:> numeric-input*
|
||||
[:> deprecated-input/numeric-input*
|
||||
{:placeholder "--"
|
||||
:on-pointer-down #(dom/select-target %)
|
||||
:on-change (partial on-grid-coordinates :end :row)
|
||||
:integer true
|
||||
:is-integer true
|
||||
:value row-end}]]]])
|
||||
|
||||
[:div {:class (stl/css :row)}
|
||||
|
||||
@ -302,7 +302,7 @@
|
||||
:on-change handle-opacity-change
|
||||
:min 0
|
||||
:max 100
|
||||
:className (stl/css :numeric-input)}]]
|
||||
:class (stl/css :numeric-input)}]]
|
||||
|
||||
[:div {:class (stl/css :actions)}
|
||||
(cond
|
||||
|
||||
@ -401,7 +401,7 @@
|
||||
:on-change on-p1-change
|
||||
:on-focus on-focus-p1
|
||||
:on-blur on-padding-blur
|
||||
:nillable true
|
||||
:is-nillable true
|
||||
:min 0
|
||||
:value p1}]])
|
||||
|
||||
@ -431,14 +431,14 @@
|
||||
[:span {:class (stl/css :icon)}
|
||||
deprecated-icon/padding-left-right]
|
||||
[:> deprecated-input/numeric-input*
|
||||
{:className (stl/css :numeric-input)
|
||||
{:class (stl/css :numeric-input)
|
||||
:placeholder (tr "settings.multiple")
|
||||
:aria-label (tr "workspace.layout-grid.editor.padding.horizontal")
|
||||
:on-change on-p2-change
|
||||
:on-focus on-focus-p2
|
||||
:on-blur on-padding-blur
|
||||
:min 0
|
||||
:nillable true
|
||||
:is-nillable true
|
||||
:value p2}]])]))
|
||||
|
||||
(mf/defc multiple-padding-selection*
|
||||
@ -771,10 +771,10 @@
|
||||
:on-focus on-focus-row-gap
|
||||
:on-change on-row-gap-change
|
||||
:on-blur on-gap-blur
|
||||
:nillable true
|
||||
:is-nillable true
|
||||
:min 0
|
||||
:value (:row-gap value)
|
||||
:disabled row-gap-disabled?}]])
|
||||
:is-disabled row-gap-disabled?}]])
|
||||
|
||||
(if token-numeric-inputs
|
||||
[:> numeric-input-wrapper*
|
||||
@ -810,7 +810,7 @@
|
||||
:on-focus on-focus-column-gap
|
||||
:on-change on-column-gap-change
|
||||
:on-blur on-gap-blur
|
||||
:nillable true
|
||||
:is-nillable true
|
||||
:min 0
|
||||
:value (:column-gap value)
|
||||
:disabled col-gap-disabled?}]])]))
|
||||
@ -998,7 +998,7 @@
|
||||
:on-change #(set-column-value type index %)
|
||||
:placeholder "--"
|
||||
:min 0
|
||||
:disabled (= :auto (:type column))}]]
|
||||
:is-disabled (= :auto (:type column))}]]
|
||||
|
||||
[:div {:class (stl/css :track-info-unit)}
|
||||
[:& select {:class (stl/css :track-info-unit-selector)
|
||||
|
||||
@ -163,7 +163,7 @@
|
||||
:on-focus on-focus-m1
|
||||
:on-change on-m1-change
|
||||
:on-blur on-blur
|
||||
:nillable true
|
||||
:is-nillable true
|
||||
:value m1}]])
|
||||
|
||||
(if token-numeric-inputs
|
||||
@ -194,7 +194,7 @@
|
||||
:on-focus on-focus-m2
|
||||
:on-change on-m2-change
|
||||
:on-blur on-blur
|
||||
:nillable true
|
||||
:is-nillable true
|
||||
:value m2}]])]))
|
||||
|
||||
(mf/defc margin-multiple*
|
||||
@ -287,7 +287,7 @@
|
||||
:on-focus on-focus-m1
|
||||
:on-change on-m1-change
|
||||
:on-blur on-blur
|
||||
:nillable true
|
||||
:is-nillable true
|
||||
:value m1}]])
|
||||
(if token-numeric-inputs
|
||||
[:> numeric-input-wrapper*
|
||||
@ -316,7 +316,7 @@
|
||||
:on-focus on-focus-m2
|
||||
:on-change on-m2-change
|
||||
:on-blur on-blur
|
||||
:nillable true
|
||||
:is-nillable true
|
||||
:value m2}]])
|
||||
|
||||
(if token-numeric-inputs
|
||||
@ -346,7 +346,7 @@
|
||||
:on-focus on-focus-m3
|
||||
:on-change on-m3-change
|
||||
:on-blur on-blur
|
||||
:nillable true
|
||||
:is-nillable true
|
||||
:value m3}]])
|
||||
|
||||
(if token-numeric-inputs
|
||||
@ -375,7 +375,7 @@
|
||||
:on-focus on-focus-m4
|
||||
:on-change on-m4-change
|
||||
:on-blur on-blur
|
||||
:nillable true
|
||||
:is-nillable true
|
||||
:value m4}]])]))
|
||||
|
||||
(mf/defc margin-section*
|
||||
@ -619,7 +619,7 @@
|
||||
:on-focus dom/select-target
|
||||
:on-change on-layout-item-min-w-change
|
||||
:value (get values :layout-item-min-w)
|
||||
:nillable true}]])
|
||||
:is-nillable true}]])
|
||||
|
||||
(if token-numeric-inputs
|
||||
[:> numeric-input-wrapper*
|
||||
@ -649,7 +649,7 @@
|
||||
:on-focus dom/select-target
|
||||
:on-change on-layout-item-max-w-change
|
||||
:value (get values :layout-item-max-w)
|
||||
:nillable true}]])])
|
||||
:is-nillable true}]])])
|
||||
|
||||
(when (= v-sizing :fill)
|
||||
[:div {:class (stl/css :vertical-fill)}
|
||||
@ -681,7 +681,7 @@
|
||||
:on-focus dom/select-target
|
||||
:on-change on-layout-item-min-h-change
|
||||
:value (get values :layout-item-min-h)
|
||||
:nillable true}]])
|
||||
:is-nillable true}]])
|
||||
|
||||
(if token-numeric-inputs
|
||||
[:> numeric-input-wrapper*
|
||||
@ -712,7 +712,7 @@
|
||||
:on-focus dom/select-target
|
||||
:on-change on-layout-item-max-h-change
|
||||
:value (get values :layout-item-max-h)
|
||||
:nillable true}]])])]))
|
||||
:is-nillable true}]])])]))
|
||||
|
||||
(defn- check-layout-item-menu-props
|
||||
[old-props new-props]
|
||||
@ -912,7 +912,7 @@
|
||||
:placeholder "--"
|
||||
:on-focus #(dom/select-target %)
|
||||
:on-change #(on-change-z-index %)
|
||||
:nillable true
|
||||
:is-nillable true
|
||||
:value (:layout-item-z-index values)}]]])
|
||||
|
||||
[:div {:class (stl/css :behavior-row)}
|
||||
|
||||
@ -571,7 +571,7 @@
|
||||
:no-validate true
|
||||
:placeholder (if (= :multiple (:width values)) (tr "settings.multiple") "--")
|
||||
:on-change on-width-change
|
||||
:disabled disabled-width-sizing?
|
||||
:is-disabled disabled-width-sizing?
|
||||
:class (stl/css :numeric-input)
|
||||
:value (:width values)}]]
|
||||
[:div {:class (stl/css-case :height true
|
||||
@ -582,7 +582,7 @@
|
||||
:no-validate true
|
||||
:placeholder (if (= :multiple (:height values)) (tr "settings.multiple") "--")
|
||||
:on-change on-height-change
|
||||
:disabled disabled-height-sizing?
|
||||
:is-disabled disabled-height-sizing?
|
||||
:class (stl/css :numeric-input)
|
||||
:value (:height values)}]]])
|
||||
|
||||
@ -632,7 +632,7 @@
|
||||
[:> deprecated-input/numeric-input* {:no-validate true
|
||||
:placeholder (if (= :multiple (:x values)) (tr "settings.multiple") "--")
|
||||
:on-change on-pos-x-change
|
||||
:disabled disabled-position?
|
||||
:is-disabled disabled-position?
|
||||
:class (stl/css :numeric-input)
|
||||
:value (:x values)}]]
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.editable-select :refer [editable-select]]
|
||||
[app.main.ui.components.numeric-input :refer [numeric-input*]]
|
||||
[app.main.ui.components.numeric-input :as deprecated-input]
|
||||
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
|
||||
[app.main.ui.components.search-bar :refer [search-bar*]]
|
||||
[app.main.ui.components.select :refer [select]]
|
||||
@ -396,7 +396,7 @@
|
||||
[:span {:class (stl/css :icon)
|
||||
:alt (tr "workspace.options.text-options.line-height")}
|
||||
deprecated-icon/text-lineheight]
|
||||
[:> numeric-input*
|
||||
[:> deprecated-input/numeric-input*
|
||||
{:min -200
|
||||
:max 200
|
||||
:step 0.1
|
||||
@ -405,7 +405,7 @@
|
||||
:aria-label (tr "inspect.attributes.typography.line-height")
|
||||
:value (attr->string line-height)
|
||||
:placeholder (if (= :multiple line-height) (tr "settings.multiple") "--")
|
||||
:nillable (= :multiple line-height)
|
||||
:is-nillable (= :multiple line-height)
|
||||
:on-change #(handle-change % :line-height)
|
||||
:on-blur on-blur}]]
|
||||
|
||||
@ -415,7 +415,7 @@
|
||||
{:class (stl/css :icon)
|
||||
:alt (tr "workspace.options.text-options.letter-spacing")}
|
||||
deprecated-icon/text-letterspacing]
|
||||
[:> numeric-input*
|
||||
[:> deprecated-input/numeric-input*
|
||||
{:min -200
|
||||
:max 200
|
||||
:step 0.1
|
||||
@ -425,7 +425,7 @@
|
||||
:value (attr->string letter-spacing)
|
||||
:placeholder (if (= :multiple letter-spacing) (tr "settings.multiple") "--")
|
||||
:on-change #(handle-change % :letter-spacing)
|
||||
:nillable (= :multiple letter-spacing)
|
||||
:is-nillable (= :multiple letter-spacing)
|
||||
:on-blur on-blur}]]]))
|
||||
|
||||
(mf/defc text-transform-options*
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.color-input :refer [color-input*]]
|
||||
[app.main.ui.components.numeric-input :refer [numeric-input*]]
|
||||
[app.main.ui.components.numeric-input :as deprecated-input]
|
||||
[app.main.ui.components.reorder-handler :refer [reorder-handler*]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
|
||||
@ -54,17 +54,17 @@
|
||||
(when opacity
|
||||
[:div {:class (stl/css :opacity-element-wrapper)}
|
||||
[:span {:class (stl/css :icon-text)} "%"]
|
||||
[:> numeric-input* {:value (-> color :opacity opacity->string)
|
||||
:class (stl/css :opacity-input)
|
||||
:placeholder "--"
|
||||
:select-on-focus select-on-focus
|
||||
:on-focus on-focus
|
||||
:on-blur on-blur
|
||||
:on-change on-opacity-change
|
||||
:data-testid "opacity-input"
|
||||
:default 100
|
||||
:min 0
|
||||
:max 100}]])])
|
||||
[:> deprecated-input/numeric-input* {:value (-> color :opacity opacity->string)
|
||||
:class (stl/css :opacity-input)
|
||||
:placeholder "--"
|
||||
:select-on-focus select-on-focus
|
||||
:on-focus on-focus
|
||||
:on-blur on-blur
|
||||
:on-change on-opacity-change
|
||||
:data-testid "opacity-input"
|
||||
:default 100
|
||||
:min 0
|
||||
:max 100}]])])
|
||||
|
||||
(mf/defc color-token-row*
|
||||
{::mf/private true}
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.data.workspace.undo :as dwu]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.numeric-input :refer [numeric-input*]]
|
||||
[app.main.ui.components.numeric-input :as deprecated-input]
|
||||
[app.main.ui.components.reorder-handler :refer [reorder-handler*]]
|
||||
[app.main.ui.components.select :refer [select]]
|
||||
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
|
||||
@ -171,39 +171,39 @@
|
||||
:title (tr "workspace.options.shadow-options.offsetx")}
|
||||
[:span {:class (stl/css :shadow-advanced-label)}
|
||||
"X"]
|
||||
[:> numeric-input* {:no-validate true
|
||||
:placeholder "--"
|
||||
:on-change on-update-offset-x
|
||||
:value (:offset-x shadow)}]]
|
||||
[:> deprecated-input/numeric-input* {:no-validate true
|
||||
:placeholder "--"
|
||||
:on-change on-update-offset-x
|
||||
:value (:offset-x shadow)}]]
|
||||
|
||||
[:div {:class (stl/css :shadow-advanced-blur)
|
||||
:title (tr "workspace.options.shadow-options.blur")}
|
||||
[:span {:class (stl/css :shadow-advanced-label)}
|
||||
(tr "workspace.options.shadow-options.blur")]
|
||||
[:> numeric-input* {:no-validate true
|
||||
:placeholder "--"
|
||||
:on-change on-update-blur
|
||||
:min 0
|
||||
:value (:blur shadow)}]]
|
||||
[:> deprecated-input/numeric-input* {:no-validate true
|
||||
:placeholder "--"
|
||||
:on-change on-update-blur
|
||||
:min 0
|
||||
:value (:blur shadow)}]]
|
||||
|
||||
[:div {:class (stl/css :shadow-advanced-spread)
|
||||
:title (tr "workspace.options.shadow-options.spread")}
|
||||
[:span {:class (stl/css :shadow-advanced-label)}
|
||||
(tr "workspace.options.shadow-options.spread")]
|
||||
[:> numeric-input* {:no-validate true
|
||||
:placeholder "--"
|
||||
:on-change on-update-spread
|
||||
:value (:spread shadow)}]]]
|
||||
[:> deprecated-input/numeric-input* {:no-validate true
|
||||
:placeholder "--"
|
||||
:on-change on-update-spread
|
||||
:value (:spread shadow)}]]]
|
||||
|
||||
[:div {:class (stl/css :shadow-advanced-row)}
|
||||
[:div {:class (stl/css :shadow-advanced-offset-y)
|
||||
:title (tr "workspace.options.shadow-options.offsety")}
|
||||
[:span {:class (stl/css :shadow-advanced-label)}
|
||||
"Y"]
|
||||
[:> numeric-input* {:no-validate true
|
||||
:placeholder "--"
|
||||
:on-change on-update-offset-y
|
||||
:value (:offset-y shadow)}]]
|
||||
[:> deprecated-input/numeric-input* {:no-validate true
|
||||
:placeholder "--"
|
||||
:on-change on-update-offset-y
|
||||
:value (:offset-y shadow)}]]
|
||||
|
||||
[:> color-row* {:class (stl/css :shadow-advanced-color)
|
||||
:color (:color shadow)
|
||||
|
||||
@ -23,9 +23,8 @@
|
||||
"11.78,1.82,11.05L11.58,1.30ZL11.58,1.30ZM1.37,12.15L2.90,"
|
||||
"13.68L1.67,13.89L1.165,13.39L1.37,12.15ZL1.37,12.15Z"))
|
||||
|
||||
(mf/defc session-cursor
|
||||
{::mf/props :obj
|
||||
::mf/memo true}
|
||||
(mf/defc session-cursor*
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [session profile zoom]}]
|
||||
(let [point (:point session)
|
||||
bg-color (:color session)
|
||||
@ -70,7 +69,7 @@
|
||||
(fn [] (rx/dispose! sem))))
|
||||
|
||||
(for [session sessions]
|
||||
[:& session-cursor
|
||||
[:> session-cursor*
|
||||
{:session session
|
||||
:zoom zoom
|
||||
:profile (get profiles (:profile-id session))
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user