diff options
author | dartcafe <github@dartcafe.de> | 2020-10-15 19:52:07 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2020-10-15 19:52:07 +0300 |
commit | 5aafe38b8b774561d517e6007d71712598c263d2 (patch) | |
tree | df185e2f21bc1821dcafa6088fb37fcff76d7bd9 /src/js/components/Comments/Comments.vue | |
parent | 1e97d957b84b7a6e048d24d6a0d70ef652f2263e (diff) |
use EmptyContent from nextcloud-vue
Diffstat (limited to 'src/js/components/Comments/Comments.vue')
-rw-r--r-- | src/js/components/Comments/Comments.vue | 23 |
1 files changed, 13 insertions, 10 deletions
diff --git a/src/js/components/Comments/Comments.vue b/src/js/components/Comments/Comments.vue index e61cdfc5..b32a621b 100644 --- a/src/js/components/Comments/Comments.vue +++ b/src/js/components/Comments/Comments.vue @@ -23,7 +23,7 @@ <template> <div class="comments"> <CommentAdd v-if="acl.allowComment" /> - <transition-group v-if="countComments" name="fade" class="comments" + <transition-group v-if="!showEmptyContent" name="fade" class="comments" tag="ul"> <li v-for="(comment) in sortedList" :key="comment.id"> <div class="comment-item"> @@ -44,10 +44,12 @@ </li> </transition-group> - <div v-else class="emptycontent"> - <div class="icon-comment" /> - <p> {{ t('polls', 'No comments yet. Be the first.') }}</p> - </div> + <EmptyContent v-else icon="icon-comment"> + {{ t('polls', 'No comments') }} + <template #desc> + {{ t('polls', 'Be the first.') }} + </template> + </EmptyContent> </div> </template> @@ -56,7 +58,7 @@ import CommentAdd from './CommentAdd' import sortBy from 'lodash/sortBy' import moment from '@nextcloud/moment' import { showSuccess, showError } from '@nextcloud/dialogs' -import { Actions, ActionButton } from '@nextcloud/vue' +import { Actions, ActionButton, EmptyContent } from '@nextcloud/vue' import { mapState, mapGetters } from 'vuex' export default { @@ -65,6 +67,7 @@ export default { Actions, ActionButton, CommentAdd, + EmptyContent, }, data() { return { @@ -83,6 +86,10 @@ export default { countComments: 'poll/comments/count', }), + showEmptyContent() { + return this.countComments === 0 + }, + sortedList() { if (this.reverse) { return sortBy(this.comments, this.sort).reverse() @@ -113,10 +120,6 @@ export default { </script> <style scoped lang="scss"> - .emptycontent { - margin-top: 20vh; - } - ul { & > li { margin-bottom: 30px; |