Viewport panel layout scaffolding

web-frontend/src/components/panel-system/DockablePanel.vue

@@ -11,7 +11,7 @@
 			</div>
 		</div>
 		<div class="panel-content">
-
+			<component :is="panelType" />
 		</div>
 	</div>
 </template>
@@ -138,13 +138,24 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import Viewport from "../panels/ViewportPanel.vue";
+import Properties from "../panels/PropertiesPanel.vue";
+import Layers from "../panels/LayersPanel.vue";
+import Minimap from "../panels/MinimapPanel.vue";
 
 export default defineComponent({
+	components: {
+		Viewport,
+		Properties,
+		Layers,
+		Minimap,
+	},
 	props: {
 		tabConstantWidths: { type: Boolean, default: false },
 		tabCloseButtons: { type: Boolean, default: false },
 		tabLabels: { type: Array, required: true },
 		tabActiveIndex: { type: Number, required: true },
+		panelType: { type: String, required: true },
 	},
 });
 </script>

web-frontend/src/components/panel-system/PanelArea.vue

@@ -1,20 +1,20 @@
 <template>
 	<LayoutRow class="dockable-grid-subdivision">
 		<LayoutCol class="dockable-grid-subdivision" style="flex-grow: 1597;">
-			<DockablePanel :tabCloseButtons="true" :tabConstantWidths="true" :tabLabels="['X-35B*', 'Document 2', 'Document 3', 'Document 4', 'Document 5']" :tabActiveIndex="0" />
+			<DockablePanel :panelType="'Viewport'" :tabCloseButtons="true" :tabConstantWidths="true" :tabLabels="['X-35B*', 'Document 2', 'Document 3', 'Document 4', 'Document 5']" :tabActiveIndex="0" />
 		</LayoutCol>
 		<LayoutCol class="dockable-grid-resize-gutter"></LayoutCol>
 		<LayoutCol class="dockable-grid-subdivision" style="flex-grow: 319;">
 			<LayoutRow class="dockable-grid-subdivision">
-				<DockablePanel :tabLabels="['Properties', 'Typography', 'Colors']" :tabActiveIndex="0" />
+				<DockablePanel :panelType="'Properties'" :tabLabels="['Properties', 'Typography', 'Colors']" :tabActiveIndex="0" />
 			</LayoutRow>
 			<LayoutRow class="dockable-grid-resize-gutter"></LayoutRow>
 			<LayoutRow class="dockable-grid-subdivision">
-				<DockablePanel :tabLabels="['Layers']" :tabActiveIndex="0" />
+				<DockablePanel :panelType="'Layers'" :tabLabels="['Layers']" :tabActiveIndex="0" />
 			</LayoutRow>
 			<LayoutRow class="dockable-grid-resize-gutter"></LayoutRow>
 			<LayoutRow class="dockable-grid-subdivision" style="flex-grow: 0; height: 0;">
-				<DockablePanel :tabLabels="['Minimap', 'Brushes', 'Links']" :tabActiveIndex="0" />
+				<DockablePanel :panelType="'Minimap'" :tabLabels="['Minimap', 'Brushes', 'Links']" :tabActiveIndex="0" />
 			</LayoutRow>
 		</LayoutCol>
 	</LayoutRow>

web-frontend/src/components/panels/LayersPanel.vue

@@ -0,0 +1,21 @@
+<template>
+	<div>
+	</div>
+</template>
+
+<style lang="scss">
+
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+// import LayoutRow from "../layout/LayoutRow.vue";
+// import LayoutCol from "../layout/LayoutCol.vue";
+
+export default defineComponent({
+	components: {
+	},
+	props: {
+	},
+});
+</script>

web-frontend/src/components/panels/MinimapPanel.vue

@@ -0,0 +1,21 @@
+<template>
+	<div>
+	</div>
+</template>
+
+<style lang="scss">
+
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+// import LayoutRow from "../layout/LayoutRow.vue";
+// import LayoutCol from "../layout/LayoutCol.vue";
+
+export default defineComponent({
+	components: {
+	},
+	props: {
+	},
+});
+</script>

web-frontend/src/components/panels/PropertiesPanel.vue

@@ -0,0 +1,21 @@
+<template>
+	<div>
+	</div>
+</template>
+
+<style lang="scss">
+
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+// import LayoutRow from "../layout/LayoutRow.vue";
+// import LayoutCol from "../layout/LayoutCol.vue";
+
+export default defineComponent({
+	components: {
+	},
+	props: {
+	},
+});
+</script>

web-frontend/src/components/panels/ViewportPanel.vue

@@ -0,0 +1,81 @@
+<template>
+	<LayoutCol :class="'viewport'">
+		<LayoutRow :class="'options-bar'">
+			<div class="left side">
+				<span class="label">Grab</span>
+				<div class="divider"></div>
+			</div>
+			<div class="spacer"></div>
+			<div class="right side">
+				<span class="label">Layer 1</span>
+			</div>
+		</LayoutRow>
+		<LayoutRow :class="'tools-and-viewport'">
+			<LayoutCol :class="'tools'"></LayoutCol>
+			<LayoutCol :class="'viewport-container'"></LayoutCol>
+		</LayoutRow>
+	</LayoutCol>
+</template>
+
+<style lang="scss">
+.viewport {
+	height: 100%;
+
+	.options-bar {
+		flex: 0 0 32px;
+
+		.side {
+			height: 100%;
+			flex: 0 1 auto;
+			display: flex;
+			align-items: center;
+			margin: 0 4px;
+
+			> * {
+				margin: 0 4px;
+			}
+
+			.label {
+				white-space: nowrap;
+				font-weight: bold;
+			}
+
+			.divider {
+				width: 1px;
+				height: 24px;
+				background: #666;
+			}
+		}
+
+		.spacer {
+			flex: 1 1 100%;
+		}
+	}
+
+	.tools-and-viewport {
+		.tools {
+			flex: 0 0 32px;
+		}
+
+		.viewport-container {
+			background: #111;
+			flex: 1 1 100%;
+		}
+}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import LayoutRow from "../layout/LayoutRow.vue";
+import LayoutCol from "../layout/LayoutCol.vue";
+
+export default defineComponent({
+	components: {
+		LayoutRow,
+		LayoutCol,
+	},
+	props: {
+	},
+});
+</script>