Adjusts some more UI elements
This commit is contained in:
parent
5dc472c645
commit
618b577c75
|
@ -195,6 +195,7 @@ export default {
|
||||||
},
|
},
|
||||||
Addons: {
|
Addons: {
|
||||||
title: "{{name}} v{{version}} by {{author}}",
|
title: "{{name}} v{{version}} by {{author}}",
|
||||||
|
byline: "by {{author}}",
|
||||||
openFolder: "Open {{type}} Folder",
|
openFolder: "Open {{type}} Folder",
|
||||||
reload: "Reload",
|
reload: "Reload",
|
||||||
addonSettings: "Settings",
|
addonSettings: "Settings",
|
||||||
|
|
|
@ -149,4 +149,6 @@ export default new class ComponentPatcher {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// as part of utility classes, i would like a way to distinguish channel types from the .content-3at_AU element. other than that, can't think of anything
|
|
@ -35,6 +35,7 @@ export default new class PluginManager extends AddonManager {
|
||||||
const errors = super.initialize();
|
const errors = super.initialize();
|
||||||
this.setupFunctions();
|
this.setupFunctions();
|
||||||
Settings.registerPanel("plugins", Strings.Panels.plugins, {element: () => SettingsRenderer.getAddonPanel(Strings.Panels.plugins, this.addonList, this.state, {
|
Settings.registerPanel("plugins", Strings.Panels.plugins, {element: () => SettingsRenderer.getAddonPanel(Strings.Panels.plugins, this.addonList, this.state, {
|
||||||
|
type: this.prefix,
|
||||||
folder: this.addonFolder,
|
folder: this.addonFolder,
|
||||||
onChange: this.togglePlugin.bind(this),
|
onChange: this.togglePlugin.bind(this),
|
||||||
reload: this.reloadPlugin.bind(this),
|
reload: this.reloadPlugin.bind(this),
|
||||||
|
@ -76,10 +77,10 @@ export default new class PluginManager extends AddonManager {
|
||||||
const PluginClass = addon.exports;
|
const PluginClass = addon.exports;
|
||||||
const thePlugin = new PluginClass();
|
const thePlugin = new PluginClass();
|
||||||
addon.instance = thePlugin;
|
addon.instance = thePlugin;
|
||||||
addon.name = thePlugin.getName() || addon.name;
|
addon.name = thePlugin.getName ? thePlugin.getName() : addon.name || "No name";
|
||||||
addon.author = thePlugin.getAuthor() || addon.author || "No author";
|
addon.author = thePlugin.getAuthor ? thePlugin.getAuthor() : addon.author || "No author";
|
||||||
addon.description = thePlugin.getDescription() || addon.description || "No description";
|
addon.description = thePlugin.getDescription ? thePlugin.getDescription() : addon.description || "No description";
|
||||||
addon.version = thePlugin.getVersion() || addon.version || "No version";
|
addon.version = thePlugin.getVersion ? thePlugin.getVersion() : addon.version || "No version";
|
||||||
try {
|
try {
|
||||||
if (typeof(addon.instance.load) == "function") addon.instance.load();
|
if (typeof(addon.instance.load) == "function") addon.instance.load();
|
||||||
}
|
}
|
||||||
|
|
|
@ -22,6 +22,7 @@ export default new class ThemeManager extends AddonManager {
|
||||||
initialize() {
|
initialize() {
|
||||||
const errors = super.initialize();
|
const errors = super.initialize();
|
||||||
Settings.registerPanel("themes", Strings.Panels.themes, {element: () => SettingsRenderer.getAddonPanel(Strings.Panels.themes, this.addonList, this.state, {
|
Settings.registerPanel("themes", Strings.Panels.themes, {element: () => SettingsRenderer.getAddonPanel(Strings.Panels.themes, this.addonList, this.state, {
|
||||||
|
type: this.prefix,
|
||||||
folder: this.addonFolder,
|
folder: this.addonFolder,
|
||||||
onChange: this.toggleTheme.bind(this),
|
onChange: this.toggleTheme.bind(this),
|
||||||
reload: this.reloadTheme.bind(this),
|
reload: this.reloadTheme.bind(this),
|
||||||
|
|
|
@ -54,7 +54,7 @@ export default new class PublicServersConnection {
|
||||||
if (term) queries.push(`term=${term.replace(/ /g, "%20")}`);
|
if (term) queries.push(`term=${term.replace(/ /g, "%20")}`);
|
||||||
if (from) queries.push(`from=${from}`);
|
if (from) queries.push(`from=${from}`);
|
||||||
const query = `?${queries.join("&")}`;
|
const query = `?${queries.join("&")}`;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await fetch(`${this.endPoint}${query}`, {method: "GET"});
|
const response = await fetch(`${this.endPoint}${query}`, {method: "GET"});
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
|
|
|
@ -256,7 +256,12 @@
|
||||||
.bd-pagination button:hover,
|
.bd-pagination button:hover,
|
||||||
.bd-pagination button:active {
|
.bd-pagination button:active {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
background: transparent;
|
background: var(--background-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-pagination button:active {
|
||||||
|
opacity: 1;
|
||||||
|
background: var(--background-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-pagination button svg {
|
.bd-pagination button svg {
|
||||||
|
|
|
@ -36,11 +36,9 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
padding: 16px;
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: var(--background-secondary-alt);
|
background: var(--background-secondary);
|
||||||
border: 1px solid var(--background-tertiary);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-addon-list.bd-grid-view .bd-addon-card {
|
.bd-addon-list.bd-grid-view .bd-addon-card {
|
||||||
|
@ -49,6 +47,8 @@
|
||||||
|
|
||||||
.bd-addon-list .bd-addon-header {
|
.bd-addon-list .bd-addon-header {
|
||||||
color: var(--header-primary);
|
color: var(--header-primary);
|
||||||
|
background: var(--background-secondary-alt);
|
||||||
|
padding: 16px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
@ -58,8 +58,42 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bd-addon-header .bd-icon {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-title,
|
||||||
|
.bd-name,
|
||||||
|
.bd-meta {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-title {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-meta {
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-name::after,
|
||||||
|
.bd-version::after {
|
||||||
|
display: inline;
|
||||||
|
content: " ";
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-grid-view .bd-title {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-grid-view .bd-meta {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.bd-description-wrap {
|
.bd-description-wrap {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
padding: 8px 16px 0 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-addon-list .bd-description {
|
.bd-addon-list .bd-description {
|
||||||
|
@ -88,8 +122,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding-top: 8px;
|
padding: 8px 16px 16px 16px;
|
||||||
border-top: thin solid var(--background-modifier-accent);
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,50 @@
|
||||||
|
/*
|
||||||
|
<div class="bd-drop-container-wrap">
|
||||||
|
<div class="bd-drop-container">
|
||||||
|
<div class="bd-drop-icon"></div>
|
||||||
|
<div class="bd-drop-title">Install Addon</div>
|
||||||
|
<div class="bd-drop-message">Installs this plugin automatically</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
.bd-drop-container-wrap {
|
||||||
|
display: none;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba(0,0,0,0.7);
|
||||||
|
z-index: 1000;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-drop-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: #3e82e5;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-drop-icon {
|
||||||
|
background: url('https://maxcdn.icons8.com/Share/icon/p1em/Very_Basic/plus1600.png');
|
||||||
|
background-size: contain;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
filter: invert();
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-drop-title {
|
||||||
|
color: white;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 24px;
|
||||||
|
margin-top: 8px
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-drop-message {
|
||||||
|
color: white;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
*/
|
|
@ -0,0 +1,11 @@
|
||||||
|
import {React} from "modules";
|
||||||
|
|
||||||
|
export default class Extension extends React.Component {
|
||||||
|
render() {
|
||||||
|
const size = this.props.size || "24px";
|
||||||
|
return <svg viewBox="0 0 24 24" fill="#FFFFFF" style={{width: size, height: size}} onClick={this.props.onClick} className={this.props.className}>
|
||||||
|
<path d="M0 0h24v24H0z" fill="none"/>
|
||||||
|
<path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/>
|
||||||
|
</svg>;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,11 @@
|
||||||
|
import {React} from "modules";
|
||||||
|
|
||||||
|
export default class Theme extends React.Component {
|
||||||
|
render() {
|
||||||
|
const size = this.props.size || "24px";
|
||||||
|
return <svg viewBox="0 0 24 24" fill="#FFFFFF" style={{width: size, height: size}} onClick={this.props.onClick} className={this.props.className}>
|
||||||
|
<path d="M0 0h24v24H0z" fill="none"/>
|
||||||
|
<path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/>
|
||||||
|
</svg>;
|
||||||
|
}
|
||||||
|
}
|
|
@ -267,7 +267,7 @@ export default class Modals {
|
||||||
|
|
||||||
const mc = this.ModalComponents;
|
const mc = this.ModalComponents;
|
||||||
const modal = props => {
|
const modal = props => {
|
||||||
return React.createElement(mc.ModalRoot, Object.assign({size: mc.ModalSize.SMALL, className: "bd-addon-modal"}, props),
|
return React.createElement(mc.ModalRoot, Object.assign({size: mc.ModalSize.MEDIUM, className: "bd-addon-modal"}, props),
|
||||||
React.createElement(mc.ModalHeader, {separator: false, className: "bd-addon-modal-header"},
|
React.createElement(mc.ModalHeader, {separator: false, className: "bd-addon-modal-header"},
|
||||||
React.createElement(this.FormTitle, {tag: "h4"}, `${name} Settings`),
|
React.createElement(this.FormTitle, {tag: "h4"}, `${name} Settings`),
|
||||||
React.createElement(this.FlexElements.Child, {grow: 0},
|
React.createElement(this.FlexElements.Child, {grow: 0},
|
||||||
|
|
|
@ -16,8 +16,8 @@ const EMPTY_RESULTS = {
|
||||||
servers: [],
|
servers: [],
|
||||||
size: 0,
|
size: 0,
|
||||||
total: 0,
|
total: 0,
|
||||||
page: 0,
|
page: 1,
|
||||||
numPages: 0
|
numPages: 1
|
||||||
};
|
};
|
||||||
|
|
||||||
export default class PublicServers extends React.Component {
|
export default class PublicServers extends React.Component {
|
||||||
|
@ -166,8 +166,7 @@ export default class PublicServers extends React.Component {
|
||||||
return [React.createElement(SettingsTitle, {text: this.title, button: connectButton}),
|
return [React.createElement(SettingsTitle, {text: this.title, button: connectButton}),
|
||||||
this.state.results.numPages > 1 && this.pagination,
|
this.state.results.numPages > 1 && this.pagination,
|
||||||
content,
|
content,
|
||||||
this.state.results.numPages > 1 && this.pagination,
|
this.state.results.numPages > 1 && this.pagination
|
||||||
this.state.results.numPages > 1 && this.state.query && React.createElement(SettingsTitle, {text: this.title})
|
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -179,6 +178,8 @@ export default class PublicServers extends React.Component {
|
||||||
<div className="bd-placeholder-card"></div>
|
<div className="bd-placeholder-card"></div>
|
||||||
<div className="bd-placeholder-card"></div>
|
<div className="bd-placeholder-card"></div>
|
||||||
<div className="bd-placeholder-card"></div>
|
<div className="bd-placeholder-card"></div>
|
||||||
|
<div className="bd-placeholder-card"></div>
|
||||||
|
<div className="bd-placeholder-card"></div>
|
||||||
</div>;
|
</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -78,14 +78,20 @@ export default new class SettingsRenderer {
|
||||||
if (collection.disabled) continue;
|
if (collection.disabled) continue;
|
||||||
insert({
|
insert({
|
||||||
section: collection.name,
|
section: collection.name,
|
||||||
label: collection.name,
|
label: collection.name.toString(),
|
||||||
|
className: `bd-${collection.id}-tab`,
|
||||||
element: () => this.buildSettingsPanel(collection.id, collection.name, collection.settings, Settings.state[collection.id], Settings.onSettingChange.bind(Settings, collection.id), collection.button ? collection.button : null)
|
element: () => this.buildSettingsPanel(collection.id, collection.name, collection.settings, Settings.state[collection.id], Settings.onSettingChange.bind(Settings, collection.id), collection.button ? collection.button : null)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
for (const panel of Settings.panels.sort((a,b) => a.order > b.order)) {
|
for (const panel of Settings.panels.sort((a,b) => a.order > b.order)) {
|
||||||
if (panel.clickListener) panel.onClick = (event) => panel.clickListener(thisObject, event, returnValue);
|
if (panel.clickListener) panel.onClick = (event) => panel.clickListener(thisObject, event, returnValue);
|
||||||
|
if (!panel.className) panel.className = `bd-${panel.id}-tab`;
|
||||||
|
if (typeof(panel.label) !== "string") panel.label = panel.label.toString();
|
||||||
insert(panel);
|
insert(panel);
|
||||||
}
|
}
|
||||||
|
// for (const tab of returnValue) {
|
||||||
|
// if (!tab.className) tab.className = `${DOM.escapeID(tab.section).toLowerCase()}-tab`;
|
||||||
|
// }
|
||||||
});
|
});
|
||||||
this.forceUpdate();
|
this.forceUpdate();
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,6 +11,8 @@ import MoneyIcon from "../icons/dollarsign";
|
||||||
import WebIcon from "../icons/globe";
|
import WebIcon from "../icons/globe";
|
||||||
import PatreonIcon from "../icons/patreon";
|
import PatreonIcon from "../icons/patreon";
|
||||||
import SupportIcon from "../icons/support";
|
import SupportIcon from "../icons/support";
|
||||||
|
import ExtIcon from "../icons/extension";
|
||||||
|
import ThemeIcon from "../icons/theme";
|
||||||
import Modals from "../modals";
|
import Modals from "../modals";
|
||||||
import Toasts from "../toasts";
|
import Toasts from "../toasts";
|
||||||
|
|
||||||
|
@ -23,6 +25,11 @@ const LinkIcons = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const Tooltip = WebpackModules.getByDisplayName("Tooltip");
|
const Tooltip = WebpackModules.getByDisplayName("Tooltip");
|
||||||
|
const LayerStack = WebpackModules.getByProps("popLayer");
|
||||||
|
const UserStore = WebpackModules.getByProps("getCurrentUser");
|
||||||
|
const ChannelStore = WebpackModules.getByProps("getDMFromUserId");
|
||||||
|
const PrivateChannelActions = WebpackModules.getByProps("openPrivateChannel");
|
||||||
|
const ChannelActions = WebpackModules.getByProps("selectPrivateChannel");
|
||||||
|
|
||||||
export default class AddonCard extends React.Component {
|
export default class AddonCard extends React.Component {
|
||||||
|
|
||||||
|
@ -38,6 +45,7 @@ export default class AddonCard extends React.Component {
|
||||||
this.onChange = this.onChange.bind(this);
|
this.onChange = this.onChange.bind(this);
|
||||||
this.reload = this.reload.bind(this);
|
this.reload = this.reload.bind(this);
|
||||||
this.showSettings = this.showSettings.bind(this);
|
this.showSettings = this.showSettings.bind(this);
|
||||||
|
this.messageAuthor = this.messageAuthor.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
showSettings() {
|
showSettings() {
|
||||||
|
@ -66,15 +74,34 @@ export default class AddonCard extends React.Component {
|
||||||
this.forceUpdate();
|
this.forceUpdate();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
messageAuthor() {
|
||||||
|
if (!this.props.addon.authorId) return;
|
||||||
|
if (LayerStack) LayerStack.popLayer();
|
||||||
|
if (!UserStore || !ChannelActions || !ChannelStore || !PrivateChannelActions) return;
|
||||||
|
const selfId = UserStore.getCurrentUser().id;
|
||||||
|
if (selfId == this.props.addon.authorId) return;
|
||||||
|
const privateChannelId = ChannelStore.getDMFromUserId(this.props.addon.authorId);
|
||||||
|
if (privateChannelId) return ChannelActions.selectPrivateChannel(privateChannelId);
|
||||||
|
PrivateChannelActions.openPrivateChannel(selfId, this.props.addon.authorId);
|
||||||
|
}
|
||||||
|
|
||||||
buildTitle(name, version, author) {
|
buildTitle(name, version, author) {
|
||||||
const title = Strings.Addons.title.split(/({{[A-Za-z]+}})/);
|
const authorArray = Strings.Addons.byline.split(/({{[A-Za-z]+}})/);
|
||||||
const nameIndex = title.findIndex(s => s == "{{name}}");
|
const authorComponent = author.link || author.id
|
||||||
if (nameIndex) title[nameIndex] = React.createElement("span", {className: "bd-name"}, name);
|
? <a className="bd-link bd-link-website" href={author.link || null} onClick={this.messageAuthor} target="_blank" rel="noopener noreferrer">{author.name}</a>
|
||||||
const versionIndex = title.findIndex(s => s == "{{version}}");
|
: <span className="bd-author">{author.name}</span>;
|
||||||
if (nameIndex) title[versionIndex] = React.createElement("span", {className: "bd-version"}, version);
|
|
||||||
const authorIndex = title.findIndex(s => s == "{{author}}");
|
const authorIndex = authorArray.findIndex(s => s == "{{author}}");
|
||||||
if (nameIndex) title[authorIndex] = React.createElement("span", {className: "bd-author"}, author);
|
if (authorIndex) authorArray[authorIndex] = authorComponent;
|
||||||
return title.flat();
|
|
||||||
|
return [
|
||||||
|
React.createElement("div", {className: "bd-name"}, name),
|
||||||
|
React.createElement("div", {className: "bd-meta"},
|
||||||
|
React.createElement("span", {className: "bd-version"}, `v${version}`),
|
||||||
|
...authorArray
|
||||||
|
)
|
||||||
|
];
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
buildLink(which) {
|
buildLink(which) {
|
||||||
|
@ -139,7 +166,8 @@ export default class AddonCard extends React.Component {
|
||||||
|
|
||||||
return <div id={`${addon.id}-card`} className="bd-addon-card settings-closed">
|
return <div id={`${addon.id}-card`} className="bd-addon-card settings-closed">
|
||||||
<div className="bd-addon-header">
|
<div className="bd-addon-header">
|
||||||
<span className="bd-title">{this.buildTitle(name, version, author)}</span>
|
{this.props.type === "plugin" ? <ExtIcon size="18px" className="bd-icon" /> : <ThemeIcon size="18px" className="bd-icon" />}
|
||||||
|
<div className="bd-title">{this.buildTitle(name, version, {name: author, id: this.props.addon.authorId, link: this.props.addon.authorLink})}</div>
|
||||||
<Switch checked={this.props.enabled} onChange={this.onChange} />
|
<Switch checked={this.props.enabled} onChange={this.onChange} />
|
||||||
</div>
|
</div>
|
||||||
<div className="bd-description-wrap scroller-wrap fade"><div className="bd-description scroller">{SimpleMarkdown.parseToReact(description)}</div></div>
|
<div className="bd-description-wrap scroller-wrap fade"><div className="bd-description scroller">{SimpleMarkdown.parseToReact(description)}</div></div>
|
||||||
|
|
|
@ -41,16 +41,16 @@ export default class AddonList extends React.Component {
|
||||||
|
|
||||||
onControlChange(control, value) {
|
onControlChange(control, value) {
|
||||||
const addonlistControls = DataStore.getBDData("addonlistControls") || {};
|
const addonlistControls = DataStore.getBDData("addonlistControls") || {};
|
||||||
if (!addonlistControls[this.props.title.toLowerCase()]) addonlistControls[this.props.title.toLowerCase()] = {};
|
if (!addonlistControls[this.props.type]) addonlistControls[this.props.type] = {};
|
||||||
addonlistControls[this.props.title.toLowerCase()][control] = value;
|
addonlistControls[this.props.type][control] = value;
|
||||||
DataStore.setBDData("addonlistControls", addonlistControls);
|
DataStore.setBDData("addonlistControls", addonlistControls);
|
||||||
}
|
}
|
||||||
|
|
||||||
getControlState(control, defaultValue) {
|
getControlState(control, defaultValue) {
|
||||||
const addonlistControls = DataStore.getBDData("addonlistControls") || {};
|
const addonlistControls = DataStore.getBDData("addonlistControls") || {};
|
||||||
if (!addonlistControls[this.props.title.toLowerCase()]) return defaultValue;
|
if (!addonlistControls[this.props.type]) return defaultValue;
|
||||||
if (!addonlistControls[this.props.title.toLowerCase()].hasOwnProperty(control)) return defaultValue;
|
if (!addonlistControls[this.props.type].hasOwnProperty(control)) return defaultValue;
|
||||||
return addonlistControls[this.props.title.toLowerCase()][control];
|
return addonlistControls[this.props.type][control];
|
||||||
}
|
}
|
||||||
|
|
||||||
update() {
|
update() {
|
||||||
|
@ -107,9 +107,9 @@ export default class AddonList extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
get emptyImage() {
|
get emptyImage() {
|
||||||
const message = Strings.Addons.blankSlateMessage.format({link: `https://betterdiscordlibrary.com/${this.props.title.toLowerCase()}`, type: this.props.title}).toString();
|
const message = Strings.Addons.blankSlateMessage.format({link: `https://betterdiscordlibrary.com/${this.props.type}`, type: this.props.type}).toString();
|
||||||
return <EmptyImage title={Strings.Addons.blankSlateHeader.format({type: this.props.title})} message={message}>
|
return <EmptyImage title={Strings.Addons.blankSlateHeader.format({type: this.props.type})} message={message}>
|
||||||
<button className="bd-button" onClick={this.openFolder}>{Strings.Addons.openFolder.format({type: this.props.title})}</button>
|
<button className="bd-button" onClick={this.openFolder}>{Strings.Addons.openFolder.format({type: this.props.type})}</button>
|
||||||
</EmptyImage>;
|
</EmptyImage>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -147,7 +147,7 @@ export default class AddonList extends React.Component {
|
||||||
const renderedCards = sortedAddons.map(addon => {
|
const renderedCards = sortedAddons.map(addon => {
|
||||||
const hasSettings = addon.instance && typeof(addon.instance.getSettingsPanel) === "function";
|
const hasSettings = addon.instance && typeof(addon.instance.getSettingsPanel) === "function";
|
||||||
const getSettings = hasSettings && addon.instance.getSettingsPanel.bind(addon.instance);
|
const getSettings = hasSettings && addon.instance.getSettingsPanel.bind(addon.instance);
|
||||||
return <ErrorBoundary><AddonCard editAddon={this.editAddon.bind(this, addon.id)} deleteAddon={this.deleteAddon.bind(this, addon.id)} showReloadIcon={showReloadIcon} key={addon.id} enabled={addonState[addon.id]} addon={addon} onChange={onChange} reload={reload} hasSettings={hasSettings} getSettingsPanel={getSettings} /></ErrorBoundary>;
|
return <ErrorBoundary><AddonCard type={this.props.type} editAddon={this.editAddon.bind(this, addon.id)} deleteAddon={this.deleteAddon.bind(this, addon.id)} showReloadIcon={showReloadIcon} key={addon.id} enabled={addonState[addon.id]} addon={addon} onChange={onChange} reload={reload} hasSettings={hasSettings} getSettingsPanel={getSettings} /></ErrorBoundary>;
|
||||||
});
|
});
|
||||||
|
|
||||||
const hasAddonsInstalled = this.props.addonList.length !== 0;
|
const hasAddonsInstalled = this.props.addonList.length !== 0;
|
||||||
|
|
Loading…
Reference in New Issue