Add theme info modal

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",

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<void> {
         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

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<void> {
             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;

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;
+            }
         </style>
     </head>
 
@@ -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]"
             />
             <img id="download" src="https://raw.githubusercontent.com/ArmCord/BrandingStuff/main/Download.png" />
         </div>
         <br />
+        <div id="themeInfoModal" class="modal">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <span class="close">&times;</span>
+                    <h2 id="themeInfoName">Theme</h2>
+                </div>
+                <div id="themeInfoDesc" class="modal-body"></div>
+                <div id="themeInfoButtons" class="modal-footer"></div>
+            </div>
+        </div>
         <div class="cards" id="cardBox"></div>
     </body>
 </html>

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",
         `
         <div class="card">
             <div class="flex-box">
-                <h3>${manifest.name}</h3>
-                <input id="${manifest.name.replace(" ", "-")}" class="tgl tgl-light left" type="checkbox" />
-                <label class="tgl-btn left" for="${manifest.name.replace(" ", "-")}"></label>
+                <h3 id="${id + "header"}">${manifest.name}</h3>
+                <input id="${id}" class="tgl tgl-light left" type="checkbox" />
+                <label class="tgl-btn left" for="${id}"></label>
             </div>
             <p>${manifest.description}</p>
 
         </div>
         `
     );
-
-    if (!ipcRenderer.sendSync("disabled").includes(manifest.name.replace(" ", "-"))) {
-        (<HTMLInputElement>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 += `<a href="${manifest.source}" class="button">Source code</a>`;
+        if (manifest.website != undefined)
+            document.getElementById(
+                "themeInfoButtons"
+            )!.innerHTML += `<a href="${manifest.website}" class="button">Website</a>`;
+        if (manifest.invite != undefined)
+            document.getElementById("themeInfoButtons")!.innerHTML += `<a href="${
+                "https://discord.gg/" + manifest.invite
+            }" class="button">Support Discord</a>`;
+    });
+    if (!ipcRenderer.sendSync("disabled").includes(id)) {
+        (<HTMLInputElement>document.getElementById(id)).checked = true;
     }
-    (<HTMLInputElement>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(" ", "-"));
-            }
+    (<HTMLInputElement>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", (<HTMLInputElement>document.getElementById("themeLink"))!.value);
     });