mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-12-23 10:11:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Styling improvements to layers

Browse source
This commit is contained in:
Keavon Chambers 2021-05-06 01:05:10 -07:00
parent c74575724c
commit 76d3e8cde4
1 changed files with 22 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

30
client/web/src/components/panels/LayerTree.vue
View file

@ -18,12 +18,14 @@
<IconButton v-if="layerId % 2 == 0" @click="hideLayer(layerId)" :size="24" title="Visible"><EyeVisible /></IconButton>
<IconButton v-if="layerId % 2 == 1" @click="showLayer(layerId)" :size="24" title="Hidden"><EyeHidden /></IconButton>
</div>
<div class="layer-thumbnail"></div>
<div class="layer-type-icon">
<IconContainer :size="24" title="Path"><NodeTypePath /></IconContainer>
</div>
<div class="layer-name">
<span>Foo bar</span>
<div class="layer">
<div class="layer-thumbnail"></div>
<div class="layer-type-icon">
<IconContainer :size="24" title="Path"><NodeTypePath /></IconContainer>
</div>
<div class="layer-name">
<span>Foo bar</span>
</div>
</div>
</div>
</LayoutCol>
@ -41,15 +43,27 @@
.layer-row {
display: flex;
height: 24px;
height: 36px;
align-items: center;
margin: 0 8px;
.layer {
display: flex;
align-items: center;
background: #555;
border-radius: 4px;
width: 100%;
height: 100%;
margin-left: 4px;
padding-left: 16px;
}
& + .layer-row {
margin-top: 2px;
}
.layer-thumbnail {
width: 36px;
width: 64px;
height: 100%;
background: white;
}