diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-12-06 14:15:09 +0300 |
---|---|---|
committer | npmbuildbot[bot] <npmbuildbot[bot]@users.noreply.github.com> | 2019-12-10 10:04:24 +0300 |
commit | 75977a851c825dfc7f49d738037656e6873163ef (patch) | |
tree | 770588ff199ff4fe09f9485fbf5789ab4c09819b /src | |
parent | b4677c10eab826f0c0221e0a48f057a5d00f1d80 (diff) |
Show navigation on empty folder too
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Signed-off-by: npmbuildbot[bot] <npmbuildbot[bot]@users.noreply.github.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/EmptyContent.vue (renamed from src/views/EmptyContent.vue) | 6 | ||||
-rw-r--r-- | src/views/Albums.vue | 25 | ||||
-rw-r--r-- | src/views/Tags.vue | 41 | ||||
-rw-r--r-- | src/views/Timeline.vue | 2 |
4 files changed, 50 insertions, 24 deletions
diff --git a/src/views/EmptyContent.vue b/src/components/EmptyContent.vue index c96c4aa2..cf4a62e5 100644 --- a/src/views/EmptyContent.vue +++ b/src/components/EmptyContent.vue @@ -111,6 +111,12 @@ export default { </script> <style lang="scss"> +.emptycontent { + // span all the available columns + grid-column: 1/-1; + margin-top: 20vh; +} + .illustration { min-width: 200px; max-width: 15%; diff --git a/src/views/Albums.vue b/src/views/Albums.vue index fa5ad09f..3465cbec 100644 --- a/src/views/Albums.vue +++ b/src/views/Albums.vue @@ -28,23 +28,28 @@ <EmptyContent v-else-if="error"> {{ t('photos', 'An error occurred') }} </EmptyContent> - <EmptyContent v-else-if="!loading && isEmpty" illustration-name="empty"> - {{ t('photos', 'No photos in here') }} - </EmptyContent> <!-- Folder content --> - <Grid v-else> + <Grid v-else-if="!loading"> <Navigation v-if="folder" key="navigation" v-bind="folder" :root-title="rootTitle" :show-actions="true" /> - <Folder v-for="dir in folderList" - :key="dir.fileid" - v-bind="dir" - :show-shared="showShared" /> - <File v-for="file in fileList" :key="file.fileid" v-bind="file" /> + <!-- Empty folder, should only happen via direct link --> + <EmptyContent v-if="isEmpty" key="emptycontent" illustration-name="empty"> + {{ t('photos', 'No photos in here') }} + </EmptyContent> + + <!-- Folders and files list --> + <template v-else> + <Folder v-for="dir in folderList" + :key="dir.fileid" + v-bind="dir" + :show-shared="showShared" /> + <File v-for="file in fileList" :key="file.fileid" v-bind="file" /> + </template> </Grid> </template> @@ -53,7 +58,7 @@ import { mapGetters } from 'vuex' import getAlbumContent from '../services/AlbumContent' -import EmptyContent from './EmptyContent' +import EmptyContent from '../components/EmptyContent' import Folder from '../components/Folder' import File from '../components/File' import Grid from '../components/Grid' diff --git a/src/views/Tags.vue b/src/views/Tags.vue index 2b05c7aa..b61223a1 100644 --- a/src/views/Tags.vue +++ b/src/views/Tags.vue @@ -25,20 +25,16 @@ <EmptyContent v-if="error"> {{ t('photos', 'An error occurred') }} </EmptyContent> - <EmptyContent v-else-if="!loading && isEmpty" illustration-name="empty"> - {{ t('photos', 'No tags yet') }} - <template #desc> - {{ t('photos', 'Photos with tags will show up here') }} - </template> - </EmptyContent> <!-- Folder content --> - <Grid v-else> + <Grid v-else-if="!loading"> <Navigation key="navigation" :basename="path" :filename="'/' + path" :root-title="rootTitle" /> + + <!-- Tags list --> <template v-if="isRoot"> <Tag v-for="id in tagsNames" :key="id" @@ -46,7 +42,16 @@ :fileid="id" :basename="tags[id].displayName" /> </template> + + <!-- Content list --> <template v-else> + <EmptyContent v-if="isEmpty" key="emptycontent" illustration-name="empty"> + {{ t('photos', 'No tags yet') }} + <template #desc> + {{ t('photos', 'Photos with tags will show up here') }} + </template> + </EmptyContent> + <File v-for="file in fileList" :key="file.fileid" v-bind="file" /> </template> </Grid> @@ -58,7 +63,7 @@ import { mapGetters } from 'vuex' import getSystemTags from '../services/SystemTags' import getTaggedImages from '../services/TaggedImages' -import EmptyContent from './EmptyContent' +import EmptyContent from '../components/EmptyContent' import Tag from '../components/Tag' import File from '../components/File' import Grid from '../components/Grid' @@ -126,7 +131,10 @@ export default { }, isEmpty() { - return Object.keys(this.tagsNames).length === 0 + if (this.isRoot) { + return Object.keys(this.tagsNames).length === 0 + } + return this.fileList.length === 0 }, }, @@ -180,11 +188,18 @@ export default { const { request, cancel } = cancelableRequest(getSystemTags) this.cancelRequest = cancel - const tags = await request() - this.$store.dispatch('updateTags', tags) + try { + // fetch content + const tags = await request() + this.$store.dispatch('updateTags', tags) + } catch (error) { + console.error(error) + this.error = true + } finally { + // done loading + this.$emit('update:loading', false) + } - // done loading - this.$emit('update:loading', false) }, async fetchContent() { diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue index 6a91ad1d..df47f1ea 100644 --- a/src/views/Timeline.vue +++ b/src/views/Timeline.vue @@ -43,7 +43,7 @@ import { mapGetters } from 'vuex' import getPhotos from '../services/PhotoSearch' -import EmptyContent from './EmptyContent' +import EmptyContent from '../components/EmptyContent' import File from '../components/File' import Grid from '../components/Grid' |