From 822628157980ab3af8f7d325ea277a78bae55912 Mon Sep 17 00:00:00 2001
From: Graham Steffaniak <gtsteff@gmail.com>
Date: Sun, 30 Jul 2023 17:20:22 -0500
Subject: [PATCH] updated hovers

---
 frontend/public/themes/dark.css             |  44 +++----
 frontend/src/components/Search.vue          |   6 +-
 frontend/src/components/Sidebar.vue         |  28 -----
 frontend/src/components/prompts/Prompts.vue |  13 +-
 frontend/src/css/base.css                   |  29 +++--
 frontend/src/css/dashboard.css              |  15 ++-
 frontend/src/css/header.css                 |   6 +-
 frontend/src/css/styles.css                 |   2 +-
 frontend/src/views/files/Listing.vue        | 128 ++++++++------------
 9 files changed, 124 insertions(+), 147 deletions(-)

diff --git a/frontend/public/themes/dark.css b/frontend/public/themes/dark.css
index 4b508840..f202f157 100644
--- a/frontend/public/themes/dark.css
+++ b/frontend/public/themes/dark.css
@@ -3,7 +3,6 @@
   --surfacePrimary: #20292F;
   --surfaceSecondary: #3A4147;
   --divider: rgba(255, 255, 255, 0.12);
-  --icon: #ffffff;
   --textPrimary: rgba(255, 255, 255, 0.87);
   --textSecondary: rgba(255, 255, 255, 0.6);
 }
@@ -16,9 +15,6 @@ body {
 #loading {
   background: var(--background);
 }
-#loading .spinner div, main .spinner div {
-  background: var(--icon);
-}
 
 #login {
   background: var(--background);
@@ -65,9 +61,7 @@ header {
 .action:hover {
   background-color: rgba(255, 255, 255, .1);
 }
-.action i {
-  color: var(--icon) !important;
-}
+
 .action .counter {
   border-color: var(--surfacePrimary);
 }
@@ -92,9 +86,7 @@ nav > div {
   color: var(--textPrimary);
   border-color: var(--divider) !important;
 }
-#listing .item i {
-  color: var(--icon);
-}
+
 #listing .item .modified {
   color: var(--textSecondary);
 }
@@ -105,9 +97,7 @@ nav > div {
 #listing.list .header span {
   color: var(--textPrimary);
 }
-#listing.list .header i {
-  color: var(--icon);
-}
+
 #listing.list .item.header {
   background: var(--background);
 }
@@ -130,6 +120,9 @@ nav > div {
 .dashboard #nav ul li:hover {
   background: var(--surfaceSecondary);
 }
+#result-list {
+  background-color:#292929;
+}
 
 .card h3,
 .dashboard #nav,
@@ -173,9 +166,6 @@ table th {
 .file-list li:before {
   color: var(--textSecondary);
 }
-.file-list li[aria-selected=true]:before {
-  color: var(--icon);
-}
 
 .shell {
   background: var(--surfacePrimary);
@@ -196,16 +186,18 @@ nav {
   background: var(--surfaceSecondary) !important;
 }
 
-@media (max-width: 800px) {
-  #file-selection {
-    background: var(--surfaceSecondary) !important;
-  }
-  #file-selection span {
-    color: var(--textPrimary) !important;
-  }
-  #dropdown {
-    background: var(--surfaceSecondary) !important;
-  }
+#file-selection {
+  background: var(--surfaceSecondary) !important;
+}
+#file-selection span {
+  color: var(--textPrimary) !important;
+}
+#dropdown {
+  background: var(--surfaceSecondary) !important;
+}
+
+.button-group button {
+  background-color:darkgray;
 }
 
 .share__box {
diff --git a/frontend/src/components/Search.vue b/frontend/src/components/Search.vue
index 985bb595..c4823010 100644
--- a/frontend/src/components/Search.vue
+++ b/frontend/src/components/Search.vue
@@ -48,7 +48,7 @@
           </li>
         </ul>
         <template v-if="isEmpty">
-          <p>{{ text }}</p>
+          <p >{{ text }}</p>
           <template v-if="value.length === 0">
             <div class="boxes">
               <h3>{{ $t("search.types") }}</h3>
@@ -278,7 +278,7 @@ export default {
       if (string == null || string == ""){
         return false
       }
-      this.value = this.value.replace(string, "");
+      this.value = this.value.replace(string+" ", "");
       if (this.isMobile){
         this.$refs.input.focus();
       }
@@ -306,4 +306,4 @@ export default {
     },
   },
 };
-</script>
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
index 4f76c9f4..7af376d9 100644
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -1,34 +1,6 @@
 <template>
   <nav :class="{ active }">
     <template v-if="isLogged">
-      <!--
-        i want this here eventually
-        <action
-          v-if="headerButtons.download"
-          icon="file_download"
-          :label="$t('buttons.download')"
-          @action="download"
-          :counter="selectedCount"
-        />
-        <action
-          v-if="headerButtons.upload"
-          icon="file_upload"
-          id="upload-button"
-          :label="$t('buttons.upload')"
-          @action="upload"
-        />
-        <action
-          v-if="headerButtons.shell"
-          icon="code"
-          :label="$t('buttons.shell')"
-          @action="$store.commit('toggleShell')"
-        />
-        <action
-          :icon="viewIcon"
-          :label="$t('buttons.switchView')"
-          @action="switchView"
-        />
-      -->
 
       <button
         class="action"
diff --git a/frontend/src/components/prompts/Prompts.vue b/frontend/src/components/prompts/Prompts.vue
index 18b0c9a6..3d3e89ec 100644
--- a/frontend/src/components/prompts/Prompts.vue
+++ b/frontend/src/components/prompts/Prompts.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <component ref="currentComponent" :is="currentComponent"></component>
+    <div v-if="showOverlay" @click="resetPrompts" class="overlay"></div>
   </div>
 </template>
 
@@ -103,6 +104,16 @@ export default {
 
       return (matched && this.show) || null;
     },
+    showOverlay: function () {
+      return (
+        this.show !== null && this.show !== "more"
+      );
+    },
+  },
+  methods: {
+    resetPrompts() {
+      this.$store.commit("closeHovers");
+    },
   },
 };
-</script>
+</script>
\ No newline at end of file
diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css
index ddb71d06..e26d98f1 100644
--- a/frontend/src/css/base.css
+++ b/frontend/src/css/base.css
@@ -42,11 +42,6 @@ audio, video {
   margin: 1em auto 0;
 }
 
-/* Mobile Specific Styles */
-.mobile-only {
-  display: none !important;
-}
-
 /* Icons */
 i.spin {
   animation: 1s spin linear infinite;
@@ -56,7 +51,7 @@ i.spin {
 #app {
   transition: 0.2s ease padding;
 }
-
+over
 #app.multiple {
   padding-bottom: 4em;
 }
@@ -197,15 +192,35 @@ body.rtl .breadcrumbs a {
   bottom: 1em;
   left: 50%;
   transform: translateX(-50%);
-  display: flex;
+  display: -ms-flexbox;
+  -ms-flex-align: center;
   align-items: center;
   background: #fff;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
   box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
   width: 95%;
   max-width: 25em;
   z-index: 1;
 }
 
+button {
+  flex: 1;
+  height: 3em;
+  padding: 8px 16px;
+  border: none;
+  background-color: #f5f5f5;
+  transition: background-color 0.3s;
+
+  /* Add borders */
+  border-right: 1px solid #ccc;
+}
+
+@media (min-width: 800px) {
+  #file-selection {
+    bottom: 4em;
+  }
+}
+
 #file-selection .action {
   border-radius: 50%;
   width: auto;
diff --git a/frontend/src/css/dashboard.css b/frontend/src/css/dashboard.css
index 9d3ebcce..24bca5bc 100644
--- a/frontend/src/css/dashboard.css
+++ b/frontend/src/css/dashboard.css
@@ -295,6 +295,17 @@ body.rtl .card .card-title>*:first-child {
   opacity: 0;
 }
 
+.overlay {
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  top: 4em;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 9999;
+  animation: .3s show ease-in;
+}
+
 .card#share .action.copy-clipboard.active::after {
   opacity: 1;
 }
@@ -311,10 +322,6 @@ body.rtl .card .card-title>*:first-child {
   flex: 1;
 }
 
-/* * * * * * * * * * * * * * * *
- *        PROMPT - MOVE        *
- * * * * * * * * * * * * * * * */
-
 .file-list {
   max-height: 50vh;
   overflow: auto;
diff --git a/frontend/src/css/header.css b/frontend/src/css/header.css
index a19566fb..7cbe6cc4 100644
--- a/frontend/src/css/header.css
+++ b/frontend/src/css/header.css
@@ -2,6 +2,7 @@
 header {
   z-index: 1000;
   position: fixed;
+  z-index: 10000;
   top: 0;
   left: 0;
   width: 100%;
@@ -86,6 +87,9 @@ header>div div {
   padding: 0;
 }
 
+#result-list p {
+  margin: 1em;
+}
 #result-list {
   width: 60em;
   max-width: 100%;
@@ -241,7 +245,7 @@ body.rtl #search .boxes h3 {
   margin: 1em;
   margin-right: auto;
   margin-left: auto;
-  max-width: 30em;
+  max-width: 40em;
   justify-content: space-between;
 }
 
diff --git a/frontend/src/css/styles.css b/frontend/src/css/styles.css
index 4496d3ab..e28003bc 100644
--- a/frontend/src/css/styles.css
+++ b/frontend/src/css/styles.css
@@ -158,7 +158,7 @@ main .spinner .bounce2 {
   color: #fff;
 }
 
-@media (min-width: 738px) {
+@media (min-width: 800px) {
   #previewer header #dropdown .action i {
     color: #fff;
   }
diff --git a/frontend/src/views/files/Listing.vue b/frontend/src/views/files/Listing.vue
index 3ecc41e6..ac2184aa 100644
--- a/frontend/src/views/files/Listing.vue
+++ b/frontend/src/views/files/Listing.vue
@@ -3,52 +3,55 @@
     <header-bar showMenu showLogo>
       <search />
       <template #actions>
-        <action
-          :icon="viewIcon"
-          :label="$t('buttons.switchView')"
-          @action="switchView"
-        />
+        <action :icon="viewIcon" :label="$t('buttons.switchView')" @action="switchView" />
       </template>
     </header-bar>
 
     <div id="file-selection">
       <span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
-      <template >
-      <action
-        v-if="headerButtons.info"
-        icon="info"
-        :label="$t('buttons.info')"
-        show="info" />
-      <action
-        v-if="headerButtons.share"
-        icon="share"
-        :label="$t('buttons.share')"
-        show="share"
-      />
-      <action
-        v-if="headerButtons.rename"
-        icon="mode_edit"
-        :label="$t('buttons.rename')"
-        show="rename"
-      />
-      <action
-        v-if="headerButtons.copy"
-        icon="content_copy"
-        :label="$t('buttons.copyFile')"
-        show="copy"
-      />
-      <action
-        v-if="headerButtons.move"
-        icon="forward"
-        :label="$t('buttons.moveFile')"
-        show="move"
-      />
-      <action
-        v-if="headerButtons.delete"
-        icon="delete"
-        :label="$t('buttons.delete')"
-        show="delete"
-      />
+      <template>
+        <action
+          v-if="headerButtons.select"
+          icon="info"
+          :label="$t('buttons.info')"
+          show="info"
+        />
+        <action
+        v-if="headerButtons.select"
+          icon="check_circle"
+          :label="$t('buttons.selectMultiple')"
+          @action="toggleMultipleSelection"
+        />
+        <action
+          v-if="headerButtons.share"
+          icon="share"
+          :label="$t('buttons.share')"
+          show="share"
+        />
+        <action
+          v-if="headerButtons.rename"
+          icon="mode_edit"
+          :label="$t('buttons.rename')"
+          show="rename"
+        />
+        <action
+          v-if="headerButtons.copy"
+          icon="content_copy"
+          :label="$t('buttons.copyFile')"
+          show="copy"
+        />
+        <action
+          v-if="headerButtons.move"
+          icon="forward"
+          :label="$t('buttons.moveFile')"
+          show="move"
+        />
+        <action
+          v-if="headerButtons.delete"
+          icon="delete"
+          :label="$t('buttons.delete')"
+          show="delete"
+        />
       </template>
     </div>
 
@@ -84,12 +87,7 @@
           multiple
         />
       </div>
-      <div
-        v-else
-        id="listing"
-        ref="listing"
-        :class="user.viewMode + ' file-icons'"
-      >
+      <div v-else id="listing" ref="listing" :class="user.viewMode + ' file-icons'">
         <div>
           <div class="item header">
             <div></div>
@@ -235,15 +233,7 @@ export default {
     };
   },
   computed: {
-    ...mapState([
-      "req",
-      "selected",
-      "user",
-      "show",
-      "multiple",
-      "selected",
-      "loading",
-    ]),
+    ...mapState(["req", "selected", "user", "show", "multiple", "selected", "loading"]),
     ...mapGetters(["selectedCount"]),
     nameSorted() {
       return this.req.sorting.by === "name";
@@ -312,7 +302,6 @@ export default {
     },
     headerButtons() {
       return {
-        info: this.selectedCount > 0,
         select: this.selectedCount > 0,
         upload: this.user.perm.create,
         download: this.user.perm.download,
@@ -480,9 +469,7 @@ export default {
       let items = [];
 
       for (let item of this.$store.state.clipboard.items) {
-        const from = item.from.endsWith("/")
-          ? item.from.slice(0, -1)
-          : item.from;
+        const from = item.from.endsWith("/") ? item.from.slice(0, -1) : item.from;
         const to = this.$route.path + encodeURIComponent(item.name);
         items.push({ from, to, name: item.name });
       }
@@ -563,9 +550,7 @@ export default {
 
       if (currentPos > triggerPos) {
         // Quantity of items needed to fill 2x of the window height
-        const showQuantity = Math.ceil(
-          (window.innerHeight * 2) / this.itemWeight
-        );
+        const showQuantity = Math.ceil((window.innerHeight * 2) / this.itemWeight);
 
         // Increase the number of displayed items
         this.showLimit += showQuantity;
@@ -611,11 +596,7 @@ export default {
         ? this.$route.path
         : this.$route.path + "/";
 
-      if (
-        el !== null &&
-        el.classList.contains("item") &&
-        el.dataset.dir === "true"
-      ) {
+      if (el !== null && el.classList.contains("item") && el.dataset.dir === "true") {
         // Get url from ListingItem instance
         path = el.__vue__.url;
 
@@ -648,8 +629,7 @@ export default {
 
       let files = event.currentTarget.files;
       let folder_upload =
-        files[0].webkitRelativePath !== undefined &&
-        files[0].webkitRelativePath !== "";
+        files[0].webkitRelativePath !== undefined && files[0].webkitRelativePath !== "";
 
       if (folder_upload) {
         for (let i = 0; i < files.length; i++) {
@@ -703,9 +683,7 @@ export default {
       }
 
       try {
-        await users.update({ id: this.user.id, sorting: { by, asc } }, [
-          "sorting",
-        ]);
+        await users.update({ id: this.user.id, sorting: { by, asc } }, ["sorting"]);
       } catch (e) {
         this.$showError(e);
       }
@@ -805,9 +783,7 @@ export default {
       const windowHeight = window.innerHeight;
 
       // Quantity of items needed to fill 2x of the window height
-      const showQuantity = Math.ceil(
-        (windowHeight + windowHeight * 2) / this.itemWeight
-      );
+      const showQuantity = Math.ceil((windowHeight + windowHeight * 2) / this.itemWeight);
 
       // Less items to display than current
       if (this.showLimit > showQuantity && !fit) return;