AxaFrance · Debaerdm · Jun 10, 2020 · Jun 9, 2020 · Jun 9, 2020 · Jun 10, 2020
diff --git a/public/global.css b/public/global.css
@@ -58,6 +58,10 @@ input:disabled {
 	background: #ccc;
 }
 
+::-webkit-scrollbar-corner {
+	background-color: #fff;
+}
+
 @media (prefers-color-scheme: dark) {
 	body {
 		background-color: #222;
@@ -66,6 +70,10 @@ input:disabled {
 	::-webkit-scrollbar-thumb {
 		background: #666;
 	}
+
+	::-webkit-scrollbar-corner {
+		background-color: #444;
+	}
 }
 
 button.link {

diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
@@ -9,106 +9,12 @@
 	width: 100%;
 	height: 100%;
 	-webkit-app-region: drag;
-}
-
-.window-controls {
-	display: grid;
-	grid-template-columns: repeat(3, 32px);
-	position: absolute;
-	top: 0;
-	right: 0;
-	height: 100%;
-	font-size: 10px;
-	-webkit-app-region: no-drag;
-}
-
-.window-controls .button {
-	position: relative;
-	grid-row: 1 / span 1;
-	user-select: none;
-	cursor: default;
-	vertical-align: middle;
-	border: 0;
-	background-color: transparent;
-}
-
-.window-controls .button:before {
-	content: '';
-	position: absolute;
-	left: 50%;
-	top: 50%;
-	width: 16px;
-	height: 16px;
-	border-radius: 50%;
-	background-color: rgba(33, 33, 33, 0.8);
-	transform: translateX(-50%) translateY(-50%);
-}
-
-.window-controls .button:after {
-	content: attr(data-icon);
-	opacity: 0;
-	position: absolute;
-	left: 50%;
-	top: 50%;
-	width: 16px;
-	height: 16px;
-	line-height: 16px;
-	font-family: sans-serif;
-	font-size: 0.6rem;
-	transform: translateX(-50%) translateY(-50%);
-}
-
-.window-controls .button:hover:after {
-	opacity: 1;
-}
-
-.window-controls .min-button {
-	grid-column: 1;
-}
-
-.window-controls .max-button,
-.window-controls .restore-button {
-	grid-column: 2;
-}
-
-.window-controls .close-button {
-	grid-column: 3;
-}
-
-.window-controls .close-button:before {
-	background-color: #fe6057;
-}
-
-.window-controls .min-button:before {
-	background-color: #ffbf2b;
-}
-
-.window-controls .restore-button:before,
-.window-controls .max-button:before {
-	background-color: #28cd41;
-}
-
-.window-controls .restore-button {
-	display: none;
-}
-
-.window-title {
-	grid-column: 1;
 	display: flex;
-	align-items: center;
-	font-size: 0.8rem;
-	line-height: 1;
-	color: #333;
-	font-family: sans-serif;
-	padding-left: 0.5rem;
-	overflow-x: hidden;
-}
+	flex-direction: row;
 
-.window-title .titlebar-title {
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	padding-left: 0.5rem;
+	&--windows {
+		justify-content: flex-end;
+	}
 }
 
 @media (prefers-color-scheme: dark) {

diff --git a/src/components/Header/Header.svelte b/src/components/Header/Header.svelte
@@ -1,70 +1,23 @@
 <script>
-	import { onMount } from 'svelte';
-    const { remote } = require('electron');
+	const { getCurrentWindow } = require('electron').remote;
+	import WindowsBar from './WindowsBar.svelte';
+	import MacosBar from './MacosBar.svelte';
 
-    let currentPlatform = 'Others';
-
-	onMount(() => {
-		init();
-		if (navigator.platform === 'Win32') {
-			currentPlatform = 'Windows';
-		} else {
-			currentPlatform = 'Others';
-		}
-    });
-
-	const init = () => {
-		let window = remote.getCurrentWindow();
-		const minButton = document.getElementById('minimize');
-		const maxButton = document.getElementById('maximize');
-		const restoreButton = document.getElementById('restore');
-		const closeButton = document.getElementById('close');
-		minButton.addEventListener('click', event => {
-			window = remote.getCurrentWindow();
-			window.minimize();
-		});
-		maxButton.addEventListener('click', event => {
-			window = remote.getCurrentWindow();
-			window.maximize();
-			toggleMaxRestoreButtons();
-		});
-		restoreButton.addEventListener('click', event => {
-			window = remote.getCurrentWindow();
-			window.unmaximize();
-			toggleMaxRestoreButtons();
-		});
-		const toggleMaxRestoreButtons = () => {
-			window = remote.getCurrentWindow();
-			if (window.isMaximized()) {
-				maxButton.style.display = 'none';
-				restoreButton.style.display = 'flex';
-			} else {
-				restoreButton.style.display = 'none';
-				maxButton.style.display = 'flex';
-			}
-		};
-		toggleMaxRestoreButtons();
-		window.on('maximize', toggleMaxRestoreButtons);
-		window.on('unmaximize', toggleMaxRestoreButtons);
-		closeButton.addEventListener('click', event => {
-			window = remote.getCurrentWindow();
-			window.hide();
-		});
-	};
+	let currentPlatform = navigator.platform === 'Win32' ? 'windows' : 'others';
+	let isMaximized = getCurrentWindow().isMaximized();
+
+	getCurrentWindow().on('maximize', () => isMaximized = true);
+	getCurrentWindow().on('unmaximize', () => isMaximized = false);
 </script>
 
 <style src="./Header.scss"></style>
 
 <header class="titlebar">
-	<div class="drag-region">
-		<div class="window-controls">
-			<button id="minimize" class="button min-button" data-icon="—"></button>
-			<button id="maximize" class="button max-button" data-icon="➕"></button>
-			<button
-				id="restore"
-				class="button restore-button"
-				data-icon="➕"></button>
-			<button id="close" class="button close-button" data-icon="❌"></button>
-		</div>
+	<div class="drag-region {currentPlatform ? `drag-region--${currentPlatform}` : ''}">
+		{#if currentPlatform === 'others'}
+			<MacosBar bind:isMaximized />
+		{:else}
+			<WindowsBar bind:isMaximized />
+		{/if}
 	</div>
 </header>
diff --git a/src/components/Header/MacosBar.scss b/src/components/Header/MacosBar.scss
@@ -0,0 +1,55 @@
+.window-controls {
+	align-items: center;
+	display: flex;
+	-webkit-app-region: no-drag;
+	justify-content: space-evenly;
+	padding-left: 0.75rem;
+}
+
+.window-controls .button {
+	position: relative;
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	margin: 0 0.25rem;
+	transition: 200ms;
+
+	& svg {
+		transition: 200ms;
+		transition-timing-function: ease-in-out;
+		display: none;
+	}
+}
+
+.window-controls:hover svg {
+	display: flex;
+}
+
+.close-button {
+	background-color: #fe6057;
+
+	&:active {
+		background-color: #e9574f;
+	}
+}
+
+.min-button {
+	background-color: #ffbf2b;
+
+	&:active {
+		background-color: #d8a225;
+	}
+}
+
+.restore-button,
+.max-button {
+	background-color: #28cd41;
+
+	&:active {
+		background-color: #22aa36;
+	}
+
+	& svg {
+		transform: rotate(-45deg);
+	}
+}
diff --git a/src/components/Header/MacosBar.svelte b/src/components/Header/MacosBar.svelte
@@ -0,0 +1,25 @@
+<script>
+    const { getCurrentWindow } = require('electron').remote;
+
+    export let isMaximized;
+</script>
+
+<style src="./MacosBar.scss"></style>
+
+<div class="window-controls">
+    <button on:click={() => getCurrentWindow().hide()} class="button close-button">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" fill="#000"/></svg>
+    </button>
+    <button on:click={() => getCurrentWindow().minimize()} class="button min-button">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 13H5v-2h14v2z" fill="#000"/></svg>
+    </button>
+    {#if !isMaximized} 
+        <button on:click={() => getCurrentWindow().maximize()} class="button max-button">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.17 12L15 8.83l1.41-1.42L21 12l-4.59 4.58L15 15.17 18.17 12M5.83 12L9 15.17l-1.41 1.42L3 12l4.59-4.58L9 8.83 5.83 12z" fill="#000"/></svg>
+        </button>
+    {:else}
+        <button on:click={() => getCurrentWindow().unmaximize()} class="button restore-button">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.41 7.41L10 12l-4.59 4.59L4 15.17 7.17 12 4 8.83l1.41-1.42m13.18 9.18L14 12l4.59-4.58L20 8.83 16.83 12 20 15.17l-1.41 1.42z" fill="#000"/></svg>
+        </button>
+    {/if}
+</div>
diff --git a/src/components/Header/WindowsBar.scss b/src/components/Header/WindowsBar.scss
@@ -0,0 +1,45 @@
+.window-controls {
+	align-items: center;
+	display: flex;
+	-webkit-app-region: no-drag;
+	justify-content: space-evenly;
+}
+
+.window-controls .button {
+	position: relative;
+	background-color: transparent;
+	width: 50px;
+	height: 100%;
+	transition: 200ms;
+
+	& path {
+		transition: 200ms;
+		transition-timing-function: ease-in-out;
+	}
+}
+
+.close-button:hover {
+	background-color: red;
+}
+
+.restore-button:hover,
+.max-button:hover,
+.min-button:hover {
+	background-color: #ddd;
+}
+
+.close-button:hover path {
+	fill: white;
+}
+
+@media (prefers-color-scheme: dark) {
+	.button path {
+		fill: white;
+	}
+
+	.restore-button:hover,
+	.max-button:hover,
+	.min-button:hover {
+		background-color: #666;
+	}
+}
diff --git a/src/components/Header/WindowsBar.svelte b/src/components/Header/WindowsBar.svelte
@@ -0,0 +1,25 @@
+<script>
+    const { getCurrentWindow } = require('electron').remote;
+
+    export let isMaximized;
+</script>
+
+<style src="./WindowsBar.scss"></style>
+
+<div class="window-controls">
+    <button on:click={() => getCurrentWindow().minimize()} class="button min-button">
+        <svg width="11" height="11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 4.399V5.5H0V4.399h11z" fill="#444"/></svg>
+    </button>
+    {#if !isMaximized} 
+        <button on:click={() => getCurrentWindow().maximize()} class="button max-button">
+            <svg width="11" height="11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 0v11H0V0h11zM9.899 1.101H1.1V9.9h8.8V1.1z" fill="#444"/></svg>
+        </button>
+    {:else}
+        <button on:click={() => getCurrentWindow().unmaximize()} class="button restore-button">
+            <svg width="11" height="11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 8.798H8.798V11H0V2.202h2.202V0H11v8.798zm-3.298-5.5h-6.6v6.6h6.6v-6.6zM9.9 1.1H3.298v1.101h5.5v5.5h1.1v-6.6z" fill="#444"/></svg>
+        </button>
+    {/if}
+    <button on:click={() => getCurrentWindow().hide()} class="button close-button">
+        <svg class="close" width="13" height="13" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.279 5.5L11 10.221l-.779.779L5.5 6.279.779 11 0 10.221 4.721 5.5 0 .779.779 0 5.5 4.721 10.221 0 11 .779 6.279 5.5z" fill="#444"/></svg>
+    </button>
+</div>