diff --git a/frontend/resources/styles/main/partials/left-toolbar.scss b/frontend/resources/styles/main/partials/left-toolbar.scss index 2dd4272e9e..b3666a2239 100644 --- a/frontend/resources/styles/main/partials/left-toolbar.scss +++ b/frontend/resources/styles/main/partials/left-toolbar.scss @@ -5,13 +5,15 @@ // Copyright (c) 2015-2020 Andrey Antukh // Copyright (c) 2015-2020 Juan de la Cruz +$width-left-toolbar: 40px; + .left-toolbar { background-color: $color-gray-50; bottom: 0; height: 100%; position: fixed; left: 0; - width: 40px; + width: $width-left-toolbar; z-index: 11; } @@ -76,4 +78,4 @@ } - \ No newline at end of file + diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss index b2eaf073d1..3fea0f7c5e 100644 --- a/frontend/resources/styles/main/partials/sidebar.scss +++ b/frontend/resources/styles/main/partials/sidebar.scss @@ -5,6 +5,8 @@ // Copyright (c) 2015-2020 Andrey Antukh // Copyright (c) 2015-2020 Juan de la Cruz +$width-settings-bar: 15rem; + .settings-bar { background-color: $color-gray-50; border-left: 1px solid $color-gray-60; @@ -12,7 +14,7 @@ height: 100%; position: fixed; right: 0; - width: 15rem; + width: $width-settings-bar; z-index: 10; &.settings-bar-left { diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss index 52498c17b3..8d56341e90 100644 --- a/frontend/resources/styles/main/partials/workspace.scss +++ b/frontend/resources/styles/main/partials/workspace.scss @@ -25,7 +25,6 @@ display: flex; justify-content: space-between; - &.separator { border-top: 1px solid $color-gray-10; padding: 0px; @@ -61,19 +60,18 @@ background-color: $color-canvas; display: flex; height: 100%; - width: calc(100% - 520px); + width: calc(100% - #{$width-left-toolbar} - 2 * #{$width-settings-bar}); padding: 0; margin: 0; position: fixed; - right: 240px; + right: $width-settings-bar; &.scrolling { cursor: grab; } &.no-tool-bar-right { - padding-right: 0; - width: calc(100% - 230px); + width: calc(100% - #{$width-left-toolbar} - #{$width-settings-bar}); right: 0; .coordinates { @@ -82,8 +80,7 @@ } &.no-tool-bar-left { - padding-left: 0; - width: calc(100% - 230px); + width: calc(100% - #{$width-left-toolbar} - #{$width-settings-bar}); &.no-tool-bar-right { width: 100%; @@ -96,7 +93,7 @@ bottom: -10px; padding-left: 5px; position: fixed; - right: 248px; + right: calc(#{$width-settings-bar} + 10px); text-align: center; width: 100px; padding-bottom: 2px; @@ -201,8 +198,6 @@ fill: $color-primary-dark; } - - .multiuser-cursor { align-items: center; display: flex; diff --git a/frontend/src/uxbox/main/ui/workspace.cljs b/frontend/src/uxbox/main/ui/workspace.cljs index 18e04f3f2a..83c55dac83 100644 --- a/frontend/src/uxbox/main/ui/workspace.cljs +++ b/frontend/src/uxbox/main/ui/workspace.cljs @@ -40,7 +40,7 @@ [{:keys [page file layout project] :as params}] (let [left-sidebar? (not (empty? (keep layout [:layers :sitemap :document-history :libraries]))) - right-sidebar? (not (empty? (keep layout [:icons :drawtools :element-options]))) + right-sidebar? (not (empty? (keep layout [:icons :element-options]))) classes (classnames :no-tool-bar-right (not right-sidebar?) :no-tool-bar-left (not left-sidebar?)) diff --git a/frontend/src/uxbox/main/ui/workspace/viewport.cljs b/frontend/src/uxbox/main/ui/workspace/viewport.cljs index 0e1a486a59..2366fc129a 100644 --- a/frontend/src/uxbox/main/ui/workspace/viewport.cljs +++ b/frontend/src/uxbox/main/ui/workspace/viewport.cljs @@ -393,10 +393,10 @@ (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 (mf/deps layout) on-resize) [:svg.viewport {:preserveAspectRatio "xMidYMid meet"