add themes menu
This commit is contained in:
parent
ee47005321
commit
6d0d3ddd28
26
css/main.css
26
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);
|
||||
}
|
||||
|
||||
|
|
30
js/main.js
30
js/main.js
File diff suppressed because one or more lines are too long
|
@ -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);}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
// }, []);
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue