From 30a53252f875578c75a877f7902aacab96271453 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Thu, 11 Jan 2024 14:50:02 +0100 Subject: [PATCH] :bug: Fix asset list UI --- frontend/src/app/main/render.cljs | 6 +- .../ui/workspace/sidebar/assets/common.cljs | 4 +- .../workspace/sidebar/assets/components.cljs | 3 +- .../workspace/sidebar/assets/components.scss | 103 ++++++++---------- 4 files changed, 54 insertions(+), 62 deletions(-) diff --git a/frontend/src/app/main/render.cljs b/frontend/src/app/main/render.cljs index a8efca58a..a9a943a27 100644 --- a/frontend/src/app/main/render.cljs +++ b/frontend/src/app/main/render.cljs @@ -336,7 +336,7 @@ ;; used to render thumbnails on assets panel. (mf/defc component-svg {::mf/wrap [mf/memo #(mf/deferred % ts/idle-then-raf)]} - [{:keys [objects root-shape show-grids? zoom] :or {zoom 1} :as props}] + [{:keys [objects root-shape show-grids? zoom class] :or {zoom 1} :as props}] (when root-shape (let [root-shape-id (:id root-shape) include-metadata (mf/use-ctx export/include-metadata-ctx) @@ -373,6 +373,7 @@ :width (ust/format-precision width viewbox-decimal-precision) :height (ust/format-precision height viewbox-decimal-precision) :version "1.1" + :class class :xmlns "http://www.w3.org/2000/svg" :xmlnsXlink "http://www.w3.org/1999/xlink" :xmlns:penpot (when include-metadata "https://penpot.app/xmlns") @@ -388,7 +389,7 @@ (mf/defc component-svg-thumbnail {::mf/wrap [mf/memo #(mf/deferred % ts/idle-then-raf)]} - [{:keys [thumbnail-uri on-error show-grids? + [{:keys [thumbnail-uri on-error show-grids? class objects root-shape zoom] :or {zoom 1} :as props}] (when root-shape @@ -421,6 +422,7 @@ :width (ust/format-precision width-zoom viewbox-decimal-precision) :height (ust/format-precision height-zoom viewbox-decimal-precision) :version "1.1" + :class class :xmlns "http://www.w3.org/2000/svg" :xmlnsXlink "http://www.w3.org/1999/xlink" :fill "none"} diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs index 7b4194a7f..b46e6a809 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs @@ -281,7 +281,7 @@ (mf/defc component-item-thumbnail "Component that renders the thumbnail image or the original SVG." {::mf/wrap-props false} - [{:keys [file-id root-shape component container]}] + [{:keys [file-id root-shape component container class]}] (let [retry (mf/use-state 0) thumbnail-uri (get-component-thumbnail-uri file-id component) handle-error @@ -294,6 +294,7 @@ (if (some? thumbnail-uri) [:& component-svg-thumbnail {:thumbnail-uri thumbnail-uri + :class class :on-error handle-error :root-shape root-shape :objects (:objects container) @@ -301,6 +302,7 @@ [:& component-svg {:root-shape root-shape + :class class :objects (:objects container) :show-grids? true}]))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs index edb836d23..3175edcf9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs @@ -179,7 +179,8 @@ (when visible? [:& cmm/component-item-thumbnail {:file-id file-id - :class (stl/css :thumbnail) + :class (stl/css-case :thumbnail true + :asset-list-thumbnail (not listing-thumbs?)) :root-shape root-shape :component component :container container}])])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss index 116f23c12..baef288b8 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss @@ -26,14 +26,6 @@ background-color: var(--assets-component-background-color); overflow: hidden; cursor: pointer; - img { - height: auto; - width: auto; - max-height: 100%; - max-width: 100%; - pointer-events: none; - border: 0; - } .cell-name { @include titleTipography; @@ -84,6 +76,8 @@ width: 100%; height: 100%; object-fit: contain; + pointer-events: none; + border: 0; } .grid-placeholder { @@ -96,10 +90,13 @@ .asset-enum { margin: 0 $s-12; } + .enum-item { position: relative; - display: flex; + display: grid; + grid-template-columns: auto 1fr; align-items: center; + column-gap: $s-8; height: $s-36; margin-bottom: $s-4; padding: $s-2; @@ -107,55 +104,6 @@ background-color: var(--assets-item-background-color); cursor: pointer; - svg, - img { - @include flexCenter; - flex-shrink: 0; - padding: $s-2; - height: $s-32; - width: $s-32; - border-radius: $br-6; - background-color: var(--color-foreground-secondary); - } - - .item-name { - @include titleTipography; - @include textEllipsis; - padding-left: $s-8; - color: var(--assets-item-name-foreground-color); - &.editing { - display: flex; - align-items: center; - height: $s-32; - border: $s-1 solid var(--input-border-color-focus); - border-radius: $br-8; - background-color: var(--input-background-color); - input { - @include textEllipsis; - @include titleTipography; - @include removeInputStyle; - flex-grow: 1; - height: $s-28; - max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size))); - padding-left: $s-6; - margin: 0; - border-radius: $br-8; - color: var(--input-foreground-color); - } - span { - @include flexCenter; - height: $s-28; - background-color: transparent; - border-radius: $br-8; - svg { - @extend .button-icon-small; - stroke: var(--input-foreground-color); - transform: rotate(90deg); - } - } - } - } - &:hover { background-color: var(--assets-item-background-color-hover); .item-name { @@ -176,6 +124,45 @@ } } +.item-name { + @include titleTipography; + @include textEllipsis; + order: 2; + color: var(--assets-item-name-foreground-color); + input { + @include textEllipsis; + @include titleTipography; + @include removeInputStyle; + height: $s-32; + padding: $s-4; + } + span { + display: flex; + place-items: center; + padding-inline-end: $s-4; + } + + &.editing { + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + column-gap: $s-8; + border: $s-1 solid var(--input-border-color-focus); + border-radius: $br-8; + background-color: var(--input-background-color); + } +} + +.asset-list-thumbnail { + @include flexCenter; + flex-shrink: 0; + padding: $s-2; + height: $s-32; + width: $s-32; + border-radius: $br-6; + background-color: var(--assets-component-background-color); +} + .grid-placeholder { height: $s-2; width: 100%;