From 4f31bcb32ea1770c76b9c892108b37e445beeeaf Mon Sep 17 00:00:00 2001 From: smartfrigde <37928912+smartfrigde@users.noreply.github.com> Date: Sun, 14 May 2023 13:42:15 +0200 Subject: [PATCH] Add theme info modal --- package.json | 1 + src/main.ts | 5 ++ src/themeManager/main.ts | 17 ++++- src/themeManager/manager.html | 116 +++++++++++++++++++++++++++++++++- src/themeManager/preload.ts | 51 ++++++++++----- 5 files changed, 169 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 2e270d3..3cff3c2 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "build": "tsc && copyfiles -u 1 src/**/*.html src/**/**/*.css src/**/**/*.js ts-out/ && copyfiles package.json ts-out/ && copyfiles assets/**/** ts-out/", "watch": "tsc -w", "start": "npm run build && electron ./ts-out/main.js", + "startThemeManager": "npm run build && electron ./ts-out/main.js themes", "startWayland": "npm run build && electron ./ts-out/main.js --ozone-platform-hint=auto --enable-features=WebRTCPipeWireCapturer", "package": "npm run build && electron-builder", "packageQuick": "npm run build && electron-builder --dir", diff --git a/src/main.ts b/src/main.ts index 7b2bc44..60bf086 100644 --- a/src/main.ts +++ b/src/main.ts @@ -14,6 +14,7 @@ import "./extensions/mods"; import "./tray"; import {createCustomWindow, createNativeWindow, createTransparentWindow} from "./window"; import path from "path"; +import {createTManagerWindow} from "./themeManager/main"; export let iconPath: string; export let settings: any; export let customTitlebar: boolean; @@ -29,6 +30,10 @@ async function args(): Promise { console.log(`Setting ${e[0]} to ${e[1]}`); app.relaunch(); app.exit(); + } else if (args == "themes") { + app.whenReady().then(async () => { + createTManagerWindow(); + }); } } args(); // i want my top level awaits diff --git a/src/themeManager/main.ts b/src/themeManager/main.ts index 12e85bb..cf82fc3 100644 --- a/src/themeManager/main.ts +++ b/src/themeManager/main.ts @@ -2,7 +2,7 @@ import {BrowserWindow, app, ipcMain, shell, dialog} from "electron"; import {sleep} from "../utils"; import path from "path"; import fs from "fs"; -import {mainWindow} from "../window"; +import {createInviteWindow, mainWindow} from "../window"; let themeWindow: BrowserWindow; let instance = 0; interface ThemeManifest { @@ -108,6 +108,19 @@ export function createTManagerWindow(): void { preload: path.join(__dirname, "preload.js") } }); + //setWindowHandler doesn't work for some reason + themeWindow.webContents.on("will-navigate", function (e, url) { + /* If url isn't the actual page */ + if (url != themeWindow.webContents.getURL()) { + e.preventDefault(); + if (url.startsWith("https://discord.gg/")) { + createInviteWindow(url.replace("https://discord.gg/", "")); + } else { + shell.openExternal(url); + } + } + }); + async function managerLoadPage(): Promise { themeWindow.loadFile(`${__dirname}/manager.html`); } @@ -168,13 +181,13 @@ export function createTManagerWindow(): void { fs.readdirSync(themesFolder).forEach((file) => { try { const manifest = fs.readFileSync(`${themesFolder}/${file}/manifest.json`, "utf8"); - console.log(manifest); themeWindow.webContents.send("themeManifest", manifest); } catch (err) { console.error(err); } }); }); + managerLoadPage(); themeWindow.on("close", () => { instance = 0; diff --git a/src/themeManager/manager.html b/src/themeManager/manager.html index 3acb186..b7baff6 100644 --- a/src/themeManager/manager.html +++ b/src/themeManager/manager.html @@ -23,7 +23,6 @@ body { padding: 1rem; - background: var(--background-secondary); } @@ -178,6 +177,109 @@ text-align: right; z-index: 99; } + + /* The Modal (background) */ + .modal { + display: none; + /* Hidden by default */ + position: fixed; + /* Stay in place */ + z-index: 1; + /* Sit on top */ + padding-top: 100px; + /* Location of the box */ + background-color: var(--background-secondary); + left: 0; + top: 0; + width: 100%; + /* Full width */ + height: 100%; + /* Full height */ + overflow: auto; + /* Enable scroll if needed */ + background-color: rgb(0, 0, 0); + /* Fallback color */ + background-color: rgba(0, 0, 0, 0.4); + /* Black w/ opacity */ + } + + /* Modal Content */ + .modal-content { + position: relative; + margin: auto; + padding: 1rem; + background-color: var(--background-secondary); + border-color: var(--background-floating); + border-style: solid; + border-radius: 10px; + width: 80%; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + -webkit-animation-name: animatetop; + -webkit-animation-duration: 0.4s; + animation-name: animatetop; + animation-duration: 0.4s; + } + + /* Add Animation */ + @-webkit-keyframes animatetop { + from { + top: -300px; + opacity: 0; + } + + to { + top: 0; + opacity: 1; + } + } + + @keyframes animatetop { + from { + top: -300px; + opacity: 0; + } + + to { + top: 0; + opacity: 1; + } + } + + /* The Close Button */ + .close { + color: white; + float: right; + font-size: 28px; + font-weight: bold; + } + + .close:hover, + .close:focus { + color: red; + text-decoration: none; + cursor: pointer; + } + + .modal-header { + padding: 2px 16px; + color: white; + } + + .modal-body { + padding: 2px 16px; + color: white; + } + + .modal-footer { + padding: 2px 16px; + color: white; + } + a.button { + color: var(--brand-experiment-560); + } + .button { + margin-right: 10px; + } @@ -188,11 +290,21 @@ id="themeLink" name="themeLink" title="BetterDiscord theme format" - placeholder="https://raw.githubusercontent.com/... [.css]" + placeholder="https://raw.githubusercontent.com/... [.theme.css]" />
+
diff --git a/src/themeManager/preload.ts b/src/themeManager/preload.ts index d33c777..09016e3 100644 --- a/src/themeManager/preload.ts +++ b/src/themeManager/preload.ts @@ -5,38 +5,55 @@ ipcRenderer.on("themeManifest", (_event, json) => { console.log(manifest); sleep(1000); var e = document.getElementById("cardBox"); - + var id = manifest.name.replace(" ", "-"); e?.insertAdjacentHTML( "beforeend", `
-

${manifest.name}

- - +

${manifest.name}

+ +

${manifest.description}

` ); - - if (!ipcRenderer.sendSync("disabled").includes(manifest.name.replace(" ", "-"))) { - (document.getElementById(manifest.name.replace(" ", "-"))).checked = true; + document.getElementById(id + "header")!.addEventListener("click", () => { + document.getElementById("themeInfoModal")!.style.display = "block"; + document.getElementById("themeInfoName")!.textContent = `${manifest.name} by ${manifest.author}`; + document.getElementById("themeInfoDesc")!.textContent = manifest.description + "\n\n" + manifest.version; + if (manifest.source != undefined) + document.getElementById( + "themeInfoButtons" + )!.innerHTML += `Source code`; + if (manifest.website != undefined) + document.getElementById( + "themeInfoButtons" + )!.innerHTML += `Website`; + if (manifest.invite != undefined) + document.getElementById("themeInfoButtons")!.innerHTML += `Support Discord`; + }); + if (!ipcRenderer.sendSync("disabled").includes(id)) { + (document.getElementById(id)).checked = true; } - (document.getElementById(manifest.name.replace(" ", "-")))!.addEventListener( - "input", - function (evt) { - ipcRenderer.send("reloadMain"); - if (this.checked) { - ipcRenderer.send("removeFromDisabled", manifest.name.replace(" ", "-")); - } else { - ipcRenderer.send("addToDisabled", manifest.name.replace(" ", "-")); - } + (document.getElementById(id))!.addEventListener("input", function (evt) { + ipcRenderer.send("reloadMain"); + if (this.checked) { + ipcRenderer.send("removeFromDisabled", id); + } else { + ipcRenderer.send("addToDisabled", id); } - ); + }); }); document.addEventListener("DOMContentLoaded", () => { + document.getElementsByClassName("close")[0].addEventListener("click", () => { + document.getElementById("themeInfoModal")!.style.display = "none"; + document.getElementById("themeInfoButtons")!.innerHTML = ""; + }); document.getElementById("download")!.addEventListener("click", () => { ipcRenderer.send("installBDTheme", (document.getElementById("themeLink"))!.value); });