From 1dbf3e90a4f8f180354cd8ae0f78120f630eb53d Mon Sep 17 00:00:00 2001 From: Strencher <46447572+Strencher@users.noreply.github.com> Date: Sun, 23 Jan 2022 10:23:25 +0100 Subject: [PATCH] Fix broken classNames (#1174) * Fix broken classNames * Remove old title classNames --- renderer/src/modules/componentpatcher.js | 3 +- renderer/src/modules/discordclasses.js | 59 ++++++++++++++++++++++ renderer/src/modules/modules.js | 3 +- renderer/src/structs/classname.js | 59 ++++++++++++++++++++++ renderer/src/styles/index.css | 6 +++ renderer/src/styles/ui/bdsettings.css | 16 ++++++ renderer/src/ui/addonerrormodal.jsx | 18 +++---- renderer/src/ui/blankslates/emptyimage.jsx | 10 ++-- renderer/src/ui/settings/title.jsx | 4 +- 9 files changed, 159 insertions(+), 19 deletions(-) create mode 100644 renderer/src/modules/discordclasses.js create mode 100644 renderer/src/structs/classname.js diff --git a/renderer/src/modules/componentpatcher.js b/renderer/src/modules/componentpatcher.js index ea66204e..f25417e9 100644 --- a/renderer/src/modules/componentpatcher.js +++ b/renderer/src/modules/componentpatcher.js @@ -1,6 +1,7 @@ import {Config} from "data"; import WebpackModules from "./webpackmodules"; import DiscordModules from "./discordmodules"; +import DiscordClasses from "./discordclasses"; import Utilities from "./utilities"; import Patcher from "./patcher"; import BDLogo from "../ui/icons/bdlogo"; @@ -67,7 +68,7 @@ export default new class ComponentPatcher { children[children.length - 2].type = newOne; } - const additional = DiscordModules.React.createElement("div", {className: "colorMuted-HdFt4q size12-3cLvbJ"}, `BetterDiscord ${Config.version}`); + const additional = DiscordModules.React.createElement("div", {className: `${DiscordClasses.Text.colorMuted} ${DiscordClasses.Text.size12}`}, `BetterDiscord ${Config.version}`); const originalVersions = children[children.length - 1].type; diff --git a/renderer/src/modules/discordclasses.js b/renderer/src/modules/discordclasses.js new file mode 100644 index 00000000..e5d9e509 --- /dev/null +++ b/renderer/src/modules/discordclasses.js @@ -0,0 +1,59 @@ +import Utilities from "./utilities"; +import ClassName from "../structs/classname"; +import WebpackModules from "./webpackmodules"; + +const combineClasses = function (...props) { + return Object.assign({}, ...props.map(prop => WebpackModules.getByProps(...prop))); +}; + +const DiscordClassModules = Utilities.memoizeObject({ + get Divider() { + const toolbar = WebpackModules.getByProps("divider", "toolbar"); + const discovery = WebpackModules.getByProps("divider", "emptyGuilds"); + + return { + verticalDivider: toolbar.divider, + dividerLarge: discovery.divider, + divider: "bd-divider" + }; + }, + get Text() { + return combineClasses( + ["size20", "size12"], + ["selectable", "colorMuted"] + ); + }, + get Titles() { + return combineClasses( + ["wrapper", "base"], + ["defaultColor", "h4"] + ); + }, + get EmptyImage() {return WebpackModules.getByProps("emptyImage", "emptyHeader");}, + get Modal() {return WebpackModules.getByProps("content", "root", "header");}, + get Scrollers() {return WebpackModules.getByProps("thin", "scrollerBase", "content");}, + get Margins() {return WebpackModules.getByProps("marginXSmall", "marginBottom8");}, + get Integrations() {return WebpackModules.getByProps("secondaryHeader", "detailsWrapper");}, + get Card() {return WebpackModules.getByProps("card", "topDivider", "description");}, +}); + +const emptyClassModule = new Proxy({}, { + get() {return "";} +}); + +const DiscordClasses = new Proxy(DiscordClassModules, { + get(list, item) { + if (list[item] === undefined) return emptyClassModule; + if (typeof(list[item]) === "string") return list[item]; + + return new Proxy(list[item], { + get(obj, prop) { + if (!Reflect.has(obj, prop)) return ""; + + return new ClassName(obj[prop]); + } + }); + } +}); + +export default DiscordClasses; \ No newline at end of file diff --git a/renderer/src/modules/modules.js b/renderer/src/modules/modules.js index a3a3868a..359535f8 100644 --- a/renderer/src/modules/modules.js +++ b/renderer/src/modules/modules.js @@ -16,4 +16,5 @@ export {default as ReactComponents} from "./reactcomponents"; export {default as LocaleManager} from "./localemanager"; export {default as Strings} from "./strings"; export {default as IPC} from "./ipc"; -export {default as Logger} from "common/logger"; \ No newline at end of file +export {default as Logger} from "common/logger"; +export {default as DiscordClasses} from "./discordclasses"; \ No newline at end of file diff --git a/renderer/src/structs/classname.js b/renderer/src/structs/classname.js new file mode 100644 index 00000000..947b8bab --- /dev/null +++ b/renderer/src/structs/classname.js @@ -0,0 +1,59 @@ +// import Selector from "./selector"; + +/** + * Representation of a Class Name + * @memberof module:DOMTools + **/ +class ClassName { + /** + * + * @param {string} name - name of the class to represent + */ + constructor(name) { + this.value = name; + } + + /** + * Concatenates new class names to the current one using spaces. + * @param {string} classNames - list of class names to add to this class name + * @returns {ClassName} returns self to allow chaining + */ + add(...classNames) { + for (let i = 0; i < classNames.length; i++) this.value += " " + classNames[i]; + return this; + } + + /** + * Returns the raw class name, this is how native function get the value. + * @returns {string} raw class name. + */ + toString() { + return this.value; + } + + /** + * Returns the raw class name, this is how native function get the value. + * @returns {string} raw class name. + */ + valueOf() { + return this.value; + } + + // /** + // * Returns the classname represented as {@link module:DOMTools.Selector}. + // * @returns {Selector} selector representation of this class name. + // */ + // get selector() { + // return new Selector(this.value); + // } + + get single() { + return this.value.split(" ")[0]; + } + + get first() { + return this.value.split(" ")[0]; + } +} + +export default ClassName; \ No newline at end of file diff --git a/renderer/src/styles/index.css b/renderer/src/styles/index.css index cb0f0415..c47a59d0 100644 --- a/renderer/src/styles/index.css +++ b/renderer/src/styles/index.css @@ -42,4 +42,10 @@ .bd-link:hover { text-decoration: underline; +} + +.bd-divider { + width: 100%; + height: 1px; + border-top: thin solid hsl(0deg 0% 100% / 6%); } \ No newline at end of file diff --git a/renderer/src/styles/ui/bdsettings.css b/renderer/src/styles/ui/bdsettings.css index 366f2396..6605c35f 100644 --- a/renderer/src/styles/ui/bdsettings.css +++ b/renderer/src/styles/ui/bdsettings.css @@ -204,8 +204,24 @@ margin-top: 0; } +.bd-settings-title { + color: #ffffff; + font-weight: 600; + cursor: default; + flex: 1; +} + +.bd-settings-title:not(.bd-settings-group-title) { + margin-bottom: 20px; + font-size: 20px; + line-height: 24px; +} + .bd-settings-title.bd-settings-group-title { margin-bottom: 10px; + text-transform: uppercase; + font-size: 14px; + color: var(--interactive-normal); } .checkbox-item { diff --git a/renderer/src/ui/addonerrormodal.jsx b/renderer/src/ui/addonerrormodal.jsx index f8c43801..96e1360d 100644 --- a/renderer/src/ui/addonerrormodal.jsx +++ b/renderer/src/ui/addonerrormodal.jsx @@ -1,4 +1,4 @@ -import {React, Strings, WebpackModules} from "modules"; +import {React, Strings, WebpackModules, DiscordClasses} from "modules"; import Extension from "./icons/extension"; import ThemeIcon from "./icons/theme"; @@ -21,7 +21,7 @@ class AddonError extends React.Component { const stack = err.error && err.stack; if (!this.state.expanded || !stack) return null; return
-
+
{Parser ? Parser.codeBlock.react({content: stack, lang: "js"}, null, {}) : stack}
@@ -35,12 +35,12 @@ class AddonError extends React.Component { {err.type == "plugin" ? : }
-

{err.name}

-
- +

{err.name}

+
+ -
{err.message}
+
{err.message}
@@ -102,13 +102,13 @@ export default class AddonErrorModal extends React.Component { const selectedTab = this.getTabs().find(e => this.state.selectedTab === e.id); const tabs = this.getTabs(); return <> -
-

{Strings.Modals.addonErrors}

+
+

{Strings.Modals.addonErrors}

{tabs.map(tab =>
{this.switchToTab(tab.id);}} className={joinClassNames("bd-tab-item", tab.id === selectedTab.id && "selected")}>{tab.name}
)}
-
+
{selectedTab.errors.map((error, index) => )}
diff --git a/renderer/src/ui/blankslates/emptyimage.jsx b/renderer/src/ui/blankslates/emptyimage.jsx index 7cc09b00..fa1d5891 100644 --- a/renderer/src/ui/blankslates/emptyimage.jsx +++ b/renderer/src/ui/blankslates/emptyimage.jsx @@ -1,13 +1,11 @@ -import {React, WebpackModules} from "modules"; +import {React, DiscordClasses} from "modules"; import SimpleMarkdown from "../../structs/markdown"; -const EmptyImageClasses = WebpackModules.getByProps("emptyImage") || {}; - export default class EmptyImage extends React.Component { render() { - return
-
-
+ return
+
+
{this.props.title || "You don't have anything!"}
diff --git a/renderer/src/ui/settings/title.jsx b/renderer/src/ui/settings/title.jsx index 5d0079f3..53f33a03 100644 --- a/renderer/src/ui/settings/title.jsx +++ b/renderer/src/ui/settings/title.jsx @@ -1,7 +1,7 @@ import {React} from "modules"; -const className = "bd-settings-title h2-2gWE-o title-3sZWYQ size16-14cGz5 height20-mO2eIN weightSemiBold-NJexzi defaultColor-1_ajX0 defaultMarginh2-2LTaUL marginBottom20-32qID7"; -const className2 = "bd-settings-title bd-settings-group-title h5-18_1nd title-3sZWYQ size12-3R0845 height16-2Lv3qA weightSemiBold-NJexzi da-h5 da-title da-size12 da-height16 da-weightSemiBold marginBottom4-2qk4Hy da-marginBottom4 marginTop8-1DLZ1n da-marginTop8"; +const className = "bd-settings-title"; +const className2 = "bd-settings-title bd-settings-group-title"; export default class SettingsTitle extends React.Component { render() {