diff --git a/frontend/playwright/ui/visual-specs/workspace.spec.js b/frontend/playwright/ui/visual-specs/workspace.spec.js index 73a58c40cf..fca6925f40 100644 --- a/frontend/playwright/ui/visual-specs/workspace.spec.js +++ b/frontend/playwright/ui/visual-specs/workspace.spec.js @@ -744,6 +744,26 @@ test.describe("Left header", () => { threshold: 0, }); }); + + test("Shows the Penpot logo link", async ({ page }) => { + const workspace = new WorkspacePage(page); + await workspace.setupEmptyFile(); + await workspace.goToWorkspace(); + + const logo = page.locator("header a[class*='main-icon']"); + await expect(logo).toBeVisible(); + await page.mouse.move(640, 600); + await expect(logo).toHaveScreenshot("left-header-logo.png", { + maxDiffPixelRatio: 0, + threshold: 0, + }); + + await logo.hover(); + await expect(logo).toHaveScreenshot("left-header-logo-hover.png", { + maxDiffPixelRatio: 0, + threshold: 0, + }); + }); }); test.describe("Right header", () => { diff --git a/frontend/src/app/main/ui/workspace/left_header.cljs b/frontend/src/app/main/ui/workspace/left_header.cljs index 3eec46c77d..d16a6993fe 100644 --- a/frontend/src/app/main/ui/workspace/left_header.cljs +++ b/frontend/src/app/main/ui/workspace/left_header.cljs @@ -16,7 +16,7 @@ [app.main.router :as rt] [app.main.store :as st] [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]] - [app.main.ui.icons :as deprecated-icon] + [app.main.ui.ds.foundations.assets.raw-svg :as raw-svg :refer [raw-svg*]] [app.main.ui.workspace.main-menu :as main-menu] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -70,33 +70,40 @@ #(st/emit! (dc/stop-picker) (modal/hide))) + router (mf/deref refs/router) + recent-href (rt/resolve-uri router :dashboard-recent {:team-id (:team-id project)}) + project-href (rt/resolve-uri router :dashboard-files {:team-id (:team-id project) + :project-id project-id}) + go-back (mf/use-fn - (fn [] - (close-modals) - ;; FIXME: move set-mode to uri? - (st/emit! :interrupt - (dw/set-options-mode :design) - (dcm/go-to-dashboard-recent)))) - - nav-to-project - (mf/use-fn - (mf/deps project-id) - #(st/emit! :interrupt - (dcm/go-to-dashboard-files ::rt/new-window true :project-id project-id)))] + (fn [event] + ;; Ctrl/Cmd-click opens the href in a new tab, as any link. + (when-not (kbd/mod? event) + (dom/prevent-default event) + (close-modals) + ;; FIXME: move set-mode to uri? + (st/emit! :interrupt + (dw/set-options-mode :design) + (dcm/go-to-dashboard-recent)))))] (mf/with-effect [editing?] (when ^boolean editing? (dom/select-text! (mf/ref-val input-ref)))) [:header {:class (dm/str class " " (stl/css :workspace-header-left))} - [:a {:on-click go-back - :class (stl/css :main-icon)} deprecated-icon/logo-icon] + [:a {:href recent-href + :on-click go-back + :class (stl/css :main-icon)} + [:> raw-svg* {:id raw-svg/penpot-logo-icon + :class (stl/css :logo)}]] [:div {:alt (tr "workspace.sitemap") :class (stl/css :project-tree)} - [:div - {:class (stl/css :project-name) - :on-click nav-to-project} + ;; Opens the project files in a new tab, as it always did. + [:a {:class (stl/css :project-name) + :href project-href + :target "_blank" + :rel "noopener"} (:name project)] (if ^boolean editing? [:input diff --git a/frontend/src/app/main/ui/workspace/left_header.scss b/frontend/src/app/main/ui/workspace/left_header.scss index a1542d48a9..9fa600489d 100644 --- a/frontend/src/app/main/ui/workspace/left_header.scss +++ b/frontend/src/app/main/ui/workspace/left_header.scss @@ -24,13 +24,12 @@ block-size: $sz-32; min-block-size: $sz-32; margin-inline-end: var(--sp-xs); +} - // The Penpot logo is brand art from the legacy icon set and has no class. - svg { - min-block-size: $sz-32; - inline-size: $sz-32; - fill: var(--color-foreground-primary); - } +.logo { + inline-size: $sz-32; + block-size: $sz-32; + fill: var(--color-foreground-primary); } .project-tree {