mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2025-12-23 10:11:54 +00:00
Add basic HTML for layers in the layer panel (#97)
This commit is contained in:
Keavon Chambers
parent
721a442b75
commit
76eb944233
3 changed files with 155 additions and 4 deletions
|
|
@ -0,0 +1,4 @@
|
|||
<svg viewBox="0 0 24 24">
|
||||
<path style="fill:#FFFFFF;" d="M23.34,4.06c0.14-0.94-0.18-1.88-0.85-2.55s-1.62-0.98-2.55-0.85c-5.27,0.77-10.61,0.77-15.88,0C3.12,0.53,2.18,0.84,1.51,1.51S0.53,3.13,0.66,4.06c0.77,5.27,0.77,10.61,0,15.88c-0.14,0.94,0.18,1.88,0.85,2.55s1.62,0.98,2.55,0.85c5.27-0.77,10.61-0.77,15.88,0c0.14,0.02,0.29,0.03,0.43,0.03c0.79,0,1.55-0.31,2.12-0.88c0.67-0.67,0.98-1.62,0.85-2.55C22.57,14.67,22.57,9.33,23.34,4.06z" />
|
||||
<path style="fill:#65BBE5;" d="M19.89,9.01c-0.17,0.02-2.18,0.26-4.89,1.01V9H9v3.28c-1.6,0.79-3.2,1.75-4.64,2.95c-0.42,0.35-0.48,0.98-0.13,1.41C4.43,16.88,4.71,17,5,17c0.23,0,0.45-0.08,0.64-0.23C6.68,15.9,7.83,15.16,9,14.53V15h6v-2.9c2.88-0.84,5.07-1.1,5.11-1.11c0.55-0.06,0.94-0.56,0.88-1.11C20.93,9.34,20.43,8.95,19.89,9.01z M13,13h-2v-2h2V13z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 793 B |
|
|
@ -1,17 +1,106 @@
|
|||
<template>
|
||||
<div></div>
|
||||
<LayoutCol :class="'layer-tree-panel'">
|
||||
<LayoutRow :class="'options-bar'">
|
||||
<NumberInput />
|
||||
<NumberInput />
|
||||
<DropdownButton />
|
||||
</LayoutRow>
|
||||
<LayoutRow :class="'layer-tree'">
|
||||
<LayoutCol :class="'list'">
|
||||
<div
|
||||
class="layer-row"
|
||||
v-for="layerId in Array(5)
|
||||
.fill()
|
||||
.map((_, i) => i)"
|
||||
: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>
|
||||
</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>
|
||||
</div>
|
||||
</LayoutCol>
|
||||
</LayoutRow>
|
||||
</LayoutCol>
|
||||
</template>
|
||||
|
||||
<style lang="scss"></style>
|
||||
<style lang="scss">
|
||||
.layer-tree-panel {
|
||||
.options-bar {
|
||||
height: 32px;
|
||||
margin: 0 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.layer-row {
|
||||
display: flex;
|
||||
height: 36px;
|
||||
align-items: center;
|
||||
|
||||
& + .layer-row {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.layer-visibility {
|
||||
.icon-button + .icon-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.layer-thumbnail {
|
||||
width: 54px;
|
||||
height: 100%;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.layer-type-icon {
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { ResponseType, registerResponseHandler } from "../../response-handler";
|
||||
import LayoutRow from "../layout/LayoutRow.vue";
|
||||
import LayoutCol from "../layout/LayoutCol.vue";
|
||||
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 NodeTypePath from "../../../assets/svg/24x24-node-type-icon/node-type-path.svg";
|
||||
|
||||
export default defineComponent({
|
||||
components: {},
|
||||
components: {
|
||||
LayoutRow,
|
||||
LayoutCol,
|
||||
DropdownButton,
|
||||
NumberInput,
|
||||
IconButton,
|
||||
IconContainer,
|
||||
EyeVisible,
|
||||
EyeHidden,
|
||||
NodeTypePath,
|
||||
},
|
||||
props: {},
|
||||
methods: {},
|
||||
methods: {
|
||||
hideLayer(layerId: number) {
|
||||
console.log(`Hidden layer ID: ${layerId}`);
|
||||
},
|
||||
showLayer(layerId: number) {
|
||||
console.log(`Shown layer ID: ${layerId}`);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
registerResponseHandler(ResponseType["Document::ExpandFolder"], (responseData) => {
|
||||
console.log("ExpandFolder: ", responseData);
|
||||
|
|
|
|||
58
client/web/src/components/widgets/IconContainer.vue
Normal file
58
client/web/src/components/widgets/IconContainer.vue
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<div class="icon-container" :class="[`size-${String(size)}`, gapAfter && 'gap-after']">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.icon-container {
|
||||
display: inline-block;
|
||||
flex: 0 0 auto;
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: none;
|
||||
font-weight: bold;
|
||||
font-size: 10px;
|
||||
border-radius: 2px;
|
||||
color: #ddd;
|
||||
fill: #ddd;
|
||||
|
||||
&:not(.gap-after) + .icon-container {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.size-10 {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
&.size-12 {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
&.size-16 {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&.size-24 {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
size: { type: Number, required: true },
|
||||
gapAfter: { type: Boolean, default: false },
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue