[MS] File viewer style

client/package.json

@@ -52,7 +52,7 @@
         "docx-preview": "^0.3.3",
         "file-type": "^19.6.0",
         "luxon": "^3.4.4",
-        "megashark-lib": "git+https://github.com/Scille/megashark-lib.git#2d7a87d9ed89a12fd8f7ab43ccf37238d35ef954",
+        "megashark-lib": "git+https://github.com/Scille/megashark-lib.git#4295321ad104962ced72a10d6cb85bc4e749e59f",
         "monaco-editor": "^0.52.0",
         "native-file-system-adapter": "^3.0.1",
         "pdfjs-dist": "^4.8.69",

client/src/components/files/index.ts

@@ -27,7 +27,7 @@ export type {
   WorkspaceHistoryFileModel,
   WorkspaceHistoryFolderModel,
 } from '@/components/files/types';
-export { getFilesFromDrop, selectFolder } from '@/components/files/utils';
+export { copyPathLinkToClipboard, getFilesFromDrop, selectFolder } from '@/components/files/utils';
 export type { FileImportTuple, FolderSelectionOptions } from '@/components/files/utils';
 export {
   FileAggregateDoneItem,

client/src/components/files/utils.ts

@@ -1,9 +1,10 @@
 // Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS
 
 import FolderSelectionModal from '@/components/files/FolderSelectionModal.vue';
-import { FsPath, Path, WorkspaceHandle } from '@/parsec';
+import { FsPath, Path, WorkspaceHandle, getPathLink } from '@/parsec';
+import { Information, InformationLevel, InformationManager, PresentationMode } from '@/services/informationManager';
 import { modalController } from '@ionic/vue';
-import { MsModalResult, Translatable } from 'megashark-lib';
+import { Clipboard, MsModalResult, Translatable } from 'megashark-lib';
 
 export interface FileImportTuple {
   file: File;
@@ -20,6 +21,47 @@ export interface FolderSelectionOptions {
   okButtonLabel?: Translatable;
 }
 
+export async function copyPathLinkToClipboard(
+  path: FsPath,
+  workspaceHandle: WorkspaceHandle,
+  informationManager: InformationManager,
+): Promise<void> {
+  if (!workspaceHandle) {
+    window.electronAPI.log('error', 'Failed to retrieve workspace handle');
+    return;
+  }
+
+  const result = await getPathLink(workspaceHandle, path);
+
+  if (result.ok) {
+    if (!(await Clipboard.writeText(result.value))) {
+      informationManager.present(
+        new Information({
+          message: 'FoldersPage.linkNotCopiedToClipboard',
+          level: InformationLevel.Error,
+        }),
+        PresentationMode.Toast,
+      );
+    } else {
+      informationManager.present(
+        new Information({
+          message: 'FoldersPage.linkCopiedToClipboard',
+          level: InformationLevel.Info,
+        }),
+        PresentationMode.Toast,
+      );
+    }
+  } else {
+    informationManager.present(
+      new Information({
+        message: 'FoldersPage.getLinkError',
+        level: InformationLevel.Error,
+      }),
+      PresentationMode.Toast,
+    );
+  }
+}
+
 export async function getFilesFromDrop(event: DragEvent, path: FsPath): Promise<FileImportTuple[]> {
   if (event.dataTransfer) {
     const entries: FileSystemEntry[] = [];

client/src/components/viewers/FileViewerBackground.vue

@@ -23,12 +23,19 @@ defineProps<{
 .file-viewer-background {
   height: 100%;
   width: 100%;
+  max-height: 37.5rem;
+  max-width: 75rem;
+  padding: 2rem;
+  display: flex;
 
   img {
     height: 100%;
+    margin: auto;
     width: 100%;
-    object-fit: cover;
     border-radius: var(--parsec-radius-12);
+    overflow: hidden;
+    box-shadow: var(--parsec-shadow-light);
+    object-fit: cover;
   }
 
   &-icon {
@@ -37,8 +44,8 @@ defineProps<{
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 7vw;
-    max-width: 8rem;
-    max-height: 8rem;
+    max-width: 5rem;
+    max-height: 5rem;
     min-width: 3rem;
     min-height: 3rem;
     padding: 1vw;

client/src/components/viewers/controls/FileControls.vue

@@ -10,23 +10,33 @@
 
 <style scoped lang="scss">
 .file-controls {
-  padding: 0.5rem 1rem;
+  margin: 0 1rem 1rem 1rem;
+  padding: 0.75rem 1.5rem;
   display: flex;
-  gap: 0.5em;
-  width: fit-content;
-  background: var(--parsec-color-light-primary-100);
-  border-radius: 5em;
-  box-shadow: var(--parsec-shadow-light);
-  border-bottom: 1px solid var(--parsec-color-light-secondary-medium);
+  justify-content: center;
+  align-items: center;
+  gap: 1.5rem;
+  width: 100%;
+  background: var(--parsec-color-light-secondary-white);
+  border-radius: var(--parsec-radius-8);
+  box-shadow: var(--parsec-shadow-soft);
   --inner-padding-end: 0;
+  border-top: 1px solid var(--parsec-color-light-secondary-medium);
+  position: relative;
+  z-index: 200;
+  min-height: 3.75rem;
+  transition: all 0.2s ease-in-out;
 
   & > *:not(:last-child)::after {
     content: '';
     display: block;
     width: 2px;
-    height: 2em;
-    background: var(--parsec-color-light-primary-200);
-    opacity: 0.5;
+    height: 1rem;
+    background: var(--parsec-color-light-secondary-disabled);
+  }
+
+  &:hover {
+    box-shadow: var(--parsec-shadow-light);
   }
 }
 </style>

client/src/components/viewers/controls/FileControlsButton.vue

@@ -2,26 +2,28 @@
 
 <template>
   <ion-button
-    class="file-controls-button button-medium"
-    size="default"
+    class="file-controls-button-container button-medium"
+    fill="clear"
   >
-    <ion-icon
-      class="file-controls-button-icon"
-      v-if="icon"
-      slot="start"
-      :icon="icon"
-    />
-    <ms-image
-      class="file-controls-button-icon"
-      v-if="!icon && image"
-      :image="image"
-    />
-    <span
-      class="file-controls-button-label"
-      v-if="label"
-    >
-      {{ $msTranslate(label) }}
-    </span>
+    <div class="file-controls-button">
+      <ion-icon
+        class="file-controls-button-icon"
+        v-if="icon"
+        slot="start"
+        :icon="icon"
+      />
+      <ms-image
+        class="file-controls-button-icon"
+        v-if="!icon && image"
+        :image="image"
+      />
+      <span
+        class="file-controls-button-label"
+        v-if="label"
+      >
+        {{ $msTranslate(label) }}
+      </span>
+    </div>
   </ion-button>
 </template>
 
@@ -37,36 +39,59 @@ defineProps<{
 </script>
 
 <style lang="scss" scoped>
-.file-controls-button {
-  --background: none !important;
-  --background-hover: none !important;
-  margin-inline: 0px;
-  margin-top: 0px;
-  margin-bottom: 0px;
-  --padding-top: 0;
-  --padding-end: 0;
-  --padding-bottom: 0;
-  --padding-start: 0;
-  height: 3em;
-  width: fit-content;
-  border-radius: 100%;
-  color: var(--parsec-color-light-primary-600);
-  opacity: 0.6;
-  scale: 1;
+.file-controls-button-container {
+  --background: none;
+  --background-hover: none;
+  border-radius: var(--parsec-radius-6);
+  min-height: 0;
   transition: all 0.2s ease-in-out;
+  height: fit-content;
+
+  &::part(native) {
+    margin: 0;
+    padding: 0;
+  }
+
+  .file-controls-button {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    height: 100%;
+    width: 100%;
+    color: var(--parsec-color-light-secondary-text);
+    padding: 0.25rem;
+
+    &-icon {
+      font-size: 1.25rem;
+      width: 1.25rem;
+      height: 1.25rem;
+      display: flex;
+      flex-grow: 1;
+      --fill-color: var(--parsec-color-light-secondary-text);
+    }
+  }
 
   &.button-disabled {
     opacity: 0.3;
   }
 
   &:hover {
-    scale: 1.1;
-    opacity: 1;
+    background: var(--parsec-color-light-secondary-background);
+    box-shadow: var(--parsec-shadow-soft);
+    color: var(--parsec-color-light-primary-400);
+
+    .file-controls-button-icon {
+      color: var(--parsec-color-light-primary-400);
+      --fill-color: var(--parsec-color-light-primary-400);
+    }
+
+    .file-controls-button-label {
+      color: var(--parsec-color-light-primary-400);
+    }
   }
 
-  &-icon,
-  &-label {
-    margin-inline: 0.625rem;
+  &:active {
+    box-shadow: none;
   }
 }
 </style>

client/src/components/viewers/controls/FileControlsDropdown.vue

@@ -1,37 +1,20 @@
 <!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
 
 <template>
-  <ion-button
-    class="file-controls-dropdown button-medium"
-    size="default"
+  <file-controls-button
     @click="openPopover($event)"
-  >
-    <span
-      class="file-controls-dropdown-label"
-      v-if="title"
-    >
-      {{ $msTranslate(title) }}
-    </span>
-    <ion-icon
-      class="file-controls-dropdown-icon"
-      :class="{ 'popover-is-open': isPopoverOpen }"
-      v-if="icon"
-      :icon="icon"
-    />
-    <ms-image
-      class="file-controls-dropdown-icon"
-      :class="{ 'popover-is-open': isPopoverOpen }"
-      v-if="!icon && image"
-      :image="image"
-    />
-  </ion-button>
+    class="file-controls-dropdown"
+    :class="{ 'dropdown-active': isPopoverOpen }"
+    :icon="icon || image"
+    :label="title"
+  />
 </template>
 
 <script setup lang="ts">
-import { FileControlsDropdownPopover, FileControlsDropdownItemContent } from '@/components/viewers';
+import { FileControlsDropdownPopover, FileControlsDropdownItemContent, FileControlsButton } from '@/components/viewers';
 import { Ref, ref } from 'vue';
-import { IonButton, IonIcon, popoverController } from '@ionic/vue';
-import { MsImage, Translatable } from 'megashark-lib';
+import { popoverController } from '@ionic/vue';
+import { Translatable } from 'megashark-lib';
 
 const isPopoverOpen = ref(false);
 const selectedOption: Ref<FileControlsDropdownItemContent | undefined> = ref(undefined);
@@ -72,46 +55,4 @@ async function onDidDismissPopover(popover: any): Promise<void> {
 }
 </script>
 
-<style lang="scss" scoped>
-ion-icon {
-  transition: transform ease-out 300ms;
-  font-size: 1.125rem;
-
-  &.popover-is-open {
-    transform: rotate(180deg);
-  }
-}
-
-.file-controls-dropdown {
-  --background: none !important;
-  --background-hover: none !important;
-  margin-inline: 0px;
-  margin-top: 0px;
-  margin-bottom: 0px;
-  --padding-top: 0;
-  --padding-end: 0;
-  --padding-bottom: 0;
-  --padding-start: 0;
-  height: 3em;
-  width: fit-content;
-  border-radius: 100%;
-  color: var(--parsec-color-light-primary-600);
-  opacity: 0.6;
-  scale: 1;
-  transition: all 0.2s ease-in-out;
-
-  &.button-disabled {
-    opacity: 0.3;
-  }
-
-  &:hover {
-    scale: 1.1;
-    opacity: 1;
-  }
-
-  &-icon,
-  &-label {
-    margin-inline: 0.625rem;
-  }
-}
-</style>
+<style lang="scss" scoped></style>