Smoother UI and various other adjustments.

cista-front/src/components/FileExplorer.vue

@@ -96,7 +96,7 @@
               @focus.stop="cursor = doc"
               >{{ doc.name }}</a
             >
-            <button @click="() => (editing = doc)">🖊️</button>
+            <button v-if="cursor == doc" class="rename-button" @click="() => (editing = doc)">🖊️</button>
           </template>
         </td>
         <td class="modified right">{{ doc.modified }}</td>
@@ -119,7 +119,7 @@ import type { Document, FolderDocument } from '@/repositories/Document'
 import FileRenameInput from './FileRenameInput.vue'
 import createWebSocket from '@/repositories/WS'
 import { formatSize, formatUnixDate } from '@/utils'
-import { useRouter } from 'vue-router'
+import { isNavigationFailure, useRouter } from 'vue-router'
 
 const props = withDefaults(
   defineProps<{
@@ -213,9 +213,18 @@ defineExpose({
       `file-${cursor.value.key}`
     ) as HTMLTableRowElement | null
     // @ts-ignore
-    if (tr) tr.scrollIntoView({ block: 'center', behavior: 'instant' })
+    scrolltr = tr
+    if (!scrolltimer) {
+      scrolltimer = setTimeout(() => {
+        scrolltr.scrollIntoView({ block: 'center', behavior: 'smooth' })
+        scrolltimer = null
+      }, 300)
+    }
   }
 })
+let scrolltimer: any = null
+let scrolltr: any = null
+
 watchEffect(() => {
   if (cursor.value) {
     const a = document.querySelector(
@@ -292,7 +301,10 @@ const allSelected = computed({
     }
   }
 })
-
+watchEffect(() => {
+  if (cursor.value && cursor.value !== editing.value) editing.value = null
+  if (editing.value) cursor.value = editing.value
+})
 const contextMenu = (ev: Event, doc: Document) => {
   console.log('Context menu', ev, doc)
 }
@@ -303,20 +315,29 @@ table {
   width: 100%;
   table-layout: fixed;
 }
+thead tr {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+tbody tr {
+  position: relative;
+}
 table thead input[type='checkbox'] {
   position: inherit;
   width: 1rem;
   height: 1rem;
+  margin: 0.5rem;
 }
 table tbody input[type='checkbox'] {
   width: 2rem;
   height: 2rem;
 }
 table .selection {
-  width: 1rem;
+  width: 2rem;
 }
 table .modified {
-  width: 9rem;
+  width: 10rem;
 }
 table .size {
   width: 4rem;
@@ -338,14 +359,15 @@ table td {
 }
 .name {
   white-space: nowrap;
+  position: relative;
 }
-.name button {
-  visibility: hidden;
+.name .rename-button {
   padding-left: 1rem;
+  position: absolute;
+  right: 0;
+  animation: appear calc(5 * var(--transition-time)) linear;
 }
-.name:hover button {
-  visibility: visible;
-}
+@keyframes appear { from { opacity: 0 } 80% { opacity: 0 } to { opacity: 1 } }
 thead tr {
   background: linear-gradient(to bottom, #eee, #fff 30%, #ddd);
   color: #000;
@@ -379,21 +401,6 @@ tbody tr.cursor {
   transform: rotate(90deg);
   color: #000;
 }
-.more-action {
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-}
-.action-container {
-  display: flex;
-  align-items: center;
-}
-.edit-action {
-  min-width: 5%;
-}
-.carousel-container {
-  height: inherit;
-}
 .name a {
   text-decoration: none;
 }
@@ -405,9 +412,10 @@ tbody .selection input {
   position: absolute;
   opacity: 0;
   left: 0;
+  top: 0;
 }
 .selection input:checked {
-  opacity: 1;
+  opacity: .7;
 }
 .file .selection::before {
   content: '📄 ';

cista-front/src/components/FileRenameInput.vue

@@ -11,7 +11,7 @@
 
 <script setup lang="ts">
 import type { FolderDocument } from '@/repositories/Document'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, nextTick } from 'vue'
 
 const input = ref<HTMLInputElement | null>(null)
 const name = ref('')
@@ -19,8 +19,10 @@ const name = ref('')
 onMounted(() => {
   name.value = props.doc.name
   const ext = name.value.lastIndexOf('.')
-  input.value!.focus()
-  input.value!.setSelectionRange(0, ext > 0 ? ext : name.value.length)
+  nextTick(() => {
+    input.value!.focus()
+    input.value!.setSelectionRange(0, ext > 0 ? ext : name.value.length)
+  })
 })
 
 const props = defineProps<{
@@ -38,12 +40,14 @@ const apply = () => {
 
 <style>
 input#FileRenameInput {
-  color: #8f8;
+  color: var(--primary-color);
+  background: var(--primary-background);
   border: 0;
-  padding: 0;
-  width: 90%;
+  border-radius: .3rem;
+  padding: .4rem;
+  margin: -.4rem;
+  width: 100%;
   outline: none;
-  background: transparent;
   font: inherit;
 }
 </style>