3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-21 15:06:13 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Show view mode buttons correctly centered in viewer

Browse source
This commit is contained in:
Andrés Moya 2022-01-13 09:54:57 +01:00 • committed by Andrey Antukh
parent c23691284c
commit 2aeded1940
4 changed files with 15 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -66,6 +66,7 @@
- Fix import/export with SVG edge cases [Taiga #2389](https://tree.taiga.io/project/penpot/issue/2389) - 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) - 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) - 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 ### :arrow_up: Deps updates

2
frontend/resources/styles/main/layouts/handoff.scss
View file

@ -3,7 +3,7 @@ $width-settings-bar: 16rem;
.handoff-layout { .handoff-layout {
height: 100vh; height: 100vh;
display: grid; display: grid;
grid-template-rows: 40px auto; grid-template-rows: 48px auto;
grid-template-columns: 1fr; grid-template-columns: 1fr;
user-select: none; user-select: none;

10
frontend/resources/styles/main/partials/viewer-header.scss
View file

@ -2,7 +2,8 @@
align-items: center; align-items: center;
background-color: $color-gray-50; background-color: $color-gray-50;
border-bottom: 1px solid $color-gray-60; border-bottom: 1px solid $color-gray-60;
display: flex; display: grid;
grid-template-columns: 1fr auto 1fr;
height: 48px; height: 48px;
padding: 0 $size-4 0 55px; padding: 0 $size-4 0 55px;
position: relative; position: relative;
@ -12,6 +13,10 @@
font-size: $fs12; font-size: $fs12;
} }
.nav-zone {
justify-content: flex-start;
}
.main-icon { .main-icon {
align-items: center; align-items: center;
background-color: $color-gray-60; background-color: $color-gray-60;
@ -19,8 +24,8 @@
display: flex; display: flex;
height: 100%; height: 100%;
justify-content: center; justify-content: center;
left: 0;
position: absolute; position: absolute;
left: 0;
top: 0; top: 0;
width: 48px; width: 48px;
@ -44,7 +49,6 @@
.options-zone { .options-zone {
align-items: center; align-items: center;
display: flex; display: flex;
// width: 384px;
justify-content: flex-end; justify-content: flex-end;
position: relative; position: relative;

4
frontend/src/app/main/ui/viewer/header.cljs
View file

@ -177,12 +177,13 @@
(st/emit! (dv/go-to-section section)))] (st/emit! (dv/go-to-section section)))]
[:header.viewer-header [:header.viewer-header
[:div.nav-zone
[:div.main-icon [:div.main-icon
[:a {:on-click go-to-dashboard [:a {:on-click go-to-dashboard
;; If the user doesn't have permission we disable the link ;; If the user doesn't have permission we disable the link
:style {:pointer-events (when-not permissions "none")}} i/logo-icon]] :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 [:div.mode-zone
[:button.mode-zone-button.tooltip.tooltip-bottom [:button.mode-zone-button.tooltip.tooltip-bottom
@ -213,4 +214,3 @@
:file file :file file
:index index :index index
:zoom zoom}]])) :zoom zoom}]]))