[MS] Improve file viewer specific components

- replace FileViewerActionBar by new FileControls - replace MsActionBarButton by new FileControlsButton - replace actions prop by slot usage
Scille · Dec 9, 2024 · 2ea1911 · 2ea1911
1 parent c347f27
commit 2ea1911
Show file tree

Hide file tree

Showing 10 changed files with 150 additions and 85 deletions.
diff --git a/client/src/components/viewers/FileControls.vue b/client/src/components/viewers/FileControls.vue
@@ -0,0 +1,23 @@
+<!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
+
+<template>
+  <ion-item-divider class="toolbar ion-margin-bottom secondary file-controls">
+    <slot />
+  </ion-item-divider>
+</template>
+
+<script setup lang="ts">
+import { IonItemDivider } from '@ionic/vue';
+</script>
+
+<style scoped lang="scss">
+.file-controls {
+  padding: 0.5rem 1rem;
+  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);
+  --inner-padding-end: 0;
+}
+</style>
diff --git a/client/src/components/viewers/FileControlsButton.vue b/client/src/components/viewers/FileControlsButton.vue
@@ -0,0 +1,63 @@
+<!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
+
+<template>
+  <ion-button
+    class="file-controls-button button-medium"
+    size="default"
+  >
+    <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"
+    />
+    {{ $msTranslate(label) }}
+  </ion-button>
+</template>
+
+<script setup lang="ts">
+import { MsImage, Translatable } from 'megashark-lib';
+import { IonButton, IonIcon } from '@ionic/vue';
+
+defineProps<{
+  label?: Translatable;
+  icon?: string;
+  image?: string;
+}>();
+</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.25rem;
+  --padding-end: 0.5rem;
+  --padding-bottom: 0.25rem;
+  --padding-start: 0.5rem;
+  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;
+
+  &:hover {
+    scale: 1.1;
+    opacity: 1;
+  }
+
+  &-icon {
+    margin-inline: 0em;
+    margin-right: 0.375rem;
+  }
+}
+</style>
diff --git a/client/src/components/viewers/FileViewerActionBar.vue b/client/src/components/viewers/FileViewerActionBar.vue
diff --git a/client/src/components/viewers/index.ts b/client/src/components/viewers/index.ts
@@ -1,5 +1,6 @@
 // Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS
 
-import FileViewerActionBar from '@/components/viewers/FileViewerActionBar.vue';
+import FileControls from '@/components/viewers/FileControls.vue';
+import FileControlsButton from '@/components/viewers/FileControlsButton.vue';
 
-export { FileViewerActionBar };
+export { FileControls, FileControlsButton };
diff --git a/client/src/theme/global.scss b/client/src/theme/global.scss
@@ -108,21 +108,3 @@ ion-title {
   margin: 0.5rem 0;
   color: var(--parsec-color-light-secondary-soft-text);
 }
-
-// specific style for the file viewers
-.file-viewer-action-bar {
-  .ms-action-bar-button {
-    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;
-
-    &:hover {
-      scale: 1.1;
-      opacity: 1;
-    }
-  }
-}
diff --git a/client/src/views/viewers/AudioViewer.vue b/client/src/views/viewers/AudioViewer.vue
@@ -17,7 +17,7 @@
     </template>
     <!-- Disabled till we add an illustration in the viewer -->
     <!-- <template #controls>
-      <file-viewer-action-bar
+      <file-controls
         :actions="[
           { icon: paused ? play : pause, handler: togglePlayback },
           { icon: getVolumeIcon(), handler: toggleVolume },

diff --git a/client/src/views/viewers/ImageViewer.vue b/client/src/views/viewers/ImageViewer.vue
@@ -9,21 +9,28 @@
       />
     </template>
     <template #controls>
-      <file-viewer-action-bar
-        :actions="[
-          { icon: remove, handler: zoomOut },
-          { icon: resize, handler: resetZoom },
-          { icon: add, handler: zoomIn },
-        ]"
-      />
+      <file-controls>
+        <file-controls-button
+          :icon="remove"
+          @click="zoomOut"
+        />
+        <file-controls-button
+          :icon="resize"
+          @click="resetZoom"
+        />
+        <file-controls-button
+          :icon="add"
+          @click="zoomIn"
+        />
+      </file-controls>
     </template>
   </file-viewer-wrapper>
 </template>
 
 <script setup lang="ts">
 import { add, remove, resize } from 'ionicons/icons';
 import { computed, onMounted, ref } from 'vue';
-import { FileViewerActionBar } from '@/components/viewers';
+import { FileControls, FileControlsButton } from '@/components/viewers';
 import { FileViewerWrapper } from '@/views/viewers';
 import { FileContentInfo, imageViewerUtils } from '@/views/viewers/utils';
 

diff --git a/client/src/views/viewers/PdfViewer.vue b/client/src/views/viewers/PdfViewer.vue
@@ -16,7 +16,26 @@
       </div>
     </template>
     <template #controls>
-      <file-viewer-action-bar :actions="actions" />
+      <file-controls>
+        <file-controls-button
+          :icon="remove"
+          @click="zoomOut"
+        />
+        <file-controls-button
+          :icon="resize"
+          @click="resetZoom"
+        />
+        <file-controls-button
+          :icon="add"
+          @click="zoomIn"
+        />
+        <file-controls-button
+          v-for="(action, key) in actions"
+          :key="key"
+          @click="action.handler"
+          :label="action.text"
+        />
+      </file-controls>
     </template>
   </file-viewer-wrapper>
 </template>
@@ -26,7 +45,7 @@ import { add, remove, resize } from 'ionicons/icons';
 import { inject, onMounted, ref, Ref, shallowRef } from 'vue';
 import { FileContentInfo } from '@/views/viewers/utils';
 import { FileViewerWrapper } from '@/views/viewers';
-import { FileViewerActionBar } from '@/components/viewers';
+import { FileControls, FileControlsButton } from '@/components/viewers';
 import { I18n, MsSpinner, Translatable } from 'megashark-lib';
 import * as pdfjs from 'pdfjs-dist';
 import { Information, InformationLevel, InformationManager, InformationManagerKey, PresentationMode } from '@/services/informationManager';
@@ -50,11 +69,6 @@ onMounted(async () => {
   try {
     pdf.value = await pdfjs.getDocument(props.contentInfo.data).promise;
     await loadPage(1);
-    actions.value = [
-      { icon: remove, handler: zoomOut },
-      { icon: resize, handler: resetZoom },
-      { icon: add, handler: zoomIn },
-    ];
     for (let i = 1; i <= pdf.value.numPages; i++) {
       actions.value.push({ text: I18n.valueAsTranslatable(`Page ${i.toString()}`), handler: () => loadPage(i) });
     }

diff --git a/client/src/views/viewers/SpreadsheetViewer.vue b/client/src/views/viewers/SpreadsheetViewer.vue
@@ -11,7 +11,14 @@
       />
     </template>
     <template #controls>
-      <file-viewer-action-bar :actions="actions" />
+      <file-controls>
+        <file-controls-button
+          v-for="(action, key) in actions"
+          :key="key"
+          @click="action.handler"
+          :label="action.text"
+        />
+      </file-controls>
     </template>
   </file-viewer-wrapper>
 </template>
@@ -20,7 +27,7 @@
 import { MsSpinner, I18n, Translatable } from 'megashark-lib';
 import { onBeforeMount, onMounted, Ref, ref } from 'vue';
 import XLSX from 'xlsx';
-import { FileViewerActionBar } from '@/components/viewers';
+import { FileControls, FileControlsButton } from '@/components/viewers';
 import { FileViewerWrapper } from '@/views/viewers';
 import { FileContentInfo } from '@/views/viewers/utils';
 

diff --git a/client/src/views/viewers/VideoViewer.vue b/client/src/views/viewers/VideoViewer.vue
@@ -20,13 +20,20 @@
       </video>
     </template>
     <template #controls>
-      <file-viewer-action-bar
-        :actions="[
-          { icon: paused ? play : pause, handler: togglePlayback },
-          { icon: getVolumeIcon(), handler: toggleVolume },
-          { icon: scan, handler: toggleFullScreen },
-        ]"
-      />
+      <file-controls>
+        <file-controls-button
+          :icon="paused ? play : pause"
+          @click="togglePlayback"
+        />
+        <file-controls-button
+          :icon="getVolumeIcon()"
+          @click="toggleVolume"
+        />
+        <file-controls-button
+          :icon="scan"
+          @click="toggleFullScreen"
+        />
+      </file-controls>
     </template>
   </file-viewer-wrapper>
 </template>
@@ -35,7 +42,7 @@
 import { play, pause, volumeHigh, volumeLow, volumeMedium, volumeMute, scan } from 'ionicons/icons';
 import { onMounted, ref } from 'vue';
 import { FileContentInfo } from '@/views/viewers/utils';
-import { FileViewerActionBar } from '@/components/viewers';
+import { FileControls, FileControlsButton } from '@/components/viewers';
 import { FileViewerWrapper } from '@/views/viewers';
 
 const props = defineProps<{