some other features

This commit is contained in:
Zack Rauen 2020-03-27 22:44:59 -04:00
parent 56e342ff7e
commit caf3406e0a
18 changed files with 274 additions and 157 deletions

View File

@ -949,6 +949,9 @@ body .ace_closeButton:active {
flex-shrink: 0; flex-shrink: 0;
padding: 6px 10px; padding: 6px 10px;
overflow: hidden; overflow: hidden;
display: flex;
justify-content: space-between;
} }
.theme-dark #bd-settings-sidebar .ui-tab-bar-header { .theme-dark #bd-settings-sidebar .ui-tab-bar-header {
color: #72767d; color: #72767d;
@ -957,6 +960,19 @@ body .ace_closeButton:active {
color: #b9bbbe; color: #b9bbbe;
} }
#bd-settings-sidebar .ui-tab-bar-header .bd-changelog-button {
height: 16px;
}
#bd-settings-sidebar .ui-tab-bar-header .bd-icon {
cursor: pointer;
fill: #72767d;
}
#bd-settings-sidebar .ui-tab-bar-header .bd-icon:hover {
fill: #fff;
}
#bd-settings-sidebar .ui-tab-bar-separator { #bd-settings-sidebar .ui-tab-bar-separator {
height: 1px; height: 1px;
margin: 8px 10px; margin: 8px 10px;

2
css/main.min.css vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
js/main.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -1,15 +1,18 @@
// var settingsPanel, emoteModule, quickEmoteMenu, voiceMode, pluginModule, themeModule, dMode, publicServersModule, mainCore, BDV2; // var settingsPanel, emoteModule, quickEmoteMenu, voiceMode, pluginModule, themeModule, dMode, publicServersModule, mainCore, BDV2;
export const minimumDiscordVersion = "0.0.306";
export const currentDiscordVersion = (window.DiscordNative && window.DiscordNative.remoteApp && window.DiscordNative.remoteApp.getVersion && window.DiscordNative.remoteApp.getVersion()) || "0.0.306";
export const minSupportedVersion = "0.3.0"; export const minSupportedVersion = "0.3.0";
export const bbdVersion = "0.3.0"; export const bbdVersion = "0.3.1";
export const bbdChangelog = { export const bbdChangelog = {
description: "There's some pretty big things in this one, and even bigger things coming.", description: "There's some pretty big things in this one, and even bigger things coming. Most of this information is repeated from the `0.3.0` update just in case people hadn't seen the changelog yet.",
changes: [ changes: [
{ {
title: "What's New?", title: "What's New?",
items: [ items: [
"**RepoControls** is now integrated into BD and everyone can enjoy sorting and searching their plugins and themes.", "**RepoControls**-like controls are now integrated into BD and everyone can enjoy sorting and searching their plugins and themes.",
"BandagedBD has undergone an internal restructure--it's no longer one messy file but *several*. Users shouldn't see any breaking changes (hopefully).", "BandagedBD has undergone an internal restructure--it's no longer one messy file but *several*. Users shouldn't see any breaking changes (hopefully).",
"**Plugin Developers:** You'll begin (or continue for some) to see deprecation notices for several BD globals. Please take these seriously and update your plugins to use `BdApi`, the globals **_will_** be removed. If you find the API to be missing something that you could do before, please message me in BD2's <#603225817262194699> chat." "**Plugin Developers:** You'll begin (or continue for some) to see deprecation notices for several BD globals. Please take these seriously and update your plugins to use `BdApi`, the globals **_will_** be removed. If you find the API to be missing something that you could do before, please message me in BD2's <#603225817262194699> chat.",
"**Also Plugin Developers:** There is now an option to enable React Developer Tools in the Developer Options in settings. Just make sure to have the extension installed in your local Chrome installation."
] ]
}, },
{ {
@ -17,7 +20,16 @@ export const bbdChangelog = {
type: "improved", type: "improved",
items: [ items: [
"**BD Blue** is now the default accent color for BBD elements in settings. Themes can customize it easily through some new variables: `--bd-blue`, `--bd-blue-hover`, `--bd-blue-active`", "**BD Blue** is now the default accent color for BBD elements in settings. Themes can customize it easily through some new variables: `--bd-blue`, `--bd-blue-hover`, `--bd-blue-active`",
"Some improvements have been made to the plugins and themes pages that should hopefully prevent plugins from causing errors when displaying." "Some improvements have been made to the plugins and themes pages that should hopefully prevent plugins from causing errors when displaying.",
"You can now review the changelog after you close it by clicking this button in settings: https://i.imgur.com/I3ZdAxG.png"
]
},
{
title: "Minor Stuff",
type: "fixed",
items: [
"**Quick Emote Menu** works again, sorry about that!",
"Fixed an issue with searching plugin/theme lists."
] ]
} }
] ]
@ -49,6 +61,7 @@ export const settings = {
/* Developer */ /* Developer */
"Developer Mode": {id: "bda-gs-8", info: "Developer Mode", implemented: true, hidden: false, cat: "core", category: "developer settings"}, "Developer Mode": {id: "bda-gs-8", info: "Developer Mode", implemented: true, hidden: false, cat: "core", category: "developer settings"},
"Copy Selector": {id: "fork-dm-1", info: "Adds a \"Copy Selector\" option to context menus when developer mode is active", implemented: true, hidden: false, cat: "core", category: "developer settings"}, "Copy Selector": {id: "fork-dm-1", info: "Adds a \"Copy Selector\" option to context menus when developer mode is active", implemented: true, hidden: false, cat: "core", category: "developer settings"},
"React DevTools": {id: "reactDevTools", info: "Adds react developer tools to the devtools. Must be installed in Google Chrome on your pc.", implemented: true, hidden: true, cat: "core", category: "developer settings"},
/* Window Prefs */ /* Window Prefs */
"Enable Transparency": {id: "fork-wp-1", info: "Enables the main window to be see-through (requires restart)", implemented: true, hidden: false, cat: "core", category: "window preferences"}, "Enable Transparency": {id: "fork-wp-1", info: "Enables the main window to be see-through (requires restart)", implemented: true, hidden: false, cat: "core", category: "window preferences"},
@ -100,7 +113,8 @@ export const defaultCookie = {
"fork-es-3": true, "fork-es-3": true,
"fork-wp-1": false, "fork-wp-1": false,
"fork-wp-2": false, "fork-wp-2": false,
"fork-beta": true "fork-beta": true,
"reactDevTools": false
}; };

View File

@ -6,7 +6,7 @@ loadingIcon();
const deprecateGlobal = (key, value) => { const deprecateGlobal = (key, value) => {
Object.defineProperty(window, key, { Object.defineProperty(window, key, {
get() { get() {
Utils.warn("Deprecation Notice", `"${key}" may be removed in future versions. Please only use BdApi.`); Utils.warn("Deprecation Notice", `"${key}" will be removed in future versions. Please only use BdApi.`);
return value; return value;
} }
}); });
@ -30,6 +30,7 @@ import DataStore from "./modules/dataStore";
import emoteModule from "./modules/emoteModule"; import emoteModule from "./modules/emoteModule";
import ContentManager from "./modules/contentManager"; import ContentManager from "./modules/contentManager";
import ClassNormalizer from "./modules/classNormalizer"; import ClassNormalizer from "./modules/classNormalizer";
import quickEmoteMenu from "./modules/quickEmoteMenu";
deprecateGlobal("BDV2", BDV2); deprecateGlobal("BDV2", BDV2);
deprecateGlobal("pluginModule", pluginModule); deprecateGlobal("pluginModule", pluginModule);
@ -43,16 +44,17 @@ deprecateGlobal("ContentManager", ContentManager);
deprecateGlobal("ClassNormalizer", ClassNormalizer); deprecateGlobal("ClassNormalizer", ClassNormalizer);
window.BdApi = BdApi; window.BdApi = BdApi;
window.quickEmoteMenu = quickEmoteMenu;
import Core from "./modules/core"; import Core from "./modules/core";
export default class CoreWrapper { export default class CoreWrapper {
constructor(bdConfig) { constructor(bdConfig) {
this.mainCore = new Core(bdConfig); Core.setConfig(bdConfig);
} }
init() { init() {
// deprecateGlobal("mainCore", this.mainCore); // deprecateGlobal("mainCore", this.mainCore);
this.mainCore.init(); Core.init();
} }
} }

View File

@ -86,6 +86,7 @@ BdApi.getPlugin = function (name) {
//Get BetterDiscord Core //Get BetterDiscord Core
BdApi.getCore = function () { BdApi.getCore = function () {
Utils.warn("Deprecation Notice", `BdApi.getCore() will be removed in future versions.`);
return mainCore; return mainCore;
}; };

View File

@ -1,4 +1,4 @@
import {bdConfig, minSupportedVersion, bbdVersion, settingsCookie, bdpluginErrors, bdthemeErrors, bbdChangelog, defaultCookie} from "../0globals"; import {bdConfig, minSupportedVersion, bbdVersion, settingsCookie, bdpluginErrors, bdthemeErrors, bbdChangelog, defaultCookie, minimumDiscordVersion, currentDiscordVersion} from "../0globals";
import Utils from "./utils"; import Utils from "./utils";
import emoteModule from "./emoteModule"; import emoteModule from "./emoteModule";
import quickEmoteMenu from "./quickEmoteMenu"; import quickEmoteMenu from "./quickEmoteMenu";
@ -13,12 +13,20 @@ import DataStore from "./dataStore";
import WebpackModules from "./webpackModules"; import WebpackModules from "./webpackModules";
import BDLogo from "../ui/bdLogo"; import BDLogo from "../ui/bdLogo";
import TooltipWrap from "../ui/tooltipWrap";
function Core(config) { function Core() {}
Core.prototype.setConfig = function(config) {
Object.assign(bdConfig, config); Object.assign(bdConfig, config);
} };
Core.prototype.init = async function() { Core.prototype.init = async function() {
if (currentDiscordVersion < minimumDiscordVersion) {
Utils.alert("Not Supported", "BetterDiscord v" + bbdVersion + " does not support this old version (" + currentDiscordVersion + ") of Discord. Please update your Discord installation before proceeding.");
return;
}
if (bdConfig.version < minSupportedVersion) { if (bdConfig.version < minSupportedVersion) {
Utils.alert("Not Supported", "BetterDiscord v" + bdConfig.version + " (your version)" + " is not supported by the latest js (" + bbdVersion + ").<br><br> Please download the latest version from <a href='https://github.com/rauenzi/BetterDiscordApp/releases/latest' target='_blank'>GitHub</a>"); Utils.alert("Not Supported", "BetterDiscord v" + bdConfig.version + " (your version)" + " is not supported by the latest js (" + bbdVersion + ").<br><br> Please download the latest version from <a href='https://github.com/rauenzi/BetterDiscordApp/releases/latest' target='_blank'>GitHub</a>");
return; return;
@ -95,7 +103,7 @@ Core.prototype.init = async function() {
const previousVersion = DataStore.getBDData("version"); const previousVersion = DataStore.getBDData("version");
if (bbdVersion > previousVersion) { if (bbdVersion > previousVersion) {
if (bbdChangelog) this.showChangelogModal(bbdChangelog); if (bbdChangelog) this.showChangelogModal(bbdChangelog);
DataStore.setBDData("version", bbdVersion); // DataStore.setBDData("version", bbdVersion);
} }
Utils.suppressErrors(this.patchSocial.bind(this), "BD Social Patch")(); Utils.suppressErrors(this.patchSocial.bind(this), "BD Social Patch")();
@ -183,59 +191,7 @@ Core.prototype.initObserver = function () {
}; };
Core.prototype.showChangelogModal = function(options = {}) { Core.prototype.showChangelogModal = function(options = {}) {
const ModalStack = WebpackModules.findByProps("push", "update", "pop", "popWithKey"); return Utils.showChangelogModal(options);
const ChangelogClasses = WebpackModules.findByProps("fixed", "improved");
const TextElement = WebpackModules.findByProps("Sizes", "Weights");
const FlexChild = WebpackModules.findByProps("Child");
const Titles = WebpackModules.findByProps("Tags", "default");
const Changelog = WebpackModules.find(m => m.defaultProps && m.defaultProps.selectable == false);
const MarkdownParser = WebpackModules.findByProps("defaultRules", "parse");
if (!Changelog || !ModalStack || !ChangelogClasses || !TextElement || !FlexChild || !Titles || !MarkdownParser) return;
const {image = "https://repository-images.githubusercontent.com/105473537/957b5480-7c26-11e9-8401-50fa820cbae5", description = "", changes = [], title = "BandagedBD", subtitle = `v${bbdVersion}`, footer} = options;
const ce = BDV2.React.createElement;
const changelogItems = [ce("img", {src: image})];
if (description) changelogItems.push(ce("p", null, MarkdownParser.parse(description)));
for (let c = 0; c < changes.length; c++) {
const entry = changes[c];
const type = ChangelogClasses[entry.type] ? ChangelogClasses[entry.type] : ChangelogClasses.added;
const margin = c == 0 ? ChangelogClasses.marginTop : "";
changelogItems.push(ce("h1", {className: `${type} ${margin}`,}, entry.title));
const list = ce("ul", null, entry.items.map(i => ce("li", null, MarkdownParser.parse(i))));
changelogItems.push(list);
}
const renderHeader = function() {
return ce(FlexChild.Child, {grow: 1, shrink: 1},
ce(Titles.default, {tag: Titles.Tags.H4}, title),
ce(TextElement,{size: TextElement.Sizes.SMALL, color: TextElement.Colors.PRIMARY, className: ChangelogClasses.date}, subtitle)
);
};
const renderFooter = () => {
const Anchor = WebpackModules.find(m => m.displayName == "Anchor");
const AnchorClasses = WebpackModules.findByProps("anchorUnderlineOnHover") || {anchor: "anchor-3Z-8Bb", anchorUnderlineOnHover: "anchorUnderlineOnHover-2ESHQB"};
const joinSupportServer = (click) => {
click.preventDefault();
click.stopPropagation();
ModalStack.pop();
BDV2.joinBD2();
};
const supportLink = Anchor ? ce(Anchor, {onClick: joinSupportServer}, "Join our Discord Server.") : ce("a", {className: `${AnchorClasses.anchor} ${AnchorClasses.anchorUnderlineOnHover}`, onClick: joinSupportServer}, "Join our Discord Server.");
const defaultFooter = ce(TextElement,{size: TextElement.Sizes.SMALL, color: TextElement.Colors.PRIMARY}, "Need support? ", supportLink);
return ce(FlexChild.Child, {grow: 1, shrink: 1}, footer ? footer : defaultFooter);
};
ModalStack.push(function(props) {
return ce(Changelog, Object.assign({
className: ChangelogClasses.container,
selectable: true,
onScroll: _ => _,
onClose: _ => _,
renderHeader: renderHeader,
renderFooter: renderFooter,
children: changelogItems
}, props));
});
}; };
Core.prototype.patchSocial = function() { Core.prototype.patchSocial = function() {
@ -251,9 +207,13 @@ Core.prototype.patchSocial = function() {
const original = children[children.length - 2].type; const original = children[children.length - 2].type;
const newOne = function() { const newOne = function() {
const returnVal = original(...arguments); const returnVal = original(...arguments);
returnVal.props.children.push(BDV2.React.createElement(Anchor, {className: "bd-social-link", href: "https://github.com/rauenzi/BetterDiscordApp", title: "BandagedBD", target: "_blank"}, returnVal.props.children.push(
BDV2.React.createElement(BDLogo, {size: "16px", className: "bd-social-logo"}) BDV2.React.createElement(TooltipWrap, {color: "black", side: "top", text: "BandagedBD"},
)); BDV2.React.createElement(Anchor, {className: "bd-social-link", href: "https://github.com/rauenzi/BetterDiscordApp", title: "BandagedBD", target: "_blank"},
BDV2.React.createElement(BDLogo, {size: "16px", className: "bd-social-logo"})
)
)
);
return returnVal; return returnVal;
}; };
children[children.length - 2].type = newOne; children[children.length - 2].type = newOne;
@ -332,4 +292,4 @@ Core.prototype.patchGuildSeparator = function() {
}}); }});
}; };
export default Core; export default new Core();

View File

@ -0,0 +1,46 @@
import Utils from "./utils";
import {settings} from "../0globals";
const electron = require("electron");
const fs = require("fs");
const path = require("path");
const BrowserWindow = electron.remote.BrowserWindow;
const currentWindow = BrowserWindow.getAllWindows()[0];
export default new class reactDevTools {
constructor() {
let extensionPath = "";
if (process.platform === "win32") extensionPath = path.resolve(process.env.LOCALAPPDATA, "Google/Chrome/User Data");
if (process.platform === "linux") extensionPath = path.resolve(process.env.HOME, ".config/google-chrome");
if (process.platform === "darwin") extensionPath = path.resolve(process.env.HOME, "Library/Application Support/Google/Chrome");
extensionPath += "/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/";
if (fs.existsSync(extensionPath)) {
const versions = fs.readdirSync(extensionPath);
extensionPath = path.resolve(extensionPath, versions[versions.length - 1]);
}
this.extensionPath = extensionPath;
this.isExtensionInstalled = fs.existsSync(extensionPath);
this.listener = this.listener.bind(this);
settings["React DevTools"].hidden = !this.isExtensionInstalled;
}
listener() {
if (!this.isExtensionInstalled) return;
BrowserWindow.removeDevToolsExtension("React Developer Tools");
const didInstall = BrowserWindow.addDevToolsExtension(this.extensionPath);
if (didInstall) Utils.log("React DevTools", "Successfully installed react devtools.");
else Utils.err("React DevTools", "Couldn't find react devtools in chrome extensions!");
}
start() {
currentWindow.webContents.on("devtools-opened", this.listener);
}
stop() {
currentWindow.webContents.removeListener("devtools-opened", this.listener);
}
};

View File

@ -5,10 +5,9 @@ import Utils from "./utils";
import BDV2 from "./v2"; import BDV2 from "./v2";
import ContentManager from "./contentManager"; import ContentManager from "./contentManager";
import BDEvents from "./bdEvents"; import BDEvents from "./bdEvents";
import pluginModule from "./pluginModule";
import themeModule from "./themeModule";
import coloredText from "./coloredText"; import coloredText from "./coloredText";
import tfHour from "./24hour"; import tfHour from "./24hour";
import reactDevTools from "./reactDevTools";
import publicServersModule from "./publicServers"; import publicServersModule from "./publicServers";
import voiceMode from "./voiceMode"; import voiceMode from "./voiceMode";
@ -18,18 +17,10 @@ import dMode from "./devMode";
import quickEmoteMenu from "./quickEmoteMenu"; import quickEmoteMenu from "./quickEmoteMenu";
import Tools from "../ui/tools"; import Tools from "../ui/tools";
import ReloadIcon from "../ui/reloadIcon";
import TooltipWrap from "../ui/tooltipWrap";
import Scroller from "../ui/scroller"; import Scroller from "../ui/scroller";
import List from "../ui/list";
import PluginCard from "../ui/pluginCard";
import ThemeCard from "../ui/themeCard";
import SectionedSettingsPanel from "../ui/sectionedSettingsPanel"; import SectionedSettingsPanel from "../ui/sectionedSettingsPanel";
import SettingsPanel from "../ui/settingsPanel"; import SettingsPanel from "../ui/settingsPanel";
import CssEditor from "../ui/cssEditor"; import CssEditor from "../ui/cssEditor";
import ContentColumn from "../ui/contentColumn";
import ErrorBoundary from "../ui/errorBoundary";
import CardList from "../ui/addonlist"; import CardList from "../ui/addonlist";
export default new class V2_SettingsPanel { export default new class V2_SettingsPanel {
@ -41,6 +32,7 @@ export default new class V2_SettingsPanel {
self.updateSettings = this.updateSettings.bind(self); self.updateSettings = this.updateSettings.bind(self);
self.sidebar = new V2_SettingsPanel_Sidebar(self.sideBarOnClick); self.sidebar = new V2_SettingsPanel_Sidebar(self.sideBarOnClick);
this.buildPluginProps = this.buildPluginProps.bind(this); this.buildPluginProps = this.buildPluginProps.bind(this);
this.buildThemeProps = this.buildThemeProps.bind(this);
} }
get root() { get root() {
@ -198,6 +190,11 @@ export default new class V2_SettingsPanel {
if (settingsCookie["bda-gs-8"]) dMode.enable(enabled); if (settingsCookie["bda-gs-8"]) dMode.enable(enabled);
} }
if (id === "reactDevTools") {
if (enabled) reactDevTools.start();
else reactDevTools.stop();
}
this.saveSettings(); this.saveSettings();
} }
@ -219,6 +216,7 @@ export default new class V2_SettingsPanel {
} }
if (settingsCookie["bda-gs-8"]) dMode.enable(settingsCookie["fork-dm-1"]); if (settingsCookie["bda-gs-8"]) dMode.enable(settingsCookie["fork-dm-1"]);
if (settingsCookie.reactDevTools) reactDevTools.start();
this.saveSettings(); this.saveSettings();
} }
@ -242,25 +240,28 @@ export default new class V2_SettingsPanel {
} }
get coreComponent() { get coreComponent() {
return BDV2.react.createElement(Scroller, {contentColumn: true, fade: true, dark: true, children: [ return BDV2.react.createElement(Scroller, {contentColumn: true, fade: true, dark: true},
BDV2.react.createElement(SectionedSettingsPanel, {key: "cspanel", onChange: this.onChange, sections: this.coreSettings}), BDV2.react.createElement(SectionedSettingsPanel, {key: "cspanel", onChange: this.onChange, sections: this.coreSettings}),
BDV2.react.createElement(Tools, {key: "tools"}) BDV2.react.createElement(Tools, {key: "tools"})
]}); );
} }
get emoteComponent() { get emoteComponent() {
return BDV2.react.createElement(Scroller, { return BDV2.react.createElement(Scroller, {
contentColumn: true, fade: true, dark: true, children: [ contentColumn: true, fade: true, dark: true},
BDV2.react.createElement(SettingsPanel, {key: "espanel", title: "Emote Settings", onChange: this.onChange, settings: this.emoteSettings, button: { BDV2.react.createElement(SettingsPanel, {key: "espanel", title: "Emote Settings", onChange: this.onChange, settings: this.emoteSettings, button: {
title: "Clear Emote Cache", title: "Clear Emote Cache",
onClick: () => { emoteModule.clearEmoteData(); emoteModule.init(); quickEmoteMenu.init(); } onClick: () => { emoteModule.clearEmoteData(); emoteModule.init(); quickEmoteMenu.init(); }
}}), }}),
BDV2.react.createElement(Tools, {key: "tools"}) BDV2.react.createElement(Tools, {key: "tools"})
]}); );
} }
get customCssComponent() { get customCssComponent() {
return BDV2.react.createElement(Scroller, {contentColumn: true, fade: true, dark: true, children: [BDV2.react.createElement(CssEditor, {key: "csseditor"}), BDV2.react.createElement(Tools, {key: "tools"})]}); return BDV2.react.createElement(Scroller, {contentColumn: true, fade: true, dark: true},
BDV2.react.createElement(CssEditor, {key: "csseditor"}),
BDV2.react.createElement(Tools, {key: "tools"})
);
} }
contentComponent(type) { contentComponent(type) {
@ -299,9 +300,9 @@ export default new class V2_SettingsPanel {
return typeof value == "string" ? value : value.toString(); return typeof value == "string" ? value : value.toString();
} }
buildPluginProps(key) { buildPluginProps(meta) {
const plugin = bdplugins[key].plugin; const plugin = meta.plugin;
return Object.assign({}, bdplugins[key], { return Object.assign({}, meta, {
name: this.getString(plugin.getName()), name: this.getString(plugin.getName()),
author: this.getString(plugin.getAuthor()), author: this.getString(plugin.getAuthor()),
description: this.getString(plugin.getDescription()), description: this.getString(plugin.getDescription()),
@ -310,9 +311,18 @@ export default new class V2_SettingsPanel {
}); });
} }
buildThemeProps(meta) {
return Object.assign({}, meta, {
name: this.getString(meta.name),
author: this.getString(meta.author),
description: this.getString(meta.description),
version: this.getString(meta.version)
});
}
getAddonList(type) { getAddonList(type) {
const isPlugins = type === "plugins"; const isPlugins = type === "plugins";
const list = isPlugins ? Object.keys(bdplugins).map(this.buildPluginProps) : Object.values(bdthemes); const list = isPlugins ? Object.values(bdplugins).map(this.buildPluginProps) : Object.values(bdthemes).map(this.buildThemeProps);
return BDV2.react.createElement(CardList, {type, list}); return BDV2.react.createElement(CardList, {type, list});
} }

View File

@ -1,7 +1,10 @@
import {bbdChangelog} from "../0globals";
import Utils from "./utils"; import Utils from "./utils";
import BDV2 from "./v2"; import BDV2 from "./v2";
import SideBar from "../ui/sidebar"; import SideBar from "../ui/sidebar";
import History from "../ui/icons/history";
import TooltipWrap from "../ui/tooltipWrap";
export default class V2_SettingsPanel_Sidebar { export default class V2_SettingsPanel_Sidebar {
@ -14,7 +17,14 @@ export default class V2_SettingsPanel_Sidebar {
} }
get component() { get component() {
return BDV2.react.createElement("span", null, BDV2.react.createElement(SideBar, {onClick: this.onClick, headerText: "Bandaged BD", items: this.items})); //<TooltipWrap color="black" side="top" text={title}>
const changelogButton = BDV2.react.createElement(TooltipWrap, {color: "black", side: "top", text: "Changelog"},
BDV2.react.createElement("div", {className: "bd-changelog-button", onClick: () => {Utils.showChangelogModal(bbdChangelog);}},
BDV2.react.createElement(History, {className: "bd-icon", size: "16px"})
)
);
return BDV2.react.createElement("span", null, BDV2.react.createElement(SideBar, {onClick: this.onClick, headerText: "Bandaged BD", headerButton: changelogButton, items: this.items}));
} }
get root() { get root() {

View File

@ -1,3 +1,7 @@
import {bbdVersion} from "../0globals";
import WebpackModules from "./webpackModules";
import BDV2 from "./v2";
export default class Utils { export default class Utils {
/** Document/window width */ /** Document/window width */
static get screenWidth() { return Math.max(document.documentElement.clientWidth, window.innerWidth || 0); } static get screenWidth() { return Math.max(document.documentElement.clientWidth, window.innerWidth || 0); }
@ -298,4 +302,60 @@ export default class Utils {
if (pluginErrors.length) modal.find(".tab-bar-item")[0].click(); if (pluginErrors.length) modal.find(".tab-bar-item")[0].click();
else modal.find(".tab-bar-item")[1].click(); else modal.find(".tab-bar-item")[1].click();
} }
static showChangelogModal(options = {}) {
const ModalStack = WebpackModules.findByProps("push", "update", "pop", "popWithKey");
const ChangelogClasses = WebpackModules.findByProps("fixed", "improved");
const TextElement = WebpackModules.findByProps("Sizes", "Weights");
const FlexChild = WebpackModules.findByProps("Child");
const Titles = WebpackModules.findByProps("Tags", "default");
const Changelog = WebpackModules.find(m => m.defaultProps && m.defaultProps.selectable == false);
const MarkdownParser = WebpackModules.findByProps("defaultRules", "parse");
if (!Changelog || !ModalStack || !ChangelogClasses || !TextElement || !FlexChild || !Titles || !MarkdownParser) return;
const {image = "https://repository-images.githubusercontent.com/105473537/957b5480-7c26-11e9-8401-50fa820cbae5", description = "", changes = [], title = "BandagedBD", subtitle = `v${bbdVersion}`, footer} = options;
const ce = BDV2.React.createElement;
const changelogItems = [ce("img", {src: image})];
if (description) changelogItems.push(ce("p", null, MarkdownParser.parse(description)));
for (let c = 0; c < changes.length; c++) {
const entry = changes[c];
const type = ChangelogClasses[entry.type] ? ChangelogClasses[entry.type] : ChangelogClasses.added;
const margin = c == 0 ? ChangelogClasses.marginTop : "";
changelogItems.push(ce("h1", {className: `${type} ${margin}`,}, entry.title));
const list = ce("ul", null, entry.items.map(i => ce("li", null, MarkdownParser.parse(i))));
changelogItems.push(list);
}
const renderHeader = function() {
return ce(FlexChild.Child, {grow: 1, shrink: 1},
ce(Titles.default, {tag: Titles.Tags.H4}, title),
ce(TextElement,{size: TextElement.Sizes.SMALL, color: TextElement.Colors.PRIMARY, className: ChangelogClasses.date}, subtitle)
);
};
const renderFooter = () => {
const Anchor = WebpackModules.find(m => m.displayName == "Anchor");
const AnchorClasses = WebpackModules.findByProps("anchorUnderlineOnHover") || {anchor: "anchor-3Z-8Bb", anchorUnderlineOnHover: "anchorUnderlineOnHover-2ESHQB"};
const joinSupportServer = (click) => {
click.preventDefault();
click.stopPropagation();
ModalStack.pop();
BDV2.joinBD2();
};
const supportLink = Anchor ? ce(Anchor, {onClick: joinSupportServer}, "Join our Discord Server.") : ce("a", {className: `${AnchorClasses.anchor} ${AnchorClasses.anchorUnderlineOnHover}`, onClick: joinSupportServer}, "Join our Discord Server.");
const defaultFooter = ce(TextElement,{size: TextElement.Sizes.SMALL, color: TextElement.Colors.PRIMARY}, "Need support? ", supportLink);
return ce(FlexChild.Child, {grow: 1, shrink: 1}, footer ? footer : defaultFooter);
};
ModalStack.push(function(props) {
return ce(Changelog, Object.assign({
className: ChangelogClasses.container,
selectable: true,
onScroll: _ => _,
onClose: _ => _,
renderHeader: renderHeader,
renderFooter: renderFooter,
children: changelogItems
}, props));
});
}
} }

View File

@ -123,11 +123,6 @@ export default class V2C_PluginCard extends BDV2.reactComponent {
return <TooltipWrap color="black" side="top" text={title}> return <TooltipWrap color="black" side="top" text={title}>
<div className="bd-addon-button" onClick={action}>{children}</div> <div className="bd-addon-button" onClick={action}>{children}</div>
</TooltipWrap>; </TooltipWrap>;
// return <Tooltip color="black" position="top" text={title}>
// {(props) => {
// return <div {...props} className="bd-icon" onClick={action}>{children}</div>;
// }}
// </Tooltip>;
} }
get links() { get links() {

View File

@ -111,10 +111,11 @@ export default class CardList extends BDV2.reactComponent {
if (!this.state.ascending) sortedAddons.reverse(); if (!this.state.ascending) sortedAddons.reverse();
const rendered = sortedAddons.map((addon) => { const rendered = sortedAddons.map((addon) => {
if (this.state.query) { if (this.state.query) {
let matches = addon.name.toLocaleLowerCase().includes(this.state.query); let matches = null;
matches = matches || addon.author.toLocaleLowerCase().includes(this.state.query); if (addon.name) matches = addon.name.toLocaleLowerCase().includes(this.state.query);
matches = matches || addon.description.toLocaleLowerCase().includes(this.state.query); if (addon.author) matches = matches || addon.author.toLocaleLowerCase().includes(this.state.query);
matches = matches || addon.version.toLocaleLowerCase().includes(this.state.query); if (addon.description) matches = matches || addon.description.toLocaleLowerCase().includes(this.state.query);
if (addon.version) matches = matches || addon.version.toLocaleLowerCase().includes(this.state.query);
if (!matches) return null; if (!matches) return null;
} }
const props = this.getProps(addon); const props = this.getProps(addon);

View File

@ -5,7 +5,7 @@ const React = BDV2.React;
export default class Edit extends React.Component { export default class Edit extends React.Component {
render() { render() {
const size = this.props.size || "24px"; const size = this.props.size || "24px";
return <svg viewBox="0 0 24 24" fill="#FFFFFF" style={{width: size, height: size}} onClick={this.props.onClick}> return <svg className={this.props.className || ""} viewBox="0 0 24 24" fill="#FFFFFF" style={{width: size, height: size}} onClick={this.props.onClick}>
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" /> <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
<path d="M0 0h24v24H0z" fill="none" /> <path d="M0 0h24v24H0z" fill="none" />
</svg>; </svg>;

18
src/ui/icons/history.jsx Normal file
View File

@ -0,0 +1,18 @@
{/* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
</svg> */}
import BDV2 from "../../modules/v2";
const React = BDV2.React;
export default class History extends React.Component {
render() {
const size = this.props.size || "18px";
return <svg viewBox="0 0 24 24" fill="#FFFFFF" className={this.props.className || ""} style={{width: size, height: size}} onClick={this.props.onClick}>
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
</svg>;
}
}

View File

@ -45,7 +45,7 @@ export default class V2C_SideBar extends BDV2.reactComponent {
"div", "div",
null, null,
BDV2.react.createElement(TabBarSeparator, null), BDV2.react.createElement(TabBarSeparator, null),
BDV2.react.createElement(TabBarHeader, {text: headerText}), BDV2.react.createElement(TabBarHeader, {text: headerText, button: this.props.headerButton}),
items.map(item => { items.map(item => {
const {id, text} = item; const {id, text} = item;
return BDV2.react.createElement(TabBarItem, {key: id, selected: selected === id, text: text, id: id, onClick: self.onClick}); return BDV2.react.createElement(TabBarItem, {key: id, selected: selected === id, text: text, id: id, onClick: self.onClick});

View File

@ -6,10 +6,6 @@ export default class V2C_TabBarHeader extends BDV2.reactComponent {
} }
render() { render() {
return BDV2.react.createElement( return BDV2.react.createElement("div",{className: "ui-tab-bar-header"}, this.props.text, this.props.button);
"div",
{className: "ui-tab-bar-header"},
this.props.text
);
} }
} }