feat: add option to apply page margins in scrolled mode, closes #2014 (#2540)

apps/readest-app/src/app/reader/components/FoliateViewer.tsx

@@ -400,10 +400,11 @@ const FoliateViewer: React.FC<{
     const rightMargin = insets.right + moreRightInset;
     const bottomMargin = (showBottomFooter ? insets.bottom : viewInsets.bottom) + moreBottomInset;
     const leftMargin = insets.left + moreLeftInset;
+    const viewMargins = viewSettings.showMarginsOnScroll && viewSettings.scrolled;
 
-    viewRef.current?.renderer.setAttribute('margin-top', `${topMargin}px`);
+    viewRef.current?.renderer.setAttribute('margin-top', `${viewMargins ? 0 : topMargin}px`);
     viewRef.current?.renderer.setAttribute('margin-right', `${rightMargin}px`);
-    viewRef.current?.renderer.setAttribute('margin-bottom', `${bottomMargin}px`);
+    viewRef.current?.renderer.setAttribute('margin-bottom', `${viewMargins ? 0 : bottomMargin}px`);
     viewRef.current?.renderer.setAttribute('margin-left', `${leftMargin}px`);
     viewRef.current?.renderer.setAttribute('gap', `${viewSettings.gapPercent}%`);
     if (viewSettings.scrolled) {
@@ -482,6 +483,8 @@ const FoliateViewer: React.FC<{
     viewState?.ttsEnabled,
   ]);
 
+  const showViewMargins = viewSettings?.showMarginsOnScroll && viewSettings?.scrolled;
+
   return (
     <>
       <div
@@ -490,6 +493,10 @@ const FoliateViewer: React.FC<{
         role='document'
         aria-label={_('Book Content')}
         className='foliate-viewer h-[100%] w-[100%] focus:outline-none'
+        style={{
+          paddingTop: showViewMargins ? insets.top : 0,
+          paddingBottom: showViewMargins ? insets.bottom : 0,
+        }}
         {...mouseHandlers}
         {...touchHandlers}
       />

apps/readest-app/src/components/settings/LayoutPanel.tsx

@@ -66,6 +66,7 @@ const LayoutPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRese
   const [showHeader, setShowHeader] = useState(viewSettings.showHeader);
   const [showFooter, setShowFooter] = useState(viewSettings.showFooter);
   const [showBarsOnScroll, setShowBarsOnScroll] = useState(viewSettings.showBarsOnScroll);
+  const [showMarginsOnScroll, setShowMarginsOnScroll] = useState(viewSettings.showMarginsOnScroll);
   const [showRemainingTime, setShowRemainingTime] = useState(viewSettings.showRemainingTime);
   const [showRemainingPages, setShowRemainingPages] = useState(viewSettings.showRemainingPages);
   const [showProgressInfo, setShowProgressInfo] = useState(viewSettings.showProgressInfo);
@@ -103,6 +104,7 @@ const LayoutPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRese
       showRemainingTime: setShowRemainingTime,
       showRemainingPages: setShowRemainingPages,
       showProgressInfo: setShowProgressInfo,
+      showMarginsOnScroll: setShowMarginsOnScroll,
     });
   };
 
@@ -311,6 +313,11 @@ const LayoutPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRese
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showBarsOnScroll]);
 
+  useEffect(() => {
+    saveViewSettings(envConfig, bookKey, 'showMarginsOnScroll', showMarginsOnScroll, false, false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showMarginsOnScroll]);
+
   useEffect(() => {
     saveViewSettings(envConfig, bookKey, 'showRemainingTime', showRemainingTime, false, false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -597,6 +604,15 @@ const LayoutPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRese
               max={9999}
               step={50}
             />
+            <div className='config-item'>
+              <span className=''>{_('Apply also in Scrolled Mode')}</span>
+              <input
+                type='checkbox'
+                className='toggle'
+                checked={showMarginsOnScroll}
+                onChange={() => setShowMarginsOnScroll(!showMarginsOnScroll)}
+              />
+            </div>
           </div>
         </div>
       </div>

apps/readest-app/src/services/constants.ts

@@ -218,6 +218,7 @@ export const DEFAULT_VIEW_CONFIG: ViewConfig = {
   showRemainingTime: false,
   showRemainingPages: false,
   showProgressInfo: true,
+  showMarginsOnScroll: false,
   progressStyle: 'fraction',
 };
 

apps/readest-app/src/types/book.ts

@@ -185,6 +185,7 @@ export interface ViewConfig {
   showRemainingPages: boolean;
   showProgressInfo: boolean;
   showBarsOnScroll: boolean;
+  showMarginsOnScroll: boolean;
   progressStyle: 'percentage' | 'fraction';
 }