From 2fa48d8dde5fc6220b65db8d9a8587731a8aeea7 Mon Sep 17 00:00:00 2001
From: HangLe <hannyle91@gmail.com>
Date: Mon, 13 Mar 2023 14:14:15 +0200
Subject: [PATCH] New way to prevent background scrolling to top when a modal
 is opened

---
 .../src/common/globalFunctions.js                |  9 ---------
 .../src/components/BrowserSecondaryNavbar.vue    |  2 --
 .../src/components/ContainerTable.vue            |  3 ---
 .../src/components/CopyFolderModal.vue           |  4 +---
 .../src/components/CreateFolderModal.vue         |  2 --
 .../src/components/DeleteModal.vue               | 16 ++++++----------
 .../src/components/EditTagsModal.vue             |  2 --
 .../src/components/ShareModal.vue                |  2 --
 .../src/components/UploadModal.vue               |  2 --
 .../src/pages/BrowserPage.vue                    |  9 ++++-----
 10 files changed, 11 insertions(+), 40 deletions(-)

diff --git a/swift_browser_ui_frontend/src/common/globalFunctions.js b/swift_browser_ui_frontend/src/common/globalFunctions.js
index 9731a26f3..79b5a6fd4 100644
--- a/swift_browser_ui_frontend/src/common/globalFunctions.js
+++ b/swift_browser_ui_frontend/src/common/globalFunctions.js
@@ -6,7 +6,6 @@ export function toggleCreateFolderModal(folderName) {
   if (folderName) {
     store.commit("setFolderName", folderName);
   }
-  modifyBrowserPageStyles();
 }
 
 export function toggleEditTagsModal(objectName, containerName) {
@@ -17,7 +16,6 @@ export function toggleEditTagsModal(objectName, containerName) {
   if (containerName) {
     store.commit("setFolderName", containerName);
   }
-  modifyBrowserPageStyles();
 }
 
 export function toggleCopyFolderModal(folderName, sourceProjectId) {
@@ -28,7 +26,6 @@ export function toggleCopyFolderModal(folderName, sourceProjectId) {
   if(sourceProjectId) {
     store.commit("setSourceProjectId", sourceProjectId);
   }
-  modifyBrowserPageStyles();
 }
 
 export function toggleDeleteModal(objects, containerName) {
@@ -39,12 +36,6 @@ export function toggleDeleteModal(objects, containerName) {
   if (containerName) {
     store.commit("setFolderName", containerName);
   }
-  modifyBrowserPageStyles();
-}
-
-export function modifyBrowserPageStyles() {
-  const element = document.getElementById("mainContainer");
-  element.classList.toggle("mainContainer-additionalStyles");
 }
 
 export function getProjectNumber(project) {
diff --git a/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue b/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue
index 3654eeefe..9e38802bc 100644
--- a/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue
+++ b/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue
@@ -104,7 +104,6 @@
 <script>
 import {
   toggleCreateFolderModal,
-  modifyBrowserPageStyles,
 } from "@/common/globalFunctions";
 import { mdiInformationOutline } from "@mdi/js";
 
@@ -150,7 +149,6 @@ export default {
     },
     toggleUploadModal: function () {
       this.$store.commit("toggleUploadModal", true);
-      modifyBrowserPageStyles();
     },
     copyProjectId: function () {
       const toastMessage = {
diff --git a/swift_browser_ui_frontend/src/components/ContainerTable.vue b/swift_browser_ui_frontend/src/components/ContainerTable.vue
index 0404a4d23..3be84f7fd 100644
--- a/swift_browser_ui_frontend/src/components/ContainerTable.vue
+++ b/swift_browser_ui_frontend/src/components/ContainerTable.vue
@@ -30,7 +30,6 @@ import {
   getSharedContainers,
   getAccessDetails,
   toggleCopyFolderModal,
-  modifyBrowserPageStyles,
   toggleDeleteModal,
 } from "@/common/globalFunctions";
 
@@ -257,14 +256,12 @@ export default {
                       this.$store.commit("toggleShareModal", true);
                       this.$store.commit(
                         "setFolderName", item.data.name.value);
-                      modifyBrowserPageStyles();
                     },
                     onKeyUp: (event) => {
                       if(event.keyCode === 13) {
                         this.$store.commit("toggleShareModal", true);
                         this.$store.commit(
                           "setFolderName", item.data.name.value);
-                        modifyBrowserPageStyles();
                       }
                     },
                     disabled: item.owner,
diff --git a/swift_browser_ui_frontend/src/components/CopyFolderModal.vue b/swift_browser_ui_frontend/src/components/CopyFolderModal.vue
index a502202b1..e544804d7 100644
--- a/swift_browser_ui_frontend/src/components/CopyFolderModal.vue
+++ b/swift_browser_ui_frontend/src/components/CopyFolderModal.vue
@@ -25,7 +25,7 @@
         <label
           class="taginput-label"
           label-for="copy-folder-taginput"
-        >  
+        >
           {{ $t('message.tagName') }}
         </label>
         <TagInput
@@ -67,7 +67,6 @@ import {
 import {
   addNewTag,
   deleteTag,
-  modifyBrowserPageStyles,
 } from "@/common/globalFunctions";
 import escapeRegExp from "lodash/escapeRegExp";
 import { useObservable } from "@vueuse/rxjs";
@@ -190,7 +189,6 @@ export default {
       this.$store.commit("setFolderName", "");
       this.folderName = "";
       this.tags = [];
-      modifyBrowserPageStyles();
     },
     replicateContainer: function () {
       // Initiate the container replication operation
diff --git a/swift_browser_ui_frontend/src/components/CreateFolderModal.vue b/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
index 329d8b3ad..86fbecabb 100644
--- a/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
+++ b/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
@@ -82,7 +82,6 @@ import {
 import {
   addNewTag,
   deleteTag,
-  modifyBrowserPageStyles,
   getProjectNumber,
 } from "@/common/globalFunctions";
 import TagInput from "@/components/TagInput.vue";
@@ -141,7 +140,6 @@ export default {
       this.folderName = "";
       this.tags = [];
       this.create = true;
-      modifyBrowserPageStyles();
     },
     addingTag: function (e, onBlur) {
       this.tags = addNewTag(e, this.tags, onBlur);
diff --git a/swift_browser_ui_frontend/src/components/DeleteModal.vue b/swift_browser_ui_frontend/src/components/DeleteModal.vue
index 6e532cd7f..daa5d2bc4 100644
--- a/swift_browser_ui_frontend/src/components/DeleteModal.vue
+++ b/swift_browser_ui_frontend/src/components/DeleteModal.vue
@@ -8,14 +8,14 @@
       {{ message }}
 
       <c-card-actions justify="end">
-        <c-button 
+        <c-button
           outlined
           @click="toggleDeleteModal"
           @keyup.enter="toggleDeleteModal"
         >
           {{ $t("message.cancel") }}
         </c-button>
-        <c-button 
+        <c-button
           @click="isObject ? deleteObjects() : deleteContainer()"
           @keyup.enter="isObject ? deleteObjects() : deleteContainer()"
         >
@@ -27,13 +27,10 @@
 </template>
 
 <script>
-import { 
+import {
   swiftDeleteObjects,
   swiftDeleteContainer,
 } from "@/common/api";
-import {
-  modifyBrowserPageStyles,
-} from "@/common/globalFunctions";
 
 export default {
   name: "DeleteModal",
@@ -44,17 +41,17 @@ export default {
   },
   computed: {
     title() {
-      return this.isObject 
+      return this.isObject
         ? this.$t("message.objects.deleteObjects")
         : this.$t("message.container_ops.deleteConfirm");
     },
     message() {
-      return this.isObject 
+      return this.isObject
         ? this.$t("message.objects.deleteObjectsMessage")
         : this.$t("message.container_ops.deleteConfirmMessage");
     },
     confirmText() {
-      return this.isObject 
+      return this.isObject
         ? this.$t("message.objects.deleteConfirm")
         : this.$t("message.container_ops.deleteConfirm");
     },
@@ -83,7 +80,6 @@ export default {
       this.$store.commit("toggleDeleteModal", false);
       this.$store.commit("setDeletableObjects", []);
       this.$store.commit("setFolderName", "");
-      modifyBrowserPageStyles();
     },
     deleteContainer: function() {
       document.querySelector("#container-toasts").addToast(
diff --git a/swift_browser_ui_frontend/src/components/EditTagsModal.vue b/swift_browser_ui_frontend/src/components/EditTagsModal.vue
index 9cc3444dc..74b84e5ea 100644
--- a/swift_browser_ui_frontend/src/components/EditTagsModal.vue
+++ b/swift_browser_ui_frontend/src/components/EditTagsModal.vue
@@ -44,7 +44,6 @@ import {
 import {
   addNewTag,
   deleteTag,
-  modifyBrowserPageStyles,
 } from "@/common/globalFunctions";
 import TagInput from "@/components/TagInput.vue";
 import { mdiClose } from "@mdi/js";
@@ -135,7 +134,6 @@ export default {
       this.$store.commit("toggleEditTagsModal", false);
       this.$store.commit("setObjectName", "");
       this.$store.commit("setFolderName", "");
-      modifyBrowserPageStyles();
     },
     saveObjectTags: function () {
       let objectMeta = [
diff --git a/swift_browser_ui_frontend/src/components/ShareModal.vue b/swift_browser_ui_frontend/src/components/ShareModal.vue
index 9600ebe07..5ac7117d8 100644
--- a/swift_browser_ui_frontend/src/components/ShareModal.vue
+++ b/swift_browser_ui_frontend/src/components/ShareModal.vue
@@ -139,7 +139,6 @@ import {
 import {
   addNewTag,
   deleteTag,
-  modifyBrowserPageStyles,
 } from "@/common/globalFunctions";
 
 import ShareModalTable from "@/components/ShareModalTable";
@@ -314,7 +313,6 @@ export default {
       this.tags = [];
       this.isShared = false;
       this.isPermissionRemoved = false;
-      modifyBrowserPageStyles();
     },
     closeSharedNotificationWithTimeout() {
       document.getElementById("share-card-modal-content").scrollTo(0, 0);
diff --git a/swift_browser_ui_frontend/src/components/UploadModal.vue b/swift_browser_ui_frontend/src/components/UploadModal.vue
index b68f8f4fa..1ec71ac5c 100644
--- a/swift_browser_ui_frontend/src/components/UploadModal.vue
+++ b/swift_browser_ui_frontend/src/components/UploadModal.vue
@@ -169,7 +169,6 @@ import {
 } from "@/common/conv";
 
 import {
-  modifyBrowserPageStyles,
   getProjectNumber,
 } from "@/common/globalFunctions";
 
@@ -540,7 +539,6 @@ export default {
       this.ephemeral = true;
       this.files = [];
       this.clearFiles();
-      modifyBrowserPageStyles();
     },
     beginEncryptedUpload() {
       if (this.pubkey.length > 0) {
diff --git a/swift_browser_ui_frontend/src/pages/BrowserPage.vue b/swift_browser_ui_frontend/src/pages/BrowserPage.vue
index 985cad09b..9bf0ba583 100644
--- a/swift_browser_ui_frontend/src/pages/BrowserPage.vue
+++ b/swift_browser_ui_frontend/src/pages/BrowserPage.vue
@@ -91,6 +91,10 @@ html, body {
   height: 100%;
 }
 
+body {
+  overflow-y: auto;
+}
+
 #mainContainer {
   min-height: 100vh;
   display: flex;
@@ -106,11 +110,6 @@ html, body {
   z-index: 1;
 }
 
-.mainContainer-additionalStyles {
-  position: fixed;
-  width: 100%;
-}
-
 c-modal {
   position: relative;
   margin: 0 auto;