From 3b2ba92727699f51eeb9d15323c2486f88f87e75 Mon Sep 17 00:00:00 2001 From: Samuele de Tomasi Date: Wed, 29 Sep 2021 19:04:29 +0200 Subject: [PATCH] Added window seamless titlebar --- package-lock.json | 50 ++++---- package.json | 39 +++--- src/electron/IPC/windowControls.ts | 44 +++++++ src/electron/customWindow.ts | 6 +- src/electron/index.ts | 8 +- src/electron/preload.ts | 3 +- src/frontend/App.svelte | 37 +++--- .../Components/Icons/IconClose.svelte | 18 +++ .../Components/Icons/IconMaximize.svelte | 20 ++++ .../Components/Icons/IconMinimize.svelte | 18 +++ .../Components/Icons/IconUnmaximize.svelte | 20 ++++ .../Components/MainWithTitlebar.svelte | 113 ++++++++++++++++++ src/frontend/css/tailwind.pcss | 7 +- 13 files changed, 316 insertions(+), 67 deletions(-) create mode 100644 src/electron/IPC/windowControls.ts create mode 100644 src/frontend/Components/Icons/IconClose.svelte create mode 100644 src/frontend/Components/Icons/IconMaximize.svelte create mode 100644 src/frontend/Components/Icons/IconMinimize.svelte create mode 100644 src/frontend/Components/Icons/IconUnmaximize.svelte create mode 100644 src/frontend/Components/MainWithTitlebar.svelte diff --git a/package-lock.json b/package-lock.json index 802a720..ded4178 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,41 +1,41 @@ { "name": "memento-svelte-electron-typescript", - "version": "0.0.11", + "version": "0.0.12", "lockfileVersion": 2, "requires": true, "packages": { "": { - "version": "0.0.11", + "version": "0.0.12", "license": "MIT", "dependencies": { "electron-reload": "^2.0.0-alpha.1", "electron-updater": "^4.3.9", - "sirv-cli": "^1.0.0" + "sirv-cli": "^1.0.14" }, "devDependencies": { "@rollup/plugin-commonjs": "^20.0.0", - "@rollup/plugin-node-resolve": "^13.0.4", - "@rollup/plugin-typescript": "^8.0.0", - "@tsconfig/svelte": "^2.0.0", - "autoprefixer": "^10.3.4", + "@rollup/plugin-node-resolve": "^13.0.5", + "@rollup/plugin-typescript": "^8.2.5", + "@tsconfig/svelte": "^2.0.1", + "autoprefixer": "^10.3.6", "electron": "^15.0.0", "electron-builder": "^22.11.7", - "nodemon": "^2.0.7", - "postcss": "^8.3.6", + "nodemon": "^2.0.13", + "postcss": "^8.3.8", "postcss-load-config": "^3.1.0", - "rollup": "^2.3.4", + "rollup": "^2.57.0", "rollup-plugin-copy": "^3.4.0", "rollup-plugin-css-only": "^3.1.0", - "rollup-plugin-livereload": "^2.0.0", + "rollup-plugin-livereload": "^2.0.5", "rollup-plugin-postcss": "^4.0.1", - "rollup-plugin-svelte": "^7.0.0", - "rollup-plugin-terser": "^7.0.0", - "svelte": "^3.0.0", - "svelte-check": "^2.0.0", - "svelte-preprocess": "^4.0.0", - "tailwindcss": "^2.2.15", - "tslib": "^2.0.0", - "typescript": "^4.3.4" + "rollup-plugin-svelte": "^7.1.0", + "rollup-plugin-terser": "^7.0.2", + "svelte": "^3.43.0", + "svelte-check": "^2.2.6", + "svelte-preprocess": "^4.9.5", + "tailwindcss": "^2.2.16", + "tslib": "^2.3.1", + "typescript": "^4.4.3" } }, "node_modules/@babel/code-frame": { @@ -5995,9 +5995,9 @@ "dev": true }, "node_modules/tailwindcss": { - "version": "2.2.15", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.15.tgz", - "integrity": "sha512-WgV41xTMbnSoTNMNnJvShQZ+8GmY86DmXTrCgnsveNZJdlybfwCItV8kAqjYmU49YiFr+ofzmT1JlAKajBZboQ==", + "version": "2.2.16", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.16.tgz", + "integrity": "sha512-EireCtpQyyJ4Xz8NYzHafBoy4baCOO96flM0+HgtsFcIQ9KFy/YBK3GEtlnD+rXen0e4xm8t3WiUcKBJmN6yjg==", "dev": true, "dependencies": { "arg": "^5.0.1", @@ -11332,9 +11332,9 @@ } }, "tailwindcss": { - "version": "2.2.15", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.15.tgz", - "integrity": "sha512-WgV41xTMbnSoTNMNnJvShQZ+8GmY86DmXTrCgnsveNZJdlybfwCItV8kAqjYmU49YiFr+ofzmT1JlAKajBZboQ==", + "version": "2.2.16", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.16.tgz", + "integrity": "sha512-EireCtpQyyJ4Xz8NYzHafBoy4baCOO96flM0+HgtsFcIQ9KFy/YBK3GEtlnD+rXen0e4xm8t3WiUcKBJmN6yjg==", "dev": true, "requires": { "arg": "^5.0.1", diff --git a/package.json b/package.json index 72f1edc..ad8874b 100644 --- a/package.json +++ b/package.json @@ -13,37 +13,40 @@ "start:svelte": "rollup -c & npm run compile && electron .", "compile": "tsc", "out:win": "rollup -c && tsc && electron-builder build --win --publish never", - "publish:win": "rollup -c && tsc && electron-builder build --win --publish always" + "publish:win": "rollup -c && tsc && electron-builder build --win --publish always", + "check-updates": "npx npm-check-updates", + "check-updates:minor": "npx npm-check-updates --target minor", + "check-updates:patch": "npx npm-check-updates --target patch" }, "devDependencies": { "@rollup/plugin-commonjs": "^20.0.0", - "@rollup/plugin-node-resolve": "^13.0.4", - "@rollup/plugin-typescript": "^8.0.0", - "@tsconfig/svelte": "^2.0.0", - "autoprefixer": "^10.3.4", + "@rollup/plugin-node-resolve": "^13.0.5", + "@rollup/plugin-typescript": "^8.2.5", + "@tsconfig/svelte": "^2.0.1", + "autoprefixer": "^10.3.6", "electron": "^15.0.0", "electron-builder": "^22.11.7", - "nodemon": "^2.0.7", - "postcss": "^8.3.6", + "nodemon": "^2.0.13", + "postcss": "^8.3.8", "postcss-load-config": "^3.1.0", - "rollup": "^2.3.4", + "rollup": "^2.57.0", "rollup-plugin-copy": "^3.4.0", "rollup-plugin-css-only": "^3.1.0", - "rollup-plugin-livereload": "^2.0.0", + "rollup-plugin-livereload": "^2.0.5", "rollup-plugin-postcss": "^4.0.1", - "rollup-plugin-svelte": "^7.0.0", - "rollup-plugin-terser": "^7.0.0", - "svelte": "^3.0.0", - "svelte-check": "^2.0.0", - "svelte-preprocess": "^4.0.0", - "tailwindcss": "^2.2.15", - "tslib": "^2.0.0", - "typescript": "^4.3.4" + "rollup-plugin-svelte": "^7.1.0", + "rollup-plugin-terser": "^7.0.2", + "svelte": "^3.43.0", + "svelte-check": "^2.2.6", + "svelte-preprocess": "^4.9.5", + "tailwindcss": "^2.2.16", + "tslib": "^2.3.1", + "typescript": "^4.4.3" }, "dependencies": { "electron-reload": "^2.0.0-alpha.1", "electron-updater": "^4.3.9", - "sirv-cli": "^1.0.0" + "sirv-cli": "^1.0.14" }, "build": { "appId": "memento-set", diff --git a/src/electron/IPC/windowControls.ts b/src/electron/IPC/windowControls.ts new file mode 100644 index 0000000..512a9c0 --- /dev/null +++ b/src/electron/IPC/windowControls.ts @@ -0,0 +1,44 @@ +import { SendChannels } from "./General/channelsInterface"; +import IPC from "./General/IPC"; +import { BrowserWindow } from "electron"; + +const nameAPI = "windowControls"; + +// to main +const validSendChannel: SendChannels = { + "minimize": minimize, + "maximize": maximize, + "unmaximize": unmaximize, + "close": close +}; + +// from Main +const validReceiveChannel: string[] = [ + +]; + +const windowControls = new IPC ({ + nameAPI, + validSendChannel, + validReceiveChannel +}); + +export default windowControls; + +// Enter here the functions for ElectronJS + +function minimize(customWindow: BrowserWindow, event: Electron.IpcMainEvent, message: string) { + customWindow.minimize(); +} + +function maximize(customWindow: BrowserWindow, event: Electron.IpcMainEvent, message: string) { + customWindow.maximize(); +} + +function close(customWindow: BrowserWindow, event: Electron.IpcMainEvent, message: string) { + customWindow.destroy(); +} + +function unmaximize(customWindow: BrowserWindow, event: Electron.IpcMainEvent, message: string) { + customWindow.unmaximize() +} diff --git a/src/electron/customWindow.ts b/src/electron/customWindow.ts index 54533c8..ce81dfb 100644 --- a/src/electron/customWindow.ts +++ b/src/electron/customWindow.ts @@ -8,7 +8,9 @@ const appName = "MEMENTO - Svelte, Electron, TypeScript"; const defaultSettings = { title: "MEMENTO - Svelte, Electron, TypeScript", width: 854, - height: 480 + height: 480, + frame: false, + backgroundColor: '#FFF' } class CustomWindow { @@ -17,7 +19,7 @@ class CustomWindow { onEvent: EventEmitter = new EventEmitter(); constructor(settings: {[key: string]: any} | null = null) { - this.settings = settings ? {...settings} : {...defaultSettings} + this.settings = settings ? {...defaultSettings, ...settings} : {...defaultSettings} } createWindow(url: string) { diff --git a/src/electron/index.ts b/src/electron/index.ts index 7ccddcb..7a78f6c 100644 --- a/src/electron/index.ts +++ b/src/electron/index.ts @@ -6,6 +6,7 @@ import CustomWindow from "./customWindow"; import systemInfo from './IPC/systemInfo'; import updaterInfo from './IPC/updaterInfo'; +import windowControls from './IPC/windowControls'; require('electron-reload')(__dirname); @@ -22,11 +23,14 @@ app.on('window-all-closed', () => { }); async function createMainWindow() { - mainWindow = new CustomWindow(); + const settings = { + title: "MEMENTO - Svelte, Tailwind, Electron & TypeScript" + }; + mainWindow = new CustomWindow(settings); const urlPage = path.join(__dirname, 'www', 'index.html'); mainWindow.createWindow(urlPage); - await mainWindow.setIpcMain([systemInfo, updaterInfo]); + await mainWindow.setIpcMain([systemInfo, updaterInfo, windowControls]); updaterInfo.initAutoUpdater(autoUpdater, mainWindow.window); } \ No newline at end of file diff --git a/src/electron/preload.ts b/src/electron/preload.ts index 07c5214..b4721a1 100644 --- a/src/electron/preload.ts +++ b/src/electron/preload.ts @@ -2,5 +2,6 @@ import { generateContextBridge } from "./IPC/General/contextBridge" import systemInfo from "./IPC/systemInfo"; import updaterInfo from './IPC/updaterInfo'; +import windowControls from './IPC/windowControls' -generateContextBridge([systemInfo, updaterInfo]); +generateContextBridge([systemInfo, updaterInfo, windowControls]); diff --git a/src/frontend/App.svelte b/src/frontend/App.svelte index d7e17f4..83f3dbe 100644 --- a/src/frontend/App.svelte +++ b/src/frontend/App.svelte @@ -2,27 +2,30 @@ import "./css/tailwind.pcss"; import Version from "./Components/Version.svelte"; import InfoElectron from "./Components/InfoElectron.svelte"; + import MainWithTitlebar from "./Components/MainWithTitlebar.svelte"; export let name: string; -
-

Hello {name}!

-

- Visit the Svelte tutorial to learn how to build Svelte apps. -

-

- Visit the Repository to view the source code. -

- - -
+ +
+

Hello {name}!

+

+ Visit the Svelte tutorial to learn how to build Svelte apps. +

+

+ Visit the Repository to view the source code. +

+ + +
+ diff --git a/src/frontend/css/tailwind.pcss b/src/frontend/css/tailwind.pcss index 0450fd2..ca89c0a 100644 --- a/src/frontend/css/tailwind.pcss +++ b/src/frontend/css/tailwind.pcss @@ -4,12 +4,15 @@ /** Modify your Tailwind layers etc. here **/ @layer base { + * { + @apply m-0 p-0 border-0 align-baseline; + } html, body { - @apply relative w-full h-full; + @apply flex relative w-full h-full m-0 box-border text-gray-900; } body { - @apply text-gray-800 m-0 box-border p-4; + @apply overflow-y-hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }