From e15d1d09955808b6086227fc861768acb0d2dfca Mon Sep 17 00:00:00 2001 From: Zack Rauen Date: Tue, 3 Nov 2020 21:06:07 -0500 Subject: [PATCH] Fixes markdown and layout issues --- src/data/changelog.js | 5 ++++- src/data/strings.js | 2 +- src/structs/string.js | 11 +++++++++++ src/ui/blankslates/emptyimage.jsx | 3 +-- src/ui/settings/addoncard.jsx | 3 +-- src/ui/settings/addonlist.jsx | 28 ++++++++++++++++++---------- 6 files changed, 36 insertions(+), 16 deletions(-) diff --git a/src/data/changelog.js b/src/data/changelog.js index da452505..989028b8 100644 --- a/src/data/changelog.js +++ b/src/data/changelog.js @@ -9,6 +9,7 @@ export default { "**Everything** is entirely rewritten, for better or worse.", "**Emotes and CustomCSS** can be completely turned off for those not interested. It saves on memory too by not loading those components.", "**Floating editors** for both custom css and plugins/themes are now available. (See video above)", + "**Ace**, the editor from the previous version, has been replaced with **Monaco** which is the editor used in VSCode.", "**Settings panels** are completely new and sleek. They are also highly extensible for potential future features :eyes:", "**Translations** are now integrated starting with only a couple languages, but feel free to contribute your own!", "**Emote menu** now uses React Patching and properly integrates into the new Emoji Picker. (Thanks Strencher#1044!)", @@ -23,7 +24,9 @@ export default { "**Patcher API** was added to `BdApi` under `BdApi.Patcher`. The old `BdApi.monkeyPatch` was patched to use the Patcher as well. This allows plugins and patches to play nice with one another.", "**jQuery** usage was totally eliminated and is now ___deprecated___ for plugins.", "**General performance** improvements throughout the app, from startup to emotes to addons.", - "**Exporting** by plugins is now highly encouraged over trying to match your meta name and class name." + "**Exporting** by plugins is now highly encouraged over trying to match your meta name and class name.", + "**Plugins and Themes** pages have more options for sorting, views and more. The entire panel got a facelift!", + "**Blankslates** have been added all over for that added UX." ] }, { diff --git a/src/data/strings.js b/src/data/strings.js index 0f91fa6e..3534d930 100644 --- a/src/data/strings.js +++ b/src/data/strings.js @@ -231,7 +231,7 @@ export default { compileError: "Could not be compiled.", wasUnloaded: "{{name}} was unloaded.", blankSlateHeader: "You don't have any {{type}}!", - blankSlateMessage: "Grab some from [this website]({{link}}) and add them to your {{type}} folder." + blankSlateMessage: "Grab some from [this website] and add them to your {{type}} folder." }, CustomCSS: { confirmationText: "You have unsaved changes to your Custom CSS. Closing this window will lose all those changes.", diff --git a/src/structs/string.js b/src/structs/string.js index 980af4df..8a7735ab 100644 --- a/src/structs/string.js +++ b/src/structs/string.js @@ -1,7 +1,18 @@ import Utilities from "../modules/utilities"; +const LINK = /\[(.+?)]/; + export default class FormattableString extends String { format(values) { return Utilities.formatString(this, values); } + + replaceLink(callback) { + const match = this.match(LINK); + if (!match) return [this]; + const array = this.split(match[0]); + const element = callback(match[1]); + array.splice(1, 0, element); + return array; + } } \ No newline at end of file diff --git a/src/ui/blankslates/emptyimage.jsx b/src/ui/blankslates/emptyimage.jsx index 36debf51..eed9de71 100644 --- a/src/ui/blankslates/emptyimage.jsx +++ b/src/ui/blankslates/emptyimage.jsx @@ -1,7 +1,6 @@ import {React, WebpackModules} from "modules"; const EmptyImageClasses = WebpackModules.getByProps("emptyImage") || {}; -const MarkdownParser = WebpackModules.getByProps("markdownToReact"); export default class EmptyImage extends React.Component { render() { @@ -11,7 +10,7 @@ export default class EmptyImage extends React.Component { {this.props.title || "You don't have anything!"}
- {MarkdownParser.markdownToReact(this.props.message || "You should probably get something.")} + {this.props.message || "You should probably get something."}
{this.props.children} ; diff --git a/src/ui/settings/addoncard.jsx b/src/ui/settings/addoncard.jsx index d865d2c7..6b051b65 100644 --- a/src/ui/settings/addoncard.jsx +++ b/src/ui/settings/addoncard.jsx @@ -22,7 +22,6 @@ const LinkIcons = { }; const Tooltip = WebpackModules.getByDisplayName("Tooltip"); -const MarkdownParser = WebpackModules.getByProps("markdownToReact"); export default class AddonCard extends React.Component { @@ -142,7 +141,7 @@ export default class AddonCard extends React.Component { {this.buildTitle(name, version, author)} -
{MarkdownParser.markdownToReact(description)}
+
{description}
{this.footer} ; } diff --git a/src/ui/settings/addonlist.jsx b/src/ui/settings/addonlist.jsx index 0c6cd10f..ad6fb0d2 100644 --- a/src/ui/settings/addonlist.jsx +++ b/src/ui/settings/addonlist.jsx @@ -12,6 +12,7 @@ import ListIcon from "../icons/list"; import GridIcon from "../icons/grid"; import NoResults from "../blankslates/noresults"; import EmptyImage from "../blankslates/emptyimage"; +import FormattableString from "../../structs/string"; const Tooltip = WebpackModules.getByDisplayName("Tooltip"); @@ -92,7 +93,9 @@ export default class AddonList extends React.Component { } get emptyImage() { - return + let message = Strings.Addons.blankSlateMessage.format({type: this.props.title}); + message = FormattableString.prototype.replaceLink.call(message, label => {label}); + return ; } @@ -127,6 +130,17 @@ export default class AddonList extends React.Component { return true; }); } + + const renderedCards = sortedAddons.map(addon => { + const hasSettings = addon.instance && typeof(addon.instance.getSettingsPanel) === "function"; + const getSettings = hasSettings && addon.instance.getSettingsPanel.bind(addon.instance); + return ; + }); + + const hasAddonsInstalled = this.props.addonList.length !== 0; + const isSearching = !!this.state.query; + const hasResults = sortedAddons.length !== 0; + return [ } />,
@@ -148,15 +162,9 @@ export default class AddonList extends React.Component {
, -
- {sortedAddons.map(addon => { - const hasSettings = addon.instance && typeof(addon.instance.getSettingsPanel) === "function"; - const getSettings = hasSettings && addon.instance.getSettingsPanel.bind(addon.instance); - return ; - })} - {this.props.addonList.length === 0 && this.emptyImage} - {this.state.query && sortedAddons.length == 0 && this.props.addonList.length !== 0 && } -
+ !hasAddonsInstalled && this.emptyImage, + isSearching && !hasResults && hasAddonsInstalled && , + hasAddonsInstalled &&
{renderedCards}
]; }