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

✨ Move layers and assets to tabs

Browse source
This commit is contained in:
alonso.torres 2022-02-01 13:02:31 +01:00
parent 8c3c9a8ca4
commit e352c70013
4 changed files with 24 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -20,40 +20,10 @@
} }
.settings-bar-inside { .settings-bar-inside {
align-items: flex-start;
display: grid; display: grid;
grid-template-columns: 100%; grid-template-columns: 100%;
grid-template-rows: 100%;
&[data-layout*="sitemap-pages"] { height: calc(100% - 2px);
grid-template-rows: auto;
}
&[data-layout*="layers"] {
grid-template-rows: auto 1fr;
}
&[data-layout*="libraries"] {
grid-template-rows: auto 1fr;
}
&[data-layout*="layers"][data-layout*="sitemap-pages"] {
grid-template-rows: 11.5rem 1fr;
}
&[data-layout*="libraries"][data-layout*="sitemap-pages"] {
grid-template-rows: 11.5rem 1fr;
}
&[data-layout*="layers"][data-layout*="libraries"] {
grid-template-rows: auto 30% 1fr;
}
&[data-layout*="layers"][data-layout*="libraries"][data-layout*="sitemap-pages"] {
grid-template-rows: 11.5rem 25% 1fr;
}
flex-direction: column;
height: 100%;
.tool-window { .tool-window {
position: relative; position: relative;
@ -171,9 +141,9 @@
.tool-window-content { .tool-window-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: auto;
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow-y: auto;
} }
.element-list { .element-list {
@ -259,3 +229,15 @@ button.collapse-sidebar {
} }
} }
} }
#layers.tool-window {
overflow: auto;
}
.layers-tab {
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 100%;
height: 100%;
overflow: hidden;
}

9
frontend/resources/styles/main/partials/tab-container.scss
View file

@ -1,8 +1,8 @@
.tab-container { .tab-container {
display: flex; display: grid;
flex-direction: column; grid-template-rows: auto 1fr;
grid-template-columns: 100%;
height: 100%; height: 100%;
width: 100%;
} }
.tab-container-tabs { .tab-container-tabs {
@ -31,7 +31,8 @@
} }
.tab-container-content { .tab-container-content {
flex: 1; overflow-y: auto;
overflow-x: hidden;
} }
.tab-element, .tab-element,

3
frontend/src/app/main/ui/workspace/sidebar.cljs
View file

@ -50,8 +50,9 @@
:selected section} :selected section}
[:& tab-element {:id :layers :title "Layers"} [:& tab-element {:id :layers :title "Layers"}
[:div.layers-tab
[:& sitemap {:layout layout}] [:& sitemap {:layout layout}]
[:& layers-toolbox]] [:& layers-toolbox]]]
[:& tab-element {:id :assets :title "Library"} [:& tab-element {:id :assets :title "Library"}
[:& assets-toolbox]]]]])) [:& assets-toolbox]]]]]))

1
frontend/src/app/util/dom.cljs
View file

@ -416,6 +416,7 @@
(defn scroll-into-view-if-needed! (defn scroll-into-view-if-needed!
([^js element] ([^js element]
(.log js/console "SCROLL INTO VIEW" element)
(when (some? element) (when (some? element)
(.scrollIntoViewIfNeeded ^js element false))) (.scrollIntoViewIfNeeded ^js element false)))