fix(reader): arrows always displayed in paginated and hidden in scrol…

…l mode, arrows and zenMode displayed on hover (Fixes #2497 PR #2505)
edrlab · Sep 19, 2024 · 232ee27 · 232ee27
1 parent 0471c9b
commit 232ee27
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 5 deletions.
diff --git a/src/renderer/assets/styles/components/readerFooter.scss b/src/renderer/assets/styles/components/readerFooter.scss
@@ -24,12 +24,25 @@
  }
 }
 
+.arrows {
+ height: 300px;
+ width: 50px;
+ z-index: 1;
+
+ &:hover {
+ button {
+ opacity: 1 !important;
+ }
+ }
+}
+
 .arrows button {
  width: 50px;
- height: 50px;
+ height: 300px;
  position: absolute;
- top: calc(50dvh - 100px);
+ top: calc(50dvh - 220px);
  z-index: 10;
+ transition: 200ms;
 
  svg {
  fill: var(--color-blue);

diff --git a/src/renderer/assets/styles/reader-app.scss b/src/renderer/assets/styles/reader-app.scss
@@ -1048,13 +1048,30 @@ input[type="radio"] + label {
  display: none;
 }
 
+.exitZen_container {
+ width: 150px;
+ height: 150px;
+ z-index: 10;
+ position: absolute;
+ top: 0;
+ right: 0;
+
+ &:hover {
+ .button_exitZen {
+ opacity: 1 !important;
+ }
+ }
+}
+
 .button_exitZen {
  width: 25px;
  height: 25px;
  position: absolute;
  right: 25px;
  top: 12px;
  z-index: 10;
+ transition: 200ms;
+
 
  svg {
  color: var(--color-blue);

diff --git a/src/renderer/assets/styles/reader-app.scss.d.ts b/src/renderer/assets/styles/reader-app.scss.d.ts
@@ -37,6 +37,7 @@ export declare const docked_left_pdf: string;
 export declare const docked_right: string;
 export declare const docked_right_pdf: string;
 export declare const docked_right_scrollable: string;
+export declare const exitZen_container: string;
 export declare const focus_element: string;
 export declare const go_to_page: string;
 export declare const hasTtsAudio: string;

diff --git a/src/renderer/reader/components/Reader.tsx b/src/renderer/reader/components/Reader.tsx
@@ -702,7 +702,7 @@ class Reader extends React.Component<IProps, IState> {
  const isAudioBook = isAudiobookFn(this.props.r2Publication);
  const arrowDisabledNotEpub = isAudioBook || this.props.isPdf || this.props.isDivina;
  // const isFXL = this.isFixedLayout();
- // const isPaginated = this.props.readerConfig.paged;
+ const isPaginated = this.props.readerConfig.paged;
 
  // console.log(arrowDisabledNotEpub, isFXL, isPaginated);
  // epub non fxl (page) : false false true : true
@@ -788,10 +788,12 @@ class Reader extends React.Component<IProps, IState> {
  disableRTLFlip={this.props.disableRTLFlip}
  isRTLFlip={this.isRTLFlip}
  />
- :
- <button onClick={() => this.setState({ zenMode : false})} className={stylesReader.button_exitZen}>
+ : 
+ <div className={stylesReader.exitZen_container}>
+ <button onClick={() => this.setState({ zenMode : false})} className={stylesReader.button_exitZen} style={{ opacity: isPaginated ? "1" : "0"}}>
  <SVG ariaHidden svg={exitZenModeIcon} />
  </button>
+ </div>
  }
 
  <div
@@ -850,6 +852,7 @@ class Reader extends React.Component<IProps, IState> {
  }}
  title={this.props.__("reader.svg.left")}
  className={(this.state.settingsOpen || this.state.menuOpen) ? (this.props.readerConfig.readerDockingMode === "left" ? stylesReaderFooter.navigation_arrow_docked_left : stylesReaderFooter.navigation_arrow_left) : stylesReaderFooter.navigation_arrow_left}
+ style={{ opacity: isPaginated ? "1" : "0"}}
  >
  <SVG ariaHidden={true} svg={ArrowLeftIcon} />
  </button>
@@ -913,6 +916,7 @@ class Reader extends React.Component<IProps, IState> {
  }}
  title={this.props.__("reader.svg.right")}
  className={(this.state.settingsOpen || this.state.menuOpen) ? (this.props.readerConfig.readerDockingMode === "right" ? stylesReaderFooter.navigation_arrow_docked_right : stylesReaderFooter.navigation_arrow_right) : stylesReaderFooter.navigation_arrow_right}
+ style={{ opacity: isPaginated ? "1" : "0"}}
  >
  <SVG ariaHidden={true} svg={ArrowRightIcon} />
  </button>