From 2db24b059f37bc6202df56e51564150ffbe539cd Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 19 Aug 2017 17:59:48 -0600 Subject: [PATCH] rewrite action -> doSetTheme --- ui/dist/themes/light.css | 6 +++++ ui/js/actions/app.js | 21 +++++++++++++++++- ui/js/actions/settings.js | 43 +++++++++++++----------------------- ui/js/component/app/index.js | 2 ++ ui/js/component/app/view.jsx | 5 +++++ ui/js/lbry.js | 2 +- ui/js/page/settings/index.js | 9 +------- ui/js/page/settings/view.jsx | 8 +------ ui/js/reducers/settings.js | 10 +++------ ui/js/selectors/settings.js | 10 --------- 10 files changed, 54 insertions(+), 62 deletions(-) create mode 100644 ui/dist/themes/light.css diff --git a/ui/dist/themes/light.css b/ui/dist/themes/light.css new file mode 100644 index 000000000..c41b966f8 --- /dev/null +++ b/ui/dist/themes/light.css @@ -0,0 +1,6 @@ +:root { + --color-primary: #155B4A; + --color-canvas: #f5f5f5; + --color-bg: #ffffff; + --color-bg-alt: #D9D9D9; +} diff --git a/ui/js/actions/app.js b/ui/js/actions/app.js index e70e9767f..56d7eab7b 100644 --- a/ui/js/actions/app.js +++ b/ui/js/actions/app.js @@ -12,7 +12,7 @@ import { selectHistoryForward, } from "selectors/app"; import { doSearch } from "actions/search"; -import { doFetchDaemonSettings } from "actions/settings"; +import { doFetchDaemonSettings, doSetClientSetting } from "actions/settings"; import { doAuthenticate } from "actions/user"; import { doFileList } from "actions/file_info"; import { toQueryString } from "util/query_params"; @@ -351,3 +351,22 @@ export function doQuit() { remote.app.quit(); }; } + +export function doGetThemes() { + const dir = `${remote.app.getAppPath()}/dist/themes`; + + // Get all .css files + const files = fs + .readdirSync(dir) + .filter(file => path.extname(file) === ".css"); + + return function(dispatch, getState) { + // Find themes + const themes = files.map(file => ({ + name: file.replace(".css", ""), + path: `./themes/${file}`, + })); + + dispatch(doSetClientSetting("themes", themes)); + }; +} diff --git a/ui/js/actions/settings.js b/ui/js/actions/settings.js index 4e360313c..313b9e1b8 100644 --- a/ui/js/actions/settings.js +++ b/ui/js/actions/settings.js @@ -1,8 +1,6 @@ import * as types from "constants/action_types"; +import * as settings from "constants/settings"; import lbry from "lbry"; -import { readdirSync } from "fs"; -import { extname } from "path"; -import { remote } from "electron"; export function doFetchDaemonSettings() { return function(dispatch, getState) { @@ -45,34 +43,23 @@ export function doSetClientSetting(key, value) { }; } -export function doSetTheme(themeName) { - const name = themeName || "light"; - const link = document.getElementById("theme"); - +export function doSetTheme(name) { return function(dispatch, getState) { - const { themes } = getState().settings.clientSettings; - const theme = themes.find(theme => theme.name === name); + const last = lbry.getClientSetting(settings.THEME); + const find = name => themes.find(theme => theme.name === name); - if (theme) { + // Get themes + const themes = lbry.getClientSetting(settings.THEMES); + + // Find theme + const theme = find(name) || find(last) || find("light"); + + if (theme.path) { + // update theme + const link = document.getElementById("theme"); link.href = theme.path; - dispatch(doSetClientSetting("theme", theme)); + + dispatch(doSetClientSetting(settings.THEME, theme.name)); } }; } - -export function doGetThemes() { - const path = `${remote.app.getAppPath()}/dist/themes`; - - // Get all .css files - const files = readdirSync(path).filter(file => extname(file) === ".css"); - - return function(dispatch, getState) { - // Find themes - const themes = files.map(file => ({ - name: file.replace(".css", ""), - path: `./themes/${file}`, - })); - - dispatch(doSetClientSetting("themes", themes)); - }; -} diff --git a/ui/js/component/app/index.js b/ui/js/component/app/index.js index 6e3c9bbca..cf6f89986 100644 --- a/ui/js/component/app/index.js +++ b/ui/js/component/app/index.js @@ -6,6 +6,7 @@ import { doOpenModal, doAlertError, doRecordScroll, + doGetThemes, } from "actions/app"; import { doFetchRewardedContent } from "actions/content"; @@ -29,6 +30,7 @@ const perform = dispatch => ({ updateBalance: balance => dispatch(doUpdateBalance(balance)), fetchRewardedContent: () => dispatch(doFetchRewardedContent()), recordScroll: scrollPosition => dispatch(doRecordScroll(scrollPosition)), + getThemes: () => dispatch(doGetThemes()), setTheme: name => dispatch(doSetTheme(name)), }); diff --git a/ui/js/component/app/view.jsx b/ui/js/component/app/view.jsx index 289162068..e28667c08 100644 --- a/ui/js/component/app/view.jsx +++ b/ui/js/component/app/view.jsx @@ -11,6 +11,7 @@ class App extends React.PureComponent { checkUpgradeAvailable, updateBalance, fetchRewardedContent, + getThemes, setTheme, } = this.props; @@ -32,6 +33,10 @@ class App extends React.PureComponent { window.addEventListener("scroll", this.scrollListener); + // Load themes + getThemes(); + + // Select theme setTheme(); } diff --git a/ui/js/lbry.js b/ui/js/lbry.js index 9591038e3..2524c738b 100644 --- a/ui/js/lbry.js +++ b/ui/js/lbry.js @@ -19,7 +19,7 @@ let lbry = { customLighthouseServers: [], showDeveloperMenu: false, language: "en", - theme: { name: "light", path: "" }, + theme: "light", themes: [], }, }; diff --git a/ui/js/page/settings/index.js b/ui/js/page/settings/index.js index 798f31c4a..5764e9dac 100644 --- a/ui/js/page/settings/index.js +++ b/ui/js/page/settings/index.js @@ -5,14 +5,8 @@ import { doSetDaemonSetting, doSetClientSetting, doSetTheme, - doGetThemes, } from "actions/settings"; -import { - selectDaemonSettings, - selectShowNsfw, - selectThemes, - selectTheme, -} from "selectors/settings"; +import { selectDaemonSettings, selectShowNsfw } from "selectors/settings"; import SettingsPage from "./view"; const select = state => ({ @@ -25,7 +19,6 @@ const perform = dispatch => ({ 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 02f64957d..be847a69a 100644 --- a/ui/js/page/settings/view.jsx +++ b/ui/js/page/settings/view.jsx @@ -38,10 +38,6 @@ class SettingsPage extends React.PureComponent { setTimeout(clear, 1000, { once: true }); } - getThemes() { - this.props.getThemes(); - } - setDaemonSetting(name, value) { this.props.setDaemonSetting(name, value); } @@ -118,9 +114,7 @@ class SettingsPage extends React.PureComponent { onShowUnavailableChange(event) {} - componentDidMount() { - this.getThemes(); - } + componentDidMount() {} render() { const { daemonSettings } = this.props; diff --git a/ui/js/reducers/settings.js b/ui/js/reducers/settings.js index 1d5d4cd2a..6dc59a068 100644 --- a/ui/js/reducers/settings.js +++ b/ui/js/reducers/settings.js @@ -1,11 +1,13 @@ import * as types from "constants/action_types"; +import * as settings from "constants/settings"; import lbry from "lbry"; const reducers = {}; const defaultState = { clientSettings: { showNsfw: lbry.getClientSetting("showNsfw"), - themes: [], + theme: lbry.getClientSetting(settings.THEME), + themes: lbry.getClientSetting(settings.THEMES), }, }; @@ -26,12 +28,6 @@ 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 1979e8b17..d875ef360 100644 --- a/ui/js/selectors/settings.js +++ b/ui/js/selectors/settings.js @@ -21,13 +21,3 @@ export const selectShowNsfw = createSelector( selectClientSettings, clientSettings => !!clientSettings.showNsfw ); - -export const selectThemes = createSelector( - selectClientSettings, - clientSettings => clientSettings.themes -); - -export const selectTheme = createSelector( - selectClientSettings, - clientSettings => clientSettings.theme -);