diff --git a/app/src/actions/Settings.ts b/app/src/actions/Settings.ts index ac33784..d9183cf 100644 --- a/app/src/actions/Settings.ts +++ b/app/src/actions/Settings.ts @@ -11,6 +11,7 @@ import { ActionTypes, SettingsState, TopicOrder, + Action, } from '../reducers/Settings' import { Base64Message } from '../../../backend/src/Model/Base64Message'; @@ -152,3 +153,10 @@ function autoExpandLimitForTree(tree: q.Tree) { return closestExistingLimit(calculatedLimit) } + +export const toggleTheme = () => (dispatch: Dispatch, getState: () => AppState) => { + dispatch({ + type: getState().settings.theme === 'light' ? ActionTypes.SETTINGS_SET_THEME_DARK : ActionTypes.SETTINGS_SET_THEME_LIGHT, + }) + dispatch(storeSettings()) +} diff --git a/app/src/components/Settings.tsx b/app/src/components/Settings.tsx index 2210936..bbc5734 100644 --- a/app/src/components/Settings.tsx +++ b/app/src/components/Settings.tsx @@ -4,7 +4,7 @@ import ChevronRight from '@material-ui/icons/ChevronRight' import { AppState } from '../reducers' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' -import { settingsActions, globalActions } from '../actions' +import { settingsActions } from '../actions' import { shell } from 'electron' import { StyleRulesCallback, withStyles } from '@material-ui/core/styles' import { TopicOrder } from '../reducers/Settings' @@ -70,7 +70,6 @@ const styles: StyleRulesCallback = theme => ({ interface Props { actions: typeof settingsActions - globalActions: typeof globalActions autoExpandLimit: number classes: any highlightTopicUpdates: boolean @@ -177,9 +176,9 @@ class Settings extends React.Component { } private toggleTheme() { - const { globalActions, theme } = this.props + const { actions, theme } = this.props - return this.renderSwitch('Theme', theme === 'light', globalActions.toggleTheme, 'Select a theme') + return this.renderSwitch('Theme', theme === 'light', actions.toggleTheme, 'Select a theme') } private renderAutoExpand() { @@ -242,14 +241,13 @@ const mapStateToProps = (state: AppState) => { visible: state.settings.visible, highlightTopicUpdates: state.settings.highlightTopicUpdates, selectTopicWithMouseOver: state.settings.selectTopicWithMouseOver, - theme: state.globalState.theme, + theme: state.settings.theme, } } const mapDispatchToProps = (dispatch: any) => { return { actions: bindActionCreators(settingsActions, dispatch), - globalActions: bindActionCreators(globalActions, dispatch), } } diff --git a/app/src/index.tsx b/app/src/index.tsx index 141a330..3b4d85c 100644 --- a/app/src/index.tsx +++ b/app/src/index.tsx @@ -56,7 +56,7 @@ function ApplicationRenderer(props: {theme: 'light' | 'dark'}) { const mapStateToProps = (state: AppState) => { return { - theme: state.globalState.theme, + theme: state.settings.theme, } } diff --git a/app/src/reducers/Settings.ts b/app/src/reducers/Settings.ts index 5ca9e5c..7d0e208 100644 --- a/app/src/reducers/Settings.ts +++ b/app/src/reducers/Settings.ts @@ -18,9 +18,10 @@ export interface SettingsState { highlightTopicUpdates: boolean valueRendererDisplayMode: ValueRendererDisplayMode selectTopicWithMouseOver: boolean + theme: 'light' | 'dark' } -export type Action = SetAutoExpandLimit | ToggleVisibility | SetTopicOrder | FilterTopics | TogglehighlightTopicUpdates | SetValueRendererDisplayMode +export type Action = SetAutoExpandLimit | ToggleVisibility | SetTopicOrder | FilterTopics | TogglehighlightTopicUpdates | SetValueRendererDisplayMode | SetTheme export enum ActionTypes { SETTINGS_SET_AUTO_EXPAND_LIMIT = 'SETTINGS_SET_AUTO_EXPAND_LIMIT', @@ -31,7 +32,8 @@ export enum ActionTypes { SETTINGS_DID_LOAD_SETTINGS = 'SETTINGS_DID_LOAD_SETTINGS', SETTINGS_SET_VALUE_RENDERER_DISPLAY_MODE = 'SETTINGS_SET_VALUE_RENDERER_DISPLAY_MODE', SETTINGS_SET_SELECT_TOPIC_WITH_MOUSE_OVER = 'SETTINGS_SET_SELECT_TOPIC_WITH_MOUSE_OVER', - + SETTINGS_SET_THEME_LIGHT = 'SETTINGS_SET_THEME_LIGHT', + SETTINGS_SET_THEME_DARK = 'SETTINGS_SET_THEME_DARK', } const initialState: SettingsState = { @@ -41,6 +43,14 @@ const initialState: SettingsState = { highlightTopicUpdates: true, valueRendererDisplayMode: 'diff', selectTopicWithMouseOver: false, + theme: 'dark', +} + +const setTheme = (theme: 'light' | 'dark') => (state: SettingsState) => { + return { + ...state, + theme, + } } export const settingsReducer = createReducer(initialState, { @@ -52,8 +62,14 @@ export const settingsReducer = createReducer(initialState, { SETTINGS_DID_LOAD_SETTINGS: didLoadSettings, SETTINGS_SET_VALUE_RENDERER_DISPLAY_MODE: setValueRendererDisplayMode, SETTINGS_SET_SELECT_TOPIC_WITH_MOUSE_OVER: setSelectTopicWithMouseOver, + SETTINGS_SET_THEME_LIGHT: setTheme('light'), + SETTINGS_SET_THEME_DARK: setTheme('dark'), }) +export interface SetTheme { + type: ActionTypes.SETTINGS_SET_THEME_LIGHT | ActionTypes.SETTINGS_SET_THEME_DARK +} + export interface DidLoadSettings { type: ActionTypes.SETTINGS_DID_LOAD_SETTINGS settings: Partial diff --git a/app/src/reducers/index.ts b/app/src/reducers/index.ts index 9b9c089..ead936b 100644 --- a/app/src/reducers/index.ts +++ b/app/src/reducers/index.ts @@ -34,12 +34,10 @@ export interface GlobalState { showUpdateNotification?: boolean showUpdateDetails: boolean error?: string - theme: 'light' | 'dark' } const initialGlobalState: GlobalState = { showUpdateDetails: false, - theme: 'dark', } const globalState: Reducer = (state = initialGlobalState, action) => { @@ -61,18 +59,6 @@ const globalState: Reducer = (state = ini error: action.error, } - case ActionTypes.setDarkTheme: - return { - ...state, - theme: 'dark', - } - - case ActionTypes.setLightTheme: - return { - ...state, - theme: 'light', - } - case ActionTypes.showUpdateDetails: if (action.showUpdateDetails === undefined) { return state