Add basic HTML for layers in the layer panel (#97)

client/web/assets/svg/24x24-node-type-icon/node-type-path.svg

@@ -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>

client/web/src/components/panels/LayerTree.vue

@@ -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);

client/web/src/components/widgets/IconContainer.vue

@@ -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>