diff --git a/web/satellite/src/components/browser/FileEntry.vue b/web/satellite/src/components/browser/FileEntry.vue index 02ed7c73d..98005430c 100644 --- a/web/satellite/src/components/browser/FileEntry.vue +++ b/web/satellite/src/components/browser/FileEntry.vue @@ -124,6 +124,7 @@ import { BrowserObject, useObjectBrowserStore } from '@/store/modules/objectBrow import { useAppStore } from '@/store/modules/appStore'; import { useConfigStore } from '@/store/modules/configStore'; import { AnalyticsHttpApi } from '@/api/analytics'; +import { ObjectType } from '@/utils/objectIcon'; import TableItem from '@/components/common/TableItem.vue'; @@ -154,32 +155,7 @@ const deleteConfirmation = ref(false); /** * Return the type of the file. */ -const fileType = computed((): string => { - const image = /(\.jpg|\.jpeg|\.png|\.gif)$/i; - const video = /(\.mp4|\.mkv|\.mov)$/i; - const audio = /(\.mp3|\.aac|\.wav|\.m4a)$/i; - const text = /(\.txt|\.docx|\.doc|\.pages)$/i; - const pdf = /(\.pdf)$/i; - const archive = /(\.zip|\.tar.gz|\.7z|\.rar)$/i; - const spreadsheet = /(\.xls|\.numbers|\.csv|\.xlsx|\.tsv)$/i; - - if (image.exec(props.file.Key)) { - return 'image'; - } else if (video.exec(props.file.Key)) { - return 'video'; - } else if (audio.exec(props.file.Key)) { - return 'audio'; - } else if (text.exec(props.file.Key)) { - return 'text'; - } else if (pdf.exec(props.file.Key)) { - return 'pdf'; - } else if (archive.exec(props.file.Key)) { - return 'archive'; - } else if (spreadsheet.exec(props.file.Key)) { - return 'spreadsheet'; - } - return 'file'; -}); +const fileType = computed((): string => ObjectType.findType(props.file.Key)); /** * Return the size of the file formatted. diff --git a/web/satellite/src/components/common/TableItem.vue b/web/satellite/src/components/common/TableItem.vue index 00d6d7f51..d3932f584 100644 --- a/web/satellite/src/components/common/TableItem.vue +++ b/web/satellite/src/components/common/TableItem.vue @@ -44,26 +44,13 @@ import { computed } from 'vue'; import { ProjectRole } from '@/types/projectMembers'; +import { ObjectType } from '@/utils/objectIcon'; import VTableCheckbox from '@/components/common/VTableCheckbox.vue'; import BucketGuide from '@/components/objects/BucketGuide.vue'; import MiddleTruncate from '@/components/browser/MiddleTruncate.vue'; import ProjectOwnershipTag from '@/components/project/ProjectOwnershipTag.vue'; -import TableLockedIcon from '@/../static/images/browser/tableLocked.svg'; -import ColorFolderIcon from '@/../static/images/objects/colorFolder.svg'; -import ColorBucketIcon from '@/../static/images/objects/colorBucket.svg'; -import FileIcon from '@/../static/images/objects/file.svg'; -import AudioIcon from '@/../static/images/objects/audio.svg'; -import VideoIcon from '@/../static/images/objects/video.svg'; -import ChevronLeftIcon from '@/../static/images/objects/chevronLeft.svg'; -import GraphIcon from '@/../static/images/objects/graph.svg'; -import PdfIcon from '@/../static/images/objects/pdf.svg'; -import PictureIcon from '@/../static/images/objects/picture.svg'; -import TxtIcon from '@/../static/images/objects/txt.svg'; -import ZipIcon from '@/../static/images/objects/zip.svg'; -import ProjectIcon from '@/../static/images/navigation/project.svg'; - const props = withDefaults(defineProps<{ selectDisabled?: boolean; selectHidden?: boolean; @@ -91,23 +78,7 @@ const props = withDefaults(defineProps<{ const emit = defineEmits(['selectClicked']); -const icons = new Map([ - ['locked', TableLockedIcon], - ['bucket', ColorBucketIcon], - ['folder', ColorFolderIcon], - ['file', FileIcon], - ['audio', AudioIcon], - ['video', VideoIcon], - ['back', ChevronLeftIcon], - ['spreadsheet', GraphIcon], - ['pdf', PdfIcon], - ['image', PictureIcon], - ['text', TxtIcon], - ['archive', ZipIcon], - ['project', ProjectIcon], -]); - -const icon = computed(() => icons.get(props.itemType.toLowerCase())); +const icon = computed((): string => ObjectType.findIcon(props.itemType)); const customIconClasses = computed(() => { const classes = {}; diff --git a/web/satellite/src/components/modals/objectUpload/ObjectsUploadingModal.vue b/web/satellite/src/components/modals/objectUpload/ObjectsUploadingModal.vue index 47860fcc8..a824f7c42 100644 --- a/web/satellite/src/components/modals/objectUpload/ObjectsUploadingModal.vue +++ b/web/satellite/src/components/modals/objectUpload/ObjectsUploadingModal.vue @@ -6,7 +6,10 @@
-

{{ statusLabel }}

+
+ +

{{ statusLabel }}

+

{{ remainingTimeString }}

@@ -37,6 +40,7 @@ import UploadItem from '@/components/modals/objectUpload/UploadItem.vue'; import ArrowIcon from '@/../static/images/modals/objectUpload/arrow.svg'; import CloseIcon from '@/../static/images/modals/objectUpload/close.svg'; +import CompleteIcon from '@/../static/images/modals/objectUpload/complete.svg'; const obStore = useObjectBrowserStore(); const appStore = useAppStore(); @@ -187,6 +191,7 @@ onMounted(() => { max-width: 500px; border-radius: 8px; font-family: 'font_regular', sans-serif; + filter: drop-shadow(0 7px 20px rgb(0 0 0 / 15%)); @media screen and (width <= 650px) { max-width: unset; @@ -217,11 +222,20 @@ onMounted(() => { align-items: center; justify-content: space-between; - &__title { - font-family: 'font_medium', sans-serif; - font-size: 14px; - line-height: 20px; - color: var(--c-white); + &__cont { + display: flex; + align-items: center; + + svg { + margin-right: 11px; + } + + &__title { + font-family: 'font_medium', sans-serif; + font-size: 14px; + line-height: 20px; + color: var(--c-white); + } } &__remaining { diff --git a/web/satellite/src/components/modals/objectUpload/UploadItem.vue b/web/satellite/src/components/modals/objectUpload/UploadItem.vue index c20e4576c..782fa8fef 100644 --- a/web/satellite/src/components/modals/objectUpload/UploadItem.vue +++ b/web/satellite/src/components/modals/objectUpload/UploadItem.vue @@ -5,7 +5,7 @@
-

{{ extension }}

+

{{ item.Key }}

@@ -57,6 +57,7 @@ import { import { AnalyticsHttpApi } from '@/api/analytics'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { useNotify } from '@/utils/hooks'; +import { ObjectType } from '@/utils/objectIcon'; import VInfo from '@/components/common/VInfo.vue'; @@ -75,11 +76,9 @@ const props = defineProps<{ }>(); /** - * Returns file's extension. + * Returns appropriate icon for provided object. */ -const extension = computed((): string => { - return props.item.Key.split('.').pop()?.substring(0, 3).toUpperCase() || 'EXT'; -}); +const icon = computed((): string => ObjectType.findIcon(ObjectType.findType(props.item.Key))); /** * Returns progress bar style. @@ -144,7 +143,8 @@ function cancelUpload(): void { min-width: 32px; width: 32px; height: 32px; - background-color: var(--c-green-6); + background-color: var(--c-white); + border: 1px solid var(--c-grey-2); border-radius: 8px; margin-right: 12px; display: flex; @@ -154,13 +154,6 @@ function cancelUpload(): void { @media screen and (width <= 550px) { display: none; } - - &__label { - font-family: 'font_bold', sans-serif; - font-size: 9px; - line-height: 18px; - color: var(--c-green-5); - } } &__name { diff --git a/web/satellite/src/utils/objectIcon.ts b/web/satellite/src/utils/objectIcon.ts new file mode 100644 index 000000000..1292e3bfc --- /dev/null +++ b/web/satellite/src/utils/objectIcon.ts @@ -0,0 +1,68 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + +import TableLockedIcon from '@/../static/images/browser/tableLocked.svg'; +import ColorBucketIcon from '@/../static/images/objects/colorBucket.svg'; +import ColorFolderIcon from '@/../static/images/objects/colorFolder.svg'; +import FileIcon from '@/../static/images/objects/file.svg'; +import AudioIcon from '@/../static/images/objects/audio.svg'; +import VideoIcon from '@/../static/images/objects/video.svg'; +import ChevronLeftIcon from '@/../static/images/objects/chevronLeft.svg'; +import GraphIcon from '@/../static/images/objects/graph.svg'; +import PdfIcon from '@/../static/images/objects/pdf.svg'; +import PictureIcon from '@/../static/images/objects/picture.svg'; +import TxtIcon from '@/../static/images/objects/txt.svg'; +import ZipIcon from '@/../static/images/objects/zip.svg'; +import ProjectIcon from '@/../static/images/navigation/project.svg'; + +/** + * Represents functionality to find object's type and appropriate icon for this type. + */ +export class ObjectType { + private static icons = new Map([ + ['locked', TableLockedIcon], + ['bucket', ColorBucketIcon], + ['folder', ColorFolderIcon], + ['file', FileIcon], + ['audio', AudioIcon], + ['video', VideoIcon], + ['back', ChevronLeftIcon], + ['spreadsheet', GraphIcon], + ['pdf', PdfIcon], + ['image', PictureIcon], + ['text', TxtIcon], + ['archive', ZipIcon], + ['project', ProjectIcon], + ]); + + static findIcon(type: string): string { + return this.icons.get(type.toLowerCase()) || ''; + } + + static findType(object: string): string { + const image = /(\.jpg|\.jpeg|\.png|\.gif)$/i; + const video = /(\.mp4|\.mkv|\.mov)$/i; + const audio = /(\.mp3|\.aac|\.wav|\.m4a)$/i; + const text = /(\.txt|\.docx|\.doc|\.pages)$/i; + const pdf = /(\.pdf)$/i; + const archive = /(\.zip|\.tar.gz|\.7z|\.rar)$/i; + const spreadsheet = /(\.xls|\.numbers|\.csv|\.xlsx|\.tsv)$/i; + + if (image.exec(object)) { + return 'image'; + } else if (video.exec(object)) { + return 'video'; + } else if (audio.exec(object)) { + return 'audio'; + } else if (text.exec(object)) { + return 'text'; + } else if (pdf.exec(object)) { + return 'pdf'; + } else if (archive.exec(object)) { + return 'archive'; + } else if (spreadsheet.exec(object)) { + return 'spreadsheet'; + } + return 'file'; + } +} diff --git a/web/satellite/static/images/modals/objectUpload/complete.svg b/web/satellite/static/images/modals/objectUpload/complete.svg new file mode 100644 index 000000000..7d45c1556 --- /dev/null +++ b/web/satellite/static/images/modals/objectUpload/complete.svg @@ -0,0 +1,4 @@ + + + +