From c87bcb83831316a5e3249f938cebfec6dc7d913d Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 19 Aug 2017 15:34:45 -0600 Subject: [PATCH] rewrite themes-system -> action / reducer --- ui/dist/index.html | 1 + ui/js/actions/settings.js | 37 ++++++++++++++++++++------------- ui/js/constants/action_types.js | 3 +++ ui/js/constants/settings.js | 3 ++- ui/js/lbry.js | 3 ++- ui/js/page/settings/index.js | 16 ++++++++++++-- ui/js/page/settings/view.jsx | 15 +++++++------ ui/js/reducers/settings.js | 7 +++++++ ui/js/selectors/settings.js | 10 +++++++++ 9 files changed, 69 insertions(+), 26 deletions(-) diff --git a/ui/dist/index.html b/ui/dist/index.html index 4be7ceb5b..29c1e0550 100644 --- a/ui/dist/index.html +++ b/ui/dist/index.html @@ -6,6 +6,7 @@ + diff --git a/ui/js/actions/settings.js b/ui/js/actions/settings.js index 977151493..a51ceb7b4 100644 --- a/ui/js/actions/settings.js +++ b/ui/js/actions/settings.js @@ -45,24 +45,33 @@ export function doSetClientSetting(key, value) { }; } -export function getThemes() { - /* - // Themes path - const themesPath = `${remote.app.getAppPath()}/dist/themes`; +export function doSetTheme(name) { + const link = document.getElementById("theme"); + + return function(dispatch, getState) { + const { themes } = getState().settings.clientSettings; + const theme = themes.find(theme => theme.name === name); + + link.href = theme.path; + + dispatch(doSetClientSetting("theme", theme)); + }; +} + +export function doGetThemes() { + const path = `${remote.app.getAppPath()}/dist/themes`; // Get all .css files - const files = readdirSync(themesPath).filter(function(file) { - return extname(file) === ".css"; - }); + const files = readdirSync(path).filter(file => extname(file) === ".css"); // Get theme name - const themes = files.map(function(file) { - return file.replace(".css", ""); - }); + const themes = files.map(file => ({ + name: file.replace(".css", ""), + path: `./themes/${file}`, + fullPath: `${path}/${file}`, + })); - return { - type: types.GET_THEMES, - data: { themes }, + return function(dispatch, getState) { + dispatch(doSetClientSetting("themes", themes)); }; - */ } diff --git a/ui/js/constants/action_types.js b/ui/js/constants/action_types.js index 78d12d2cf..942ea11ee 100644 --- a/ui/js/constants/action_types.js +++ b/ui/js/constants/action_types.js @@ -85,6 +85,9 @@ export const SEARCH_CANCELLED = "SEARCH_CANCELLED"; export const DAEMON_SETTINGS_RECEIVED = "DAEMON_SETTINGS_RECEIVED"; export const CLIENT_SETTING_CHANGED = "CLIENT_SETTING_CHANGED"; +// THEMES +export const GET_THEMES = "GET_THEMES"; + // User export const AUTHENTICATION_STARTED = "AUTHENTICATION_STARTED"; export const AUTHENTICATION_SUCCESS = "AUTHENTICATION_SUCCESS"; diff --git a/ui/js/constants/settings.js b/ui/js/constants/settings.js index 97ec0a23a..b5a2d30b9 100644 --- a/ui/js/constants/settings.js +++ b/ui/js/constants/settings.js @@ -3,4 +3,5 @@ export const FIRST_RUN_ACKNOWLEDGED = "welcome_acknowledged"; export const LANGUAGE = "language"; export const SHOW_NSFW = "showNsfw"; export const SHOW_UNAVAILABLE = "showUnavailable"; -export const GET_THEMES = "theme"; +export const THEME = "theme"; +export const THEMES = "themes"; diff --git a/ui/js/lbry.js b/ui/js/lbry.js index a2f48c064..9591038e3 100644 --- a/ui/js/lbry.js +++ b/ui/js/lbry.js @@ -19,7 +19,8 @@ let lbry = { customLighthouseServers: [], showDeveloperMenu: false, language: "en", - theme: "light", + theme: { name: "light", path: "" }, + themes: [], }, }; diff --git a/ui/js/page/settings/index.js b/ui/js/page/settings/index.js index c74b918af..798f31c4a 100644 --- a/ui/js/page/settings/index.js +++ b/ui/js/page/settings/index.js @@ -1,8 +1,18 @@ import React from "react"; import { connect } from "react-redux"; import { doClearCache } from "actions/app"; -import { doSetDaemonSetting, doSetClientSetting } from "actions/settings"; -import { selectDaemonSettings, selectShowNsfw } from "selectors/settings"; +import { + doSetDaemonSetting, + doSetClientSetting, + doSetTheme, + doGetThemes, +} from "actions/settings"; +import { + selectDaemonSettings, + selectShowNsfw, + selectThemes, + selectTheme, +} from "selectors/settings"; import SettingsPage from "./view"; const select = state => ({ @@ -14,6 +24,8 @@ 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()), }); export default connect(select, perform)(SettingsPage); diff --git a/ui/js/page/settings/view.jsx b/ui/js/page/settings/view.jsx index f2f89b0a2..02f64957d 100644 --- a/ui/js/page/settings/view.jsx +++ b/ui/js/page/settings/view.jsx @@ -21,7 +21,7 @@ class SettingsPage extends React.PureComponent { language: lbry.getClientSetting(settings.LANGUAGE), clearingCache: false, theme: lbry.getClientSetting(settings.THEME), - themes: [], + themes: lbry.getClientSetting(settings.THEMES), }; } @@ -39,8 +39,7 @@ class SettingsPage extends React.PureComponent { } getThemes() { - //const { themes } = this.props.getThemes().data; - //this.setState({ themes }); + this.props.getThemes(); } setDaemonSetting(name, value) { @@ -53,8 +52,7 @@ class SettingsPage extends React.PureComponent { } setTheme(value) { - //setTheme(value); - //this.props.setClientSetting("theme", value); + this.props.setTheme(value); } onRunOnStartChange(event) { @@ -121,7 +119,6 @@ class SettingsPage extends React.PureComponent { onShowUnavailableChange(event) {} componentDidMount() { - const { themes } = this.state; this.getThemes(); } @@ -252,8 +249,10 @@ class SettingsPage extends React.PureComponent { defaultValue={lbry.getClientSetting("theme")} className="form-field__input--inline" > - {this.state.themes.map((name, index) => - + {this.state.themes.map((theme, index) => + )} diff --git a/ui/js/reducers/settings.js b/ui/js/reducers/settings.js index 4b78284cc..1d5d4cd2a 100644 --- a/ui/js/reducers/settings.js +++ b/ui/js/reducers/settings.js @@ -5,6 +5,7 @@ const reducers = {}; const defaultState = { clientSettings: { showNsfw: lbry.getClientSetting("showNsfw"), + themes: [], }, }; @@ -25,6 +26,12 @@ reducers[types.CLIENT_SETTING_CHANGED] = function(state, action) { }); }; +reducers[types.GET_THEMES] = function(state, action) { + return Object.assign({}, state, { + themes: action.data.themes, + }); +}; + export default function reducer(state = defaultState, action) { const handler = reducers[action.type]; if (handler) return handler(state, action); diff --git a/ui/js/selectors/settings.js b/ui/js/selectors/settings.js index d875ef360..1979e8b17 100644 --- a/ui/js/selectors/settings.js +++ b/ui/js/selectors/settings.js @@ -21,3 +21,13 @@ export const selectShowNsfw = createSelector( selectClientSettings, clientSettings => !!clientSettings.showNsfw ); + +export const selectThemes = createSelector( + selectClientSettings, + clientSettings => clientSettings.themes +); + +export const selectTheme = createSelector( + selectClientSettings, + clientSettings => clientSettings.theme +);