blob: e38f745f82aa984785e23d8ac6eed9a48b42b141 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<!--
- SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
- SPDX-License-Identifier: AGPL-3.0-or-later
-->
<script setup lang="ts">
import { ref } from 'vue'
import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
import NcDashboardWidgetItem from '@nextcloud/vue/dist/Components/NcDashboardWidgetItem.js'
import IconFile from 'vue-material-design-icons/File.vue'
defineProps({
item: {
type: Object,
required: true,
},
iconSize: {
type: Number,
required: true,
},
roundedIcons: {
type: Boolean,
default: true,
},
})
/**
* True as soon as the image is loaded
*/
const imageLoaded = ref(false)
/**
* True if the image failed to load and we should show a fallback
*/
const loadingImageFailed = ref(false)
</script>
<template>
<NcDashboardWidgetItem :target-url="item.link"
:overlay-icon-url="item.overlayIconUrl ? item.overlayIconUrl : ''"
:main-text="item.title"
:sub-text="item.subtitle">
<template #avatar>
<template v-if="item.iconUrl">
<NcAvatar v-if="roundedIcons"
:size="iconSize"
:url="item.iconUrl" />
<template v-else>
<img v-show="!loadingImageFailed"
alt=""
class="api-dashboard-widget-item__icon"
:class="{'hidden-visually': !imageLoaded }"
:src="item.iconUrl"
@error="loadingImageFailed = true"
@load="imageLoaded = true">
<!-- Placeholder while the image is loaded and also the fallback if the URL is broken -->
<IconFile v-if="!imageLoaded"
:size="iconSize" />
</template>
</template>
</template>
</NcDashboardWidgetItem>
</template>
<style scoped>
.api-dashboard-widget-item__icon {
height: var(--default-clickable-area);
width: var(--default-clickable-area);
}
</style>
|
