diff --git a/CHANGELOG.md b/CHANGELOG.md index efc1635..f5fc9df 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ### v2.0.1 (TBA) - Added option to display humidity in the weather widget ([#136](https://github.com/pawelmalak/flame/issues/136)) - Added option to set default theme for all new users ([#165](https://github.com/pawelmalak/flame/issues/165)) +- Added option to hide header greetings and date separately ([#200](https://github.com/pawelmalak/flame/issues/200)) - 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/components/Home/Header/Header.tsx b/client/src/components/Home/Header/Header.tsx index f059b49..84da280 100644 --- a/client/src/components/Home/Header/Header.tsx +++ b/client/src/components/Home/Header/Header.tsx @@ -1,6 +1,10 @@ import { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; +// Redux +import { useSelector } from 'react-redux'; +import { State } from '../../../store/reducers'; + // CSS import classes from './Header.module.css'; @@ -12,6 +16,10 @@ import { getDateTime } from './functions/getDateTime'; import { greeter } from './functions/greeter'; export const Header = (): JSX.Element => { + const { hideHeader, hideDate, showTime } = useSelector( + (state: State) => state.config.config + ); + const [dateTime, setDateTime] = useState(getDateTime()); const [greeting, setGreeting] = useState(greeter()); @@ -28,14 +36,18 @@ export const Header = (): JSX.Element => { return (
-

{dateTime}

+ {(!hideDate || showTime) &&

{dateTime}

} + Go to Settings - -

{greeting}

- -
+ + {!hideHeader && ( + +

{greeting}

+ +
+ )}
); }; diff --git a/client/src/components/Home/Header/functions/getDateTime.ts b/client/src/components/Home/Header/functions/getDateTime.ts index 69cd78b..45ffc9d 100644 --- a/client/src/components/Home/Header/functions/getDateTime.ts +++ b/client/src/components/Home/Header/functions/getDateTime.ts @@ -30,22 +30,42 @@ export const getDateTime = (): string => { const useAmericanDate = localStorage.useAmericanDate === 'true'; const showTime = localStorage.showTime === 'true'; + const hideDate = localStorage.hideDate === 'true'; - const p = parseTime; + // Date + let dateEl = ''; - const time = `${p(now.getHours())}:${p(now.getMinutes())}:${p( - now.getSeconds() - )}`; - - const timeEl = showTime ? ` - ${time}` : ''; - - if (!useAmericanDate) { - return `${days[now.getDay()]}, ${now.getDate()} ${ - months[now.getMonth()] - } ${now.getFullYear()}${timeEl}`; - } else { - return `${days[now.getDay()]}, ${ - months[now.getMonth()] - } ${now.getDate()} ${now.getFullYear()}${timeEl}`; + if (!hideDate) { + if (!useAmericanDate) { + dateEl = `${days[now.getDay()]}, ${now.getDate()} ${ + months[now.getMonth()] + } ${now.getFullYear()}`; + } else { + dateEl = `${days[now.getDay()]}, ${ + months[now.getMonth()] + } ${now.getDate()} ${now.getFullYear()}`; + } } + + // Time + const p = parseTime; + let timeEl = ''; + + if (showTime) { + const time = `${p(now.getHours())}:${p(now.getMinutes())}:${p( + now.getSeconds() + )}`; + + timeEl = time; + } + + // Separator + let separator = ''; + + if (!hideDate && showTime) { + separator = ' - '; + } + + // Output + return `${dateEl}${separator}${timeEl}`; }; diff --git a/client/src/components/Home/Home.tsx b/client/src/components/Home/Home.tsx index 43b2373..d7f3872 100644 --- a/client/src/components/Home/Home.tsx +++ b/client/src/components/Home/Home.tsx @@ -98,7 +98,7 @@ export const Home = (): JSX.Element => {
)} - {!config.hideHeader ?
:
} +
{!config.hideApps ? ( diff --git a/client/src/components/Settings/UISettings/UISettings.tsx b/client/src/components/Settings/UISettings/UISettings.tsx index 78d8b14..b0de452 100644 --- a/client/src/components/Settings/UISettings/UISettings.tsx +++ b/client/src/components/Settings/UISettings/UISettings.tsx @@ -66,7 +66,7 @@ export const UISettings = (): JSX.Element => { return (
formSubmitHandler(e)}> - {/* OTHER OPTIONS */} + {/* === OTHER OPTIONS === */} {/* PAGE TITLE */} @@ -81,6 +81,50 @@ export const UISettings = (): JSX.Element => { /> + {/* === HEADER OPTIONS === */} + + {/* HIDE HEADER */} + + + + + + {/* HIDE DATE */} + + + + + + {/* HIDE TIME */} + + + + + {/* DATE FORMAT */} @@ -95,7 +139,52 @@ export const UISettings = (): JSX.Element => { - {/* BEAHVIOR OPTIONS */} + {/* CUSTOM GREETINGS */} + + + inputChangeHandler(e)} + /> + + Greetings must be separated with semicolon. Only 4 messages can be + used + + + + {/* CUSTOM DAYS */} + + + inputChangeHandler(e)} + /> + Names must be separated with semicolon + + + {/* CUSTOM MONTHS */} + + + inputChangeHandler(e)} + /> + Names must be separated with semicolon + + + {/* === BEAHVIOR OPTIONS === */} {/* PIN APPS */} @@ -172,82 +261,7 @@ export const UISettings = (): JSX.Element => { - {/* HEADER OPTIONS */} - - {/* HIDE HEADER */} - - - - - - {/* CUSTOM GREETINGS */} - - - inputChangeHandler(e)} - /> - - Greetings must be separated with semicolon. Only 4 messages can be - used - - - - {/* CUSTOM DAYS */} - - - inputChangeHandler(e)} - /> - Names must be separated with semicolon - - - {/* CUSTOM MONTHS */} - - - inputChangeHandler(e)} - /> - Names must be separated with semicolon - - - {/* SHOW TIME */} - - - - - - {/* MODULES OPTIONS */} + {/* === MODULES OPTIONS === */} {/* HIDE APPS */} diff --git a/client/src/interfaces/Config.ts b/client/src/interfaces/Config.ts index f3d9334..cab413f 100644 --- a/client/src/interfaces/Config.ts +++ b/client/src/interfaces/Config.ts @@ -30,4 +30,5 @@ export interface Config { defaultTheme: string; isKilometer: boolean; weatherData: WeatherData; + hideDate: boolean; } diff --git a/client/src/interfaces/Forms.ts b/client/src/interfaces/Forms.ts index 878013b..ad3763f 100644 --- a/client/src/interfaces/Forms.ts +++ b/client/src/interfaces/Forms.ts @@ -30,6 +30,7 @@ export interface OtherSettingsForm { daySchema: string; monthSchema: string; showTime: boolean; + hideDate: boolean; } export interface DockerSettingsForm { diff --git a/client/src/store/action-creators/config.ts b/client/src/store/action-creators/config.ts index 079faac..6b516f7 100644 --- a/client/src/store/action-creators/config.ts +++ b/client/src/store/action-creators/config.ts @@ -19,6 +19,7 @@ const keys: (keyof Config)[] = [ 'daySchema', 'monthSchema', 'showTime', + 'hideDate', ]; export const getConfig = () => async (dispatch: Dispatch) => { diff --git a/client/src/utility/templateObjects/configTemplate.ts b/client/src/utility/templateObjects/configTemplate.ts index 6906973..8d58153 100644 --- a/client/src/utility/templateObjects/configTemplate.ts +++ b/client/src/utility/templateObjects/configTemplate.ts @@ -31,4 +31,5 @@ export const configTemplate: Config = { defaultTheme: 'tron', isKilometer: true, weatherData: 'cloud', + hideDate: false, }; diff --git a/client/src/utility/templateObjects/settingsTemplate.ts b/client/src/utility/templateObjects/settingsTemplate.ts index 8752859..a122830 100644 --- a/client/src/utility/templateObjects/settingsTemplate.ts +++ b/client/src/utility/templateObjects/settingsTemplate.ts @@ -22,6 +22,7 @@ export const otherSettingsTemplate: OtherSettingsForm = { monthSchema: 'January;February;March;April;May;June;July;August;September;October;November;December', showTime: false, + hideDate: false, }; export const weatherSettingsTemplate: WeatherForm = { diff --git a/utils/init/initialConfig.json b/utils/init/initialConfig.json index 897b43e..575a2e7 100644 --- a/utils/init/initialConfig.json +++ b/utils/init/initialConfig.json @@ -27,5 +27,6 @@ "showTime": false, "defaultTheme": "tron", "isKilometer": true, - "weatherData": "cloud" + "weatherData": "cloud", + "hideDate": false }