Merge pull request #1807 from Human-Connection/1669-show-edited-for-posts-comments

Show that a Post/Comment has been edited

webapp/components/Comment/Comment.vue

@@ -12,8 +12,13 @@
   <div v-else :class="{ comment: true, 'disabled-content': comment.deleted || comment.disabled }">
     <ds-card :id="anchor">
       <ds-space margin-bottom="small" margin-top="small">
-        <hc-user :user="author" :date-time="comment.createdAt" />
-        <!-- Content Menu (can open Modals) -->
+        <hc-user :user="author" :date-time="comment.createdAt">
+          <template v-slot:dateTime>
+            <ds-text v-if="comment.createdAt !== comment.updatedAt">
+              ({{ $t('comment.edited') }})
+            </ds-text>
+          </template>
+        </hc-user>
         <client-only>
           <content-menu
             v-show="!openEditCommentMenu"

webapp/components/User/User.story.js

@@ -56,7 +56,7 @@ const user = {
 storiesOf('User', module)
   .addDecorator(withA11y)
   .addDecorator(helpers.layout)
-  .add('available user', () => ({
+  .add('available', () => ({
     components: { User },
     store: helpers.store,
     data: () => ({
@@ -64,7 +64,21 @@ storiesOf('User', module)
     }),
     template: '<user :user="user" :trunc="35" :date-time="new Date()" />',
   }))
-  .add('anonymous user', () => ({
+  .add('has edited something', () => ({
+    components: { User },
+    store: helpers.store,
+    data: () => ({
+      user,
+    }),
+    template: `
+    <user :user="user" :trunc="35" :date-time="new Date()">
+      <template v-slot:dateTime>
+        - HEY! I'm edited
+      </template>
+    </user>
+    `,
+  }))
+  .add('anonymous', () => ({
     components: { User },
     store: helpers.store,
     data: () => ({

webapp/components/User/User.vue

@@ -11,17 +11,17 @@
         <div @mouseover="openMenu(true)" @mouseleave="closeMenu(true)">
           <hc-avatar class="avatar" :user="user" />
           <div>
-            <ds-text align="left">
+            <ds-text>
               <b class="username">{{ userName | truncate(18) }}</b>
               <ds-text v-if="dateTime" size="small" color="soft">
                 <ds-icon name="clock" />
                 <client-only>
                   <hc-relative-date-time :date-time="dateTime" />
                 </client-only>
+                <slot name="dateTime"></slot>
               </ds-text>
             </ds-text>
           </div>
-          <!-- Time -->
           <ds-text align="left" size="small" color="soft">
             {{ userSlug }}
           </ds-text>

webapp/graphql/CommentMutations.js

@@ -10,6 +10,7 @@ export default i18n => {
           contentExcerpt
           content
           createdAt
+          updatedAt
           disabled
           deleted
           author {
@@ -39,6 +40,7 @@ export default i18n => {
           contentExcerpt
           content
           createdAt
+          updatedAt
           disabled
           deleted
           author {

webapp/graphql/Fragments.js

@@ -40,6 +40,7 @@ export const postFragment = lang => gql`
     content
     contentExcerpt
     createdAt
+    updatedAt
     disabled
     deleted
     slug
@@ -64,6 +65,7 @@ export const commentFragment = lang => gql`
   fragment comment on Comment {
     id
     createdAt
+    updatedAt
     disabled
     deleted
     content

webapp/locales/de.json

@@ -2,7 +2,7 @@
   "maintenance": {
     "title": "Human Connection befindet sich in der Wartung",
     "explanation": "Zurzeit führen wir einige geplante Wartungsarbeiten durch, bitte versuch es später erneut.",
-    "questions": "Bei Fragen oder Problemen erreichst du uns per E-Mail an" 
+    "questions": "Bei Fragen oder Problemen erreichst du uns per E-Mail an"
   },
   "index": {
     "no-results": "Keine Beiträge gefunden.",
@@ -335,7 +335,8 @@
       "submit": "Kommentiere",
       "submitted": "Kommentar Gesendet",
       "updated": "Änderungen gespeichert"
-    }
+    },
+    "edited": "bearbeitet"
   },
   "comment": {
     "content": {
@@ -348,10 +349,11 @@
     "show": {
       "more": "mehr anzeigen",
       "less": "weniger anzeigen"
-    }
+    },
+    "edited": "bearbeitet"
   },
   "quotes": {
-    "african": {
+  "african": {
       "quote": "Viele kleine Leute an vielen kleinen Orten, die viele kleine Dinge tun, werden das Antlitz dieser Welt verändern.",
       "author": "Afrikanisches Sprichwort"
     }

webapp/locales/en.json

@@ -336,7 +336,8 @@
       "submit": "Comment",
       "submitted": "Comment Submitted",
       "updated": "Changes Saved"
-    }
+    },
+    "edited": "edited"
   },
   "comment": {
     "content": {
@@ -349,7 +350,8 @@
     "show": {
       "more": "show more",
       "less": "show less"
-    }
+    },
+    "edited": "edited"
   },
   "quotes": {
     "african": {

webapp/locales/pt.json

@@ -118,7 +118,11 @@
     },
     "takeAction": {
       "name": "Tomar uma ação"
-    }
+    },
+    "comment": {
+      "submit": "Commentar"
+    },
+    "edited": "editado"
   },
   "quotes": {
     "african": {
@@ -202,8 +206,18 @@
     "delete": "Apagar Contribuição"
   },
   "comment": {
-    "edit": "Editar Comentário",
-    "delete": "Apagar Comentário"
+    "content": {
+      "unavailable-placeholder": "… este commenttário não está disponível"
+    },
+    "menu": {
+      "edit": "Editar Comentário",
+      "delete": "Apagar Comentário"
+    },
+    "show": {
+      "more": "mostrar mais",
+      "less": "mostrar menos"
+    },
+    "edited": "editado"
   },
   "followButton": {
     "follow": "Seguir",
@@ -212,4 +226,4 @@
   "shoutButton": {
     "shouted": "Aclamou"
   }
-}
+}

webapp/pages/post/_id/_slug/index.vue

@@ -6,8 +6,11 @@
       :class="{ 'post-card': true, 'disabled-content': post.disabled }"
     >
       <ds-space margin-bottom="small" />
-      <hc-user :user="post.author" :date-time="post.createdAt" />
-      <!-- Content Menu (can open Modals) -->
+      <hc-user :user="post.author" :date-time="post.createdAt">
+        <template v-slot:dateTime>
+          <ds-text v-if="post.createdAt !== post.updatedAt">({{ $t('post.edited') }})</ds-text>
+        </template>
+      </hc-user>
       <client-only>
         <content-menu
           placement="bottom-end"