diff --git a/ui/dist/index.html b/ui/dist/index.html index 29c1e0550..4be7ceb5b 100644 --- a/ui/dist/index.html +++ b/ui/dist/index.html @@ -6,7 +6,6 @@ - diff --git a/ui/dist/quit.html b/ui/dist/quit.html index 161d7ab4c..eff68e049 100644 --- a/ui/dist/quit.html +++ b/ui/dist/quit.html @@ -6,7 +6,6 @@ - diff --git a/ui/js/actions/app.js b/ui/js/actions/app.js index 0b20c7bde..0f8a3bcf3 100644 --- a/ui/js/actions/app.js +++ b/ui/js/actions/app.js @@ -176,7 +176,6 @@ export function doDaemonReady() { return function(dispatch, getState) { dispatch(doAuthenticate()); dispatch({ type: types.DAEMON_READY }); - //dispatch(doSetTheme(lbry.getClientSetting(settings.THEME))); dispatch(doFetchDaemonSettings()); dispatch(doFileList()); }; diff --git a/ui/js/actions/settings.js b/ui/js/actions/settings.js index 3aaf6ad4a..313b7c606 100644 --- a/ui/js/actions/settings.js +++ b/ui/js/actions/settings.js @@ -1,5 +1,6 @@ import * as types from "constants/action_types"; import * as settings from "constants/settings"; +import { doAlertError } from "actions/app"; import batchActions from "util/batchActions"; import lbry from "lbry"; @@ -8,8 +9,7 @@ import http from "http"; const { remote } = require("electron"); const { extname } = require("path"); -const { download } = remote.require("electron-dl"); -const { readdirSync } = remote.require("fs"); +const { readdir } = remote.require("fs"); export function doFetchDaemonSettings() { return function(dispatch, getState) { @@ -53,45 +53,23 @@ export function doSetClientSetting(key, value) { } export function doGetThemes() { - const dir = `${remote.app.getAppPath()}/dist/themes`; - - if (!fs.existsSync(dir)) { - return; - } - - // Get all .css files - const files = readdirSync(dir).filter(file => extname(file) === ".css"); - return function(dispatch, getState) { - // Find themes - const themes = files.map(file => ({ - name: file.replace(".css", ""), - path: `./themes/${file}`, - })); + const dir = `${remote.app.getAppPath()}/dist/themes`; - dispatch(doSetClientSetting(settings.THEMES, themes)); - }; -} - -export function doSetTheme(name) { - return function(dispatch, getState) { - // Find a theme from themes list - const find = themeName => themes.find(theme => theme.name === themeName); - - // Get themes - const themes = lbry.getClientSetting(settings.THEMES); - - // Find theme and set fallback - const theme = find(name) || find("light"); - - if (theme.path) { - // load css - const link = document.getElementById("theme"); - link.href = theme.path; - - // update theme - dispatch(doSetClientSetting(settings.THEME, theme.name)); - } + readdir(dir, (error, files) => { + if (!error) { + dispatch( + doSetClientSetting( + settings.THEMES, + files + .filter(file => extname(file) === ".css") + .map(file => file.replace(".css", "")) + ) + ); + } else { + dispatch(doAlertError(error)); + } + }); }; } diff --git a/ui/js/component/app/view.jsx b/ui/js/component/app/view.jsx index e3c2465de..37bd05c72 100644 --- a/ui/js/component/app/view.jsx +++ b/ui/js/component/app/view.jsx @@ -1,6 +1,7 @@ import React from "react"; import Router from "component/router/index"; import Header from "component/header"; +import Theme from "component/theme"; import ModalRouter from "modal/modalRouter"; import lbry from "lbry"; @@ -49,6 +50,7 @@ class App extends React.PureComponent { render() { return (
+
diff --git a/ui/js/component/theme/index.js b/ui/js/component/theme/index.js new file mode 100644 index 000000000..ad95b5297 --- /dev/null +++ b/ui/js/component/theme/index.js @@ -0,0 +1,10 @@ +import React from "react"; +import { connect } from "react-redux"; +import { selectThemePath } from "selectors/settings.js"; +import Theme from "./view"; + +const select = state => ({ + themePath: selectThemePath(state), +}); + +export default connect(select, null)(Theme); diff --git a/ui/js/component/theme/view.jsx b/ui/js/component/theme/view.jsx new file mode 100644 index 000000000..ad0b21ebc --- /dev/null +++ b/ui/js/component/theme/view.jsx @@ -0,0 +1,21 @@ +import React from "react"; + +const Theme = props => { + const { themePath } = props; + + if (!themePath) { + return null; + } + + return ( + + ); +}; + +export default Theme; diff --git a/ui/js/page/settings/index.js b/ui/js/page/settings/index.js index 5fe86a7a2..93f89f1d1 100644 --- a/ui/js/page/settings/index.js +++ b/ui/js/page/settings/index.js @@ -1,5 +1,6 @@ import React from "react"; import { connect } from "react-redux"; +import * as settings from "constants/settings"; import { doClearCache } from "actions/app"; import { doSetDaemonSetting, @@ -9,6 +10,7 @@ import { doChangeLanguage, } from "actions/settings"; import { + makeSelectClientSetting, selectDaemonSettings, selectShowNsfw, selectLanguages, @@ -21,14 +23,14 @@ const select = state => ({ showNsfw: selectShowNsfw(state), language: selectCurrentLanguage(state), languages: selectLanguages(state), + theme: makeSelectClientSetting(settings.THEME)(state), }); const perform = dispatch => ({ setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(key, value)), clearCache: () => dispatch(doClearCache()), setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)), - setTheme: name => dispatch(doSetTheme(name)), - getThemes: () => dispatch(doGetThemes), + getThemes: () => dispatch(doGetThemes()), changeLanguage: newLanguage => dispatch(doChangeLanguage(newLanguage)), }); diff --git a/ui/js/page/settings/view.jsx b/ui/js/page/settings/view.jsx index 45ad6efea..2eb32d260 100644 --- a/ui/js/page/settings/view.jsx +++ b/ui/js/page/settings/view.jsx @@ -42,19 +42,6 @@ class SettingsPage extends React.PureComponent { this.props.setDaemonSetting(name, value); } - setClientSetting(name, value) { - lbry.setClientSetting(name, value); - this._onSettingSaveSuccess(); - } - - setTheme(value) { - this.props.setTheme(value); - } - - getThemes() { - this.props.getThemes(); - } - onRunOnStartChange(event) { this.setDaemonSetting("run_on_startup", event.target.checked); } @@ -77,7 +64,7 @@ class SettingsPage extends React.PureComponent { onThemeChange(event) { const { value } = event.target; - this.setTheme(value); + this.props.setClientSetting(settings.THEME, value); } // onMaxUploadPrefChange(isLimited) { @@ -118,13 +105,13 @@ class SettingsPage extends React.PureComponent { onShowUnavailableChange(event) {} componentWillMount() { - this.getThemes(); + this.props.getThemes(); } componentDidMount() {} render() { - const { daemonSettings, language, languages } = this.props; + const { daemonSettings, language, languages, theme } = this.props; if (!daemonSettings || Object.keys(daemonSettings).length === 0) { return ( @@ -270,12 +257,12 @@ class SettingsPage extends React.PureComponent { {this.state.themes.map((theme, index) => - )} diff --git a/ui/js/selectors/settings.js b/ui/js/selectors/settings.js index 10b9191df..c4642e39f 100644 --- a/ui/js/selectors/settings.js +++ b/ui/js/selectors/settings.js @@ -1,3 +1,4 @@ +import * as settings from "constants/settings"; import { createSelector } from "reselect"; const _selectState = state => state.settings || {}; @@ -33,3 +34,8 @@ export const selectLanguages = createSelector( _selectState, state => state.languages || {} ); + +export const selectThemePath = createSelector( + makeSelectClientSetting(settings.THEME), + theme => "themes/" + (theme || "light") + ".css" +);