Skip to content

Commit

Permalink
web/satellite/vuetify-poc: show file previews
Browse files Browse the repository at this point in the history 
This change enables files to be previewed.

Issue: #6108

Change-Id: I3045950281822620de96b86e0180eb0d24e2d629
  • Loading branch information
@wilfred-asomanii
wilfred-asomanii committed Sep 5, 2023
1 parent e2006d8 commit 2d18f43
Show file tree
Hide file tree
Showing 3 changed files with 486 additions and 121 deletions.
124 changes: 3 additions & 121 deletions web/satellite/vuetify-poc/src/components/BrowserTableComponent.vue
View file
Expand Up @@ -63,112 +63,7 @@
</template>
</v-data-table-server>

<v-dialog v-model="previewDialog" transition="fade-transition" class="preview-dialog" fullscreen theme="dark">
<v-card class="preview-card">
<v-carousel hide-delimiters show-arrows="hover" height="100vh">
<template #prev="{ props: slotProps }">
<v-btn
color="default"
class="rounded-circle"
icon
@click="slotProps.onClick"
>
<svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_24843_332342)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.30725 8.23141C0.276805 7.67914 0.528501 7.04398 1.03164 6.54085L6.84563 0.726856C7.64837 -0.0758889 8.78719 -0.238577 9.38925 0.363481C9.99131 0.96554 9.82862 2.10436 9.02587 2.9071L3.71149 8.22148L9.02681 13.5368C9.82955 14.3395 9.99224 15.4784 9.39018 16.0804C8.78812 16.6825 7.6493 16.5198 6.84656 15.717L1.03257 9.90305C0.535173 9.40565 0.283513 8.77923 0.30725 8.23141Z" fill="white" />
</g>
<defs>
<clipPath id="clip0_24843_332342">
<rect width="17.0002" height="10" fill="white" transform="translate(10) rotate(90)" />
</clipPath>
</defs>
</svg>
</v-btn>
</template>
<template #next="{ props: slotProps }">
<v-btn
color="default"
class="rounded-circle"
icon
@click="slotProps.onClick"
>
<svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_24843_332338)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.69263 8.23141C9.72307 7.67914 9.47138 7.04398 8.96824 6.54085L3.15425 0.726856C2.35151 -0.0758889 1.21269 -0.238577 0.61063 0.363481C0.00857207 0.96554 0.17126 2.10436 0.974005 2.9071L6.28838 8.22148L0.973072 13.5368C0.170328 14.3395 0.00763934 15.4784 0.609698 16.0804C1.21176 16.6825 2.35057 16.5198 3.15332 15.717L8.96731 9.90305C9.46471 9.40565 9.71637 8.77923 9.69263 8.23141Z" fill="white" />
</g>
<defs>
<clipPath id="clip0_24843_332338">
<rect width="17.0002" height="10" fill="white" transform="matrix(4.37114e-08 1 1 -4.37114e-08 0 0)" />
</clipPath>
</defs>
</svg>
</v-btn>
</template>
<v-toolbar
color="rgba(0, 0, 0, 0.3)"
theme="dark"
>
<!-- <v-img src="../assets/logo-white.svg" height="30" width="160" class="ml-3" alt="Storj Logo"/> -->
<v-toolbar-title>
Image.jpg
</v-toolbar-title>
<template #append>
<v-btn icon size="small" color="white">
<img src="@poc/assets/icon-download.svg" width="22" alt="Download">
<v-tooltip
activator="parent"
location="bottom"
>
Download
</v-tooltip>
</v-btn>
<v-btn icon size="small" color="white">
<icon-share size="22" />
<v-tooltip
activator="parent"
location="bottom"
>
Share
</v-tooltip>
</v-btn>
<v-btn icon size="small" color="white">
<img src="@poc/assets/icon-geo-distribution.svg" width="22" alt="Geographic Distribution">
<v-tooltip
activator="parent"
location="bottom"
>
Geographic Distribution
</v-tooltip>
</v-btn>
<v-btn icon size="small" color="white">
<img src="@poc/assets/icon-more.svg" width="22" alt="More">
<v-tooltip
activator="parent"
location="bottom"
>
More
</v-tooltip>
</v-btn>
<v-btn icon size="small" color="white" @click="previewDialog = false">
<img src="@poc/assets/icon-close.svg" width="18" alt="Close">
<v-tooltip
activator="parent"
location="bottom"
>
Close
</v-tooltip>
</v-btn>
<!-- <v-btn icon="$close" color="white" size="small" @click="previewDialog = false"></v-btn> -->
</template>
</v-toolbar>
<v-carousel-item
v-for="(item,i) in items"
:key="i"
:src="item.src"
/>
</v-carousel>
</v-card>
</v-dialog>
<file-preview-dialog v-model="previewDialog" />
</v-card>
</template>

Expand All @@ -178,13 +73,7 @@ import { useRouter } from 'vue-router';
import {
VCard,
VTextField,
VDialog,
VCarousel,
VBtn,
VToolbar,
VToolbarTitle,
VTooltip,
VCarouselItem,
} from 'vuetify/components';
import { VDataTableServer } from 'vuetify/labs/components';
Expand All @@ -196,8 +85,8 @@ import { Size } from '@/utils/bytesSize';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import IconShare from '@poc/components/icons/IconShare.vue';
import BrowserRowActions from '@poc/components/BrowserRowActions.vue';
import FilePreviewDialog from '@poc/components/dialogs/FilePreviewDialog.vue';
import folderIcon from '@poc/assets/icon-folder-tonal.svg';
import pdfIcon from '@poc/assets/icon-pdf-tonal.svg';
Expand Down Expand Up @@ -255,12 +144,6 @@ const selected = ref([]);
const previewDialog = ref<boolean>(false);
const options = ref<TableOptions>();
const items = [
{ src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg' },
{ src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg' },
{ src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg' },
{ src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg' },
];
const sortBy = [{ key: 'name', order: 'asc' }];
const headers = [
{
Expand Down Expand Up @@ -413,8 +296,7 @@ function onFileClick(file: BrowserObject): void {
return;
}
// Implement logic to fetch the file content for preview or generate a URL for preview
// Then, open the preview dialog
obStore.setObjectPathForModal(obStore.state.path + file.Key);
previewDialog.value = true;
}
Expand Down

0 comments on commit 2d18f43

Please sign in to comment.