mirror of
https://github.com/penpot/penpot.git
synced 2025-06-02 18:52:19 +02:00
Merge pull request #6214 from penpot/palba-cleanup-components-v2
♻️ Cleanup of componentsv2 ✨ Add check to avoid open files with components v1
This commit is contained in:
Pablo Alba
GitHub
commit
af1d5b86e1
44 changed files with 346 additions and 1208 deletions
|
|
@ -582,7 +582,6 @@
|
|||
component
|
||||
fdata
|
||||
(gpt/point (:x shape) (:y shape))
|
||||
true
|
||||
{:keep-ids? true :force-frame-id (:frame-id shape)})
|
||||
children (into {} (map (fn [shape] [(:id shape) shape]) new-shapes))
|
||||
objs (assoc objs id new-shape)]
|
||||
|
|
|
|||
|
|
@ -395,9 +395,9 @@
|
|||
|
||||
(defn- add-component2
|
||||
"This is the second step of the component creation."
|
||||
([selected components-v2]
|
||||
(add-component2 nil selected components-v2))
|
||||
([id-ref selected components-v2]
|
||||
([selected]
|
||||
(add-component2 nil selected))
|
||||
([id-ref selected]
|
||||
(ptk/reify ::add-component2
|
||||
ev/Event
|
||||
(-data [_]
|
||||
|
|
@ -413,8 +413,7 @@
|
|||
parents (into #{} (map :parent-id) shapes)]
|
||||
(when-not (empty? shapes)
|
||||
(let [[root component-id changes]
|
||||
(cll/generate-add-component (pcb/empty-changes it) shapes objects page-id file-id components-v2
|
||||
dwg/prepare-create-group
|
||||
(cll/generate-add-component (pcb/empty-changes it) shapes objects page-id file-id
|
||||
cfsh/prepare-create-artboard-from-selection)]
|
||||
(when id-ref
|
||||
(reset! id-ref component-id))
|
||||
|
|
@ -439,12 +438,11 @@
|
|||
selected (->> (d/nilv ids (dsh/lookup-selected state))
|
||||
(cfh/clean-loops objects))
|
||||
selected-objects (map #(get objects %) selected)
|
||||
components-v2 (features/active-feature? state "components/v2")
|
||||
;; We don't want to change the structure of component copies
|
||||
can-make-component (every? true? (map #(ctn/valid-shape-for-component? objects %) selected-objects))]
|
||||
|
||||
(when can-make-component
|
||||
(rx/of (add-component2 id-ref selected components-v2))))))))
|
||||
(rx/of (add-component2 id-ref selected))))))))
|
||||
|
||||
(defn add-multiple-components
|
||||
"Add several new components to current file library, from the currently selected shapes."
|
||||
|
|
@ -452,15 +450,14 @@
|
|||
(ptk/reify ::add-multiple-components
|
||||
ptk/WatchEvent
|
||||
(watch [_ state _]
|
||||
(let [components-v2 (features/active-feature? state "components/v2")
|
||||
objects (dsh/lookup-page-objects state)
|
||||
(let [objects (dsh/lookup-page-objects state)
|
||||
selected (->> (dsh/lookup-selected state)
|
||||
(cfh/clean-loops objects))
|
||||
selected-objects (map #(get objects %) selected)
|
||||
;; We don't want to change the structure of component copies
|
||||
can-make-component (every? true? (map #(ctn/valid-shape-for-component? objects %) selected-objects))
|
||||
added-components (map (fn [id]
|
||||
(with-meta (add-component2 [id] components-v2)
|
||||
(with-meta (add-component2 [id])
|
||||
{:multiple true}))
|
||||
selected)
|
||||
undo-id (js/Symbol)]
|
||||
|
|
@ -489,7 +486,7 @@
|
|||
(rx/empty)
|
||||
(let [data (dsh/lookup-file-data state)
|
||||
changes (-> (pcb/empty-changes it)
|
||||
(cll/generate-rename-component id new-name data true))]
|
||||
(cll/generate-rename-component id new-name data))]
|
||||
(rx/of (dch/commit-changes changes))))))))
|
||||
|
||||
(defn rename-component-and-main-instance
|
||||
|
|
@ -512,7 +509,6 @@
|
|||
(rx/concat
|
||||
(rx/of (rename-component component-id clean-name))
|
||||
|
||||
;; NOTE: only when components-v2 is enabled
|
||||
(when (and shape-id page-id)
|
||||
(rx/of (dwsh/update-shapes [shape-id] #(assoc % :name clean-name) {:page-id page-id :stack-undo? true}))))))))))
|
||||
|
||||
|
|
@ -526,11 +522,10 @@
|
|||
(watch [it state _]
|
||||
(let [libraries (dsh/lookup-libraries state)
|
||||
library (get libraries library-id)
|
||||
components-v2 (features/active-feature? state "components/v2")
|
||||
|
||||
[main-instance changes]
|
||||
(-> (pcb/empty-changes it nil)
|
||||
(cll/generate-duplicate-component library component-id new-component-id components-v2))]
|
||||
(cll/generate-duplicate-component library component-id new-component-id))]
|
||||
(rx/of
|
||||
(ptk/data-event :layout/update {:ids [(:id main-instance)]})
|
||||
(dch/commit-changes changes)))))))
|
||||
|
|
@ -560,8 +555,7 @@
|
|||
[all-parents changes]
|
||||
(-> (pcb/empty-changes it page-id)
|
||||
;; Deleting main root triggers component delete
|
||||
(cls/generate-delete-shapes fdata page objects #{root-id} {:components-v2 true
|
||||
:undo-group undo-group
|
||||
(cls/generate-delete-shapes fdata page objects #{root-id} {:undo-group undo-group
|
||||
:undo-id undo-id}))]
|
||||
(rx/of
|
||||
(dwu/start-undo-transaction undo-id)
|
||||
|
|
@ -827,7 +821,7 @@
|
|||
|
||||
changes
|
||||
(-> (pcb/empty-changes it)
|
||||
(cll/generate-reset-component file libraries container id true))]
|
||||
(cll/generate-reset-component file libraries container id))]
|
||||
|
||||
(log/debug :msg "RESET-COMPONENT finished" :js/rchanges (log-changes
|
||||
(:redo-changes changes)
|
||||
|
|
@ -879,7 +873,7 @@
|
|||
(-> (pcb/empty-changes it)
|
||||
(pcb/set-undo-group undo-group)
|
||||
(pcb/with-container container)
|
||||
(cll/generate-sync-shape-inverse fdata libraries container id true))
|
||||
(cll/generate-sync-shape-inverse fdata libraries container id))
|
||||
|
||||
ldata (->> (:component-file shape)
|
||||
(dsh/lookup-file-data state))
|
||||
|
|
@ -1269,10 +1263,8 @@
|
|||
[]
|
||||
(ptk/reify ::watch-component-changes
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(let [components-v2? (features/active-feature? state "components/v2")
|
||||
|
||||
stopper-s
|
||||
(watch [_ _ stream]
|
||||
(let [stopper-s
|
||||
(->> stream
|
||||
(rx/filter #(or (= ::dw/finalize-page (ptk/type %))
|
||||
(= ::watch-component-changes (ptk/type %)))))
|
||||
|
|
@ -1335,7 +1327,7 @@
|
|||
(rx/debounce 5000)
|
||||
(rx/tap #(log/trc :hint "buffer initialized")))]
|
||||
|
||||
(when (and components-v2? (contains? cf/flags :component-thumbnails))
|
||||
(when (contains? cf/flags :component-thumbnails)
|
||||
(->> (rx/merge
|
||||
changes-s
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@
|
|||
[app.main.data.helpers :as dsh]
|
||||
[app.main.data.media :as dmm]
|
||||
[app.main.data.notifications :as ntf]
|
||||
[app.main.data.workspace.libraries :as dwl]
|
||||
[app.main.data.workspace.shapes :as dwsh]
|
||||
[app.main.data.workspace.svg-upload :as svg]
|
||||
[app.main.repo :as rp]
|
||||
|
|
@ -235,16 +234,6 @@
|
|||
(rx/catch #(handle-media-error % on-error))
|
||||
(rx/finalize #(st/emit! (ntf/hide :tag :media-loading))))))))
|
||||
|
||||
;; Deprecated in components-v2
|
||||
(defn upload-media-asset
|
||||
[params]
|
||||
(let [params (assoc params
|
||||
:force-media true
|
||||
:local? false
|
||||
:on-image #(st/emit! (dwl/add-media %))
|
||||
:on-svg #(st/emit! (dwl/add-media %)))]
|
||||
(process-media-objects params)))
|
||||
|
||||
(defn upload-media-workspace
|
||||
[{:keys [position file-id] :as params}]
|
||||
(let [params (assoc params
|
||||
|
|
@ -378,7 +367,7 @@
|
|||
|
||||
(defn- add-shapes-and-component
|
||||
[it file-data page name [shape children]]
|
||||
(let [[component-shape component-shapes updated-shapes]
|
||||
(let [[component-shape updated-shapes]
|
||||
(ctn/convert-shape-in-component shape children (:id file-data))
|
||||
|
||||
changes (-> (pcb/empty-changes it)
|
||||
|
|
@ -389,7 +378,6 @@
|
|||
(pcb/add-component (:id component-shape)
|
||||
""
|
||||
name
|
||||
component-shapes
|
||||
updated-shapes
|
||||
(:id shape)
|
||||
(:id page)))]
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@
|
|||
[app.main.data.workspace.edition :as dwe]
|
||||
[app.main.data.workspace.selection :as dws]
|
||||
[app.main.data.workspace.undo :as dwu]
|
||||
[app.main.features :as features]
|
||||
[beicon.v2.core :as rx]
|
||||
[potok.v2.core :as ptk]))
|
||||
|
||||
|
|
@ -171,12 +170,10 @@
|
|||
page (dsh/get-page fdata page-id)
|
||||
objects (:objects page)
|
||||
|
||||
components-v2 (features/active-feature? state "components/v2")
|
||||
undo-id (or (:undo-id options) (js/Symbol))
|
||||
[all-parents changes] (-> (pcb/empty-changes it (:id page))
|
||||
(cls/generate-delete-shapes fdata page objects ids
|
||||
{:components-v2 components-v2
|
||||
:ignore-touched (:component-swap options)
|
||||
{:ignore-touched (:component-swap options)
|
||||
:undo-group (:undo-group options)
|
||||
:undo-id undo-id}))]
|
||||
|
||||
|
|
|
|||
|
|
@ -260,6 +260,14 @@
|
|||
(let [message (tr "errors.feature-not-supported" (:feature error))]
|
||||
(st/emit! (modal/show {:type :alert :message message})))
|
||||
|
||||
(= :file-in-components-v1 code)
|
||||
(st/emit! (modal/show {:type :alert
|
||||
:message (tr "errors.deprecated")
|
||||
:link-message {:before (tr "errors.deprecated.contact.before")
|
||||
:text (tr "errors.deprecated.contact.text")
|
||||
:after (tr "errors.deprecated.contact.after")
|
||||
:on-click #(st/emit! (rt/nav :settings-feedback))}}))
|
||||
|
||||
:else
|
||||
(print-cause! "Restriction Error" error)))
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
(:require
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.link :as lk]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
|
|
@ -21,6 +22,7 @@
|
|||
::mf/register-as :alert}
|
||||
[{:keys [message
|
||||
scd-message
|
||||
link-message
|
||||
title
|
||||
on-accept
|
||||
hint
|
||||
|
|
@ -59,8 +61,16 @@
|
|||
[:div {:class (stl/css :modal-content)}
|
||||
(when (and (string? message) (not= message ""))
|
||||
[:h3 {:class (stl/css :modal-msg)} message])
|
||||
(when (seq link-message)
|
||||
[:h3 {:class (stl/css :modal-msg)}
|
||||
[:span (:before link-message)]
|
||||
[:& lk/link {:action (:on-click link-message)
|
||||
:class (stl/css :link)}
|
||||
(:text link-message)]
|
||||
[:span (:after link-message)]])
|
||||
(when (and (string? scd-message) (not= scd-message ""))
|
||||
[:h3 {:class (stl/css :modal-scd-msg)} scd-message])
|
||||
|
||||
(when (string? hint)
|
||||
[:p {:class (stl/css :modal-hint)} hint])]
|
||||
|
||||
|
|
|
|||
|
|
@ -8,10 +8,12 @@
|
|||
|
||||
.modal-overlay {
|
||||
@extend .modal-overlay-base;
|
||||
|
||||
&.transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
}
|
||||
|
|
@ -48,6 +50,7 @@
|
|||
|
||||
.accept-btn {
|
||||
@extend .modal-accept-btn;
|
||||
|
||||
&.danger {
|
||||
@extend .modal-danger-btn;
|
||||
}
|
||||
|
|
@ -60,3 +63,15 @@
|
|||
color: var(--modal-text-foreground-color);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: var(--color-accent-primary);
|
||||
}
|
||||
|
||||
.link::before {
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.link::after {
|
||||
content: " ";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@
|
|||
(def render-thumbnails (mf/create-context nil))
|
||||
|
||||
(def libraries (mf/create-context nil))
|
||||
(def components-v2 (mf/create-context nil))
|
||||
(def design-tokens (mf/create-context nil))
|
||||
|
||||
(def current-scroll (mf/create-context nil))
|
||||
|
|
|
|||
|
|
@ -159,7 +159,7 @@
|
|||
[:span {:class (stl/css :num-assets)} (str "\u00A0(") (:count components) ")"]] ;; Unicode 00A0 is non-breaking space
|
||||
[:div {:class (stl/css :asset-list)}
|
||||
(for [component (:sample components)]
|
||||
(let [root-id (or (:main-instance-id component) (:id component))] ;; Check for components-v2 in library
|
||||
(let [root-id (:main-instance-id component)]
|
||||
[:div {:class (stl/css :asset-list-item)
|
||||
:key (str "assets-component-" (:id component))}
|
||||
[:& render/component-svg {:root-shape (get-in component [:objects root-id])
|
||||
|
|
|
|||
|
|
@ -200,20 +200,19 @@
|
|||
[:> (mf/provider ctx/current-project-id) {:value project-id}
|
||||
[:> (mf/provider ctx/current-file-id) {:value file-id}
|
||||
[:> (mf/provider ctx/current-page-id) {:value page-id}
|
||||
[:> (mf/provider ctx/components-v2) {:value true}
|
||||
[:> (mf/provider ctx/design-tokens) {:value design-tokens?}
|
||||
[:> (mf/provider ctx/workspace-read-only?) {:value read-only?}
|
||||
[:> modal-container*]
|
||||
[:section {:class (stl/css :workspace)
|
||||
:style {:background-color background-color
|
||||
:touch-action "none"}}
|
||||
[:> context-menu*]
|
||||
[:> (mf/provider ctx/design-tokens) {:value design-tokens?}
|
||||
[:> (mf/provider ctx/workspace-read-only?) {:value read-only?}
|
||||
[:> modal-container*]
|
||||
[:section {:class (stl/css :workspace)
|
||||
:style {:background-color background-color
|
||||
:touch-action "none"}}
|
||||
[:> context-menu*]
|
||||
|
||||
(if (::has-data file)
|
||||
[:> workspace-page*
|
||||
{:page-id page-id
|
||||
:file-id file-id
|
||||
:file file
|
||||
:wglobal wglobal
|
||||
:layout layout}]
|
||||
[:> workspace-loader*])]]]]]]]))
|
||||
(if (::has-data file)
|
||||
[:> workspace-page*
|
||||
{:page-id page-id
|
||||
:file-id file-id
|
||||
:file file
|
||||
:wglobal wglobal
|
||||
:layout layout}]
|
||||
[:> workspace-loader*])]]]]]]))
|
||||
|
|
|
|||
|
|
@ -555,7 +555,7 @@
|
|||
objects (deref refs/workspace-page-objects)
|
||||
can-make-component (every? true? (map #(ctn/valid-shape-for-component? objects %) shapes))
|
||||
heads (filter ctk/instance-head? shapes)
|
||||
components-menu-entries (cmm/generate-components-menu-entries heads true)
|
||||
components-menu-entries (cmm/generate-components-menu-entries heads)
|
||||
variant-container? (and single? (ctk/is-variant-container? (first shapes)))
|
||||
do-add-component #(st/emit! (dwl/add-component))
|
||||
do-add-multiple-components #(st/emit! (dwl/add-multiple-components))
|
||||
|
|
|
|||
|
|
@ -75,8 +75,7 @@
|
|||
{::mf/wrap [mf/memo]
|
||||
::mf/wrap-props false}
|
||||
[{:keys [size file-id]}]
|
||||
(let [components-v2 (mf/use-ctx ctx/components-v2)
|
||||
read-only? (mf/use-ctx ctx/workspace-read-only?)
|
||||
(let [read-only? (mf/use-ctx ctx/workspace-read-only?)
|
||||
filters* (mf/use-state
|
||||
{:term ""
|
||||
:section "all"
|
||||
|
|
@ -148,11 +147,6 @@
|
|||
:id "components"
|
||||
:handler on-section-filter-change}
|
||||
|
||||
(when (not components-v2)
|
||||
{:name (tr "workspace.assets.graphics")
|
||||
:id "graphics"
|
||||
:handler on-section-filter-change})
|
||||
|
||||
{:name (tr "workspace.assets.colors")
|
||||
:id "colors"
|
||||
:handler on-section-filter-change}
|
||||
|
|
|
|||
|
|
@ -322,7 +322,7 @@
|
|||
:is-hidden is-hidden}])))
|
||||
|
||||
(defn generate-components-menu-entries
|
||||
[shapes components-v2]
|
||||
[shapes]
|
||||
(let [multi (> (count shapes) 1)
|
||||
copies (filter ctk/in-component-copy? shapes)
|
||||
|
||||
|
|
@ -350,13 +350,13 @@
|
|||
|
||||
touched-not-dangling (filter #(and (cfh/component-touched? objects (:id %))
|
||||
(find-component % false)) copies)
|
||||
can-reset-overrides? (or (not components-v2) (seq touched-not-dangling))
|
||||
can-reset-overrides? (seq touched-not-dangling)
|
||||
|
||||
|
||||
;; For when it's only one shape
|
||||
shape (first shapes)
|
||||
id (:id shape)
|
||||
main-instance? (if components-v2 (ctk/main-instance? shape) true)
|
||||
main-instance? (ctk/main-instance? shape)
|
||||
|
||||
component-id (:component-id shape)
|
||||
library-id (:component-file shape)
|
||||
|
|
@ -372,10 +372,9 @@
|
|||
|
||||
can-update-main? (and (not multi)
|
||||
(not is-dangling?)
|
||||
(or (not components-v2)
|
||||
(and (not main-instance?)
|
||||
(not (ctn/has-any-copy-parent? objects shape))
|
||||
(cfh/component-touched? objects (:id shape)))))
|
||||
(and (not main-instance?)
|
||||
(not (ctn/has-any-copy-parent? objects shape))
|
||||
(cfh/component-touched? objects (:id shape))))
|
||||
|
||||
can-detach? (and (seq copies)
|
||||
(every? #(not (ctn/has-any-copy-parent? objects %)) copies))
|
||||
|
|
@ -450,7 +449,7 @@
|
|||
menu-entries [(when (and (not multi) main-instance?)
|
||||
{:title (tr "workspace.shape.menu.show-in-assets")
|
||||
:action do-show-in-assets})
|
||||
(when (and (not multi) main-instance? local-component? lacks-annotation? components-v2)
|
||||
(when (and (not multi) main-instance? local-component? lacks-annotation?)
|
||||
{:title (tr "workspace.shape.menu.create-annotation")
|
||||
:action do-create-annotation})
|
||||
(when can-detach?
|
||||
|
|
@ -462,7 +461,7 @@
|
|||
(when can-reset-overrides?
|
||||
{:title (tr "workspace.shape.menu.reset-overrides")
|
||||
:action do-reset-component})
|
||||
(when (and (seq restorable-copies) components-v2)
|
||||
(when (seq restorable-copies)
|
||||
{:title (tr "workspace.shape.menu.restore-main")
|
||||
:action do-restore-component})
|
||||
(when can-show-component?
|
||||
|
|
|
|||
|
|
@ -308,7 +308,6 @@
|
|||
|
||||
menu-state (mf/use-state cmm/initial-context-menu-state)
|
||||
read-only? (mf/use-ctx ctx/workspace-read-only?)
|
||||
components-v2 (mf/use-ctx ctx/components-v2)
|
||||
toggle-list-style (mf/use-ctx cmm/assets-toggle-list-style)
|
||||
|
||||
selected (:components selected)
|
||||
|
|
@ -521,7 +520,7 @@
|
|||
:title (tr "workspace.assets.grid-view")
|
||||
:id "opt-grid"}]]])
|
||||
|
||||
(when (and components-v2 (not read-only?) is-local)
|
||||
(when (and (not read-only?) is-local)
|
||||
[:> icon-button* {:variant "ghost"
|
||||
:aria-label (tr "workspace.assets.components.add-component")
|
||||
:on-click add-component
|
||||
|
|
@ -561,9 +560,7 @@
|
|||
:id "assets-rename-component"
|
||||
:handler on-rename})
|
||||
(when (and is-local (not (or multi-assets? read-only? any-variant?)))
|
||||
{:name (if components-v2
|
||||
(tr "workspace.assets.duplicate-main")
|
||||
(tr "workspace.assets.duplicate"))
|
||||
{:name (tr "workspace.assets.duplicate-main")
|
||||
:id "assets-duplicate-component"
|
||||
:handler on-duplicate})
|
||||
|
||||
|
|
@ -576,7 +573,7 @@
|
|||
:id "assets-group-component"
|
||||
:handler on-group})
|
||||
|
||||
(when (and components-v2 (not multi-assets?))
|
||||
(when (not multi-assets?)
|
||||
{:name (tr "workspace.shape.menu.show-main")
|
||||
:id "assets-show-main-component"
|
||||
:handler on-show-main})]}]]]))
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@
|
|||
[app.main.ui.workspace.sidebar.assets.colors :refer [colors-section]]
|
||||
[app.main.ui.workspace.sidebar.assets.common :as cmm]
|
||||
[app.main.ui.workspace.sidebar.assets.components :refer [components-section]]
|
||||
[app.main.ui.workspace.sidebar.assets.graphics :refer [graphics-section]]
|
||||
[app.main.ui.workspace.sidebar.assets.typographies :refer [typographies-section]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
|
|
@ -145,11 +144,10 @@
|
|||
|
||||
(mf/defc file-library-content*
|
||||
{::mf/private true}
|
||||
[{:keys [file is-local is-loaded open-status-ref on-clear-selection filters colors media typographies components count-variants]}]
|
||||
[{:keys [file is-local is-loaded open-status-ref on-clear-selection filters colors typographies components count-variants]}]
|
||||
(let [open-status (mf/deref open-status-ref)
|
||||
|
||||
file-id (:id file)
|
||||
project-id (:project-id file)
|
||||
|
||||
filters-section (:section filters)
|
||||
has-filters-term? (not ^boolean (str/empty? (:term filters)))
|
||||
|
|
@ -165,11 +163,6 @@
|
|||
(or (pos? (count components))
|
||||
(not has-filters-term?)))
|
||||
|
||||
show-graphics?
|
||||
(and (or (= filters-section "all")
|
||||
(= filters-section "graphics"))
|
||||
(pos? (count media)))
|
||||
|
||||
show-colors?
|
||||
(and (or (= filters-section "all")
|
||||
(= filters-section "colors"))
|
||||
|
|
@ -188,9 +181,6 @@
|
|||
force-open-colors?
|
||||
(when ^boolean has-filters-term? (> 60 (count colors)))
|
||||
|
||||
force-open-graphics?
|
||||
(when ^boolean has-filters-term? (> 60 (count media)))
|
||||
|
||||
force-open-typographies?
|
||||
(when ^boolean has-filters-term? (> 60 (count typographies)))
|
||||
|
||||
|
|
@ -214,9 +204,6 @@
|
|||
on-component-click
|
||||
(mf/use-fn (mf/deps on-asset-click) (partial on-asset-click :components))
|
||||
|
||||
on-graphics-click
|
||||
(mf/use-fn (mf/deps on-asset-click) (partial on-asset-click :graphics))
|
||||
|
||||
on-colors-click
|
||||
(mf/use-fn (mf/deps on-asset-click) (partial on-asset-click :colors))
|
||||
|
||||
|
|
@ -266,23 +253,6 @@
|
|||
:on-clear-selection on-clear-selection
|
||||
:count-variants count-variants}])
|
||||
|
||||
(when ^boolean show-graphics?
|
||||
[:& graphics-section
|
||||
{:file-id file-id
|
||||
:project-id project-id
|
||||
:local? is-local
|
||||
:objects media
|
||||
:listing-thumbs? listing-thumbs?
|
||||
:open? (or ^boolean force-open-graphics?
|
||||
^boolean (get open-status :graphics false))
|
||||
:force-open? force-open-graphics?
|
||||
:open-status-ref open-status-ref
|
||||
:reverse-sort? reverse-sort?
|
||||
:selected selected
|
||||
:on-asset-click on-graphics-click
|
||||
:on-assets-delete on-assets-delete
|
||||
:on-clear-selection on-clear-selection}])
|
||||
|
||||
(when ^boolean show-colors?
|
||||
[:& colors-section
|
||||
{:file-id file-id
|
||||
|
|
@ -315,7 +285,6 @@
|
|||
:on-clear-selection on-clear-selection}])
|
||||
|
||||
(when (and (not ^boolean show-components?)
|
||||
(not ^boolean show-graphics?)
|
||||
(not ^boolean show-colors?)
|
||||
(not ^boolean show-typography?))
|
||||
[:div {:class (stl/css :asset-title)}
|
||||
|
|
@ -333,7 +302,6 @@
|
|||
library (use-library-ref file-id)
|
||||
|
||||
colors (:colors library)
|
||||
media (:media library)
|
||||
typographies (:typographies library)
|
||||
|
||||
filters-term (:term filters)
|
||||
|
|
@ -350,11 +318,6 @@
|
|||
(cmm/apply-filters $ filters)
|
||||
(remove #(cfv/is-secondary-variant? % library) $)))
|
||||
|
||||
filtered-media
|
||||
(mf/with-memo [filters media]
|
||||
(-> (vals media)
|
||||
(cmm/apply-filters filters)))
|
||||
|
||||
filtered-typographies
|
||||
(mf/with-memo [filters typographies]
|
||||
(-> (vals typographies)
|
||||
|
|
@ -372,7 +335,6 @@
|
|||
(and (not (str/blank? filters-term))
|
||||
(or (> 60 (count filtered-colors))
|
||||
(> 60 (count filtered-components))
|
||||
(> 60 (count filtered-media))
|
||||
(> 60 (count filtered-typographies))))
|
||||
|
||||
open?
|
||||
|
|
@ -415,7 +377,6 @@
|
|||
:filters filters
|
||||
:colors filtered-colors
|
||||
:components filtered-components
|
||||
:media filtered-media
|
||||
:typographies filtered-typographies
|
||||
:on-clear-selection unselect-all
|
||||
:open-status-ref open-status-ref
|
||||
|
|
|
|||
|
|
@ -1,432 +0,0 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.workspace.sidebar.assets.graphics
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.data.macros :as dm]
|
||||
[app.common.files.helpers :as cfh]
|
||||
[app.common.media :as cm]
|
||||
[app.config :as cf]
|
||||
[app.main.data.event :as ev]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.data.workspace.libraries :as dwl]
|
||||
[app.main.data.workspace.media :as dwm]
|
||||
[app.main.data.workspace.undo :as dwu]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.editable-label :refer [editable-label]]
|
||||
[app.main.ui.components.file-uploader :refer [file-uploader]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.hooks :as h]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.sidebar.assets.common :as cmm]
|
||||
[app.main.ui.workspace.sidebar.assets.groups :as grp]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.dom.dnd :as dnd]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[cuerdas.core :as str]
|
||||
[okulary.core :as l]
|
||||
[potok.v2.core :as ptk]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc graphics-item
|
||||
[{:keys [object renaming listing-thumbs? selected-objects file-id
|
||||
on-asset-click on-context-menu on-drag-start do-rename cancel-rename
|
||||
selected-full selected-graphics-paths]}]
|
||||
(let [item-ref (mf/use-ref)
|
||||
visible? (h/use-visible item-ref :once? true)
|
||||
object-id (:id object)
|
||||
|
||||
dragging* (mf/use-state false)
|
||||
dragging? (deref dragging*)
|
||||
|
||||
read-only? (mf/use-ctx ctx/workspace-read-only?)
|
||||
|
||||
on-drop
|
||||
(mf/use-fn
|
||||
(mf/deps object dragging* selected-objects selected-full selected-graphics-paths)
|
||||
(fn [event]
|
||||
(cmm/on-drop-asset event object dragging* selected-objects selected-full
|
||||
selected-graphics-paths dwl/rename-media)))
|
||||
|
||||
on-drag-enter
|
||||
(mf/use-fn
|
||||
(mf/deps object dragging* selected-objects selected-graphics-paths)
|
||||
(fn [event]
|
||||
(cmm/on-drag-enter-asset event object dragging* selected-objects selected-graphics-paths)))
|
||||
|
||||
on-drag-leave
|
||||
(mf/use-fn
|
||||
(mf/deps dragging*)
|
||||
(fn [event]
|
||||
(cmm/on-drag-leave-asset event dragging*)))
|
||||
|
||||
on-grahic-drag-start
|
||||
(mf/use-fn
|
||||
(mf/deps object file-id selected-objects item-ref on-drag-start read-only?)
|
||||
(fn [event]
|
||||
(if read-only?
|
||||
(dom/prevent-default event)
|
||||
(cmm/on-asset-drag-start event file-id object selected-objects item-ref :graphics on-drag-start))))
|
||||
|
||||
on-context-menu
|
||||
(mf/use-fn
|
||||
(mf/deps object-id)
|
||||
(partial on-context-menu object-id))
|
||||
|
||||
on-asset-click
|
||||
(mf/use-fn
|
||||
(mf/deps object-id on-asset-click)
|
||||
(fn [event]
|
||||
(on-asset-click event object-id)))]
|
||||
|
||||
[: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 (stl/css :graphic-image)
|
||||
:draggable false}] ;; Also need to add css pointer-events: none
|
||||
|
||||
(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 (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)
|
||||
dragging* (mf/use-state false)
|
||||
dragging? (deref dragging*)
|
||||
|
||||
selected-paths
|
||||
(mf/with-memo [selected-full]
|
||||
(into #{}
|
||||
(comp (map :path) (d/nilv ""))
|
||||
selected-full))
|
||||
|
||||
on-drag-enter
|
||||
(mf/use-fn
|
||||
(mf/deps dragging* prefix selected-paths)
|
||||
(fn [event]
|
||||
(cmm/on-drag-enter-asset-group event dragging* prefix selected-paths)))
|
||||
|
||||
on-drag-leave
|
||||
(mf/use-fn
|
||||
(mf/deps dragging*)
|
||||
(fn [event]
|
||||
(cmm/on-drag-leave-asset event dragging*)))
|
||||
|
||||
on-drop
|
||||
(mf/use-fn
|
||||
(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)))]
|
||||
[: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 (stl/css :grid-placeholder)} "\u00A0"])
|
||||
|
||||
(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}]))])]))
|
||||
|
||||
(mf/defc graphics-section
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [file-id project-id local? objects listing-thumbs? open? force-open? open-status-ref selected reverse-sort?
|
||||
on-asset-click on-assets-delete on-clear-selection]}]
|
||||
(let [input-ref (mf/use-ref nil)
|
||||
state (mf/use-state {:renaming nil :object-id nil})
|
||||
|
||||
menu-state (mf/use-state cmm/initial-context-menu-state)
|
||||
read-only? (mf/use-ctx ctx/workspace-read-only?)
|
||||
|
||||
open-groups-ref (mf/with-memo [open-status-ref]
|
||||
(-> (l/in [:groups :graphics])
|
||||
(l/derived open-status-ref)))
|
||||
open-groups (mf/deref open-groups-ref)
|
||||
|
||||
selected (:graphics selected)
|
||||
selected-full (into #{} (filter #(contains? selected (:id %))) objects)
|
||||
multi-objects? (> (count selected) 1)
|
||||
multi-assets? (or (seq (:components selected))
|
||||
(seq (:colors selected))
|
||||
(seq (:typographies selected)))
|
||||
|
||||
objects (mf/with-memo [objects]
|
||||
(mapv dwl/extract-path-if-missing objects))
|
||||
|
||||
groups (mf/with-memo [objects reverse-sort?]
|
||||
(grp/group-assets objects reverse-sort?))
|
||||
|
||||
components-v2 (mf/use-ctx ctx/components-v2)
|
||||
team-id (mf/use-ctx ctx/current-team-id)
|
||||
|
||||
add-graphic
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
(st/emit! (dw/set-assets-section-open file-id :graphics true))
|
||||
(dom/click (mf/ref-val input-ref))))
|
||||
|
||||
on-file-selected
|
||||
(mf/use-fn
|
||||
(mf/deps file-id project-id team-id)
|
||||
(fn [blobs]
|
||||
(let [params {:file-id file-id
|
||||
:blobs (seq blobs)}]
|
||||
(st/emit! (dwm/upload-media-asset params)
|
||||
(ptk/event ::ev/event {::ev/name "add-asset-to-library"
|
||||
:asset-type "graphics"
|
||||
:file-id file-id
|
||||
:project-id project-id
|
||||
:team-id team-id})))))
|
||||
on-delete
|
||||
(mf/use-fn
|
||||
(mf/deps @state multi-objects? multi-assets?)
|
||||
(fn []
|
||||
(if (or multi-objects? multi-assets?)
|
||||
(on-assets-delete)
|
||||
(st/emit! (dwl/delete-media {:id (:object-id @state)})))))
|
||||
|
||||
on-rename
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
(swap! state (fn [state]
|
||||
(assoc state :renaming (:object-id state))))))
|
||||
cancel-rename
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
(swap! state assoc :renaming nil)))
|
||||
|
||||
do-rename
|
||||
(mf/use-fn
|
||||
(mf/deps @state)
|
||||
(fn [new-name]
|
||||
(st/emit! (dwl/rename-media (:renaming @state) new-name))
|
||||
(swap! state assoc :renaming nil)))
|
||||
|
||||
on-context-menu
|
||||
(mf/use-fn
|
||||
(mf/deps selected on-clear-selection read-only?)
|
||||
(fn [object-id event]
|
||||
(dom/prevent-default event)
|
||||
(let [pos (dom/get-client-position event)]
|
||||
(when (and local? (not read-only?))
|
||||
(when-not (contains? selected object-id)
|
||||
(on-clear-selection))
|
||||
(swap! state assoc :object-id object-id)
|
||||
(swap! menu-state cmm/open-context-menu pos)))))
|
||||
|
||||
on-close-menu
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
(swap! menu-state cmm/close-context-menu)))
|
||||
|
||||
create-group
|
||||
(mf/use-fn
|
||||
(mf/deps objects selected on-clear-selection (:object-id @state))
|
||||
(fn [group-name]
|
||||
(on-clear-selection)
|
||||
(let [undo-id (js/Symbol)]
|
||||
(st/emit! (dwu/start-undo-transaction undo-id))
|
||||
(run! st/emit!
|
||||
(->> objects
|
||||
(filter #(if multi-objects?
|
||||
(contains? selected (:id %))
|
||||
(= (:object-id @state) (:id %))))
|
||||
(map #(dwl/rename-media (:id %) (cmm/add-group % group-name)))))
|
||||
(st/emit! (dwu/commit-undo-transaction undo-id)))))
|
||||
|
||||
rename-group
|
||||
(mf/use-fn
|
||||
(mf/deps objects)
|
||||
(fn [path last-path]
|
||||
(on-clear-selection)
|
||||
(let [undo-id (js/Symbol)]
|
||||
(st/emit! (dwu/start-undo-transaction undo-id))
|
||||
(run! st/emit!
|
||||
(->> objects
|
||||
(filter #(str/starts-with? (:path %) path))
|
||||
(map #(dwl/rename-media (:id %) (cmm/rename-group % path last-path)))))
|
||||
(st/emit! (dwu/commit-undo-transaction undo-id)))))
|
||||
|
||||
on-group
|
||||
(mf/use-fn
|
||||
(mf/deps objects selected create-group)
|
||||
(fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(modal/show! :name-group-dialog {:accept create-group})))
|
||||
|
||||
on-rename-group
|
||||
(mf/use-fn
|
||||
(mf/deps objects)
|
||||
(fn [event path last-path]
|
||||
(dom/stop-propagation event)
|
||||
(modal/show! :name-group-dialog {:path path
|
||||
:last-path last-path
|
||||
:accept rename-group})))
|
||||
on-ungroup
|
||||
(mf/use-fn
|
||||
(mf/deps objects)
|
||||
(fn [path]
|
||||
(on-clear-selection)
|
||||
(let [undo-id (js/Symbol)]
|
||||
(st/emit! (dwu/start-undo-transaction undo-id))
|
||||
(run! st/emit!
|
||||
(->> objects
|
||||
(filter #(str/starts-with? (:path %) path))
|
||||
(map #(dwl/rename-media (:id %) (cmm/ungroup % path)))))
|
||||
(st/emit! (dwu/commit-undo-transaction undo-id)))))
|
||||
|
||||
on-drag-start
|
||||
(mf/use-fn
|
||||
(fn [{:keys [name id mtype]} event]
|
||||
(dnd/set-data! event "text/asset-id" (str id))
|
||||
(dnd/set-data! event "text/asset-name" name)
|
||||
(dnd/set-data! event "text/asset-type" mtype)
|
||||
(dnd/set-allowed-effect! event "move")))
|
||||
|
||||
on-asset-click
|
||||
(mf/use-fn (mf/deps groups on-asset-click) (partial on-asset-click groups))]
|
||||
|
||||
[:& cmm/asset-section {:file-id file-id
|
||||
:title (tr "workspace.assets.graphics")
|
||||
:section :graphics
|
||||
:assets-count (count objects)
|
||||
:open? open?}
|
||||
(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
|
||||
[:& 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
|
||||
:prefix ""
|
||||
:groups groups
|
||||
:open-groups open-groups
|
||||
:force-open? force-open?
|
||||
:renaming (:renaming @state)
|
||||
:listing-thumbs? listing-thumbs?
|
||||
:selected selected
|
||||
: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}]
|
||||
(when local?
|
||||
[:& cmm/assets-context-menu
|
||||
{:on-close on-close-menu
|
||||
:state @menu-state
|
||||
:options [(when-not (or multi-objects? multi-assets?)
|
||||
{:name (tr "workspace.assets.rename")
|
||||
:id "assets-rename-graphics"
|
||||
:handler on-rename})
|
||||
{:name (tr "workspace.assets.delete")
|
||||
:id "assets-delete-graphics"
|
||||
:handler on-delete}
|
||||
(when-not multi-assets?
|
||||
{:name (tr "workspace.assets.group")
|
||||
:id "assets-group-graphics"
|
||||
:handler on-group})]}])]]))
|
||||
|
|
@ -1,188 +0,0 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.graphics-group {
|
||||
.drop-space {
|
||||
height: $s-12;
|
||||
}
|
||||
.asset-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: $s-4;
|
||||
margin-left: $s-8;
|
||||
.grid-cell {
|
||||
@include flexCenter;
|
||||
position: relative;
|
||||
padding: $s-8;
|
||||
border: $s-2 solid transparent;
|
||||
border-radius: $br-8;
|
||||
aspect-ratio: 1/1;
|
||||
background-color: var(--color-foreground-secondary);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
img {
|
||||
height: auto;
|
||||
width: auto;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
svg {
|
||||
height: 10vh;
|
||||
}
|
||||
.cell-name {
|
||||
@include bodySmallTypography;
|
||||
@include textEllipsis;
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: $s-2;
|
||||
|
||||
&.editing {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.editable-label-input {
|
||||
height: unset;
|
||||
width: 100%;
|
||||
padding: $s-2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.editable-label-close {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--assets-item-background-color-hover);
|
||||
.cell-name {
|
||||
display: block;
|
||||
color: var(--assets-item-name-foreground-color-hover);
|
||||
background: linear-gradient(to top, rgba(52, 57, 59, 1) 0%, rgba(52, 57, 59, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border: $s-1 solid var(--assets-item-border-color);
|
||||
}
|
||||
|
||||
.dragging {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: $s-8;
|
||||
background-color: var(--assets-item-background-color-drag);
|
||||
border: $s-2 solid var(--assets-item-border-color-drag);
|
||||
}
|
||||
}
|
||||
}
|
||||
.asset-enum {
|
||||
padding-bottom: $s-4;
|
||||
.enum-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-36;
|
||||
margin-bottom: $s-4;
|
||||
padding: $s-2;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--assets-item-background-color);
|
||||
cursor: pointer;
|
||||
|
||||
svg,
|
||||
img {
|
||||
@include flexCenter;
|
||||
padding: $s-2;
|
||||
height: $s-32;
|
||||
width: $s-32;
|
||||
border-radius: $br-6;
|
||||
background-color: var(--assets-component-background-color);
|
||||
}
|
||||
|
||||
.item-name {
|
||||
@include bodySmallTypography;
|
||||
@include textEllipsis;
|
||||
padding-left: $s-8;
|
||||
color: var(--assets-item-name-foreground-color);
|
||||
|
||||
&.editing {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.editable-label-input {
|
||||
height: $s-24;
|
||||
}
|
||||
|
||||
.editable-label-close {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--assets-item-background-color-hover);
|
||||
.item-name {
|
||||
color: var(--assets-item-name-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
border: $s-1 solid var(--assets-item-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
.grid-placeholder {
|
||||
height: $s-2;
|
||||
background-color: var(--color-accent-primary);
|
||||
margin-bottom: $s-2;
|
||||
}
|
||||
}
|
||||
.listing-options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.listing-option-btn {
|
||||
@include flexCenter;
|
||||
cursor: pointer;
|
||||
|
||||
&.first {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
}
|
||||
}
|
||||
}
|
||||
.add-component {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
margin-left: $s-2;
|
||||
border-radius: $br-8;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.assets-btn {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: calc($s-24 + $s-4);
|
||||
padding: 0;
|
||||
border-radius: $br-8;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
|
|
@ -53,8 +53,7 @@
|
|||
parent-board? (and (cfh/frame-shape? item)
|
||||
(= uuid/zero (:parent-id item)))
|
||||
absolute? (ctl/item-absolute? item)
|
||||
components-v2 (mf/use-ctx ctx/components-v2)
|
||||
main-instance? (or (not components-v2) (:main-instance item))
|
||||
main-instance? (:main-instance item)
|
||||
variants? (features/use-feature "variants/v1")
|
||||
is-variant? (when variants? (ctk/is-variant? item))
|
||||
variant-name (when is-variant? (:variant-name item))
|
||||
|
|
|
|||
|
|
@ -679,7 +679,7 @@
|
|||
(fn []
|
||||
(swap! state* update :render inc)))
|
||||
|
||||
menu-entries (cmm/generate-components-menu-entries shapes true)
|
||||
menu-entries (cmm/generate-components-menu-entries shapes)
|
||||
show-menu? (seq menu-entries)
|
||||
path (->> component (:path) (cfh/split-path) (cfh/join-path-with-dot))]
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@
|
|||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu*]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.component :refer [component-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraints-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell]
|
||||
|
|
@ -70,7 +69,6 @@
|
|||
[:div {:class (stl/css :options)}
|
||||
[:& layer-menu {:type type :ids layer-ids :values layer-values}]
|
||||
[:> measures-menu* {:type type :ids measure-ids :values measure-values :shape shape}]
|
||||
[:& component-menu {:shapes [shape]}] ;;remove this in components-v2
|
||||
|
||||
[:& layout-container-menu
|
||||
{:type type
|
||||
|
|
|
|||
|
|
@ -251,8 +251,7 @@
|
|||
on-frame-enter (unchecked-get props "on-frame-enter")
|
||||
on-frame-leave (unchecked-get props "on-frame-leave")
|
||||
on-frame-select (unchecked-get props "on-frame-select")
|
||||
components-v2 (mf/use-ctx ctx/components-v2)
|
||||
shapes (ctt/get-frames objects {:skip-copies? components-v2})
|
||||
shapes (ctt/get-frames objects {:skip-copies? true})
|
||||
shapes (if (dbg/enabled? :shape-titles)
|
||||
(into (set shapes)
|
||||
(map (d/getf objects))
|
||||
|
|
|
|||
|
|
@ -12,9 +12,6 @@
|
|||
[app.plugins :as plugins]
|
||||
[app.util.timers :as tm]))
|
||||
|
||||
(defn ^:export is-components-v2 []
|
||||
(features/active-feature? @st/state "components/v2"))
|
||||
|
||||
(defn ^:export grid []
|
||||
(tm/schedule-on-idle #(st/emit! (features/toggle-feature "layout/grid")))
|
||||
nil)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue