Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-19 03:01:27 -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
Show stats 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]
(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)