Merge pull request #21197 from nextcloud/bugfix/noid/app-screenshots
Check if screenshot is available before showing it
This commit is contained in:
commit
56d7de6ffa
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -40,7 +40,7 @@
|
||||||
</svg>
|
</svg>
|
||||||
{{ app.name }}
|
{{ app.name }}
|
||||||
</h2>
|
</h2>
|
||||||
<img v-if="app.screenshot" :src="app.screenshot" width="100%">
|
<img v-if="screenshotLoaded" :src="app.screenshot" width="100%">
|
||||||
<div v-if="app.level === 300 || app.level === 200 || hasRating" class="app-level">
|
<div v-if="app.level === 300 || app.level === 200 || hasRating" class="app-level">
|
||||||
<span v-if="app.level === 300"
|
<span v-if="app.level === 300"
|
||||||
v-tooltip.auto="t('settings', 'This app is supported via your current Nextcloud subscription.')"
|
v-tooltip.auto="t('settings', 'This app is supported via your current Nextcloud subscription.')"
|
||||||
|
@ -207,6 +207,7 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
groupCheckedAppsData: false,
|
groupCheckedAppsData: false,
|
||||||
|
screenshotLoaded: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -308,6 +309,13 @@ export default {
|
||||||
if (this.app.groups.length > 0) {
|
if (this.app.groups.length > 0) {
|
||||||
this.groupCheckedAppsData = true
|
this.groupCheckedAppsData = true
|
||||||
}
|
}
|
||||||
|
if (this.app.screenshot) {
|
||||||
|
const image = new Image()
|
||||||
|
image.onload = (e) => {
|
||||||
|
this.screenshotLoaded = true
|
||||||
|
}
|
||||||
|
image.src = this.app.screenshot
|
||||||
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -23,9 +23,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="section" :class="{ selected: isSelected }" @click="showAppDetails">
|
<div class="section" :class="{ selected: isSelected }" @click="showAppDetails">
|
||||||
<div class="app-image app-image-icon" @click="showAppDetails">
|
<div class="app-image app-image-icon" @click="showAppDetails">
|
||||||
<div v-if="(listView && !app.preview) || (!listView && !app.screenshot)" class="icon-settings-dark" />
|
<div v-if="(listView && !app.preview) || (!listView && !screenshotLoaded)" class="icon-settings-dark" />
|
||||||
|
|
||||||
<svg v-if="listView && app.preview"
|
<svg v-else-if="listView && app.preview"
|
||||||
width="32"
|
width="32"
|
||||||
height="32"
|
height="32"
|
||||||
viewBox="0 0 32 32">
|
viewBox="0 0 32 32">
|
||||||
|
@ -40,7 +40,7 @@
|
||||||
class="app-icon" />
|
class="app-icon" />
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<img v-if="!listView && app.screenshot" :src="app.screenshot" width="100%">
|
<img v-if="!listView && app.screenshot && screenshotLoaded" :src="app.screenshot" width="100%">
|
||||||
</div>
|
</div>
|
||||||
<div class="app-name" @click="showAppDetails">
|
<div class="app-name" @click="showAppDetails">
|
||||||
{{ app.name }}
|
{{ app.name }}
|
||||||
|
@ -129,6 +129,7 @@ export default {
|
||||||
return {
|
return {
|
||||||
isSelected: false,
|
isSelected: false,
|
||||||
scrolled: false,
|
scrolled: false,
|
||||||
|
screenshotLoaded: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -143,6 +144,13 @@ export default {
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.isSelected = (this.app.id === this.$route.params.id)
|
this.isSelected = (this.app.id === this.$route.params.id)
|
||||||
|
if (this.app.screenshot) {
|
||||||
|
const image = new Image()
|
||||||
|
image.onload = (e) => {
|
||||||
|
this.screenshotLoaded = true
|
||||||
|
}
|
||||||
|
image.src = this.app.screenshot
|
||||||
|
}
|
||||||
},
|
},
|
||||||
watchers: {
|
watchers: {
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue