feat(GUI): preset menu button with an animated notification when loca…

…l and global readerConfig mismatch (PR #2686) Co-authored-by: Arthur Le Meur <[email protected]>
edrlab · Dec 3, 2024 · 3fe80a2 · 3fe80a2
1 parent 269f884
commit 3fe80a2
Show file tree

Hide file tree

Showing 36 changed files with 107 additions and 17 deletions.
diff --git a/src/renderer/assets/styles/components/annotations.scss b/src/renderer/assets/styles/components/annotations.scss
@@ -111,7 +111,7 @@
     }
 
     .button_primary_blue:hover {
-      color: var(--color-secondary);
+      // color: var(--color-secondary);
       background-color: var(--color-blue);
     }
 

diff --git a/src/renderer/assets/styles/components/modals.scss.d.ts b/src/renderer/assets/styles/components/modals.scss.d.ts
@@ -1,4 +1,5 @@
 export declare const add_dialog: string;
+export declare const button_secondary_blue: string;
 export declare const c_dialog__box: string;
 export declare const close_button: string;
 export declare const CSS_END_components_modals: string;

diff --git a/src/renderer/assets/styles/components/settings.scss b/src/renderer/assets/styles/components/settings.scss
@@ -891,13 +891,38 @@ div[data-radix-popper-content-wrapper] {
             position: absolute;
             bottom: 0;
 
-            @media screen and (height <= 600px) {
-                position: relative;
-            }
+            // @media screen and (height <= 600px) {
+            //     position: relative;
+            // }
         }
     }
 }
 
+.notification_preset {
+    position: absolute;
+    top: 8px;
+    right: 20px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: var(--color-blue);
+    animation: blink 3s ease-in-out infinite;
+
+    @keyframes blink {
+        0% {
+          opacity: 1;
+        }
+
+        50% {
+            opacity: 0.1;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+}
+
 .CSS_END_components_settings {
     display: none;
 }
diff --git a/src/renderer/assets/styles/components/settings.scss.d.ts b/src/renderer/assets/styles/components/settings.scss.d.ts
@@ -1,5 +1,6 @@
 export declare const advanced_trigger: string;
 export declare const allowCustom: string;
+export declare const blink: string;
 export declare const btn_primary: string;
 export declare const button_transparency_icon: string;
 export declare const close_button_div: string;
@@ -16,6 +17,7 @@ export declare const label_fontFamily: string;
 export declare const label_fontSize: string;
 export declare const maths_options: string;
 export declare const modal_dialog_reader: string;
+export declare const notification_preset: string;
 export declare const off: string;
 export declare const on: string;
 export declare const popover_dialog_reader: string;

diff --git a/src/renderer/assets/styles/reader-app.scss b/src/renderer/assets/styles/reader-app.scss
@@ -259,6 +259,10 @@ button {
 }
 
 .isOnSearch {
+  top: 75px!important;
+}
+
+.isOnSearchScroll {
   top: 50px!important;
 }
 

diff --git a/src/renderer/assets/styles/reader-app.scss.d.ts b/src/renderer/assets/styles/reader-app.scss.d.ts
@@ -44,6 +44,7 @@ export declare const HIDE_CURSOR_CLASS_head: string;
 export declare const inert: string;
 export declare const isOnSearch: string;
 export declare const isOnSearchPdf: string;
+export declare const isOnSearchScroll: string;
 export declare const landmarks_tabs: string;
 export declare const landmarks_tabs_button: string;
 export declare const left_button: string;

diff --git a/src/renderer/common/hooks/useReaderConfig.ts b/src/renderer/common/hooks/useReaderConfig.ts
@@ -12,6 +12,8 @@ import { useDispatch } from "./useDispatch";
 import * as React from "react";
 import { readerLocalActionSetConfig, readerLocalActionSetTransientConfig } from "readium-desktop/renderer/reader/redux/actions";
 import debounce from "debounce";
+import { equals } from "ramda";
+import { ObjectKeys } from "readium-desktop/utils/object-keys-values";
 
 export const useReaderConfigAll = () => {
     const config = useSelector((state: IReaderRootState) => state.reader.config);
@@ -74,3 +76,20 @@ export const useSavePublisherReaderConfigDebounced = () => {
     const debounceCB = React.useMemo(() => debounce(cb, 400), [cb]);
     return debounceCB;
 };
+
+export const useDiffBoolBetweenReaderConfigAndDefaultConfig = () => {
+    const config = useSelector((state: IReaderRootState) => state.reader.config);
+    const defaultConfig = useSelector((state: IReaderRootState) => state.reader.defaultConfig);
+
+    const diff = React.useMemo(() => {
+
+        for (const v of ObjectKeys(config)) {
+            if (!equals(config[v], defaultConfig[v])) {
+                return true;
+            }
+        }
+        return false;
+    }, [config, defaultConfig]);
+
+    return diff;
+};
diff --git a/src/renderer/reader/components/ReaderSettings.tsx b/src/renderer/reader/components/ReaderSettings.tsx
@@ -54,7 +54,7 @@ import { readerLocalActionReader } from "../redux/actions";
 import { useSelector } from "readium-desktop/renderer/common/hooks/useSelector";
 import { IReaderRootState } from "readium-desktop/common/redux/states/renderer/readerRootState";
 import { readerConfigInitialState } from "readium-desktop/common/redux/states/reader";
-import { usePublisherReaderConfig, useReaderConfig, useReaderConfigAll, useSavePublisherReaderConfig, useSavePublisherReaderConfigDebounced, useSaveReaderConfig, useSaveReaderConfigDebounced } from "readium-desktop/renderer/common/hooks/useReaderConfig";
+import { useDiffBoolBetweenReaderConfigAndDefaultConfig, usePublisherReaderConfig, useReaderConfig, useReaderConfigAll, useSavePublisherReaderConfig, useSavePublisherReaderConfigDebounced, useSaveReaderConfig, useSaveReaderConfigDebounced } from "readium-desktop/renderer/common/hooks/useReaderConfig";
 import { readerActions } from "readium-desktop/common/redux/actions";
 import { comparePublisherReaderConfig } from "../../../common/publisherConfig";
 import debounce from "debounce";
@@ -1044,6 +1044,7 @@ const SaveResetApplyPreset = () => {
     const readerDefaultConfig = useSelector((state: IReaderRootState) => state.reader.defaultConfig);
     const allowCustomCheckboxChecked = useSelector((state: IReaderRootState) => state.reader.allowCustomConfig.state);
     const publisherConfigOverrided = !comparePublisherReaderConfig(readerDefaultConfig, readerConfigInitialState);
+    const diffBetweenDefaultConfigAndConfig = useDiffBoolBetweenReaderConfigAndDefaultConfig();
 
     const dockingMode = useReaderConfig("readerDockingMode");
     const dockedMode = dockingMode !== "full";
@@ -1074,24 +1075,24 @@ const SaveResetApplyPreset = () => {
 
         <div className={stylesSettings.preset_settings_container}>
             <div>
-                <button className={stylesButtons.button_secondary_blue} style={{maxWidth: dockedMode ? "284px" : ""}} onClick={() => {
+                <button className={stylesButtons.button_secondary_blue} style={{maxWidth: dockedMode ? "284px" : "", height: dockedMode ? "fit-content" : "30px"}} onClick={() => {
                     dispatch(readerActions.configSetDefault.build(readerConfig));
-                }}>
+                }} disabled={!diffBetweenDefaultConfigAndConfig}>
                     <SVG ariaHidden={true} svg={SaveIcon} />
                     {__("reader.settings.preset.save")}</button>
                 <p>{__("reader.settings.preset.saveDetails")}</p>
             </div>
 
             <div>
-                <button className={stylesButtons.button_secondary_blue} style={{maxWidth: dockedMode ? "284px" : ""}} onClick={applyPreferredConfig}>
+                <button className={stylesButtons.button_secondary_blue} style={{maxWidth: dockedMode ? "284px" : "", height: dockedMode ? "fit-content" : "30px"}} onClick={applyPreferredConfig}>
                     <SVG ariaHidden={true} svg={DoubleCheckIcon} />
                     {__("reader.settings.preset.apply")}
                 </button>
                 <p>{__("reader.settings.preset.applyDetails")}</p>
             </div>
 
             <div>
-                <button className={stylesButtons.button_secondary_blue} style={{maxWidth: dockedMode ? "284px" : ""}} onClick={() => {
+                <button className={stylesButtons.button_secondary_blue} style={{maxWidth: dockedMode ? "284px" : "", height: dockedMode ? "fit-content" : "30px"}} onClick={() => {
                     dispatch(readerActions.configSetDefault.build(readerConfigInitialState));
                     applyPreferredConfig();
                 }}>
@@ -1120,6 +1121,8 @@ export const ReaderSettings: React.FC<IBaseProps> = (props) => {
         setReaderConfig({ readerDockingMode: value });
     }, [setReaderConfig]);
 
+    const diffBetweenDefaultConfigAndConfig = useDiffBoolBetweenReaderConfigAndDefaultConfig();
+
     const [__] = useTranslator();
 
     // const [
@@ -1297,10 +1300,15 @@ export const ReaderSettings: React.FC<IBaseProps> = (props) => {
     const optionPdfZoomItem = { id: 5, value: "tab-pdfzoom", name: __("reader.settings.pdfZoom.title"), disabled: false, svg: VolumeUpIcon };
 
     const PresetTrigger =
-        <Tabs.Trigger value="tab-preset" disabled={false} title={__("reader.settings.preset.title")} key="tab-preset" data-value="tab-preset">
-            <SVG ariaHidden svg={GuearIcon} />
-            <h3>{__("reader.settings.preset.title")}</h3>
-        </Tabs.Trigger>;
+        <React.Fragment key="tab-preset">
+            <span style={{ width: "80%", height: "2px", backgroundColor: "var(--color-extralight-grey-alt)", margin: "10px auto" }}></span>
+            <Tabs.Trigger value="tab-preset" disabled={false} title={__("reader.settings.preset.title")} data-value="tab-preset" style={{position: "relative"}}>
+                <SVG ariaHidden svg={GuearIcon} />
+                <h3>{__("reader.settings.preset.title")}</h3>
+                {diffBetweenDefaultConfigAndConfig ? <span className={stylesSettings.notification_preset}></span> : <></>}
+            </Tabs.Trigger>
+            <p style={{margin: "-5px 20px 0 60px"}}>{__("reader.settings.preset.detail")}</p>
+        </ React.Fragment>;
     const optionPresetItem = { id: 6, value: "tab-preset", name: __("reader.settings.preset.title"), disabled: false, svg: GuearIcon };
 
     const AllowCustomContainer = () =>

diff --git a/src/resources/locales/ar.json b/src/resources/locales/ar.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

diff --git a/src/resources/locales/bg.json b/src/resources/locales/bg.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

diff --git a/src/resources/locales/ca.json b/src/resources/locales/ca.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

diff --git a/src/resources/locales/da.json b/src/resources/locales/da.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "Anvend mit foretrukne læsetema som nuværende læse-indstillinger",
         "applyDetails": "",
+        "detail": "",
         "reset": "Nulstil mit foretrukne læsetema til standard indstillingerne",
         "resetDetails": "",
         "save": "Gem de nuværende læse-indstillinger som mit foretrukne læsetema",

diff --git a/src/resources/locales/de.json b/src/resources/locales/de.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

diff --git a/src/resources/locales/el.json b/src/resources/locales/el.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

diff --git a/src/resources/locales/en.json b/src/resources/locales/en.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "Apply the preferred reading parameters",
         "applyDetails": "Apply the preferred reading settings preset to the current book.",
+        "detail": "Save/Apply your reading presets",
         "reset": "Reset preferred reading settings",
         "resetDetails": "Reset the preferred reading parameters and apply these default paremeters to the current book.",
         "save": "Save the preferred reading parameters",

diff --git a/src/resources/locales/es.json b/src/resources/locales/es.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

diff --git a/src/resources/locales/eu.json b/src/resources/locales/eu.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

diff --git a/src/resources/locales/fi.json b/src/resources/locales/fi.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

diff --git a/src/resources/locales/fr.json b/src/resources/locales/fr.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "Appliquer les paramètres de lecture préférés",
         "applyDetails": "Appliquer au livre courant les paramètres de lecture précédemment enregistrés.",
+        "detail": "Sauvegarder/Appliquer vos paramètres de lecture",
         "reset": "Réinitialiser les paramètres de lecture préférés",
         "resetDetails": "Effacer les paramètres de lecture précédemment appliqués, et revenir à la mise en forme et aux choix d'affichage par défaut",
         "save": "Enregistrer les paramètres de lecture préférés",

diff --git a/src/resources/locales/gl.json b/src/resources/locales/gl.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

diff --git a/src/resources/locales/hr.json b/src/resources/locales/hr.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

diff --git a/src/resources/locales/it.json b/src/resources/locales/it.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

diff --git a/src/resources/locales/ja.json b/src/resources/locales/ja.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

diff --git a/src/resources/locales/ka.json b/src/resources/locales/ka.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

diff --git a/src/resources/locales/ko.json b/src/resources/locales/ko.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

diff --git a/src/resources/locales/lt.json b/src/resources/locales/lt.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

diff --git a/src/resources/locales/nl.json b/src/resources/locales/nl.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

diff --git a/src/resources/locales/pt-br.json b/src/resources/locales/pt-br.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

diff --git a/src/resources/locales/pt-pt.json b/src/resources/locales/pt-pt.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "Aplicar a predefinição preferida de configurações de leitura às configurações de leitura atuais",
         "applyDetails": "Aplicar as predefinições favoritas de definições de leitura ao livro atual.",
+        "detail": "",
         "reset": "Redefinir a predefinição das configurações preferidas de leitura para o estado inicial",
         "resetDetails": "Repor os parâmetros preferenciais de leitura e aplicar os parâmetros padrão ao livro atual.",
         "save": "Guardar as configurações de leitura atuais na predefinição preferida de configurações de leitura",

diff --git a/src/resources/locales/ru.json b/src/resources/locales/ru.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

diff --git a/src/resources/locales/sl.json b/src/resources/locales/sl.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

diff --git a/src/resources/locales/sv.json b/src/resources/locales/sv.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "Tillämpa egna läsinställningar",
         "applyDetails": "Tillämpa dina sparade läsinställningar på den aktuella boken.",
+        "detail": "",
         "reset": "Återställ läsinställningar",
         "resetDetails": "Återställ dina läsinställningar till standard och tillämpa inställningarna på den aktuella boken.",
         "save": "Spara egna läsinställningar",

diff --git a/src/resources/locales/zh-cn.json b/src/resources/locales/zh-cn.json
@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",