');for(const s of e){const e=$(`
\n
${s.name?s.name:s.file}
\n
${s.message}
\n
\n
`);t.append(e),s.error&&e.find("a").on("click",e=>{e.preventDefault(),c.err("ContentManager",`Error details for ${s.name?s.name:s.file}.`,s.error)})}return t},r=[n(e),n(t)];s.find(".tab-bar-item").on("click",e=>{e.preventDefault(),s.find(".tab-bar-item").removeClass("selected"),$(e.target).addClass("selected"),s.find(".scroller").empty().append(r[$(e.target).index()])}),s.find(".footer button").on("click",()=>{s.addClass("closing"),setTimeout(()=>{s.remove()},300)}),s.find(".bd-backdrop").on("click",()=>{s.addClass("closing"),setTimeout(()=>{s.remove()},300)}),s.appendTo("#app-mount"),e.length?s.find(".tab-bar-item")[0].click():s.find(".tab-bar-item")[1].click()}}const Ce={get React(){return d.React},get ReactDOM(){return d.ReactDOM},get WindowConfigFile(){if(this._windowConfigFile)return this._windowConfigFile;const e=s(2).remote.app,t=s(1),n=e.getAppPath(),r=e.getPath("userData"),i=t.resolve(r,e.getVersion(),"modules","discord_desktop_core","injector","config.json"),o=t.resolve(n,"..","app","config.json"),a=s(0),l=a.existsSync(o)?o:a.existsSync(i)?i:null;return this._windowConfigFile=l||null},getAllWindowPreferences:function(){return this.WindowConfigFile?require(this.WindowConfigFile):{}},getWindowPreference:function(e){if(this.WindowConfigFile)return this.getAllWindowPreferences()[e]},setWindowPreference:function(e,t){if(!this.WindowConfigFile)return;const n=s(0),r=this.getAllWindowPreferences();r[e]=t,delete s.c[this.WindowConfigFile],n.writeFileSync(this.WindowConfigFile,JSON.stringify(r,null,4))},injectCSS:function(e,t){$("head").append($("'),$("#customcss").text(e).detach().appendTo(document.head)}saveCSS(e){void 0!==e&&(this.css=e),f.saveCustomCSS(this.css)}openNative(){Xe.shell.openExternal(`file://${f.customCSS}`)}openDetached(){this.log("Should open detached")}};function et(){}et.prototype.setConfig=function(e){Object.assign(r,e)},et.prototype.init=async function(){if(r.version
GitHub ");const e=r.updater?r.updater.LatestVersion:r.latestVersion;e>r.version&&Ce.alert("Update Available",`\n An update for BandagedBD is available (${e})! Please Reinstall!Download Installer \n `),c.log("Startup","Initializing Settings"),v.initialize(),c.log("Startup","Initializing EmoteModule"),this.injectExternals(),await this.checkForGuilds(),Pe.initialize(),c.log("Startup","Updating Settings");for(const e in i)i[e].initialize();c.log("Startup","Loading Plugins");const t=B.loadAllPlugins();c.log("Startup","Loading Themes");const s=F.loadAllThemes();$("#customcss").detach().appendTo(document.head),c.log("Startup","Removing Loading Icon"),document.getElementsByClassName("bd-loaderv2")[0].remove(),c.log("Startup","Initializing Main Observer"),this.initObserver(),c.log("Startup","Collecting Startup Errors"),Ce.showContentErrors({plugins:t,themes:s})},et.prototype.checkForGuilds=function(){return new Promise(e=>{const t=function(){const s=Pe.guildClasses.wrapper.split(" ")[0],n=Pe.guildClasses.listItem.split(" ")[0],i=Pe.guildClasses.blobContainer.split(" ")[0];if(document.querySelectorAll(`.${s} .${n} .${i}`).length>0)return e(r.deferLoaded=!0);setTimeout(t,100)};$(document).ready(function(){setTimeout(t,100)})})},et.prototype.injectExternals=async function(){await c.injectJs("https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"),window.require.original&&(window.require=window.require.original)},et.prototype.initObserver=function(){new MutationObserver(e=>{for(let t=0,s=e.length;t React.createElement(CSSEditor, {
+ css: this.css,
+ save: this.saveCSS.bind(this),
+ update: this.insertCSS.bind(this),
+ openNative: this.openNative.bind(this)
+ }),
+ onClick: (thisObject) => {
+ if (this.nativeOpen) this.openNative();
+ else if (this.startDetached) this.openDetached();
+ else thisObject._reactInternalFiber.child.memoizedProps.children.props.onSetSection(this.name);
+ }
});
+ this.loadCSS();
+ this.insertCSS();
}
disabled() {
Settings.removePanel(this.id);
}
+
+ loadCSS() {
+ this.css = DataStore.loadCustomCSS();
+ }
+
+ insertCSS(newCss) {
+ if (typeof(newCss) === "undefined") newCss = this.css;
+ if ($("#customcss").length == 0) {
+ $("head").append("");
+ }
+ $("#customcss").text(newCss).detach().appendTo(document.head);
+ }
+
+ saveCSS(newCss) {
+ if (typeof(newCss) !== "undefined") this.css = newCss;
+ DataStore.saveCustomCSS(this.css);
+ }
+
+ openNative() {
+ electron.shell.openExternal(`file://${DataStore.customCSS}`);
+ }
+
+ openDetached() {
+ this.log("Should open detached");
+ }
};
\ No newline at end of file
diff --git a/src/builtins/windowprefs.js b/src/builtins/windowprefs.js
index 944fb54f..32aed9db 100644
--- a/src/builtins/windowprefs.js
+++ b/src/builtins/windowprefs.js
@@ -21,12 +21,12 @@ export default new class WindowPrefs extends Builtin {
}
enabled() {
- this.setWindowPreference("transparency", true);
+ this.setWindowPreference("transparent", true);
this.setWindowPreference("backgroundColor", null);
}
disabled() {
- this.setWindowPreference("transparency", false);
+ this.setWindowPreference("transparent", false);
this.setWindowPreference("backgroundColor", "#2f3136");
}
diff --git a/src/data/settings/config.js b/src/data/settings/config.js
index aa89a48a..3b38347b 100644
--- a/src/data/settings/config.js
+++ b/src/data/settings/config.js
@@ -196,14 +196,16 @@ export default [
id: "startDetached",
name: "Start Detached",
note: "Clicking the Custom CSS tab opens the editor in a separate window",
- value: false
+ value: false,
+ disableWith: "nativeOpen"
},
{
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
+ value: false,
+ disableWith: "startDetached"
}
]
}
diff --git a/src/modules/datastore.js b/src/modules/datastore.js
index c60014dc..091612ef 100644
--- a/src/modules/datastore.js
+++ b/src/modules/datastore.js
@@ -28,6 +28,7 @@ export default new class DataStore {
if (!fs.existsSync(this.baseFolder)) fs.mkdirSync(this.baseFolder);
if (!fs.existsSync(this.dataFolder)) fs.mkdirSync(this.dataFolder);
if (!fs.existsSync(this.BDFile)) fs.writeFileSync(this.BDFile, JSON.stringify(this.data.misc, null, 4));
+ if (!fs.existsSync(this.customCSS)) fs.writeFileSync(this.customCSS, "");
const dataFiles = fs.readdirSync(this.dataFolder).filter(f => !fs.statSync(path.resolve(this.dataFolder, f)).isDirectory() && f.endsWith(".json"));
for (const file of dataFiles) {
this.data[file.split(".")[0]] = __non_webpack_require__(path.resolve(this.dataFolder, file));
@@ -42,6 +43,7 @@ export default new class DataStore {
// this.setBDData("settings", settings);
}
+ get customCSS() {return this._customCSS || (this._customCSS = path.resolve(this.dataFolder, "custom.css"));}
get baseFolder() {return this._baseFolder || (this._baseFolder = path.resolve(Config.dataPath, "data"));}
get dataFolder() {return this._dataFolder || (this._dataFolder = path.resolve(this.baseFolder, `${releaseChannel}`));}
get BDFile() {return this._BDFile || (this._BDFile = path.resolve(Config.dataPath, "data", `${releaseChannel}.json`));}
@@ -82,6 +84,14 @@ export default new class DataStore {
fs.writeFileSync(path.resolve(this.dataFolder, `${key}.json`), JSON.stringify(value, null, 4));
}
+ loadCustomCSS() {
+ return fs.readFileSync(this.customCSS).toString();
+ }
+
+ saveCustomCSS(css) {
+ return fs.writeFileSync(this.customCSS, css);
+ }
+
getPluginData(pluginName, key) {
if (this.pluginData[pluginName] !== undefined) return this.pluginData[pluginName][key] || undefined;
if (!fs.existsSync(this.getPluginFile(pluginName))) return undefined;
diff --git a/src/modules/settingsmanager.js b/src/modules/settingsmanager.js
index 00ee7790..884f8ffb 100644
--- a/src/modules/settingsmanager.js
+++ b/src/modules/settingsmanager.js
@@ -5,7 +5,6 @@ import WebpackModules, {DiscordModules} from "./webpackmodules";
import {SettingsPanel as SettingsRenderer} from "ui";
import Utilities from "./utilities";
-import {Toasts} from "ui";
export default new class SettingsManager {
@@ -44,8 +43,8 @@ export default new class SettingsManager {
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;
+ if (onClick) section.clickListener = onClick;
+ if (element) section.element = element instanceof DiscordModules.React.Component ? () => DiscordModules.React.createElement(element, {}) : typeof(element) == "function" ? element : () => element;
this.panels.push(section);
}
@@ -84,22 +83,30 @@ export default new class SettingsManager {
}
});
}
+
+ if (setting.disableWith) {
+ const path = this.getPath(setting.disableWith.split("."), collection.id, category.id);
+ if (setting.hasOwnProperty("disabled")) continue;
+ Object.defineProperty(setting, "disabled", {
+ get: () => {
+ return this.state[path.collection][path.category][path.setting];
+ }
+ });
+ }
}
}
}
- if (collection.enableWith) {
- const path = this.getPath(collection.enableWith.split("."));
- Object.defineProperty(collection, "disabled", {
- get: () => {
- return !this.state[path.collection][path.category][path.setting];
- }
- });
- }
}
}
async patchSections() {
+ Utilities.monkeyPatch(WebpackModules.getByDisplayName("FluxContainer(GuildSettings)").prototype, "render", {after: (data) => {
+ data.thisObject._reactInternalFiber.return.return.return.return.return.return.memoizedProps.id = "guild-settings";
+ }});
const UserSettings = await this.getUserSettings();
+ Utilities.monkeyPatch(UserSettings.prototype, "render", {after: (data) => {
+ data.thisObject._reactInternalFiber.return.return.return.return.return.return.return.memoizedProps.id = "user-settings";
+ }});
Utilities.monkeyPatch(UserSettings.prototype, "generateSections", {after: (data) => {
let location = data.returnValue.findIndex(s => s.section.toLowerCase() == "linux") + 1;
const insert = (section) => {
@@ -116,8 +123,10 @@ 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.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});}});
+ for (const panel of this.panels.sort((a,b) => a.order > b.order)) {
+ if (panel.clickListener) panel.onClick = (event) => panel.clickListener(data.thisObject, event, data.returnValue);
+ insert(panel);
+ }
insert({section: "CUSTOM", element: () => SettingsRenderer.attribution});
}});
this.forceUpdate();
@@ -166,7 +175,7 @@ export default new class SettingsManager {
Events.dispatch("setting-updated", collection, category, id, value);
const after = this.collections.length + this.panels.length;
this.saveSettings();
- if (before != after) this.forceUpdate();
+ if (before != after) setTimeout(this.forceUpdate.bind(this), 50);
}
getSetting(collection, category, id) {
diff --git a/src/ui/customcss/checkbox.js b/src/ui/customcss/checkbox.js
deleted file mode 100644
index 8fc7636c..00000000
--- a/src/ui/customcss/checkbox.js
+++ /dev/null
@@ -1,40 +0,0 @@
-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
- });
- }
-}
\ No newline at end of file
diff --git a/src/ui/customcss/checkbox.jsx b/src/ui/customcss/checkbox.jsx
new file mode 100644
index 00000000..79f069e6
--- /dev/null
+++ b/src/ui/customcss/checkbox.jsx
@@ -0,0 +1,27 @@
+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 ;
+ }
+
+ onClick() {
+ this.props.onChange(!this.state.checked);
+ this.setState({checked: !this.state.checked});
+ }
+}
\ No newline at end of file
diff --git a/src/ui/customcss/detached.js b/src/ui/customcss/detached.js
deleted file mode 100644
index 09af56d6..00000000
--- a/src/ui/customcss/detached.js
+++ /dev/null
@@ -1,172 +0,0 @@
-import {SettingsCookie} from "data";
-import {BDV2, DataStore, Core, DiscordModules} from "modules";
-
-import Checkbox from "./checkbox";
-
-export default class CssEditorDetached extends DiscordModules.React.Component {
-
- constructor(props) {
- super(props);
- this.onClick = this.onClick.bind(this);
- this.updateCss = this.updateCss.bind(this);
- this.saveCss = this.saveCss.bind(this);
- this.onChange = this.onChange.bind(this);
- }
-
- componentDidMount() {
- $("#app-mount").addClass("bd-detached-editor");
- BDV2.editorDetached = true;
- // this.updateLineCount();
- this.editor = ace.edit("bd-customcss-editor-detached");
- this.editor.setTheme("ace/theme/monokai");
- this.editor.session.setMode("ace/mode/css");
- this.editor.setShowPrintMargin(false);
- this.editor.setFontSize(14);
- this.editor.on("change", () => {
- if (!SettingsCookie["bda-css-0"]) return;
- this.saveCss();
- this.updateCss();
- });
-
- }
-
- componentWillUnmount() {
- $("#app-mount").removeClass("bd-detached-editor");
- BDV2.editorDetached = false;
- this.editor.destroy();
- }
-
- updateLineCount() {
- const lineCount = this.refs.editor.value.split("\n").length;
- if (lineCount == this.props.lines) return;
- this.refs.lines.textContent = Array.from(new Array(lineCount), (_, i) => i + 1).join(".\n") + ".";
- this.props.lines = lineCount;
- }
-
- get options() {
- return {
- lineNumbers: true,
- mode: "css",
- indentUnit: 4,
- theme: "material",
- scrollbarStyle: "simple"
- };
- }
-
- get css() {
- const _ccss = DataStore.getBDData("bdcustomcss");
- let ccss = "";
- if (_ccss && _ccss !== "") {
- ccss = atob(_ccss);
- }
- return ccss;
- }
-
- get root() {
- const _root = $("#bd-customcss-detach-container");
- if (!_root.length) {
- if (!this.injectRoot()) return null;
- return this.detachedRoot;
- }
- return _root[0];
- }
-
- injectRoot() {
- if (!$(".app, .app-2rEoOp").length) return false;
- $("
", {
- id: "bd-customcss-detach-container"
- }).insertAfter($(".app, .app-2rEoOp"));
- return true;
- }
-
- render() {
- const self = this;
- return DiscordModules.React.createElement(
- "div",
- {className: "bd-detached-css-editor", id: "bd-customcss-detach-editor"},
- DiscordModules.React.createElement(
- "div",
- {id: "bd-customcss-innerpane"},
- DiscordModules.React.createElement("div", {className: "editor-wrapper"},
- DiscordModules.React.createElement("div", {id: "bd-customcss-editor-detached", className: "editor", ref: "editor"}, self.css)
- ),
- DiscordModules.React.createElement(
- "div",
- {id: "bd-customcss-attach-controls"},
- DiscordModules.React.createElement(
- "ul",
- {className: "checkbox-group"},
- DiscordModules.React.createElement(Checkbox, {id: "live-update", text: "Live Update", onChange: self.onChange, checked: SettingsCookie["bda-css-0"]})
- ),
- DiscordModules.React.createElement(
- "div",
- {id: "bd-customcss-detach-controls-button"},
- DiscordModules.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(
- "button",
- {style: {borderRadius: "0", borderLeft: "1px solid #2d2d2d", borderRight: "1px solid #2d2d2d"}, className: "btn btn-primary", onClick: () => {
- self.onClick("save");
- }},
- "Save"
- ),
- DiscordModules.React.createElement(
- "button",
- {style: {borderRadius: "0 3px 3px 0", borderLeft: "1px solid #3f4146"}, className: "btn btn-primary", onClick: () => {
- self.onClick("attach");
- }},
- "Attach"
- ),
- DiscordModules.React.createElement(
- "span",
- {style: {fontSize: "10px", marginLeft: "5px"}},
- "Unsaved changes are lost on attach"
- )
- )
- )
- )
- );
- }
-
- onChange(id, checked) {
- switch (id) {
- case "live-update":
- SettingsCookie["bda-css-0"] = checked;
- Core.saveSettings();
- break;
- }
- }
-
- onClick(id) {
- const self = this;
- switch (id) {
- case "attach":
- if ($("#editor-detached").length) self.props.attach();
- DiscordModules.ReactDOM.unmountComponentAtNode(self.root);
- self.root.remove();
- break;
- case "update":
- self.updateCss();
- break;
- case "save":
- self.saveCss();
- break;
- }
- }
-
- updateCss() {
- if ($("#customcss").length == 0) {
- $("head").append("");
- }
- $("#customcss").text(this.editor.session.getValue()).detach().appendTo(document.head);
- }
-
- saveCss() {
- DataStore.setBDData("bdcustomcss", btoa(this.editor.session.getValue()));
- }
-}
\ No newline at end of file
diff --git a/src/ui/customcss/editor.js b/src/ui/customcss/editor.js
deleted file mode 100644
index 0e4678b3..00000000
--- a/src/ui/customcss/editor.js
+++ /dev/null
@@ -1,222 +0,0 @@
-import {BDV2, DataStore, React, ReactDOM, Settings} from "modules";
-
-import Checkbox from "./checkbox";
-import SettingsTitle from "../settings/title";
-
-export default class CssEditor extends React.Component {
-
- constructor(props) {
- super(props);
- this.props.lines = 0;
- 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);
- }
-
- componentDidMount() {
- // this.updateLineCount();
- this.editor = ace.edit("bd-customcss-editor");
- this.editor.setTheme("ace/theme/monokai");
- this.editor.session.setMode("ace/mode/css");
- this.editor.setShowPrintMargin(false);
- this.editor.setFontSize(14);
- this.editor.on("change", () => {
- if (!Settings.get("settings", "customcss", "liveUpdate")) return;
- this.saveCss();
- this.updateCss();
- });
- }
-
- componentWillUnmount() {
- this.editor.destroy();
- }
-
- componentDidUpdate(prevProps, prevState) {
- if (prevState.detached && !this.state.detached) {
- ReactDOM.unmountComponentAtNode(this.detachedRoot);
- }
- }
-
- codeMirror() {
- }
-
- get options() {
- return {
- lineNumbers: true,
- mode: "css",
- indentUnit: 4,
- theme: "material",
- scrollbarStyle: "simple"
- };
- }
-
- get css() {
- const _ccss = DataStore.getBDData("bdcustomcss");
- let ccss = "";
- if (_ccss && _ccss !== "") {
- ccss = atob(_ccss);
- }
- return ccss;
- }
-
- updateLineCount() {
- const lineCount = this.refs.editor.value.split("\n").length;
- if (lineCount == this.props.lines) return;
- this.refs.lines.textContent = Array.from(new Array(lineCount), (_, i) => i + 1).join(".\n") + ".";
- this.props.lines = lineCount;
- }
-
- render() {
- const self = this;
- return React.createElement(
- "div",
- {className: "contentColumn-2hrIYH contentColumnDefault-1VQkGM content-column default", style: {padding: "60px 40px 0px"}},
- // 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,
- 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)
- ),
- React.createElement(
- "div",
- {id: "bd-customcss-attach-controls"},
- React.createElement(
- "ul",
- {className: "checkbox-group"},
- React.createElement(Checkbox, {id: "live-update", text: "Live Update", onChange: this.onChange, checked: Settings.get("settings", "customcss", "liveUpdate")})
- ),
- React.createElement(
- "div",
- {id: "bd-customcss-detach-controls-button"},
- React.createElement(
- "button",
- {style: {borderRadius: "3px 0 0 3px", borderRight: "1px solid #3f4146"}, className: "btn btn-primary", onClick: () => {
- self.onClick("update");
- }},
- "Update"
- ),
- React.createElement(
- "button",
- {style: {borderRadius: "0", borderLeft: "1px solid #2d2d2d", borderRight: "1px solid #2d2d2d"}, className: "btn btn-primary", onClick: () => {
- self.onClick("save");
- }},
- "Save"
- ),
- React.createElement(
- "button",
- {style: {borderRadius: "0 3px 3px 0", borderLeft: "1px solid #3f4146"}, className: "btn btn-primary", onClick: () => {
- self.onClick("detach");
- }},
- "Detach"
- ),
- React.createElement(
- "span",
- {style: {fontSize: "10px", marginLeft: "5px"}},
- "Unsaved changes are lost on detach"
- ),
- React.createElement("div", {className: "help-text"},
- "Press ",
- React.createElement("code", {className: "inline"}, "ctrl"),
- "+",
- React.createElement("span", {className: "inline"}, ","),
- " with the editor focused to access the editor's settings."
- )
- )
- )
- )
- );
- }
-
- onClick(arg) {
- switch (arg) {
- case "update":
- this.updateCss();
- break;
- case "save":
- this.saveCss();
- break;
- case "detach":
- this.detach();
- break;
- }
- }
-
- onChange(id, checked) {
- switch (id) {
- case "live-update":
- Settings.set("settings", "customcss", "liveUpdate", checked);
- break;
- }
- }
-
- updateCss() {
- if ($("#customcss").length == 0) {
- $("head").append("");
- }
- $("#customcss").text(this.editor.session.getValue()).detach().appendTo(document.head);
- }
-
- saveCss() {
- DataStore.setBDData("bdcustomcss", btoa(this.editor.session.getValue()));
- }
-
- detach() {
- 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];
- // }
-
- // injectDetachedRoot() {
- // if (!$(".app, .app-2rEoOp").length) return false;
- // $("
", {
- // id: "bd-customcss-detach-container"
- // }).insertAfter($(".app, .app-2rEoOp"));
- // return true;
- // }
-
- // attach() {
- // this.setState({
- // detached: false
- // });
- // }
-}
\ No newline at end of file
diff --git a/src/ui/customcss/editor.jsx b/src/ui/customcss/editor.jsx
new file mode 100644
index 00000000..6e19e479
--- /dev/null
+++ b/src/ui/customcss/editor.jsx
@@ -0,0 +1,98 @@
+import {React, Settings} from "modules";
+
+import Checkbox from "./checkbox";
+import SettingsTitle from "../settings/title";
+
+export default class CssEditor extends React.Component {
+
+ constructor(props) {
+ super(props);
+
+ this.toggleLiveUpdate = this.toggleLiveUpdate.bind(this);
+ this.updateCss = this.updateCss.bind(this);
+ this.saveCss = this.saveCss.bind(this);
+ this.detach = this.detach.bind(this);
+ this.openNative = this.openNative.bind(this);
+ }
+
+ componentDidMount() {
+ this.editor = ace.edit("bd-customcss-editor");
+
+ // Add id to the ace menu container
+ const originalShow = this.editor.keyBinding.$defaultHandler.commands.showSettingsMenu.exec;
+ this.editor.keyBinding.$defaultHandler.commands.showSettingsMenu.exec = function() {
+ originalShow.apply(this, arguments);
+ const observer = new MutationObserver(mutations => {
+ for (const mutation of mutations) {
+ if (!mutation.addedNodes.length || !(mutation.addedNodes[0] instanceof Element)) continue;
+ const node = mutation.addedNodes[0];
+ if (node.parentElement !== document.body || !node.querySelector("#ace_settingsmenu")) continue;
+ node.id = "ace_settingsmenu_container";
+ observer.disconnect();
+ }
+ });
+ observer.observe(document.body, {childList: true});
+ };
+
+ this.editor.setTheme("ace/theme/monokai");
+ this.editor.session.setMode("ace/mode/css");
+ this.editor.setShowPrintMargin(false);
+ this.editor.setFontSize(14);
+ this.editor.on("change", () => {
+ if (!Settings.get("settings", "customcss", "liveUpdate")) return;
+ this.saveCss();
+ this.updateCss();
+ });
+ }
+
+ componentWillUnmount() {
+ this.editor.destroy();
+ }
+
+ render() {
+
+ return [
+
+
+
+
+
+ ;
+ }
+}
\ No newline at end of file
diff --git a/src/ui/icons/close.js b/src/ui/icons/close.js
deleted file mode 100644
index e4819b2e..00000000
--- a/src/ui/icons/close.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import {React} from "modules";
-
-export default class XSvg extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- return React.createElement(
- "svg",
- {xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", style: {width: "18px", height: "18px"}},
- React.createElement(
- "g",
- {className: "background", fill: "none", fillRule: "evenodd"},
- React.createElement("path", {d: "M0 0h12v12H0"}),
- React.createElement("path", {className: "fill", fill: "#dcddde", d: "M9.5 3.205L8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6"})
- )
- );
- }
-}
\ No newline at end of file
diff --git a/src/ui/icons/close.jsx b/src/ui/icons/close.jsx
new file mode 100644
index 00000000..404a2d2b
--- /dev/null
+++ b/src/ui/icons/close.jsx
@@ -0,0 +1,12 @@
+import {React} from "modules";
+
+export default class CloseButton extends React.Component {
+ render() {
+ return
+
+
+ ;
+ }
+}
\ No newline at end of file
diff --git a/src/ui/icons/reload.js b/src/ui/icons/reload.js
deleted file mode 100644
index a391cc40..00000000
--- a/src/ui/icons/reload.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import {React} from "modules";
-
-export default class ReloadIcon extends React.Component {
- constructor(props) {
- super(props);
- }
-
- render() {
- return React.createElement("svg", {
- xmlns: "http://www.w3.org/2000/svg",
- viewBox: "0 0 24 24",
- fill: "#dcddde",
- className: "bd-reload " + this.props.className,
- onClick: this.props.onClick,
- style: {width: this.props.size || "24px", height: this.props.size || "24px"}
- },
- React.createElement("path", {d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"}),
- React.createElement("path", {fill: "none", d: "M0 0h24v24H0z"})
- );
- }
-}
\ No newline at end of file
diff --git a/src/ui/icons/reload.jsx b/src/ui/icons/reload.jsx
new file mode 100644
index 00000000..a9dbdc87
--- /dev/null
+++ b/src/ui/icons/reload.jsx
@@ -0,0 +1,11 @@
+import {React} from "modules";
+
+export default class ReloadIcon extends React.Component {
+ render() {
+ const size = this.props.size || "24px";
+ return
+ ;
+ }
+}
\ No newline at end of file