Show relative timestamp using mixin

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/components/ActivityEntry.vue

@@ -26,7 +26,7 @@
 			<img :src="activity.icon" class="activity--icon">
 			<RichText class="activity--subject" :text="message.subject" :arguments="message.parameters" />
 			<div class="activity--timestamp">
-				{{ getTime(activity.datetime) }}
+				{{ relativeDate(activity.datetime) }}
 			</div>
 		</div>
 		<!-- FIXME ins/del tags do no longer work with activity so we should get rid of that -->
@@ -39,6 +39,7 @@ import RichText from '@juliushaertl/vue-richtext'
 import { UserBubble } from '@nextcloud/vue'
 import moment from '@nextcloud/moment'
 import DOMPurify from 'dompurify'
+import relativeDate from '../mixins/relativeDate'
 
 const InternalLink = {
 	name: 'InternalLink',
@@ -59,6 +60,7 @@ const InternalLink = {
 }
 export default {
 	name: 'ActivityEntry',
+	mixins: [ relativeDate ],
 	components: {
 		RichText,
 	},
@@ -112,15 +114,7 @@ export default {
 		sanitizedMessage() {
 			return DOMPurify.sanitize(this.activity.message, { ALLOWED_TAGS: ['ins', 'del'], ALLOWED_ATTR: ['class'] })
 		},
-		getTime() {
+
-			return (timestamp) => {
-				const diff = moment(this.$root.time).diff(moment(timestamp))
-				if (diff >= 0 && diff < 45000) {
-					return t('core', 'seconds ago')
-				}
-				return moment(timestamp).fromNow()
-			}
-		},
 	},
 }
 </script>

src/components/card/CommentItem.vue

@@ -27,6 +27,10 @@
 				<Actions v-if="edit">
 					<ActionButton icon="icon-close" @click="hideUpdateForm" />
 				</Actions>
+				<div class="spacer" />
+				<div class="timestamp">
+					{{ relativeDate(comment.creationDateTime) }}
+				</div>
 			</div>
 			<CommentItem v-if="comment.replyTo" :reply="true" :comment="comment.replyTo" />
 			<RichText v-show="!edit"
@@ -46,6 +50,7 @@ import RichText from '@juliushaertl/vue-richtext'
 import CommentForm from './CommentForm'
 import { getCurrentUser } from '@nextcloud/auth'
 import md5 from 'blueimp-md5'
+import relativeDate from '../../mixins/relativeDate'
 
 const AtMention = {
 	name: 'AtMention',
@@ -62,6 +67,7 @@ const AtMention = {
 
 export default {
 	name: 'CommentItem',
+	mixins: [ relativeDate ],
 	components: {
 		Avatar,
 		UserBubble,

src/css/comments.scss

@@ -34,9 +34,14 @@
 	color: var(--color-text-light);
 
 	.username {
-		flex-grow: 1;
 		padding: 10px;
 	}
+	.spacer {
+		flex-grow: 1;
+	}
+	.timestamp {
+		color: var(--color-text-maxcontrast);
+	}
 }
 
 .comment--content {

src/mixins/relativeDate.js

@@ -0,0 +1,37 @@
+/*
+ * @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import moment from '@nextcloud/moment'
+
+export default {
+	computed: {
+		relativeDate() {
+			return (timestamp) => {
+				const diff = moment(this.$root.time).diff(moment(timestamp))
+				if (diff >= 0 && diff < 45000) {
+					return t('core', 'seconds ago')
+				}
+				return moment(timestamp).fromNow()
+			}
+		},
+	},
+}