{{ fileAction.ext }}
@@ -110,7 +102,7 @@
appearance="raw"
@click="createNewShortcutAction"
>
-
+
@@ -221,14 +213,8 @@ const getIconResource = (fileHandler: FileAction) => {
const folderIconResource = computed(() => {
return { isFolder: true, extension: '' } as Resource
})
-
-
+const shortcutIconResource = computed(() => {
+ return { type: 'file', extension: 'url' } as Resource
+})
+
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index dca11fc6480..89c9156338f 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -12,7 +12,12 @@
alt=""
/>
-
+
diff --git a/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap
index f7963f33ebd..6d51bf45c48 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`Resource Upload Component > file upload > should render component 1`] =
"
"
`;
@@ -12,6 +12,6 @@ exports[`Resource Upload Component > folder upload > should render component 1`]
"
"
`;
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap
index ddf1cc14000..50f52008ab2 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap
@@ -5,39 +5,39 @@ exports[`SharesNavigation component > renders a shares navigation for both mobil
- Shared with me
+ Shared with me
- Shared with others
+ Shared with others
- Shared via link
+ Shared via link
Shared with me
-
+
- Shared with me
+ Shared with me
- Shared with others
+ Shared with others
- Shared via link
+ Shared via link
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
index fb15cb4c866..97762692692 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`InviteCollaborator RecipientContainer > displays an avatar image if cap
Albert Einstein
"
`;
@@ -14,33 +14,33 @@ exports[`InviteCollaborator RecipientContainer > renders a recipient with a dese
Albert Einstein
"
`;
exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 2`] = `
-"
+"
Albert Einstein
"
`;
exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 3`] = `
-"
+"
Albert Einstein
"
`;
exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 4`] = `
-"
+"
Albert Einstein
"
`;
diff --git a/packages/web-app-files/tests/unit/components/__snapshots__/CreateOrUploadMenu.spec.ts.snap b/packages/web-app-files/tests/unit/components/__snapshots__/CreateOrUploadMenu.spec.ts.snap
index 8680a521ad3..73356a97e65 100644
--- a/packages/web-app-files/tests/unit/components/__snapshots__/CreateOrUploadMenu.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/__snapshots__/CreateOrUploadMenu.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`CreateOrUploadMenu component > action buttons > should show and be enab
- Folder
+ Folder
@@ -21,13 +21,13 @@ exports[`CreateOrUploadMenu component > action buttons > should show and be enab
- Plain text file
+ Plain text file
- Mark-down file
+ Mark-down file
@@ -35,7 +35,7 @@ exports[`CreateOrUploadMenu component > action buttons > should show and be enab
- Shortcut
+ Shortcut
@@ -48,7 +48,7 @@ exports[`CreateOrUploadMenu component > file handlers > should show entries for
- Folder
+ Folder
@@ -64,13 +64,13 @@ exports[`CreateOrUploadMenu component > file handlers > should show entries for
- Plain text file
+ Plain text file
- Mark-down file
+ Mark-down file
@@ -78,7 +78,7 @@ exports[`CreateOrUploadMenu component > file handlers > should show entries for
- Shortcut
+ Shortcut
diff --git a/packages/web-app-mail/src/components/MailAttachmentItem.vue b/packages/web-app-mail/src/components/MailAttachmentItem.vue
index 192dfa8edc6..b4040c0d175 100644
--- a/packages/web-app-mail/src/components/MailAttachmentItem.vue
+++ b/packages/web-app-mail/src/components/MailAttachmentItem.vue
@@ -2,7 +2,7 @@
import { urlJoin } from '@opencloud-eu/web-client'
import { computed, inject } from 'vue'
+import { storeToRefs } from 'pinia'
import type { MailBodyPart } from '../types'
import type { MailComposeAttachment } from './MailComposeForm.vue'
import {
@@ -48,10 +49,12 @@ import {
useConfigStore,
formatFileSize,
useMessages,
+ getResourceIconName,
ResourceIconMapping,
resourceIconMappingInjectionKey,
createDefaultFileIconMapping,
- triggerDownloadWithFilename
+ triggerDownloadWithFilename,
+ useThemeStore
} from '@opencloud-eu/web-pkg'
import { useGettext } from 'vue3-gettext'
import { hasBlobId, hasId } from '../helpers/mailAttachmentGuards'
@@ -80,6 +83,8 @@ const { current: currentLanguage, $gettext } = useGettext()
const iconMappingInjection = inject(resourceIconMappingInjectionKey)
const defaultFileIconMapping = createDefaultFileIconMapping()
+const { currentTheme } = storeToRefs(useThemeStore())
+
const mimeType = computed(() => {
return attachment.type ?? ''
})
@@ -97,6 +102,13 @@ const icon = computed(() => {
)
})
+const iconName = computed(() => {
+ if (!icon.value) {
+ return 'file-2'
+ }
+ return getResourceIconName(icon.value, !!currentTheme.value?.isDark)
+})
+
const attachmentBlobId = computed(() => {
return hasBlobId(attachment) ? attachment.blobId : undefined
})
diff --git a/packages/web-app-preview/src/components/PhotoRollItem.vue b/packages/web-app-preview/src/components/PhotoRollItem.vue
index afa5a780dcd..1074a27f1de 100644
--- a/packages/web-app-preview/src/components/PhotoRollItem.vue
+++ b/packages/web-app-preview/src/components/PhotoRollItem.vue
@@ -20,7 +20,7 @@
referrerpolicy="no-referrer"
/>
-
+
string)
name?: string
icon?: string
+ iconFillType?: IconFillType
mimeType?: string
newFileMenu?: {
menuTitle: () => string
diff --git a/packages/web-pkg/src/components/AppTopBar.vue b/packages/web-pkg/src/components/AppTopBar.vue
index b49b366a6d1..27459fe3eee 100644
--- a/packages/web-pkg/src/components/AppTopBar.vue
+++ b/packages/web-pkg/src/components/AppTopBar.vue
@@ -19,7 +19,7 @@
@@ -18,6 +18,7 @@
diff --git a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
index 80ec85b03d0..46ef35a510f 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
@@ -22,7 +22,7 @@
v-oc-tooltip="tooltipLabelIcon"
:src="thumbnail"
:data-test-thumbnail-resource-name="resource.name"
- class="rounded-xs size-8 object-cover max-w-fit"
+ class="rounded-xs size-6 object-cover max-w-fit"
:aria-label="tooltipLabelIcon"
alt=""
/>
@@ -32,6 +32,7 @@
:aria-label="tooltipLabelIcon"
aria-hidden="true"
:resource="resource"
+ size-class="size-6"
/>
@@ -64,7 +65,7 @@
class="parent-folder flex items-center truncate px-0.5 mr-2 -ml-0.5 hover:bg-transparent"
:class="{ 'cursor-pointer': parentFolderLink, 'cursor-default': !parentFolderLink }"
>
-
+
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTile.vue b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
index 5bff7ba726c..42fff44aedd 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTile.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
@@ -68,7 +68,7 @@
@@ -123,7 +123,6 @@ import { useGettext } from 'vue3-gettext'
import { isSpaceResource } from '@opencloud-eu/web-client'
import { RouteLocationRaw } from 'vue-router'
import { useIsVisible } from '@opencloud-eu/design-system/composables'
-import { SizeType } from '@opencloud-eu/design-system/helpers'
import { OcCard } from '@opencloud-eu/design-system/components'
import { useFolderLink } from '../../composables'
@@ -136,7 +135,7 @@ const {
isResourceDisabled = false,
isExtensionDisplayed = true,
isPathDisplayed = false,
- resourceIconSize = 'xlarge',
+ resourceIconSize = 'size-12',
lazy = false,
isLoading = false
} = defineProps<{
@@ -148,7 +147,7 @@ const {
isResourceDisabled?: boolean
isExtensionDisplayed?: boolean
isPathDisplayed?: boolean
- resourceIconSize?: SizeType
+ resourceIconSize?: string
lazy?: boolean
isLoading?: boolean
}>()
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
index e44a06bdd99..f52b3c1bb30 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
@@ -173,7 +173,7 @@ import {
FileActionOptions,
useResourceViewHelpers
} from '../../composables'
-import { SizeType, SortDir } from '@opencloud-eu/design-system/helpers'
+import { SortDir } from '@opencloud-eu/design-system/helpers'
import ResourceStatusIndicators from './ResourceStatusIndicators.vue'
import { storeToRefs } from 'pinia'
import { OcDrop } from '@opencloud-eu/design-system/components'
@@ -274,17 +274,17 @@ const selectSorting = (field: SortField) => {
emit('sort', { sortBy: field.name, sortDir: unref(field.sortDir) })
}
-const resourceIconSize = computed(() => {
+const resourceIconSize = computed(() => {
const sizeMap: Record = {
- 1: 'xlarge',
- 2: 'xlarge',
- 3: 'xxlarge',
- 4: 'xxlarge',
- 5: 'xxxlarge',
- 6: 'xxxlarge'
+ 1: 'size-12',
+ 2: 'size-12',
+ 3: 'size-22',
+ 4: 'size-22',
+ 5: 'size-42',
+ 6: 'size-42'
}
const size = unref(viewSizeCurrent)
- return (sizeMap[size] ?? 'xxlarge') as SizeType
+ return sizeMap[size] ?? 'size-22'
})
const viewWidth = ref(0)
diff --git a/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue b/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
index c8b658820f8..57b5455f657 100644
--- a/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
+++ b/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
@@ -1,7 +1,7 @@
-
+
>
@@ -12,7 +13,7 @@ export const resourceIconMappingInjectionKey = 'oc-resource-icon-mapping'
const fileIcon = {
archive: {
- icon: { name: 'resource-type-archive', color: 'var(--oc-color-icon-archive)' },
+ icon: { name: 'resource-type-archive' },
extensions: [
'7z',
'apk',
@@ -31,7 +32,7 @@ const fileIcon = {
]
},
audio: {
- icon: { name: 'resource-type-audio', color: 'var(--oc-color-icon-audio)' },
+ icon: { name: 'resource-type-audio' },
extensions: [
'3gp',
'8svx',
@@ -79,7 +80,7 @@ const fileIcon = {
]
},
code: {
- icon: { name: 'resource-type-code', color: 'var(--oc-role-on-surface)' },
+ icon: { name: 'resource-type-code', hasDarkVariant: true },
extensions: [
'bash',
'c++',
@@ -92,8 +93,6 @@ const fileIcon = {
'h',
'hh',
'hpp',
- 'htm',
- 'html',
'java',
'js',
'json',
@@ -110,8 +109,20 @@ const fileIcon = {
'yml'
]
},
+ csv: {
+ icon: { name: 'resource-type-csv', hasDarkVariant: true },
+ extensions: ['csv']
+ },
+ html: {
+ icon: { name: 'resource-type-html', hasDarkVariant: true },
+ extensions: ['htm', 'html']
+ },
+ svg: {
+ icon: { name: 'resource-type-svg', hasDarkVariant: true },
+ extensions: ['svg']
+ },
default: {
- icon: { name: 'resource-type-file', color: 'var(--oc-role-on-surface)' },
+ icon: { name: 'resource-type-file', hasDarkVariant: true },
extensions: ['accdb', 'rss', 'swf']
},
drawio: {
@@ -119,7 +130,7 @@ const fileIcon = {
extensions: ['drawio']
},
document: {
- icon: { name: 'resource-type-document', color: 'var(--oc-color-icon-document)' },
+ icon: { name: 'resource-type-document', hasDarkVariant: true },
extensions: ['doc', 'docm', 'docx', 'dot', 'dotx', 'lwp', 'odt', 'one', 'vsd', 'wpd']
},
ifc: {
@@ -127,11 +138,11 @@ const fileIcon = {
extensions: ['ifc']
},
ipynb: {
- icon: { name: 'resource-type-jupyter', color: 'var(--oc-color-icon-jupyter)' },
+ icon: { name: 'resource-type-jupyter', hasDarkVariant: true },
extensions: ['ipynb']
},
image: {
- icon: { name: 'resource-type-image', color: 'var(--oc-color-icon-image)' },
+ icon: { name: 'resource-type-image' },
extensions: [
'ai',
'cdr',
@@ -145,7 +156,6 @@ const fileIcon = {
'png',
'ps',
'psd',
- 'svg',
'ttf',
'webp',
'woff',
@@ -157,7 +167,7 @@ const fileIcon = {
extensions: ['docf', 'docxf', 'oform']
},
markdown: {
- icon: { name: 'resource-type-markdown', color: 'var(--oc-color-icon-markdown)' },
+ icon: { name: 'resource-type-markdown', hasDarkVariant: true },
extensions: ['md', 'markdown']
},
odg: {
@@ -165,11 +175,11 @@ const fileIcon = {
extensions: ['odg']
},
pdf: {
- icon: { name: 'resource-type-pdf', color: 'var(--oc-color-icon-pdf)' },
+ icon: { name: 'resource-type-pdf', hasDarkVariant: true },
extensions: ['pdf']
},
presentation: {
- icon: { name: 'resource-type-presentation', color: 'var(--oc-color-icon-presentation)' },
+ icon: { name: 'resource-type-presentation', hasDarkVariant: true },
extensions: [
'odp',
'otp',
@@ -191,11 +201,11 @@ const fileIcon = {
extensions: ['root']
},
spreadsheet: {
- icon: { name: 'resource-type-spreadsheet', color: 'var(--oc-color-icon-spreadsheet)' },
- extensions: ['csv', 'ods', 'xla', 'xlam', 'xls', 'xlsb', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx']
+ icon: { name: 'resource-type-spreadsheet', hasDarkVariant: true },
+ extensions: ['ods', 'xla', 'xlam', 'xls', 'xlsb', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx']
},
text: {
- icon: { name: 'resource-type-text', color: 'var(--oc-role-on-surface)' },
+ icon: { name: 'resource-type-text', hasDarkVariant: true },
extensions: ['cb7', 'cba', 'cbr', 'cbt', 'cbtc', 'cbz', 'cvbdl', 'eml', 'mdb', 'tex', 'txt']
},
url: {
@@ -204,13 +214,12 @@ const fileIcon = {
},
video: {
icon: {
- name: 'resource-type-video',
- color: 'var(--oc-color-icon-video)'
+ name: 'resource-type-video'
},
extensions: ['mov', 'mp4', 'webm', 'wmv']
},
epub: {
- icon: { name: 'resource-type-book', color: 'var(--oc-color-icon-epub)' },
+ icon: { name: 'resource-type-book', hasDarkVariant: true },
extensions: ['epub']
},
board: {
@@ -218,11 +227,15 @@ const fileIcon = {
extensions: ['ggs']
},
notes: {
- icon: { name: 'resource-type-sticky-note', color: 'var(--oc-color-icon-notes)' },
+ icon: { name: 'resource-type-sticky-note', hasDarkVariant: true },
extensions: ['ocnb']
}
}
+export function getResourceIconName(icon: IconType, isDark: boolean) {
+ return icon.hasDarkVariant && isDark ? `${icon.name}-dark` : icon.name
+}
+
export function createDefaultFileIconMapping() {
const fileIconMapping: Record = {}
diff --git a/packages/web-pkg/tests/unit/components/AppTemplates/__snapshots__/ErrorScreen.spec.ts.snap b/packages/web-pkg/tests/unit/components/AppTemplates/__snapshots__/ErrorScreen.spec.ts.snap
index 95eeca6caaf..9b945b080f9 100644
--- a/packages/web-pkg/tests/unit/components/AppTemplates/__snapshots__/ErrorScreen.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/AppTemplates/__snapshots__/ErrorScreen.spec.ts.snap
@@ -2,7 +2,7 @@
exports[`The external app error screen component > displays an icon and a paragraph 1`] = `
"
-
+
Error when loading the application