From e2285e2deb8d554193a3a85a03703459389c2e71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Malak?= Date: Thu, 18 Nov 2021 13:47:27 +0100 Subject: [PATCH] Moved Themer to Settings. Added option to set default theme --- CHANGELOG.md | 1 + client/src/App.tsx | 22 +++- .../DockerSettings/DockerSettings.tsx | 2 +- .../SearchSettings/SearchSettings.tsx | 2 +- client/src/components/Settings/Settings.tsx | 2 +- .../Themer/ThemePreview.module.css | 3 +- .../{ => Settings}/Themer/ThemePreview.tsx | 2 +- .../{ => Settings}/Themer/Themer.module.css | 0 .../src/components/Settings/Themer/Themer.tsx | 101 ++++++++++++++++++ .../{ => Settings}/Themer/themes.json | 0 client/src/components/Themer/Themer.tsx | 29 ----- client/src/interfaces/Config.ts | 1 + client/src/interfaces/Forms.ts | 4 + client/src/store/action-creators/config.ts | 15 +-- client/src/store/action-creators/theme.ts | 2 +- client/src/types/ConfigFormData.ts | 14 +++ client/src/types/index.ts | 1 + .../utility/templateObjects/configTemplate.ts | 1 + .../templateObjects/settingsTemplate.ts | 5 + utils/init/initialConfig.json | 3 +- 20 files changed, 156 insertions(+), 54 deletions(-) rename client/src/components/{ => Settings}/Themer/ThemePreview.module.css (93%) rename client/src/components/{ => Settings}/Themer/ThemePreview.tsx (94%) rename client/src/components/{ => Settings}/Themer/Themer.module.css (100%) create mode 100644 client/src/components/Settings/Themer/Themer.tsx rename client/src/components/{ => Settings}/Themer/themes.json (100%) delete mode 100644 client/src/components/Themer/Themer.tsx create mode 100644 client/src/types/ConfigFormData.ts create mode 100644 client/src/types/index.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 9f66a48..940e9dc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,5 @@ ### v2.0.1 (TBA) +- Added option to set default theme for all new users ([#165](https://github.com/pawelmalak/flame/issues/165)) - Fixed bug with custom icons not working with apps when "pin by default" was disabled ### v2.0.0 (2021-11-15) diff --git a/client/src/App.tsx b/client/src/App.tsx index 2e4c72e..d9e8717 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,7 +1,13 @@ +import { useEffect } from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; +import 'external-svg-loader'; + +// Redux +import { useDispatch, useSelector } from 'react-redux'; +import { bindActionCreators } from 'redux'; import { autoLogin, getConfig } from './store/action-creators'; import { actionCreators, store } from './store'; -import 'external-svg-loader'; +import { State } from './store/reducers'; // Utils import { checkVersion, decodeToken } from './utility'; @@ -12,9 +18,6 @@ import { Apps } from './components/Apps/Apps'; import { Settings } from './components/Settings/Settings'; import { Bookmarks } from './components/Bookmarks/Bookmarks'; import { NotificationCenter } from './components/NotificationCenter/NotificationCenter'; -import { useDispatch } from 'react-redux'; -import { bindActionCreators } from 'redux'; -import { useEffect } from 'react'; // Get config store.dispatch(getConfig()); @@ -25,6 +28,8 @@ if (localStorage.token) { } export const App = (): JSX.Element => { + const { config, loading } = useSelector((state: State) => state.config); + const dispath = useDispatch(); const { fetchQueries, setTheme, logout, createNotification } = bindActionCreators(actionCreators, dispath); @@ -46,7 +51,7 @@ export const App = (): JSX.Element => { } }, 1000); - // set theme + // set user theme if present if (localStorage.theme) { setTheme(localStorage.theme); } @@ -60,6 +65,13 @@ export const App = (): JSX.Element => { return () => window.clearInterval(tokenIsValid); }, []); + // If there is no user theme, set the default one + useEffect(() => { + if (!loading && !localStorage.theme) { + setTheme(config.defaultTheme); + } + }, [loading]); + return ( <> diff --git a/client/src/components/Settings/DockerSettings/DockerSettings.tsx b/client/src/components/Settings/DockerSettings/DockerSettings.tsx index 54410d8..d950501 100644 --- a/client/src/components/Settings/DockerSettings/DockerSettings.tsx +++ b/client/src/components/Settings/DockerSettings/DockerSettings.tsx @@ -59,7 +59,7 @@ export const DockerSettings = (): JSX.Element => { {/* CUSTOM DOCKER SOCKET HOST */} - + { > - + inputChangeHandler(e)} + > + {themes.map((theme: Theme, idx) => ( + + ))} + + + + + + )} + + ); +}; diff --git a/client/src/components/Themer/themes.json b/client/src/components/Settings/Themer/themes.json similarity index 100% rename from client/src/components/Themer/themes.json rename to client/src/components/Settings/Themer/themes.json diff --git a/client/src/components/Themer/Themer.tsx b/client/src/components/Themer/Themer.tsx deleted file mode 100644 index 9c53f58..0000000 --- a/client/src/components/Themer/Themer.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { Fragment } from 'react'; -import { useDispatch } from 'react-redux'; -import { bindActionCreators } from 'redux'; -import { actionCreators } from '../../store'; - -import classes from './Themer.module.css'; - -import { themes } from './themes.json'; -import { Theme } from '../../interfaces/Theme'; -import { ThemePreview } from './ThemePreview'; - -export const Themer = (): JSX.Element => { - const dispatch = useDispatch(); - const { setTheme } = bindActionCreators(actionCreators, dispatch); - - return ( - -
-
- {themes.map( - (theme: Theme, idx: number): JSX.Element => ( - - ) - )} -
-
- - ); -}; diff --git a/client/src/interfaces/Config.ts b/client/src/interfaces/Config.ts index 7302d36..b0e2908 100644 --- a/client/src/interfaces/Config.ts +++ b/client/src/interfaces/Config.ts @@ -25,4 +25,5 @@ export interface Config { daySchema: string; monthSchema: string; showTime: boolean; + defaultTheme: string; } diff --git a/client/src/interfaces/Forms.ts b/client/src/interfaces/Forms.ts index 7272f21..03f8ae7 100644 --- a/client/src/interfaces/Forms.ts +++ b/client/src/interfaces/Forms.ts @@ -35,3 +35,7 @@ export interface DockerSettingsForm { kubernetesApps: boolean; unpinStoppedApps: boolean; } + +export interface ThemeSettingsForm { + defaultTheme: string; +} diff --git a/client/src/store/action-creators/config.ts b/client/src/store/action-creators/config.ts index bcc41e4..079faac 100644 --- a/client/src/store/action-creators/config.ts +++ b/client/src/store/action-creators/config.ts @@ -8,17 +8,10 @@ import { UpdateQueryAction, } from '../actions/config'; import axios from 'axios'; -import { - ApiResponse, - Config, - DockerSettingsForm, - OtherSettingsForm, - Query, - SearchForm, - WeatherForm, -} from '../../interfaces'; +import { ApiResponse, Config, Query } from '../../interfaces'; import { ActionType } from '../action-types'; import { storeUIConfig, applyAuth } from '../../utility'; +import { ConfigFormData } from '../../types'; const keys: (keyof Config)[] = [ 'useAmericanDate', @@ -50,9 +43,7 @@ export const getConfig = () => async (dispatch: Dispatch) => { }; export const updateConfig = - ( - formData: WeatherForm | OtherSettingsForm | SearchForm | DockerSettingsForm - ) => + (formData: ConfigFormData) => async (dispatch: Dispatch) => { try { const res = await axios.put>( diff --git a/client/src/store/action-creators/theme.ts b/client/src/store/action-creators/theme.ts index ba52d27..6209523 100644 --- a/client/src/store/action-creators/theme.ts +++ b/client/src/store/action-creators/theme.ts @@ -2,7 +2,7 @@ import { Dispatch } from 'redux'; import { SetThemeAction } from '../actions/theme'; import { ActionType } from '../action-types'; import { Theme } from '../../interfaces/Theme'; -import { themes } from '../../components/Themer/themes.json'; +import { themes } from '../../components/Settings/Themer/themes.json'; export const setTheme = (name: string) => (dispatch: Dispatch) => { diff --git a/client/src/types/ConfigFormData.ts b/client/src/types/ConfigFormData.ts new file mode 100644 index 0000000..a67d8af --- /dev/null +++ b/client/src/types/ConfigFormData.ts @@ -0,0 +1,14 @@ +import { + DockerSettingsForm, + OtherSettingsForm, + SearchForm, + ThemeSettingsForm, + WeatherForm, +} from '../interfaces'; + +export type ConfigFormData = + | WeatherForm + | SearchForm + | DockerSettingsForm + | OtherSettingsForm + | ThemeSettingsForm; diff --git a/client/src/types/index.ts b/client/src/types/index.ts new file mode 100644 index 0000000..ad5b423 --- /dev/null +++ b/client/src/types/index.ts @@ -0,0 +1 @@ +export * from './ConfigFormData'; diff --git a/client/src/utility/templateObjects/configTemplate.ts b/client/src/utility/templateObjects/configTemplate.ts index 6f51305..5cb34e9 100644 --- a/client/src/utility/templateObjects/configTemplate.ts +++ b/client/src/utility/templateObjects/configTemplate.ts @@ -28,4 +28,5 @@ export const configTemplate: Config = { monthSchema: 'January;February;March;April;May;June;July;August;September;October;November;December', showTime: false, + defaultTheme: 'tron', }; diff --git a/client/src/utility/templateObjects/settingsTemplate.ts b/client/src/utility/templateObjects/settingsTemplate.ts index f175318..06afd9e 100644 --- a/client/src/utility/templateObjects/settingsTemplate.ts +++ b/client/src/utility/templateObjects/settingsTemplate.ts @@ -2,6 +2,7 @@ import { DockerSettingsForm, OtherSettingsForm, SearchForm, + ThemeSettingsForm, WeatherForm, } from '../../interfaces'; @@ -43,3 +44,7 @@ export const dockerSettingsTemplate: DockerSettingsForm = { kubernetesApps: true, unpinStoppedApps: true, }; + +export const themeSettingsTemplate: ThemeSettingsForm = { + defaultTheme: 'tron', +}; diff --git a/utils/init/initialConfig.json b/utils/init/initialConfig.json index 8f9b2f8..c815d11 100644 --- a/utils/init/initialConfig.json +++ b/utils/init/initialConfig.json @@ -24,5 +24,6 @@ "greetingsSchema": "Good evening!;Good afternoon!;Good morning!;Good night!", "daySchema": "Sunday;Monday;Tuesday;Wednesday;Thursday;Friday;Saturday", "monthSchema": "January;February;March;April;May;June;July;August;September;October;November;December", - "showTime": false + "showTime": false, + "defaultTheme": "tron" }