From 85a65aef52b41fd476bb404991bc0d01fcbef207 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Malak?= <pawel999@icloud.com>
Date: Thu, 18 Nov 2021 16:03:44 +0100
Subject: [PATCH] Added option to hide header greetings and date separately
---
CHANGELOG.md | 1 +
client/src/components/Home/Header/Header.tsx | 22 ++-
.../Home/Header/functions/getDateTime.ts | 50 ++++--
client/src/components/Home/Home.tsx | 2 +-
.../Settings/UISettings/UISettings.tsx | 170 ++++++++++--------
client/src/interfaces/Config.ts | 1 +
client/src/interfaces/Forms.ts | 1 +
client/src/store/action-creators/config.ts | 1 +
.../utility/templateObjects/configTemplate.ts | 1 +
.../templateObjects/settingsTemplate.ts | 1 +
utils/init/initialConfig.json | 3 +-
11 files changed, 153 insertions(+), 100 deletions(-)
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<string>(getDateTime());
const [greeting, setGreeting] = useState<string>(greeter());
@@ -28,14 +36,18 @@ export const Header = (): JSX.Element => {
return (
<header className={classes.Header}>
- <p>{dateTime}</p>
+ {(!hideDate || showTime) && <p>{dateTime}</p>}
+
<Link to="/settings" className={classes.SettingsLink}>
Go to Settings
</Link>
- <span className={classes.HeaderMain}>
- <h1>{greeting}</h1>
- <WeatherWidget />
- </span>
+
+ {!hideHeader && (
+ <span className={classes.HeaderMain}>
+ <h1>{greeting}</h1>
+ <WeatherWidget />
+ </span>
+ )}
</header>
);
};
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 => {
<div></div>
)}
- {!config.hideHeader ? <Header /> : <div></div>}
+ <Header />
{!config.hideApps ? (
<Fragment>
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 (
<form onSubmit={(e) => formSubmitHandler(e)}>
- {/* OTHER OPTIONS */}
+ {/* === OTHER OPTIONS === */}
<SettingsHeadline text="Miscellaneous" />
{/* PAGE TITLE */}
<InputGroup>
@@ -81,6 +81,50 @@ export const UISettings = (): JSX.Element => {
/>
</InputGroup>
+ {/* === HEADER OPTIONS === */}
+ <SettingsHeadline text="Header" />
+ {/* HIDE HEADER */}
+ <InputGroup>
+ <label htmlFor="hideHeader">Hide greetings</label>
+ <select
+ id="hideHeader"
+ name="hideHeader"
+ value={formData.hideHeader ? 1 : 0}
+ onChange={(e) => inputChangeHandler(e, { isBool: true })}
+ >
+ <option value={1}>True</option>
+ <option value={0}>False</option>
+ </select>
+ </InputGroup>
+
+ {/* HIDE DATE */}
+ <InputGroup>
+ <label htmlFor="hideDate">Hide date</label>
+ <select
+ id="hideDate"
+ name="hideDate"
+ value={formData.hideDate ? 1 : 0}
+ onChange={(e) => inputChangeHandler(e, { isBool: true })}
+ >
+ <option value={1}>True</option>
+ <option value={0}>False</option>
+ </select>
+ </InputGroup>
+
+ {/* HIDE TIME */}
+ <InputGroup>
+ <label htmlFor="showTime">Hide time</label>
+ <select
+ id="showTime"
+ name="showTime"
+ value={formData.showTime ? 1 : 0}
+ onChange={(e) => inputChangeHandler(e, { isBool: true })}
+ >
+ <option value={0}>True</option>
+ <option value={1}>False</option>
+ </select>
+ </InputGroup>
+
{/* DATE FORMAT */}
<InputGroup>
<label htmlFor="useAmericanDate">Date formatting</label>
@@ -95,7 +139,52 @@ export const UISettings = (): JSX.Element => {
</select>
</InputGroup>
- {/* BEAHVIOR OPTIONS */}
+ {/* CUSTOM GREETINGS */}
+ <InputGroup>
+ <label htmlFor="greetingsSchema">Custom greetings</label>
+ <input
+ type="text"
+ id="greetingsSchema"
+ name="greetingsSchema"
+ placeholder="Good day;Hi;Bye!"
+ value={formData.greetingsSchema}
+ onChange={(e) => inputChangeHandler(e)}
+ />
+ <span>
+ Greetings must be separated with semicolon. Only 4 messages can be
+ used
+ </span>
+ </InputGroup>
+
+ {/* CUSTOM DAYS */}
+ <InputGroup>
+ <label htmlFor="daySchema">Custom weekday names</label>
+ <input
+ type="text"
+ id="daySchema"
+ name="daySchema"
+ placeholder="Sunday;Monday;Tuesday"
+ value={formData.daySchema}
+ onChange={(e) => inputChangeHandler(e)}
+ />
+ <span>Names must be separated with semicolon</span>
+ </InputGroup>
+
+ {/* CUSTOM MONTHS */}
+ <InputGroup>
+ <label htmlFor="monthSchema">Custom month names</label>
+ <input
+ type="text"
+ id="monthSchema"
+ name="monthSchema"
+ placeholder="January;February;March"
+ value={formData.monthSchema}
+ onChange={(e) => inputChangeHandler(e)}
+ />
+ <span>Names must be separated with semicolon</span>
+ </InputGroup>
+
+ {/* === BEAHVIOR OPTIONS === */}
<SettingsHeadline text="App Behavior" />
{/* PIN APPS */}
<InputGroup>
@@ -172,82 +261,7 @@ export const UISettings = (): JSX.Element => {
</select>
</InputGroup>
- {/* HEADER OPTIONS */}
- <SettingsHeadline text="Header" />
- {/* HIDE HEADER */}
- <InputGroup>
- <label htmlFor="hideHeader">Hide greeting and date</label>
- <select
- id="hideHeader"
- name="hideHeader"
- value={formData.hideHeader ? 1 : 0}
- onChange={(e) => inputChangeHandler(e, { isBool: true })}
- >
- <option value={1}>True</option>
- <option value={0}>False</option>
- </select>
- </InputGroup>
-
- {/* CUSTOM GREETINGS */}
- <InputGroup>
- <label htmlFor="greetingsSchema">Custom greetings</label>
- <input
- type="text"
- id="greetingsSchema"
- name="greetingsSchema"
- placeholder="Good day;Hi;Bye!"
- value={formData.greetingsSchema}
- onChange={(e) => inputChangeHandler(e)}
- />
- <span>
- Greetings must be separated with semicolon. Only 4 messages can be
- used
- </span>
- </InputGroup>
-
- {/* CUSTOM DAYS */}
- <InputGroup>
- <label htmlFor="daySchema">Custom weekday names</label>
- <input
- type="text"
- id="daySchema"
- name="daySchema"
- placeholder="Sunday;Monday;Tuesday"
- value={formData.daySchema}
- onChange={(e) => inputChangeHandler(e)}
- />
- <span>Names must be separated with semicolon</span>
- </InputGroup>
-
- {/* CUSTOM MONTHS */}
- <InputGroup>
- <label htmlFor="monthSchema">Custom month names</label>
- <input
- type="text"
- id="monthSchema"
- name="monthSchema"
- placeholder="January;February;March"
- value={formData.monthSchema}
- onChange={(e) => inputChangeHandler(e)}
- />
- <span>Names must be separated with semicolon</span>
- </InputGroup>
-
- {/* SHOW TIME */}
- <InputGroup>
- <label htmlFor="showTime">Show time</label>
- <select
- id="showTime"
- name="showTime"
- value={formData.showTime ? 1 : 0}
- onChange={(e) => inputChangeHandler(e, { isBool: true })}
- >
- <option value={1}>True</option>
- <option value={0}>False</option>
- </select>
- </InputGroup>
-
- {/* MODULES OPTIONS */}
+ {/* === MODULES OPTIONS === */}
<SettingsHeadline text="Modules" />
{/* HIDE APPS */}
<InputGroup>
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<GetConfigAction>) => {
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
}