From 7e40949fc874108e8e7b9ffde5f65bfb54a8736c Mon Sep 17 00:00:00 2001 From: talksik Date: Fri, 27 May 2022 20:30:43 -0500 Subject: [PATCH] adding styling and other things basic like constants for electron --- packages/desktop/src/app.tsx | 2 +- packages/desktop/src/electron/constants.ts | 33 +++++++++++++++ packages/desktop/src/electron/global.d.ts | 22 ++++++++++ packages/desktop/src/electron/preload.ts | 48 ++++++++++++++++++++++ packages/desktop/src/index.css | 18 +++++--- packages/desktop/src/index.html | 12 ++++-- packages/desktop/src/index.ts | 7 ++-- 7 files changed, 130 insertions(+), 12 deletions(-) create mode 100644 packages/desktop/src/electron/constants.ts create mode 100644 packages/desktop/src/electron/global.d.ts create mode 100644 packages/desktop/src/electron/preload.ts diff --git a/packages/desktop/src/app.tsx b/packages/desktop/src/app.tsx index e9f37fa..a90632e 100644 --- a/packages/desktop/src/app.tsx +++ b/packages/desktop/src/app.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import ReactDOM from "react-dom/client"; -const root = ReactDOM.createRoot(document.body as HTMLElement); +const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); root.render( diff --git a/packages/desktop/src/electron/constants.ts b/packages/desktop/src/electron/constants.ts new file mode 100644 index 0000000..d6c5a4d --- /dev/null +++ b/packages/desktop/src/electron/constants.ts @@ -0,0 +1,33 @@ +// NOTE: DO NOT ADD ANY ELECTRON RELATED TYPESCRIPT HERE...KEEP IT ONLY TYPESCRIPT OTHERWISE +// THE RENDERER WONT BE ABLE TO ACCESS THIS AS IT WILL THINK ITS PART OF MAIN PROCESS SINCE RENDERER CAN'T ACCESS NODE STUFF +// SINCE IT's NOT A NODE PROCESS + +enum Channels { + ACTIVATE_LOG_IN = 'ACTIVATE_LOG_IN', + GOOGLE_AUTH_TOKENS = 'GOOGLE_AUTH_TOKENS', + RESIZE_WINDOW = 'RESIZE_WINDOW', + ON_WINDOW_BLUR = 'ON_WINDOW_BLUR', + ON_WINDOW_FOCUS = 'ON_WINDOW_FOCUS', +} + +export enum STORE_ITEMS { + AUTH_SESSION_JWT = 'AUTH_SESSION_JWT', +} + +export type Dimensions = { height: number; width: number }; + +export interface DimensionChangeRequest { + setAlwaysOnTop: boolean; + setPosition?: 'topRight' | 'center'; + dimensions: Dimensions; + addDimensions: boolean; +} + +export const DEFAULT_APP_PRESET: Dimensions = { height: 750, width: 1210 }; + +export const OVERLAY_ONLY_INITIAL_PRESET: Dimensions = { + height: 50, + width: 325, +}; + +export default Channels; diff --git a/packages/desktop/src/electron/global.d.ts b/packages/desktop/src/electron/global.d.ts new file mode 100644 index 0000000..bdd23e5 --- /dev/null +++ b/packages/desktop/src/electron/global.d.ts @@ -0,0 +1,22 @@ +import { Dimensions, DimensionChangeRequest } from "./constants"; +import { electronAPI } from "./preload"; + +export {}; +declare global { + interface Window { + electronAPI: { + auth: { + initiateLogin(): void; + }; + store: { + get(val: STORE_ITEMS): Promise; + set(property: STORE_ITEMS, val: any): void; + }; + window: { + resizeWindow(dimensionChangeRequest: DimensionChangeRequest): void; + }; + on(channel: Channels, func: any): void; + once(channel: Channels, func: any): void; + }; + } +} diff --git a/packages/desktop/src/electron/preload.ts b/packages/desktop/src/electron/preload.ts new file mode 100644 index 0000000..c4a8cbd --- /dev/null +++ b/packages/desktop/src/electron/preload.ts @@ -0,0 +1,48 @@ +import Channels, { Dimensions, STORE_ITEMS } from './constants'; +import { contextBridge, ipcRenderer } from 'electron'; + +const electronAPI = { + auth: { + initiateLogin() { + ipcRenderer.send(Channels.ACTIVATE_LOG_IN); + }, + }, + store: { + get(val: STORE_ITEMS) { + return ipcRenderer.invoke('electron-store-get', val); + }, + set(property: STORE_ITEMS, val: any) { + ipcRenderer.send('electron-store-set', property, val); + }, + // Other method you want to add like has(), reset(), etc. + }, + + window: { + resizeWindow(newDimensions: Dimensions) { + ipcRenderer.send(Channels.RESIZE_WINDOW, newDimensions); + }, + }, + + on(channel: Channels, func: any) { + const validChannels = ['ipc-example']; + // if (validChannels.includes(channel)) { + // // Deliberately strip event as it includes `sender` + // ipcRenderer.on(channel, (event, ...args) => func(...args)); + // } + + ipcRenderer.on(channel, (event, ...args) => func(...args)); + }, + once(channel: Channels, func: any) { + // const validChannels = ["ipc-example"]; + // if (validChannels.includes(channel)) { + // // Deliberately strip event as it includes `sender` + // ipcRenderer.once(channel, (event, ...args) => func(...args)); + // } + + ipcRenderer.once(channel, (event, ...args) => func(...args)); + }, +}; + +contextBridge.exposeInMainWorld('electronAPI', electronAPI); + +export default electronAPI; diff --git a/packages/desktop/src/index.css b/packages/desktop/src/index.css index 8856f90..ef9791e 100644 --- a/packages/desktop/src/index.css +++ b/packages/desktop/src/index.css @@ -1,7 +1,15 @@ body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, - Arial, sans-serif; - margin: auto; - max-width: 38rem; - padding: 2rem; + display: flex; + flex-direction: column; + flex: 1; + + background: #00000000; +} + +#root { + height: inherit; + width: inherit; + display: flex; + padding: 0 !important; + font-family: 'IBM Plex Sans', sans-serif; } diff --git a/packages/desktop/src/index.html b/packages/desktop/src/index.html index 6f1c3d2..35f9c00 100644 --- a/packages/desktop/src/index.html +++ b/packages/desktop/src/index.html @@ -2,11 +2,17 @@ - Hello World! + Nirvana + + + + -

💖 Hello World!

-

Welcome to static html file before being replaced by react.

+
diff --git a/packages/desktop/src/index.ts b/packages/desktop/src/index.ts index 99fa399..4c2f094 100644 --- a/packages/desktop/src/index.ts +++ b/packages/desktop/src/index.ts @@ -1,4 +1,5 @@ import { app, BrowserWindow } from 'electron'; +import { DEFAULT_APP_PRESET } from './electron/constants'; // This allows TypeScript to pick up the magic constant that's auto-generated by Forge's Webpack // plugin that tells the Electron app where to look for the Webpack-bundled app code (depending on // whether you're running in development or production). @@ -11,17 +12,17 @@ if (require('electron-squirrel-startup')) { } const createWindow = (): void => { + // Create the browser window. const mainWindow = new BrowserWindow({ - height: 600, - width: 800, + ...DEFAULT_APP_PRESET, }); // and load the index.html of the app. mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY); // Open the DevTools. - mainWindow.webContents.openDevTools(); + mainWindow.webContents.openDevTools({"mode": "detach"}); }; // This method will be called when Electron has finished