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

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>