Rename Panel Area -> Workspace and Dockable Panel -> Workspace Panel

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

@@ -1,60 +0,0 @@
-<template>
-	<LayoutRow class="dockable-grid-subdivision">
-		<LayoutCol class="dockable-grid-subdivision" style="flex-grow: 1597">
-			<DockablePanel
-				:panelType="'Document'"
-				:tabCloseButtons="true"
-				:tabMinWidths="true"
-				:tabLabels="['X-35B Over Death Valley*', '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 :panelType="'Properties'" :tabLabels="['Properties', 'Spreadsheet', 'Palettes']" :tabActiveIndex="0" />
-			</LayoutRow>
-			<LayoutRow class="dockable-grid-resize-gutter"></LayoutRow>
-			<LayoutRow class="dockable-grid-subdivision">
-				<DockablePanel :panelType="'LayerTree'" :tabLabels="['Layer Tree']" :tabActiveIndex="0" />
-			</LayoutRow>
-			<LayoutRow class="dockable-grid-resize-gutter"></LayoutRow>
-			<LayoutRow class="dockable-grid-subdivision" style="flex-grow: 0; height: 0">
-				<DockablePanel :panelType="'Minimap'" :tabLabels="['Minimap', 'Asset Manager']" :tabActiveIndex="0" />
-			</LayoutRow>
-		</LayoutCol>
-	</LayoutRow>
-</template>
-
-<style lang="scss">
-.dockable-grid-subdivision {
-	min-height: 28px;
-}
-
-.dockable-grid-resize-gutter {
-	flex: 0 0 4px;
-
-	&.layout-row {
-		cursor: ns-resize;
-	}
-
-	&.layout-col {
-		cursor: ew-resize;
-	}
-}
-</style>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-import LayoutRow from "../layout/LayoutRow.vue";
-import LayoutCol from "../layout/LayoutCol.vue";
-import DockablePanel from "./DockablePanel.vue";
-
-export default defineComponent({
-	components: {
-		LayoutRow,
-		LayoutCol,
-		DockablePanel,
-	},
-});
-</script>

client/web/src/components/window/MainWindow.vue

@@ -3,8 +3,8 @@
 		<LayoutRow :class="'title-bar'">
 			<TitleBar :platform="platform" :maximized="maximized" />
 		</LayoutRow>
-		<LayoutRow :class="'panel-container'">
+		<LayoutRow :class="'workspace'">
-			<PanelArea />
+			<Workspace />
 		</LayoutRow>
 		<LayoutRow :class="'status-bar'">
 			<StatusBar />
@@ -22,7 +22,7 @@
 	flex: 0 0 auto;
 }
 
-.panel-container {
+.workspace {
 	flex: 1 1 100%;
 	height: 100%;
 }
@@ -37,7 +37,7 @@
 import { defineComponent } from "vue";
 import LayoutRow from "../layout/LayoutRow.vue";
 import LayoutCol from "../layout/LayoutCol.vue";
-import PanelArea from "../panel-system/PanelArea.vue";
+import Workspace from "../workspace/Workspace.vue";
 import TitleBar from "./title-bar/TitleBar.vue";
 import StatusBar from "./status-bar/StatusBar.vue";
 
@@ -53,7 +53,7 @@ export default defineComponent({
 		LayoutRow,
 		LayoutCol,
 		TitleBar,
-		PanelArea,
+		Workspace,
 		StatusBar,
 	},
 	data() {

client/web/src/components/workspace/Workspace.vue

@@ -0,0 +1,60 @@
+<template>
+	<LayoutRow class="workspace-grid-subdivision">
+		<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 1597">
+			<WorkspacePanel
+				:panelType="'Document'"
+				:tabCloseButtons="true"
+				:tabMinWidths="true"
+				:tabLabels="['X-35B Over Death Valley*', 'Document 2', 'Document 3', 'Document 4', 'Document 5']"
+				:tabActiveIndex="0"
+			/>
+		</LayoutCol>
+		<LayoutCol class="workspace-grid-resize-gutter"></LayoutCol>
+		<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 319">
+			<LayoutRow class="workspace-grid-subdivision">
+				<WorkspacePanel :panelType="'Properties'" :tabLabels="['Properties', 'Spreadsheet', 'Palettes']" :tabActiveIndex="0" />
+			</LayoutRow>
+			<LayoutRow class="workspace-grid-resize-gutter"></LayoutRow>
+			<LayoutRow class="workspace-grid-subdivision">
+				<WorkspacePanel :panelType="'LayerTree'" :tabLabels="['Layer Tree']" :tabActiveIndex="0" />
+			</LayoutRow>
+			<LayoutRow class="workspace-grid-resize-gutter"></LayoutRow>
+			<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 0; height: 0">
+				<WorkspacePanel :panelType="'Minimap'" :tabLabels="['Minimap', 'Asset Manager']" :tabActiveIndex="0" />
+			</LayoutRow>
+		</LayoutCol>
+	</LayoutRow>
+</template>
+
+<style lang="scss">
+.workspace-grid-subdivision {
+	min-height: 28px;
+}
+
+.workspace-grid-resize-gutter {
+	flex: 0 0 4px;
+
+	&.layout-row {
+		cursor: ns-resize;
+	}
+
+	&.layout-col {
+		cursor: ew-resize;
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import LayoutRow from "../layout/LayoutRow.vue";
+import LayoutCol from "../layout/LayoutCol.vue";
+import WorkspacePanel from "./WorkspacePanel.vue";
+
+export default defineComponent({
+	components: {
+		LayoutRow,
+		LayoutCol,
+		WorkspacePanel,
+	},
+});
+</script>

client/web/src/components/workspace/WorkspacePanel.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="panel">
+	<div class="workspace-panel">
 		<div class="tab-bar" :class="{ 'min-widths': tabMinWidths }">
 			<div class="tab-group">
 				<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel">
@@ -11,14 +11,14 @@
 			</div>
 			<DropdownButton :icon="DropdownButtonIcon.VerticalEllipsis" />
 		</div>
-		<div class="panel-content">
+		<div class="panel-body">
 			<component :is="panelType" />
 		</div>
 	</div>
 </template>
 
 <style lang="scss">
-.panel {
+.workspace-panel {
 	background: #111;
 	border-radius: 8px;
 	flex-grow: 1;
@@ -120,7 +120,7 @@
 		}
 	}
 
-	.panel-content {
+	.panel-body {
 		background: #333;
 		flex-grow: 1;
 	}