3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-04 22:41:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐧 adds layout for libraries sidebar

Browse source
This commit is contained in:
alonso.torres 2020-03-23 15:23:29 +01:00
parent c09fe46790
commit 4102dca55c
12 changed files with 187 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/resources/styles/main.scss
View file

@ -42,8 +42,9 @@
//#################################################
@import 'main/partials/main-bar';
@import 'main/partials/workspace-bar';
@import 'main/partials/workspace';
@import 'main/partials/workspace-bar';
@import 'main/partials/workspace-libraries';
@import 'main/partials/tool-bar';
@import 'main/partials/project-bar';
@import 'main/partials/sidebar';

2
frontend/resources/styles/main/partials/sidebar-sitemap.scss
View file

@ -6,8 +6,6 @@
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.sitemap {
max-height: 180px;
.tool-window-bar {
.add-page {

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

@ -11,7 +11,7 @@
height: 100%;
position: fixed;
right: 0;
width: 230px;
width: 15rem;
z-index: 10;
&.settings-bar-left {
@ -20,10 +20,22 @@
.settings-bar-inside {
align-items: center;
display: flex;
display: grid;
&[data-layout*='layers'] {
grid-template-rows: 30% 70%;
}
&[data-layout*='libraries'] {
grid-template-rows: 100%;
}
&[data-layout*='layers'][data-layout*='libraries'] {
grid-template-rows: 15% 25% 60%;
}
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
overflow: hidden;
padding-top: 40px;
height: 100%;
@ -33,12 +45,14 @@
flex-direction: column;
flex: 1;
width: 100%;
height: 100%;
.tool-window-bar {
align-items: center;
display: flex;
flex-shrink: 0;
padding: $small;
overflow: hidden;
svg {
fill: $color-gray-20;
@ -80,13 +94,6 @@
padding-bottom: $medium;
height: 100%;
}
&#layers {
padding-bottom: 30px;
}
}
}
}

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

@ -13,6 +13,7 @@
flex-direction: row;
font-size: 12px;
height: 2.5rem;
padding: 0 0.25rem;
}
.tab-container-tab-title {
@ -29,3 +30,14 @@
background: $color-gray-50;
}
}
.tab-container-content {
flex: 1;
height: 100%;
max-height: 100%;
overflow: hidden;
}
.tab-element, .tab-element-content {
height: 100%;
}

89
frontend/resources/styles/main/partials/workspace-libraries.scss Normal file
View file

@ -0,0 +1,89 @@
.library-tab {
display: flex;
flex-direction: column;
height: 100%;
padding: 0.25rem;
}
.library-tab-content {
display: grid;
flex-direction: row;
flex-wrap: wrap;
padding: 0.25rem;
height: 100%;
overflow-y: scroll;
.icons-tab & {
grid-template-columns: repeat(3, 1fr);
}
.images-tab & {
grid-template-columns: repeat(2, 1fr);
}
}
.library-tab-element {
border-radius: 4px;
border: 1px solid #1F1F1F;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
cursor: pointer;
display: flex;
margin: 0.25rem;
overflow: hidden;
position: relative;
text-align: center;
& svg, & img {
height: auto;
margin: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
&:hover {
border-color: $color-primary;
& .library-tab-element-name {
display: inline;
}
}
.icons-tab & {
background: $color-white;
color: $color-black;
height: 4rem;
width: 4rem;
padding: $size-3;
}
.images-tab & {
height: 4rem;
width: 6.2rem;
color: $color-white;
padding: $size-2 0;
}
}
.library-tab-element-name {
display: none;
position: absolute;
font-size: 9px;
bottom: 0;
left: 0;
width: 100%;
}
.library-tab-libraries {
margin: 0.5rem;
width: 90%;
padding: 0.5rem;
box-sizing: border-box;
color: white;
font-size: 12px;
}
.library-tab-libraries-item {
padding: 1rem;
}