diff options
| author | Richard Steinmetz <richard@steinmetz.cloud> | 2022-10-26 17:07:22 +0300 |
|---|---|---|
| committer | nextcloud-command <nextcloud-command@users.noreply.github.com> | 2022-10-26 17:42:11 +0300 |
| commit | cba636124a1574521bf6aadd28a47ed3049e74bf (patch) | |
| tree | 1e26b5c73fff23d0993a20f89210034fc348fe4e /apps | |
| parent | aec8dce61acb4e0b6ce1019fd0136fab7885bb23 (diff) | |
Fix empty content regressions in comments app
Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/comments/src/views/Comments.vue | 47 |
1 files changed, 35 insertions, 12 deletions
diff --git a/apps/comments/src/views/Comments.vue b/apps/comments/src/views/Comments.vue index ce887d6977c..170c3c937b5 100644 --- a/apps/comments/src/views/Comments.vue +++ b/apps/comments/src/views/Comments.vue @@ -2,6 +2,7 @@ - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com> - - @author John Molakvoæ <skjnldsv@protonmail.com> + - @author Richard Steinmetz <richard@steinmetz.cloud> - - @license GNU AGPL version 3 or any later version - @@ -31,8 +32,12 @@ @new="onNewComment" /> <template v-if="!isFirstLoading"> - <NcEmptyContent v-if="!hasComments && done" icon="icon-comment"> - {{ t('comments', 'No comments yet, start the conversation!') }} + <NcEmptyContent v-if="!hasComments && done" + class="comments__empty" + :title="t('comments', 'No comments yet, start the conversation!')"> + <template #icon> + <MessageReplyTextIcon /> + </template> </NcEmptyContent> <!-- Comments --> @@ -55,14 +60,19 @@ </div> <!-- Error message --> - <NcEmptyContent v-else-if="error" class="comments__error" icon="icon-error"> - {{ error }} - <template #desc> - <button icon="icon-history" @click="getComments"> - {{ t('comments', 'Retry') }} - </button> - </template> - </NcEmptyContent> + <template v-else-if="error"> + <NcEmptyContent class="comments__error" :title="error"> + <template #icon> + <AlertCircleOutlineIcon /> + </template> + </NcEmptyContent> + <NcButton class="comments__retry" @click="getComments"> + <template #icon> + <RefreshIcon /> + </template> + {{ t('comments', 'Retry') }} + </NcButton> + </template> </template> </div> </template> @@ -76,6 +86,10 @@ import VTooltip from 'v-tooltip' import Vue from 'vue' import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent' +import NcButton from '@nextcloud/vue/dist/Components/NcButton' +import RefreshIcon from 'vue-material-design-icons/Refresh' +import MessageReplyTextIcon from 'vue-material-design-icons/MessageReplyText' +import AlertCircleOutlineIcon from 'vue-material-design-icons/AlertCircleOutline' import Comment from '../components/Comment' import getComments, { DEFAULT_LIMIT } from '../services/GetComments' @@ -90,6 +104,10 @@ export default { // Avatar, Comment, NcEmptyContent, + NcButton, + RefreshIcon, + MessageReplyTextIcon, + AlertCircleOutlineIcon, }, data() { @@ -276,8 +294,13 @@ export default { <style lang="scss" scoped> .comments { // Do not add emptycontent top margin - &__error{ - margin-top: 0; + &__empty, + &__error { + margin-top: 0 !important; + } + + &__retry { + margin: 0 auto; } &__info { |