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

Replace placeholder with eye icons for layers

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