Fix settings, tooltips, modals (#1542)
* Lazy load sidebar header * Publish CSS * Swap to standalone header * Fix Tooltip component * Moves internal reference to the centralized DiscordModules.Tooltip component * Adds `BdApi.Components` namespace with the `Tooltip` component. * Add Components namespace to bound api * Fix modal root * Fix ContextMenu, Fix Modals --------- Co-authored-by: Strencher <46447572+Strencher@users.noreply.github.com>
This commit is contained in:
parent
99f8bc29a8
commit
f3b26fbd4d
|
@ -16,15 +16,18 @@ const MenuComponents = (() => {
|
||||||
customitem: "Item"
|
customitem: "Item"
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// exportKey:()=>identifier
|
||||||
|
const getExportIdentifier = (string, id) => new RegExp(`(\\w+):\\(\\)=>${id}`).exec(string)?.[1];
|
||||||
|
|
||||||
try {
|
try {
|
||||||
let contextMenuId = Object.keys(WebpackModules.require.m).find(e => WebpackModules.require.m[e]?.toString().includes("menuitemcheckbox"));
|
let contextMenuId = Object.keys(WebpackModules.require.m).find(e => WebpackModules.require.m[e]?.toString().includes("menuitemcheckbox"));
|
||||||
const ContextMenuModule = WebpackModules.getModule((m, t, id) => id === contextMenuId);
|
const ContextMenuModule = WebpackModules.getModule((m, t, id) => id === contextMenuId);
|
||||||
const rawMatches = WebpackModules.require.m[contextMenuId].toString().matchAll(/if\(\w+\.type===\w+\.(\w+)\).+?type:"(.+?)"/g);
|
const rawMatches = WebpackModules.require.m[contextMenuId].toString().matchAll(/if\(\w+\.type===(\w+)\)[\s\S]+?type:"(.+?)"/g);
|
||||||
|
const moduleString = WebpackModules.require.m[contextMenuId].toString();
|
||||||
out.Menu = Object.values(ContextMenuModule).find(v => v.toString().includes(".isUsingKeyboardNavigation"));
|
out.Menu = Object.values(ContextMenuModule).find(v => v.toString().includes(".isUsingKeyboardNavigation"));
|
||||||
|
|
||||||
for (const [, identifier, type] of rawMatches) {
|
for (const [, identifier, type] of rawMatches) {
|
||||||
out[componentMap[type]] = ContextMenuModule[identifier];
|
out[componentMap[type]] = ContextMenuModule[getExportIdentifier(moduleString, identifier)];
|
||||||
}
|
}
|
||||||
|
|
||||||
startupComplete = Object.values(componentMap).every(k => out[k]) && !!out.Menu;
|
startupComplete = Object.values(componentMap).every(k => out[k]) && !!out.Menu;
|
||||||
|
@ -55,7 +58,7 @@ const ContextMenuActions = (() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
startupComplete = typeof(out.closeContextMenu) === "function" && typeof(out.openContextMenu) === "function";
|
startupComplete &&= typeof(out.closeContextMenu) === "function" && typeof(out.openContextMenu) === "function";
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
startupComplete = false;
|
startupComplete = false;
|
||||||
Logger.stacktrace("ContextMenu~Components", "Fatal startup error:", error);
|
Logger.stacktrace("ContextMenu~Components", "Fatal startup error:", error);
|
||||||
|
|
|
@ -12,6 +12,7 @@ import Utils from "./utils";
|
||||||
import Webpack from "./webpack";
|
import Webpack from "./webpack";
|
||||||
import * as Legacy from "./legacy";
|
import * as Legacy from "./legacy";
|
||||||
import ContextMenu from "./contextmenu";
|
import ContextMenu from "./contextmenu";
|
||||||
|
import {DiscordModules} from "modules";
|
||||||
|
|
||||||
const bounded = new Map();
|
const bounded = new Map();
|
||||||
const PluginAPI = new AddonAPI(PluginManager);
|
const PluginAPI = new AddonAPI(PluginManager);
|
||||||
|
@ -53,6 +54,9 @@ export default class BdApi {
|
||||||
get UI() {return UI;}
|
get UI() {return UI;}
|
||||||
get ReactUtils() {return ReactUtils;}
|
get ReactUtils() {return ReactUtils;}
|
||||||
get ContextMenu() {return ContextMenuAPI;}
|
get ContextMenu() {return ContextMenuAPI;}
|
||||||
|
Components = {
|
||||||
|
get Tooltip() {return DiscordModules.Tooltip;}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add legacy functions
|
// Add legacy functions
|
||||||
|
@ -118,5 +122,10 @@ BdApi.DOM = DOMAPI;
|
||||||
*/
|
*/
|
||||||
BdApi.ContextMenu = ContextMenuAPI;
|
BdApi.ContextMenu = ContextMenuAPI;
|
||||||
|
|
||||||
|
BdApi.Components = {
|
||||||
|
get Tooltip() {return DiscordModules.Tooltip;}
|
||||||
|
};
|
||||||
|
|
||||||
Object.freeze(BdApi);
|
Object.freeze(BdApi);
|
||||||
Object.freeze(BdApi.prototype);
|
Object.freeze(BdApi.prototype);
|
||||||
|
Object.freeze(BdApi.Components);
|
||||||
|
|
|
@ -110,4 +110,4 @@ const Webpack = {
|
||||||
Object.freeze(Webpack);
|
Object.freeze(Webpack);
|
||||||
Object.freeze(Webpack.Filters);
|
Object.freeze(Webpack.Filters);
|
||||||
|
|
||||||
export default Webpack;
|
export default Webpack;
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import Utilities from "./utilities";
|
import Utilities from "./utilities";
|
||||||
import WebpackModules from "./webpackmodules";
|
import WebpackModules, {Filters} from "./webpackmodules";
|
||||||
|
|
||||||
export default Utilities.memoizeObject({
|
export default Utilities.memoizeObject({
|
||||||
get React() {return WebpackModules.getByProps("createElement", "cloneElement");},
|
get React() {return WebpackModules.getByProps("createElement", "cloneElement");},
|
||||||
|
@ -154,5 +154,12 @@ export default Utilities.memoizeObject({
|
||||||
return Object.assign({}, guildsWrapper, guilds, pill, listItem);
|
return Object.assign({}, guildsWrapper, guilds, pill, listItem);
|
||||||
},
|
},
|
||||||
|
|
||||||
get LayerStack() {return WebpackModules.getByProps("pushLayer");}
|
get LayerStack() {return WebpackModules.getByProps("pushLayer");},
|
||||||
|
|
||||||
|
get Tooltip() {
|
||||||
|
// Make fallback component just pass children, so it can at least render that.
|
||||||
|
const fallback = props => props.children?.({}) ?? null;
|
||||||
|
|
||||||
|
return WebpackModules.getModule(Filters.byPrototypeFields(["renderTooltip"]), {searchExports: true}) ?? fallback;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,8 +1,7 @@
|
||||||
import {React, WebpackModules, DiscordModules, Settings} from "modules";
|
import {React, DiscordModules, Settings} from "modules";
|
||||||
|
|
||||||
import Checkbox from "./checkbox";
|
import Checkbox from "./checkbox";
|
||||||
|
|
||||||
const Tooltip = WebpackModules.getByPrototypes("renderTooltip");
|
|
||||||
const ThemeStore = DiscordModules.ThemeStore;
|
const ThemeStore = DiscordModules.ThemeStore;
|
||||||
|
|
||||||
const languages = ["abap", "abc", "actionscript", "ada", "apache_conf", "asciidoc", "assembly_x86", "autohotkey", "batchfile", "bro", "c_cpp", "c9search", "cirru", "clojure", "cobol", "coffee", "coldfusion", "csharp", "csound_document", "csound_orchestra", "csound_score", "css", "curly", "d", "dart", "diff", "dockerfile", "dot", "drools", "dummy", "dummysyntax", "eiffel", "ejs", "elixir", "elm", "erlang", "forth", "fortran", "ftl", "gcode", "gherkin", "gitignore", "glsl", "gobstones", "golang", "graphqlschema", "groovy", "haml", "handlebars", "haskell", "haskell_cabal", "haxe", "hjson", "html", "html_elixir", "html_ruby", "ini", "io", "jack", "jade", "java", "javascript", "json", "jsoniq", "jsp", "jssm", "jsx", "julia", "kotlin", "latex", "less", "liquid", "lisp", "livescript", "logiql", "lsl", "lua", "luapage", "lucene", "makefile", "markdown", "mask", "matlab", "maze", "mel", "mushcode", "mysql", "nix", "nsis", "objectivec", "ocaml", "pascal", "perl", "pgsql", "php", "pig", "powershell", "praat", "prolog", "properties", "protobuf", "python", "r", "razor", "rdoc", "red", "rhtml", "rst", "ruby", "rust", "sass", "scad", "scala", "scheme", "scss", "sh", "sjs", "smarty", "snippets", "soy_template", "space", "sql", "sqlserver", "stylus", "svg", "swift", "tcl", "tex", "text", "textile", "toml", "tsx", "twig", "typescript", "vala", "vbscript", "velocity", "verilog", "vhdl", "wollok", "xml", "xquery", "yaml", "django"];
|
const languages = ["abap", "abc", "actionscript", "ada", "apache_conf", "asciidoc", "assembly_x86", "autohotkey", "batchfile", "bro", "c_cpp", "c9search", "cirru", "clojure", "cobol", "coffee", "coldfusion", "csharp", "csound_document", "csound_orchestra", "csound_score", "css", "curly", "d", "dart", "diff", "dockerfile", "dot", "drools", "dummy", "dummysyntax", "eiffel", "ejs", "elixir", "elm", "erlang", "forth", "fortran", "ftl", "gcode", "gherkin", "gitignore", "glsl", "gobstones", "golang", "graphqlschema", "groovy", "haml", "handlebars", "haskell", "haskell_cabal", "haxe", "hjson", "html", "html_elixir", "html_ruby", "ini", "io", "jack", "jade", "java", "javascript", "json", "jsoniq", "jsp", "jssm", "jsx", "julia", "kotlin", "latex", "less", "liquid", "lisp", "livescript", "logiql", "lsl", "lua", "luapage", "lucene", "makefile", "markdown", "mask", "matlab", "maze", "mel", "mushcode", "mysql", "nix", "nsis", "objectivec", "ocaml", "pascal", "perl", "pgsql", "php", "pig", "powershell", "praat", "prolog", "properties", "protobuf", "python", "r", "razor", "rdoc", "red", "rhtml", "rst", "ruby", "rust", "sass", "scad", "scala", "scheme", "scss", "sh", "sjs", "smarty", "snippets", "soy_template", "space", "sql", "sqlserver", "stylus", "svg", "swift", "tcl", "tex", "text", "textile", "toml", "tsx", "twig", "typescript", "vala", "vbscript", "velocity", "verilog", "vhdl", "wollok", "xml", "xquery", "yaml", "django"];
|
||||||
|
@ -108,11 +107,11 @@ export default class CodeEditor extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
makeButton(button) {
|
makeButton(button) {
|
||||||
return <Tooltip color="primary" position="top" text={button.tooltip}>
|
return <DiscordModules.Tooltip color="primary" position="top" text={button.tooltip}>
|
||||||
{props => {
|
{props => {
|
||||||
return <button {...props} className="btn btn-primary" onClick={(event) => {button.onClick(event, this.value);}}>{button.label}</button>;
|
return <button {...props} className="btn btn-primary" onClick={(event) => {button.onClick(event, this.value);}}>{button.label}</button>;
|
||||||
}}
|
}}
|
||||||
</Tooltip>;
|
</DiscordModules.Tooltip>;
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -135,4 +134,4 @@ export default class CodeEditor extends React.Component {
|
||||||
</div>
|
</div>
|
||||||
</div>;
|
</div>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,17 +12,17 @@ export default class Modals {
|
||||||
|
|
||||||
static get ModalActions() {
|
static get ModalActions() {
|
||||||
return this._ModalActions ??= {
|
return this._ModalActions ??= {
|
||||||
openModal: WebpackModules.getModule(m => m?.toString().includes("onCloseCallback") && m?.toString().includes("Layer"), {searchExports: true}),
|
openModal: WebpackModules.getModule(m => typeof m === "function" && m?.toString().includes("onCloseCallback") && m?.toString().includes("Layer"), {searchExports: true}),
|
||||||
closeModal: WebpackModules.getModule(m => m?.toString().includes("onCloseCallback()"), {searchExports: true})
|
closeModal: WebpackModules.getModule(m => typeof m === "function" && m?.toString().includes("onCloseCallback()"), {searchExports: true})
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
static get ModalStack() {return this._ModalStack ??= WebpackModules.getByProps("push", "update", "pop", "popWithKey");}
|
static get ModalStack() {return this._ModalStack ??= WebpackModules.getByProps("push", "update", "pop", "popWithKey");}
|
||||||
static get ModalComponents() {return this._ModalComponents ??= WebpackModules.getByProps("Header", "Footer");}
|
static get ModalComponents() {return this._ModalComponents ??= WebpackModules.getByProps("Header", "Footer");}
|
||||||
static get ModalRoot() {return this._ModalRoot ??= WebpackModules.getModule(m => m?.toString?.()?.includes("ENTERING"), {searchExports: true});}
|
static get ModalRoot() {return this._ModalRoot ??= WebpackModules.getModule(m => m?.toString?.()?.includes("ENTERING") && m?.toString?.()?.includes("headerId"), {searchExports: true});}
|
||||||
static get ModalClasses() {return this._ModalClasses ??= WebpackModules.getByProps("modal", "content");}
|
static get ModalClasses() {return this._ModalClasses ??= WebpackModules.getByProps("modal", "content");}
|
||||||
static get FlexElements() {return this._FlexElements ??= WebpackModules.getByProps("Child", "Align");}
|
static get FlexElements() {return this._FlexElements ??= WebpackModules.getByProps("Child", "Align");}
|
||||||
static get TextElement() {return this._TextElement ??= WebpackModules.getModule(m => m?.Sizes?.SIZE_32 && m.Colors);}
|
static get TextElement() {return this._TextElement ??= WebpackModules.getModule(m => m?.Sizes?.SIZE_32 && m.Colors);}
|
||||||
static get ConfirmationModal() {return this._ConfirmationModal ??= WebpackModules.getModule(m => m?.toString?.()?.includes(".confirmButtonColor"));}
|
static get ConfirmationModal() {return this._ConfirmationModal ??= WebpackModules.getModule(m => m?.toString?.()?.includes(".confirmButtonColor"), {searchExports: true});}
|
||||||
static get Markdown() {return this._Markdown ??= WebpackModules.find(m => m?.prototype?.render && m.rules);}
|
static get Markdown() {return this._Markdown ??= WebpackModules.find(m => m?.prototype?.render && m.rules);}
|
||||||
static get Buttons() {return this._Buttons ??= WebpackModules.getModule(m => m.BorderColors, {searchExports: true});}
|
static get Buttons() {return this._Buttons ??= WebpackModules.getModule(m => m.BorderColors, {searchExports: true});}
|
||||||
static get ModalQueue() {return this._ModalQueue ??= [];}
|
static get ModalQueue() {return this._ModalQueue ??= [];}
|
||||||
|
@ -30,10 +30,14 @@ export default class Modals {
|
||||||
static get hasModalOpen() {return !!document.getElementsByClassName("bd-modal").length;}
|
static get hasModalOpen() {return !!document.getElementsByClassName("bd-modal").length;}
|
||||||
|
|
||||||
static async initialize() {
|
static async initialize() {
|
||||||
const names = ["ModalActions", "Markdown", "ModalRoot", "ModalComponents", "Buttons", "TextElement", "FlexElements"];
|
const names = ["ConfirmationModal", "ModalActions", "Markdown", "ModalRoot", "ModalComponents", "Buttons", "TextElement", "FlexElements"];
|
||||||
|
|
||||||
for (const name of names) {
|
for (const name of names) {
|
||||||
const value = this[name];
|
let value = this[name];
|
||||||
|
|
||||||
|
if (name === "ModalActions") {
|
||||||
|
value = Object.keys(this.ModalActions).every(k => this.ModalActions[k]);
|
||||||
|
}
|
||||||
|
|
||||||
if (!value) {
|
if (!value) {
|
||||||
Logger.warn("Modals", `Missing ${name} module!`);
|
Logger.warn("Modals", `Missing ${name} module!`);
|
||||||
|
|
|
@ -25,7 +25,6 @@ const LinkIcons = {
|
||||||
patreon: PatreonIcon
|
patreon: PatreonIcon
|
||||||
};
|
};
|
||||||
|
|
||||||
const Tooltip = WebpackModules.getByPrototypes("renderTooltip");
|
|
||||||
const LayerManager = {
|
const LayerManager = {
|
||||||
pushLayer(component) {
|
pushLayer(component) {
|
||||||
DiscordModules.Dispatcher.dispatch({
|
DiscordModules.Dispatcher.dispatch({
|
||||||
|
@ -149,19 +148,19 @@ export default class AddonCard extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
makeButton(title, children, action) {
|
makeButton(title, children, action) {
|
||||||
return <Tooltip color="primary" position="top" text={title}>
|
return <DiscordModules.Tooltip color="primary" position="top" text={title}>
|
||||||
{(props) => {
|
{(props) => {
|
||||||
return <div {...props} className="bd-addon-button" onClick={action}>{children}</div>;
|
return <div {...props} className="bd-addon-button" onClick={action}>{children}</div>;
|
||||||
}}
|
}}
|
||||||
</Tooltip>;
|
</DiscordModules.Tooltip>;
|
||||||
}
|
}
|
||||||
|
|
||||||
makeControlButton(title, children, action, {danger = false, disabled = false} = {}) {
|
makeControlButton(title, children, action, {danger = false, disabled = false} = {}) {
|
||||||
return <Tooltip color="primary" position="top" text={title}>
|
return <DiscordModules.Tooltip color="primary" position="top" text={title}>
|
||||||
{(props) => {
|
{(props) => {
|
||||||
return <button {...props} className={"bd-button bd-addon-button" + (danger ? " bd-button-danger" : "") + (disabled ? " bd-button-disabled" : "")} onClick={action}>{children}</button>;
|
return <button {...props} className={"bd-button bd-addon-button" + (danger ? " bd-button-danger" : "") + (disabled ? " bd-button-disabled" : "")} onClick={action}>{children}</button>;
|
||||||
}}
|
}}
|
||||||
</Tooltip>;
|
</DiscordModules.Tooltip>;
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -192,4 +191,4 @@ Object.defineProperty(AddonCard.prototype, "render", {
|
||||||
configurable: false,
|
configurable: false,
|
||||||
set: function() {Logger.warn("AddonCard", "Addon policy for plugins #5 https://github.com/BetterDiscord/BetterDiscord/wiki/Addon-Policies#plugins");},
|
set: function() {Logger.warn("AddonCard", "Addon policy for plugins #5 https://github.com/BetterDiscord/BetterDiscord/wiki/Addon-Policies#plugins");},
|
||||||
get: () => originalRender
|
get: () => originalRender
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import Logger from "common/logger";
|
import Logger from "common/logger";
|
||||||
import {React, Strings, Events, WebpackModules, DataStore} from "modules";
|
import {React, Strings, Events, DataStore, DiscordModules} from "modules";
|
||||||
|
|
||||||
import Modals from "../modals";
|
import Modals from "../modals";
|
||||||
import SettingsTitle from "./title";
|
import SettingsTitle from "./title";
|
||||||
|
@ -13,8 +13,6 @@ import GridIcon from "../icons/grid";
|
||||||
import NoResults from "../blankslates/noresults";
|
import NoResults from "../blankslates/noresults";
|
||||||
import EmptyImage from "../blankslates/emptyimage";
|
import EmptyImage from "../blankslates/emptyimage";
|
||||||
|
|
||||||
const Tooltip = WebpackModules.getByPrototypes("renderTooltip");
|
|
||||||
|
|
||||||
export default class AddonList extends React.Component {
|
export default class AddonList extends React.Component {
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
|
@ -115,11 +113,11 @@ export default class AddonList extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
makeControlButton(title, children, action, selected = false) {
|
makeControlButton(title, children, action, selected = false) {
|
||||||
return <Tooltip color="primary" position="top" text={title}>
|
return <DiscordModules.Tooltip color="primary" position="top" text={title}>
|
||||||
{(props) => {
|
{(props) => {
|
||||||
return <button {...props} className={"bd-button bd-view-button" + (selected ? " selected" : "")} onClick={action}>{children}</button>;
|
return <button {...props} className={"bd-button bd-view-button" + (selected ? " selected" : "")} onClick={action}>{children}</button>;
|
||||||
}}
|
}}
|
||||||
</Tooltip>;
|
</DiscordModules.Tooltip>;
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -213,4 +211,4 @@ Object.defineProperty(AddonList.prototype, "render", {
|
||||||
configurable: false,
|
configurable: false,
|
||||||
set: function() {Logger.warn("AddonList", "Addon policy for plugins #5 https://github.com/BetterDiscord/BetterDiscord/wiki/Addon-Policies#plugins");},
|
set: function() {Logger.warn("AddonList", "Addon policy for plugins #5 https://github.com/BetterDiscord/BetterDiscord/wiki/Addon-Policies#plugins");},
|
||||||
get: () => originalRender
|
get: () => originalRender
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,6 +1,4 @@
|
||||||
import {React, WebpackModules} from "modules";
|
import {DiscordModules, React} from "modules";
|
||||||
|
|
||||||
const TooltipWrapper = WebpackModules.getByPrototypes("renderTooltip");
|
|
||||||
|
|
||||||
const Checkmark = React.memo((props) => (
|
const Checkmark = React.memo((props) => (
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" {...props}>
|
<svg width="16" height="16" viewBox="0 0 24 24" {...props}>
|
||||||
|
@ -73,7 +71,7 @@ export default class Color extends React.Component {
|
||||||
|
|
||||||
return <div className="bd-color-picker-container">
|
return <div className="bd-color-picker-container">
|
||||||
<div className="bd-color-picker-controls">
|
<div className="bd-color-picker-controls">
|
||||||
<TooltipWrapper text="Default" position="bottom">
|
<DiscordModules.Tooltip text="Default" position="bottom">
|
||||||
{props => (
|
{props => (
|
||||||
<div {...props} className="bd-color-picker-default" style={{backgroundColor: resolveColor(defaultValue)}} onClick={() => this.onChange({target: {value: defaultValue}})}>
|
<div {...props} className="bd-color-picker-default" style={{backgroundColor: resolveColor(defaultValue)}} onClick={() => this.onChange({target: {value: defaultValue}})}>
|
||||||
{intValue === resolveColor(defaultValue, false)
|
{intValue === resolveColor(defaultValue, false)
|
||||||
|
@ -82,15 +80,15 @@ export default class Color extends React.Component {
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</TooltipWrapper>
|
</DiscordModules.Tooltip>
|
||||||
<TooltipWrapper text="Custom Color" position="bottom">
|
<DiscordModules.Tooltip text="Custom Color" position="bottom">
|
||||||
{props => (
|
{props => (
|
||||||
<div className="bd-color-picker-custom">
|
<div className="bd-color-picker-custom">
|
||||||
<Dropper color={getContrastColor(resolveColor(this.state.value, true))} />
|
<Dropper color={getContrastColor(resolveColor(this.state.value, true))} />
|
||||||
<input {...props} style={{backgroundColor: resolveColor(this.state.value)}} type="color" className="bd-color-picker" value={resolveColor(this.state.value)} onChange={this.onChange} />
|
<input {...props} style={{backgroundColor: resolveColor(this.state.value)}} type="color" className="bd-color-picker" value={resolveColor(this.state.value)} onChange={this.onChange} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</TooltipWrapper>
|
</DiscordModules.Tooltip>
|
||||||
</div>
|
</div>
|
||||||
<div className="bd-color-picker-swatch">
|
<div className="bd-color-picker-swatch">
|
||||||
{
|
{
|
||||||
|
@ -106,4 +104,4 @@ export default class Color extends React.Component {
|
||||||
</div>
|
</div>
|
||||||
</div>;
|
</div>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,9 +1,8 @@
|
||||||
import {Changelog} from "data";
|
import {Changelog} from "data";
|
||||||
import {React, WebpackModules} from "modules";
|
import {DiscordModules, React} from "modules";
|
||||||
import HistoryIcon from "../icons/history";
|
import HistoryIcon from "../icons/history";
|
||||||
import Modals from "../modals";
|
import Modals from "../modals";
|
||||||
|
|
||||||
const Tooltip = WebpackModules.getByPrototypes("renderTooltip");
|
|
||||||
|
|
||||||
export default class SettingsTitle extends React.Component {
|
export default class SettingsTitle extends React.Component {
|
||||||
renderHeader() {
|
renderHeader() {
|
||||||
|
@ -13,13 +12,13 @@ export default class SettingsTitle extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
return <div className="bd-sidebar-header">
|
return <div className="bd-sidebar-header">
|
||||||
{this.renderHeader()}
|
{this.renderHeader()}
|
||||||
<Tooltip color="primary" position="top" text="Changelog">
|
<DiscordModules.Tooltip color="primary" position="top" text="Changelog">
|
||||||
{props =>
|
{props =>
|
||||||
<div {...props} className="bd-changelog-button" onClick={() => Modals.showChangelogModal(Changelog)}>
|
<div {...props} className="bd-changelog-button" onClick={() => Modals.showChangelogModal(Changelog)}>
|
||||||
<HistoryIcon className="bd-icon" size="16px" />
|
<HistoryIcon className="bd-icon" size="16px" />
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</Tooltip>
|
</DiscordModules.Tooltip>
|
||||||
</div>;
|
</div>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue