Add option to hide titles (#86)

src/main/i18n/translations/de.ts

@@ -80,6 +80,7 @@ const translationsDe: Partial<Translations> = {
 	auto: "Automatisch",
 	"diary-entries": "Tagebucheinträge",
 	"first-day-of-week": "Erster Wochentag",
+	"hide-titles": "Titel ausblenden",
 	no: "Nein",
 	ok: "OK",
 	"reset-diary": "Tagebuch zurücksetzen",

src/main/i18n/translations/en.ts

@@ -80,6 +80,7 @@ const translationsEn: Translations = {
 	auto: "Auto",
 	"diary-entries": "Diary entries",
 	"first-day-of-week": "First day of the week",
+	"hide-titles": "Hide titles",
 	no: "No",
 	ok: "OK",
 	"reset-diary": "Reset diary",

src/renderer/assets/styles/components/_editor.scss

@@ -11,9 +11,9 @@ $editor-padding-large: 2 * $spacing-abs-large;
 }
 
 .editor-scrollable {
-	display: grid;
+	display: flex;
 	flex: 1;
-	grid-template-rows: auto auto 1fr;
+	flex-direction: column;
 	overflow-y: auto;
 
 	@media (max-width: $screen-desktop) {
@@ -30,6 +30,11 @@ $editor-padding-large: 2 * $spacing-abs-large;
 	font-size: 150%;
 }
 
+// Fill editor height
+.editor-text-wrapper {
+	flex: 1;
+}
+
 .editor-toolbar {
 	@include background-color("background-toolbar");
 	@include box-shadow(0 -1.5px 1px 0, "shadow-inner");

src/renderer/assets/styles/elements/_form.scss

@@ -7,15 +7,15 @@ legend {
 	font-weight: $font-weight-bold;
 }
 
-.fieldset-content {
+.form-group {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	margin-right: -$spacing-abs-small;
 	margin-bottom: -$spacing-abs-small;
 }
 
-.fieldset-content > * {
+.form-group > * {
 	margin-right: $spacing-abs-small;
 	margin-bottom: $spacing-abs-small;
 }

src/renderer/components/elements/editor/editor/Editor.tsx

@@ -31,6 +31,7 @@ const listPlugin = createListPlugin();
 const plugins = [listPlugin];
 
 export interface StateProps {
+	hideTitles: boolean;
 	dateSelected: Moment;
 	entries: Entries;
 }
@@ -163,6 +164,7 @@ export default class Editor extends PureComponent<Props, State> {
 
 	render = (): ReactNode => {
 		const { dateSelected, textEditorState, titleEditorState } = this.state;
+		const { hideTitles } = this.props;
 
 		// Detect active inline/block styles
 		const blockType = RichUtils.getCurrentBlockType(textEditorState);
@@ -174,17 +176,19 @@ export default class Editor extends PureComponent<Props, State> {
 			<form className="editor">
 				<div className="editor-scrollable">
 					<p className="text-faded">{weekdayDate}</p>
-					<div className="editor-title-wrapper">
-						<PluginEditor
-							editorState={titleEditorState}
-							handleKeyCommand={this.handleTitleKeyCommand}
-							keyBindingFn={Editor.titleKeyBindingFn}
-							onBlur={this.saveEntry}
-							onChange={this.onTitleChange}
-							placeholder={translations["add-a-title"]}
-							spellCheck
-						/>
-					</div>
+					{!hideTitles && (
+						<div className="editor-title-wrapper">
+							<PluginEditor
+								editorState={titleEditorState}
+								handleKeyCommand={this.handleTitleKeyCommand}
+								keyBindingFn={Editor.titleKeyBindingFn}
+								onBlur={this.saveEntry}
+								onChange={this.onTitleChange}
+								placeholder={translations["add-a-title"]}
+								spellCheck
+							/>
+						</div>
+					)}
 					<div className="editor-text-wrapper">
 						<PluginEditor
 							editorState={textEditorState}

src/renderer/components/elements/editor/editor/EditorContainer.tsx

@@ -6,6 +6,7 @@ import { IndexDate } from "../../../../types";
 import Editor, { DispatchProps, StateProps } from "./Editor";
 
 const mapStateToProps = (state: RootState): StateProps => ({
+	hideTitles: state.app.hideTitles,
 	dateSelected: state.diary.dateSelected,
 	entries: state.file.entries,
 });

src/renderer/components/overlays/pref-overlay/PrefOverlay.tsx

@@ -2,9 +2,9 @@ import React, { ReactElement } from "react";
 
 import { translations } from "../../../utils/i18n";
 import OverlayContainer from "../overlay-hoc/OverlayContainer";
+import EntriesPref from "./entries-pref/EntriesPref";
 import FileDirPrefContainer from "./file-dir-pref/FileDirPrefContainer";
 import FirstDayOfWeekPrefContainer from "./first-day-of-week-pref/FirstDayOfWeekPrefContainer";
-import FutureEntriesPrefContainer from "./future-entries-pref/FutureEntriesPrefContainer";
 import PasswordPrefContainer from "./password-pref/PasswordPrefContainer";
 import ThemePrefContainer from "./theme-pref/ThemePrefContainer";
 
@@ -28,7 +28,7 @@ export default function PrefOverlay(props: Props): ReactElement {
 			<form className="preferences-form">
 				<ThemePrefContainer />
 				{!isLocked && <FirstDayOfWeekPrefContainer />}
-				{!isLocked && <FutureEntriesPrefContainer />}
+				{!isLocked && <EntriesPref />}
 				<FileDirPrefContainer />
 				{!isLocked && <PasswordPrefContainer />}
 			</form>

src/renderer/components/overlays/pref-overlay/entries-pref/EntriesPref.tsx

@@ -0,0 +1,21 @@
+import React, { ReactElement } from "react";
+
+import { translations } from "../../../../utils/i18n";
+import FutureEntriesPrefContainer from "./future-entries-pref/FutureEntriesPrefContainer";
+import HideTitlesPrefContainer from "./hide-titles-pref/HideTitlesPrefContainer";
+
+/**
+ * Preference fieldset for options related to diary entries
+ */
+export default function EntriesPref(): ReactElement {
+	return (
+		<fieldset className="fieldset-entries">
+			<legend>{translations["diary-entries"]}</legend>
+			<div className="fieldset-content">
+				<HideTitlesPrefContainer />
+				<br />
+				<FutureEntriesPrefContainer />
+			</div>
+		</fieldset>
+	);
+}

src/renderer/components/overlays/pref-overlay/future-entries-pref/FutureEntriesPref.tsx → src/renderer/components/overlays/pref-overlay/entries-pref/future-entries-pref/FutureEntriesPref.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from "react";
 
-import { translations } from "../../../../utils/i18n";
+import { translations } from "../../../../../utils/i18n";
 
 export interface StateProps {
 	allowFutureEntries: boolean;
@@ -21,20 +21,15 @@ export default function FutureEntriesPref(props: Props): ReactElement {
 	const toggleAllowFutureEntries = (): void => updateFutureEntriesPref(!allowFutureEntries);
 
 	return (
-		<fieldset className="fieldset-future-entries">
-			<legend>{translations["diary-entries"]}</legend>
-			<div className="fieldset-content">
-				<label htmlFor="checkbox-future-entries">
-					<input
-						type="checkbox"
-						name="checkbox-future-entries"
-						id="checkbox-future-entries"
-						checked={allowFutureEntries}
-						onChange={toggleAllowFutureEntries}
-					/>
-					{translations["allow-future-entries"]}
-				</label>
-			</div>
-		</fieldset>
+		<label htmlFor="checkbox-future-entries">
+			<input
+				type="checkbox"
+				name="checkbox-future-entries"
+				id="checkbox-future-entries"
+				checked={allowFutureEntries}
+				onChange={toggleAllowFutureEntries}
+			/>
+			{translations["allow-future-entries"]}
+		</label>
 	);
 }

src/renderer/components/overlays/pref-overlay/future-entries-pref/FutureEntriesPrefContainer.tsx → src/renderer/components/overlays/pref-overlay/entries-pref/future-entries-pref/FutureEntriesPrefContainer.tsx

@@ -1,7 +1,7 @@
 import { connect } from "react-redux";
 
-import { updateFutureEntriesPref } from "../../../../store/app/actionCreators";
-import { RootState, ThunkDispatchT } from "../../../../store/store";
+import { updateFutureEntriesPref } from "../../../../../store/app/actionCreators";
+import { RootState, ThunkDispatchT } from "../../../../../store/store";
 import FutureEntriesPref, { DispatchProps, StateProps } from "./FutureEntriesPref";
 
 const mapStateToProps = (state: RootState): StateProps => ({

src/renderer/components/overlays/pref-overlay/entries-pref/hide-titles-pref/HideTitlesPref.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from "react";
+
+import { translations } from "../../../../../utils/i18n";
+
+export interface StateProps {
+	hideTitles: boolean;
+}
+
+export interface DispatchProps {
+	updateHideTitlesPref: (hideTitles: boolean) => void;
+}
+
+type Props = StateProps & DispatchProps;
+
+/**
+ * Preference fieldset for hiding or showing titles for diary entries
+ */
+export default function HideTitlesPref(props: Props): ReactElement {
+	const { hideTitles, updateHideTitlesPref } = props;
+
+	const toggleHideTitles = (): void => updateHideTitlesPref(!hideTitles);
+
+	return (
+		<label htmlFor="checkbox-hide-titles">
+			<input
+				type="checkbox"
+				name="checkbox-hide-titles"
+				id="checkbox-hide-titles"
+				checked={hideTitles}
+				onChange={toggleHideTitles}
+			/>
+			{translations["hide-titles"]}
+		</label>
+	);
+}

src/renderer/components/overlays/pref-overlay/entries-pref/hide-titles-pref/HideTitlesPrefContainer.tsx

@@ -0,0 +1,15 @@
+import { connect } from "react-redux";
+
+import { updateHideTitlesPref } from "../../../../../store/app/actionCreators";
+import { RootState, ThunkDispatchT } from "../../../../../store/store";
+import HideTitlesPref, { DispatchProps, StateProps } from "./HideTitlesPref";
+
+const mapStateToProps = (state: RootState): StateProps => ({
+	hideTitles: state.app.hideTitles,
+});
+
+const mapDispatchToProps = (dispatch: ThunkDispatchT): DispatchProps => ({
+	updateHideTitlesPref: (hideTitles: boolean): void => dispatch(updateHideTitlesPref(hideTitles)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(HideTitlesPref);

src/renderer/components/overlays/pref-overlay/file-dir-pref/FileDirPref.tsx

@@ -86,19 +86,21 @@ export default function FileDirPref(props: Props): ReactElement {
 		<fieldset className="fieldset-file-dir">
 			<legend>{translations["diary-file"]}</legend>
 			<div className="fieldset-content">
-				{!is.macAppStore && (
-					<>
-						<p className="file-dir">{fileDir}</p>
-						<button
-							type="button"
-							className="button button-main"
-							onClick={isLocked ? selectDir : selectMoveDir}
-						>
-							{isLocked ? translations["change-directory"] : translations["move-file"]}
-						</button>
-					</>
-				)}
-				<DiaryResetButtonContainer />
+				<div className="form-group">
+					{!is.macAppStore && (
+						<>
+							<p className="file-dir">{fileDir}</p>
+							<button
+								type="button"
+								className="button button-main"
+								onClick={isLocked ? selectDir : selectMoveDir}
+							>
+								{isLocked ? translations["change-directory"] : translations["move-file"]}
+							</button>
+						</>
+					)}
+					<DiaryResetButtonContainer />
+				</div>
 			</div>
 		</fieldset>
 	);

src/renderer/components/overlays/pref-overlay/theme-pref/ThemePref.tsx

@@ -28,39 +28,41 @@ export default function ThemePrefComponent(props: Props): ReactElement {
 		<fieldset className="fieldset-theme">
 			<legend>{translations.theme}</legend>
 			<div className="fieldset-content">
-				{/* Display "Auto" option if Electron supports theme detection for current OS */}
-				{supportsNativeTheme() && (
-					<label htmlFor="radio-theme-auto">
+				<div className="form-group">
+					{/* Display "Auto" option if Electron supports theme detection for current OS */}
+					{supportsNativeTheme() && (
+						<label htmlFor="radio-theme-auto">
+							<input
+								type="radio"
+								name="radio-theme-auto"
+								id="radio-theme-auto"
+								checked={themePref === "auto"}
+								onChange={setThemePrefAuto}
+							/>
+							{translations.auto}
+						</label>
+					)}
+					<label htmlFor="radio-theme-light">
 						<input
 							type="radio"
-							name="radio-theme-auto"
-							id="radio-theme-auto"
-							checked={themePref === "auto"}
-							onChange={setThemePrefAuto}
+							name="radio-theme-light"
+							id="radio-theme-light"
+							checked={themePref === "light"}
+							onChange={setThemePrefLight}
 						/>
-						{translations.auto}
+						{translations.light}
 					</label>
-				)}
-				<label htmlFor="radio-theme-light">
-					<input
-						type="radio"
-						name="radio-theme-light"
-						id="radio-theme-light"
-						checked={themePref === "light"}
-						onChange={setThemePrefLight}
-					/>
-					{translations.light}
-				</label>
-				<label htmlFor="radio-theme-dark">
-					<input
-						type="radio"
-						name="radio-theme-dark"
-						id="radio-theme-dark"
-						checked={themePref === "dark"}
-						onChange={setThemePrefDark}
-					/>
-					{translations.dark}
-				</label>
+					<label htmlFor="radio-theme-dark">
+						<input
+							type="radio"
+							name="radio-theme-dark"
+							id="radio-theme-dark"
+							checked={themePref === "dark"}
+							onChange={setThemePrefDark}
+						/>
+						{translations.dark}
+					</label>
+				</div>
 			</div>
 		</fieldset>
 	);

src/renderer/files/preferences/preferences.ts

@@ -8,6 +8,7 @@ import { supportsNativeTheme } from "../../utils/native-theme";
 
 const DEFAULT_ALLOW_FUTURE_ENTRIES = false;
 const DEFAULT_FIRST_DAY_OF_WEEK = null; // Let the system locale determine the first day of the week
+const DEFAULT_HIDE_TITLES = false;
 const DEFAULT_THEME_PREF: ThemePref = "light";
 const PREF_DIR = remote.app.getPath("userData");
 
@@ -80,6 +81,22 @@ export function saveFutureEntriesPref(allowFutureEntries: boolean): void {
 	setPref("allowFutureEntries", allowFutureEntries);
 }
 
+// Hide titles of diary entries
+
+/**
+ * Return the preference for whether titles are hidden for diary entries
+ */
+export function loadHideTitlesPref(): boolean {
+	return getPref("hideTitles", DEFAULT_HIDE_TITLES);
+}
+
+/**
+ * Update the preference for hiding diary entry titles
+ */
+export function saveHideTitlesPref(hideTitles: boolean): void {
+	setPref("hideTitles", hideTitles);
+}
+
 // Theme
 
 /**