updated

frontend/src/components/Search.vue

@@ -143,10 +143,10 @@
 }
 
 #result-desktop #result-list {
-  width: 100%;
   -webkit-transition: width 0.3s ease 0s;
   transition: width 0.3s ease 0s;
-  overflow: auto;
+  max-width: 100%;
+  width: 30em;
   padding-top: 0em;
   border-width: 1px;
   border-style: solid;
@@ -166,12 +166,15 @@
   -webkit-box-shadow: 0px 2em 50px 10px rgba(0, 0, 0, 0.3);
   box-shadow: 0px 2em 50px 10px rgba(0, 0, 0, 0.3);
   background-color: lightgray;
+  margin-top: 0;
+  padding-top: 1em;
+  overflow: auto;
 }
 
 #result-desktop {
   animation: SlideDown 0.5s forwards;
-  border-radius: 1em;
+  border-radius: 1m;
-
+  overflow: hidden;
 }
 
 #search.active #result-desktop ul li a {
@@ -181,6 +184,11 @@
   margin-right: .3em;
 }
 
+#result-list.active {
+  width: 65em !important;
+  max-width: 85vw !important;
+}
+
 /* Animations */
 @keyframes SlideDown {
   0% {
@@ -196,11 +204,9 @@
 
 /* Search */
 #search {
-  flex-basis: auto;
+  min-width: 35em;
-  width: 100%;
   height: 3em;
-  display: flex;
+  display: block;
-  flex-direction: column;
 }
 
 #search #input {
@@ -256,6 +262,7 @@
   padding-top: 1em;
   overflow: hidden;
   background: white;
+  display: flex;
   top: -4em;
   flex-direction: column;
   align-items: center;
@@ -306,9 +313,7 @@ body.rtl #search #result ul>* {
 #search.ongoing #renew {
   display: block;
 }
-#search.active {
+
-  width: 80%;
-}
 #search.active #input {
   border-bottom-left-radius: 1px;
   background-color: lightgray;

frontend/src/css/mobile.css

@@ -54,26 +54,16 @@
   }
   #search {
     min-width: unset;
-    max-width: 60%
+    max-width: 60%;
-  }
-
-  #search .boxes {
-    text-align: center;
-    width: 100%;
-    padding: 1em;
-    padding-top: 0;
-    max-width: 30em;
-    margin:auto;
-
   }
 
   #search.active {
-    min-width: 100%;
     display: block;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
+    max-width: 100%;
   }
 
   #search.active #input {
@@ -110,15 +100,16 @@
     margin-right: 0.3em;
     user-select: none;
   }
-  #result {
+
-    overflow:scroll
-  }
   #result-list {
     width:100%;
     left: 0;
     top: 4em;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
     overflow: scroll;
-    display: contents;
+    display: flex;
+    flex-direction: column;
   }
 }
 

frontend/src/views/Layout.vue

@@ -3,7 +3,7 @@
     <div v-if="progress" class="progress">
       <div v-bind:style="{ width: this.progress + '%' }"></div>
     </div>
-    <defaultBar v-if="currentView === 'listing'"></defaultBar>
+    <listingBar v-if="currentView === 'listing'"></listingBar>
     <editorBar v-else-if="currentView === 'editor'"></editorBar>
     <editorBar v-else-if="currentView === 'share'"></editorBar>
     <editorBar v-else-if="currentView === 'dashboard'"></editorBar>

frontend/src/views/files/Default.vue

@@ -6,13 +6,8 @@
       :label="$t('buttons.toggleSidebar')"
       @action="toggleSidebar()"
     />
-    <search />
+    <title class="topTitle">{{ req.name }}</title>
-    <action
+
-      class="menu-button"
-      icon="grid_view"
-      :label="$t('buttons.switchView')"
-      @action="switchView"
-    />
   </header-bar>
 </template>
 

frontend/src/views/files/Listing.vue

@@ -1,222 +1,49 @@
 <template>
-  <div>
+  <header-bar>
-    <div v-if="selectedCount > 0" id="file-selection">
+    <action
-      <span >{{ selectedCount }} selected</span>
+      class="menu-button"
-      <template>
+      icon="menu"
-        <action
+      :label="$t('buttons.toggleSidebar')"
-          v-if="headerButtons.select"
+      @action="toggleSidebar()"
-          icon="info"
+    />
-          :label="$t('buttons.info')"
+    <search />
-          show="info"
+    <action
-        />
+      class="menu-button"
-        <action
+      icon="grid_view"
-        v-if="headerButtons.select"
+      :label="$t('buttons.switchView')"
-          icon="check_circle"
+      @action="switchView"
-          :label="$t('buttons.selectMultiple')"
+    />
-          @action="toggleMultipleSelection"
+  </header-bar>
-        />
-        <action
-          v-if="headerButtons.download"
-          icon="file_download"
-          :label="$t('buttons.download')"
-          @action="download"
-          :counter="selectedCount"
-        />
-        <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>
-
-    <div v-if="loading">
-      <h2 class="message delayed">
-        <div class="spinner">
-          <div class="bounce1"></div>
-          <div class="bounce2"></div>
-          <div class="bounce3"></div>
-        </div>
-        <span>{{ $t("files.loading") }}</span>
-      </h2>
-    </div>
-    <template v-else>
-      <div v-if="req.numDirs + req.numFiles == 0">
-        <h2 class="message">
-          <i class="material-icons">sentiment_dissatisfied</i>
-          <span>{{ $t("files.lonely") }}</span>
-        </h2>
-        <input
-          style="display: none"
-          type="file"
-          id="upload-input"
-          @change="uploadInput($event)"
-          multiple
-        />
-        <input
-          style="display: none"
-          type="file"
-          id="upload-folder-input"
-          @change="uploadInput($event)"
-          webkitdirectory
-          multiple
-        />
-      </div>
-      <div v-else id="listing" ref="listing" :class="user.viewMode + ' file-icons'">
-        <div>
-          <div class="item header">
-            <div></div>
-            <div>
-              <p
-                :class="{ active: nameSorted }"
-                class="name"
-                role="button"
-                tabindex="0"
-                @click="sort('name')"
-                :title="$t('files.sortByName')"
-                :aria-label="$t('files.sortByName')"
-              >
-                <span>{{ $t("files.name") }}</span>
-                <i class="material-icons">{{ nameIcon }}</i>
-              </p>
-
-              <p
-                :class="{ active: sizeSorted }"
-                class="size"
-                role="button"
-                tabindex="0"
-                @click="sort('size')"
-                :title="$t('files.sortBySize')"
-                :aria-label="$t('files.sortBySize')"
-              >
-                <span>{{ $t("files.size") }}</span>
-                <i class="material-icons">{{ sizeIcon }}</i>
-              </p>
-              <p
-                :class="{ active: modifiedSorted }"
-                class="modified"
-                role="button"
-                tabindex="0"
-                @click="sort('modified')"
-                :title="$t('files.sortByLastModified')"
-                :aria-label="$t('files.sortByLastModified')"
-              >
-                <span>{{ $t("files.lastModified") }}</span>
-                <i class="material-icons">{{ modifiedIcon }}</i>
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <h2 v-if="req.numDirs > 0">{{ $t("files.folders") }}</h2>
-        <div v-if="req.numDirs > 0">
-          <item
-            v-for="item in dirs"
-            :key="base64(item.name)"
-            v-bind:index="item.index"
-            v-bind:name="item.name"
-            v-bind:isDir="item.isDir"
-            v-bind:url="item.url"
-            v-bind:modified="item.modified"
-            v-bind:type="item.type"
-            v-bind:size="item.size"
-            v-bind:path="item.path"
-          >
-          </item>
-        </div>
-
-        <h2 v-if="req.numFiles > 0">{{ $t("files.files") }}</h2>
-        <div v-if="req.numFiles > 0">
-          <item
-            v-for="item in files"
-            :key="base64(item.name)"
-            v-bind:index="item.index"
-            v-bind:name="item.name"
-            v-bind:isDir="item.isDir"
-            v-bind:url="item.url"
-            v-bind:modified="item.modified"
-            v-bind:type="item.type"
-            v-bind:size="item.size"
-            v-bind:path="item.path"
-          >
-          </item>
-        </div>
-
-        <input
-          style="display: none"
-          type="file"
-          id="upload-input"
-          @change="uploadInput($event)"
-          multiple
-        />
-        <input
-          style="display: none"
-          type="file"
-          id="upload-folder-input"
-          @change="uploadInput($event)"
-          webkitdirectory
-          multiple
-        />
-
-        <div :class="{ active: $store.state.multiple }" id="multiple-selection">
-          <p>{{ $t("files.multipleSelectionEnabled") }}</p>
-          <div
-            @click="$store.commit('multiple', false)"
-            tabindex="0"
-            role="button"
-            :title="$t('files.clear')"
-            :aria-label="$t('files.clear')"
-            class="action"
-          >
-            <i class="material-icons">clear</i>
-          </div>
-        </div>
-      </div>
-    </template>
-  </div>
 </template>
 
+<style>
+.flexbar {
+  display:flex;
+  flex-direction:block;
+  justify-content: space-between;
+}
+</style>
+
 <script>
 import Vue from "vue";
 import { mapState, mapGetters, mapMutations } from "vuex";
 import { users, files as api } from "@/api";
 import { enableExec } from "@/utils/constants";
+import HeaderBar from "@/components/header/HeaderBar.vue";
+import Action from "@/components/header/Action.vue";
 import * as upload from "@/utils/upload";
 import css from "@/utils/css";
 import throttle from "lodash.throttle";
+import Search from "@/components/Search.vue";
 
-import Action from "@/components/header/Action";
+import Item from "@/components/files/ListingItem.vue";
-import Item from "@/components/files/ListingItem";
 
 export default {
   name: "listing",
   components: {
+    HeaderBar,
     Action,
+    Search,
     Item,
   },
   data: function () {
@@ -358,6 +185,20 @@ export default {
     document.removeEventListener("drop", this.drop);
   },
   methods: {
+    action: function () {
+      if (this.show) {
+        this.$store.commit("showHover", this.show);
+      }
+
+      this.$emit("action");
+    },
+    toggleSidebar() {
+      if (this.$store.state.show == "sidebar") {
+        this.$store.commit("closeHovers");
+      } else {
+        this.$store.commit("showHover", "sidebar");
+      }
+    },
     ...mapMutations(["updateUser", "addSelected"]),
     base64: function (name) {
       return window.btoa(unescape(encodeURIComponent(name)));
@@ -428,6 +269,24 @@ export default {
           break;
       }
     },
+    switchView: async function () {
+      this.$store.commit("closeHovers");
+      const modes = {
+        list: "mosaic",
+        mosaic: "mosaic gallery",
+        "mosaic gallery": "list",
+      };
+
+      const data = {
+        id: this.user.id,
+        viewMode: modes[this.user.viewMode] || "list",
+      };
+      //users.update(data, ["viewMode"]).catch(this.$showError);
+      this.$store.commit("updateUser", data);
+
+      //this.setItemWeight();
+      //this.fillWindow();
+    },
     preventDefault(event) {
       // Wrapper around prevent default.
       event.preventDefault();