From 6a021bb0cca79b4594c565da7a94e6e914da0eea Mon Sep 17 00:00:00 2001 From: Owen Krueger <37021716+Owen-Krueger@users.noreply.github.com> Date: Wed, 13 May 2020 12:02:53 -0500 Subject: [PATCH] Add option to hide titles (#86) --- src/main/i18n/translations/de.ts | 1 + src/main/i18n/translations/en.ts | 1 + .../assets/styles/components/_editor.scss | 9 ++- .../assets/styles/elements/_form.scss | 4 +- .../elements/editor/editor/Editor.tsx | 26 ++++---- .../editor/editor/EditorContainer.tsx | 1 + .../overlays/pref-overlay/PrefOverlay.tsx | 4 +- .../pref-overlay/entries-pref/EntriesPref.tsx | 21 +++++++ .../future-entries-pref/FutureEntriesPref.tsx | 27 ++++----- .../FutureEntriesPrefContainer.tsx | 4 +- .../hide-titles-pref/HideTitlesPref.tsx | 35 +++++++++++ .../HideTitlesPrefContainer.tsx | 15 +++++ .../file-dir-pref/FileDirPref.tsx | 28 +++++---- .../pref-overlay/theme-pref/ThemePref.tsx | 60 ++++++++++--------- src/renderer/files/preferences/preferences.ts | 17 ++++++ src/renderer/store/app/actionCreators.ts | 17 ++++++ src/renderer/store/app/reducer.ts | 9 +++ src/renderer/store/app/types.ts | 10 ++++ src/shared/types.ts | 1 + 19 files changed, 213 insertions(+), 77 deletions(-) create mode 100644 src/renderer/components/overlays/pref-overlay/entries-pref/EntriesPref.tsx rename src/renderer/components/overlays/pref-overlay/{ => entries-pref}/future-entries-pref/FutureEntriesPref.tsx (53%) rename src/renderer/components/overlays/pref-overlay/{ => entries-pref}/future-entries-pref/FutureEntriesPrefContainer.tsx (77%) create mode 100644 src/renderer/components/overlays/pref-overlay/entries-pref/hide-titles-pref/HideTitlesPref.tsx create mode 100644 src/renderer/components/overlays/pref-overlay/entries-pref/hide-titles-pref/HideTitlesPrefContainer.tsx diff --git a/src/main/i18n/translations/de.ts b/src/main/i18n/translations/de.ts index de908a70..40afef60 100644 --- a/src/main/i18n/translations/de.ts +++ b/src/main/i18n/translations/de.ts @@ -80,6 +80,7 @@ const translationsDe: Partial = { 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", diff --git a/src/main/i18n/translations/en.ts b/src/main/i18n/translations/en.ts index 81a525f7..66e4402c 100644 --- a/src/main/i18n/translations/en.ts +++ b/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", diff --git a/src/renderer/assets/styles/components/_editor.scss b/src/renderer/assets/styles/components/_editor.scss index d6091ae3..59ee71f6 100644 --- a/src/renderer/assets/styles/components/_editor.scss +++ b/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"); diff --git a/src/renderer/assets/styles/elements/_form.scss b/src/renderer/assets/styles/elements/_form.scss index 004d1a51..c3eb36f0 100644 --- a/src/renderer/assets/styles/elements/_form.scss +++ b/src/renderer/assets/styles/elements/_form.scss @@ -7,7 +7,7 @@ legend { font-weight: $font-weight-bold; } -.fieldset-content { +.form-group { display: flex; flex-wrap: wrap; align-items: center; @@ -15,7 +15,7 @@ legend { margin-bottom: -$spacing-abs-small; } -.fieldset-content > * { +.form-group > * { margin-right: $spacing-abs-small; margin-bottom: $spacing-abs-small; } diff --git a/src/renderer/components/elements/editor/editor/Editor.tsx b/src/renderer/components/elements/editor/editor/Editor.tsx index ba86bd58..36deee92 100644 --- a/src/renderer/components/elements/editor/editor/Editor.tsx +++ b/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 { 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 {

{weekdayDate}

-
- -
+ {!hideTitles && ( +
+ +
+ )}
({ + hideTitles: state.app.hideTitles, dateSelected: state.diary.dateSelected, entries: state.file.entries, }); diff --git a/src/renderer/components/overlays/pref-overlay/PrefOverlay.tsx b/src/renderer/components/overlays/pref-overlay/PrefOverlay.tsx index 5eaa4788..719ddb89 100644 --- a/src/renderer/components/overlays/pref-overlay/PrefOverlay.tsx +++ b/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 { {!isLocked && } - {!isLocked && } + {!isLocked && } {!isLocked && } diff --git a/src/renderer/components/overlays/pref-overlay/entries-pref/EntriesPref.tsx b/src/renderer/components/overlays/pref-overlay/entries-pref/EntriesPref.tsx new file mode 100644 index 00000000..922d7153 --- /dev/null +++ b/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 ( +
+ {translations["diary-entries"]} +
+ +
+ +
+
+ ); +} diff --git a/src/renderer/components/overlays/pref-overlay/future-entries-pref/FutureEntriesPref.tsx b/src/renderer/components/overlays/pref-overlay/entries-pref/future-entries-pref/FutureEntriesPref.tsx similarity index 53% rename from src/renderer/components/overlays/pref-overlay/future-entries-pref/FutureEntriesPref.tsx rename to src/renderer/components/overlays/pref-overlay/entries-pref/future-entries-pref/FutureEntriesPref.tsx index 2ff2c2a0..ee1acf3f 100644 --- a/src/renderer/components/overlays/pref-overlay/future-entries-pref/FutureEntriesPref.tsx +++ b/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 ( -
- {translations["diary-entries"]} -
- -
-
+ ); } diff --git a/src/renderer/components/overlays/pref-overlay/future-entries-pref/FutureEntriesPrefContainer.tsx b/src/renderer/components/overlays/pref-overlay/entries-pref/future-entries-pref/FutureEntriesPrefContainer.tsx similarity index 77% rename from src/renderer/components/overlays/pref-overlay/future-entries-pref/FutureEntriesPrefContainer.tsx rename to src/renderer/components/overlays/pref-overlay/entries-pref/future-entries-pref/FutureEntriesPrefContainer.tsx index 2829d5f6..d5183b2f 100644 --- a/src/renderer/components/overlays/pref-overlay/future-entries-pref/FutureEntriesPrefContainer.tsx +++ b/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 => ({ diff --git a/src/renderer/components/overlays/pref-overlay/entries-pref/hide-titles-pref/HideTitlesPref.tsx b/src/renderer/components/overlays/pref-overlay/entries-pref/hide-titles-pref/HideTitlesPref.tsx new file mode 100644 index 00000000..ecef68e5 --- /dev/null +++ b/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 ( + + ); +} diff --git a/src/renderer/components/overlays/pref-overlay/entries-pref/hide-titles-pref/HideTitlesPrefContainer.tsx b/src/renderer/components/overlays/pref-overlay/entries-pref/hide-titles-pref/HideTitlesPrefContainer.tsx new file mode 100644 index 00000000..9d66a204 --- /dev/null +++ b/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); diff --git a/src/renderer/components/overlays/pref-overlay/file-dir-pref/FileDirPref.tsx b/src/renderer/components/overlays/pref-overlay/file-dir-pref/FileDirPref.tsx index f9c4d017..6e05ce28 100644 --- a/src/renderer/components/overlays/pref-overlay/file-dir-pref/FileDirPref.tsx +++ b/src/renderer/components/overlays/pref-overlay/file-dir-pref/FileDirPref.tsx @@ -86,19 +86,21 @@ export default function FileDirPref(props: Props): ReactElement {
{translations["diary-file"]}
- {!is.macAppStore && ( - <> -

{fileDir}

- - - )} - +
+ {!is.macAppStore && ( + <> +

{fileDir}

+ + + )} + +
); diff --git a/src/renderer/components/overlays/pref-overlay/theme-pref/ThemePref.tsx b/src/renderer/components/overlays/pref-overlay/theme-pref/ThemePref.tsx index 6d57b305..54f48bd7 100644 --- a/src/renderer/components/overlays/pref-overlay/theme-pref/ThemePref.tsx +++ b/src/renderer/components/overlays/pref-overlay/theme-pref/ThemePref.tsx @@ -28,39 +28,41 @@ export default function ThemePrefComponent(props: Props): ReactElement {
{translations.theme}
- {/* Display "Auto" option if Electron supports theme detection for current OS */} - {supportsNativeTheme() && ( -
); diff --git a/src/renderer/files/preferences/preferences.ts b/src/renderer/files/preferences/preferences.ts index 5c5ec88e..8b6fa67d 100644 --- a/src/renderer/files/preferences/preferences.ts +++ b/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 /** diff --git a/src/renderer/store/app/actionCreators.ts b/src/renderer/store/app/actionCreators.ts index fcc38bd1..d23fc948 100644 --- a/src/renderer/store/app/actionCreators.ts +++ b/src/renderer/store/app/actionCreators.ts @@ -2,6 +2,7 @@ import { OverlayType } from "../../../shared/types"; import { saveFirstDayOfWeekPref, saveFutureEntriesPref, + saveHideTitlesPref, saveThemePref, } from "../../files/preferences/preferences"; import { Weekday, Theme, ThemePref } from "../../types"; @@ -9,6 +10,7 @@ import { getThemeFromPref } from "../../utils/native-theme"; import { ThunkActionT } from "../store"; import { SET_ALLOW_FUTURE_ENTRIES, + SET_HIDE_TITLES, SET_FIRST_DAY_OF_WEEK, SET_OVERLAY, SET_THEME, @@ -18,6 +20,7 @@ import { SetOverlayAction, SetThemeAction, SetThemePrefAction, + SetHideTitlesAction, } from "./types"; // Action creators @@ -31,6 +34,15 @@ function setAllowFutureEntries(allowFutureEntries: boolean): SetAllowFutureEntri }; } +function setHideTitles(hideTitles: boolean): SetHideTitlesAction { + return { + type: SET_HIDE_TITLES, + payload: { + hideTitles, + }, + }; +} + function setFirstDayOfWeek(firstDayOfWeek: Weekday | null): SetFirstDayOfWeekAction { return { type: SET_FIRST_DAY_OF_WEEK, @@ -85,6 +97,11 @@ export const updateFutureEntriesPref = (allowFutureEntries: boolean): ThunkActio saveFutureEntriesPref(allowFutureEntries); }; +export const updateHideTitlesPref = (hideTitles: boolean): ThunkActionT => (dispatch): void => { + dispatch(setHideTitles(hideTitles)); + saveHideTitlesPref(hideTitles); +}; + export const updateFirstDayOfWeekPref = (firstDayOfWeek: Weekday | null): ThunkActionT => ( dispatch, ): void => { diff --git a/src/renderer/store/app/reducer.ts b/src/renderer/store/app/reducer.ts index 0065c58e..e72f2325 100644 --- a/src/renderer/store/app/reducer.ts +++ b/src/renderer/store/app/reducer.ts @@ -2,6 +2,7 @@ import { loadFirstDayOfWeekPref, loadFutureEntriesPref, loadThemePref, + loadHideTitlesPref, } from "../../files/preferences/preferences"; import { getThemeFromPref } from "../../utils/native-theme"; import { @@ -12,6 +13,7 @@ import { SET_OVERLAY, SET_THEME, SET_THEME_PREF, + SET_HIDE_TITLES, } from "./types"; const themePref = loadThemePref(); @@ -20,6 +22,7 @@ const theme = getThemeFromPref(themePref); const initialState: AppState = { allowFutureEntries: loadFutureEntriesPref(), firstDayOfWeek: loadFirstDayOfWeekPref(), + hideTitles: loadHideTitlesPref(), overlay: "none", theme, themePref, @@ -33,6 +36,12 @@ function appReducer(state = initialState, action: AppAction): AppState { allowFutureEntries: action.payload.allowFutureEntries, }; } + case SET_HIDE_TITLES: { + return { + ...state, + hideTitles: action.payload.hideTitles, + }; + } case SET_FIRST_DAY_OF_WEEK: { return { ...state, diff --git a/src/renderer/store/app/types.ts b/src/renderer/store/app/types.ts index 28cf81a4..314da8e4 100644 --- a/src/renderer/store/app/types.ts +++ b/src/renderer/store/app/types.ts @@ -8,6 +8,7 @@ import { Weekday, Theme, ThemePref } from "../../types"; export interface AppState { allowFutureEntries: boolean; firstDayOfWeek: Weekday | null; + hideTitles: boolean; overlay: OverlayType; theme: Theme; themePref: ThemePref; @@ -17,6 +18,7 @@ export interface AppState { export const SET_ALLOW_FUTURE_ENTRIES = "SET_ALLOW_FUTURE_ENTRIES"; export const SET_FIRST_DAY_OF_WEEK = "SET_FIRST_DAY_OF_WEEK"; +export const SET_HIDE_TITLES = "SET_HIDE_TITLES"; export const SET_OVERLAY = "SET_OVERLAY"; export const SET_THEME = "SET_THEME"; export const SET_THEME_PREF = "SET_THEME_PREF"; @@ -37,6 +39,13 @@ export interface SetFirstDayOfWeekAction extends Action { }; } +export interface SetHideTitlesAction extends Action { + type: typeof SET_HIDE_TITLES; + payload: { + hideTitles: boolean; + }; +} + export interface SetOverlayAction extends Action { type: typeof SET_OVERLAY; payload: { @@ -61,6 +70,7 @@ export interface SetThemePrefAction extends Action { export type AppAction = | SetAllowFutureEntriesAction | SetFirstDayOfWeekAction + | SetHideTitlesAction | SetOverlayAction | SetThemeAction | SetThemePrefAction; diff --git a/src/shared/types.ts b/src/shared/types.ts index 3cd865ed..f65f4839 100644 --- a/src/shared/types.ts +++ b/src/shared/types.ts @@ -92,6 +92,7 @@ export interface Translations { auto: string; "diary-entries": string; "first-day-of-week": string; + "hide-titles": string; no: string; ok: string; "reset-diary": string;