CSS optimized, scroll to top button added to file browser

Author: Ferenc Nánási

CHANGELOG.md

@@ -37,3 +37,4 @@ Important Android stuff:
 - [CSS] Improved contrast,
 - Made the whole app more consistent,
 - Set Youtube quality on "Open URL" dialog.
+- Scroll to top added to File browser

src/components/addCollectionModal.vue

@@ -29,7 +29,11 @@
         </ion-item>
         <ion-item lines="full">
           <ion-label>Media type</ion-label>
-          <ion-select :value="dialog.type" v-model="dialog.type">
+          <ion-select
+            :value="dialog.type"
+            v-model="dialog.type"
+            :interface-options="{ cssClass: 'alertbox' }"
+          >
             <!-- // TYPE Can be: Movies - 1, TVShows - 2, Music - 3 !-->
             <ion-select-option :value="1"> Movies </ion-select-option>
             <ion-select-option :value="2"> TVShows </ion-select-option>

src/components/audioSettingsModal.vue

@@ -17,6 +17,7 @@
           :value="activeAudioTrackId"
           @ionChange="onSwitchAudioClicked"
           v-model="selectedTrack"
+          :interface-options="{ cssClass: 'alertbox' }"
         >
           <ion-select-option
             :value="audio.id"

src/components/fileBrowserModal.vue

@@ -38,6 +38,8 @@
     <ion-content
       ref="browserContent"
       class="ion-padding"
+      :scroll-events="true"
+      @ionScroll="logScroll($event)"
       v-if="(files.cwd || files.collection_id) && connectionState"
     >
       <ion-list>
@@ -127,6 +129,18 @@
         </ion-item>
       </ion-list>
     </ion-content>
+    <ion-fab
+      v-if="scrollToTopEnabled"
+      vertical="bottom"
+      horizontal="end"
+      slot="fixed"
+      @click="onScrollToTopClicked"
+    >
+      <ion-fab-button>
+        <ion-icon :icon="arrowUp"></ion-icon>
+      </ion-fab-button>
+    </ion-fab>
+
     <ion-footer v-if="showOpenFolder">
       <ion-button
         :disabled="!files.cwd"
@@ -164,11 +178,13 @@ import {
   alertController,
   IonInfiniteScroll,
   IonInfiniteScrollContent,
+  IonFab,
+  IonFabButton,
 } from "@ionic/vue";
 import {
+  arrowUp,
   folder,
   document,
-  add,
   fileTray,
   bookmarksOutline,
   musicalNotes,
@@ -198,6 +214,9 @@ export default {
     const INFINITE_SCROLL_STEP = 100;
     const infiniteScrollEnabled = ref(false);
 
+    // Scroll to top
+    const scrollToTopEnabled = ref(false);
+
     const filesBak = ref([]);
     const collections = ref([]);
     const search = ref("");
@@ -206,7 +225,6 @@ export default {
 
     const showOpenFolder = ref(props.action === FileBrowserActions.OPENFOLDER);
     const drives = ref([]);
-
     const filemanLastPath = store.state.settings.filemanLastPath;
     const sortBy = ref(FileBrowserSortBy.NAME);
 
@@ -516,7 +534,7 @@ export default {
     const onSortByClicked = async () => {
       const alert = await alertController.create({
         header: "Sort by",
-        cssClass: "alert",
+        cssClass: "alertbox",
         inputs: [
           {
             type: "radio",
@@ -563,8 +581,18 @@ export default {
       }
     };
 
+    const logScroll = async (event) => {
+      if (event.detail.scrollTop > 0) scrollToTopEnabled.value = true;
+      else scrollToTopEnabled.value = false;
+    };
+
+    const onScrollToTopClicked = () => {
+      browserContent.value.$el.scrollToPoint(0, 0, 500);
+    };
+
     loadFileBrowser();
     return {
+      logScroll,
       onCancelClicked,
       onPrevDirectoryClicked,
       onOpenDirectoryClicked,
@@ -574,6 +602,9 @@ export default {
       decideIcon,
       onCollectionsClicked,
       getDirectoryContents,
+      onSortByClicked,
+      onInfiniteScroll,
+      onScrollToTopClicked,
       browsableFiles,
       connectionState: computed(
         () => store.getters["simpleapi/connectionState"]
@@ -584,7 +615,6 @@ export default {
       files,
       folder,
       document,
-      add,
       fileTray,
       bookmarksOutline,
       search,
@@ -595,11 +625,11 @@ export default {
       drives,
       serverConfig,
       funnelOutline,
-      onSortByClicked,
-      onInfiniteScroll,
       infiniteScrollEnabled,
       browserContent,
       arrowBackSharp,
+      arrowUp,
+      scrollToTopEnabled,
     };
   },
   components: {
@@ -619,6 +649,8 @@ export default {
     IonListHeader,
     IonInfiniteScroll,
     IonInfiniteScrollContent,
+    IonFab,
+    IonFabButton,
   },
 };
 </script>
@@ -630,7 +662,7 @@ ion-footer {
 }
 
 ion-footer ion-button {
-  width: 120px;
+  min-width: 120px;
 }
 
 .fileformatSubtitle {

src/components/openURLModal.vue

@@ -27,7 +27,10 @@
       </ion-item>
       <ion-item lines="full">
         <ion-label>Youtube quality</ion-label>
-        <ion-select v-model="dialog['file-local-options']['ytdl-format']">
+        <ion-select
+          v-model="dialog['file-local-options']['ytdl-format']"
+          :interface-options="{ cssClass: 'alertbox' }"
+        >
           <ion-select-option value="">Default</ion-select-option>
           <ion-select-option value="bestvideo[height<=?2160]+bestaudio/best"
             >4k</ion-select-option

src/components/subtitleSettingsModal.vue

@@ -17,6 +17,7 @@
           v-model="selectedTrack"
           @ionChange="onSubtitleTrackChanged"
           :value="activeSubTrackId"
+          :interface-options="{ cssClass: 'alertbox' }"
         >
           <ion-select-option
             :value="sub.id"
@@ -56,6 +57,7 @@
         <ion-label>ASS Override</ion-label>
 
         <ion-select
+          :interface-options="{ cssClass: 'alertbox' }"
           @ionChange="onAssOverridechanged"
           :value="currentAssOverride"
         >

src/theme/variables.css

@@ -157,3 +157,7 @@ ion-toolbar {
 ion-searchbar {
   color: #fff !important;
 }
+
+.alertbox .alert-wrapper button {
+  color: #04c8c5;
+}

src/views/Playlist.vue

@@ -47,7 +47,11 @@
             fill="clear"
             slot="end"
           >
-            <ion-icon slot="icon-only" :icon="trashBin"></ion-icon>
+            <ion-icon
+              style="color: white"
+              slot="icon-only"
+              :icon="trashBin"
+            ></ion-icon>
           </ion-button>
           <ion-reorder slot="end"></ion-reorder>
         </ion-item>