lightcordwarez
/
BetterDiscordApp-rauenzi
mirror of https://github.com/rauenzi/BetterDiscordApp.git
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

Enable theme setting notes

This commit is contained in:
Zack Rauen 2023-09-02 16:59:52 -04:00
parent e0787a8816
commit 363c11c2ba
6 changed files with 35 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
renderer/src/modules/thememanager.js
View File

@ -80,16 +80,18 @@ export default new class ThemeManager extends AddonManager {
if (!match || match.length !== 5) continue;
const type = match[1];
const variable = match[2];
const name = match[3];
const label = match[3].split(":");
const name = label[0].trim();
const note = label[1]?.trim();
const value = match[4];
if (type === "checkbox") variables.push({type: "switch", id: variable, name: name, value: parseInt(value) === 1});
if (type === "text") variables.push({type: "text", id: variable, name: name, value: value});
if (type === "color") variables.push({type: "color", id: variable, name: name, value: value, defaultValue: value});
if (type === "checkbox") variables.push({type: "switch", id: variable, name: name, note: note, value: parseInt(value) === 1});
if (type === "text") variables.push({type: "text", id: variable, name: name, note: note, value: value});
if (type === "color") variables.push({type: "color", id: variable, name: name, note: note, value: value, defaultValue: value});
if (type === "number" || type === "range") {
// [default, min, max, step, units]
const parsed = JSON.parse(value);
variables.push({type: type === "number" ? type : "slider", id: variable, name: name, value: parsed[0], min: parsed[1], max: parsed[2], step: parsed[3]});
variables.push({type: type === "number" ? type : "slider", id: variable, name: name, note: note, value: parsed[0], min: parsed[1], max: parsed[2], step: parsed[3]});
}
if (type === "select") {
const parsed = JSON.parse(value);
@ -103,10 +105,11 @@ export default new class ThemeManager extends AddonManager {
selected = parsed[selected];
options = Object.entries(parsed).map(a => ({label: a[0].replace("*", ""), value: a[1]}));
}
variables.push({type: "dropdown", id: variable, name: name, options: options, value: selected || options[0].value});
variables.push({type: "dropdown", id: variable, name: name, note: note, options: options, value: selected || options[0].value});
}
}
metaInfo.var = variables;
metaInfo.instance = {getSettingsPanel: this.getThemeSettingsPanel(metaInfo.name, metaInfo.var)};
return metaInfo;
}
@ -174,9 +177,11 @@ export default new class ThemeManager extends AddonManager {
buildCSSVars(idOrAddon) {
const addon = typeof(idOrAddon) == "string" ? this.addonList.find(p => p.id == idOrAddon) : idOrAddon;
const lines = [`:root {`];
for (const v of addon.var) {
const value = typeof(v.value) === "boolean" ? v.value ? 1 : 0 : v.value;
lines.push(` --${v.id}: ${value};`);
if (Array.isArray(addon.var)) {
for (const v of addon.var) {
const value = typeof(v.value) === "boolean" ? v.value ? 1 : 0 : v.value;
lines.push(` --${v.id}: ${value};`);
}
}
lines.push(`}`);
return lines.join("\n");

8
renderer/src/styles/ui/modal.css
View File

@ -85,6 +85,12 @@
max-height: 100%;
}
.bd-modal-root > div[role="dialog"] {
display: flex;
flex-direction: column;
height: 100%;
}
.bd-close-button {
height: 26px;
padding: 4px;
@ -118,7 +124,7 @@
.bd-modal-medium {
width: 600px;
max-height: 800px;
min-height: 400px;
min-height: 200px;
}
.bd-modal-large {

18
renderer/src/ui/modals.js
View File

@ -40,10 +40,6 @@ export default class Modals {
}
static get ModalQueue() {return this._ModalQueue ??= [];}
static get ConfirmationModal() {return this._ConfirmationModal ??= WebpackModules.getModule(m => m?.toString?.()?.includes(".confirmButtonColor"), {searchExports: true}) ?? ConfirmationModal;}
static get ModalRoot() {return this._ModalRoot ??= WebpackModules.getModule(m => m?.toString?.()?.includes("ENTERING") && m?.toString?.()?.includes("headerId"), {searchExports: true}) ?? ModalRoot;}
static get ModalComponents() {return this._ModalComponents ??= WebpackModules.getByProps("Header", "Footer");}
static get Buttons() {return this._Buttons ??= WebpackModules.getModule(m => m.BorderColors, {searchExports: true});}
static async initialize() {
const names = ["ModalActions"];
@ -198,10 +194,9 @@ export default class Modals {
].filter(Boolean));
});
}
}, React.createElement(this.ConfirmationModal, Object.assign({
}, React.createElement(ConfirmationModal, Object.assign({
header: title,
danger: danger ? this.Buttons.Colors.RED : this.Buttons.Colors.BRAND,
confirmButtonColor: danger ? this.Buttons.Colors.RED : this.Buttons.Colors.BRAND,
danger: danger,
confirmText: confirmText,
cancelText: cancelText,
onConfirm: onConfirm,
@ -268,16 +263,15 @@ export default class Modals {
if (typeof(child) === "function") child = React.createElement(child);
const options = {
className: "bd-addon-modal " + this.ModalComponents.Sizes.MEDIUM ?? this.ModalRoot.Sizes.MEDIUM,
size: this.ModalComponents.Sizes.MEDIUM ?? this.ModalRoot.Sizes.MEDIUM,
className: "bd-addon-modal",
size: ModalRoot.Sizes.MEDIUM,
header: `${name} Settings`,
cancelText: null,
confirmText: Strings.Modals.done,
confirmButtonColor: this.Buttons.Colors.BRAND
confirmText: Strings.Modals.done
};
return this.openModal(props => {
return React.createElement(ErrorBoundary, null, React.createElement(this.ConfirmationModal, Object.assign(options, props), child));
return React.createElement(ErrorBoundary, null, React.createElement(ConfirmationModal, Object.assign(options, props), child));
});
}

5
renderer/src/ui/modals/root.jsx
View File

@ -19,6 +19,9 @@ export const Styles = Object.freeze({
});
const FocusLock = WebpackModules.getModule(m => m?.render?.toString().includes("impressionProperties") && m?.render?.toString().includes(".Provider"), {searchExports: true}) ?? React.Fragment;
export default function ModalRoot({className, transitionState, children, size = Sizes.DYNAMIC, style = Styles.CUSTOM}) {
const visible = transitionState == 0 || transitionState == 1; // 300 ms
// const visible = transitionState;
@ -36,7 +39,9 @@ export default function ModalRoot({className, transitionState, children, size =
className={Utilities.className("bd-modal-root", size, className, style)}
style={springStyles}
>
<FocusLock disableTrack={true}>
{children}
</FocusLock>
</Spring.animated.div>;
// const [visible, setVisible] = React.useState(true);

5
renderer/src/ui/settings/addonlist.jsx
View File

@ -3,7 +3,6 @@ import Strings from "@modules/strings";
import Events from "@modules/emitter";
import DataStore from "@modules/datastore";
import DiscordModules from "@modules/discordmodules";
import ThemeManager from "@modules/thememanager";
import Button from "../base/button";
import SettingsTitle from "./title";
@ -155,8 +154,8 @@ export default function AddonList({prefix, type, title, folder, addonList, addon
}
return sorted.map(addon => {
const hasSettings = (addon.var && addon.var.length) || (addon.instance && typeof(addon.instance.getSettingsPanel) === "function");
const getSettings = hasSettings && (addon.var ? ThemeManager.getThemeSettingsPanel(addon.id, addon.var) : addon.instance.getSettingsPanel.bind(addon.instance));
const hasSettings = addon.instance && typeof(addon.instance.getSettingsPanel) === "function";
const getSettings = hasSettings && addon.instance.getSettingsPanel.bind(addon.instance);
return <ErrorBoundary><AddonCard disabled={addon.partial} type={type} editAddon={() => triggerEdit(addon.id)} deleteAddon={() => triggerDelete(addon.id)} key={addon.id} enabled={addonState[addon.id]} addon={addon} onChange={onChange} reload={reload} hasSettings={hasSettings} getSettingsPanel={getSettings} /></ErrorBoundary>;
});
}, [addonList, addonState, onChange, reload, triggerDelete, triggerEdit, type, sort, ascending, query, forced]); // eslint-disable-line react-hooks/exhaustive-deps

2
renderer/src/ui/settings/components/item.jsx
View File

@ -7,7 +7,7 @@ export default function SettingItem({id, name, note, inline, children}) {
<label htmlFor={id} className={"bd-setting-title"}>{name}</label>
{inline && children}
</div>
<div className={"bd-setting-note"}>{note}</div>
{note && <div className={"bd-setting-note"}>{note}</div>}
{!inline && children}
<div className={"bd-setting-divider"} />
</div>;