From 34f1f3d103e6e2334d0e170d428eb2038aa62865 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Wed, 10 Jan 2024 16:09:46 +0100 Subject: [PATCH] :bug: Fix hover on assets thumbnails + broken editable label --- .../styles/common/refactor/color-defs.scss | 1 + .../styles/common/refactor/design-tokens.scss | 1 + .../main/ui/components/editable_label.cljs | 31 +++--- .../workspace/sidebar/assets/components.cljs | 1 + .../workspace/sidebar/assets/components.scss | 94 +++++++------------ 5 files changed, 56 insertions(+), 72 deletions(-) diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss index 4efe6a28f..7489f1884 100644 --- a/frontend/resources/styles/common/refactor/color-defs.scss +++ b/frontend/resources/styles/common/refactor/color-defs.scss @@ -11,6 +11,7 @@ --dark-gray-1: #1d1f20; --dark-gray-2: #000000; --dark-gray-2-30: rgba(0, 0, 0, 0.3); + --dark-gray-2-80: rgba(0, 0, 0, 0.8); --dark-gray-3: #292c2d; --dark-gray-4: #34393b; --white: #fff; diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index 865de22e7..27b2538b6 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -200,6 +200,7 @@ --assets-title-background-color: var(--color-background-primary); --assets-item-background-color: var(--color-background-tertiary); --assets-item-background-color-hover: var(--color-background-quaternary); + --assets-item-name-background-color: var(--dark-gray-2-80); // TODO: penpot file has a non-existing token --assets-item-name-foreground-color: var(--color-foreground-secondary); --assets-item-name-foreground-color-hover: var(--color-foreground-primary); --assets-item-name-foreground-color-disabled: var(--color-foreground-disabled); diff --git a/frontend/src/app/main/ui/components/editable_label.cljs b/frontend/src/app/main/ui/components/editable_label.cljs index caa5c5426..0b5930c92 100644 --- a/frontend/src/app/main/ui/components/editable_label.cljs +++ b/frontend/src/app/main/ui/components/editable_label.cljs @@ -23,6 +23,9 @@ 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) @@ -82,15 +85,21 @@ (when (and editing? (not internal-editing?)) (start-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}] + (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 + :on-blur cancel-edition}] - [:span {:class (stl/css :editable-label-close) - :on-click cancel-edition} - i/delete-text-refactor]])) + [:span {:class (stl/css :editable-label-close) + :on-click cancel-edition} + i/delete-text-refactor]] + + [:span {:class final-class + :title tooltip + :on-double-click on-dbl-click} + display-value]))) 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 b44390286..edb836d23 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs @@ -179,6 +179,7 @@ (when visible? [:& cmm/component-item-thumbnail {:file-id file-id + :class (stl/css :thumbnail) :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 6496b917e..116f23c12 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss @@ -11,17 +11,17 @@ } .asset-grid { display: grid; - grid-template-columns: repeat(2, 1fr); - grid-auto-rows: calc(10vh + $s-16); + grid-template-columns: repeat(auto-fill, minmax($s-112, 1fr)); + grid-auto-rows: $s-112; + max-width: 100%; gap: $s-4; - margin-left: $s-8; + margin-inline: $s-8; } .grid-cell { @include flexCenter; position: relative; padding: $s-8; - border: $s-4 solid transparent; border-radius: $br-8; background-color: var(--assets-component-background-color); overflow: hidden; @@ -32,68 +32,46 @@ max-height: 100%; max-width: 100%; pointer-events: none; + border: 0; } - svg { - height: 10vh; - } + .cell-name { @include titleTipography; @include textEllipsis; display: none; position: absolute; - left: 0; - bottom: 0; - width: 100%; + left: $s-4; + bottom: $s-4; + width: calc(100% - 2 * $s-4); padding: $s-2; - &.editing { + column-gap: $s-4; + border-radius: $br-2; + background-color: var(--assets-item-name-background-color); + color: var(--assets-item-name-foreground-color); + input { + @include textEllipsis; + @include titleTipography; + @include removeInputStyle; + height: auto; + padding: 0; + } + span { display: flex; align-items: center; - height: $s-32; + } + &.editing { border: $s-1 solid var(--input-border-color-focus); - border-radius: $br-8; + border-radius: $br-2; + display: flex; + align-items: center; 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); .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%); - &.editing { - display: flex; - background: var(--input-background-color); - input { - color: var(--input-foreground-color-active); - } - span svg { - stroke: var(--input-foreground-color-active); - } - } + display: flex; } } @@ -102,6 +80,12 @@ } } +.thumbnail { + width: 100%; + height: 100%; + object-fit: contain; +} + .grid-placeholder { width: 100%; border-radius: $br-8; @@ -229,18 +213,6 @@ } } -:global(.three-row) { - .asset-grid { - grid-template-columns: repeat(3, 1fr); - } -} - -:global(.four-row) { - .asset-grid { - grid-template-columns: repeat(4, 1fr); - } -} - .dragging { position: absolute; top: 0;