frontend/src/components/FileExplorer.vue

@@ -3,34 +3,11 @@
     <thead>
       <tr>
         <th class="selection">
-          <input
+          <input type="checkbox" tabindex="-1" v-model="allSelected" :indeterminate="selectionIndeterminate">
-            type="checkbox"
-            tabindex="-1"
-            v-model="allSelected"
-            :indeterminate="selectionIndeterminate"
-          />
-        </th>
-        <th
-          class="sortcolumn"
-          :class="{ sortactive: sort === 'name' }"
-          @click="toggleSort('name')"
-        >
-          Name
-        </th>
-        <th
-          class="sortcolumn modified right"
-          :class="{ sortactive: sort === 'modified' }"
-          @click="toggleSort('modified')"
-        >
-          Modified
-        </th>
-        <th
-          class="sortcolumn size right"
-          :class="{ sortactive: sort === 'size' }"
-          @click="toggleSort('size')"
-        >
-          Size
         </th>
+        <th class="sortcolumn" :class="{ sortactive: sort === 'name' }" @click="toggleSort('name')">Name</th>
+        <th class="sortcolumn modified right" :class="{ sortactive: sort === 'modified' }" @click="toggleSort('modified')">Modified</th>
+        <th class="sortcolumn size right" :class="{ sortactive: sort === 'size' }" @click="toggleSort('size')">Size</th>
         <th class="menu"></th>
       </tr>
     </thead>
@@ -38,23 +15,13 @@
       <tr v-if="editing?.key === 'new'" class="folder">
         <td class="selection"></td>
         <td class="name">
-          <FileRenameInput
+          <FileRenameInput :doc="editing" :rename="mkdir" :exit="() => {editing = null}" />
-            :doc="editing"
-            :rename="mkdir"
-            :exit="
-              () => {
-                editing = null
-              }
-            "
-          />
         </td>
         <FileModified :doc=editing />
         <FileSize :doc=editing />
         <td class="menu"></td>
       </tr>
-      <template
+      <template v-for="(doc, index) in sortedDocuments" :key="doc.key">
-        v-for="(doc, index) in sortedDocuments"
-        :key="doc.key">
         <tr class="folder-change" v-if="showFolderBreadcrumb(index)">
           <th colspan="5"><BreadCrumb :path="doc.loc ? doc.loc.split('/') : []" /></th>
         </tr>
@@ -78,16 +45,9 @@
             />
           </td>
           <td class="name">
-            <template v-if="editing === doc"
+            <template v-if="editing === doc">
-              ><FileRenameInput
+              <FileRenameInput :doc="doc" :rename="rename" :exit="() => {editing = null}" />
-                :doc="doc"
+            </template>
-                :rename="rename"
-                :exit="
-                  () => {
-                    editing = null
-                  }
-                "
-            /></template>
             <template v-else>
               <a
                 :href="url_for(doc)"
@@ -98,24 +58,13 @@
                 @keyup.right.stop="ev => { if (doc.dir) (ev.target as HTMLElement).click() }"
                 >{{ doc.name }}</a
               >
-              <button
+              <button v-if="cursor == doc" class="rename-button" @click="() => (editing = doc)">🖊️</button>
-                v-if="cursor == doc"
-                class="rename-button"
-                @click="() => (editing = doc)"
-              >
-                🖊️
-              </button>
             </template>
           </td>
           <FileModified :doc=doc />
           <FileSize :doc=doc />
           <td class="menu">
-            <button
+            <button tabindex="-1" @click.stop="contextMenu($event, doc)">⋮</button>
-              tabindex="-1"
-              @click.stop="contextMenu($event, doc)"
-            >
-              ⋮
-            </button>
           </td>
         </tr>
       </template>