add boolean diff between defaultConfig and config to enable save

preset button and preset trigger notification
edrlab · Dec 2, 2024 · 77ca096 · 77ca096
1 parent 979f693
commit 77ca096
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 8 deletions.
diff --git a/src/renderer/assets/styles/components/settings.scss b/src/renderer/assets/styles/components/settings.scss
@@ -891,9 +891,9 @@ div[data-radix-popper-content-wrapper] {
             position: absolute;
             bottom: 0;
 
-            @media screen and (height <= 600px) {
-                position: relative;
-            }
+            // @media screen and (height <= 600px) {
+            //     position: relative;
+            // }
         }
     }
 }

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/ReaderHeader.tsx b/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";
@@ -1161,7 +1162,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}

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";
@@ -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,12 +1300,12 @@ 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 =
-        <>
+        <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")} key="tab-preset" data-value="tab-preset" style={{position: "relative"}}>
+            <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>
-                <span className={stylesSettings.notification_preset}></span>
+                {diffBetweenDefaultConfigAndConfig ? <span className={stylesSettings.notification_preset}></span> : <></>}
             </Tabs.Trigger>
             <p style={{margin: "-5px 20px 0 60px"}}>{__("reader.settings.preset.detail")}</p>
         </>;