Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-19 19:21:23 -05:00
Code Issues 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

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

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

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

@ -7,7 +7,6 @@
(ns app.main.ui
(:require
[app.config :as cf]
[app.main.features :as features]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.context :as ctx]
@ -58,10 +57,8 @@
(mf/defc main-page
{::mf/wrap [#(mf/catch % {:fallback on-main-error})]}
[{:keys [route profile]}]
(let [{:keys [data params]} route
new-css-system (features/use-feature "styles/v2")]
(let [{:keys [data params]} route]
[:& (mf/provider ctx/current-route) {:value route}
[:& (mf/provider ctx/new-css-system) {:value new-css-system}
(case (:name data)
(:auth-login
:auth-register
@ -171,7 +168,7 @@
:frame-preview
[:& frame-preview/frame-preview]
nil)]]))
nil)]))
(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
[app.common.data.macros :as dm]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.util.timers :as timers]
[app.util.webapi :as wapi]
@ -16,8 +15,7 @@
[rumext.v2 :as mf]))
(mf/defc copy-button [{:keys [data on-copied children class]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)
just-copied (mf/use-state false)]
(let [just-copied (mf/use-state false)]
(mf/use-effect
(mf/deps @just-copied)
(fn []
@ -27,24 +25,15 @@
(let [sub (timers/schedule 1000 #(reset! just-copied false))]
;; On unmount we dispose the timer
#(rx/-dispose sub)))))
(if new-css-system
[:button {:class (dm/str class " " (stl/css-case :copy-button true
:copy-wrapper (some? children)))
:on-click #(when-not @just-copied
(reset! just-copied true)
(wapi/write-to-clipboard (if (fn? data) (data) data)))}
[:button {:class (dm/str class " " (stl/css-case :copy-button true
:copy-wrapper (some? children)))
:on-click #(when-not @just-copied
(reset! just-copied true)
(wapi/write-to-clipboard (if (fn? data) (data) data)))}
(when children
children)
[:span {:class (stl/css :icon-btn)}
(if @just-copied
i/tick-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)])))
(when children
children)
[:span {:class (stl/css :icon-btn)}
(if @just-copied
i/tick-refactor
i/clipboard-refactor)]]))

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

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

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

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

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

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

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

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

@ -23,7 +23,6 @@
(def libraries (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-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
[app.main.data.modal :as dm]
[app.main.features :as features]
[app.main.store :as st]
[app.main.ui.context :as ctx]
[app.util.dom :as dom]
[app.util.keyboard :as k]
[goog.events :as events]
@ -86,9 +84,7 @@
(mf/defc modal
{::mf/wrap-props false}
[]
(let [modal (mf/deref modal-ref)
new-css-system (features/use-feature "styles/v2")]
(let [modal (mf/deref modal-ref)]
(when modal
[:& (mf/provider ctx/new-css-system) {:value new-css-system}
[:& modal-wrapper {:data modal
:key (:id modal)}]])))
[:& modal-wrapper {:data modal
:key (:id modal)}])))

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

@ -7,9 +7,7 @@
(ns app.main.ui.static
(:require-macros [app.main.style :as stl])
(:require
[app.main.features :as features]
[app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.util.globals :as globals]
[app.util.i18n :refer [tr]]
@ -81,16 +79,14 @@
(mf/defc exception-page
[{:keys [data] :as props}]
(let [new-css-system (features/use-feature "styles/v2")]
[:& (mf/provider ctx/new-css-system) {:value new-css-system}
(case (:type data)
:not-found
[:& not-found]
(case (:type data)
: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.main.data.viewer :as dv]
[app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.hooks.resize :refer [use-resize-hook]]
[app.main.ui.viewer.inspect.left-sidebar :refer [left-sidebar]]
[app.main.ui.viewer.inspect.render :refer [render-frame-svg]]
@ -42,8 +41,7 @@
(mf/defc viewport
[{:keys [local file page frame index viewer-pagination size share-id]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)
inspect-svg-container-ref (mf/use-ref nil)
(let [inspect-svg-container-ref (mf/use-ref nil)
current-section* (mf/use-state :info)
current-section (deref current-section*)
@ -92,60 +90,32 @@
(fn []
(st/emit! (dv/select-shape (:id frame)))))
(if new-css-system
[:*
[:& left-sidebar {:frame frame
:local local
:page page}]
[:div {:class (stl/css :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 {:class (stl/css :inspect-svg-container)
:ref inspect-svg-container-ref}
[:& render-frame-svg {:frame frame :page page :local local :size size}]]]
[:*
[:& left-sidebar {:frame frame
:local local
:page page}]
[:div {:class (stl/css :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 {:class (stl/css :inspect-svg-container)
:ref inspect-svg-container-ref}
[:& render-frame-svg {:frame frame :page page :local local :size size}]]]
[:div {:class (stl/css-case :sidebar-container true
:not-expand (not can-be-expanded?)
:expanded can-be-expanded?)
[:div {:class (stl/css-case :sidebar-container true
:not-expand (not can-be-expanded?)
:expanded can-be-expanded?)
:style #js {"--width" (when can-be-expanded? (dm/str right-size "px"))}}
(when can-be-expanded?
[:div {:class (stl/css :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}]]]
;;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}]]])))
:style #js {"--width" (when can-be-expanded? (dm/str right-size "px"))}}
(when can-be-expanded?
[:div {:class (stl/css :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.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.context :as ctx]
[app.util.i18n :refer [tr]]
[cuerdas.core :as str]
[rumext.v2 :as mf]))

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

@ -9,17 +9,9 @@
(:require
[app.common.data :as d]
[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.refs :as refs]
[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-name :refer [layer-name]]
[app.util.dom :as dom]
[app.util.keyboard :as kbd]
[okulary.core :as l]
@ -31,24 +23,13 @@
(l/derived st/state)))
(mf/defc layer-item
[{:keys [item selected objects disable-collapse? depth component-child? hide-toggle?] :as props}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)
id (:id item)
name (:name item)
[{:keys [item selected objects depth component-child? hide-toggle?] :as props}]
(let [id (:id item)
hidden? (:hidden item)
touched? (-> item :touched seq boolean)
selected? (contains? selected id)
item-ref (mf/use-ref nil)
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))
collapsed-iref
@ -57,7 +38,6 @@
(make-collapsed-iref id))
expanded? (not (mf/deref collapsed-iref))
absolute? (ctl/item-absolute? item)
toggle-collapse
(mf/use-callback
@ -87,102 +67,50 @@
(when (and (= (count selected) 1) selected?)
(dom/scroll-into-view-if-needed! (mf/ref-val item-ref) true))))
(if new-css-system
[:& layer-item-inner
{:ref item-ref
:item item
:depth depth
:read-only? true
:highlighted? false
:selected? selected?
:component-tree? component-tree?
:hidden? hidden?
:filtered? false
:expanded? expanded?
:hide-toggle? hide-toggle?
:on-select-shape select-shape
:on-toggle-collapse toggle-collapse}
[:& layer-item-inner
{:ref item-ref
:item item
:depth depth
:read-only? true
:highlighted? false
:selected? selected?
:component-tree? component-tree?
:hidden? hidden?
:filtered? false
:expanded? expanded?
:hide-toggle? hide-toggle?
:on-select-shape select-shape
:on-toggle-collapse toggle-collapse}
(when (and (:shapes item) expanded?)
[:div {:class (stl/css-case
:element-children true
:parent-selected selected?)}
(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 (dm/str id)
:depth depth
: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)}]))])])))
(when (and (:shapes item) expanded?)
[:div {:class (stl/css-case
:element-children true
:parent-selected selected?)}
(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 (dm/str id)
:depth depth
:component-child? component-tree?}]))])]))
(mf/defc left-sidebar
[{:keys [frame page local]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)
selected (:selected local)
(let [selected (:selected local)
objects (:objects page)]
(if new-css-system
[:aside {:class (stl/css :settings-bar-left)}
[:div {:class (stl/css :settings-bar-inside)}
[:div {:class (stl/css :element-list)}
[:& layer-item
{:item frame
:selected selected
:index 0
:objects objects
:sortable? false
:filtered? false
:depth -2
: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}]]]])))
[:aside {:class (stl/css :settings-bar-left)}
[:div {:class (stl/css :settings-bar-inside)}
[:div {:class (stl/css :element-list)}
[:& layer-item
{:item frame
:selected selected
:index 0
:objects objects
:sortable? false
:filtered? false
:depth -2
:hide-toggle? true}]]]]))

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

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

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

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

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

@ -5,7 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.sidebar.assets.graphics
(:require-macros [app.main.style :refer [css]])
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
@ -46,7 +46,6 @@
dragging? (deref dragging*)
read-only? (mf/use-ctx ctx/workspace-read-only?)
new-css-system (mf/use-ctx ctx/new-css-system)
on-drop
(mf/use-fn
@ -84,90 +83,49 @@
(mf/use-fn
(mf/deps object-id on-asset-click)
(partial on-asset-click object-id nil))]
(if ^boolean new-css-system
[:div {:ref item-ref
:class-name (dom/classnames
(css :selected) (contains? selected-objects object-id)
(css :grid-cell) listing-thumbs?
(css :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}
[:div {:ref item-ref
:class-name (stl/css-case
: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))
:class (css :graphic-image)
:draggable false}] ;; Also need to add css pointer-events: none
(when visible?
[:*
[:img {:src (when visible? (cf/resolve-file-media object true))
:class (stl/css :graphic-image)
:draggable false}] ;; Also need to add css pointer-events: none
(let [renaming? (= renaming (:id object))]
[:*
[:& editable-label
{:class (dom/classnames
(css :cell-name) listing-thumbs?
(css :item-name) (not listing-thumbs?)
(css :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}]
(let [renaming? (= renaming (:id object))]
[:*
[:& editable-label
{:class (stl/css-case
: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 {:class (dom/classnames (css :dragging) true)}])])])]
[: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])])])])))
(when ^boolean dragging?
[:div {:class (stl/css :dragging)}])])])]))
(mf/defc graphics-group
[{: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-context-menu selected-full]}]
(let [group-open? (get open-groups prefix true)
new-css-system (mf/use-ctx ctx/new-css-system)
dragging* (mf/use-state false)
dragging? (deref dragging*)
@ -194,143 +152,75 @@
(mf/deps dragging* prefix selected-paths selected-full)
(fn [event]
(cmm/on-drop-asset-group event dragging* prefix selected-paths selected-full dwl/rename-media)))]
(if ^boolean new-css-system
[:div {:class (dom/classnames (css :graphics-group) true)
: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
(css :asset-grid) listing-thumbs?
(css :asset-enum) (not listing-thumbs?)
(css :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}
[:div {:class (stl/css :graphics-group)
: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 (stl/css-case
: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 {:class (dom/classnames (css :grid-placeholder) true)} "\u00A0"])
(when ^boolean dragging?
[:div {:class (stl/css :grid-placeholder)} "\u00A0"])
(when (and (empty? objects)
(some? groups))
[:div {:class (dom/classnames (css :drop-space) true)}])
(when (and (empty? objects)
(some? groups))
[:div {:class (stl/css :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}]))])]
[: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}]))])])))
(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/wrap-props false}
@ -362,7 +252,6 @@
components-v2 (mf/use-ctx ctx/components-v2)
team-id (mf/use-ctx ctx/current-team-id)
new-css-system (mf/use-ctx ctx/new-css-system)
add-graphic
(mf/use-fn
@ -496,26 +385,16 @@
:section :graphics
:assets-count (count objects)
:open? open?}
(if new-css-system
(when local?
[:& cmm/asset-section-block {:role :title-button}
(when (and (not components-v2) (not read-only?))
[:button {:class (dom/classnames (css :assets-btn) true)
:on-click add-graphic}
i/add-refactor
[:& file-uploader {:accept cm/str-image-types
:multi true
:ref input-ref
: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}]])]))
(when local?
[:& cmm/asset-section-block {:role :title-button}
(when (and (not components-v2) (not read-only?))
[:button {:class (stl/css :assets-btn)
:on-click add-graphic}
i/add-refactor
[:& file-uploader {:accept cm/str-image-types
:multi true
:ref input-ref
:on-selected on-file-selected}]])])
[:& cmm/asset-section-block {:role :content}
[:& graphics-group {:file-id file-id
@ -538,21 +417,14 @@
[:& cmm/assets-context-menu
{:on-close on-close-menu
:state @menu-state
:options (if new-css-system
[(when-not (or multi-objects? multi-assets?)
{:option-name (tr "workspace.assets.rename")
:id "assets-rename-graphics"
:option-handler on-rename})
{:option-name (tr "workspace.assets.delete")
:id "assets-delete-graphics"
:option-handler on-delete}
(when-not multi-assets?
{:option-name (tr "workspace.assets.group")
:id "assets-group-graphics"
: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])])}])]]))
:options [(when-not (or multi-objects? multi-assets?)
{:option-name (tr "workspace.assets.rename")
:id "assets-rename-graphics"
:option-handler on-rename})
{:option-name (tr "workspace.assets.delete")
:id "assets-delete-graphics"
:option-handler on-delete}
(when-not multi-assets?
{:option-name (tr "workspace.assets.group")
:id "assets-group-graphics"
:option-handler 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
[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.select :refer [select]]
[app.main.ui.context :as ctx]
[app.main.ui.hooks :as h]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[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/wrap-props false}
[{:keys [index
@ -63,8 +29,6 @@
on-stroke-width-change
on-stroke-style-change
on-stroke-alignment-change
open-caps-select
close-caps-select
on-stroke-cap-start-change
on-stroke-cap-end-change
on-stroke-cap-switch
@ -73,17 +37,8 @@
on-blur
disable-stroke-style
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*)
end-caps-state (mf/use-state {:open? false
:top 0
:left 0})
on-drop
(let [on-drop
(fn [_ data]
(on-reorder (:index data)))
@ -182,173 +137,74 @@
(mf/deps index on-stroke-cap-switch)
#(on-stroke-cap-switch index))]
(if new-css-system
[:div {:class (stl/css-case
:stroke-data true
:dnd-over-top (= (:over dprops) :top)
:dnd-over-bot (= (:over dprops) :bot))
: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}
[:div {:class (stl/css-case
:stroke-data true
:dnd-over-top (= (:over dprops) :top)
:dnd-over-bot (= (:over dprops) :bot))
: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 index)
:on-detach (on-color-detach index)
:on-remove (on-remove index)
:disable-drag disable-drag
:on-focus on-focus
:select-on-focus select-on-focus
:on-blur on-blur}]
[:& 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.row-flex
[:div.input-element
{:class (dom/classnames :pixels (not= (:stroke-width stroke) :multiple))
:title (tr "workspace.options.stroke-width")}
[: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}]]
[:> numeric-input*
{:min 0
:value (-> (:stroke-width stroke) width->string)
:placeholder (tr "settings.multiple")
:on-change (on-stroke-width-change index)
: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}]]
[:select#style.input-select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
:value (enum->string (:stroke-alignment stroke))
:on-change (on-stroke-alignment-change index)}
(when (= (:stroke-alignment stroke) :multiple)
[:option {:value ""} "--"])
[:option {:value ":center"} (tr "workspace.options.stroke.center")]
[:option {:value ":inner"} (tr "workspace.options.stroke.inner")]
[: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")]])]
(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.row-flex
[:div.cap-select {:tab-index 0 ;; tab-index to make the element focusable
:on-click (open-caps-select start-caps-state*)}
(value->name (:stroke-cap-start stroke))
[:span.cap-select-button
i/arrow-down]]
[:& 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]))]]
(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}]]
[:div.element-set-actions-button {:on-click #(on-stroke-cap-switch index)}
i/switch]
[:button {:class (stl/css :swap-caps-btn)
:on-click on-cap-switch}
i/switch-refactor]
[:div.cap-select {:tab-index 0
:on-click (open-caps-select end-caps-state)}
(value->name (:stroke-cap-end stroke))
[:span.cap-select-button
i/arrow-down]]
[:& 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]))]]])])))
[:div {:class (stl/css :cap-select)}
[:& select
{:default-value (:stroke-cap-end stroke)
:options stroke-caps-options
:on-change on-caps-end-change}]]])]))

4
frontend/src/features.cljs
View file

@ -14,10 +14,6 @@
(defn ^:export is-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 []
(tm/schedule-on-idle #(st/emit! (features/toggle-feature "layout/grid")))
nil)