From 93e7da5917fb6355aa291a97198a3546b71a3690 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sun, 21 Feb 2021 03:11:49 -0800
Subject: [PATCH] Viewport panel layout scaffolding

---
 .../components/panel-system/DockablePanel.vue | 13 ++-
 .../src/components/panel-system/PanelArea.vue |  8 +-
 .../src/components/panels/LayersPanel.vue     | 21 +++++
 .../src/components/panels/MinimapPanel.vue    | 21 +++++
 .../src/components/panels/PropertiesPanel.vue | 21 +++++
 .../src/components/panels/ViewportPanel.vue   | 81 +++++++++++++++++++
 6 files changed, 160 insertions(+), 5 deletions(-)
 create mode 100644 web-frontend/src/components/panels/LayersPanel.vue
 create mode 100644 web-frontend/src/components/panels/MinimapPanel.vue
 create mode 100644 web-frontend/src/components/panels/PropertiesPanel.vue
 create mode 100644 web-frontend/src/components/panels/ViewportPanel.vue

diff --git a/web-frontend/src/components/panel-system/DockablePanel.vue b/web-frontend/src/components/panel-system/DockablePanel.vue
index e1c296dc..ed83f8be 100644
--- a/web-frontend/src/components/panel-system/DockablePanel.vue
+++ b/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>
diff --git a/web-frontend/src/components/panel-system/PanelArea.vue b/web-frontend/src/components/panel-system/PanelArea.vue
index cd77cb72..91a5f4a4 100644
--- a/web-frontend/src/components/panel-system/PanelArea.vue
+++ b/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>
diff --git a/web-frontend/src/components/panels/LayersPanel.vue b/web-frontend/src/components/panels/LayersPanel.vue
new file mode 100644
index 00000000..c59b0b15
--- /dev/null
+++ b/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>
diff --git a/web-frontend/src/components/panels/MinimapPanel.vue b/web-frontend/src/components/panels/MinimapPanel.vue
new file mode 100644
index 00000000..c59b0b15
--- /dev/null
+++ b/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>
diff --git a/web-frontend/src/components/panels/PropertiesPanel.vue b/web-frontend/src/components/panels/PropertiesPanel.vue
new file mode 100644
index 00000000..c59b0b15
--- /dev/null
+++ b/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>
diff --git a/web-frontend/src/components/panels/ViewportPanel.vue b/web-frontend/src/components/panels/ViewportPanel.vue
new file mode 100644
index 00000000..1df29d7f
--- /dev/null
+++ b/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>