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

Replace placeholder with eye icons for layers

This commit is contained in:
Keavon Chambers 2021-05-05 22:09:50 -07:00
parent 6dc8c91578
commit c74575724c
3 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/web/assets/svg/24x24-bounds-16x16-icon/visibility-eye-hidden.svg Normal file
View File

@ -0,0 +1,3 @@
<svg viewBox="0 0 24 24">
<path d="M12,8c3.46,0,5.91,2.82,6.79,4c-0.88,1.19-3.33,4-6.79,4c-3.46,0-5.91-2.82-6.79-4C6.09,10.81,8.54,8,12,8 M12,7c-5,0-8,5-8,5s3,5,8,5s8-5,8-5S17,7,12,7L12,7z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 200 B

4
client/web/assets/svg/24x24-bounds-16x16-icon/visibility-eye-visible.svg Normal file
View File

@ -0,0 +1,4 @@
<svg viewBox="0 0 24 24">
<path d="M12,7c-5,0-8,5-8,5s3,5,8,5s8-5,8-5S17,7,12,7z M12,16c-2.21,0-4-1.79-4-4c0-2.21,1.79-4,4-4s4,1.79,4,4C16,14.21,14.21,16,12,16z "/>
<circle cx="13" cy="11" r="1.25" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 210 B

18
client/web/src/components/panels/LayerTree.vue
View File

@ -15,8 +15,8 @@
:key="layerId" :key="layerId"
> >
<div class="layer-visibility"> <div class="layer-visibility">
<IconButton @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 @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-thumbnail"></div>
<div class="layer-type-icon"> <div class="layer-type-icon">
@ -41,21 +41,15 @@
.layer-row { .layer-row {
display: flex; display: flex;
height: 36px; height: 24px;
align-items: center; align-items: center;
& + .layer-row { & + .layer-row {
margin-top: 2px; margin-top: 2px;
} }
.layer-visibility {
.icon-button + .icon-button {
display: none;
}
}
.layer-thumbnail { .layer-thumbnail {
width: 54px; width: 36px;
height: 100%; height: 100%;
background: white; background: white;
} }
@ -76,8 +70,8 @@ import NumberInput from "../widgets/NumberInput.vue";
import DropdownButton from "../widgets/DropdownButton.vue"; import DropdownButton from "../widgets/DropdownButton.vue";
import IconButton from "../widgets/IconButton.vue"; import IconButton from "../widgets/IconButton.vue";
import IconContainer from "../widgets/IconContainer.vue"; import IconContainer from "../widgets/IconContainer.vue";
import EyeVisible from "../../../assets/svg/24x24-bounds-16x16-icon/boolean-difference.svg"; import EyeVisible from "../../../assets/svg/24x24-bounds-16x16-icon/visibility-eye-visible.svg";
import EyeHidden from "../../../assets/svg/24x24-bounds-16x16-icon/boolean-intersect.svg"; import EyeHidden from "../../../assets/svg/24x24-bounds-16x16-icon/visibility-eye-hidden.svg";
import NodeTypePath from "../../../assets/svg/24x24-node-type-icon/node-type-path.svg"; import NodeTypePath from "../../../assets/svg/24x24-node-type-icon/node-type-path.svg";
export default defineComponent({ export default defineComponent({