3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-02 12:18:27 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Search and filter layers

Browse source
This commit is contained in:
Pablo Alba 2022-03-15 20:03:13 +01:00 • committed by Alonso Torres
parent 81adcd03fb
commit 3bae4839bd
7 changed files with 274 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/resources/images/icons/exclude.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="482 -308 500 500"><path d="M555-235a250 250 0 1 1 354 354 250 250 0 0 1-354-354zM732-95l-88-88-36 35 89 89-89 88 36 36 88-89 88 89 36-36-89-88 89-89-36-35z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 214 B

1
frontend/resources/images/icons/filter.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="299 -306 500 500"><path d="M799-306v89H299v-89zM696 194H402v-89h294zm52-206H351v-89h397z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 147 B

94
frontend/resources/styles/main/partials/sidebar-layers.scss
View file

@ -295,3 +295,97 @@ span.element-name {
padding: 1px;
}
}
#layers {
.tool-window-bar {
display: flex;
justify-content: space-between;
height: 32px;
margin-top: 8px;
&.search {
.search-box {
border: 1px solid $color-primary;
border-radius: 4px;
height: 32px;
width: 100%;
display: flex;
align-items: center;
input {
border: 0;
width: 100%;
background-color: $color-gray-50;
color: $color-white;
font-size: 12px;
height: 16px;
}
span {
height: 16px;
overflow: hidden;
}
.filter,
.clear {
width: 35px;
&.active {
svg {
fill: $color-primary;
}
}
}
}
}
svg {
width: 16px;
height: 16px;
margin: 0 2px 0 5px;
cursor: pointer;
}
}
}
.active-filters {
margin-top: 5px;
line-height: 26px;
font-size: 11px;
margin: 0 0.5rem;
span {
background-color: $color-primary;
color: $color-black;
padding: 3px 5px;
margin: 0 2px;
border-radius: 4px;
cursor: pointer;
svg {
width: 7px;
height: 7px;
vertical-align: middle;
margin-left: 5px;
}
}
}
.filters-container {
position: absolute;
display: flex;
flex-direction: column;
top: 40px;
left: 8px;
background-color: $color-white;
color: $color-gray-50;
border-radius: 4px;
span {
padding: 10px 20px 10px 10px;
border-radius: 4px;
svg {
width: 16px;
height: 16px;
margin-right: 10px;
vertical-align: middle;
fill: $color-gray-30;
}
&:hover {
background-color: $color-primary-lighter;
}
}
}