Rename project structure with /core and /client

2026-09-25 09:18:12 +08:00 · 2021-03-27 02:26:55 -07:00
parent 18a8442b0e
commit 7bfb04a99a
64 changed files with 63 additions and 43 deletions
@@ -0,0 +1,59 @@
+<template>
+	<div class="entry">
+	<svg width="16" height="16" viewBox="0 0 16 16">
+		<path d="M5.5,10.2c0.1,0.2,0,0.3-0.1,0.4c-0.2,0.1-0.3,0-0.4-0.1c0,0,0,0,0,0L2.7,6.7c-0.1-0.2,0-0.3,0.1-0.4c0.2-0.1,0.3,0,0.4,0.1
+			L5.5,10.2z M14.9,14.9L14.9,14.9C14.9,14.9,14.9,15,14.9,14.9C14.8,15,14.8,15,14.9,14.9L14.9,14.9c-0.5,0.2-1,0.4-1.5,0.5
+			c-0.5,0.1-1.1,0.2-1.6,0.2c-0.5,0.1-1.1,0.1-1.6,0c-0.5,0-1.1-0.1-1.6-0.1l-1.6-0.1c-1.7,0-3.9-0.1-4.4-0.1s-1.1-0.2-1.1-0.3
+			c0-0.1,0.3-0.2,0.6-0.2c0.5-0.1,1.1-0.2,1.7-0.3c0.6-0.1,2-0.2,4.1-0.2c0.8,0,1.8,0,1.8,0c0.6,0,1,0,1.9,0c0.7,0,1.1,0,1.2,0
+			c0.3,0,0.6,0.1,0.9,0.2l-2.6-1.9c-0.2,0.1-0.4,0.2-0.7,0.2H4.5c-0.5,0-0.9-0.2-1.1-0.6l-2.9-5c-0.2-0.4-0.2-0.9,0-1.3l2.9-5
+			C3.6,0.5,4,0.3,4.5,0.3h5.8c0.5,0,0.9,0.2,1.1,0.6l2.9,5l0,0l0,0c0,0.1,0.1,0.2,0.1,0.3c0,0,0,0.1,0,0.1c0,0.1,0,0.1,0,0.2
+			c0,0,0.7,7.2,0.7,7.8v0C15.2,14.6,15.1,14.8,14.9,14.9L14.9,14.9z M4.3,1.9L4.2,2l3.6,6.2c0.4-0.1,0.9-0.2,1.4-0.2l0.9-1.3l1.6-0.2
+			c0.2-0.4,0.5-0.8,0.8-1.1l-2.1-3.7c-0.1-0.2-0.3-0.3-0.5-0.3H4.8C4.6,1.6,4.4,1.7,4.3,1.9z M9.4,11.6l-2-1.4C7.4,10.1,7.3,10,7.3,10
+			l0,0L3.5,3.3l-1.7,3c-0.1,0.2-0.1,0.4,0,0.6l2.6,4.5c0.1,0.2,0.3,0.3,0.5,0.3L9.4,11.6z M13.5,11.3l-0.5-4.6c-0.3,0.3-0.5,0.7-0.7,1
+			l-1.6,0.2L9.8,9.2c-0.4,0-0.8,0-1.3,0.1l3.7,2.7C12.5,11.6,13,11.3,13.5,11.3L13.5,11.3z" />
+	</svg>
+	</div>
+	<div class="entry"><span>File</span></div>
+	<div class="entry"><span>Edit</span></div>
+	<div class="entry"><span>Document</span></div>
+	<div class="entry"><span>View</span></div>
+	<div class="entry"><span>Help</span></div>
+</template>
+
+<style lang="scss">
+.entry {
+	display: flex;
+	align-items: center;
+	white-space: nowrap;
+	padding: 0 8px;
+
+	svg {
+		fill: #ddd;
+	}
+
+	&:hover {
+		background: #555;
+
+		svg {
+			fill: #fff;
+		}
+
+		span {
+			color: #fff;
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { ApplicationPlatform } from "../MainWindow.vue";
+
+export default defineComponent({
+	data() {
+		return {
+			ApplicationPlatform,
+		};
+	},
+});
+</script>
@@ -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 Over Death Valley.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>
@@ -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>
@@ -0,0 +1,56 @@
+<template>
+	<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="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="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="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>
+	</div>
+</template>
+
+<style lang="scss">
+.windows.window-button {
+	display: flex;
+	align-items: center;
+	padding: 0 20px;
+
+	svg {
+		fill: #ddd;
+	}
+
+	&:hover {
+		background: #555;
+
+		svg {
+			fill: #fff;
+		}
+	}
+
+	&.close:hover {
+		background: #e81123;
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	props: {
+		maximized: { type: Boolean, default: false },
+	},
+});
+</script>
@@ -0,0 +1,24 @@
+<template>
+	<div class="window-title">
+		<span>{{title}}</span>
+	</div>
+</template>
+
+<style lang="scss">
+.window-title {
+	display: flex;
+	align-items: center;
+	white-space: nowrap;
+	padding: 0 8px;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	props: {
+		title: { type: String, required: true },
+	},
+});
+</script>