Merge pull request #7 from gtsteffaniak/update-hovers

Update hovers

frontend/src/components/prompts/Prompts.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
     <component ref="currentComponent" :is="currentComponent"></component>
-    <div v-show="showOverlay" @click="resetPrompts" class="overlay"></div>
   </div>
 </template>
 
@@ -104,16 +103,6 @@ export default {
 
       return (matched && this.show) || null;
     },
-    showOverlay: function () {
-      return (
-        this.show !== null && this.show !== "search" && this.show !== "more"
-      );
-    },
-  },
-  methods: {
-    resetPrompts() {
-      this.$store.commit("closeHovers");
-    },
   },
 };
 </script>

frontend/src/css/base.css

@@ -171,3 +171,30 @@ body.rtl .breadcrumbs a {
 .break-word {
   word-break: break-all;
 }
+
+#file-selection {
+  position: fixed;
+  bottom: 1em;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  background: #fff;
+  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;
+}
+#file-selection .action {
+  border-radius: 50%;
+  width: auto;
+}
+#file-selection > span {
+  display: inline-block;
+  margin-left: 1em;
+  color: #6f6f6f;
+  margin-right: auto;
+}
+#file-selection .action span {
+  display: none;
+}

frontend/src/css/dashboard.css

@@ -311,18 +311,6 @@ body.rtl .card .card-title>*:first-child {
   flex: 1;
 }
 
-.overlay {
-  background-color: rgba(0, 0, 0, 0);
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 9999;
-  animation: .1s show forwards;
-}
-
-
 /* * * * * * * * * * * * * * * *
  *        PROMPT - MOVE        *
  * * * * * * * * * * * * * * * */

frontend/src/css/mobile.css

@@ -25,33 +25,6 @@
     transform-origin: top left;
   }
 
-  #file-selection {
-    position: fixed;
-    bottom: 1em;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    align-items: center;
-    background: #fff;
-    box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
-    width: 95%;
-    max-width: 20em;
-    z-index: 1;
-  }
-  #file-selection .action {
-    border-radius: 50%;
-    width: auto;
-  }
-  #file-selection > span {
-    display: inline-block;
-    margin-left: 1em;
-    color: #6f6f6f;
-    margin-right: auto;
-  }
-  #file-selection .action span {
-    display: none;
-  }
-
   header img {
     display: none;
   }

frontend/src/css/styles.css

@@ -117,20 +117,6 @@ main .spinner .bounce2 {
   background-color: rgba(0, 0, 0, 0.04);
 }
 
-#click-overlay {
-  display: none;
-  position: fixed;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-}
-
-#click-overlay.active {
-  display: block;
-}
-
 .action .counter {
   display: block;
   position: absolute;

frontend/src/views/files/Listing.vue

@@ -3,52 +3,6 @@
     <header-bar showMenu showLogo>
       <search />
       <template #actions>
-        <template >
-          <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"
-            id="copy-button"
-            icon="content_copy"
-            :label="$t('buttons.copyFile')"
-            show="copy"
-          />
-          <action
-            v-if="headerButtons.move"
-            id="move-button"
-            icon="forward"
-            :label="$t('buttons.moveFile')"
-            show="move"
-          />
-          <action
-            v-if="headerButtons.delete"
-            id="delete-button"
-            icon="delete"
-            :label="$t('buttons.delete')"
-            show="delete"
-          />
-          <action
-            v-if="headerButtons.info"
-            icon="info"
-            :label="$t('buttons.info')"
-            show="info" />
-          <action
-            v-if="headerButtons.select"
-            icon="check_circle"
-            :label="$t('buttons.selectMultiple')"
-            @action="toggleMultipleSelection"
-          />
-        </template>
         <action
           :icon="viewIcon"
           :label="$t('buttons.switchView')"
@@ -57,8 +11,14 @@
       </template>
     </header-bar>
 
-    <div v-if="isMobile" id="file-selection">
+    <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"
@@ -363,9 +323,6 @@ export default {
         copy: this.selectedCount > 0 && this.user.perm.create,
       };
     },
-    isMobile() {
-      return this.width <= 736;
-    },
   },
   watch: {
     req: function () {