Add theme info modal
This commit is contained in:
smartfrigde
parent
a5471bc35a
commit
4f31bcb32e
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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">×</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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue