Added titlebar buttons

notangelmario · Nov 6, 2023 · 73810de · 73810de
1 parent e804295
commit 73810de
Show file tree

Hide file tree

Showing 8 changed files with 154 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -16,21 +16,8 @@
 		<meta name="description" content="Marker is a minimalist web editor based on Monaco Editor."/>
 	</head>
 	<body>
+		<div data-tauri-drag-region class="titlebar" id="titlebar"></div>
 		<div id="app"></div>
-
-		<div 
-			id="unsupported"
-			style="display: none"
-		>
-			<div>
-				<h1>
-					Your device is unsupported
-				</h1>
-				<p>
-					Try opening this app on a different device or a different browser
-				</p>
-			</div>
-		</div>
 		<script type="module" src="./src/main.ts"></script>
 	</body>
-</html>
+</html>
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -17,7 +17,7 @@ tauri-build = { version = "1.5.0", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.5.2", features = [ "shell-all", "window-all", "fs-all", "dialog-all"] }
+tauri = { version = "1.5.2", features = [ "os-all", "shell-all", "window-all", "fs-all", "dialog-all"] }
 
 [features]
 # this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled.

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -24,6 +24,9 @@
 	  },
 	  "shell": {
 		"all": true
+	  },
+	  "os": {
+		"all": true
 	  }
     },
     "bundle": {
@@ -67,6 +70,7 @@
     },
     "windows": [
       {
+		"decorations": false,
         "fullscreen": false,
         "height": 600,
         "resizable": true,

diff --git a/src/app.css b/src/app.css
@@ -75,3 +75,47 @@ html, body, #app {
 	font-size: 12px;
 	transition: opacity 1s ease-out;
 }
+
+.titlebar {
+	height: 30px;
+	background: var(--light);
+	user-select: none;
+	display: flex;
+	justify-content: flex-end;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 9999;
+}
+
+.titlebar.titlebar-macos {
+	justify-content: flex-start;
+}
+
+.titlebar-button {
+	background: var(--light);
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	width: 30px;
+	height: 30px;
+}
+
+.titlebar-button:hover {
+	filter: brightness(75%);
+}
+
+@media (prefers-color-scheme: dark) {
+	.titlebar, .titlebar-button {
+		background: var(--dark);
+	}
+
+	.titlebar-button > img {
+		filter: invert(100%);
+	}
+
+	.titlebar-button:hover {
+		filter: brightness(125%);
+	}
+}
diff --git a/src/lib/editor.ts b/src/lib/editor.ts
@@ -29,14 +29,15 @@ export function initEditor(editorWrapper: HTMLElement, store: Store) {
 
 	const editor = monaco.editor.create(editorWrapper, {
 		smoothScrolling: true,
+		dragAndDrop: true,
 		automaticLayout: true,
 		minimap: {
 			autohide: true,
 		},
 		fontFamily: "'Fira Code', sans-serif",
 		fontLigatures: true,
 		padding: {
-			top: 32,
+			top: 64,
 			bottom: 16
 		},
 		theme: theme === "dark" ? "vs-dark" : "vs",

diff --git a/src/lib/window.ts b/src/lib/window.ts
@@ -0,0 +1,44 @@
+import { appWindow } from "@tauri-apps/api/window";
+import { type } from "@tauri-apps/api/os";
+
+export const initWindowTitlebar = async () => {
+	const closeButton = `
+		<div class="titlebar-button" id="titlebar-close">
+			<img src="https://api.iconify.design/mdi:close.svg" alt="close" />
+		</div>
+	`;
+	const maximizeButton = `
+		<div class="titlebar-button" id="titlebar-maximize">
+			<img
+				src="https://api.iconify.design/mdi:window-maximize.svg"
+				alt="maximize"
+			/>
+		</div>
+	`
+	const minimizeButton = `
+		<div class="titlebar-button" id="titlebar-minimize">
+			<img
+				src="https://api.iconify.design/mdi:window-minimize.svg"
+				alt="minimize"
+			/>
+		</div>
+	`
+
+	const osType = await type();
+	const titlebarElement = document.getElementById("titlebar");
+
+	if (!titlebarElement) {
+		throw new Error("No titlebar element present in DOM");
+	}
+
+	if (osType === "Darwin")
+		titlebarElement.classList.add("titlebar-macos");
+
+	titlebarElement.innerHTML = osType === "Darwin" ? (closeButton + minimizeButton + maximizeButton) : (minimizeButton + maximizeButton + closeButton);
+}
+
+export const initWindowButtons = () => {
+	document.getElementById('titlebar-minimize')?.addEventListener('click', () => appWindow.minimize())
+	document.getElementById('titlebar-maximize')?.addEventListener('click', () => appWindow.toggleMaximize())
+	document.getElementById('titlebar-close')?.addEventListener('click', () => appWindow.close())
+}
diff --git a/src/main.ts b/src/main.ts
@@ -4,7 +4,9 @@ import { initEditor } from "./lib/editor";
 import { closeModal, openModal } from "./lib/modal";
 import { initAutoTypings, initLanguageWorkers } from "./lib/languages";
 import { initStatus } from "./lib/status";
+import { initWindowButtons, initWindowTitlebar } from "./lib/window";
 
+initWindowTitlebar().then(() => initWindowButtons());
 const editorWrapper = document.getElementById("app")!;
 
 const store = initStore();