Add a fullscreen button and the keyboard lock API (#266)

Closes #249

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

@@ -59,7 +59,7 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			platform: ApplicationPlatform.Windows,
+			platform: ApplicationPlatform.Web,
 			maximized: true,
 		};
 	},

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

@@ -8,6 +8,7 @@
 	</div>
 	<div class="header-third">
 		<WindowButtonsWindows :maximized="maximized" v-if="platform === ApplicationPlatform.Windows || platform === ApplicationPlatform.Linux" />
+		<WindowButtonsWeb :maximized="maximized" v-if="platform === ApplicationPlatform.Web" />
 	</div>
 </template>
 
@@ -36,15 +37,10 @@ import MenuBarInput from "../../widgets/inputs/MenuBarInput.vue";
 import WindowTitle from "./WindowTitle.vue";
 import WindowButtonsWindows from "./WindowButtonsWindows.vue";
 import WindowButtonsMac from "./WindowButtonsMac.vue";
+import WindowButtonsWeb from "./WindowButtonsWeb.vue";
 import { ApplicationPlatform } from "../MainWindow.vue";
 
 export default defineComponent({
-	components: {
-		MenuBarInput,
-		WindowTitle,
-		WindowButtonsWindows,
-		WindowButtonsMac,
-	},
 	props: {
 		platform: { type: String, required: true },
 		maximized: { type: Boolean, required: true },
@@ -54,5 +50,12 @@ export default defineComponent({
 			ApplicationPlatform,
 		};
 	},
+	components: {
+		MenuBarInput,
+		WindowTitle,
+		WindowButtonsWindows,
+		WindowButtonsMac,
+		WindowButtonsWeb,
+	},
 });
 </script>

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

@@ -20,15 +20,15 @@
 		border-radius: 50%;
 
 		&.close {
-			background: #ff5f57;
+			background: #ff5a52;
 		}
 
 		&.minimize {
-			background: #ffbd2f;
+			background: #e6c029;
 		}
 
 		&.zoom {
-			background: #29c93f;
+			background: #54c22b;
 		}
 	}
 }

client/web/src/components/window/title-bar/WindowButtonsWeb.vue

@@ -0,0 +1,55 @@
+<template>
+	<div class="window-buttons-web" @click="handleClick" :title="fullscreen.windowFullscreen ? 'Exit Fullscreen (F11)' : 'Enter Fullscreen (F11)'">
+		<TextLabel v-if="requestFullscreenHotkeys">Click to access all hotkeys</TextLabel>
+		<Icon :icon="fullscreen.windowFullscreen ? 'FullscreenExit' : 'FullscreenEnter'" />
+	</div>
+</template>
+
+<style lang="scss">
+.window-buttons-web {
+	display: flex;
+	align-items: center;
+	padding: 0 8px;
+	fill: var(--color-e-nearwhite);
+
+	.text-label {
+		font-weight: normal;
+		font-style: italic;
+		margin-right: 8px;
+	}
+
+	&:hover {
+		background: var(--color-6-lowergray);
+		color: var(--color-f-white);
+		fill: var(--color-f-white);
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import fullscreen, { keyboardLockApiSupported, enterFullscreen, exitFullscreen } from "@/utilities/fullscreen";
+import Icon from "@/components/widgets/labels/Icon.vue";
+import TextLabel from "@/components/widgets/labels/TextLabel.vue";
+
+const canUseKeyboardLock = keyboardLockApiSupported();
+
+export default defineComponent({
+	inject: ["fullscreen"],
+	methods: {
+		async handleClick() {
+			if (fullscreen.windowFullscreen) exitFullscreen();
+			else enterFullscreen();
+		},
+	},
+	computed: {
+		requestFullscreenHotkeys() {
+			return canUseKeyboardLock && !fullscreen.keyboardLocked;
+		},
+	},
+	components: {
+		Icon,
+		TextLabel,
+	},
+});
+</script>