Add theme info modal

This commit is contained in:
smartfrigde 2023-05-14 13:42:15 +02:00
parent a5471bc35a
commit 4f31bcb32e
5 changed files with 169 additions and 21 deletions

View file

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

View file

@ -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

View file

@ -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;

View file

@ -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>

View file

@ -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);
});