initial customcss
This commit is contained in:
parent
f3a1d789c8
commit
8ee16509a8
96
js/main.js
96
js/main.js
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -9,4 +9,6 @@ export {default as ColoredText} from "./coloredtext";
|
|||
export {default as VoiceDisconnect} from "./voicedisconnect";
|
||||
export {default as EmoteMenu} from "./emotemenu";
|
||||
export {default as EmoteAutocaps} from "./emoteautocaps";
|
||||
export {default as EmoteModule} from "./emotes";
|
||||
export {default as EmoteModule} from "./emotes";
|
||||
export {default as WindowPrefs} from "./windowprefs";
|
||||
export {default as CustomCSS} from "./customcss";
|
|
@ -0,0 +1,20 @@
|
|||
import Builtin from "../structs/builtin";
|
||||
import {Settings} from "modules";
|
||||
import CSSEditor from "../ui/customcss/editor";
|
||||
|
||||
export default new class CustomCSS extends Builtin {
|
||||
get name() {return "Custom CSS";}
|
||||
get category() {return "customcss";}
|
||||
get id() {return "customcss";}
|
||||
|
||||
enabled() {
|
||||
Settings.registerPanel(this.id, this.name, {
|
||||
element: CSSEditor,
|
||||
order: 2
|
||||
});
|
||||
}
|
||||
|
||||
disabled() {
|
||||
Settings.removePanel(this.id);
|
||||
}
|
||||
};
|
|
@ -169,5 +169,42 @@ export default [
|
|||
hidden: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
id: "customcss",
|
||||
name: "Custom CSS",
|
||||
collapsible: true,
|
||||
shown: false,
|
||||
settings: [
|
||||
{
|
||||
type: "switch",
|
||||
id: "customcss",
|
||||
name: "Custom CSS",
|
||||
note: "Enables the Custom CSS tab",
|
||||
value: true
|
||||
},
|
||||
{
|
||||
type: "switch",
|
||||
id: "liveUpdate",
|
||||
name: "Live Update",
|
||||
note: "Updates the css as you type",
|
||||
value: false
|
||||
},
|
||||
{
|
||||
type: "switch",
|
||||
id: "startDetached",
|
||||
name: "Start Detached",
|
||||
note: "Clicking the Custom CSS tab opens the editor in a separate window",
|
||||
value: false
|
||||
},
|
||||
{
|
||||
type: "switch",
|
||||
id: "nativeOpen",
|
||||
name: "Open in Native Editor",
|
||||
note: "Clicking the Custom CSS tab opens your custom css in your native editor",
|
||||
value: false
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
|
@ -1,5 +1,4 @@
|
|||
import {Config} from "data";
|
||||
import proxyLocalStorage from "./localstorage";
|
||||
import Core from "./modules/core";
|
||||
import BdApi from "./modules/pluginapi";
|
||||
import PluginManager from "./modules/pluginmanager";
|
||||
|
@ -11,7 +10,7 @@ import DataStore from "./modules/datastore";
|
|||
import EmoteModule from "./builtins/emotes";
|
||||
|
||||
// Perform some setup
|
||||
proxyLocalStorage();
|
||||
// proxyLocalStorage();
|
||||
const loadingIcon = document.createElement("div");
|
||||
loadingIcon.className = "bd-loaderv2";
|
||||
loadingIcon.title = "BandagedBD is loading...";
|
||||
|
|
|
@ -1,51 +0,0 @@
|
|||
/* Localstorage fix */
|
||||
export default function() {
|
||||
|
||||
const fs = require("fs");
|
||||
const platform = process.platform;
|
||||
const dataPath = (platform === "win32" ? process.env.APPDATA : platform === "darwin" ? process.env.HOME + "/Library/Preferences" : process.env.HOME + "/.config") + "/BetterDiscord/";
|
||||
const localStorageFile = "localStorage.json";
|
||||
|
||||
let data = {};
|
||||
if (fs.existsSync(`${dataPath}${localStorageFile}`)) {
|
||||
try {
|
||||
data = JSON.parse(fs.readFileSync(`${dataPath}${localStorageFile}`));
|
||||
}
|
||||
catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
else if (fs.existsSync(localStorageFile)) {
|
||||
try {
|
||||
data = JSON.parse(fs.readFileSync(localStorageFile));
|
||||
}
|
||||
catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
|
||||
const storage = data;
|
||||
storage.setItem = function(i, v) {
|
||||
storage[i] = v;
|
||||
this.save();
|
||||
};
|
||||
storage.getItem = function(i) {
|
||||
return storage[i] || null;
|
||||
};
|
||||
storage.save = function() {
|
||||
fs.writeFileSync(`${dataPath}${localStorageFile}`, JSON.stringify(this), null, 4);
|
||||
};
|
||||
|
||||
const lsProxy = new Proxy(storage, {
|
||||
set: function(target, name, val) {
|
||||
storage[name] = val;
|
||||
storage.save();
|
||||
},
|
||||
get: function(target, name) {
|
||||
return storage[name] || null;
|
||||
}
|
||||
});
|
||||
|
||||
window.localStorage = null;
|
||||
|
||||
}
|
|
@ -49,7 +49,7 @@ export default new class PluginManager extends ContentManager {
|
|||
loadAllPlugins() {
|
||||
const errors = this.loadAllContent();
|
||||
this.setupFunctions();
|
||||
Settings.registerPanel("Plugins", {element: () => SettingsRenderer.getContentPanel("Plugins", this.contentList, this.state, {
|
||||
Settings.registerPanel("plugins", "Plugins", {element: () => SettingsRenderer.getContentPanel("Plugins", this.contentList, this.state, {
|
||||
folder: this.contentFolder,
|
||||
onChange: this.togglePlugin.bind(this),
|
||||
reload: this.reloadPlugin.bind(this),
|
||||
|
|
|
@ -23,7 +23,7 @@ export default new class SettingsManager {
|
|||
}
|
||||
|
||||
registerCollection(id, name, settings, button = null) {
|
||||
if (this.collections.find(c => c.id == id)) Utilities.err("Settings", "Already have a collection with id " + id);
|
||||
if (this.collections.find(c => c.id == id)) return Utilities.err("Settings", "Already have a collection with id " + id);
|
||||
this.collections.push({
|
||||
type: "collection",
|
||||
id: id,
|
||||
|
@ -36,18 +36,25 @@ export default new class SettingsManager {
|
|||
|
||||
removeCollection(id) {
|
||||
const location = this.collections.findIndex(c => c.id == id);
|
||||
if (!location < 0) Utilities.err("Settings", "No collection with id " + id);
|
||||
if (!location < 0) return Utilities.err("Settings", "No collection with id " + id);
|
||||
this.collections.splice(location, 1);
|
||||
}
|
||||
|
||||
registerPanel(name, options) {
|
||||
const {element, onClick} = options;
|
||||
const section = {label: name, section: name};
|
||||
registerPanel(id, name, options) {
|
||||
if (this.panels.find(p => p.id == id)) return Utilities.err("Settings", "Already have a panel with id " + id);
|
||||
const {element, onClick, order = 1} = options;
|
||||
const section = {id, order, label: name, section: name};
|
||||
if (onClick) section.onClick = onClick;
|
||||
else section.element = element instanceof DiscordModules.React.Component ? () => DiscordModules.React.createElement(element, {}) : typeof(element) == "function" ? element : () => element;
|
||||
this.panels.push(section);
|
||||
}
|
||||
|
||||
removePanel(id) {
|
||||
const location = this.panels.findIndex(c => c.id == id);
|
||||
if (!location < 0) return Utilities.err("Settings", "No collection with id " + id);
|
||||
this.panels.splice(location, 1);
|
||||
}
|
||||
|
||||
getPath(path, collectionId = "", categoryId = "") {
|
||||
const collection = path.length == 3 ? path[0] : collectionId;
|
||||
const category = path.length == 3 ? path[1] : path.length == 2 ? path[0] : categoryId;
|
||||
|
@ -109,7 +116,7 @@ export default new class SettingsManager {
|
|||
element: () => SettingsRenderer.buildSettingsPanel(collection.name, collection.settings, this.state[collection.id], this.onSettingChange.bind(this, collection.id), collection.button ? collection.button : null)
|
||||
});
|
||||
}
|
||||
for (const panel of this.panels) insert(panel);
|
||||
for (const panel of this.panels.sort((a,b) => a.order > b.order)) insert(panel);
|
||||
insert({section: "BBD Test", label: "Test Tab", onClick: function() {Toasts.success("This can just be a click listener!", {forceShow: true});}});
|
||||
insert({section: "CUSTOM", element: () => SettingsRenderer.attribution});
|
||||
}});
|
||||
|
@ -142,7 +149,7 @@ export default new class SettingsManager {
|
|||
for (const collection in this.state) {
|
||||
if (!previousState[collection]) Object.assign(previousState, {[collection]: this.state[collection]});
|
||||
for (const category in this.state[collection]) {
|
||||
if (!previousState[collection][category]) Object.assign(previousState[collection][category], {[category]: this.state[collection][category]});
|
||||
if (!previousState[collection][category]) Object.assign(previousState[collection], {[category]: this.state[collection][category]});
|
||||
for (const setting in this.state[collection][category]) {
|
||||
if (previousState[collection][category][setting] == undefined) continue;
|
||||
this.state[collection][category][setting] = previousState[collection][category][setting];
|
||||
|
@ -154,10 +161,10 @@ export default new class SettingsManager {
|
|||
}
|
||||
|
||||
onSettingChange(collection, category, id, value) {
|
||||
const before = this.collections.length;
|
||||
const before = this.collections.length + this.panels.length;
|
||||
this.state[collection][category][id] = value;
|
||||
Events.dispatch("setting-updated", collection, category, id, value);
|
||||
const after = this.collections.length;
|
||||
const after = this.collections.length + this.panels.length;
|
||||
this.saveSettings();
|
||||
if (before != after) this.forceUpdate();
|
||||
}
|
||||
|
@ -177,6 +184,16 @@ export default new class SettingsManager {
|
|||
return this.state[collection][category][id];
|
||||
}
|
||||
|
||||
set(collection, category, id, value) {
|
||||
if (arguments.length == 3) {
|
||||
value = id;
|
||||
id = category;
|
||||
category = collection;
|
||||
collection = "settings";
|
||||
}
|
||||
return this.onSettingChange(collection, category, id, value);
|
||||
}
|
||||
|
||||
on(collection, category, identifier, callback) {
|
||||
const handler = (col, cat, id, value) => {
|
||||
if (col !== collection || cat !== category || id !== identifier) return;
|
||||
|
|
|
@ -17,7 +17,7 @@ export default new class ThemeManager extends ContentManager {
|
|||
/* Aliases */
|
||||
updateThemeList() {return this.updateList();}
|
||||
loadAllThemes() {
|
||||
Settings.registerPanel("Themes", {element: () => SettingsRenderer.getContentPanel("Themes", this.contentList, this.state, {
|
||||
Settings.registerPanel("themes", "Themes", {element: () => SettingsRenderer.getContentPanel("Themes", this.contentList, this.state, {
|
||||
folder: this.contentFolder,
|
||||
onChange: this.toggleTheme.bind(this),
|
||||
reload: this.reloadTheme.bind(this),
|
||||
|
|
|
@ -0,0 +1,40 @@
|
|||
import {React} from "modules";
|
||||
|
||||
export default class Checkbox extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.onClick = this.onClick.bind(this);
|
||||
this.state = {
|
||||
checked: this.props.checked || false
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return React.createElement(
|
||||
"li",
|
||||
null,
|
||||
React.createElement(
|
||||
"div",
|
||||
{className: "checkbox checkbox-3kaeSU da-checkbox checkbox-3EVISJ da-checkbox", onClick: this.onClick},
|
||||
React.createElement(
|
||||
"div",
|
||||
{className: "checkbox-inner checkboxInner-3yjcPe da-checkboxInner"},
|
||||
React.createElement("input", {className: "checkboxElement-1qV33p da-checkboxElement", checked: this.state.checked, onChange: () => {}, type: "checkbox"}),
|
||||
React.createElement("span", null)
|
||||
),
|
||||
React.createElement(
|
||||
"span",
|
||||
null,
|
||||
this.props.text
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
onClick() {
|
||||
this.props.onChange(this.props.id, !this.state.checked);
|
||||
this.setState({
|
||||
checked: !this.state.checked
|
||||
});
|
||||
}
|
||||
}
|
|
@ -1,9 +1,9 @@
|
|||
import {SettingsCookie} from "data";
|
||||
import {BDV2, DataStore, Core, DiscordModules} from "modules";
|
||||
|
||||
import Checkbox from "../settings/checkbox";
|
||||
import Checkbox from "./checkbox";
|
||||
|
||||
export default class V2C_CssEditorDetached extends DiscordModules.React.Component {
|
||||
export default class CssEditorDetached extends DiscordModules.React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
|
@ -1,30 +1,24 @@
|
|||
import {SettingsCookie} from "data";
|
||||
import {BDV2, DataStore, Core, DiscordModules} from "modules";
|
||||
import {BDV2, DataStore, React, ReactDOM, Settings} from "modules";
|
||||
|
||||
import EditorDetached from "./detached";
|
||||
import Checkbox from "../settings/checkbox";
|
||||
import Checkbox from "./checkbox";
|
||||
import SettingsTitle from "../settings/title";
|
||||
|
||||
export default class V2C_CssEditor extends DiscordModules.React.Component {
|
||||
export default class CssEditor extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props.lines = 0;
|
||||
this.setInitialState();
|
||||
this.attach = this.attach.bind(this);
|
||||
this.detachedEditor = DiscordModules.React.createElement(EditorDetached, {attach: this.attach});
|
||||
this.state = {
|
||||
detached: this.props.detached || BDV2.editorDetached
|
||||
};
|
||||
// this.attach = this.attach.bind(this);
|
||||
// this.detachedEditor = React.createElement(EditorDetached, {attach: this.attach});
|
||||
this.onClick = this.onClick.bind(this);
|
||||
this.updateCss = this.updateCss.bind(this);
|
||||
this.saveCss = this.saveCss.bind(this);
|
||||
this.detach = this.detach.bind(this);
|
||||
}
|
||||
|
||||
setInitialState() {
|
||||
this.state = {
|
||||
detached: this.props.detached || BDV2.editorDetached
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
// this.updateLineCount();
|
||||
this.editor = ace.edit("bd-customcss-editor");
|
||||
|
@ -33,7 +27,7 @@ export default class V2C_CssEditor extends DiscordModules.React.Component {
|
|||
this.editor.setShowPrintMargin(false);
|
||||
this.editor.setFontSize(14);
|
||||
this.editor.on("change", () => {
|
||||
if (!SettingsCookie["bda-css-0"]) return;
|
||||
if (!Settings.get("settings", "customcss", "liveUpdate")) return;
|
||||
this.saveCss();
|
||||
this.updateCss();
|
||||
});
|
||||
|
@ -45,7 +39,7 @@ export default class V2C_CssEditor extends DiscordModules.React.Component {
|
|||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (prevState.detached && !this.state.detached) {
|
||||
DiscordModules.ReactDOM.unmountComponentAtNode(this.detachedRoot);
|
||||
ReactDOM.unmountComponentAtNode(this.detachedRoot);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -80,77 +74,75 @@ export default class V2C_CssEditor extends DiscordModules.React.Component {
|
|||
|
||||
render() {
|
||||
const self = this;
|
||||
|
||||
const {detached} = self.state;
|
||||
return DiscordModules.React.createElement(
|
||||
return React.createElement(
|
||||
"div",
|
||||
{className: "contentColumn-2hrIYH contentColumnDefault-1VQkGM content-column default", style: {padding: "60px 40px 0px"}},
|
||||
detached && DiscordModules.React.createElement(
|
||||
"div",
|
||||
{id: "editor-detached"},
|
||||
DiscordModules.React.createElement(SettingsTitle, {text: "Custom CSS Editor"}),
|
||||
DiscordModules.React.createElement(
|
||||
"h3",
|
||||
null,
|
||||
"Editor Detached"
|
||||
),
|
||||
DiscordModules.React.createElement(
|
||||
"button",
|
||||
{className: "btn btn-primary", onClick: () => {
|
||||
self.attach();
|
||||
}},
|
||||
"Attach"
|
||||
)
|
||||
),
|
||||
!detached && DiscordModules.React.createElement(
|
||||
// detached && React.createElement(
|
||||
// "div",
|
||||
// {id: "editor-detached"},
|
||||
// React.createElement(SettingsTitle, {text: "Custom CSS Editor"}),
|
||||
// React.createElement(
|
||||
// "h3",
|
||||
// null,
|
||||
// "Editor Detached"
|
||||
// ),
|
||||
// React.createElement(
|
||||
// "button",
|
||||
// {className: "btn btn-primary", onClick: () => {
|
||||
// self.attach();
|
||||
// }},
|
||||
// "Attach"
|
||||
// )
|
||||
// ),
|
||||
/*!detached && */React.createElement(
|
||||
"div",
|
||||
null,
|
||||
DiscordModules.React.createElement(SettingsTitle, {text: "Custom CSS Editor"}),
|
||||
DiscordModules.React.createElement("div", {className: "editor-wrapper"},
|
||||
DiscordModules.React.createElement("div", {id: "bd-customcss-editor", className: "editor", ref: "editor"}, self.css)
|
||||
React.createElement(SettingsTitle, {text: "Custom CSS Editor"}),
|
||||
React.createElement("div", {className: "editor-wrapper"},
|
||||
React.createElement("div", {id: "bd-customcss-editor", className: "editor", ref: "editor"}, self.css)
|
||||
),
|
||||
DiscordModules.React.createElement(
|
||||
React.createElement(
|
||||
"div",
|
||||
{id: "bd-customcss-attach-controls"},
|
||||
DiscordModules.React.createElement(
|
||||
React.createElement(
|
||||
"ul",
|
||||
{className: "checkbox-group"},
|
||||
DiscordModules.React.createElement(Checkbox, {id: "live-update", text: "Live Update", onChange: this.onChange, checked: SettingsCookie["bda-css-0"]})
|
||||
React.createElement(Checkbox, {id: "live-update", text: "Live Update", onChange: this.onChange, checked: Settings.get("settings", "customcss", "liveUpdate")})
|
||||
),
|
||||
DiscordModules.React.createElement(
|
||||
React.createElement(
|
||||
"div",
|
||||
{id: "bd-customcss-detach-controls-button"},
|
||||
DiscordModules.React.createElement(
|
||||
React.createElement(
|
||||
"button",
|
||||
{style: {borderRadius: "3px 0 0 3px", borderRight: "1px solid #3f4146"}, className: "btn btn-primary", onClick: () => {
|
||||
self.onClick("update");
|
||||
}},
|
||||
"Update"
|
||||
),
|
||||
DiscordModules.React.createElement(
|
||||
React.createElement(
|
||||
"button",
|
||||
{style: {borderRadius: "0", borderLeft: "1px solid #2d2d2d", borderRight: "1px solid #2d2d2d"}, className: "btn btn-primary", onClick: () => {
|
||||
self.onClick("save");
|
||||
}},
|
||||
"Save"
|
||||
),
|
||||
DiscordModules.React.createElement(
|
||||
React.createElement(
|
||||
"button",
|
||||
{style: {borderRadius: "0 3px 3px 0", borderLeft: "1px solid #3f4146"}, className: "btn btn-primary", onClick: () => {
|
||||
self.onClick("detach");
|
||||
}},
|
||||
"Detach"
|
||||
),
|
||||
DiscordModules.React.createElement(
|
||||
React.createElement(
|
||||
"span",
|
||||
{style: {fontSize: "10px", marginLeft: "5px"}},
|
||||
"Unsaved changes are lost on detach"
|
||||
),
|
||||
DiscordModules.React.createElement("div", {className: "help-text"},
|
||||
React.createElement("div", {className: "help-text"},
|
||||
"Press ",
|
||||
DiscordModules.React.createElement("code", {className: "inline"}, "ctrl"),
|
||||
React.createElement("code", {className: "inline"}, "ctrl"),
|
||||
"+",
|
||||
DiscordModules.React.createElement("span", {className: "inline"}, ","),
|
||||
React.createElement("span", {className: "inline"}, ","),
|
||||
" with the editor focused to access the editor's settings."
|
||||
)
|
||||
)
|
||||
|
@ -176,8 +168,7 @@ export default class V2C_CssEditor extends DiscordModules.React.Component {
|
|||
onChange(id, checked) {
|
||||
switch (id) {
|
||||
case "live-update":
|
||||
SettingsCookie["bda-css-0"] = checked;
|
||||
Core.saveSettings();
|
||||
Settings.set("settings", "customcss", "liveUpdate", checked);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
@ -194,37 +185,38 @@ export default class V2C_CssEditor extends DiscordModules.React.Component {
|
|||
}
|
||||
|
||||
detach() {
|
||||
this.setState({
|
||||
detached: true
|
||||
});
|
||||
const droot = this.detachedRoot;
|
||||
if (!droot) {
|
||||
console.log("FAILED TO INJECT ROOT: .app");
|
||||
return;
|
||||
}
|
||||
DiscordModules.ReactDOM.render(this.detachedEditor, droot);
|
||||
return console.log("DETACH");
|
||||
// this.setState({
|
||||
// detached: true
|
||||
// });
|
||||
// const droot = this.detachedRoot;
|
||||
// if (!droot) {
|
||||
// console.log("FAILED TO INJECT ROOT: .app");
|
||||
// return;
|
||||
// }
|
||||
// ReactDOM.render(this.detachedEditor, droot);
|
||||
}
|
||||
|
||||
get detachedRoot() {
|
||||
const _root = $("#bd-customcss-detach-container");
|
||||
if (!_root.length) {
|
||||
if (!this.injectDetachedRoot()) return null;
|
||||
return this.detachedRoot;
|
||||
}
|
||||
return _root[0];
|
||||
}
|
||||
// get detachedRoot() {
|
||||
// const _root = $("#bd-customcss-detach-container");
|
||||
// if (!_root.length) {
|
||||
// if (!this.injectDetachedRoot()) return null;
|
||||
// return this.detachedRoot;
|
||||
// }
|
||||
// return _root[0];
|
||||
// }
|
||||
|
||||
injectDetachedRoot() {
|
||||
if (!$(".app, .app-2rEoOp").length) return false;
|
||||
$("<div/>", {
|
||||
id: "bd-customcss-detach-container"
|
||||
}).insertAfter($(".app, .app-2rEoOp"));
|
||||
return true;
|
||||
}
|
||||
// injectDetachedRoot() {
|
||||
// if (!$(".app, .app-2rEoOp").length) return false;
|
||||
// $("<div/>", {
|
||||
// id: "bd-customcss-detach-container"
|
||||
// }).insertAfter($(".app, .app-2rEoOp"));
|
||||
// return true;
|
||||
// }
|
||||
|
||||
attach() {
|
||||
this.setState({
|
||||
detached: false
|
||||
});
|
||||
}
|
||||
// attach() {
|
||||
// this.setState({
|
||||
// detached: false
|
||||
// });
|
||||
// }
|
||||
}
|
|
@ -1,6 +1,6 @@
|
|||
import {React} from "modules";
|
||||
|
||||
export default class V2C_XSvg extends React.Component {
|
||||
export default class XSvg extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import {React} from "modules";
|
||||
|
||||
export default class V2C_ReloadIcon extends React.Component {
|
||||
export default class ReloadIcon extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import {React} from "modules";
|
||||
|
||||
export default class V2C_ServerCard extends React.Component {
|
||||
export default class ServerCard extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
if (!this.props.server.iconUrl) this.props.server.iconUrl = this.props.fallback;
|
||||
|
@ -15,9 +15,6 @@ export default class V2C_ServerCard extends React.Component {
|
|||
return React.createElement(
|
||||
"div", // cardPrimary-1Hv-to
|
||||
{className: `card-3Qj_Yx cardPrimary-1Hv-to marginBottom8-AtZOdT bd-server-card${server.pinned ? " bd-server-card-pinned" : ""}`},
|
||||
// React.createElement(
|
||||
// "div",
|
||||
// { className: "flex-1xMQg5 flex-1O1GKY horizontal-1ae9ci horizontal-2EEEnY flex-1O1GKY directionRow-3v3tfG justifyStart-2yIZo0 alignStretch-1hwxMa noWrap-3jynv6" },
|
||||
React.createElement("img", {ref: "img", className: "bd-server-image", src: server.iconUrl, onError: this.handleError.bind(this)}),
|
||||
React.createElement(
|
||||
"div",
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import {React} from "modules";
|
||||
import CloseButton from "../icons/close";
|
||||
|
||||
export default class V2C_Tools extends React.Component {
|
||||
export default class Tools extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
@ -30,6 +30,5 @@ export default class V2C_Tools extends React.Component {
|
|||
if (this.props.onClick) {
|
||||
this.props.onClick();
|
||||
}
|
||||
$(".closeButton-1tv5uR").first().click();
|
||||
}
|
||||
}
|
|
@ -1,15 +1,16 @@
|
|||
import {React, ReactDOM} from "modules";
|
||||
|
||||
export default class V2C_Layer extends React.Component {
|
||||
export default class Layer extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.rootRef = React.createRef();
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
$(window).on(`keyup.${this.props.id}`, e => {
|
||||
if (e.which === 27) {
|
||||
ReactDOM.unmountComponentAtNode(this.refs.root.parentNode);
|
||||
ReactDOM.unmountComponentAtNode(this.rootRef.current.parentNode);
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -42,7 +43,7 @@ export default class V2C_Layer extends React.Component {
|
|||
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
UNSAFE_componentWillMount() {
|
||||
$("[class*=\"layer-\"]").addClass("publicServersOpen").animate({opacity: 0}, {
|
||||
step: function(now) {
|
||||
$(this).css("transform", `scale(${0.07 * now + 0.93}) translateZ(0px)`);
|
||||
|
@ -54,7 +55,7 @@ export default class V2C_Layer extends React.Component {
|
|||
render() {
|
||||
return React.createElement(
|
||||
"div",
|
||||
{className: "layer bd-layer layer-3QrUeG", id: this.props.id, ref: "root", style: {opacity: 0, transform: "scale(1.1) translateZ(0px)"}},
|
||||
{className: "layer bd-layer layer-3QrUeG", id: this.props.id, ref: this.rootRef, style: {opacity: 0, transform: "scale(1.1) translateZ(0px)"}},
|
||||
this.props.children
|
||||
);
|
||||
}
|
||||
|
|
|
@ -5,11 +5,21 @@ import TabBar from "./tabbar";
|
|||
import SettingsTitle from "../settings/title";
|
||||
import ServerCard from "./card";
|
||||
|
||||
export default class V2C_PublicServers extends React.Component {
|
||||
export default class PublicServers extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.setInitialState();
|
||||
this.state = {
|
||||
selectedCategory: -1,
|
||||
title: "Loading...",
|
||||
loading: true,
|
||||
servers: [],
|
||||
next: null,
|
||||
connection: {
|
||||
state: 0,
|
||||
user: null
|
||||
}
|
||||
};
|
||||
this.close = this.close.bind(this);
|
||||
this.changeCategory = this.changeCategory.bind(this);
|
||||
this.search = this.search.bind(this);
|
||||
|
@ -28,20 +38,6 @@ export default class V2C_PublicServers extends React.Component {
|
|||
this.checkConnection();
|
||||
}
|
||||
|
||||
setInitialState() {
|
||||
this.state = {
|
||||
selectedCategory: -1,
|
||||
title: "Loading...",
|
||||
loading: true,
|
||||
servers: [],
|
||||
next: null,
|
||||
connection: {
|
||||
state: 0,
|
||||
user: null
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
close() {
|
||||
ReactDOM.unmountComponentAtNode(document.getElementById(this.props.rootId));
|
||||
}
|
||||
|
@ -236,7 +232,7 @@ export default class V2C_PublicServers extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
return React.createElement(SidebarView, {ref: "sbv", children: this.component});
|
||||
return React.createElement(SidebarView, {ref: "sbv"}, this.component);
|
||||
}
|
||||
|
||||
get component() {
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
import {React} from "modules";
|
||||
|
||||
export default class V2C_Scroller extends React.Component {
|
||||
export default class Scroller extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.ref = React.createRef();
|
||||
}
|
||||
|
||||
render() {
|
||||
|
@ -21,7 +22,7 @@ export default class V2C_Scroller extends React.Component {
|
|||
{key: "scrollerwrap", className: wrapperClass},
|
||||
React.createElement(
|
||||
"div",
|
||||
{key: "scroller", ref: "scroller", className: scrollerClass},
|
||||
{key: "scroller", ref: this.ref, className: scrollerClass},
|
||||
children
|
||||
)
|
||||
);
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import {React} from "modules";
|
||||
import Scroller from "./scroller";
|
||||
|
||||
export default class V2C_SidebarView extends React.Component {
|
||||
export default class SidebarView extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
@ -15,16 +15,11 @@ export default class V2C_SidebarView extends React.Component {
|
|||
React.createElement(
|
||||
"div",
|
||||
{className: "sidebarRegion-VFTUkN sidebar-region"},
|
||||
React.createElement(Scroller, {key: "sidebarScroller", ref: "sidebarScroller", sidebar: true, fade: sidebar.fade || true, dark: sidebar.dark || true, children: sidebar.component})
|
||||
React.createElement(Scroller, {key: "sidebarScroller", sidebar: true, fade: sidebar.fade || true, dark: sidebar.dark || true}, sidebar.component)
|
||||
),
|
||||
React.createElement("div", {className: "contentRegion-3nDuYy content-region"},
|
||||
React.createElement("div", {className: "contentTransitionWrap-3hqOEW content-transition-wrap"},
|
||||
React.createElement("div", {className: "scrollerWrap-2lJEkd firefoxFixScrollFlex-cnI2ix contentRegionScrollerWrap-3YZXdm content-region-scroller-wrap scrollerThemed-2oenus themeGhost-28MSn0 scrollerTrack-1ZIpsv"},
|
||||
React.createElement("div", {className: "scroller-2FKFPG firefoxFixScrollFlex-cnI2ix contentRegionScroller-26nc1e content-region-scroller scroller", ref: "contentScroller"},
|
||||
React.createElement("div", {className: "contentColumn-2hrIYH contentColumnDefault-1VQkGM content-column default"}, content.component),
|
||||
tools.component
|
||||
)
|
||||
)
|
||||
React.createElement(Scroller, {key: "contentScroller", contentColumn: true, fade: content.fade || true, dark: content.dark || true}, content.component, tools.component)
|
||||
)
|
||||
)
|
||||
);
|
||||
|
|
|
@ -1,17 +1,13 @@
|
|||
import {React} from "modules";
|
||||
|
||||
class V2C_TabBarItem extends React.Component {
|
||||
class TabBarItem extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.setInitialState();
|
||||
this.onClick = this.onClick.bind(this);
|
||||
}
|
||||
|
||||
setInitialState() {
|
||||
this.state = {
|
||||
selected: this.props.selected || false
|
||||
};
|
||||
this.onClick = this.onClick.bind(this);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
@ -29,7 +25,7 @@ class V2C_TabBarItem extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
class V2C_TabBarSeparator extends React.Component {
|
||||
class TabBarSeparator extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
@ -39,7 +35,7 @@ class V2C_TabBarSeparator extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
class V2C_TabBarHeader extends React.Component {
|
||||
class TabBarHeader extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
@ -53,14 +49,14 @@ class V2C_TabBarHeader extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default class V2Cs_TabBar {
|
||||
export default class TabBar {
|
||||
static get Item() {
|
||||
return V2C_TabBarItem;
|
||||
return TabBarItem;
|
||||
}
|
||||
static get Header() {
|
||||
return V2C_TabBarHeader;
|
||||
return TabBarHeader;
|
||||
}
|
||||
static get Separator() {
|
||||
return V2C_TabBarSeparator;
|
||||
return TabBarSeparator;
|
||||
}
|
||||
}
|
|
@ -3,7 +3,7 @@ import {React, Utilities, Settings} from "modules";
|
|||
import CloseButton from "../icons/close";
|
||||
import ReloadIcon from "../icons/reload";
|
||||
|
||||
export default class V2C_PluginCard extends React.Component {
|
||||
export default class PluginCard extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
|
@ -2,7 +2,7 @@ import {React, Settings} from "modules";
|
|||
import ReloadIcon from "../icons/reload";
|
||||
// import Toasts from "../toasts";
|
||||
|
||||
export default class V2C_ThemeCard extends React.Component {
|
||||
export default class ThemeCard extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
Loading…
Reference in New Issue