Merge branch 'develop' into dev/fix-css

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;
 }

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;

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;
+};

src/renderer/reader/components/ReaderHeader.tsx

@@ -16,6 +16,7 @@ import * as debug_ from "debug";
 import * as React from "react";
 import * as Popover from "@radix-ui/react-popover";
 import * as Dialog from "@radix-ui/react-dialog";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 
 // import * as ReactDOM from "react-dom";
 import { ReaderMode } from "readium-desktop/common/models/reader";
@@ -1075,7 +1076,11 @@ export class ReaderHeader extends React.Component<IProps, IState> {
                                                     height: /*(isDockedMode && isOnSearch) ? "calc(100dvh - 159px)" :*/ "",
                                                     marginTop: /*(isDockedMode && !isOnSearch) ? "70px" :*/ "20px",
                                                 }}
+                                                aria-describedby={undefined}
                                             >
+                                                <VisuallyHidden.Root>
+                                                    <Dialog.Title>{__("reader.navigation.openTableOfContentsTitle")}</Dialog.Title>
+                                                </VisuallyHidden.Root>
                                                 <ReaderMenu
                                                     {...this.props.readerMenuProps}
                                                     handleLinkClick={(event, url, closeNavPanel) => {
@@ -1161,7 +1166,11 @@ export class ReaderHeader extends React.Component<IProps, IState> {
                                                 height: /*isDockedMode && isOnSearch ? "calc(100dvh - 159px)" :*/ "",
                                                 marginTop: /*isDockedMode && !isOnSearch ? "70px" :*/ "20px",
                                             }}
+                                            aria-describedby={undefined}
                                         >
+                                            <VisuallyHidden.Root>
+                                                <Dialog.Title>{__("reader.navigation.settingsTitle")}</Dialog.Title>
+                                            </VisuallyHidden.Root>
                                             {/* TODO remove readerSettingsHeaderProps */}
                                             <ReaderSettings
                                                 {...readerSettingsHeaderProps}

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";
@@ -1076,7 +1077,7 @@ const SaveResetApplyPreset = () => {
             <div>
                 <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>
@@ -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 = () =>

src/resources/locales/ar.json

@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

src/resources/locales/bg.json

@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

src/resources/locales/ca.json

@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

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",

src/resources/locales/de.json

@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

src/resources/locales/el.json

@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

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",

src/resources/locales/es.json

@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

src/resources/locales/eu.json

@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

src/resources/locales/fi.json

@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

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",

src/resources/locales/gl.json

@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

src/resources/locales/hr.json

@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

src/resources/locales/it.json

@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

src/resources/locales/ja.json

@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

src/resources/locales/ka.json

@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

src/resources/locales/ko.json

@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

src/resources/locales/lt.json

@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

src/resources/locales/nl.json

@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

src/resources/locales/pt-br.json

@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

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",

src/resources/locales/ru.json

@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

src/resources/locales/sl.json

@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

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",

src/resources/locales/zh-cn.json

@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",

src/resources/locales/zh-tw.json

@@ -479,6 +479,7 @@
       "preset": {
         "apply": "",
         "applyDetails": "",
+        "detail": "",
         "reset": "",
         "resetDetails": "",
         "save": "",