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

♻️ remove new css from other elements

Browse source
This commit is contained in:
Eva 2024-01-04 15:37:24 +01:00 • committed by Andrey Antukh
parent 480251c41c
commit c14fe661df
19 changed files with 702 additions and 1539 deletions
Download patch file Download diff file Expand all files Collapse all files

1
common/src/app/common/features.cljc
View file

@ -93,7 +93,6 @@
[flag] [flag]
(case flag (case flag
:feature-components-v2 "components/v2" :feature-components-v2 "components/v2"
:feature-new-css-system "styles/v2"
:feature-styles-v2 "styles/v2" :feature-styles-v2 "styles/v2"
:feature-grid-layout "layout/grid" :feature-grid-layout "layout/grid"
:feature-fdata-objects-map "fdata/objects-map" :feature-fdata-objects-map "fdata/objects-map"

7
frontend/src/app/main/ui.cljs
View file

@ -7,7 +7,6 @@
(ns app.main.ui (ns app.main.ui
(:require (:require
[app.config :as cf] [app.config :as cf]
[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.context :as ctx] [app.main.ui.context :as ctx]
@ -58,10 +57,8 @@
(mf/defc main-page (mf/defc main-page
{::mf/wrap [#(mf/catch % {:fallback on-main-error})]} {::mf/wrap [#(mf/catch % {:fallback on-main-error})]}
[{:keys [route profile]}] [{:keys [route profile]}]
(let [{:keys [data params]} route (let [{:keys [data params]} route]
new-css-system (features/use-feature "styles/v2")]
[:& (mf/provider ctx/current-route) {:value route} [:& (mf/provider ctx/current-route) {:value route}
[:& (mf/provider ctx/new-css-system) {:value new-css-system}
(case (:name data) (case (:name data)
(:auth-login (:auth-login
:auth-register :auth-register
@ -171,7 +168,7 @@
:frame-preview :frame-preview
[:& frame-preview/frame-preview] [:& frame-preview/frame-preview]
nil)]])) nil)]))
(mf/defc app (mf/defc app
[] []

35
frontend/src/app/main/ui/components/copy_button.cljs
View file

@ -8,7 +8,6 @@
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.timers :as timers] [app.util.timers :as timers]
[app.util.webapi :as wapi] [app.util.webapi :as wapi]
@ -16,8 +15,7 @@
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(mf/defc copy-button [{:keys [data on-copied children class]}] (mf/defc copy-button [{:keys [data on-copied children class]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [just-copied (mf/use-state false)]
just-copied (mf/use-state false)]
(mf/use-effect (mf/use-effect
(mf/deps @just-copied) (mf/deps @just-copied)
(fn [] (fn []
@ -27,24 +25,15 @@
(let [sub (timers/schedule 1000 #(reset! just-copied false))] (let [sub (timers/schedule 1000 #(reset! just-copied false))]
;; On unmount we dispose the timer ;; On unmount we dispose the timer
#(rx/-dispose sub))))) #(rx/-dispose sub)))))
(if new-css-system [:button {:class (dm/str class " " (stl/css-case :copy-button true
[:button {:class (dm/str class " " (stl/css-case :copy-button true :copy-wrapper (some? children)))
:copy-wrapper (some? children))) :on-click #(when-not @just-copied
:on-click #(when-not @just-copied (reset! just-copied true)
(reset! just-copied true) (wapi/write-to-clipboard (if (fn? data) (data) data)))}
(wapi/write-to-clipboard (if (fn? data) (data) data)))}
(when children (when children
children) children)
[:span {:class (stl/css :icon-btn)} [:span {:class (stl/css :icon-btn)}
(if @just-copied (if @just-copied
i/tick-refactor i/tick-refactor
i/clipboard-refactor)]] i/clipboard-refactor)]]))
[:button.copy-button
{:on-click #(when-not @just-copied
(reset! just-copied true)
(wapi/write-to-clipboard (if (fn? data) (data) data)))}
(if @just-copied
i/tick
i/copy)])))

36
frontend/src/app/main/ui/components/editable_label.cljs
View file

@ -5,8 +5,9 @@
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.ui.components.editable-label (ns app.main.ui.components.editable-label
(:require-macros [app.main.style :as stl])
(:require (:require
[app.main.ui.context :as ctx] [app.common.data.macros :as dm]
[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]
@ -16,16 +17,14 @@
(mf/defc editable-label (mf/defc editable-label
{::mf/wrap-props false} {::mf/wrap-props false}
[props] [props]
(let [display-value (unchecked-get props "display-value") (let [value (unchecked-get props "value")
value (unchecked-get props "value")
on-change (unchecked-get props "on-change") on-change (unchecked-get props "on-change")
on-cancel (unchecked-get props "on-cancel") on-cancel (unchecked-get props "on-cancel")
editing? (unchecked-get props "editing") editing? (unchecked-get props "editing")
dbl-click? (unchecked-get props "disable-dbl-click") dbl-click? (unchecked-get props "disable-dbl-click")
class (unchecked-get props "class") class (unchecked-get props "class")
tooltip (unchecked-get props "tooltip")
new-css-system (mf/use-ctx ctx/new-css-system) final-class (dm/str class " " (stl/css :editable-label))
input-ref (mf/use-ref nil) input-ref (mf/use-ref nil)
internal-editing* (mf/use-state false) internal-editing* (mf/use-state false)
internal-editing? (deref internal-editing*) internal-editing? (deref internal-editing*)
@ -83,20 +82,15 @@
(when (and editing? (not internal-editing?)) (when (and editing? (not internal-editing?))
(start-edition))) (start-edition)))
(if ^boolean internal-editing? [:div {:class final-class}
[:div.editable-label {:class class} [:input
[:input.editable-label-input {:class (stl/css :editable-label-input)
{:ref input-ref :ref input-ref
:default-value value :default-value value
:on-key-up on-key-up :on-key-up on-key-up
:on-blur cancel-edition}] :on-double-click on-dbl-click
:on-blur cancel-edition}]
[:span.editable-label-close {:on-click cancel-edition} [:span {:class (stl/css :editable-label-close)
(if ^boolean new-css-system :on-click cancel-edition}
i/delete-text-refactor i/delete-text-refactor]]))
i/close)]]
[:span.editable-label
{:class class
:title tooltip
:on-double-click on-dbl-click}
display-value])))

20
frontend/src/app/main/ui/components/editable_label.scss
View file

@ -19,3 +19,23 @@
border: $s-1 solid var(--input-border-color-focus); border: $s-1 solid var(--input-border-color-focus);
color: var(--layer-row-foreground-color); color: var(--layer-row-foreground-color);
} }
.editable-label {
display: flex;
&.is-hidden {
display: none;
}
}
.editable-label-close {
cursor: pointer;
svg {
@extend .button-icon;
height: $s-12;
width: $s-12;
stroke: var(--icon-foreground);
margin: 0;
}
}

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

@ -13,7 +13,6 @@
[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.context :as ctx]
[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]
@ -22,8 +21,7 @@
(mf/defc editable-select (mf/defc editable-select
[{:keys [value type options class on-change placeholder on-blur input-class] :as params}] [{:keys [value type options class on-change placeholder on-blur input-class] :as params}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [state* (mf/use-state {:id (uuid/next)
state* (mf/use-state {:id (uuid/next)
:is-open? false :is-open? false
:current-value value :current-value value
:top nil :top nil
@ -32,9 +30,6 @@
state (deref state*) state (deref state*)
is-open? (:is-open? state) is-open? (:is-open? state)
current-value (:current-value state) current-value (:current-value state)
top-value (:top state)
left-value (:left state)
bottom-value (:bottom state)
element-id (:id state) element-id (:id state)
min-val (get params :min) min-val (get params :min)
@ -43,11 +38,6 @@
emit-blur? (mf/use-ref nil) emit-blur? (mf/use-ref nil)
font-size-wrapper-ref (mf/use-ref) font-size-wrapper-ref (mf/use-ref)
open-dropdown
(fn [event]
(dom/stop-propagation event)
(swap! state* assoc :is-open? true))
toggle-dropdown toggle-dropdown
(mf/use-fn (mf/use-fn
(mf/deps state) (mf/deps state)
@ -170,81 +160,43 @@
(mf/set-ref-val! emit-blur? (not is-open?))) (mf/set-ref-val! emit-blur? (not is-open?)))
(if new-css-system [:div {:class (dm/str class " " (stl/css :editable-select))
[:div {:class (dm/str class " " (stl/css :editable-select)) :ref on-node-load}
:ref on-node-load} (if (= type "number")
(if (= type "number") [:> numeric-input* {:value (or (some-> current-value value->label) "")
[:> numeric-input* {:value (or (some-> current-value value->label) "") :className input-class
:className input-class :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 {:value (or (some-> current-value value->label) "")
[:input {:value (or (some-> current-value value->label) "") :class input-class
:class input-class :on-change handle-change-input
:on-change handle-change-input :on-key-down handle-key-down
:on-key-down handle-key-down :on-focus handle-focus
:on-focus handle-focus :on-blur handle-blur
:on-blur handle-blur :placeholder placeholder
:placeholder placeholder :type type}])
:type type}])
[:span {:class (stl/css :dropdown-button) [:span {:class (stl/css :dropdown-button)
:on-click toggle-dropdown} :on-click toggle-dropdown}
i/arrow-refactor] i/arrow-refactor]
[:& dropdown {:show (or is-open? false) [:& dropdown {:show (or is-open? false)
:on-close close-dropdown} :on-close close-dropdown}
[:ul {:class (stl/css :custom-select-dropdown) [:ul {:class (stl/css :custom-select-dropdown)
:ref font-size-wrapper-ref} :ref font-size-wrapper-ref}
(for [[index item] (map-indexed vector options)] (for [[index item] (map-indexed vector options)]
(if (= :separator item) (if (= :separator item)
[:li {:class (stl/css :separator) [:li {:class (stl/css :separator)
:key (dm/str element-id "-" index)}] :key (dm/str element-id "-" index)}]
(let [[value label] (as-key-value item)] (let [[value label] (as-key-value item)]
[:li [:li
{:key (str element-id "-" index) {:key (str element-id "-" index)
:class (stl/css-case :dropdown-element true :class (stl/css-case :dropdown-element true
:is-selected (= (dm/str value) current-value)) :is-selected (= (dm/str value) current-value))
:data-value value :data-value value
:on-click select-item} :on-click select-item}
[:span {:class (stl/css :label)} label] [:span {:class (stl/css :label)} label]
[:span {:class (stl/css :check-icon)} [:span {:class (stl/css :check-icon)}
i/tick-refactor]])))]]] i/tick-refactor]])))]]]))
[:div.editable-select {:class class
:ref on-node-load}
(if (= type "number")
[:> numeric-input* {:value (or (some-> current-value value->label) "")
:on-change set-value
:on-focus handle-focus
:on-blur handle-blur
:placeholder placeholder}]
[:input.input-text {:value (or (some-> current-value value->label) "")
:on-change handle-change-input
:on-key-down handle-key-down
:on-focus handle-focus
:on-blur handle-blur
:placeholder placeholder
:type type}])
[:span.dropdown-button {:on-click open-dropdown} i/arrow-down]
[:& dropdown {:show (or is-open? false)
:on-close close-dropdown}
[:ul.custom-select-dropdown {:style {:position "fixed"
:top top-value
:left left-value
:bottom bottom-value}
:ref font-size-wrapper-ref}
(for [[index item] (map-indexed vector options)]
(if (= :separator item)
[:hr {:key (str element-id "-" index)}]
(let [[value label] (as-key-value item)]
[:li.checked-element
{:key (str element-id "-" index)
:class (when (= (str value) current-value) "is-selected")
:data-value value
:on-click select-item}
[:span.check-icon i/tick]
[:span.checked-element-value label]])))]]])))

361
frontend/src/app/main/ui/components/forms.cljs
View file

@ -10,7 +10,6 @@
[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.select :as cs] [app.main.ui.components.select :as cs]
[app.main.ui.context :as ctx]
[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]
@ -28,9 +27,7 @@
(mf/defc input (mf/defc input
[{:keys [label help-icon disabled form hint trim children data-test on-change-value placeholder show-success?] :as props}] [{:keys [label help-icon disabled form hint trim children data-test on-change-value placeholder show-success?] :as props}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [input-type (get props :type "text")
input-type (get props :type "text")
input-name (get props :name) input-name (get props :name)
more-classes (get props :class) more-classes (get props :class)
auto-focus? (get props :auto-focus? false) auto-focus? (get props :auto-focus? false)
@ -111,98 +108,61 @@
show-valid? (and show-success? touched? (not error)) show-valid? (and show-success? touched? (not error))
show-invalid? (and touched? error)] show-invalid? (and touched? error)]
(if new-css-system [:div {:class (dm/str more-classes " "
[:div {:class (dm/str more-classes " " (stl/css-case
(stl/css-case :input-wrapper true
:input-wrapper true :valid show-valid?
:valid show-valid? :invalid show-invalid?
:invalid show-invalid? :checkbox is-checkbox?
:checkbox is-checkbox? :disabled disabled))}
:disabled disabled))} [:*
[:* (cond
(cond (some? label)
(some? label) [:label {:class (stl/css-case :input-with-label (not is-checkbox?)
[:label {:class (stl/css-case :input-with-label (not is-checkbox?) :input-label is-text?
:input-label is-text? :radio-label is-radio?
:radio-label is-radio? :checkbox-label is-checkbox?)
:checkbox-label is-checkbox?) :tab-index "-1"
:tab-index "-1" :for (name input-name)} label
:for (name input-name)} label
(when is-checkbox? (when is-checkbox?
[:span {:class (stl/css-case :global/checked value)} i/status-tick-refactor]) [:span {:class (stl/css-case :global/checked value)} i/status-tick-refactor])
(if is-checkbox? (if is-checkbox?
[:> :input props]
[:div {:class (stl/css :input-and-icon)}
[:> :input props]
(when help-icon'
[:span {:class (stl/css :help-icon)
:on-click (when (= "password" input-type)
swap-text-password)}
help-icon'])
(when show-valid?
[:span {:class (stl/css :valid-icon)}
i/tick-refactor])
(when show-invalid?
[:span {:class (stl/css :invalid-icon)}
i/close-refactor])])]
(some? children)
[:label {:for (name input-name)}
[:> :input props] [:> :input props]
children])
[:div {:class (stl/css :input-and-icon)}
[:> :input props]
(when help-icon'
[:span {:class (stl/css :help-icon)
:on-click (when (= "password" input-type)
swap-text-password)}
help-icon'])
(when show-valid?
[:span {:class (stl/css :valid-icon)}
i/tick-refactor])
(when show-invalid?
[:span {:class (stl/css :invalid-icon)}
i/close-refactor])])]
(some? children)
[:label {:for (name input-name)}
[:> :input props]
children])
(cond (cond
(and touched? (:message error)) (and touched? (:message error))
[:div {:id (dm/str "error-" input-name) [:div {:id (dm/str "error-" input-name)
:class (stl/css :error) :class (stl/css :error)
:data-test (clojure.string/join [data-test "-error"])} :data-test (clojure.string/join [data-test "-error"])}
(tr (:message error))] (tr (:message error))]
(string? hint) (string? hint)
[:div {:class (stl/css :hint)} hint])]] [:div {:class (stl/css :hint)} hint])]]))
;;OLD
[:div
{:class (str more-classes " "
(dom/classnames
:focus @focus?
:valid (and touched? (not error))
:invalid (and touched? error)
:disabled disabled
:empty (and is-text? (str/empty? value))
:with-icon (not (nil? help-icon'))
:custom-input is-text?
:input-radio is-radio?
:input-checkbox is-checkbox?))}
[:*
[:> :input props]
(cond
(some? label)
[:label {:for (name input-name)} label]
(some? children)
[:label {:for (name input-name)} children])
(when help-icon'
[:div.help-icon
{:style {:cursor "pointer"}
:on-click (when (= "password" input-type)
swap-text-password)}
help-icon'])
(cond
(and touched? (:message error))
[:span.error {:id (dm/str "error-" input-name)
:data-test (clojure.string/join [data-test "-error"])} (tr (:message error))]
(string? hint)
[:span.hint hint])]])))
(mf/defc textarea (mf/defc textarea
[{:keys [label disabled form hint trim] :as props}] [{:keys [label disabled form hint trim] :as props}]
@ -259,62 +219,28 @@
[:span.hint hint])]])) [:span.hint hint])]]))
(mf/defc select (mf/defc select
[{:keys [options disabled label form default data-test] :as props [{:keys [options disabled form default] :as props
:or {default ""}}] :or {default ""}}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [input-name (get props :name)
input-name (get props :name)
form (or form (mf/use-ctx form-ctx)) form (or form (mf/use-ctx form-ctx))
value (or (get-in @form [:data input-name]) default) value (or (get-in @form [:data input-name]) default)
cvalue (d/seek #(= value (:value %)) options)
focus? (mf/use-state false)
handle-change handle-change
(fn [event] (fn [event]
(let [value (if (string? event) event (dom/get-target-val event))] (let [value (if (string? event) event (dom/get-target-val event))]
(fm/on-input-change form input-name value))) (fm/on-input-change form input-name value)))]
on-focus [:div {:class (stl/css :select-wrapper)}
(fn [_] [:& cs/select
(reset! focus? true)) {:default-value value
:disabled disabled
on-blur :options options
(fn [_] :on-change handle-change}]]))
(reset! focus? false))]
(if new-css-system
[:div {:class (stl/css :select-wrapper)}
[:& cs/select
{:default-value value
:options options
:on-change handle-change}]]
[:div.custom-select
[:select {:value value
:on-change handle-change
:on-focus on-focus
:on-blur on-blur
:disabled disabled
:data-test data-test}
(for [item options]
[:> :option (clj->js (cond-> {:key (:value item) :value (:value item)}
(:disabled item) (assoc :disabled "disabled")
(:hidden item) (assoc :style {:display "none"})))
(:label item)])]
[:div.input-container {:class (dom/classnames :disabled disabled :focus @focus?)}
[:div.main-content
[:label label]
[:span.value (:label cvalue "")]]
[:div.icon
i/arrow-slide]]])))
(mf/defc radio-buttons (mf/defc radio-buttons
{::mf/wrap-props false} {::mf/wrap-props false}
[props] [props]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [form (or (unchecked-get props "form")
form (or (unchecked-get props "form")
(mf/use-ctx form-ctx)) (mf/use-ctx form-ctx))
name (unchecked-get props "name") name (unchecked-get props "name")
@ -337,51 +263,31 @@
(when (fn? on-change) (when (fn? on-change)
(on-change name value)))))] (on-change name value)))))]
(if new-css-system [:div {:class (stl/css :custom-radio)}
[:div {:class (stl/css :custom-radio)} (for [{:keys [image value label]} options]
(for [{:keys [image value label]} options] (let [image? (some? image)
(let [image? (some? image) value' (encode-fn value)
value' (encode-fn value) checked? (= value current-value)
checked? (= value current-value) key (str/ffmt "%-%" name value')]
key (str/ffmt "%-%" name value')] [:label {:for key
[:label {:for key :key key
:key key :style {:background-image (when image? (str/ffmt "url(%)" image))}
:style {:background-image (when image? (str/ffmt "url(%)" image))} :class (stl/css-case :radio-label true
:class (stl/css-case :radio-label true :global/checked checked?
:global/checked checked? :with-image image?)}
:with-image image?)} [:input {:on-change on-change'
[:input {:on-change on-change' :type "radio"
:type "radio" :class (stl/css :radio-input)
:class (stl/css :radio-input) :id key
:id key :name name
:name name :value value'
:value value' :checked checked?}]
:checked checked?}] (when (not image?)
(when (not image?) [:span {:class (stl/css-case :radio-icon true
[:span {:class (stl/css-case :radio-icon true :global/checked checked?)}
:global/checked checked?)} (when checked? [:span {:class (stl/css :radio-dot)}])])
(when checked? [:span {:class (stl/css :radio-dot)}])])
label]))] label]))]))
[: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/defc submit-button*
{::mf/wrap-props false} {::mf/wrap-props false}
@ -393,12 +299,11 @@
on-click (unchecked-get props "onClick") on-click (unchecked-get props "onClick")
children (unchecked-get props "children") children (unchecked-get props "children")
class (unchecked-get props "className") class (d/nilv (unchecked-get props "className") "btn-primary btn-large")
name (d/nilv (unchecked-get props "name") "submit") name (d/nilv (unchecked-get props "name") "submit")
disabled? (or (and (some? form) (not (:valid @form))) disabled? (or (and (some? form) (not (:valid @form)))
(true? (unchecked-get props "disabled"))) (true? (unchecked-get props "disabled")))
new-klass (dm/str class " " (if disabled? (stl/css :btn-disabled) "")) new-klass (dm/str class " " (if disabled? (stl/css :btn-disabled) ""))
on-key-down on-key-down
@ -442,8 +347,7 @@
(mf/defc multi-input (mf/defc multi-input
[{:keys [form label class name trim valid-item-fn caution-item-fn on-submit] :as props}] [{:keys [form label class name trim valid-item-fn caution-item-fn on-submit] :as props}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [form (or form (mf/use-ctx form-ctx))
form (or form (mf/use-ctx form-ctx))
input-name (get props :name) input-name (get props :name)
touched? (get-in @form [:touched input-name]) touched? (get-in @form [:touched input-name])
error (get-in @form [:errors input-name]) error (get-in @form [:errors input-name])
@ -456,17 +360,7 @@
empty? (and (str/empty? @value) empty? (and (str/empty? @value)
(zero? (count @items))) (zero? (count @items)))
klass (str (get props :class) " " klass (str (get props :class) " "
(dom/classnames
:focus @focus?
:valid (and touched? (not error))
:invalid (and touched? error)
:empty empty?
:custom-multi-input true
:custom-input true))
new-css-klass (str (get props :class) " "
(stl/css-case (stl/css-case
:focus @focus? :focus @focus?
:valid (and touched? (not error)) :valid (and touched? (not error))
@ -474,11 +368,7 @@
:empty empty? :empty empty?
:custom-multi-input true)) :custom-multi-input true))
in-klass (str class " " in-klass (str class " "
(dom/classnames
:no-padding (pos? (count @items))))
new-css-in-klass (str class " "
(stl/css-case (stl/css-case
:inside-input true :inside-input true
:no-padding (pos? (count @items)))) :no-padding (pos? (count @items))))
@ -549,59 +439,32 @@
values (filterv #(:valid %) values)] values (filterv #(:valid %) values)]
(update-form! values))) (update-form! values)))
(if new-css-system [:div {:class klass}
[:div {:class new-css-klass} [:input {:id (name input-name)
[:input {:id (name input-name) :class in-klass
:class new-css-in-klass :type "text"
:type "text" :auto-focus true
:auto-focus true :on-focus on-focus
:on-focus on-focus :on-blur on-blur
:on-blur on-blur :on-key-down on-key-down
:on-key-down on-key-down :value @value
:value @value :on-change on-change
:on-change on-change :placeholder (when empty? label)}]
:placeholder (when empty? label)}] [:label {:for (name input-name)} label]
[:label {:for (name input-name)} label]
(when-let [items (seq @items)] (when-let [items (seq @items)]
[:div {:class (stl/css :selected-items)} [:div {:class (stl/css :selected-items)}
(for [item items] (for [item items]
[:div {:class (stl/css :selected-item) [:div {:class (stl/css :selected-item)
:key (:text item) :key (:text item)
:tab-index "0" :tab-index "0"
:on-key-down (partial manage-key-down item)} :on-key-down (partial manage-key-down item)}
[:span {:class (stl/css-case :around true [:span {:class (stl/css-case :around true
:invalid (not (:valid item)) :invalid (not (:valid item))
:caution (:caution item))} :caution (:caution item))}
[:span {:class (stl/css :text)} (:text item)] [:span {:class (stl/css :text)} (:text item)]
[:button {:class (stl/css :icon) [:button {:class (stl/css :icon)
:on-click #(remove-item! item)} i/close-refactor]]])])] :on-click #(remove-item! item)} i/close-refactor]]])])]))
[:div {:class klass}
[:input {:id (name input-name)
:class in-klass
:type "text"
:auto-focus true
:on-focus on-focus
:on-blur on-blur
:on-key-down on-key-down
:value @value
:on-change on-change
:placeholder (when empty? label)}]
[:label {:for (name input-name)} label]
(when-let [items (seq @items)]
[:div.selected-items
(for [item items]
[:div.selected-item {:key (:text item)
:tab-index "0"
:on-key-down (partial manage-key-down item)}
[:span.around {:class (dom/classnames "invalid" (not (:valid item))
"caution" (:caution item))}
[:span.text (:text item)]
[:span.icon {:on-click #(remove-item! item)} i/cross]]])])])))
;; --- Validators ;; --- Validators

84
frontend/src/app/main/ui/components/select.cljs
View file

@ -11,7 +11,6 @@
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[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.context :as ctx]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom] [app.util.dom :as dom]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -24,8 +23,7 @@
(mf/defc select (mf/defc select
[{:keys [default-value options class dropdown-class is-open? on-change on-pointer-enter-option on-pointer-leave-option disabled]}] [{:keys [default-value options class dropdown-class is-open? on-change on-pointer-enter-option on-pointer-leave-option disabled]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [label-index (mf/with-memo [options]
label-index (mf/with-memo [options]
(into {} (map as-key-value) options)) (into {} (map as-key-value) options))
state* (mf/use-state state* (mf/use-state
@ -83,53 +81,33 @@
(mf/with-effect [default-value] (mf/with-effect [default-value]
(swap! state* assoc :current-value default-value)) (swap! state* assoc :current-value default-value))
(if new-css-system [:div {:on-click open-dropdown
[:div {:on-click open-dropdown :class (dm/str class " " (stl/css-case :custom-select true
:class (dm/str class " " (stl/css-case :custom-select true :disabled disabled))}
:disabled disabled))} (let [selected-option (first (filter #(= (:value %) default-value) options))
(let [selected-option (first (filter #(= (:value %) default-value) options)) current-icon (:icon selected-option)
current-icon (:icon selected-option) current-icon-ref (i/key->icon current-icon)]
current-icon-ref (i/key->icon current-icon)] (when (and current-icon current-icon-ref)
(when (and current-icon current-icon-ref) [:span {:class (stl/css :current-icon)} @current-icon-ref]))
[:span {:class (stl/css :current-icon)} @current-icon-ref])) [:span {:class (stl/css :current-label)} current-label]
[:span {:class (stl/css :current-label)} current-label] [:span {:class (stl/css :dropdown-button)} i/arrow-refactor]
[:span {:class (stl/css :dropdown-button)} i/arrow-refactor] [:& dropdown {:show is-open? :on-close close-dropdown}
[:& dropdown {:show is-open? :on-close close-dropdown} [:ul {:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))}
[:ul {:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))} (for [[index item] (d/enumerate options)]
(for [[index item] (d/enumerate options)] (if (= :separator item)
(if (= :separator item) [:li {:class (dom/classnames (stl/css :separator) true)
[:li {:class (dom/classnames (stl/css :separator) true) :key (dm/str current-id "-" index)}]
:key (dm/str current-id "-" index)}] (let [[value label icon] (as-key-value item)
(let [[value label icon] (as-key-value item) icon-ref (i/key->icon icon)]
icon-ref (i/key->icon icon)] [:li
[:li {:key (dm/str current-id "-" index)
{:key (dm/str current-id "-" index) :class (dom/classnames
:class (dom/classnames (stl/css :checked-element) true
(stl/css :checked-element) true (stl/css :is-selected) (= value current-value))
(stl/css :is-selected) (= value current-value)) :data-value (pr-str value)
:data-value (pr-str value) :on-pointer-enter highlight-item
:on-pointer-enter highlight-item :on-pointer-leave unhighlight-item
:on-pointer-leave unhighlight-item :on-click select-item}
:on-click select-item} (when (and icon icon-ref) [:span {:class (stl/css :icon)} @icon-ref])
(when (and icon icon-ref) [:span {:class (stl/css :icon)} @icon-ref]) [:span {:class (stl/css :label)} label]
[:span {:class (stl/css :label)} label] [:span {:class (stl/css :check-icon)} i/tick-refactor]])))]]]))
[:span {:class (stl/css :check-icon)} i/tick-refactor]])))]]]
[:div.custom-select {:on-click open-dropdown :class class}
[:span current-label]
[:span.dropdown-button i/arrow-down]
[:& dropdown {:show is-open? :on-close close-dropdown}
[:ul.custom-select-dropdown
(for [[index item] (d/enumerate options)]
(if (= :separator item)
[:hr {:key (dm/str current-id "-" index)}]
(let [[value label] (as-key-value item)]
[:li.checked-element
{:key (dm/str current-id "-" index)
:class (when (= value current-value) "is-selected")
:data-value (pr-str value)
:on-pointer-enter highlight-item
:on-pointer-leave unhighlight-item
:on-click select-item}
[:span.check-icon i/tick]
[:span label]])))]]])))

1
frontend/src/app/main/ui/context.cljs
View file

@ -23,7 +23,6 @@
(def libraries (mf/create-context nil)) (def libraries (mf/create-context nil))
(def components-v2 (mf/create-context nil)) (def components-v2 (mf/create-context nil))
(def new-css-system (mf/create-context nil))
(def current-scroll (mf/create-context nil)) (def current-scroll (mf/create-context nil))
(def current-zoom (mf/create-context nil)) (def current-zoom (mf/create-context nil))

10
frontend/src/app/main/ui/modal.cljs
View file

@ -8,9 +8,7 @@
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.main.data.modal :as dm] [app.main.data.modal :as dm]
[app.main.features :as features]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.context :as ctx]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.keyboard :as k] [app.util.keyboard :as k]
[goog.events :as events] [goog.events :as events]
@ -86,9 +84,7 @@
(mf/defc modal (mf/defc modal
{::mf/wrap-props false} {::mf/wrap-props false}
[] []
(let [modal (mf/deref modal-ref) (let [modal (mf/deref modal-ref)]
new-css-system (features/use-feature "styles/v2")]
(when modal (when modal
[:& (mf/provider ctx/new-css-system) {:value new-css-system} [:& modal-wrapper {:data modal
[:& modal-wrapper {:data modal :key (:id modal)}])))
:key (:id modal)}]])))

20
frontend/src/app/main/ui/static.cljs
View file

@ -7,9 +7,7 @@
(ns app.main.ui.static (ns app.main.ui.static
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.main.features :as features]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.globals :as globals] [app.util.globals :as globals]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
@ -81,16 +79,14 @@
(mf/defc exception-page (mf/defc exception-page
[{:keys [data] :as props}] [{:keys [data] :as props}]
(let [new-css-system (features/use-feature "styles/v2")] (case (:type data)
[:& (mf/provider ctx/new-css-system) {:value new-css-system} :not-found
(case (:type data) [:& not-found]
:not-found
[:& not-found]
:bad-gateway :bad-gateway
[:& bad-gateway] [:& bad-gateway]
:service-unavailable :service-unavailable
[:& service-unavailable] [:& service-unavailable]
[:& internal-error])])) [:& internal-error]))

86
frontend/src/app/main/ui/viewer/inspect.cljs
View file

@ -11,7 +11,6 @@
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.main.data.viewer :as dv] [app.main.data.viewer :as dv]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.hooks.resize :refer [use-resize-hook]] [app.main.ui.hooks.resize :refer [use-resize-hook]]
[app.main.ui.viewer.inspect.left-sidebar :refer [left-sidebar]] [app.main.ui.viewer.inspect.left-sidebar :refer [left-sidebar]]
[app.main.ui.viewer.inspect.render :refer [render-frame-svg]] [app.main.ui.viewer.inspect.render :refer [render-frame-svg]]
@ -42,8 +41,7 @@
(mf/defc viewport (mf/defc viewport
[{:keys [local file page frame index viewer-pagination size share-id]}] [{:keys [local file page frame index viewer-pagination size share-id]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [inspect-svg-container-ref (mf/use-ref nil)
inspect-svg-container-ref (mf/use-ref nil)
current-section* (mf/use-state :info) current-section* (mf/use-state :info)
current-section (deref current-section*) current-section (deref current-section*)
@ -92,60 +90,32 @@
(fn [] (fn []
(st/emit! (dv/select-shape (:id frame))))) (st/emit! (dv/select-shape (:id frame)))))
(if new-css-system [:*
[:* [:& left-sidebar {:frame frame
[:& left-sidebar {:frame frame :local local
:local local :page page}]
:page page}] [:div {:class (stl/css :inspect-svg-wrapper)
[:div {:class (stl/css :inspect-svg-wrapper) :data-value (pr-str (:id frame))
:data-value (pr-str (:id frame)) :on-click handle-select-frame}
:on-click handle-select-frame} [:& viewer-pagination {:index index :num-frames (count (:frames page)) :left-bar true :right-bar true}]
[:& viewer-pagination {:index index :num-frames (count (:frames page)) :left-bar true :right-bar true}] [:div {:class (stl/css :inspect-svg-container)
[:div {:class (stl/css :inspect-svg-container) :ref inspect-svg-container-ref}
:ref inspect-svg-container-ref} [:& render-frame-svg {:frame frame :page page :local local :size size}]]]
[:& render-frame-svg {:frame frame :page page :local local :size size}]]]
[:div {:class (stl/css-case :sidebar-container true [:div {:class (stl/css-case :sidebar-container true
:not-expand (not can-be-expanded?) :not-expand (not can-be-expanded?)
:expanded can-be-expanded?) :expanded can-be-expanded?)
:style #js {"--width" (when can-be-expanded? (dm/str right-size "px"))}} :style #js {"--width" (when can-be-expanded? (dm/str right-size "px"))}}
(when can-be-expanded? (when can-be-expanded?
[:div {:class (stl/css :resize-area) [:div {:class (stl/css :resize-area)
:on-pointer-down on-pointer-down :on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture :on-lost-pointer-capture on-lost-pointer-capture
:on-pointer-move on-pointer-move}]) :on-pointer-move on-pointer-move}])
[:& right-sidebar {:frame frame [:& right-sidebar {:frame frame
:selected (:selected local) :selected (:selected local)
:page page :page page
:file file :file file
:on-change-section handle-change-section :on-change-section handle-change-section
:on-expand handle-expand :on-expand handle-expand
:share-id share-id}]]] :share-id share-id}]]]))
;;OLD
[:*
[:& left-sidebar {:frame frame
:local local
:page page}]
[:div.inspect-svg-wrapper {:data-value (pr-str (:id frame))
:on-click handle-select-frame}
[:& viewer-pagination {:index index :num-frames (count (:frames page)) :left-bar true :right-bar true}]
[:div.inspect-svg-container {:ref inspect-svg-container-ref}
[:& render-frame-svg {:frame frame :page page :local local :size size}]]]
[:div.sidebar-container
{:class (when (not can-be-expanded?) "not-expand")
:style #js {"--width" (when can-be-expanded? (dm/str right-size "px"))}}
[:div.resize-area
{:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
:on-pointer-move on-pointer-move}]
[:& right-sidebar {:frame frame
:selected (:selected local)
:page page
:file file
:on-change-section handle-change-section
:on-expand handle-expand
:share-id share-id}]]])))

1
frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs
View file

@ -10,7 +10,6 @@
[app.common.data :as d] [app.common.data :as d]
[app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.context :as ctx]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[cuerdas.core :as str] [cuerdas.core :as str]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))

158
frontend/src/app/main/ui/viewer/inspect/left_sidebar.cljs
View file

@ -9,17 +9,9 @@
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.files.helpers :as cfh]
[app.common.types.component :as ctk]
[app.common.types.shape.layout :as ctl]
[app.main.data.viewer :as dv] [app.main.data.viewer :as dv]
[app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.shape-icon :as si]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.layer-item :refer [layer-item-inner]] [app.main.ui.workspace.sidebar.layer-item :refer [layer-item-inner]]
[app.main.ui.workspace.sidebar.layer-name :refer [layer-name]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.keyboard :as kbd] [app.util.keyboard :as kbd]
[okulary.core :as l] [okulary.core :as l]
@ -31,24 +23,13 @@
(l/derived st/state))) (l/derived st/state)))
(mf/defc layer-item (mf/defc layer-item
[{:keys [item selected objects disable-collapse? depth component-child? hide-toggle?] :as props}] [{:keys [item selected objects depth component-child? hide-toggle?] :as props}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [id (:id item)
id (:id item)
name (:name item)
hidden? (:hidden item) hidden? (:hidden item)
touched? (-> item :touched seq boolean)
selected? (contains? selected id) selected? (contains? selected id)
item-ref (mf/use-ref nil) item-ref (mf/use-ref nil)
depth (+ depth 1) depth (+ depth 1)
file (mf/deref refs/viewer-file)
components-v2 (dm/get-in file [:data :options :components-v2])
main-instance?
(if components-v2
(ctk/main-instance? item)
true)
component-tree? (or component-child? (:component-root item)) component-tree? (or component-child? (:component-root item))
collapsed-iref collapsed-iref
@ -57,7 +38,6 @@
(make-collapsed-iref id)) (make-collapsed-iref id))
expanded? (not (mf/deref collapsed-iref)) expanded? (not (mf/deref collapsed-iref))
absolute? (ctl/item-absolute? item)
toggle-collapse toggle-collapse
(mf/use-callback (mf/use-callback
@ -87,102 +67,50 @@
(when (and (= (count selected) 1) selected?) (when (and (= (count selected) 1) selected?)
(dom/scroll-into-view-if-needed! (mf/ref-val item-ref) true)))) (dom/scroll-into-view-if-needed! (mf/ref-val item-ref) true))))
(if new-css-system [:& layer-item-inner
[:& layer-item-inner {:ref item-ref
{:ref item-ref :item item
:item item :depth depth
:depth depth :read-only? true
:read-only? true :highlighted? false
:highlighted? false :selected? selected?
:selected? selected? :component-tree? component-tree?
:component-tree? component-tree? :hidden? hidden?
:hidden? hidden? :filtered? false
:filtered? false :expanded? expanded?
:expanded? expanded? :hide-toggle? hide-toggle?
:hide-toggle? hide-toggle? :on-select-shape select-shape
:on-select-shape select-shape :on-toggle-collapse toggle-collapse}
:on-toggle-collapse toggle-collapse}
(when (and (:shapes item) expanded?) (when (and (:shapes item) expanded?)
[:div {:class (stl/css-case [:div {:class (stl/css-case
:element-children true :element-children true
:parent-selected selected?)} :parent-selected selected?)}
(for [[index id] (reverse (d/enumerate (:shapes item)))] (for [[index id] (reverse (d/enumerate (:shapes item)))]
(when-let [item (get objects id)] (when-let [item (get objects id)]
[:& layer-item [:& layer-item
{:item item {:item item
:selected selected :selected selected
:index index :index index
:objects objects :objects objects
:key (dm/str id) :key (dm/str id)
:depth depth :depth depth
:component-child? component-tree?}]))])] :component-child? component-tree?}]))])]))
;; OLD
[:li {:ref item-ref
:class (dom/classnames
:component (not (nil? (:component-id item)))
:masked (:masked-group item)
:selected selected?)}
[:div.element-list-body {:class (dom/classnames :selected selected?
:icon-layer (= (:type item) :icon))
:on-click select-shape}
[:div.icon
(when absolute?
[:div.absolute i/position-absolute])
[:& si/element-icon {:shape item :main-instance? main-instance?}]]
[:& layer-name {:shape-id id
:shape-name name
:shape-touched? touched?
:hidden? hidden?
:selected? selected?
:type-frame (cfh/frame-shape? item)
:disabled-double-click true}]
(when (and (not disable-collapse?) (:shapes item))
[:span.toggle-content
{:on-click toggle-collapse
:class (when expanded? "inverse")}
i/arrow-slide])]
(when (and (:shapes item) expanded?)
[:ul.element-children
(for [[index id] (reverse (d/enumerate (:shapes item)))]
(when-let [item (get objects id)]
[:& layer-item
{:item item
:selected selected
:index index
:objects objects
:key (:id item)}]))])])))
(mf/defc left-sidebar (mf/defc left-sidebar
[{:keys [frame page local]}] [{:keys [frame page local]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [selected (:selected local)
selected (:selected local)
objects (:objects page)] objects (:objects page)]
(if new-css-system [:aside {:class (stl/css :settings-bar-left)}
[:aside {:class (stl/css :settings-bar-left)} [:div {:class (stl/css :settings-bar-inside)}
[:div {:class (stl/css :settings-bar-inside)} [:div {:class (stl/css :element-list)}
[:div {:class (stl/css :element-list)} [:& layer-item
[:& layer-item {:item frame
{:item frame :selected selected
:selected selected :index 0
:index 0 :objects objects
:objects objects :sortable? false
:sortable? false :filtered? false
:filtered? false :depth -2
:depth -2 :hide-toggle? true}]]]]))
:hide-toggle? true}]]]]
[:aside.settings-bar.settings-bar-left
[:div.settings-bar-inside
[:ul.element-list
[:& layer-item
{:item frame
:selected selected
:index 0
:objects objects
:disable-collapse? true}]]]])))

24
frontend/src/app/main/ui/workspace.cljs
View file

@ -175,7 +175,6 @@
file-ready? (mf/deref file-ready*) file-ready? (mf/deref file-ready*)
components-v2? (features/use-feature "components/v2") components-v2? (features/use-feature "components/v2")
new-css-system (features/use-feature "styles/v2")
background-color (:background-color wglobal)] background-color (:background-color wglobal)]
@ -201,16 +200,15 @@
[:& (mf/provider ctx/current-team-id) {:value team-id} [:& (mf/provider ctx/current-team-id) {:value team-id}
[:& (mf/provider ctx/current-page-id) {:value page-id} [:& (mf/provider ctx/current-page-id) {:value page-id}
[:& (mf/provider ctx/components-v2) {:value components-v2?} [:& (mf/provider ctx/components-v2) {:value components-v2?}
[:& (mf/provider ctx/new-css-system) {:value new-css-system} [:& (mf/provider ctx/workspace-read-only?) {:value read-only?}
[:& (mf/provider ctx/workspace-read-only?) {:value read-only?} [:section#workspace-refactor {:class (stl/css :workspace)
[:section#workspace-refactor {:class (stl/css :workspace) :style {:background-color background-color
:style {:background-color background-color :touch-action "none"}}
:touch-action "none"}} [:& context-menu]
[:& context-menu]
(if ^boolean file-ready? (if ^boolean file-ready?
[:& workspace-page {:page-id page-id [:& workspace-page {:page-id page-id
:file file :file file
:wglobal wglobal :wglobal wglobal
:layout layout}] :layout layout}]
[:& workspace-loader])]]]]]]]])) [:& workspace-loader])]]]]]]]))

625
frontend/src/app/main/ui/workspace/libraries.cljs
View file

@ -16,7 +16,6 @@
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.workspace.libraries :as dwl] [app.main.data.workspace.libraries :as dwl]
[app.main.features :as features]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.render :refer [component-svg]] [app.main.render :refer [component-svg]]
[app.main.store :as st] [app.main.store :as st]
@ -25,12 +24,10 @@
[app.main.ui.components.search-bar :refer [search-bar]] [app.main.ui.components.search-bar :refer [search-bar]]
[app.main.ui.components.tab-container :refer [tab-container tab-element]] [app.main.ui.components.tab-container :refer [tab-container tab-element]]
[app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.color :as uc] [app.util.color :as uc]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
[app.util.strings :refer [matches-search]] [app.util.strings :refer [matches-search]]
[cuerdas.core :as str] [cuerdas.core :as str]
[okulary.core :as l] [okulary.core :as l]
@ -104,28 +101,12 @@
[:span {:class (stl/css :element-count)} [:span {:class (stl/css :element-count)}
(tr "workspace.libraries.typography" typography-count)])])) (tr "workspace.libraries.typography" typography-count)])]))
(defn- describe-linked-library
[library]
(let [components-count (count (or (ctkl/components-seq (:data library)) []))
graphics-count (count (dm/get-in library [:data :media] []))
colors-count (count (dm/get-in library [:data :colors] []))
typography-count (count (dm/get-in library [:data :typographies] []))]
(describe-library components-count graphics-count colors-count typography-count)))
(defn- describe-external-library
[library]
(let [components-count (dm/get-in library [:library-summary :components :count] 0)
graphics-count (dm/get-in library [:library-summary :media :count] 0)
colors-count (dm/get-in library [:library-summary :colors :count] 0)
typography-count (dm/get-in library [:library-summary :typographies :count] 0)]
(describe-library components-count graphics-count colors-count typography-count)))
(mf/defc libraries-tab (mf/defc libraries-tab
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [file-id shared? linked-libraries shared-libraries]}] [{:keys [file-id shared? linked-libraries shared-libraries]}]
(let [search-term* (mf/use-state "") (let [search-term* (mf/use-state "")
search-term (deref search-term*) search-term (deref search-term*)
new-css-system (mf/use-ctx ctx/new-css-system)
library-ref (mf/with-memo [file-id] library-ref (mf/with-memo [file-id]
(create-file-library-ref file-id)) (create-file-library-ref file-id))
library (deref library-ref) library (deref library-ref)
@ -155,41 +136,25 @@
change-search-term change-search-term
(mf/use-fn (mf/use-fn
(mf/deps new-css-system)
(fn [event] (fn [event]
(let [value (if new-css-system (reset! search-term* event)))
event
(-> (dom/get-target event)
(dom/get-value)))]
(reset! search-term* value))))
clear-search-term
(mf/use-fn #(reset! search-term* ""))
link-library link-library
(mf/use-fn (mf/use-fn
(mf/deps file-id new-css-system) (mf/deps file-id)
(fn [event] (fn [event]
(let [library-id (if new-css-system (let [library-id (some-> (dom/get-current-target event)
(some-> (dom/get-current-target event) (dom/get-data "library-id")
(dom/get-data "library-id") (parse-uuid))]
(parse-uuid))
(some-> (dom/get-target event)
(dom/get-data "library-id")
(parse-uuid)))]
(st/emit! (dwl/link-file-to-library file-id library-id))))) (st/emit! (dwl/link-file-to-library file-id library-id)))))
unlink-library unlink-library
(mf/use-fn (mf/use-fn
(mf/deps file-id) (mf/deps file-id)
(fn [event] (fn [event]
(let [library-id (if new-css-system (let [library-id (some-> (dom/get-current-target event)
(some-> (dom/get-current-target event) (dom/get-data "library-id")
(dom/get-data "library-id") (parse-uuid))]
(parse-uuid))
(some-> (dom/get-target event)
(dom/get-data "library-id")
(parse-uuid)))]
(st/emit! (dwl/unlink-file-from-library file-id library-id) (st/emit! (dwl/unlink-file-from-library file-id library-id)
(dwl/sync-file file-id library-id))))) (dwl/sync-file file-id library-id)))))
@ -230,170 +195,92 @@
:origin :unpublish :origin :unpublish
:on-accept on-delete-accept :on-accept on-delete-accept
:on-cancel on-delete-cancel :on-cancel on-delete-cancel
:count-libraries 1})))) :count-libraries 1}))))]
handle-key-down [:*
(mf/use-fn [:div {:class (stl/css :section)}
(fn [event] [:& title-bar {:collapsable? false
(let [enter? (kbd/enter? event) :title (tr "workspace.libraries.in-this-file")
esc? (kbd/esc? event) :class (stl/css :title-spacing-lib)}]
input-node (dom/get-target event)] [:div {:class (stl/css :section-list)}
(when ^boolean enter?
(dom/blur! input-node))
(when ^boolean esc?
(dom/blur! input-node)))))]
(if new-css-system [:div {:class (stl/css :section-list-item)}
[:* [:div
[:div {:class (stl/css :section)} [:div {:class (stl/css :item-name)} (tr "workspace.libraries.file-library")]
[:& title-bar {:collapsable? false [:div {:class (stl/css :item-contents)}
:title (tr "workspace.libraries.in-this-file") [:& describe-library-blocks {:components-count (count components)
:class (stl/css :title-spacing-lib)}] :graphics-count (count media)
[:div {:class (stl/css :section-list)} :colors-count (count colors)
:typography-count (count typographies)}]]]
[:div
(if ^boolean shared?
[:input {:class (stl/css :item-unpublish)
:type "button"
:value (tr "common.unpublish")
:on-click unpublish}]
[:input {:class (stl/css :item-publish)
:type "button"
:value (tr "common.publish")
:on-click publish}])]]
[:div {:class (stl/css :section-list-item)} (for [{:keys [id name] :as library} linked-libraries]
[:div {:class (stl/css :section-list-item)
:key (dm/str id)}
[:div [:div
[:div {:class (stl/css :item-name)} (tr "workspace.libraries.file-library")] [:div {:class (stl/css :item-name)} name]
[:div {:class (stl/css :item-contents)} [:div {:class (stl/css :item-contents)}
[:& describe-library-blocks {:components-count (count components) (let [components-count (count (or (ctkl/components-seq (:data library)) []))
:graphics-count (count media) graphics-count (count (dm/get-in library [:data :media] []))
:colors-count (count colors) colors-count (count (dm/get-in library [:data :colors] []))
:typography-count (count typographies)}]]] typography-count (count (dm/get-in library [:data :typographies] []))]
[:div [:& describe-library-blocks {:components-count components-count
(if ^boolean shared? :graphics-count graphics-count
[:input {:class (stl/css :item-unpublish) :colors-count colors-count
:type "button" :typography-count typography-count}])]]
:value (tr "common.unpublish")
:on-click unpublish}]
[:input {:class (stl/css :item-publish)
:type "button"
:value (tr "common.publish")
:on-click publish}])]]
(for [{:keys [id name] :as library} linked-libraries] [:button {:class (stl/css :item-button)
:type "button"
:data-library-id (dm/str id)
:on-click unlink-library}
i/detach-refactor]])]]
[:div {:class (stl/css :section)}
[:& title-bar {:collapsable? false
:title (tr "workspace.libraries.shared-libraries")
:class (stl/css :title-spacing-lib)}]
[:div {:class (stl/css :libraries-search)}
[:& search-bar {:on-change change-search-term
:value search-term
:placeholder (tr "workspace.libraries.search-shared-libraries")
:icon (mf/html [:span {:class (stl/css :search-icon)} i/search-refactor])}]]
(if (seq shared-libraries)
[:div {:class (stl/css :section-list-shared)}
(for [{:keys [id name] :as library} shared-libraries]
[:div {:class (stl/css :section-list-item) [:div {:class (stl/css :section-list-item)
:key (dm/str id)} :key (dm/str id)}
[:div [:div
[:div {:class (stl/css :item-name)} name] [:div {:class (stl/css :item-name)} name]
[:div {:class (stl/css :item-contents)} [:div {:class (stl/css :item-contents)}
(let [components-count (count (or (ctkl/components-seq (:data library)) [])) (let [components-count (dm/get-in library [:library-summary :components :count] 0)
graphics-count (count (dm/get-in library [:data :media] [])) graphics-count (dm/get-in library [:library-summary :media :count] 0)
colors-count (count (dm/get-in library [:data :colors] [])) colors-count (dm/get-in library [:library-summary :colors :count] 0)
typography-count (count (dm/get-in library [:data :typographies] []))] typography-count (dm/get-in library [:library-summary :typographies :count] 0)]
[:& describe-library-blocks {:components-count components-count [:& describe-library-blocks {:components-count components-count
:graphics-count graphics-count :graphics-count graphics-count
:colors-count colors-count :colors-count colors-count
:typography-count typography-count}])]] :typography-count typography-count}])]]
[:button {:class (stl/css :item-button-shared)
[:button {:class (stl/css :item-button)
:type "button"
:data-library-id (dm/str id) :data-library-id (dm/str id)
:on-click unlink-library} :on-click link-library}
i/detach-refactor]])]] i/add-refactor]])]
[:div {:class (stl/css :section)} [:div {:class (stl/css :section-list-empty)}
[:& title-bar {:collapsable? false (if (nil? shared-libraries)
:title (tr "workspace.libraries.shared-libraries") i/loader-pencil
:class (stl/css :title-spacing-lib)}] (if (str/empty? search-term)
[:div {:class (stl/css :libraries-search)} (tr "workspace.libraries.no-shared-libraries-available")
[:& search-bar {:on-change change-search-term (tr "workspace.libraries.no-matches-for" search-term)))])]]))
:value search-term
:placeholder (tr "workspace.libraries.search-shared-libraries")
:icon (mf/html [:span {:class (stl/css :search-icon)} i/search-refactor])}]]
(if (seq shared-libraries)
[:div {:class (stl/css :section-list-shared)}
(for [{:keys [id name] :as library} shared-libraries]
[:div {:class (stl/css :section-list-item)
:key (dm/str id)}
[:div
[:div {:class (stl/css :item-name)} name]
[:div {:class (stl/css :item-contents)}
(let [components-count (dm/get-in library [:library-summary :components :count] 0)
graphics-count (dm/get-in library [:library-summary :media :count] 0)
colors-count (dm/get-in library [:library-summary :colors :count] 0)
typography-count (dm/get-in library [:library-summary :typographies :count] 0)]
[:& describe-library-blocks {:components-count components-count
:graphics-count graphics-count
:colors-count colors-count
:typography-count typography-count}])]]
[:button {:class (stl/css :item-button-shared)
:data-library-id (dm/str id)
:on-click link-library}
i/add-refactor]])]
[:div {:class (stl/css :section-list-empty)}
(if (nil? shared-libraries)
i/loader-pencil
(if (str/empty? search-term)
(tr "workspace.libraries.no-shared-libraries-available")
(tr "workspace.libraries.no-matches-for" search-term)))])]]
[:*
[:div.section
[:div.section-title (tr "workspace.libraries.in-this-file")]
[:div.section-list
[:div.section-list-item
[:div
[:div.item-name (tr "workspace.libraries.file-library")]
[:div.item-contents (describe-library
(count components)
(count media)
(count colors)
(count typographies))]]
[:div
(if ^boolean shared?
[:input.item-button {:type "button"
:value (tr "common.unpublish")
:on-click unpublish}]
[:input.item-button {:type "button"
:value (tr "common.publish")
:on-click publish}])]]
(for [{:keys [id name] :as library} linked-libraries]
[:div.section-list-item {:key (dm/str id)}
[:div.item-name name]
[:div.item-contents (describe-linked-library library)]
[:input.item-button {:type "button"
:value (tr "labels.remove")
:data-library-id (dm/str id)
:on-click unlink-library}]])]]
[:div.section
[:div.section-title (tr "workspace.libraries.shared-libraries")]
[:div.libraries-search
[:input.search-input
{:placeholder (tr "workspace.libraries.search-shared-libraries")
:type "text"
:value search-term
:on-change change-search-term
:on-key-down handle-key-down}]
(if (str/empty? search-term)
[:div.search-icon
i/search]
[:div.search-icon.search-close
{:on-click clear-search-term}
i/close])]
(if (seq shared-libraries)
[:div.section-list
(for [{:keys [id name] :as library} shared-libraries]
[:div.section-list-item {:key (dm/str id)}
[:div.item-name name]
[:div.item-contents (describe-external-library library)]
[:input.item-button {:type "button"
:value (tr "workspace.libraries.add")
:data-library-id (dm/str id)
:on-click link-library}]])]
[:div.section-list-empty
(if (nil? shared-libraries)
i/loader-pencil
[:* i/library
(if (str/empty? search-term)
(tr "workspace.libraries.no-shared-libraries-available")
(tr "workspace.libraries.no-matches-for" search-term))])])]])))
(defn- extract-assets (defn- extract-assets
[file-data library summary?] [file-data library summary?]
@ -457,8 +344,6 @@
(seq colors) (seq colors)
(seq typographies)))))) (seq typographies))))))
new-css-system (mf/use-ctx ctx/new-css-system)
update (mf/use-fn update (mf/use-fn
(mf/deps file-id) (mf/deps file-id)
(fn [event] (fn [event]
@ -470,203 +355,111 @@
(dwl/set-updating-library true) (dwl/set-updating-library true)
(dwl/sync-file file-id library-id))))))] (dwl/sync-file file-id library-id))))))]
(if new-css-system [:div {:class (stl/css :section)}
[:div {:class (stl/css :section)} (if (empty? libs-assets)
(if (empty? libs-assets) [:div {:class (stl/css :section-list-empty)}
[:div {:class (stl/css :section-list-empty)} (tr "workspace.libraries.no-libraries-need-sync")]
(tr "workspace.libraries.no-libraries-need-sync")] [:*
[:* [:div {:class (stl/css :section-title)} (tr "workspace.libraries.library-updates")]
[:div {:class (stl/css :section-title)} (tr "workspace.libraries.library-updates")]
[:div {:class (stl/css :section-list)} [:div {:class (stl/css :section-list)}
(for [[{:keys [id name] :as library} (for [[{:keys [id name] :as library}
exceeded exceeded
{:keys [components colors typographies]}] libs-assets] {:keys [components colors typographies]}] libs-assets]
[:div {:class (stl/css :section-list-item) [:div {:class (stl/css :section-list-item)
:key (dm/str id)} :key (dm/str id)}
[:div [:div
[:div {:class (stl/css :item-name)} name] [:div {:class (stl/css :item-name)} name]
[:div {:class (stl/css :item-contents)} (describe-library [:div {:class (stl/css :item-contents)} (describe-library
(count components) (count components)
0 0
(count colors) (count colors)
(count typographies))]] (count typographies))]]
[:input {:type "button" [:input {:type "button"
:class (stl/css-case :item-update true :class (stl/css-case :item-update true
:disabled updating?) :disabled updating?)
:value (tr "workspace.libraries.update") :value (tr "workspace.libraries.update")
:data-library-id (dm/str id) :data-library-id (dm/str id)
:on-click update}] :on-click update}]
[:div {:class (stl/css :libraries-updates)} [:div {:class (stl/css :libraries-updates)}
(when-not (empty? components) (when-not (empty? components)
[:div {:class (stl/css :libraries-updates-column)} [:div {:class (stl/css :libraries-updates-column)}
(for [component components] (for [component components]
[:div {:class (stl/css :libraries-updates-item) [:div {:class (stl/css :libraries-updates-item)
:key (dm/str (:id component))} :key (dm/str (:id component))}
(let [component (ctf/load-component-objects (:data library) component) (let [component (ctf/load-component-objects (:data library) component)
root-shape (ctf/get-component-root (:data library) component)] root-shape (ctf/get-component-root (:data library) component)]
[:*
[:& component-svg {:root-shape root-shape
:objects (:objects component)}]
[:div {:class (stl/css :name-block)}
[:span {:class (stl/css :item-name)
:title (:name component)}
(:name component)]]])])
(when (:components exceeded)
[:div {:class (stl/css :libraries-updates-item)
:key (uuid/next)}
[:div {:class (stl/css :name-block.ellipsis)}
[:span {:class (stl/css :item-name)} "(...)"]]])])
(when-not (empty? colors)
[:div {:class (stl/css :libraries-updates-column)
:style #js {"--bullet-size" "24px"}}
(for [color colors]
(let [default-name (cond
(:gradient color) (uc/gradient-type->string (get-in color [:gradient :type]))
(:color color) (:color color)
:else (:value color))]
[:div {:class (stl/css :libraries-updates-item)
:key (dm/str (:id color))}
[:*
[:& bc/color-bullet {:color {:color (:color color)
:opacity (:opacity color)}}]
[:div {:class (stl/css :name-block)}
[:span {:class (stl/css :item-name)
:title (:name color)}
(:name color)]
(when-not (= (:name color) default-name)
[:span.color-value (:color color)])]]]))
(when (:colors exceeded)
[:div {:class (stl/css :libraries-updates-item)
:key (uuid/next)}
[:div {:class (stl/css :name-block.ellipsis)}
[:span {:class (stl/css :item-name)} "(...)"]]])])
(when-not (empty? typographies)
[:div {:class (stl/css :libraries-updates-column)}
(for [typography typographies]
[:div {:class (stl/css :libraries-updates-item)
:key (dm/str (:id typography))}
[:* [:*
[:div {:style {:font-family (:font-family typography) [:& component-svg {:root-shape root-shape
:font-weight (:font-weight typography) :objects (:objects component)}]
:font-style (:font-style typography)}}
(tr "workspace.assets.typography.sample")]
[:div {:class (stl/css :name-block)} [:div {:class (stl/css :name-block)}
[:span {:class (stl/css :item-name) [:span {:class (stl/css :item-name)
:title (:name typography)} :title (:name component)}
(:name typography)]]]]) (:name component)]]])])
(when (:typographies exceeded) (when (:components exceeded)
[:div {:class (stl/css :libraries-updates-item)
:key (uuid/next)}
[:div {:class (stl/css :name-block.ellipsis)}
[:span {:class (stl/css :item-name)} "(...)"]]])])
(when-not (empty? colors)
[:div {:class (stl/css :libraries-updates-column)
:style #js {"--bullet-size" "24px"}}
(for [color colors]
(let [default-name (cond
(:gradient color) (uc/gradient-type->string (get-in color [:gradient :type]))
(:color color) (:color color)
:else (:value color))]
[:div {:class (stl/css :libraries-updates-item) [:div {:class (stl/css :libraries-updates-item)
:key (uuid/next)} :key (dm/str (:id color))}
[:div {:class (stl/css :name-block.ellipsis)}
[:span {:class (stl/css :item-name)} "(...)"]]])])]
(when (or (pos? (:components exceeded))
(pos? (:colors exceeded))
(pos? (:typographies exceeded)))
[:div {:class (stl/css :libraries-updates-see-all)}
[:& lb/link-button {:on-click see-all-assets
:value (str "(" (tr "workspace.libraries.update.see-all-changes") ")")}]])])]])]
[:div.section
(if (empty? libs-assets)
[:div.section-list-empty
i/library
(tr "workspace.libraries.no-libraries-need-sync")]
[:*
[:div.section-title (tr "workspace.libraries.library-updates")]
[:div.section-list
(for [[{:keys [id name] :as library}
exceeded
{:keys [components colors typographies]}] libs-assets]
[:div.section-list-item {:key (dm/str id)}
[:div.item-name name]
[:div.item-contents (describe-library
(count components)
0
(count colors)
(count typographies))]
[:input.item-button.item-update {:type "button"
:class (stl/css-case new-css-system
:disabled updating?)
:value (tr "workspace.libraries.update")
:data-library-id (dm/str id)
:on-click update}]
[:div.libraries-updates
(when-not (empty? components)
[:div.libraries-updates-column
(for [component components]
[:div.libraries-updates-item {:key (dm/str (:id component))}
(let [component (ctf/load-component-objects (:data library) component)
root-shape (ctf/get-component-root (:data library) component)]
[:*
[:& component-svg {:root-shape root-shape
:objects (:objects component)}]
[:div.name-block
[:span.item-name {:title (:name component)}
(:name component)]]])])
(when (:components exceeded)
[:div.libraries-updates-item {:key (uuid/next)}
[:div.name-block.ellipsis
[:span.item-name "(...)"]]])])
(when-not (empty? colors)
[:div.libraries-updates-column {:style #js {"--bullet-size" "24px"}}
(for [color colors]
(let [default-name (cond
(:gradient color) (uc/gradient-type->string (get-in color [:gradient :type]))
(:color color) (:color color)
:else (:value color))]
[:div.libraries-updates-item {:key (dm/str (:id color))}
[:*
[:& bc/color-bullet {:color {:color (:color color)
:opacity (:opacity color)}}]
[:div.name-block
[:span.item-name {:title (:name color)}
(:name color)]
(when-not (= (:name color) default-name)
[:span.color-value (:color color)])]]]))
(when (:colors exceeded)
[:div.libraries-updates-item {:key (uuid/next)}
[:div.name-block.ellipsis
[:span.item-name "(...)"]]])])
(when-not (empty? typographies)
[:div.libraries-updates-column
(for [typography typographies]
[:div.libraries-updates-item {:key (dm/str (:id typography))}
[:* [:*
[:div.typography-sample [:& bc/color-bullet {:color {:color (:color color)
{:style {:font-family (:font-family typography) :opacity (:opacity color)}}]
:font-weight (:font-weight typography) [:div {:class (stl/css :name-block)}
:font-style (:font-style typography)}} [:span {:class (stl/css :item-name)
(tr "workspace.assets.typography.sample")] :title (:name color)}
[:div.name-block (:name color)]
[:span.item-name {:title (:name typography)} (when-not (= (:name color) default-name)
(:name typography)]]]]) [:span.color-value (:color color)])]]]))
(when (:typographies exceeded) (when (:colors exceeded)
[:div.libraries-updates-item {:key (uuid/next)} [:div {:class (stl/css :libraries-updates-item)
[:div.name-block.ellipsis :key (uuid/next)}
[:span.item-name "(...)"]]])])] [:div {:class (stl/css :name-block.ellipsis)}
[:span {:class (stl/css :item-name)} "(...)"]]])])
(when (or (pos? (:components exceeded)) (when-not (empty? typographies)
(pos? (:colors exceeded)) [:div {:class (stl/css :libraries-updates-column)}
(pos? (:typographies exceeded))) (for [typography typographies]
[:div.libraries-updates-see-all [:div {:class (stl/css :libraries-updates-item)
[:& lb/link-button {:on-click see-all-assets :key (dm/str (:id typography))}
:value (str "(" (tr "workspace.libraries.update.see-all-changes") ")")}]])])]])]))) [:*
[:div {:style {:font-family (:font-family typography)
:font-weight (:font-weight typography)
:font-style (:font-style typography)}}
(tr "workspace.assets.typography.sample")]
[:div {:class (stl/css :name-block)}
[:span {:class (stl/css :item-name)
:title (:name typography)}
(:name typography)]]]])
(when (:typographies exceeded)
[:div {:class (stl/css :libraries-updates-item)
:key (uuid/next)}
[:div {:class (stl/css :name-block.ellipsis)}
[:span {:class (stl/css :item-name)} "(...)"]]])])]
(when (or (pos? (:components exceeded))
(pos? (:colors exceeded))
(pos? (:typographies exceeded)))
[:div {:class (stl/css :libraries-updates-see-all)}
[:& lb/link-button {:on-click see-all-assets
:value (str "(" (tr "workspace.libraries.update.see-all-changes") ")")}]])])]])]))
(mf/defc libraries-dialog (mf/defc libraries-dialog
{::mf/register modal/components {::mf/register modal/components
::mf/register-as :libraries-dialog} ::mf/register-as :libraries-dialog}
[{:keys [starting-tab] :as props :or {starting-tab :libraries}}] [{:keys [starting-tab] :as props :or {starting-tab :libraries}}]
(let [new-css-system (features/use-feature "styles/v2") (let [project (mf/deref refs/workspace-project)
project (mf/deref refs/workspace-project)
file-data (mf/deref refs/workspace-data) file-data (mf/deref refs/workspace-data)
file (mf/deref ref:workspace-file) file (mf/deref ref:workspace-file)
@ -685,12 +478,6 @@
shared-libraries shared-libraries
(mf/deref refs/workspace-shared-files) (mf/deref refs/workspace-shared-files)
select-libraries-tab
(mf/use-fn #(reset! selected-tab* :libraries))
select-updates-tab
(mf/use-fn #(reset! selected-tab* :updates))
on-tab-change on-tab-change
(mf/use-fn #(reset! selected-tab* %)) (mf/use-fn #(reset! selected-tab* %))
@ -702,55 +489,29 @@
(mf/with-effect [team-id] (mf/with-effect [team-id]
(when team-id (when team-id
(st/emit! (dwl/fetch-shared-files {:team-id team-id})))) (st/emit! (dwl/fetch-shared-files {:team-id team-id}))))
[:& (mf/provider ctx/new-css-system) {:value new-css-system}
(if new-css-system
[:div {:class (stl/css :modal-overlay)}
[:div {:class (stl/css :modal-dialog)}
[:button {:class (stl/css :close)
:on-click close-dialog}
i/close-refactor]
[:div {:class (stl/css :modal-title)}
"Libraries"]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :libraries-header)}
[:& tab-container
{:on-change-tab on-tab-change
:selected selected-tab
:collapsable? false}
[:& tab-element {:id :libraries :title (tr "workspace.libraries.libraries")}
[:div {:class (stl/css :libraries-content)}
[:& libraries-tab {:file-id file-id
:shared? shared?
:linked-libraries libraries
:shared-libraries shared-libraries}]]]
[:& tab-element {:id :updates :title (tr "workspace.libraries.updates")}
[:div {:class (stl/css :updates-content)}
[:& updates-tab {:file-id file-id
:file-data file-data
:libraries libraries}]]]]]]]]
[:div.modal-overlay [:div {:class (stl/css :modal-overlay)}
[:div.modal.libraries-dialog [:div {:class (stl/css :modal-dialog)}
[:a.close {:on-click close-dialog} i/close] [:button {:class (stl/css :close)
[:div.modal-content :on-click close-dialog}
[:div.libraries-header i/close-refactor]
[:div.header-item [:div {:class (stl/css :modal-title)}
{:class (stl/css-case new-css-system :active (= selected-tab :libraries)) "Libraries"]
:on-click select-libraries-tab} [:div {:class (stl/css :modal-content)}
(tr "workspace.libraries.libraries")] [:div {:class (stl/css :libraries-header)}
[:div.header-item [:& tab-container
{:class (stl/css-case new-css-system :active (= selected-tab :updates)) {:on-change-tab on-tab-change
:on-click select-updates-tab} :selected selected-tab
(tr "workspace.libraries.updates")]] :collapsable? false}
[:div.libraries-content [:& tab-element {:id :libraries :title (tr "workspace.libraries.libraries")}
(case selected-tab [:div {:class (stl/css :libraries-content)}
:libraries [:& libraries-tab {:file-id file-id
[:& libraries-tab {:file-id file-id :shared? shared?
:shared? shared? :linked-libraries libraries
:linked-libraries libraries :shared-libraries shared-libraries}]]]
:shared-libraries shared-libraries}] [:& tab-element {:id :updates :title (tr "workspace.libraries.updates")}
:updates [:div {:class (stl/css :updates-content)}
[:& updates-tab {:file-id file-id [:& updates-tab {:file-id file-id
:file-data file-data :file-data file-data
:libraries libraries}])]]]])])) :libraries libraries}]]]]]]]]))

372
frontend/src/app/main/ui/workspace/sidebar/assets/graphics.cljs
View file

@ -5,7 +5,7 @@
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.sidebar.assets.graphics (ns app.main.ui.workspace.sidebar.assets.graphics
(:require-macros [app.main.style :refer [css]]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
@ -46,7 +46,6 @@
dragging? (deref dragging*) dragging? (deref dragging*)
read-only? (mf/use-ctx ctx/workspace-read-only?) read-only? (mf/use-ctx ctx/workspace-read-only?)
new-css-system (mf/use-ctx ctx/new-css-system)
on-drop on-drop
(mf/use-fn (mf/use-fn
@ -84,90 +83,49 @@
(mf/use-fn (mf/use-fn
(mf/deps object-id on-asset-click) (mf/deps object-id on-asset-click)
(partial on-asset-click object-id nil))] (partial on-asset-click object-id nil))]
(if ^boolean new-css-system [:div {:ref item-ref
[:div {:ref item-ref :class-name (stl/css-case
:class-name (dom/classnames :selected (contains? selected-objects object-id)
(css :selected) (contains? selected-objects object-id) :grid-cell listing-thumbs?
(css :grid-cell) listing-thumbs? :enum-item (not listing-thumbs?))
(css :enum-item) (not listing-thumbs?)) :draggable (not read-only?)
:draggable (not read-only?) :on-click on-asset-click
:on-click on-asset-click :on-context-menu on-context-menu
:on-context-menu on-context-menu :on-drag-start on-grahic-drag-start
:on-drag-start on-grahic-drag-start :on-drag-enter on-drag-enter
:on-drag-enter on-drag-enter :on-drag-leave on-drag-leave
:on-drag-leave on-drag-leave :on-drag-over dom/prevent-default
:on-drag-over dom/prevent-default :on-drop on-drop}
:on-drop on-drop}
(when visible? (when visible?
[:* [:*
[:img {:src (when visible? (cf/resolve-file-media object true)) [:img {:src (when visible? (cf/resolve-file-media object true))
:class (css :graphic-image) :class (stl/css :graphic-image)
:draggable false}] ;; Also need to add css pointer-events: none :draggable false}] ;; Also need to add css pointer-events: none
(let [renaming? (= renaming (:id object))] (let [renaming? (= renaming (:id object))]
[:* [:*
[:& editable-label [:& editable-label
{:class (dom/classnames {:class (stl/css-case
(css :cell-name) listing-thumbs? :cell-name listing-thumbs?
(css :item-name) (not listing-thumbs?) :item-name (not listing-thumbs?)
(css :editing) renaming?) :editing renaming?)
:value (cfh/merge-path-item (:path object) (:name object)) :value (cfh/merge-path-item (:path object) (:name object))
:tooltip (cfh/merge-path-item (:path object) (:name object)) :tooltip (cfh/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}]
(when ^boolean dragging? (when ^boolean dragging?
[:div {:class (dom/classnames (css :dragging) true)}])])])] [:div {:class (stl/css :dragging)}])])])]))
[:div {:ref item-ref
:class-name (dom/classnames
:selected (contains? selected-objects object-id)
:grid-cell listing-thumbs?
:enum-item (not listing-thumbs?))
:draggable (not read-only?)
:on-click on-asset-click
:on-context-menu on-context-menu
:on-drag-start on-grahic-drag-start
:on-drag-enter on-drag-enter
:on-drag-leave on-drag-leave
:on-drag-over dom/prevent-default
:on-drop on-drop}
(when visible?
[:*
[:img {:src (when visible? (cf/resolve-file-media object true))
:loading "lazy"
:decoding "async"
:draggable false}] ;; Also need to add css pointer-events: none
(let [renaming? (= renaming (:id object))]
[:*
[:& editable-label
{:class (dom/classnames
:cell-name listing-thumbs?
:item-name (not listing-thumbs?)
:editing renaming?)
:value (cfh/merge-path-item (:path object) (:name object))
:tooltip (cfh/merge-path-item (:path object) (:name object))
:display-value (:name object)
:editing renaming?
:disable-dbl-click true
:on-change do-rename
:on-cancel cancel-rename}]
(when ^boolean dragging?
[:div.dragging])])])])))
(mf/defc graphics-group (mf/defc graphics-group
[{:keys [file-id prefix groups open-groups force-open? renaming listing-thumbs? selected-objects on-asset-click [{:keys [file-id prefix groups open-groups force-open? renaming listing-thumbs? selected-objects on-asset-click
on-drag-start do-rename cancel-rename on-rename-group on-ungroup on-drag-start do-rename cancel-rename on-rename-group on-ungroup
on-context-menu selected-full]}] on-context-menu selected-full]}]
(let [group-open? (get open-groups prefix true) (let [group-open? (get open-groups prefix true)
new-css-system (mf/use-ctx ctx/new-css-system)
dragging* (mf/use-state false) dragging* (mf/use-state false)
dragging? (deref dragging*) dragging? (deref dragging*)
@ -194,143 +152,75 @@
(mf/deps dragging* prefix selected-paths selected-full) (mf/deps dragging* prefix selected-paths selected-full)
(fn [event] (fn [event]
(cmm/on-drop-asset-group event dragging* prefix selected-paths selected-full dwl/rename-media)))] (cmm/on-drop-asset-group event dragging* prefix selected-paths selected-full dwl/rename-media)))]
(if ^boolean new-css-system [:div {:class (stl/css :graphics-group)
[:div {:class (dom/classnames (css :graphics-group) true) :on-drag-enter on-drag-enter
:on-drag-enter on-drag-enter :on-drag-leave on-drag-leave
:on-drag-leave on-drag-leave :on-drag-over dom/prevent-default
:on-drag-over dom/prevent-default :on-drop on-drop}
:on-drop on-drop} [:& grp/asset-group-title
[:& grp/asset-group-title {:file-id file-id
{:file-id file-id :section :graphics
:section :graphics :path prefix
:path prefix :group-open? group-open?
:group-open? group-open? :on-rename on-rename-group
:on-rename on-rename-group :on-ungroup on-ungroup}]
:on-ungroup on-ungroup}] (when group-open?
(when group-open? [:*
[:* (let [objects (get groups "" [])]
(let [objects (get groups "" [])] [:div {:class-name (stl/css-case
[:div {:class-name (dom/classnames :asset-grid listing-thumbs?
(css :asset-grid) listing-thumbs? :asset-enum (not listing-thumbs?)
(css :asset-enum) (not listing-thumbs?) :drop-space (and
(css :drop-space) (and (empty? objects)
(empty? objects) (some? groups)
(some? groups) (not dragging?)))
(not dragging?))) :on-drag-enter on-drag-enter
:on-drag-enter on-drag-enter :on-drag-leave on-drag-leave
:on-drag-leave on-drag-leave :on-drag-over dom/prevent-default
:on-drag-over dom/prevent-default :on-drop on-drop}
:on-drop on-drop}
(when ^boolean dragging? (when ^boolean dragging?
[:div {:class (dom/classnames (css :grid-placeholder) true)} "\u00A0"]) [:div {:class (stl/css :grid-placeholder)} "\u00A0"])
(when (and (empty? objects) (when (and (empty? objects)
(some? groups)) (some? groups))
[:div {:class (dom/classnames (css :drop-space) true)}]) [:div {:class (stl/css :drop-space)}])
(for [object objects] (for [object objects]
[:& graphics-item [:& graphics-item
{:key (dm/str "object-" (:id object)) {:key (dm/str "object-" (:id object))
:file-id file-id :file-id file-id
:object object :object object
:renaming renaming :renaming renaming
:listing-thumbs? listing-thumbs? :listing-thumbs? listing-thumbs?
:selected-objects selected-objects :selected-objects selected-objects
:on-asset-click on-asset-click :on-asset-click on-asset-click
:on-context-menu on-context-menu :on-context-menu on-context-menu
:on-drag-start on-drag-start :on-drag-start on-drag-start
:do-rename do-rename :do-rename do-rename
:cancel-rename cancel-rename :cancel-rename cancel-rename
:selected-full selected-full :selected-full selected-full
:selected-paths selected-paths}])]) :selected-paths selected-paths}])])
(for [[path-item content] groups] (for [[path-item content] groups]
(when-not (empty? path-item) (when-not (empty? path-item)
[:& graphics-group {:file-id file-id [:& graphics-group {:file-id file-id
:key path-item :key path-item
:prefix (cfh/merge-path-item prefix path-item) :prefix (cfh/merge-path-item prefix path-item)
:groups content :groups content
:open-groups open-groups :open-groups open-groups
:force-open? force-open? :force-open? force-open?
:renaming renaming :renaming renaming
:listing-thumbs? listing-thumbs? :listing-thumbs? listing-thumbs?
:selected-objects selected-objects :selected-objects selected-objects
:on-asset-click on-asset-click :on-asset-click on-asset-click
:on-drag-start on-drag-start :on-drag-start on-drag-start
:do-rename do-rename :do-rename do-rename
:cancel-rename cancel-rename :cancel-rename cancel-rename
:on-rename-group on-rename-group :on-rename-group on-rename-group
:on-ungroup on-ungroup :on-ungroup on-ungroup
:on-context-menu on-context-menu :on-context-menu on-context-menu
:selected-full selected-full :selected-full selected-full
:selected-paths selected-paths}]))])] :selected-paths selected-paths}]))])]))
[:div {:on-drag-enter on-drag-enter
:on-drag-leave on-drag-leave
:on-drag-over dom/prevent-default
:on-drop on-drop}
[:& grp/asset-group-title {:file-id file-id
:section :graphics
:path prefix
:group-open? group-open?
:on-rename on-rename-group
:on-ungroup on-ungroup}]
(when group-open?
[:*
(let [objects (get groups "" [])]
[:div {:class-name (dom/classnames
:asset-grid listing-thumbs?
:asset-enum (not listing-thumbs?)
:drop-space (and
(empty? objects)
(some? groups)
(not dragging?)))
:on-drag-enter on-drag-enter
:on-drag-leave on-drag-leave
:on-drag-over dom/prevent-default
:on-drop on-drop}
(when ^boolean dragging?
[:div.grid-placeholder "\u00A0"])
(when (and (empty? objects)
(some? groups))
[:div.drop-space])
(for [object objects]
[:& graphics-item {:key (dm/str "object-" (:id object))
:file-id file-id
:object object
:renaming renaming
:listing-thumbs? listing-thumbs?
:selected-objects selected-objects
:on-asset-click on-asset-click
:on-context-menu on-context-menu
:on-drag-start on-drag-start
:do-rename do-rename
:cancel-rename cancel-rename
:selected-full selected-full
:selected-paths selected-paths}])])
(for [[path-item content] groups]
(when-not (empty? path-item)
[:& graphics-group {:file-id file-id
:key path-item
:prefix (cfh/merge-path-item prefix path-item)
:groups content
:open-groups open-groups
:force-open? force-open?
:renaming renaming
:listing-thumbs? listing-thumbs?
:selected-objects selected-objects
:on-asset-click on-asset-click
:on-drag-start on-drag-start
:do-rename do-rename
:cancel-rename cancel-rename
:on-rename-group on-rename-group
:on-ungroup on-ungroup
:on-context-menu on-context-menu
:selected-full selected-full
:selected-paths selected-paths}]))])])))
(mf/defc graphics-section (mf/defc graphics-section
{::mf/wrap-props false} {::mf/wrap-props false}
@ -362,7 +252,6 @@
components-v2 (mf/use-ctx ctx/components-v2) components-v2 (mf/use-ctx ctx/components-v2)
team-id (mf/use-ctx ctx/current-team-id) team-id (mf/use-ctx ctx/current-team-id)
new-css-system (mf/use-ctx ctx/new-css-system)
add-graphic add-graphic
(mf/use-fn (mf/use-fn
@ -496,26 +385,16 @@
:section :graphics :section :graphics
:assets-count (count objects) :assets-count (count objects)
:open? open?} :open? open?}
(if new-css-system (when local?
(when local? [:& cmm/asset-section-block {:role :title-button}
[:& cmm/asset-section-block {:role :title-button} (when (and (not components-v2) (not read-only?))
(when (and (not components-v2) (not read-only?)) [:button {:class (stl/css :assets-btn)
[:button {:class (dom/classnames (css :assets-btn) true) :on-click add-graphic}
:on-click add-graphic} i/add-refactor
i/add-refactor [:& file-uploader {:accept cm/str-image-types
[:& file-uploader {:accept cm/str-image-types :multi true
:multi true :ref input-ref
:ref input-ref :on-selected on-file-selected}]])])
:on-selected on-file-selected}]])])
(when local?
[:& cmm/asset-section-block {:role :title-button}
(when (and (not components-v2) (not read-only?))
[:div.assets-button {:on-click add-graphic}
i/plus
[:& file-uploader {:accept cm/str-image-types
:multi true
:ref input-ref
:on-selected on-file-selected}]])]))
[:& cmm/asset-section-block {:role :content} [:& cmm/asset-section-block {:role :content}
[:& graphics-group {:file-id file-id [:& graphics-group {:file-id file-id
@ -538,21 +417,14 @@
[:& cmm/assets-context-menu [:& cmm/assets-context-menu
{:on-close on-close-menu {:on-close on-close-menu
:state @menu-state :state @menu-state
:options (if new-css-system :options [(when-not (or multi-objects? multi-assets?)
[(when-not (or multi-objects? multi-assets?) {:option-name (tr "workspace.assets.rename")
{:option-name (tr "workspace.assets.rename") :id "assets-rename-graphics"
:id "assets-rename-graphics" :option-handler on-rename})
:option-handler on-rename}) {:option-name (tr "workspace.assets.delete")
{:option-name (tr "workspace.assets.delete") :id "assets-delete-graphics"
:id "assets-delete-graphics" :option-handler on-delete}
:option-handler on-delete} (when-not multi-assets?
(when-not multi-assets? {:option-name (tr "workspace.assets.group")
{:option-name (tr "workspace.assets.group") :id "assets-group-graphics"
:id "assets-group-graphics" :option-handler on-group})]}])]]))
:option-handler on-group})]
[(when-not (or multi-objects? multi-assets?)
[(tr "workspace.assets.rename") on-rename])
[(tr "workspace.assets.delete") on-delete]
(when-not multi-assets?
[(tr "workspace.assets.group") on-group])])}])]]))

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

@ -8,48 +8,14 @@
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm]
[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.components.select :refer [select]] [app.main.ui.components.select :refer [select]]
[app.main.ui.context :as ctx]
[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]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(defn- width->string [width]
(if (= width :multiple)
""
(str (or width 1))))
(defn- enum->string [value]
(if (= value :multiple)
""
(pr-str value)))
(defn- stroke-cap-names []
[[nil (tr "workspace.options.stroke-cap.none") false]
[:line-arrow (tr "workspace.options.stroke-cap.line-arrow") true]
[:triangle-arrow (tr "workspace.options.stroke-cap.triangle-arrow") false]
[:square-marker (tr "workspace.options.stroke-cap.square-marker") false]
[:circle-marker (tr "workspace.options.stroke-cap.circle-marker") false]
[:diamond-marker (tr "workspace.options.stroke-cap.diamond-marker") false]
[:round (tr "workspace.options.stroke-cap.round") true]
[:square (tr "workspace.options.stroke-cap.square") false]])
(defn- value->img [value]
(when (and value (not= value :multiple))
(str "images/cap-" (name value) ".svg")))
(defn- value->name [value]
(if (= value :multiple)
"--"
(-> (d/seek #(= (first %) value) (stroke-cap-names))
(second))))
(mf/defc stroke-row (mf/defc stroke-row
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [index [{:keys [index
@ -63,8 +29,6 @@
on-stroke-width-change on-stroke-width-change
on-stroke-style-change on-stroke-style-change
on-stroke-alignment-change on-stroke-alignment-change
open-caps-select
close-caps-select
on-stroke-cap-start-change on-stroke-cap-start-change
on-stroke-cap-end-change on-stroke-cap-end-change
on-stroke-cap-switch on-stroke-cap-switch
@ -73,17 +37,8 @@
on-blur on-blur
disable-stroke-style disable-stroke-style
select-on-focus]}] select-on-focus]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)
start-caps-state* (mf/use-state {:open? false
:top 0
:left 0})
start-caps-state (deref start-caps-state*) (let [on-drop
end-caps-state (mf/use-state {:open? false
:top 0
:left 0})
on-drop
(fn [_ data] (fn [_ data]
(on-reorder (:index data))) (on-reorder (:index data)))
@ -182,173 +137,74 @@
(mf/deps index on-stroke-cap-switch) (mf/deps index on-stroke-cap-switch)
#(on-stroke-cap-switch index))] #(on-stroke-cap-switch index))]
(if new-css-system [:div {:class (stl/css-case
[:div {:class (stl/css-case :stroke-data true
:stroke-data true :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}
;; Stroke Color
[:& color-row {:color {:color (:stroke-color stroke)
:opacity (:stroke-opacity stroke)
:id (:stroke-color-ref-id stroke)
:file-id (:stroke-color-ref-file stroke)
:gradient (:stroke-color-gradient stroke)
:image (:stroke-image stroke)}
:index index
:title title
:on-change on-color-change-refactor
:on-detach on-color-detach-refactor
:on-remove on-remove-refactor
:disable-drag disable-drag
:on-focus on-focus
:select-on-focus select-on-focus
:on-blur on-blur}]
;; Stroke Width, Alignment & Style
[:div {:class (stl/css :stroke-options)}
[:div {:class (stl/css :stroke-width-input-element)
:title (tr "workspace.options.stroke-width")}
[:span {:class (stl/css :icon)}
i/stroke-size-refactor]
[:> numeric-input*
{:min 0
:className (stl/css :stroke-width-input)
:value stroke-width
:placeholder (tr "settings.multiple")
:on-change on-width-change
:on-focus on-focus
:select-on-focus select-on-focus
:on-blur on-blur}]]
[:div {:class (stl/css :select-wrapper)
:data-test "stroke.alignment"}
[:& select
{:default-value stroke-alignment
:options stroke-alignment-options
:on-change on-alignment-change}]]
(when-not disable-stroke-style
[:div {:class (stl/css :select-wrapper)
:data-test "stroke.style"}
[:& select
{:default-value stroke-style
:options stroke-style-options
:on-change on-style-change}]])]
;; Stroke Caps
(when show-caps
[:div {:class (stl/css :stroke-caps-options)}
[:div {:class (stl/css :cap-select)}
[:& select
{:default-value (:stroke-cap-start stroke)
:options stroke-caps-options
:on-change on-caps-start-change}]]
[:button {:class (stl/css :swap-caps-btn)
:on-click on-cap-switch}
i/switch-refactor]
[:div {:class (stl/css :cap-select)}
[:& select
{:default-value (:stroke-cap-end stroke)
:options stroke-caps-options
:on-change on-caps-end-change}]]])]
[:div.border-data {:class (dom/classnames
:dnd-over-top (= (:over dprops) :top)
:dnd-over-bot (= (:over dprops) :bot))
:ref dref}
;; Stroke Color ;; Stroke Color
[:& color-row {:color {:color (:stroke-color stroke) [:& color-row {:color {:color (:stroke-color stroke)
:opacity (:stroke-opacity stroke) :opacity (:stroke-opacity stroke)
:id (:stroke-color-ref-id stroke) :id (:stroke-color-ref-id stroke)
:file-id (:stroke-color-ref-file stroke) :file-id (:stroke-color-ref-file stroke)
:gradient (:stroke-color-gradient stroke) :gradient (:stroke-color-gradient stroke)
:image (:stroke-image stroke)} :image (:stroke-image stroke)}
:index index :index index
:title title :title title
:on-change (on-color-change index) :on-change on-color-change-refactor
:on-detach (on-color-detach index) :on-detach on-color-detach-refactor
:on-remove (on-remove index) :on-remove on-remove-refactor
:disable-drag disable-drag :disable-drag disable-drag
:on-focus on-focus :on-focus on-focus
:select-on-focus select-on-focus :select-on-focus select-on-focus
:on-blur on-blur}] :on-blur on-blur}]
;; Stroke Width, Alignment & Style ;; Stroke Width, Alignment & Style
[:div.row-flex [:div {:class (stl/css :stroke-options)}
[:div.input-element [:div {:class (stl/css :stroke-width-input-element)
{:class (dom/classnames :pixels (not= (:stroke-width stroke) :multiple)) :title (tr "workspace.options.stroke-width")}
:title (tr "workspace.options.stroke-width")} [:span {:class (stl/css :icon)}
i/stroke-size-refactor]
[:> numeric-input*
{:min 0
:className (stl/css :stroke-width-input)
:value stroke-width
:placeholder (tr "settings.multiple")
:on-change on-width-change
:on-focus on-focus
:select-on-focus select-on-focus
:on-blur on-blur}]]
[:> numeric-input* [:div {:class (stl/css :select-wrapper)
{:min 0 :data-test "stroke.alignment"}
:value (-> (:stroke-width stroke) width->string) [:& select
:placeholder (tr "settings.multiple") {:default-value stroke-alignment
:on-change (on-stroke-width-change index) :options stroke-alignment-options
:on-focus on-focus :on-change on-alignment-change}]]
:select-on-focus select-on-focus
:on-blur on-blur}]]
[:select#style.input-select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element (when-not disable-stroke-style
:value (enum->string (:stroke-alignment stroke)) [:div {:class (stl/css :select-wrapper)
:on-change (on-stroke-alignment-change index)} :data-test "stroke.style"}
(when (= (:stroke-alignment stroke) :multiple) [:& select
[:option {:value ""} "--"]) {:default-value stroke-style
[:option {:value ":center"} (tr "workspace.options.stroke.center")] :options stroke-style-options
[:option {:value ":inner"} (tr "workspace.options.stroke.inner")] :on-change on-style-change}]])]
[:option {:value ":outer"} (tr "workspace.options.stroke.outer")]]
(when-not disable-stroke-style
[:select#style.input-select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
:value (enum->string (:stroke-style stroke))
:on-change (on-stroke-style-change index)}
(when (= (:stroke-style stroke) :multiple)
[:option {:value ""} "--"])
[:option {:value ":solid"} (tr "workspace.options.stroke.solid")]
[:option {:value ":dotted"} (tr "workspace.options.stroke.dotted")]
[:option {:value ":dashed"} (tr "workspace.options.stroke.dashed")]
[:option {:value ":mixed"} (tr "workspace.options.stroke.mixed")]])]
;; Stroke Caps ;; Stroke Caps
(when show-caps (when show-caps
[:div.row-flex [:div {:class (stl/css :stroke-caps-options)}
[:div.cap-select {:tab-index 0 ;; tab-index to make the element focusable [:div {:class (stl/css :cap-select)}
:on-click (open-caps-select start-caps-state*)} [:& select
(value->name (:stroke-cap-start stroke)) {:default-value (:stroke-cap-start stroke)
[:span.cap-select-button :options stroke-caps-options
i/arrow-down]] :on-change on-caps-start-change}]]
[:& dropdown {:show (:open? start-caps-state)
:on-close (close-caps-select start-caps-state*)}
[:ul.dropdown.cap-select-dropdown {:style {:top (:top start-caps-state)
:left (:left start-caps-state)}}
(for [[idx [value label separator]] (d/enumerate (stroke-cap-names))]
(let [img (value->img value)]
[:li {:key (dm/str "start-cap-" idx)
:class (dom/classnames :separator separator)
:on-click #(on-stroke-cap-start-change index value)}
(when img [:img {:src (value->img value)}])
label]))]]
[:div.element-set-actions-button {:on-click #(on-stroke-cap-switch index)} [:button {:class (stl/css :swap-caps-btn)
i/switch] :on-click on-cap-switch}
i/switch-refactor]
[:div.cap-select {:tab-index 0 [:div {:class (stl/css :cap-select)}
:on-click (open-caps-select end-caps-state)} [:& select
(value->name (:stroke-cap-end stroke)) {:default-value (:stroke-cap-end stroke)
[:span.cap-select-button :options stroke-caps-options
i/arrow-down]] :on-change on-caps-end-change}]]])]))
[:& dropdown {:show (:open? @end-caps-state)
:on-close (close-caps-select end-caps-state)}
[:ul.dropdown.cap-select-dropdown {:style {:top (:top @end-caps-state)
:left (:left @end-caps-state)}}
(for [[idx [value label separator]] (d/enumerate (stroke-cap-names))]
(let [img (value->img value)]
[:li {:key (dm/str "end-cap-" idx)
:class (dom/classnames :separator separator)
:on-click #(on-stroke-cap-end-change index value)}
(when img [:img {:src (value->img value)}])
label]))]]])])))

4
frontend/src/features.cljs
View file

@ -14,10 +14,6 @@
(defn ^:export is-components-v2 [] (defn ^:export is-components-v2 []
(features/active-feature? @st/state "components/v2")) (features/active-feature? @st/state "components/v2"))
(defn ^:export new-css-system []
(tm/schedule-on-idle #(st/emit! (features/toggle-feature "styles/v2")))
nil)
(defn ^:export grid [] (defn ^:export grid []
(tm/schedule-on-idle #(st/emit! (features/toggle-feature "layout/grid"))) (tm/schedule-on-idle #(st/emit! (features/toggle-feature "layout/grid")))
nil) nil)