Window title bar now draws for Windows, Mac, Linux, and Web

web-frontend/src/components/header/HeaderBar.vue

@@ -1,45 +0,0 @@
-<template>
-	<div class="header-third">
-		<FileMenu />
-	</div>
-	<div class="header-third">
-		<WindowTitle />
-	</div>
-	<div class="header-third">
-		<WindowButtons :maximized="true" />
-	</div>
-</template>
-
-<style lang="scss">
-.header-third {
-	display: flex;
-	flex: 1 1 100%;
-
-	&:nth-child(1) {
-		justify-content: flex-start;
-	}
-
-	&:nth-child(2) {
-		justify-content: center;
-	}
-
-	&:nth-child(3) {
-		justify-content: flex-end;
-	}
-}
-</style>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-import FileMenu from "./FileMenu.vue";
-import WindowTitle from "./WindowTitle.vue";
-import WindowButtons from "./WindowButtons.vue";
-
-export default defineComponent({
-	components: {
-		FileMenu,
-		WindowTitle,
-		WindowButtons,
-	},
-});
-</script>

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

@@ -3,7 +3,11 @@
 		<div class="tab-bar" :class="{ 'constant-widths': tabConstantWidths }">
 			<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel">
 				<span>{{tabLabel}}</span>
-				<button v-if="tabCloseButtons">✕</button>
+				<button v-if="tabCloseButtons">
+					<svg width="16" height="16" viewBox="0 0 16 16">
+						<polygon points="12,5 11,4 8,7 5,4 4,5 7,8 4,11 5,12 8,9 11,12 12,11 9,8" />
+					</svg>
+				</button>
 			</div>
 		</div>
 		<div class="panel-content">
@@ -70,7 +74,7 @@
 				overflow-x: hidden;
 				white-space: nowrap;
 				text-overflow: ellipsis;
-				// Required because https://stackoverflow.com/a/21611191/775283
+				// Height and line-height required because https://stackoverflow.com/a/21611191/775283
 				height: 100%;
 				line-height: 28px;
 			}
@@ -88,10 +92,12 @@
 				font-size: 10px;
 				border-radius: 2px;
 				margin-left: 8px;
+				fill: #ddd;
 
 				&:hover {
 					background: #555;
 					color: white;
+					fill: white;
 				}
 			}
 

web-frontend/src/components/window/MainWindow.vue

@@ -1,12 +1,12 @@
 <template>
 	<LayoutCol class="main-window">
-		<LayoutRow :class="['header-bar']">
+		<LayoutRow :class="'title-bar'">
-			<HeaderBar />
+			<TitleBar :platform="platform" :maximized="maximized" />
 		</LayoutRow>
-		<LayoutRow :class="['panel-container']">
+		<LayoutRow :class="'panel-container'">
 			<PanelArea />
 		</LayoutRow>
-		<LayoutRow :class="['footer-bar']">
+		<LayoutRow :class="'footer-bar'">
 			<FooterBar />
 		</LayoutRow>
 	</LayoutCol>
@@ -17,7 +17,7 @@
 	height: 100%;
 }
 
-.header-bar {
+.title-bar {
 	height: 28px;
 	flex: 0 0 auto;
 }
@@ -37,17 +37,30 @@
 import { defineComponent } from "vue";
 import LayoutRow from "../layout/LayoutRow.vue";
 import LayoutCol from "../layout/LayoutCol.vue";
-import HeaderBar from "../header/HeaderBar.vue";
 import PanelArea from "../panel-system/PanelArea.vue";
-import FooterBar from "../footer/FooterBar.vue";
+import TitleBar from "./title-bar/TitleBar.vue";
+import FooterBar from "./footer-bar/FooterBar.vue";
+
+export enum ApplicationPlatform {
+	"Windows" = "Windows",
+	"Mac" = "Mac",
+	"Linux" = "Linux",
+	"Web" = "Web",
+}
 
 export default defineComponent({
 	components: {
 		LayoutRow,
 		LayoutCol,
-		HeaderBar,
+		TitleBar,
 		PanelArea,
 		FooterBar,
 	},
+	data() {
+		return {
+			platform: ApplicationPlatform.Web,
+			maximized: true,
+		};
+	},
 });
 </script>

web-frontend/src/components/window/footer-bar/FooterBar.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="status-area footer-third">
 		<div>
-			<span>File: 1.8 MB | Memory: 137 MB | Scratch: 0.7/12.3 GB</span>
+			<span>Document: 0.17 MB | Memory: 137 MB | Scratch: 0.7/12.3 GB</span>
 		</div>
 	</div>
 	<div class="hint-area footer-third">

web-frontend/src/components/window/title-bar/FileMenu.vue

@@ -49,6 +49,13 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { ApplicationPlatform } from "../MainWindow.vue";
 
-export default defineComponent({});
+export default defineComponent({
+	data() {
+		return {
+			ApplicationPlatform,
+		};
+	},
+});
 </script>

web-frontend/src/components/window/title-bar/TitleBar.vue

@@ -0,0 +1,58 @@
+<template>
+	<div class="header-third">
+		<WindowButtonsMac :maximized="maximized" v-if="platform === ApplicationPlatform.Mac" />
+		<FileMenu v-if="platform !== ApplicationPlatform.Mac" />
+	</div>
+	<div class="header-third">
+		<WindowTitle :title="'X-35B.gdd* - Graphite'" />
+	</div>
+	<div class="header-third">
+		<WindowButtonsWindows :maximized="maximized" v-if="platform === ApplicationPlatform.Windows || platform === ApplicationPlatform.Linux" />
+	</div>
+</template>
+
+<style lang="scss">
+.header-third {
+	display: flex;
+	flex: 1 1 100%;
+
+	&:nth-child(1) {
+		justify-content: flex-start;
+	}
+
+	&:nth-child(2) {
+		justify-content: center;
+	}
+
+	&:nth-child(3) {
+		justify-content: flex-end;
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import FileMenu from "./FileMenu.vue";
+import WindowTitle from "./WindowTitle.vue";
+import WindowButtonsWindows from "./WindowButtonsWindows.vue";
+import WindowButtonsMac from "./WindowButtonsMac.vue";
+import { ApplicationPlatform } from "../MainWindow.vue";
+
+export default defineComponent({
+	components: {
+		FileMenu,
+		WindowTitle,
+		WindowButtonsWindows,
+		WindowButtonsMac,
+	},
+	props: {
+		platform: { type: String, required: true },
+		maximized: { type: Boolean, required: true },
+	},
+	data() {
+		return {
+			ApplicationPlatform,
+		};
+	},
+});
+</script>

web-frontend/src/components/window/title-bar/WindowButtonsMac.vue

@@ -0,0 +1,45 @@
+<template>
+	<div class="mac window-buttons">
+		<div class="close" title="Close"></div>
+		<div class="minimize" title="Minimize"></div>
+		<div class="zoom" title="Zoom"></div>
+	</div>
+</template>
+
+<style lang="scss">
+.mac.window-buttons {
+	display: flex;
+	align-items: center;
+
+	div {
+		display: flex;
+		align-items: center;
+		margin-left: 8px;
+		width: 11px;
+		height: 11px;
+		border-radius: 50%;
+
+		&.close {
+			background: #ff5f57;
+		}
+
+		&.minimize {
+			background: #ffbd2f;
+		}
+
+		&.zoom {
+			background: #29c93f;
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	props: {
+		maximized: { type: Boolean, default: false },
+	},
+});
+</script>

web-frontend/src/components/window/title-bar/WindowButtonsWindows.vue

@@ -1,20 +1,20 @@
 <template>
-	<div class="button minimize" title="Minimize">
+	<div class="windows window-button minimize" title="Minimize">
 		<svg width="10" height="10" viewBox="0 0 10 10">
 			<rect y="4" width="10" height="1" />
 		</svg>
 	</div>
-	<div class="button maximize" title="Maximize" v-if="maximized === false">
+	<div class="windows window-button maximize" title="Maximize" v-if="!maximized">
 		<svg width="10" height="10" viewBox="0 0 10 10">
 			<path d="M10,0v10H0V0H10z M9,1H1v8h8V1z" />
 		</svg>
 	</div>
-	<div class="button restore-down" title="Restore Down" v-if="maximized === true">
+	<div class="windows window-button restore-down" title="Restore Down" v-if="maximized">
 		<svg width="10" height="10" viewBox="0 0 10 10">
 			<path d="M10,8H8v2H0V2h2V0h8V8z M7,3H1v6h6V3z M9,1H3v1h5v5h1V1z" />
 		</svg>
 	</div>
-	<div class="button close" title="Close">
+	<div class="windows window-button close" title="Close">
 		<svg width="10" height="10" viewBox="0 0 10 10">
 			<polygon points="10,0.7 9.3,0 5,4.3 0.7,0 0,0.7 4.3,5 0,9.3 0.7,10 5,5.7 9.3,10 10,9.3 5.7,5" />
 		</svg>
@@ -22,7 +22,7 @@
 </template>
 
 <style lang="scss">
-.button {
+.windows.window-button {
 	display: flex;
 	align-items: center;
 	padding: 0 20px;

web-frontend/src/components/window/title-bar/WindowTitle.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="window-title">
-		<span>X-35B.gdd* - Graphite</span>
+		<span>{{title}}</span>
 	</div>
 </template>
 
@@ -16,5 +16,9 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-export default defineComponent({});
+export default defineComponent({
+	props: {
+		title: { type: String, required: true },
+	},
+});
 </script>