Fix top nav click

src/App.vue

@@ -268,7 +268,13 @@ body {
 // Prevent content overflow on NC <25
 #content-vue {
   max-height: 100vh;
-  z-index: 3000; // above header
+}
+
+// Top bar is above everything else on mobile
+#content-vue.has-top-bar {
+  @media (max-width: 1024px) {
+    z-index: 3000;
+  }
 }
 
 // Patch viewer to remove the title and

src/components/SelectionManager.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-if="selection.size > 0" class="top-bar">
+    <div v-if="show" class="top-bar">
       <NcActions :inline="1">
         <NcActionButton
           :aria-label="t('memories', 'Cancel')"
@@ -47,7 +47,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Mixins, Prop } from "vue-property-decorator";
+import { Component, Emit, Mixins, Prop, Watch } from "vue-property-decorator";
 import GlobalMixin from "../mixins/GlobalMixin";
 import UserConfig from "../mixins/UserConfig";
 
@@ -89,9 +89,10 @@ type Selection = Map<number, IPhoto>;
   },
 })
 export default class SelectionManager extends Mixins(GlobalMixin, UserConfig) {
-  @Prop() public selection: Selection;
   @Prop() public heads: { [dayid: number]: IHeadRow };
 
+  private show = false;
+  private readonly selection!: Selection;
   private readonly defaultActions: ISelectionAction[];
 
   @Emit("refresh")
@@ -106,6 +107,8 @@ export default class SelectionManager extends Mixins(GlobalMixin, UserConfig) {
   constructor() {
     super();
 
+    this.selection = new Map<number, IPhoto>();
+
     // Make default actions
     this.defaultActions = [
       {
@@ -177,6 +180,29 @@ export default class SelectionManager extends Mixins(GlobalMixin, UserConfig) {
     ];
   }
 
+  @Watch("show")
+  onShowChange() {
+    const elem = document.getElementById("content-vue");
+    const klass = "has-top-bar";
+    if (this.show) {
+      elem.classList.add(klass);
+    } else {
+      elem.classList.remove(klass);
+    }
+  }
+
+  private selectionChanged() {
+    this.show = this.selection.size > 0;
+  }
+
+  /** Is this fileid (or anything if not specified) selected */
+  public has(fileid?: number) {
+    if (fileid === undefined) {
+      return this.selection.size > 0;
+    }
+    return this.selection.has(fileid);
+  }
+
   /** Click on an action */
   private async click(action: ISelectionAction) {
     try {
@@ -191,7 +217,9 @@ export default class SelectionManager extends Mixins(GlobalMixin, UserConfig) {
 
   /** Get the actions list */
   private getActions(): ISelectionAction[] {
-    return this.defaultActions.filter((a) => (!a.if || a.if(this)) && (!this.routeIsPublic() || a.allowPublic));
+    return this.defaultActions.filter(
+      (a) => (!a.if || a.if(this)) && (!this.routeIsPublic() || a.allowPublic)
+    );
   }
 
   /** Clear all selected photos */
@@ -202,6 +230,7 @@ export default class SelectionManager extends Mixins(GlobalMixin, UserConfig) {
       photo.flag &= ~this.c.FLAG_SELECTED;
       heads.add(this.heads[photo.d.dayid]);
       this.selection.delete(photo.fileid);
+      this.selectionChanged();
     });
     heads.forEach(this.updateHeadSelected);
     this.$forceUpdate();
@@ -239,6 +268,7 @@ export default class SelectionManager extends Mixins(GlobalMixin, UserConfig) {
     if (nval) {
       photo.flag |= this.c.FLAG_SELECTED;
       this.selection.set(photo.fileid, photo);
+      this.selectionChanged();
     } else {
       photo.flag &= ~this.c.FLAG_SELECTED;
 
@@ -247,6 +277,7 @@ export default class SelectionManager extends Mixins(GlobalMixin, UserConfig) {
       // in the list, which creates an inconsistent state if we do this.
       if (this.selection.get(photo.fileid) === photo) {
         this.selection.delete(photo.fileid);
+        this.selectionChanged();
       }
     }
 
@@ -530,7 +561,8 @@ export default class SelectionManager extends Mixins(GlobalMixin, UserConfig) {
     padding-left: 8px;
   }
 
-  @media (max-width: 1024px) { // sidebar is hidden below this point
+  @media (max-width: 1024px) {
+    // sidebar is hidden below this point
     top: 0;
     left: 0;
     right: unset;

src/components/Timeline.vue

@@ -204,8 +204,6 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
   private fetchDayQueue = [] as number[];
   /** Timer to load day call */
   private fetchDayTimer = null as number | null;
-  /** Set of selected file ids */
-  private selection = new Map<number, IPhoto>();
 
   /** State for request cancellations */
   private state = Math.random();
@@ -359,10 +357,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
 
     if (this.isMobileLayout()) {
       // Mobile
-      this.numCols = Math.max(
-          3,
-          Math.floor(this.rowWidth / MOBILE_ROW_HEIGHT)
-        );
+      this.numCols = Math.max(3, Math.floor(this.rowWidth / MOBILE_ROW_HEIGHT));
       this.rowHeight = Math.floor(this.rowWidth / this.numCols);
     } else {
       // Desktop
@@ -1118,7 +1113,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
   clickPhoto(photo: IPhoto) {
     if (photo.flag & this.c.FLAG_PLACEHOLDER) return;
 
-    if (this.selection.size > 0) {
+    if (this.selectionManager.has()) {
       // selection mode
       this.selectionManager.selectPhoto(photo);
     } else {