[MS] Added an explanation tooltip for sync status in FileDetailsModal

Scille · Oct 25, 2024 · 3e49a33 · 3e49a33
1 parent 64f3638
commit 3e49a33
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/client/src/locales/en-US.json b/client/src/locales/en-US.json
@@ -602,7 +602,11 @@
             "path": "Path",
             "linkCopied": "Copied",
             "failedToCopy": "Failed to copy"
-        }
+        },
+        "fileSyncOk": "This file is synced with the server.",
+        "fileSyncKo": "This file is not synced with the server.",
+        "folderSyncOk": "This folder is synced with the server.",
+        "folderSyncKo": "This folder is not synced with the server."
     },
     "OrganizationPage": {
         "infoPage": {

diff --git a/client/src/locales/fr-FR.json b/client/src/locales/fr-FR.json
@@ -602,7 +602,11 @@
             "path": "Emplacement",
             "linkCopied": "Copié",
             "failedToCopy": "Impossible de copier"
-        }
+        },
+        "fileSyncOk": "Ce fichier est synchronisé avec le serveur.",
+        "fileSyncKo": "Ce fichier n'est pas synchronisé avec le serveur.",
+        "folderSyncOk": "Ce dossier est synchronisé avec le serveur.",
+        "folderSyncKo": "Ce dossier n'est pas synchronisé avec le serveur."
     },
     "OrganizationPage": {
         "infoPage": {

diff --git a/client/src/views/files/FileDetailsModal.vue b/client/src/views/files/FileDetailsModal.vue
@@ -17,6 +17,7 @@
             class="cloud-overlay"
             :class="entry.needSync ? 'cloud-overlay-ko' : 'cloud-overlay-ok'"
             :icon="entry.needSync ? cloudOffline : cloudDone"
+            @click="openSyncInfoPopover($event)"
           />
           <div class="file-info-basic">
             <ion-text class="file-info-basic__name title-h4">
@@ -103,7 +104,7 @@
 
 <script setup lang="ts">
 import { formatFileSize, getFileIcon, shortenFileName } from '@/common/file';
-import { Clipboard, Folder, MsImage, MsModal, I18n } from 'megashark-lib';
+import { Clipboard, Folder, MsImage, MsModal, openTooltip, I18n } from 'megashark-lib';
 import { EntryStat, EntryStatFile, getSystemPath, WorkspaceHandle } from '@/parsec';
 import { IonButton, IonIcon, IonLabel, IonPage, IonText } from '@ionic/vue';
 import { cloudDone, cloudOffline, copy } from 'ionicons/icons';
@@ -122,6 +123,18 @@ const props = defineProps<{
 
 const copyStatus = ref(CopyStatus.NotCopied);
 
+function getSyncString(): string {
+  if (props.entry.isFile()) {
+    return props.entry.needSync ? 'FileDetails.fileSyncKo' : 'FileDetails.fileSyncOk';
+  } else {
+    return props.entry.needSync ? 'FileDetails.folderSyncKo' : 'FileDetails.folderSyncOk';
+  }
+}
+
+async function openSyncInfoPopover(event: Event): Promise<void> {
+  await openTooltip(event, getSyncString());
+}
+
 async function copyPath(): Promise<void> {
   const fullPathResult = await getSystemPath(props.workspaceHandle, props.entry.path);
 
@@ -159,6 +172,7 @@ async function copyPath(): Promise<void> {
   position: relative;
 
   .cloud-overlay {
+    cursor: pointer;
     position: absolute;
     font-size: 1rem;
     background: var(--parsec-color-light-secondary-background);