jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Styling improvements to layers

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
Show Stats 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 == 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> <IconButton v-if="layerId % 2 == 1" @click="showLayer(layerId)" :size="24" title="Hidden"><EyeHidden /></IconButton>
</div> </div>
<div class="layer-thumbnail"></div> <div class="layer">
<div class="layer-type-icon"> <div class="layer-thumbnail"></div>
<IconContainer :size="24" title="Path"><NodeTypePath /></IconContainer> <div class="layer-type-icon">
</div> <IconContainer :size="24" title="Path"><NodeTypePath /></IconContainer>
<div class="layer-name"> </div>
<span>Foo bar</span> <div class="layer-name">
<span>Foo bar</span>
</div>
</div> </div>
</div> </div>
</LayoutCol> </LayoutCol>
@ -41,15 +43,27 @@
.layer-row { .layer-row {
display: flex; display: flex;
height: 24px; height: 36px;
align-items: center; 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 { & + .layer-row {
margin-top: 2px; margin-top: 2px;
} }
.layer-thumbnail { .layer-thumbnail {
width: 36px; width: 64px;
height: 100%; height: 100%;
background: white; background: white;
} }