Merge pull request #34825 from nextcloud/fix/noid/comments-empty-content

Fix empty content regressions in comments app

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 {