fix overlay bug, share bug (#161)

frontend/src/api/users.js

@@ -27,6 +27,9 @@ export async function update(user, which = ["all"]) {
   if (which[0] != "password") {
     user.password = "";
   }
+  if (user.username == "publicUser") {
+    return
+  }
   console.log("updating user",user,which)
   await fetchURL(`/api/users/${user.id}`, {
     method: "PUT",

frontend/src/components/Search.vue

@@ -29,7 +29,12 @@
     </div>
 
     <!-- Search results for mobile -->
-    <div v-if="isMobile && active" id="result" :class="{ hidden: !active }" ref="result">
+    <div
+      v-if="state.isMobile && active"
+      id="result"
+      :class="{ hidden: !active }"
+      ref="result"
+    >
       <div id="result-list">
         <div class="button" style="width: 100%">Search Context: {{ getContext }}</div>
         <!-- List of search results -->
@@ -97,7 +102,7 @@
     </div>
 
     <!-- Search results for desktop -->
-    <div v-show="!isMobile && active" id="result-desktop" ref="result">
+    <div v-show="!state.isMobile && active" id="result-desktop" ref="result">
       <div class="searchContext">Search Context: {{ getContext }}</div>
       <div id="result-list">
         <div>
@@ -241,7 +246,6 @@ export default {
         { label: "Archives", value: "type:archive" },
       ],
       value: "",
-      width: window.innerWidth,
       ongoing: false,
       results: [],
       reload: false,
@@ -299,7 +303,8 @@ export default {
       return this.isTypeSelectDisabled;
     },
     active() {
-      return getters.currentPromptName() === "search";
+      console.log("calling active ", getters.currentPromptName());
+      return getters.currentPromptName() == "search";
     },
     showOverlay() {
       return getters.currentPrompt() !== null && getters.currentPromptName() !== "more";
@@ -342,11 +347,7 @@ export default {
       return path;
     },
   },
-
   methods: {
-    handleResize() {
-      this.width = window.innerWidth;
-    },
     async navigateTo(url) {
       mutations.closeHovers();
       await this.$nextTick();
@@ -403,7 +404,7 @@ export default {
         return false;
       }
       this.searchTypes = this.searchTypes.replace(string + " ", "");
-      if (this.isMobile) {
+      if (state.isMobile) {
         this.$refs.input.focus();
       }
     },
@@ -447,12 +448,6 @@ export default {
       this.showHelp = !this.showHelp;
     },
   },
-  mounted() {
-    window.addEventListener("resize", this.handleResize);
-  },
-  beforeUnmount() {
-    window.removeEventListener("resize", this.handleResize);
-  },
 };
 </script>
 

frontend/src/components/Sidebar.vue

@@ -4,45 +4,49 @@
     :class="{ active: active, 'dark-mode': isDarkMode, sticky: user?.stickySidebar }"
   >
     <div class="card">
-      <button
+      <div class="card-wrapper">
-        v-if="user.username"
+        <button
-        @click="navigateTo('/settings/profile')"
+          v-if="user.username"
-        class="action"
+          @click="navigateTo('/settings/profile')"
-      >
+          class="action"
-        <i class="material-icons">person</i>
+        >
-        <span>{{ user.username }}</span>
+          <i class="material-icons">person</i>
-      </button>
+          <span>{{ user.username }}</span>
+        </button>
+      </div>
     </div>
-
+    <div class="card">
-    <div class="card card-wrapper" @mouseleave="resetHoverTextToDefault">
+      <div class="card-wrapper" @mouseleave="resetHoverTextToDefault">
-      <span>{{ hoverText }}</span>
+        <span>{{ hoverText }}</span>
-      <div class="quick-toggles">
+        <div class="quick-toggles">
-        <div
+          <div
-          :class="{ active: user?.singleClick }"
+            :class="{ active: user?.singleClick }"
-          @click="toggleClick"
+            @click="toggleClick"
-          @mouseover="updateHoverText('Toggle single click')"
+            @mouseover="updateHoverText('Toggle single click')"
-        >
+          >
-          <i class="material-icons">ads_click</i>
+            <i class="material-icons">ads_click</i>
-        </div>
+          </div>
-        <div
+          <div
-          :class="{ active: user?.darkMode }"
+            :class="{ active: user?.darkMode }"
-          @click="toggleDarkMode"
+            @click="toggleDarkMode"
-          @mouseover="updateHoverText('Toggle dark mode')"
+            @mouseover="updateHoverText('Toggle dark mode')"
-        >
+          >
-          <i class="material-icons">dark_mode</i>
+            <i class="material-icons">dark_mode</i>
-        </div>
+          </div>
-        <div
+          <div
-          :class="{ active: user?.stickySidebar }"
+            :class="{ active: user?.stickySidebar }"
-          @click="toggleSticky"
+            @click="toggleSticky"
-          @mouseover="updateHoverText('Toggle sticky sidebar')"
+            @mouseover="updateHoverText('Toggle sticky sidebar')"
-        >
+            v-if="!isMobile"
-          <i class="material-icons">push_pin</i>
+          >
+            <i class="material-icons">push_pin</i>
+          </div>
         </div>
       </div>
     </div>
 
     <!-- Section for logged-in users -->
-    <div v-if="isLoggedIn">
+    <div v-if="isLoggedIn" class="sidebar-scroll-list">
       <!-- Buttons visible if user has create permission -->
       <div v-if="user.perm?.create">
         <!-- New Folder button -->
@@ -97,7 +101,7 @@
           <span>{{ $t("sidebar.logout") }}</span>
         </button>
       </div>
-      <div class="sources card card-wrapper">
+      <div v-if="isLoggedIn" class="sources card">
         <span>Sources</span>
         <div class="inner-card">
           <!-- My Files button -->
@@ -120,7 +124,7 @@
     </div>
 
     <!-- Section for non-logged-in users -->
-    <div v-else>
+    <div v-else class="sidebar-scroll-list">
       <!-- Login button -->
       <router-link
         class="action"
@@ -145,10 +149,8 @@
     </div>
 
     <div class="buffer"></div>
-    <!-- Credits and usage information section -->
+    <div class="credits">
-    <div class="credits" v-if="isFiles && !disableUsedPercentage && usage">
+      <span>
-      <span v-if="disableExternal">File Browser</span>
-      <span v-else>
         <a
           rel="noopener noreferrer"
           target="_blank"
@@ -192,9 +194,14 @@ export default {
     };
   },
   mounted() {
-    this.updateUsage();
+    if (getters.isLoggedIn()) {
+      this.updateUsage();
+    }
   },
   computed: {
+    isMobile() {
+      return getters.isMobile();
+    },
     isFiles() {
       return getters.isFiles();
     },
@@ -294,6 +301,10 @@ export default {
 </script>
 
 <style>
+.sidebar-scroll-list {
+  overflow: scroll;
+  margin-bottom: 0px !important;
+}
 #sidebar {
   top: 0;
   display: flex;
@@ -344,10 +355,13 @@ body.rtl nav {
   margin-bottom: 0.5em;
 }
 
+#sidebar .card {
+  overflow: unset !important;
+}
+
 #sidebar .action {
   width: 100%;
   display: block;
-  padding: 0.5em;
   white-space: nowrap;
   height: 100%;
   overflow: hidden;
@@ -369,7 +383,7 @@ body.rtl .action {
 .credits {
   font-size: 1em;
   color: var(--textSecondary);
-  padding: 1em;
+  padding-left: 1em;
 }
 
 .credits > span {
@@ -392,7 +406,7 @@ body.rtl .action {
   display: flex;
   justify-content: space-evenly;
   width: 100%;
-  padding-bottom: 1em !important;
+  margin-top: 0.5em !important;
 }
 
 .quick-toggles button {
@@ -402,16 +416,20 @@ body.rtl .action {
 }
 
 .card-wrapper {
-  display: flex;
+  display: flex !important;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 0.5em;
+  padding: 1em !important;
+  min-height: 4em;
+  box-shadow: 0 2px 2px #00000024, 0 1px 5px #0000001f, 0 3px 1px -2px #0003;
+  /* overflow: auto; */
+  border-radius: 1em;
+  height: 100%;
 }
 
 .sources {
-  padding: 0.5em;
+  padding: 1em;
-  margin-top: 0.5em;
 }
 
 .inner-card {

frontend/src/store/getters.js

@@ -1,7 +1,7 @@
 import { state } from "./state.js";
 
 export const getters = {
-  isMobile: () => window.innerWidth <= 800,
+  isMobile: () => state.isMobile,
   isDarkMode: () => {
     if (state.user == null) {
       return true;
@@ -24,15 +24,23 @@ export const getters = {
     if (!getters.isLoggedIn()) {
       return false
     }
-    return state.showSidebar || state.user.stickySidebar
+    return state.showSidebar || getters.isStickySidebar()
+  },
+  isStickySidebar: () => {
+    if (getters.isMobile()) {
+      return false
+    }
+    if (!getters.isLoggedIn()) {
+      return true
+    }
+    return state.user?.stickySidebar
   },
   showOverlay: () => {
     if (!getters.isLoggedIn()) {
       return false
     }
     const hasPrompt = getters.currentPrompt() !== null && getters.currentPromptName() !== "more";
-    const sidebarHover = (!state.user.stickySidebar && state.showSidebar) || getters.isMobile();
+    return hasPrompt || getters.isSidebarVisible();
-    return hasPrompt || sidebarHover;
   },
   getRoutePath: () => {
     return state.route.path.endsWith("/")

frontend/src/store/mutations.js

@@ -4,6 +4,11 @@ import { emitStateChanged } from './eventBus'; // Import the function from event
 import { users } from "@/api";
 
 export const mutations = {
+  setMobile() {
+    state.mobile = window.innerWidth <= 800
+    console.log("state updated",state.mobile)
+    emitStateChanged();
+  },
   toggleDarkMode() {
     mutations.updateUser({ "darkMode": !state.user.darkMode });
     emitStateChanged();

frontend/src/store/state.js

@@ -2,6 +2,7 @@ import { reactive } from 'vue';
 import { detectLocale } from "@/i18n";
 
 export const state = reactive({
+  isMobile: window.innerWidth <= 800,
   showSidebar: false,
   usage: {
     used: "0 B",

frontend/src/views/Layout.vue

@@ -14,7 +14,7 @@
     ></editorBar>
     <defaultBar :class="{ 'dark-mode-header': isDarkMode }" v-else></defaultBar>
     <sidebar></sidebar>
-    <search v-if="currentView == 'listingView'"></search>
+    <search v-if="showSearch"></search>
     <main :class="{ 'dark-mode': isDarkMode, moveWithSidebar: moveWithSidebar }">
       <router-view></router-view>
     </main>
@@ -58,7 +58,13 @@ export default {
       itemWeight: 0,
     };
   },
+  mounted() {
+    window.addEventListener("resize", this.updateIsMobile);
+  },
   computed: {
+    showSearch() {
+      return getters.isFiles() && getters.isLoggedIn();
+    },
     isLoggedIn() {
       return getters.isLoggedIn();
     },
@@ -114,6 +120,10 @@ export default {
     },
   },
   methods: {
+    updateIsMobile() {
+      console.log("setting");
+      mutations.setMobile();
+    },
     resetPrompts() {
       mutations.closeSidebar();
       mutations.closeHovers();