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

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

@@ -0,0 +1,165 @@
+<template>
+	<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">
+					<span>{{ tabLabel }}</span>
+					<IconButton :size="16" v-if="tabCloseButtons">
+						<CloseX />
+					</IconButton>
+				</div>
+			</div>
+			<DropdownButton :icon="DropdownButtonIcon.VerticalEllipsis" />
+		</div>
+		<div class="panel-body">
+			<component :is="panelType" />
+		</div>
+	</div>
+</template>
+
+<style lang="scss">
+.workspace-panel {
+	background: #111;
+	border-radius: 8px;
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+
+	.tab-bar {
+		height: 28px;
+		display: flex;
+		flex-direction: row;
+
+		&.min-widths .tab-group .tab {
+			min-width: 120px;
+			max-width: 360px;
+		}
+
+		.tab-group {
+			flex: 1 1 100%;
+			display: flex;
+			flex-direction: row;
+			overflow: hidden;
+
+			.tab {
+				height: 100%;
+				padding: 0 10px;
+				display: flex;
+				align-items: center;
+				position: relative;
+
+				&.active {
+					background: #333;
+					border-radius: 8px 8px 0 0;
+					position: relative;
+
+					&::before,
+					&::after {
+						content: "";
+						width: 16px;
+						height: 8px;
+						position: absolute;
+						bottom: 0;
+						box-shadow: #333;
+					}
+
+					&::before {
+						left: -16px;
+						border-bottom-right-radius: 8px;
+						box-shadow: 8px 0 0 0 #333;
+					}
+
+					&::after {
+						right: -16px;
+						border-bottom-left-radius: 8px;
+						box-shadow: -8px 0 0 0 #333;
+					}
+				}
+
+				span {
+					flex: 1 1 100%;
+					overflow-x: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					// Height and line-height required because https://stackoverflow.com/a/21611191/775283
+					height: 100%;
+					line-height: 28px;
+				}
+
+				.icon-button {
+					margin-left: 8px;
+				}
+
+				&:not(.active) + .tab:not(.active) {
+					margin-left: 1px;
+
+					&::before {
+						content: "";
+						position: absolute;
+						left: -1px;
+						width: 1px;
+						height: 16px;
+						background: #444;
+					}
+				}
+
+				&:last-of-type:not(.active) {
+					margin-right: 1px;
+
+					&::after {
+						content: "";
+						position: absolute;
+						right: -1px;
+						width: 1px;
+						height: 16px;
+						background: #444;
+					}
+				}
+			}
+		}
+	}
+
+	.panel-body {
+		background: #333;
+		flex-grow: 1;
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import Document from "../panels/Document.vue";
+import Properties from "../panels/Properties.vue";
+import LayerTree from "../panels/LayerTree.vue";
+import Minimap from "../panels/Minimap.vue";
+import IconButton from "../widgets/IconButton.vue";
+import DropdownButton, { DropdownButtonIcon } from "../widgets/DropdownButton.vue";
+import VerticalEllipsis from "../../../assets/svg/16x24-bounds-8x16-icon/vertical-ellipsis.svg";
+import CloseX from "../../../assets/svg/16x16-bounds-12x12-icon/close-x.svg";
+
+export default defineComponent({
+	components: {
+		Document,
+		Properties,
+		LayerTree,
+		Minimap,
+		IconButton,
+		DropdownButton,
+		CloseX,
+		VerticalEllipsis,
+	},
+	props: {
+		tabMinWidths: { type: Boolean, default: false },
+		tabCloseButtons: { type: Boolean, default: false },
+		tabLabels: { type: Array, required: true },
+		tabActiveIndex: { type: Number, required: true },
+		panelType: { type: String, required: true },
+	},
+	data() {
+		return {
+			DropdownButtonIcon,
+		};
+	},
+});
+</script>