feat(pdf): add support for hand tool panning for PDFs, closes #2518 (#2532)

apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx

@@ -195,6 +195,10 @@ const FooterBar: React.FC<FooterBarProps> = ({
     onSpeakText: handleSpeakText,
   };
 
+  const needHorizontalScroll =
+    (viewSettings?.vertical && viewSettings?.scrolled) ||
+    (bookData?.isFixedLayout && viewSettings?.zoomLevel && viewSettings.zoomLevel > 100);
+
   const containerClasses = clsx(
     'footer-bar shadow-xs bottom-0 z-10 flex w-full flex-col',
     'sm:h-[52px] sm:justify-center',
@@ -204,16 +208,12 @@ const FooterBar: React.FC<FooterBarProps> = ({
     appService?.hasRoundedWindow && 'rounded-window-bottom-right',
     !isSideBarVisible && appService?.hasRoundedWindow && 'rounded-window-bottom-left',
     isHoveredAnim && 'hover-bar-anim',
-    viewSettings?.vertical && viewSettings?.scrolled && 'sm:!bottom-3 sm:!h-7',
+    needHorizontalScroll && 'sm:!bottom-3 sm:!h-7',
     isVisible
       ? 'pointer-events-auto translate-y-0 opacity-100'
       : 'pointer-events-none translate-y-full opacity-0 sm:translate-y-0',
   );
 
-  const needHorizontalScroll =
-    (viewSettings?.vertical && viewSettings?.scrolled) ||
-    (bookData?.isFixedLayout && viewSettings?.zoomLevel && viewSettings.zoomLevel > 100);
-
   return (
     <>
       {/* Hover trigger area */}

apps/readest-app/src/components/metadata/BookDetailView.tsx

@@ -105,12 +105,12 @@ const BookDetailView: React.FC<BookDetailViewProps> = ({
               </Dropdown>
             )}
             {book.uploadedAt && onDownload && (
-              <button onClick={onDownload}>
+              <button onClick={onDownload} title={_('Download from Cloud')}>
                 <MdOutlineCloudDownload className='fill-base-content' />
               </button>
             )}
             {book.downloadedAt && onUpload && (
-              <button onClick={onUpload}>
+              <button onClick={onUpload} title={_('Upload to Cloud')}>
                 <MdOutlineCloudUpload className='fill-base-content' />
               </button>
             )}

apps/readest-app/src/styles/globals.css

@@ -60,6 +60,10 @@ foliate-view {
   border: none;
 }
 
+foliate-fxl {
+  overflow: scroll;
+}
+
 @keyframes scaleUpAndDown {
   0% {
     transform: scale(1);