From cf72b35e733156bb8157c5ac984339d7377649d8 Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Thu, 5 Dec 2024 16:11:27 +0100 Subject: [PATCH 1/3] :bug: Fix separator lines have no color at some menus --- frontend/src/app/main/ui/components/context_menu_a11y.scss | 2 +- frontend/src/app/main/ui/dashboard/sidebar.scss | 1 + frontend/src/app/main/ui/static.scss | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.scss b/frontend/src/app/main/ui/components/context_menu_a11y.scss index ea8a89cc5..b85ed9af5 100644 --- a/frontend/src/app/main/ui/components/context_menu_a11y.scss +++ b/frontend/src/app/main/ui/components/context_menu_a11y.scss @@ -36,7 +36,7 @@ background-color: var(--menu-background-color); overflow: auto; & .separator { - height: $s-12; + border-top: solid $s-1 var(--color-background-quaternary); } &.min-width { diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss index 22a0a3c9c..576729198 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.scss +++ b/frontend/src/app/main/ui/dashboard/sidebar.scss @@ -370,6 +370,7 @@ .profile-separator { height: $s-6; + border-top: solid $s-1 var(--color-background-quaternary); } .item-with-icon { diff --git a/frontend/src/app/main/ui/static.scss b/frontend/src/app/main/ui/static.scss index 0a509f016..aff796cee 100644 --- a/frontend/src/app/main/ui/static.scss +++ b/frontend/src/app/main/ui/static.scss @@ -318,7 +318,7 @@ hr { margin: $s-20 0; - border-top: solid 1px var(--modal-separator-backogrund-color); + border-top: solid $s-1 var(--modal-separator-backogrund-color); } .separator { From f2f3d9f7eb7f7e0c7db9623bd1c4ceee94d89aa7 Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Mon, 9 Dec 2024 09:35:53 +0100 Subject: [PATCH 2/3] :lipstick: Fix css format (spacing) --- .../main/ui/components/context_menu_a11y.scss | 19 +++++++++++++++++++ .../src/app/main/ui/dashboard/sidebar.scss | 8 ++++++++ 2 files changed, 27 insertions(+) diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.scss b/frontend/src/app/main/ui/components/context_menu_a11y.scss index b85ed9af5..a2ced28ce 100644 --- a/frontend/src/app/main/ui/components/context_menu_a11y.scss +++ b/frontend/src/app/main/ui/components/context_menu_a11y.scss @@ -18,6 +18,7 @@ opacity: $op-10; visibility: visible; } + &.fixed { position: fixed; } @@ -35,6 +36,7 @@ border: $s-2 solid var(--panel-border-color); background-color: var(--menu-background-color); overflow: auto; + & .separator { border-top: solid $s-1 var(--color-background-quaternary); } @@ -45,6 +47,7 @@ .context-menu-item { display: flex; + .context-menu-action { @include bodySmallTypography; display: flex; @@ -56,12 +59,15 @@ border-radius: $br-8; white-space: nowrap; color: var(--menu-foreground-color); + &.submenu { display: flex; align-items: center; justify-content: space-between; + .submenu-icon { margin-left: 0.5rem; + svg { @extend .button-icon-small; stroke: var(--menu-foreground-color); @@ -76,6 +82,7 @@ background: none; border: none; cursor: pointer; + .submenu-icon-back svg { @extend .button-icon-small; stroke: var(--menu-foreground-color); @@ -83,27 +90,34 @@ } } } + &:hover .context-menu-action { background-color: var(--menu-background-color-hover); text-decoration: none; color: var(--menu-foreground-color); + &.submenu .submenu-icon svg { stroke: var(--menu-foreground-color); } + &.submenu-back .submenu-icon-back svg { stroke: var(--menu-foreground-color); } } + &:focus { outline: none; } + &:focus-visible { outline: none; + .context-menu-action { border: 1px solid var(--menu-border-color-focus); background-color: var(--menu-background-color-focus); text-decoration: none; color: var(--menu-foreground-color-focus); + &.submenu .submenu-icon svg { stroke: var(--menu-foreground-color-focus); } @@ -113,15 +127,18 @@ } } } + &.selected { .context-menu-action { justify-content: space-between; color: var(--menu-foreground-color-focus); } + .selected-icon { @extend .button-tag; border-radius: $br-8; height: 100%; + svg { @extend .button-icon-small; stroke: var(--menu-foreground-color-focus); @@ -129,6 +146,7 @@ } } } + .is-selected .context-menu-action { padding-left: $s-28; background-image: url(/images/icons/tick.svg); @@ -138,6 +156,7 @@ font-weight: $fw700; } } + &.is-selectable { .context-menu-action { padding-left: 1.5rem; diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss index 576729198..0f7dc1345 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.scss +++ b/frontend/src/app/main/ui/dashboard/sidebar.scss @@ -78,6 +78,7 @@ // This icon still use the old svg .penpot-icon { @include flexCenter; + svg { fill: var(--icon-foreground); width: $s-24; @@ -138,6 +139,7 @@ .action { --sidebar-action-icon-color: var(--icon-foreground); --sidebar-icon-backgroun-color: var(--color-background-secondary); + &:hover { --sidebar-action-icon-color: var(--color-background-secondary); --sidebar-icon-backgroun-color: var(--color-accent-primary); @@ -175,6 +177,7 @@ right: $s-2; top: $s-52; max-height: $s-480; + &:not(.teams-dropdown) { min-width: $s-160; } @@ -204,8 +207,10 @@ .sidebar-nav-item { cursor: pointer; + &:hover { background-color: var(--sidebar-element-background-color-hover); + span { color: var(--sidebar-element-foreground-color-hover); } @@ -213,6 +218,7 @@ &.current { background-color: var(--sidebar-element-background-color-selected); + .element-title { color: var(--sidebar-element-foreground-color-selected); } @@ -228,6 +234,7 @@ padding: $s-8 $s-8 $s-8 $s-24; font-weight: $fw400; width: 100%; + &:hover { text-decoration: none; } @@ -293,6 +300,7 @@ outline: none; border: $s-1 solid var(--search-bar-input-border-color-focus); } + ::placeholder { color: var(--search-bar-placeholder-foreground-color); } From b0a3f2b72a456a12ec9da561ebb33c31a4ef636b Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Thu, 5 Dec 2024 15:55:14 +0100 Subject: [PATCH 3/3] :bug: Fix history panel remains open after restoring a version --- frontend/playwright/ui/specs/versions.spec.js | 3 +++ frontend/src/app/main/data/workspace/versions.cljs | 3 ++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/playwright/ui/specs/versions.spec.js b/frontend/playwright/ui/specs/versions.spec.js index f99ae148c..eb74fbae3 100644 --- a/frontend/playwright/ui/specs/versions.spec.js +++ b/frontend/playwright/ui/specs/versions.spec.js @@ -71,4 +71,7 @@ test("Save and restore version", async ({ page }) => { ); await page.getByRole("button", { name: "Restore" }).click(); + + // check that the history panel is closed after restore + await expect(page.getByRole("tab", { name: "design" })).toBeVisible(); }); diff --git a/frontend/src/app/main/data/workspace/versions.cljs b/frontend/src/app/main/data/workspace/versions.cljs index a9de40a13..0808c6f47 100644 --- a/frontend/src/app/main/data/workspace/versions.cljs +++ b/frontend/src/app/main/data/workspace/versions.cljs @@ -126,7 +126,8 @@ ptk/WatchEvent (watch [_ _ _] (rx/concat - (rx/of ::dwp/force-persist) + (rx/of ::dwp/force-persist + (dw/remove-layout-flag :document-history)) (->> (rx/from-atom refs/persistence-state {:emit-current-value? true}) (rx/filter #(or (nil? %) (= :saved %))) (rx/take 1)