Better e-ink support

app/bibleview-js/package.json

@@ -21,6 +21,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "~6.5.2",
     "@fortawesome/free-solid-svg-icons": "~6.5.2",
+    "@fortawesome/free-regular-svg-icons": "~6.5.2",
     "@fortawesome/vue-fontawesome": "~3.0.6",
     "@vue/runtime-core": "~3.4.23",
     "color": "~4.2.3",

app/bibleview-js/src/__tests__/bookmarks.spec.js

@@ -41,7 +41,7 @@ describe("verseHighlight tests", () => {
 
         const highlightColorFn = (v) => Color(v.color);
 
-        const css = verseHighlighting({highlightLabels, highlightLabelCount, underlineLabels, underlineLabelCount, highlightColorFn});
+        const css = verseHighlighting({highlightLabels, highlightLabelCount, underlineLabels, underlineLabelCount, highlightColorFn, appSettings: {nightMode: false}});
         expect(css).toBe(result);
     }
 
@@ -79,7 +79,7 @@ describe("useBookmark tests", () => {
     let gb, b;
     let startOrd, startOff, endOrd, endOff;
     beforeEach(() => {
-        const {config} = useConfig();
+        const {config, appSettings} = useConfig();
         gb = useGlobalBookmarks(config, {value: "bible"});
         const fragmentReady = ref(true);
         b = useBookmarks(
@@ -91,7 +91,8 @@ describe("useBookmark tests", () => {
             true,
             fragmentReady,
             {adjustedColor: () => null},
-            config
+            config,
+            appSettings,
         );
         gb.updateBookmarkLabels([{
             id: 1,

app/bibleview-js/src/common.scss

@@ -93,7 +93,7 @@
 
 $button-border-radius: 8px;
 $button-padding: 6px;
-$button-grey: #8e8e8e;
+$button-grey: var(--modal-grey);
 
 .button {
   font-size: 90%;
@@ -111,6 +111,9 @@ $button-grey: #8e8e8e;
       background-color: #616161;
       color: #bdbdbd;
     }
+    .night.monochrome & {
+      color: white;
+    }
   }
   &.warning {
     background: rgba(255, 0, 0, 0.5);
@@ -160,18 +163,31 @@ $button-grey: #8e8e8e;
   justify-content: flex-start;
 }
 
-$modal-header-background-color: rgba(172,172,172,1);
+:root {
+  --modal-grey:  rgb(172,172,172);
+  .monochrome {
+    --modal-grey: rgb(76, 76, 76);
+  }
+}
+
+$modal-header-background-color: var(--modal-grey);
 $night-modal-header-background-color: rgba(69,69,69,1);
 
 $modal-content-background-color: #fefefe;
 $modal-content-background-color-night: rgb(33, 33, 33);
 
 .highlight-transition {
   transition: background-color 0.5s ease;
+  .noAnimation & {
+    transition: none;
+  }
 }
 
 .isHighlighted {
   background-color: rgba(0, 0, 0, 0.1);
+  .monochrome & {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
   .night & {
     background-color: rgba(255, 255, 255, 0.3);
   }

app/bibleview-js/src/components/AmbiguousActionButtons.vue

@@ -178,6 +178,9 @@ setupKeyboardListener((e: KeyboardEvent) => {
     //    padding-inline-end: 14px;  // Causes non-alignment of the icons in the verse action dialog.
     .horizontal & {
       color: $button-grey;
+      .monochrome.night & {
+        color: white;
+      }
       margin: 0 auto 0 auto;
       padding-bottom: 5px;
       $size: 20px;
@@ -188,6 +191,9 @@ setupKeyboardListener((e: KeyboardEvent) => {
 
   .title {
     margin: 0 auto 0 auto;
+    .monochrome.night & {
+      color: white;
+    }
   }
 
   padding-bottom: 0.5em;

app/bibleview-js/src/components/BibleView.vue

@@ -16,7 +16,12 @@
   -->
 
 <template>
-  <div @click="ambiguousSelection?.handle" :class="{night: appSettings.nightMode}" :style="topStyle" :dir="direction">
+  <div
+      @click="ambiguousSelection?.handle"
+      :class="{night: appSettings.nightMode, noAnimation: appSettings.disableAnimations, monochrome: appSettings.monochromeMode}"
+      :style="topStyle"
+      :dir="direction"
+  >
     <div class="background" :style="backgroundStyle"/>
     <div :style="`height:${calculatedConfig.topOffset}px`"/>
     <div :style="modalStyle" id="modals"/>
@@ -35,13 +40,25 @@
       <div class="bottom-right-corner"/>
     </div>
     <div id="top"/>
-    <div class="loading" v-if="isLoading"><div class="lds-ring"><div></div><div></div><div></div><div></div></div></div>
-    <div id="content" ref="topElement" :style="contentStyle">
-      <div style="position: absolute; top: -5000px;" v-if="documents.length === 0">Invisible element to make fonts load
-        properly
+    <div class="loading" v-if="isLoading">
+      <div v-if="appSettings.disableAnimations" class="loading-icon">
+        <FontAwesomeIcon size="2x" icon="fa-regular fa-clock"/>
       </div>
+      <div v-else class="lds-ring"><div/><div/><div/><div/></div>
+    </div>
+    <div id="content" ref="topElement" :style="contentStyle">
+      <div style="position: absolute; top: -5000px;" v-if="documents.length === 0">Invisible element to make fonts load properly</div>
       <DocumentBroker v-for="document in documents" :key="document.id" :document="document"/>
     </div>
+    <template v-if="!modalOpen">
+      <div class="prev-page-button" @click.stop="scrollUpDown(true)" :style="{width: `${calculatedConfig.marginLeft}px`}"/>
+      <div class="next-page-button" @click.stop="scrollUpDown()" :style="{width: `${calculatedConfig.marginRight}px`}" />
+    </template>
+    <div
+        v-if="appSettings.isBottomWindow"
+        @touchmove.stop.prevent
+        class="bottom-touch-block"
+    />
     <div id="bottom"/>
   </div>
 </template>
@@ -78,14 +95,15 @@ import {useKeyboard} from "@/composables/keyboard";
 import {useVerseNotifier} from "@/composables/verse-notifier";
 import {useAddonFonts} from "@/composables/addon-fonts";
 import {useFontAwesome} from "@/composables/fontawesome";
-import {useConfig} from "@/composables/config";
+import {black, useConfig, white} from "@/composables/config";
 import {useOrdinalHighlight} from "@/composables/ordinal-highlight";
 import {useModal} from "@/composables/modal";
 import {useCustomCss} from "@/composables/custom-css";
 import {useCustomFeatures} from "@/composables/features";
 import {useSharing} from "@/composables/sharing";
 import {AnyDocument, BibleViewDocumentType} from "@/types/documents";
 import AmbiguousSelection from "@/components/modals/AmbiguousSelection.vue";
+import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
 
 console.log("BibleView setup");
 useAddonFonts();
@@ -135,7 +153,7 @@ function getFootNoteCount() {
 
 provide(footnoteCountKey, {getFootNoteCount});
 
-const {closeModals} = modal;
+const {closeModals, modalOpen} = modal;
 
 const mounted = ref(false);
 
@@ -229,7 +247,9 @@ provide(androidKey, android);
 const ambiguousSelection = ref<InstanceType<typeof AmbiguousSelection> | null>(null);
 
 const backgroundStyle = computed(() => {
-    const colorInt = appSettings.nightMode ? config.colors.nightBackground : config.colors.dayBackground;
+    const nightColor = appSettings.monochromeMode ? black : config.colors.nightBackground;
+    const dayColor = appSettings.monochromeMode? white : config.colors.dayBackground;
+    const colorInt = appSettings.nightMode ? nightColor : dayColor;
     if (colorInt === null) return "";
     const backgroundColor = Color(colorInt).hsl().string();
     return `
@@ -238,7 +258,9 @@ const backgroundStyle = computed(() => {
 });
 
 const contentStyle = computed(() => {
-    const textColor = Color(appSettings.nightMode ? config.colors.nightTextColor : config.colors.dayTextColor);
+    const nightColor = appSettings.monochromeMode? white: config.colors.nightTextColor;
+    const dayColor = appSettings.monochromeMode ? black: config.colors.dayTextColor;
+    const textColor = Color(appSettings.nightMode ? nightColor : dayColor);
 
     let style = `
           max-width: ${config.marginSize.maxWidth}mm;
@@ -250,13 +272,13 @@ const contentStyle = computed(() => {
           line-height: ${config.lineSpacing / 10}em;
           text-align: ${config.justifyText ? "justify" : "start"};
           font-family: ${config.fontFamily};
-          font-size: ${config.fontSize}px;
-          --font-size: ${config.fontSize}px;
+          font-size: ${config.fontSize*appSettings.fontSizeMultiplier}px;
+          --font-size: ${config.fontSize*appSettings.fontSizeMultiplier}px;
           `;
     if (config.marginSize.marginLeft || config.marginSize.marginRight) {
         style += `
-            margin-left: ${config.marginSize.marginLeft}mm;
-            margin-right: ${config.marginSize.marginRight}mm;
+            padding-left: ${config.marginSize.marginLeft}mm;
+            padding-right: ${config.marginSize.marginRight}mm;
           `;
     }
     return style;
@@ -266,17 +288,29 @@ const modalStyle = computed(() => {
     return `
           --bottom-offset: ${appSettings.bottomOffset}px;
           --top-offset: ${appSettings.topOffset}px;
-          --font-size:${config.fontSize}px;
+          --font-size:${config.fontSize*appSettings.fontSizeMultiplier}px;
           --font-family:${config.fontFamily};`
 });
 
 const topStyle = computed(() => {
-    const backgroundColor = Color(appSettings.nightMode ? config.colors.nightBackground : config.colors.dayBackground);
+    const nightTextColor = appSettings.monochromeMode? white: config.colors.nightTextColor;
+    const dayTextColor = appSettings.monochromeMode ? black: config.colors.dayTextColor;
+
+    const nightBackgroundColor = appSettings.monochromeMode ? black : config.colors.nightBackground;
+    const dayBackgroundColor = appSettings.monochromeMode? white : config.colors.dayBackground;
+
+    const backgroundColor = Color(appSettings.nightMode ? nightBackgroundColor : dayBackgroundColor);
     const noiseOpacity = appSettings.nightMode ? config.colors.nightNoise : config.colors.dayNoise;
-    const textColor = Color(appSettings.nightMode ? config.colors.nightTextColor : config.colors.dayTextColor);
-    const verseNumberColor = appSettings.nightMode ?
-        textColor.fade(0.2).hsl().string() :
-        textColor.fade(0.5).hsl().string();
+    const textColor = Color(appSettings.nightMode ? nightTextColor : dayTextColor);
+    let verseNumberColor: string;
+    if (appSettings.monochromeMode) {
+        verseNumberColor = textColor.hsl().string();
+    } else {
+        verseNumberColor = appSettings.nightMode ?
+            textColor.fade(0.2).hsl().string() :
+            textColor.fade(0.5).hsl().string();
+    }
+
     return `
           --bottom-offset: ${appSettings.bottomOffset}px;
           --top-offset: ${appSettings.topOffset}px;
@@ -302,15 +336,19 @@ setupEventBusListener("adjust_loading_count", (a: number) => {
 const isLoading = computed(() => documents.length === 0 || loadingCount.value > 0);
 
 function scrollUpDown(up = false) {
-    const amount = window.innerHeight / 2;
-    doScrolling(window.pageYOffset + (up ? -amount : amount), 500)
+    const amount =
+        window.innerHeight
+        - calculatedConfig.value.topOffset
+        - 1.5*lineHeight.value; // 1.5 times because last line might be otherwise displayed partially
+    doScrolling(window.scrollY + (up ? -amount : amount), 200)
 }
 
 setupEventBusListener("scroll_down", () => scrollUpDown());
 setupEventBusListener("scroll_up", () => scrollUpDown(true));
 
 useSharing({topElement, android});
 const direction = computed(() => appSettings.rightToLeft ? "rtl" : "ltr");
+
 </script>
 <style lang="scss">
 @import "~@/common.scss";
@@ -324,6 +362,14 @@ $ring-thickness: calc(#{$ring-size} / 12);
   top: calc(50% - #{$ring-size} / 2);
 }
 
+.loading-icon {
+  border-radius: 50%;
+  background: white;
+  .night & {
+    background: black;
+  }
+}
+
 $ring-color: $button-grey;
 
 .lds-ring {
@@ -452,11 +498,19 @@ $borderDistance: 0;
   left: 0;
   right: 0;
 
-  .night & {
+ .night & {
     background-color: rgba(255, 255, 255, 0.15);
   }
 
   background-color: rgba(0, 0, 0, 0.15);
+
+  .noAnimation & {
+    background-color: unset;
+    border-bottom: 1px dashed rgba(0, 0, 0, 0.5);
+  }
+  .night.noAnimation & {
+    border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
+  }
 }
 
 a {
@@ -521,4 +575,28 @@ a {
   width: 5em;
   height: 1em;
 }
+
+.next-page-button {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  width: 0;
+}
+
+.prev-page-button {
+  @extend .next-page-button;
+  left: 0;
+  right: unset;
+}
+
+.bottom-touch-block {
+  position: fixed;
+  bottom: 0;
+  height: 1cm;
+  width: 100%;
+  background: transparent;
+  z-index: 10;
+}
+
 </style>