johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-11 22:14:05 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

🐛 Fix order of component menu options in assets tab (#7388)

Browse Source 
* 🐛 Reorder component menu options in assets tab

* ♻️ Use new component syntax

* 📚 Add bugfix to changelog

* ♻️ Code restructuring and SCSS improvements
This commit is contained in:
Luis de Dios
2025-10-01 17:00:27 +02:00
committed by GitHub
parent ce26c52b30
commit 1263ea11fa
11 changed files with 366 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGES.md
View File

@@ -41,8 +41,9 @@
- Fix selection problems when devtools open [Taiga #11950](https://tree.taiga.io/project/penpot/issue/11950)
- Fix long font names overlap [Taiga #11844](https://tree.taiga.io/project/penpot/issue/11844)
- Fix paste behavior according to the selected element [Taiga #11979](https://tree.taiga.io/project/penpot/issue/11979)
- Fix problem with export size [#7160](https://github.com/penpot/penpot/issues/7160)
- Fix problem with export size [Github #7160](https://github.com/penpot/penpot/issues/7160)
- Fix multi level library dependencies [Taiga #12155](https://tree.taiga.io/project/penpot/issue/12155)
- Fix component context menu options order in assets tab [Taiga #11941](https://tree.taiga.io/project/penpot/issue/11941)
## 2.10.0

56
frontend/src/app/main/ui/components/editable_label.cljs
View File

@@ -7,29 +7,15 @@
(ns app.main.ui.components.editable-label
(:require-macros [app.main.style :as stl])
(:require
[app.common.data.macros :as dm]
[app.main.constants :refer [max-input-length]]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.keyboard :as kbd]
[app.util.timers :as timers]
[rumext.v2 :as mf]))
(mf/defc editable-label
{::mf/wrap-props false}
[props]
(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")
display-value (unchecked-get props "display-value")
final-class (dm/str class " " (stl/css :editable-label))
input-ref (mf/use-ref nil)
(mf/defc editable-label*
[{:keys [value class-input class-label is-editing tooltip display-value on-change on-cancel]}]
(let [input-ref (mf/use-ref nil)
internal-editing* (mf/use-state false)
internal-editing? (deref internal-editing*)
@@ -63,14 +49,6 @@
(when (fn? on-cancel)
(on-cancel))))
on-dbl-click
(mf/use-fn
(mf/deps dbl-click? start-edition)
(fn [_]
(when-not dbl-click?
(start-edition))))
on-key-up
(mf/use-fn
(mf/deps cancel-edition accept-edition)
@@ -82,26 +60,18 @@
(kbd/enter? event)
(accept-edition))))]
(mf/with-effect [editing? internal-editing? start-edition]
(when (and editing? (not internal-editing?))
(mf/with-effect [is-editing internal-editing? start-edition]
(when (and is-editing (not internal-editing?))
(start-edition)))
(if ^boolean internal-editing?
[: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
:max-length max-input-length
:on-blur cancel-edition}]
[:input {:class [(stl/css :editable-label-input) class-input]
:ref input-ref
:default-value value
:on-key-up on-key-up
:max-length max-input-length
:on-blur cancel-edition}]
[:span {:class (stl/css :editable-label-close)
:on-click cancel-edition}
deprecated-icon/delete-text]]
[:span {:class final-class
:title tooltip
:on-double-click on-dbl-click}
[:span {:class [(stl/css :editable-label-text) class-label]
:title tooltip}
display-value])))

42
frontend/src/app/main/ui/components/editable_label.scss
View File

@@ -4,34 +4,26 @@
//
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/colors.scss" as *;
@use "ds/typography.scss" as t;
.editable-label-input {
@include deprecated.textEllipsis;
@include deprecated.bodySmallTypography;
@include deprecated.removeInputStyle;
flex-grow: 1;
height: deprecated.$s-28;
max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
@include t.use-typography("body-small");
outline: none;
width: 100%;
height: 100%;
margin: 0;
padding-left: deprecated.$s-6;
border-radius: deprecated.$br-4;
border: deprecated.$s-1 solid var(--input-border-color-active);
color: var(--input-foreground-color-active);
padding: 0 var(--sp-s);
border: $b-1 solid var(--color-accent-primary);
color: var(--color-foreground-primary);
background: var(--color-background-primary);
}
.editable-label.is-hidden {
display: none;
}
.editable-label-close {
cursor: pointer;
svg {
@extend .button-icon;
height: deprecated.$s-12;
width: deprecated.$s-12;
stroke: var(--icon-foreground);
margin: 0;
}
.editable-label-text {
@include t.use-typography("body-small");
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

45
frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
View File

@@ -236,7 +236,7 @@
[:span {:class (stl/css :default-name :default-name-with-color)} default-name]])])
(when local?
[:& cmm/assets-context-menu
[:> cmm/assets-context-menu*
{:on-close on-close-menu
:state @menu-state
:options [(when-not (or multi-colors? multi-assets?)
@@ -302,12 +302,12 @@
: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 :colors
:path prefix
:group-open? group-open?
:on-rename on-rename-group
:on-ungroup on-ungroup}]
[:> grp/asset-group-title* {:file-id file-id
:section :colors
:path prefix
:is-group-open group-open?
:on-rename on-rename-group
:on-ungroup on-ungroup}]
(when group-open?
[:*
(let [colors (get groups "" [])]
@@ -363,9 +363,10 @@
:colors colors
:selected-full selected-full}]))])]))
(mf/defc colors-section
[{:keys [file-id local? colors open? force-open? open-status-ref selected reverse-sort?
on-asset-click on-assets-delete on-clear-selection] :as props}]
(mf/defc colors-section*
[{:keys [file-id colors open-status-ref selected
is-local is-open is-force-open is-reverse-sort
on-asset-click on-assets-delete on-clear-selection]}]
(let [selected (:colors selected)
selected-full (mf/with-memo [selected colors]
@@ -381,8 +382,8 @@
(seq (:graphics selected))
(seq (:typographies selected)))
groups (mf/with-memo [colors reverse-sort?]
(grp/group-assets colors reverse-sort?))
groups (mf/with-memo [colors is-reverse-sort]
(grp/group-assets colors is-reverse-sort))
read-only? (mf/use-ctx ctx/workspace-read-only?)
@@ -484,13 +485,13 @@
(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.colors")
:section :colors
:assets-count (count colors)
:open? open?}
(when local?
[:& cmm/asset-section-block {:role :title-button}
[:> cmm/asset-section* {:file-id file-id
:title (tr "workspace.assets.colors")
:section :colors
:assets-count (count colors)
:is-open is-open}
(when is-local
[:> cmm/asset-section-block* {:role :title-button}
(when-not read-only?
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.assets.colors.add-color")
@@ -498,13 +499,13 @@
:icon i/add}])])
[:& cmm/asset-section-block {:role :content}
[:> cmm/asset-section-block* {:role :content}
[:& colors-group {:file-id file-id
:prefix ""
:groups groups
:open-groups open-groups
:force-open? force-open?
:local? local?
:force-open? is-force-open
:local? is-local
:selected selected
:multi-colors? multi-colors?
:multi-assets? multi-assets?

23
frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
View File

@@ -117,8 +117,7 @@
[state]
(assoc state :open? false))
(mf/defc assets-context-menu
{::mf/wrap-props false}
(mf/defc assets-context-menu*
[{:keys [options state on-close]}]
[:> context-menu*
{:show (:open? state)
@@ -140,9 +139,8 @@
[section assets-count]
(or (not (= section :tokens)) (and (< 0 assets-count) (= section :tokens))))
(mf/defc asset-section
{::mf/wrap-props false}
[{:keys [children file-id title section assets-count icon open? on-click]}]
(mf/defc asset-section*
[{:keys [children file-id title section assets-count icon is-open on-click]}]
(let [children (-> (array/normalize-to-array children)
(array/without-nils))
@@ -154,10 +152,10 @@
on-collapsed
(mf/use-fn
(mf/deps file-id section open? assets-count)
(mf/deps file-id section is-open assets-count)
(fn [_]
(when (< 0 assets-count)
(st/emit! (dw/set-assets-section-open file-id section (not open?))))))
(st/emit! (dw/set-assets-section-open file-id section (not is-open))))))
title
(mf/html
@@ -175,23 +173,22 @@
[:div {:class (stl/css-case :asset-section true
:opened (and (< 0 assets-count)
open?))
is-open))
:on-click on-click}
[:> title-bar*
{:collapsable (< 0 assets-count)
:collapsed (not open?)
:collapsed (not is-open)
:all-clickable true
:on-collapsed on-collapsed
:add-icon-gap (= 0 assets-count)
:title title}
buttons]
(when ^boolean (and (< 0 assets-count)
open?)
[:div {:class (stl/css-case :title-spacing open?)}
is-open)
[:div {:class (stl/css-case :title-spacing is-open)}
content])]))
(mf/defc asset-section-block
{::mf/wrap-props false}
(mf/defc asset-section-block*
[{:keys [children]}]
[:* children])

208
frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
View File

@@ -21,7 +21,7 @@
[app.main.data.workspace.variants :as dwv]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.editable-label :refer [editable-label]]
[app.main.ui.components.editable-label :refer [editable-label*]]
[app.main.ui.components.file-uploader :refer [file-uploader]]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.context :as ctx]
@@ -51,9 +51,8 @@
container (ctf/get-component-page data component)]
[root-shape container]))
(mf/defc components-item
{::mf/wrap-props false}
[{:keys [component renaming listing-thumbs? selected
(mf/defc components-item*
[{:keys [component renaming is-listing-thumbs selected
file-id on-asset-click on-context-menu on-drag-start do-rename
cancel-rename selected-full selected-paths is-local num-variants]}]
@@ -128,10 +127,10 @@
renaming? (= renaming (:id component))]
[:div {:ref item-ref
:class (stl/css-case :selected (contains? selected (:id component))
:grid-cell listing-thumbs?
:enum-item (not listing-thumbs?)
:enum-item-with-mark (and (not listing-thumbs?) (ctc/is-variant? component)))
:class (stl/css-case :component-item true
:component-item-grid is-listing-thumbs
:component-item-list (not is-listing-thumbs)
:component-item-selected (contains? selected (:id component)))
:id (dm/str "component-shape-id-" (:id component))
:draggable (and (not read-only?) (not renaming?))
:on-click on-component-click
@@ -146,33 +145,36 @@
(some? container))
[:*
[:*
[:& editable-label
{:class (stl/css-case :cell-name listing-thumbs?
:item-name (not listing-thumbs?)
:editing renaming?)
:value (cpn/merge-path-item (:path component) (:name component))
:tooltip (cpn/merge-path-item (:path component) (:name component))
:display-value (:name component)
:editing renaming?
:disable-dbl-click true
:on-change do-rename
:on-cancel cancel-rename}]
[:div {:class (stl/css-case :component-item-grid-name is-listing-thumbs
:component-item-list-name (not is-listing-thumbs)
:component-item-editing renaming?)}
[:> editable-label*
{:class-input (stl/css-case :component-item-grid-input is-listing-thumbs
:component-item-list-input (not is-listing-thumbs))
:class-label (stl/css-case :component-item-grid-label is-listing-thumbs
:component-item-list-label (not is-listing-thumbs))
:value (cpn/merge-path-item (:path component) (:name component))
:tooltip (cpn/merge-path-item (:path component) (:name component))
:display-value (:name component)
:is-editing renaming?
:on-change do-rename
:on-cancel cancel-rename}]]
(when ^boolean dragging?
[:div {:class (stl/css :dragging)}])]
[:div {:class (stl/css :component-item-dragging)}])]
[:> cmm/component-item-thumbnail*
{:file-id file-id
:class (stl/css-case :thumbnail true
:asset-list-thumbnail (not listing-thumbs?))
:class (stl/css-case :component-item-thumbnail true
:component-item-list-thumbnail (not is-listing-thumbs))
:root-shape root-shape
:component component
:container container
:is-hidden (not visible?)}]
(when (ctc/is-variant? component)
[:span {:class (stl/css-case :variant-mark-cell listing-thumbs?
:variant-mark true
:component-icon true)
[:span {:class (stl/css-case :component-item-variant-mark true
:component-item-grid-variant-mark is-listing-thumbs)
:title (tr "workspace.assets.components.num-variants" num-variants)}
[:> icon* {:icon-id i/variant :size "s"}]])])]))
@@ -188,15 +190,14 @@
0
m))
(mf/defc components-group
{::mf/wrap-props false}
[{:keys [file-id prefix groups open-groups force-open? renaming listing-thumbs? selected on-asset-click
(mf/defc components-group*
[{:keys [file-id prefix groups open-groups is-force-open renaming is-listing-thumbs selected on-asset-click
on-drag-start do-rename cancel-rename on-rename-group on-group on-ungroup on-context-menu
selected-full is-local count-variants on-group-combine-variants]}]
(let [group-open? (if (false? (get open-groups prefix)) ;; if the user has closed it specifically, respect that
false
(or ^boolean force-open?
(or ^boolean is-force-open
^boolean (get open-groups prefix (if (= prefix "") true false))))
dragging* (mf/use-state false)
dragging? (deref dragging*)
@@ -238,40 +239,40 @@
:on-drag-leave on-drag-leave
:on-drag-over dom/prevent-default
:on-drop on-drop}
[:& grp/asset-group-title
[:> grp/asset-group-title*
{:file-id file-id
:section :components
:path prefix
:group-open? group-open?
:can-combine? can-combine?
:is-group-open group-open?
:is-can-combine can-combine?
:on-rename on-rename-group
:on-ungroup on-ungroup
:on-group-combine-variants on-group-combine-variants}]
(when group-open?
[:*
[:div {:class (stl/css-case :asset-grid listing-thumbs?
:asset-enum (not listing-thumbs?))
[:div {:class (stl/css-case :component-group-grid is-listing-thumbs
:component-group-list (not is-listing-thumbs))
: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"])
[:div {:class (stl/css :component-group-placeholder)} "\u00A0"])
(when (and (empty? components)
(some? groups)
is-local)
[:div {:class (stl/css-case :drop-space true
:drop-space-small (not dragging?))}])
[:div {:class (stl/css-case :component-group-drop-space true
:component-group-drop-space-small (not dragging?))}])
(for [component components]
[:& components-item
[:> components-item*
{:component component
:key (dm/str "component-" (:id component))
:renaming renaming
:listing-thumbs? listing-thumbs?
:is-listing-thumbs is-listing-thumbs
:file-id file-id
:selected selected
:selected-full selected-full
@@ -287,32 +288,32 @@
(for [[path-item content] groups]
(when-not (empty? path-item)
[:& components-group {:file-id file-id
:key path-item
:prefix (cpn/merge-path-item prefix path-item)
:groups content
:open-groups open-groups
:force-open? force-open?
:renaming renaming
: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
:on-group-combine-variants on-group-combine-variants
:selected-full selected-full
:is-local is-local
:count-variants count-variants}]))])]))
[:> components-group* {:file-id file-id
:key path-item
:prefix (cpn/merge-path-item prefix path-item)
:groups content
:open-groups open-groups
:is-force-open is-force-open
:renaming renaming
:is-listing-thumbs is-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
:on-group-combine-variants on-group-combine-variants
:selected-full selected-full
:is-local is-local
:count-variants count-variants}]))])]))
(mf/defc components-section
{::mf/wrap-props false}
[{:keys [file-id is-local components listing-thumbs? open? force-open?
reverse-sort? selected on-asset-click on-assets-delete
on-clear-selection open-status-ref delete-component count-variants]}]
(mf/defc components-section*
[{:keys [file-id components selected open-status-ref
is-local is-listing-thumbs is-open is-force-open is-reverse-sort
on-asset-click on-assets-delete on-clear-selection
delete-component count-variants]}]
(let [input-ref (mf/use-ref nil)
@@ -356,8 +357,8 @@
(let [page (:main-instance-page (first selected-and-current-full))]
(every? #(= page (:main-instance-page %)) selected-and-current-full)))
groups (mf/with-memo [components reverse-sort?]
(grp/group-assets components reverse-sort?))
groups (mf/with-memo [components is-reverse-sort]
(grp/group-assets components is-reverse-sort))
add-component
(mf/use-fn
@@ -554,15 +555,15 @@
(st/emit!
(dwv/combine-as-variants ids {:page-id page-id :trigger "workspace:context-menu-assets"})))))]
[:& cmm/asset-section {:file-id file-id
:title (tr "workspace.assets.components")
:section :components
:assets-count (count components)
:open? open?}
[:& cmm/asset-section-block {:role :title-button}
(when ^boolean open?
[:div {:class (stl/css :listing-options)}
[:& radio-buttons {:selected (if listing-thumbs? "grid" "list")
[:> cmm/asset-section* {:file-id file-id
:title (tr "workspace.assets.components")
:section :components
:assets-count (count components)
:is-open is-open}
[:> cmm/asset-section-block* {:role :title-button}
(when ^boolean is-open
[:div
[:& radio-buttons {:selected (if is-listing-thumbs "grid" "list")
:on-change toggle-list-style
:name "listing-style"}
[:& radio-button {:icon deprecated-icon/view-as-list
@@ -584,30 +585,30 @@
:ref input-ref
:on-selected on-file-selected}]])]
[:& cmm/asset-section-block {:role :content}
(when ^boolean open?
[:& components-group {:file-id file-id
:prefix ""
:groups groups
:open-groups open-groups
:force-open? force-open?
:renaming (when ^boolean renaming? current-component-id)
: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-group on-group
:on-ungroup on-ungroup
:on-group-combine-variants on-group-combine-variants
:on-context-menu on-context-menu
:selected-full selected-full
:is-local ^boolean is-local
:count-variants count-variants}])
[:> cmm/asset-section-block* {:role :content}
(when ^boolean is-open
[:> components-group* {:file-id file-id
:prefix ""
:groups groups
:open-groups open-groups
:is-force-open is-force-open
:renaming (when ^boolean renaming? current-component-id)
:is-listing-thumbs is-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-group on-group
:on-ungroup on-ungroup
:on-group-combine-variants on-group-combine-variants
:on-context-menu on-context-menu
:selected-full selected-full
:is-local ^boolean is-local
:count-variants count-variants}])
[:& cmm/assets-context-menu
[:> cmm/assets-context-menu*
{:on-close on-close-menu
:state @menu-state
:options [(when (and is-local (not (or multi-components? multi-assets? read-only?)))
@@ -619,10 +620,6 @@
:id "assets-duplicate-component"
:handler on-duplicate})
(when (and is-local (not read-only?))
{:name (tr "workspace.assets.delete")
:id "assets-delete-component"
:handler on-delete})
(when (and is-local (not (or multi-assets? read-only?)))
{:name (tr "workspace.assets.group")
:id "assets-group-component"
@@ -637,4 +634,9 @@
:id "assets-combine-as-variants"
:title (when-not all-same-page? (tr "workspace.shape.menu.combine-as-variants-error"))
:disabled (not all-same-page?)
:handler on-combine-as-variants})]}]]]))
:handler on-combine-as-variants})
(when (and is-local (not read-only?))
{:name (tr "workspace.assets.delete")
:id "assets-delete-component"
:handler on-delete})]}]]]))

327
frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
View File

@@ -4,108 +4,109 @@
//
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/colors.scss" as *;
@use "ds/typography.scss" as t;
.drop-space {
height: deprecated.$s-12;
}
.drop-space-small {
height: deprecated.$s-2;
}
.asset-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(deprecated.$s-96, 1fr));
max-width: 100%;
gap: deprecated.$s-4;
margin-inline: deprecated.$s-8;
}
.grid-cell {
@include deprecated.flexCenter;
.component-item {
position: relative;
aspect-ratio: 1 / 1;
padding: deprecated.$s-8;
border-radius: deprecated.$br-8;
background-color: var(--assets-component-background-color);
overflow: hidden;
cursor: pointer;
}
.variant-mark {
background-color: var(--color-background-tertiary);
border-radius: deprecated.$br-8;
}
.cell-name {
@include deprecated.bodySmallTypography;
@include deprecated.textEllipsis;
display: none;
position: absolute;
left: deprecated.$s-4;
bottom: deprecated.$s-4;
height: calc(deprecated.$s-24 - deprecated.$s-2);
width: calc(100% - 2 * deprecated.$s-4);
padding: deprecated.$s-2 deprecated.$s-6;
column-gap: deprecated.$s-4;
border-radius: deprecated.$br-4;
background-color: var(--assets-item-name-background-color);
border: deprecated.$s-1 solid transparent;
color: var(--assets-item-name-foreground-color);
input {
@include deprecated.textEllipsis;
@include deprecated.bodySmallTypography;
@include deprecated.removeInputStyle;
height: auto;
padding: 0;
}
span {
display: flex;
align-items: center;
height: 100%;
}
&.editing {
border-color: var(--input-border-color-focus);
border-radius: deprecated.$br-4;
display: flex;
align-items: center;
background-color: var(--input-background-color);
}
}
.component-item-grid {
aspect-ratio: 1 / 1;
padding: var(--sp-s);
border-radius: $br-8;
background-color: var(--color-canvas);
overflow: hidden;
&:hover {
.cell-name {
display: block;
.component-item-grid-name {
display: flex;
}
}
&.selected {
border: deprecated.$s-2 solid var(--assets-item-border-color);
&.component-item-selected {
border: $b-2 solid var(--color-accent-primary);
&::before {
content: " ";
position: absolute;
z-index: deprecated.$z-index-2;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: deprecated.$s-4 solid var(--assets-component-second-border-selected);
border-radius: deprecated.$br-8;
border: calc($b-2 * 2) solid var(--color-background-primary);
border-radius: $br-8;
}
}
}
.component-group {
display: grid;
grid-template-columns: 1fr;
gap: deprecated.$s-4;
.component-item-grid-name {
display: none;
align-items: center;
position: absolute;
height: $sz-24;
left: var(--sp-xs);
right: var(--sp-xs);
bottom: var(--sp-xs);
padding: var(--sp-xxs) var(--sp-s);
border-radius: $br-4;
background-color: var(--color-background-primary);
color: var(--color-foreground-primary);
padding: 0;
&.component-item-editing {
display: flex;
}
}
.thumbnail {
.component-item-grid-input {
border-radius: $br-4;
}
.component-item-grid-label {
padding: 0 var(--sp-s);
}
.component-item-list {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
column-gap: var(--sp-s);
padding: var(--sp-xxs);
margin-inline-end: var(--sp-xxs);
border-radius: $br-8;
background-color: var(--color-background-tertiary);
&:hover {
background-color: var(--color-background-quaternary);
}
&.component-item-selected {
outline: $b-1 solid var(--color-accent-primary);
}
}
.component-item-list-name {
overflow: hidden;
order: 2;
display: flex;
align-items: center;
color: var(--color-foreground-primary);
padding: 0;
}
.component-item-list-input {
border-radius: $br-8;
height: $sz-32;
}
.component-item-list-label {
padding: 0;
}
.component-item-thumbnail {
width: 100%;
height: 100%;
object-fit: contain;
@@ -113,130 +114,76 @@
border: 0;
}
.grid-placeholder {
width: 100%;
border-radius: deprecated.$br-8;
background-color: var(--assets-item-background-color-drag);
border: deprecated.$s-2 solid var(--assets-item-border-color-drag);
}
.enum-item {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: deprecated.$s-8;
height: deprecated.$s-44;
padding-right: deprecated.$s-4;
padding: deprecated.$s-1;
border: deprecated.$s-1 solid transparent;
border-radius: deprecated.$br-8;
background-color: var(--assets-item-background-color);
cursor: pointer;
&:not(:last-child) {
margin-bottom: deprecated.$s-4;
}
&:hover {
background-color: var(--assets-item-background-color-hover);
.item-name {
color: var(--assets-item-name-foreground-color-hover);
&.editing {
background: var(--input-background-color);
input {
color: var(--input-foreground-color-active);
}
}
}
}
&.selected {
border: deprecated.$s-1 solid var(--assets-item-border-color);
}
}
.enum-item-with-mark {
grid-template-columns: auto 1fr deprecated.$s-24;
padding-right: deprecated.$s-4;
}
.item-name {
@include deprecated.bodySmallTypography;
@include deprecated.textEllipsis;
order: 2;
color: var(--assets-item-name-foreground-color);
input {
@include deprecated.textEllipsis;
@include deprecated.bodySmallTypography;
@include deprecated.removeInputStyle;
height: deprecated.$s-32;
padding: deprecated.$s-4;
}
span {
display: flex;
place-items: center;
padding-inline-end: deprecated.$s-4;
}
&.editing {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: deprecated.$s-8;
border: deprecated.$s-1 solid var(--input-border-color-focus);
border-radius: deprecated.$br-8;
background-color: var(--input-background-color);
}
}
.asset-list-thumbnail {
@include deprecated.flexCenter;
.component-item-list-thumbnail {
flex-shrink: 0;
padding: deprecated.$s-2;
height: deprecated.$s-40;
width: deprecated.$s-40;
border-radius: deprecated.$br-6;
background-color: var(--assets-component-background-color);
padding: var(--sp-xxs);
height: $sz-40;
width: $sz-40;
border-radius: $br-6;
background-color: var(--color-canvas);
}
.grid-placeholder {
height: deprecated.$s-2;
width: 100%;
background-color: var(--color-accent-primary);
}
.listing-options {
.component-item-variant-mark {
margin-right: var(--sp-xs);
display: flex;
align-items: center;
justify-content: center;
height: $sz-24;
width: $sz-24;
color: var(--color-accent-secondary);
order: 3;
}
.dragging {
.component-item-grid-variant-mark {
margin: 0;
position: absolute;
right: var(--sp-xxs);
top: var(--sp-xxs);
border-radius: $br-8;
background-color: var(--color-background-tertiary);
}
.component-item-dragging {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: deprecated.$s-8;
background-color: var(--assets-item-background-color-drag);
border: deprecated.$s-2 solid var(--assets-item-border-color-drag);
border-radius: var(--sp-s);
border: $b-2 solid var(--color-accent-primary-muted);
}
.variant-mark-cell {
position: absolute;
right: deprecated.$s-2;
top: deprecated.$s-2;
.component-group {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-xs);
}
.component-icon {
@include deprecated.flexCenter;
height: deprecated.$s-24;
width: deprecated.$s-24;
order: 3;
color: var(--color-accent-secondary);
.component-group-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(calc($sz-48 * 2), 1fr));
max-width: 100%;
gap: var(--sp-xs);
margin-inline: var(--sp-s);
}
.component-group-list {
display: flex;
flex-direction: column;
gap: var(--sp-xs);
}
.component-group-placeholder {
width: 100%;
height: var(--sp-xxs);
border-radius: $br-8;
background-color: var(--color-accent-primary);
}
.component-group-drop-space {
height: var(--sp-m);
}
.component-group-drop-space-small {
height: var(--sp-xxs);
}

42
frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs
View File

@@ -23,10 +23,10 @@
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.workspace.sidebar.assets.colors :refer [colors-section]]
[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.typographies :refer [typographies-section]]
[app.main.ui.workspace.sidebar.assets.components :refer [components-section*]]
[app.main.ui.workspace.sidebar.assets.typographies :refer [typographies-section*]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
@@ -249,16 +249,16 @@
[:span {:class (stl/css :loading)} (tr "labels.loading")]
[:*
(when ^boolean show-components?
[:& components-section
[:> components-section*
{:file-id file-id
:is-local is-local
:components components
:listing-thumbs? listing-thumbs?
:open? (or ^boolean force-open-components?
^boolean (get open-status :components false))
:force-open? force-open-components?
:is-listing-thumbs listing-thumbs?
:is-open (or ^boolean force-open-components?
^boolean (get open-status :components false))
:is-force-open force-open-components?
:open-status-ref open-status-ref
:reverse-sort? reverse-sort?
:is-reverse-sort reverse-sort?
:selected selected
:on-asset-click on-component-click
:on-assets-delete on-assets-delete
@@ -267,31 +267,31 @@
:count-variants count-variants}])
(when ^boolean show-colors?
[:& colors-section
[:> colors-section*
{:file-id file-id
:local? is-local
:is-local is-local
:colors colors
:open? (or ^boolean force-open-colors?
^boolean (get open-status :colors false))
:force-open? force-open-colors?
:is-open (or ^boolean force-open-colors?
^boolean (get open-status :colors false))
:is-force-open force-open-colors?
:open-status-ref open-status-ref
:reverse-sort? reverse-sort?
:is-reverse-sort reverse-sort?
:selected selected
:on-asset-click on-colors-click
:on-assets-delete on-assets-delete
:on-clear-selection on-clear-selection}])
(when ^boolean show-typography?
[:& typographies-section
[:> typographies-section*
{:file file
:file-id (:id file)
:local? is-local
:is-local is-local
:typographies typographies
:open? (or ^boolean force-open-typographies?
^boolean (get open-status :typographies false))
:force-open? force-open-typographies?
:is-open (or ^boolean force-open-typographies?
^boolean (get open-status :typographies false))
:is-force-open force-open-typographies?
:open-status-ref open-status-ref
:reverse-sort? reverse-sort?
:is-reverse-sort reverse-sort?
:selected selected
:on-asset-click on-typography-click
:on-assets-delete on-assets-delete

14
frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs
View File

@@ -22,20 +22,20 @@
[app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf]))
(mf/defc asset-group-title
[{:keys [file-id section path group-open? on-rename on-ungroup on-group-combine-variants can-combine?]}]
(mf/defc asset-group-title*
[{:keys [file-id section path is-group-open on-rename on-ungroup on-group-combine-variants is-can-combine]}]
(when-not (empty? path)
(let [[other-path last-path truncated] (cpn/compact-path path 35 true)
menu-state (mf/use-state cmm/initial-context-menu-state)
on-fold-group
(mf/use-fn
(mf/deps file-id section path group-open?)
(mf/deps file-id section path is-group-open)
(fn [event]
(dom/stop-propagation event)
(st/emit! (dw/set-assets-group-open file-id
section
path
(not group-open?)))))
(not is-group-open)))))
on-context-menu
(mf/use-fn
(fn [event]
@@ -50,7 +50,7 @@
[:div {:class (stl/css :group-title)
:on-context-menu on-context-menu}
[:> title-bar* {:collapsable true
:collapsed (not group-open?)
:collapsed (not is-group-open)
:all-clickable true
:on-collapsed on-fold-group
:title (mf/html [:* (when-not (empty? other-path)
@@ -61,7 +61,7 @@
:title (when truncated path)}
last-path]])}]
[:& cmm/assets-context-menu
[:> cmm/assets-context-menu*
{:on-close on-close-menu
:state @menu-state
:options (cond-> [{:name (tr "workspace.assets.rename")
@@ -70,7 +70,7 @@
{:name (tr "workspace.assets.ungroup")
:id "assets-ungroup-group"
:handler #(on-ungroup path)}]
can-combine?
is-can-combine
(conj
{:name (tr "workspace.shape.menu.combine-as-variants")
:id "assets-combine-as-variants"

48
frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs
View File

@@ -170,12 +170,12 @@
: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 :typographies
:path prefix
:group-open? group-open?
:on-rename on-rename-group
:on-ungroup on-ungroup}]
[:> grp/asset-group-title* {:file-id file-id
:section :typographies
:path prefix
:is-group-open group-open?
:on-rename on-rename-group
:on-ungroup on-ungroup}]
(when group-open?
[:*
@@ -230,9 +230,9 @@
:on-context-menu on-context-menu
:selected-full selected-full}]))])]))
(mf/defc typographies-section
{::mf/wrap-props false}
[{:keys [file file-id local? typographies open? force-open? open-status-ref selected reverse-sort?
(mf/defc typographies-section*
[{:keys [file file-id typographies open-status-ref selected
is-local is-open is-force-open is-reverse-sort
on-asset-click on-assets-delete on-clear-selection]}]
(let [state (mf/use-state {:detail-open? false :id nil})
local-data (mf/deref lens:typography-section-state)
@@ -243,8 +243,8 @@
typographies (mf/with-memo [typographies]
(mapv dwl/extract-path-if-missing typographies))
groups (mf/with-memo [typographies reverse-sort?]
(grp/group-assets typographies reverse-sort?))
groups (mf/with-memo [typographies is-reverse-sort]
(grp/group-assets typographies is-reverse-sort))
selected (:typographies selected)
selected-full (mf/with-memo [selected typographies]
@@ -393,28 +393,28 @@
(st/emit! #(update % :workspace-global dissoc :edit-typography)))))
[:*
[:& cmm/asset-section {:file-id file-id
:title (tr "workspace.assets.typography")
:section :typographies
:assets-count (count typographies)
:open? open?}
(when local?
[:& cmm/asset-section-block {:role :title-button}
[:> cmm/asset-section* {:file-id file-id
:title (tr "workspace.assets.typography")
:section :typographies
:assets-count (count typographies)
:is-open is-open}
(when is-local
[:> cmm/asset-section-block* {:role :title-button}
(when-not read-only?
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.assets.typography.add-typography")
:on-click add-typography
:icon i/add}])])
[:& cmm/asset-section-block {:role :content}
[:> cmm/asset-section-block* {:role :content}
[:& typographies-group {:file-id file-id
:prefix ""
:groups groups
:open-groups open-groups
:force-open? force-open?
:force-open? is-force-open
:state state
:file file
:local? local?
:local? is-local
:selected selected
:editing-id editing-id
:renaming-id renaming-id
@@ -426,8 +426,8 @@
:on-context-menu on-context-menu
:selected-full selected-full}]
(if local?
[:& cmm/assets-context-menu
(if is-local
[:> cmm/assets-context-menu*
{:on-close on-close-menu
:state @menu-state
:options [(when-not (or multi-typographies? multi-assets?)
@@ -449,7 +449,7 @@
:id "assets-group-typography"
:handler on-group})]}]
[:& cmm/assets-context-menu
[:> cmm/assets-context-menu*
{:on-close on-close-menu
:state @menu-state
:options [{:name "show info"

14
frontend/src/app/main/ui/workspace/tokens/management/group.cljs
View File

@@ -101,12 +101,12 @@
:shapes selected-shapes})))))]
[:div {:on-click on-toggle-open-click :class (stl/css :token-section-wrapper)}
[:& cmm/asset-section {:icon (token-section-icon type)
:title title
:section :tokens
:assets-count (count tokens)
:open? is-open}
[:& cmm/asset-section-block {:role :title-button}
[:> cmm/asset-section* {:icon (token-section-icon type)
:title title
:section :tokens
:assets-count (count tokens)
:is-open is-open}
[:> cmm/asset-section-block* {:role :title-button}
(when can-edit?
[:> icon-button* {:on-click on-popover-open-click
:variant "ghost"
@@ -114,7 +114,7 @@
:id (str "add-token-button-" title)
:aria-label (tr "workspace.tokens.add-token" title)}])]
(when is-open
[:& cmm/asset-section-block {:role :content}
[:> cmm/asset-section-block* {:role :content}
[:div {:class (stl/css :token-pills-wrapper)}
(for [token tokens]
[:> token-pill*