Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-26 08:29:42 -05:00
Code Issues Activity

🐛 Fix viewport size when collapsing sidebar

Browse source
This commit is contained in:
Andrés Moya 2020-06-09 08:15:41 +02:00 • committed by Andrey Antukh
parent 006bacfef0
commit 5f373df569
5 changed files with 15 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/resources/styles/main/partials/left-toolbar.scss
View file

@ -5,13 +5,15 @@
// Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz> // Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com> // Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
$width-left-toolbar: 40px;
.left-toolbar { .left-toolbar {
background-color: $color-gray-50; background-color: $color-gray-50;
bottom: 0; bottom: 0;
height: 100%; height: 100%;
position: fixed; position: fixed;
left: 0; left: 0;
width: 40px; width: $width-left-toolbar;
z-index: 11; z-index: 11;
} }
@ -76,4 +78,4 @@
} }

4
frontend/resources/styles/main/partials/sidebar.scss
View file

@ -5,6 +5,8 @@
// Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz> // Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com> // Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
$width-settings-bar: 15rem;
.settings-bar { .settings-bar {
background-color: $color-gray-50; background-color: $color-gray-50;
border-left: 1px solid $color-gray-60; border-left: 1px solid $color-gray-60;
@ -12,7 +14,7 @@
height: 100%; height: 100%;
position: fixed; position: fixed;
right: 0; right: 0;
width: 15rem; width: $width-settings-bar;
z-index: 10; z-index: 10;
&.settings-bar-left { &.settings-bar-left {

15
frontend/resources/styles/main/partials/workspace.scss
View file

@ -25,7 +25,6 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
&.separator { &.separator {
border-top: 1px solid $color-gray-10; border-top: 1px solid $color-gray-10;
padding: 0px; padding: 0px;
@ -61,19 +60,18 @@
background-color: $color-canvas; background-color: $color-canvas;
display: flex; display: flex;
height: 100%; height: 100%;
width: calc(100% - 520px); width: calc(100% - #{$width-left-toolbar} - 2 * #{$width-settings-bar});
padding: 0; padding: 0;
margin: 0; margin: 0;
position: fixed; position: fixed;
right: 240px; right: $width-settings-bar;
&.scrolling { &.scrolling {
cursor: grab; cursor: grab;
} }
&.no-tool-bar-right { &.no-tool-bar-right {
padding-right: 0; width: calc(100% - #{$width-left-toolbar} - #{$width-settings-bar});
width: calc(100% - 230px);
right: 0; right: 0;
.coordinates { .coordinates {
@ -82,8 +80,7 @@
} }
&.no-tool-bar-left { &.no-tool-bar-left {
padding-left: 0; width: calc(100% - #{$width-left-toolbar} - #{$width-settings-bar});
width: calc(100% - 230px);
&.no-tool-bar-right { &.no-tool-bar-right {
width: 100%; width: 100%;
@ -96,7 +93,7 @@
bottom: -10px; bottom: -10px;
padding-left: 5px; padding-left: 5px;
position: fixed; position: fixed;
right: 248px; right: calc(#{$width-settings-bar} + 10px);
text-align: center; text-align: center;
width: 100px; width: 100px;
padding-bottom: 2px; padding-bottom: 2px;
@ -201,8 +198,6 @@
fill: $color-primary-dark; fill: $color-primary-dark;
} }
.multiuser-cursor { .multiuser-cursor {
align-items: center; align-items: center;
display: flex; display: flex;

2
frontend/src/uxbox/main/ui/workspace.cljs
View file

@ -40,7 +40,7 @@
[{:keys [page file layout project] :as params}] [{:keys [page file layout project] :as params}]
(let [left-sidebar? (not (empty? (keep layout [:layers :sitemap (let [left-sidebar? (not (empty? (keep layout [:layers :sitemap
:document-history :libraries]))) :document-history :libraries])))
right-sidebar? (not (empty? (keep layout [:icons :drawtools :element-options]))) right-sidebar? (not (empty? (keep layout [:icons :element-options])))
classes (classnames classes (classnames
:no-tool-bar-right (not right-sidebar?) :no-tool-bar-right (not right-sidebar?)
:no-tool-bar-left (not left-sidebar?)) :no-tool-bar-left (not left-sidebar?))

4
frontend/src/uxbox/main/ui/workspace/viewport.cljs
View file

@ -393,10 +393,10 @@
(events/unlistenByKey key5) (events/unlistenByKey key5)
))) )))
options (mf/deref refs/workspace-page-options) options (mf/deref refs/workspace-page-options)]
]
(mf/use-effect on-mount) (mf/use-effect on-mount)
(mf/use-effect (mf/deps layout) on-resize)
[:svg.viewport [:svg.viewport
{:preserveAspectRatio "xMidYMid meet" {:preserveAspectRatio "xMidYMid meet"