diff options
| author | Julius Härtl <jus@bitgrid.net> | 2020-06-03 08:42:06 +0200 |
|---|---|---|
| committer | Julius Härtl <jus@bitgrid.net> | 2020-06-05 09:43:40 +0200 |
| commit | e060d716b24599d4176b16f694eb034ad6122083 (patch) | |
| tree | 457025999834f28776b2b7a7e0983cff0b20a004 /apps/settings/src | |
| parent | 81f83d3c1f9be926bf1898212e2445aa9c292dc1 (diff) | |
| download | nextcloud-server-e060d716b24599d4176b16f694eb034ad6122083.tar.gz nextcloud-server-e060d716b24599d4176b16f694eb034ad6122083.zip | |
Check if screenshot is available before showing it
Signed-off-by: Julius Härtl <jus@bitgrid.net>
Diffstat (limited to 'apps/settings/src')
| -rw-r--r-- | apps/settings/src/components/AppDetails.vue | 10 | ||||
| -rw-r--r-- | apps/settings/src/components/AppList/AppItem.vue | 14 |
2 files changed, 20 insertions, 4 deletions
diff --git a/apps/settings/src/components/AppDetails.vue b/apps/settings/src/components/AppDetails.vue index 2756d31429f..31bc1f8ba3b 100644 --- a/apps/settings/src/components/AppDetails.vue +++ b/apps/settings/src/components/AppDetails.vue @@ -40,7 +40,7 @@ </svg> {{ app.name }} </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"> <span v-if="app.level === 300" v-tooltip.auto="t('settings', 'This app is supported via your current Nextcloud subscription.')" @@ -207,6 +207,7 @@ export default { data() { return { groupCheckedAppsData: false, + screenshotLoaded: false, } }, computed: { @@ -308,6 +309,13 @@ export default { if (this.app.groups.length > 0) { this.groupCheckedAppsData = true } + if (this.app.screenshot) { + const image = new Image() + image.onload = (e) => { + this.screenshotLoaded = true + } + image.src = this.app.screenshot + } }, } </script> diff --git a/apps/settings/src/components/AppList/AppItem.vue b/apps/settings/src/components/AppList/AppItem.vue index d00c62910f7..8442f63ed91 100644 --- a/apps/settings/src/components/AppList/AppItem.vue +++ b/apps/settings/src/components/AppList/AppItem.vue @@ -23,9 +23,9 @@ <template> <div class="section" :class="{ selected: isSelected }" @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" height="32" viewBox="0 0 32 32"> @@ -40,7 +40,7 @@ class="app-icon" /> </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 class="app-name" @click="showAppDetails"> {{ app.name }} @@ -129,6 +129,7 @@ export default { return { isSelected: false, scrolled: false, + screenshotLoaded: false, } }, computed: { @@ -143,6 +144,13 @@ export default { }, mounted() { 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: { |