diff --git a/CHANGES.md b/CHANGES.md index 0cda7c469..ad8b9f9da 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -66,6 +66,7 @@ - Fix import/export with SVG edge cases [Taiga #2389](https://tree.taiga.io/project/penpot/issue/2389) - Avoid modifying component when moving into a group [Taiga #2534](https://tree.taiga.io/project/penpot/issue/2534) - Show correctly group types label in handoff [Taiga #2482](https://tree.taiga.io/project/penpot/issue/2482) +- Display view mode buttons always centered in viewer [#Taiga 2466](https://tree.taiga.io/project/penpot/issue/2466) ### :arrow_up: Deps updates diff --git a/frontend/resources/styles/main/layouts/handoff.scss b/frontend/resources/styles/main/layouts/handoff.scss index 00ae458bc..4e06e85d0 100644 --- a/frontend/resources/styles/main/layouts/handoff.scss +++ b/frontend/resources/styles/main/layouts/handoff.scss @@ -3,7 +3,7 @@ $width-settings-bar: 16rem; .handoff-layout { height: 100vh; display: grid; - grid-template-rows: 40px auto; + grid-template-rows: 48px auto; grid-template-columns: 1fr; user-select: none; diff --git a/frontend/resources/styles/main/partials/viewer-header.scss b/frontend/resources/styles/main/partials/viewer-header.scss index 8f494fd43..378019f3c 100644 --- a/frontend/resources/styles/main/partials/viewer-header.scss +++ b/frontend/resources/styles/main/partials/viewer-header.scss @@ -2,7 +2,8 @@ align-items: center; background-color: $color-gray-50; border-bottom: 1px solid $color-gray-60; - display: flex; + display: grid; + grid-template-columns: 1fr auto 1fr; height: 48px; padding: 0 $size-4 0 55px; position: relative; @@ -12,6 +13,10 @@ font-size: $fs12; } + .nav-zone { + justify-content: flex-start; + } + .main-icon { align-items: center; background-color: $color-gray-60; @@ -19,8 +24,8 @@ display: flex; height: 100%; justify-content: center; - left: 0; position: absolute; + left: 0; top: 0; width: 48px; @@ -44,7 +49,6 @@ .options-zone { align-items: center; display: flex; - // width: 384px; justify-content: flex-end; position: relative; diff --git a/frontend/src/app/main/ui/viewer/header.cljs b/frontend/src/app/main/ui/viewer/header.cljs index c96bed906..8a3e078a0 100644 --- a/frontend/src/app/main/ui/viewer/header.cljs +++ b/frontend/src/app/main/ui/viewer/header.cljs @@ -177,12 +177,13 @@ (st/emit! (dv/go-to-section section)))] [:header.viewer-header - [:div.main-icon - [:a {:on-click go-to-dashboard - ;; If the user doesn't have permission we disable the link - :style {:pointer-events (when-not permissions "none")}} i/logo-icon]] + [:div.nav-zone + [:div.main-icon + [:a {:on-click go-to-dashboard + ;; If the user doesn't have permission we disable the link + :style {:pointer-events (when-not permissions "none")}} i/logo-icon]] - [:& header-sitemap {:project project :file file :page page :frame frame :index index}] + [:& header-sitemap {:project project :file file :page page :frame frame :index index}]] [:div.mode-zone [:button.mode-zone-button.tooltip.tooltip-bottom @@ -213,4 +214,3 @@ :file file :index index :zoom zoom}]])) -