Implement tooltips and other UI tuning.

cista-front/src/assets/main.css

@@ -87,8 +87,7 @@
   tbody .selection input:checked {
     opacity: 1 !important;
     transform: scale(0.5);
-    top: 0.1rem !important;
+    left: 0;
-    left: -0.3rem !important;
   }
 }
 
@@ -103,7 +102,7 @@ main {
 body {
   background-color: var(--primary-background);
   font-size: 1rem;
-  font-family: 'Roboto', sans-serif;
+  font-family: 'Roboto';
   color: var(--primary-color);
   margin: 0;
 }
@@ -157,8 +156,48 @@ table {
   display: flex;
   flex-direction: column;
 }
+nav {
+  /* Position so that tooltips can appear on top of other positioned elements */
+  position: relative;
+  z-index: 10;
+}
 main {
   height: calc(100svh - 9rem); /* fill almost the rest of the screen after header */
   padding-bottom: 3rem; /* convenience space on the bottom */
   overflow-y: scroll;
 }
+[data-tooltip]:hover:after {
+  z-index: 1000;
+  content: attr(data-tooltip);
+  position: absolute;
+  font-size: 1rem;
+  text-align: center;
+  padding: .5rem 1rem;
+  border-radius: 3rem 0 3rem 0;
+  box-shadow: 0 0 2rem var(--accent-color);
+  transform: translate(calc(1rem + -50%), 150%);
+  background-color: var(--accent-color);
+  color: var(--primary-color);
+  white-space: pre;
+  animation: appearbriefly calc(10 * var(--transition-time)) linear forwards;
+}
+.modified [data-tooltip]:hover:after {
+  transform: translate(calc(1rem + 1ex + -100%), calc(-1.5rem + 100%));
+}
+@keyframes appearbriefly {
+  from {
+    opacity: 0;
+  }
+  30% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}

cista-front/src/components/BreadCrumb.vue

@@ -34,20 +34,20 @@ const props = defineProps<{
 .breadcrumb > a {
   margin: 0 -0.7rem 0 -0.7rem;
   padding: 0;
-  max-width: 8em;
+  max-width: 8rem;
-  font-size: 1.3em;
+  font-size: 1.3rem;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  height: 1em;
+  height: 1.5rem;
   color: var(--breadcrumb-color);
-  padding: 0.3em 1.5em;
+  padding: 0.3rem 1.5rem;
-  clip-path: polygon(0 0, 1em 50%, 0 100%, 100% 100%, 100% 0, 0 0);
+  clip-path: polygon(0 0, 1rem 50%, 0 100%, 100% 100%, 100% 0, 0 0);
   transition: all var(--breadcrumb-transtime);
 }
 .breadcrumb a:first-child {
   margin-left: 0;
-  padding-left: 0;
+  padding-left: .2rem;
   clip-path: none;
 }
 .breadcrumb a:last-child {

cista-front/src/components/FileExplorer.vue

@@ -110,7 +110,7 @@
         </td>
         <td class="modified right">
           <time
-            :datetime="new Date(1000 * doc.mtime).toISOString().replace('.000', '')"
+            :data-tooltip="new Date(1000 * doc.mtime).toISOString().replace('T', '\n').replace('.000Z', ' UTC')"
             >{{ doc.modified }}</time
           >
         </td>
@@ -136,7 +136,7 @@ import type { Document, FolderDocument } from '@/repositories/Document'
 import FileRenameInput from './FileRenameInput.vue'
 import createWebSocket from '@/repositories/WS'
 import { formatSize, formatUnixDate } from '@/utils'
-import { isNavigationFailure, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 
 const props = withDefaults(
   defineProps<{
@@ -352,12 +352,13 @@ thead tr {
 }
 tbody tr {
   position: relative;
+  z-index: auto;
 }
 table thead input[type='checkbox'] {
   position: inherit;
   width: 1rem;
   height: 1rem;
-  margin: 0.5rem;
+  padding: 0.5rem;
 }
 table tbody input[type='checkbox'] {
   width: 2rem;
@@ -413,6 +414,7 @@ table td {
 thead tr {
   background: linear-gradient(to bottom, #eee, #fff 30%, #ddd);
   color: #000;
+  box-shadow: 0 0 .2rem black;
 }
 tbody tr.cursor {
   background: var(--accent-color);
@@ -458,12 +460,13 @@ tbody .selection input {
   opacity: 0.7;
 }
 .file .selection::before {
-  content: '📄 ';
+  content: '📄';
-  font-size: 1.5em;
+  font-size: 1.5rem;
 }
 .folder .selection::before {
-  content: '📁 ';
+  height: 2rem;
-  font-size: 1.5em;
+  content: '📁';
+  font-size: 1.5rem;
 }
 .empty-container {
   padding-top: 3rem;

cista-front/src/components/HeaderMain.vue

@@ -32,6 +32,7 @@ defineExpose({
       <UploadButton />
       <SvgButton
         name="create-folder"
+        data-tooltip="New folder"
         @click="() => documentStore.fileExplorer.newFolder()"
       />
       <slot></slot>
@@ -53,10 +54,11 @@ defineExpose({
 
 <style scoped>
 .buttons {
-  padding: 0 0.5em;
+  padding: 0;
   display: flex;
   align-items: center;
   height: 3.5rem;
+  z-index: 10;
 }
 .buttons > * {
   flex-shrink: 1;

cista-front/src/components/HeaderSelected.vue

@@ -2,11 +2,11 @@
   <template v-if="documentStore.selected.size">
     <div class="smallgap"></div>
     <p class="select-text">{{ documentStore.selected.size }} selected ➤</p>
-    <SvgButton name="download" @click="download" />
+    <SvgButton name="download" data-tooltip="Download" @click="download" />
-    <SvgButton name="copy" @click="op('cp', dst)" />
+    <SvgButton name="copy" data-tooltip="Copy here" @click="op('cp', dst)" />
-    <SvgButton name="paste" @click="op('mv', dst)" />
+    <SvgButton name="paste" data-tooltip="Move here" @click="op('mv', dst)" />
-    <SvgButton name="trash" @click="op('rm')" />
+    <SvgButton name="trash" data-tooltip="Delete ⚠️" @click="op('rm')" />
-    <button @click="documentStore.selected.clear()">❌</button>
+    <button class="action-button unselect" data-tooltip="Unselect all" @click="documentStore.selected.clear()">❌</button>
   </template>
 </template>
 

cista-front/src/components/SvgButton.vue

@@ -15,8 +15,8 @@ const props = defineProps<{
 const icon = defineAsyncComponent(() => import(`@/assets/svg/${props.name}.svg`))
 </script>
 
-<style scoped>
+<style>
-button {
+.action-button {
   background: none;
   border: none;
   color: #ccc;
@@ -26,8 +26,8 @@ button {
   width: 3rem;
   height: 3rem;
 }
-button:hover,
+.action-button:hover,
-button:focus {
+.action-button:focus {
   color: #fff;
   transform: scale(1.1);
 }
@@ -35,8 +35,8 @@ svg {
   fill: #ccc;
   transform: fill 0.2s ease;
 }
-button:hover svg,
+.action-button:hover svg,
-button:focus svg {
+.action-button:focus svg {
   fill: #fff;
 }
 </style>

cista-front/src/components/UploadButton.vue

@@ -91,6 +91,6 @@ async function uploadFileChangeHandler(event: Event) {
       webkitdirectory
     />
   </template>
-  <SvgButton name="add-file" @click="fileUploadButton.click()" />
+  <SvgButton name="add-file" data-tooltip="Upload files" @click="fileUploadButton.click()" />
-  <SvgButton name="add-folder" @click="folderUploadButton.click()" />
+  <SvgButton name="add-folder" data-tooltip="Upload folder" @click="folderUploadButton.click()" />
 </template>