add themes menu

css/main.css

@@ -953,25 +953,25 @@ body .ace_closeButton:active {
   color: #4f545c;
 }
 
-#bd-settingspane-container .ui-switch-item {
+.ui-switch-item {
   flex-direction: column;
   margin-top: 8px;
 }
 
-#bd-settingspane-container .ui-switch-item h3 {
+.ui-switch-item h3 {
   font-size: 16px;
   font-weight: 500;
   line-height: 24px;
   flex: 1;
 }
-.theme-dark #bd-settingspane-container .ui-switch-item h3 {
+.theme-dark .ui-switch-item h3 {
   color: #f6f6f7;
 }
-.theme-light #bd-settingspane-container .ui-switch-item h3 {
+.theme-light .ui-switch-item h3 {
   color: #4f545c;
 }
 
-#bd-settingspane-container .ui-switch-item .style-description {
+.ui-switch-item .style-description {
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
@@ -979,14 +979,14 @@ body .ace_closeButton:active {
   padding-bottom: 10px;
   border-bottom: 1px solid hsla(218,5%,47%,.3);
 }
-.theme-dark #bd-settingspane-container .ui-switch-item .style-description {
+.theme-dark .ui-switch-item .style-description {
   color: #72767d;
 }
-.theme-light #bd-settingspane-container .ui-switch-item .style-description {
+.theme-light .ui-switch-item .style-description {
   color: rgba(114,118,125,.6);
 }
 
-#bd-settingspane-container .ui-switch-item .ui-switch-wrapper {
+.ui-switch-item .ui-switch-wrapper {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -998,7 +998,7 @@ body .ace_closeButton:active {
   flex: 0 0 auto;
 }
 
-#bd-settingspane-container .ui-switch-item .ui-switch-wrapper input {
+.ui-switch-item .ui-switch-wrapper input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
@@ -1007,7 +1007,7 @@ body .ace_closeButton:active {
   z-index: 1;
 }
 
-#bd-settingspane-container .ui-switch-item .ui-switch-wrapper .ui-switch {
+.ui-switch-item .ui-switch-wrapper .ui-switch {
   background: #7289da;
   position: absolute;
   top: 0;
@@ -1019,7 +1019,7 @@ body .ace_closeButton:active {
   transition: background .15s ease-in-out,box-shadow .15s ease-in-out,border .15s ease-in-out;
 }
 
-#bd-settingspane-container .ui-switch-item .ui-switch-wrapper .ui-switch:before {
+.ui-switch-item .ui-switch-wrapper .ui-switch:before {
   content: "";
   display: block;
   width: 18px;
@@ -1034,11 +1034,11 @@ body .ace_closeButton:active {
   box-shadow: 0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05);
 }
 
-#bd-settingspane-container .ui-switch-item .ui-switch-wrapper .ui-switch.checked {
+.ui-switch-item .ui-switch-wrapper .ui-switch.checked {
   background: #7289da;
 }
 
-#bd-settingspane-container .ui-switch-item .ui-switch-wrapper .ui-switch.checked:before {
+.ui-switch-item .ui-switch-wrapper .ui-switch.checked:before {
   transform: translateX(20px);
 }
 

src/modules/thememanager.js

@@ -2,6 +2,8 @@ import {Config} from "data";
 import ContentManager from "./contentmanager";
 import Utilities from "./utilities";
 import {Modals} from "ui";
+import Settings from "./settingsmanager";
+import {SettingsPanel as SettingsRenderer} from "ui";
 
 const path = require("path");
 
@@ -14,7 +16,10 @@ export default new class ThemeManager extends ContentManager {
 
     /* Aliases */
     updateThemeList() {return this.updateList();}
-    loadAllThemes() {return this.loadAllContent();}
+    loadAllThemes() {
+        Settings.registerPanel("Themes", {element: () => SettingsRenderer.getThemesPanel(this.contentList)});
+        return this.loadAllContent();
+    }
 
     enableTheme(idOrContent) {return this.enableContent(idOrContent);}
     disableTheme(idOrContent) {return this.disableContent(idOrContent);}

src/ui/settings/plugincard.js

@@ -34,12 +34,12 @@ export default class V2C_PluginCard extends React.Component {
 
                 const eTop = element.offsetTop;
                 const eBottom = eTop + element.clientHeight;
-
+                
                 return  (eTop < cTop || eBottom > cBottom);
             };
 
             const self = $(ReactDOM.findDOMNode(this));
-            const container = self.parents(".scroller");
+            const container = self.parents(".scroller-2FKFPG");
             if (!isHidden(container[0], self[0])) return;
             container.animate({
                 scrollTop: self.offset().top - container.offset().top + container.scrollTop() - 30

src/ui/settings/settings.js

@@ -8,7 +8,7 @@ import {React/*, ReactDOM, Utilities, ContentManager, Events, PluginManager, The
 // import Tools from "./exitbutton";
 // import SettingsPanel from "./panel";
 import PluginCard from "./plugincard";
-// import ThemeCard from "./themecard";
+import ThemeCard from "./themecard";
 // import ReloadIcon from "../icons/reload";
 
 // import CssEditor from "../customcss/editor";
@@ -37,7 +37,27 @@ export default class V2_SettingsPanel {
             React.createElement(PluginCard, {key: plugin.id, content: plugin})
         );
         console.log(cards);
-        return [titleComponent, ...cards];
+        return [titleComponent, React.createElement("ul", {className: "bda-slist"}, ...cards)];
+        // const plugins = Object.keys(Plugins).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase())).reduce((arr, key) => {
+        //     arr.push(React.createElement(PluginCard, {key: key, plugin: Plugins[key].plugin}));return arr;
+        // }, []);
+        // const list = React.createElement(List, {key: "plugin-list", className: "bda-slist", children: plugins});
+        // const refreshIcon = !SettingsCookie["fork-ps-5"] && React.createElement(ReloadIcon, {className: "bd-reload-header", size: "18px", onClick: async () => {
+        //     PluginManager.updatePluginList();
+        //     this.sideBarOnClick("plugins");
+        // }});
+        // const pfBtn = React.createElement("button", {key: "folder-button", className: "bd-pfbtn", onClick: () => { require("electron").shell.openItem(ContentManager.pluginsFolder); }}, "Open Plugin Folder");
+        // const contentColumn = React.createElement(ContentColumn, {key: "pcolumn", title: "Plugins", children: [refreshIcon, pfBtn, list]});
+        // return React.createElement(Scroller, {contentColumn: true, fade: true, dark: true, children: [contentColumn, React.createElement(Tools, {key: "tools"})]});
+    }
+
+    static getThemesPanel(themes) {
+        const titleComponent = React.createElement(SettingsTitle, {text: "Themes", button: {title: "Open Theme Folder", onClick: () => { require("electron").shell.openItem(""); }}});
+        const cards = themes.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())).map(theme => 
+            React.createElement(ThemeCard, {key: theme.id, content: theme})
+        );
+        console.log(cards);
+        return [titleComponent, React.createElement("ul", {className: "bda-slist"}, ...cards)];
         // const plugins = Object.keys(Plugins).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase())).reduce((arr, key) => {
         //     arr.push(React.createElement(PluginCard, {key: key, plugin: Plugins[key].plugin}));return arr;
         // }, []);

src/ui/settings/themecard.js

@@ -1,55 +1,42 @@
-import {SettingsCookie, ThemeCookie, Themes} from "data";
 import {React, ThemeManager} from "modules";
 import ReloadIcon from "../icons/reload";
-import Toasts from "../toasts";
+// import Toasts from "../toasts";
 
 export default class V2C_ThemeCard extends React.Component {
 
     constructor(props) {
         super(props);
-        this.setInitialState();
-        this.onChange = this.onChange.bind(this);
-        this.reload = this.reload.bind(this);
-    }
-
-    setInitialState() {
         this.state = {
-            checked: ThemeCookie[this.props.theme.name],
+            checked: ThemeManager.isEnabled(this.props.content.id),
             reloads: 0
         };
+        this.onChange = this.onChange.bind(this);
+        // this.reload = this.reload.bind(this);
     }
 
-    // componentDidMount() {
-    //     BDEvents.on("theme-reloaded", this.onReload);
+    // onReload(themeName) {
+    //     if (themeName !== this.props.theme.name) return;
+    //     this.setState({reloads: this.state.reloads + 1});
     // }
 
-    // componentWillUnmount() {
-    //     BDEvents.off("theme-reloaded", this.onReload);
+    // reload() {
+    //     const theme = this.props.theme.name;
+    //     const error = ThemeManager.reloadTheme(theme);
+    //     if (error) Toasts.show(`Could not reload ${Themes[theme].name}. Check console for details.`, {type: "error"});
+    //     else Toasts.show(`${Themes[theme].name} v${Themes[theme].version} has been reloaded.`, {type: "success"});
+    //     // this.setState(this.state);
+    //     this.props.theme = Themes[theme];
+    //     this.onReload(this.props.theme.name);
     // }
 
-    onReload(themeName) {
-        if (themeName !== this.props.theme.name) return;
-        this.setState({reloads: this.state.reloads + 1});
-    }
-
-    reload() {
-        const theme = this.props.theme.name;
-        const error = ThemeManager.reloadTheme(theme);
-        if (error) Toasts.show(`Could not reload ${Themes[theme].name}. Check console for details.`, {type: "error"});
-        else Toasts.show(`${Themes[theme].name} v${Themes[theme].version} has been reloaded.`, {type: "success"});
-        // this.setState(this.state);
-        this.props.theme = Themes[theme];
-        this.onReload(this.props.theme.name);
-    }
-
     render() {
-        const {theme} = this.props;
-        const name = theme.name;
-        const description = theme.description;
-        const version = theme.version;
-        const author = theme.author;
-        const website = Themes[name].website;
-        const source = Themes[name].source;
+        const {content} = this.props;
+        const name = content.name;
+        const description = content.description;
+        const version = content.version;
+        const author = content.author;
+        const website = content.website;
+        const source = content.source;
 
         return React.createElement("li", {"data-name": name, "data-version": version, "className": "settings-closed ui-switch-item"},
             React.createElement("div", {className: "bda-header"},
@@ -61,7 +48,7 @@ export default class V2C_ThemeCard extends React.Component {
                         React.createElement("span", {className: "bda-author"}, author)
                     ),
                     React.createElement("div", {className: "bda-controls"},
-                        !SettingsCookie["fork-ps-5"] && React.createElement(ReloadIcon, {className: "bd-reload-card", onClick: this.reload}),
+                        //!SettingsCookie["fork-ps-5"] && React.createElement(ReloadIcon, {className: "bd-reload-card", onClick: this.reload}),
                         React.createElement("label", {className: "ui-switch-wrapper ui-flex-child", style: {flex: "0 0 auto"}},
                             React.createElement("input", {checked: this.state.checked, onChange: this.onChange, className: "ui-switch-checkbox", type: "checkbox"}),
                             React.createElement("div", {className: this.state.checked ? "ui-switch checked" : "ui-switch"})
@@ -83,6 +70,6 @@ export default class V2C_ThemeCard extends React.Component {
 
     onChange() {
         this.setState({checked: !this.state.checked});
-        ThemeManager.toggleTheme(this.props.theme.name);
+        ThemeManager.toggleTheme(this.props.content.id);
     }
 }