Show that a Post/Comment has been edited

webapp/components/Comment/Comment.vue

@@ -12,8 +12,17 @@
   <div v-else :class="{ comment: true, 'disabled-content': comment.deleted || comment.disabled }">
     <ds-card :id="anchor">
       <ds-space margin-bottom="small" margin-top="small">
+        <ds-flex>
+          <ds-flex-item width="40%">
             <hc-user :user="author" :date-time="comment.createdAt" />
-        <!-- Content Menu (can open Modals) -->
+          </ds-flex-item>
+          <ds-flex-item>
+            <ds-text v-if="comment.createdAt !== comment.updatedAt" color="softer" class="italics">
+              {{ this.$t('comment.edited') }}
+            </ds-text>
+          </ds-flex-item>
+          <ds-flex-item>
+            <ds-space margin-top="base">
               <client-only>
                 <content-menu
                   v-show="!openEditCommentMenu"
@@ -27,6 +36,10 @@
                 />
               </client-only>
             </ds-space>
+          </ds-flex-item>
+        </ds-flex>
+        <!-- Content Menu (can open Modals) -->
+      </ds-space>
       <div v-if="openEditCommentMenu">
         <hc-comment-form
           :update="true"
@@ -199,4 +212,8 @@ span.show-more-or-less {
   margin: 0px 20px;
   cursor: pointer;
 }
+
+.ds-text.italics {
+  font-style: italic;
+}
 </style>

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

@@ -335,7 +335,8 @@
       "submit": "Kommentiere",
       "submitted": "Kommentar Gesendet",
       "updated": "Änderungen gespeichert"
-    }
+    },
+    "edited": "bearbeitet"
   },
   "comment": {
     "content": {
@@ -348,7 +349,8 @@
     "show": {
       "more": "mehr anzeigen",
       "less": "weniger anzeigen"
-    }
+    },
+    "edited": "bearbeitet"
   },
   "quotes": {
   "african": {

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,9 +206,19 @@
     "delete": "Apagar Contribuição"
   },
   "comment": {
+    "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",
     "following": "Seguindo"

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

@@ -6,8 +6,17 @@
       :class="{ 'post-card': true, 'disabled-content': post.disabled }"
     >
       <ds-space margin-bottom="small" />
+      <ds-flex>
+        <ds-flex-item width="40%">
           <hc-user :user="post.author" :date-time="post.createdAt" />
-      <!-- Content Menu (can open Modals) -->
+        </ds-flex-item>
+        <ds-flex-item>
+          <ds-text v-if="post.createdAt !== post.updatedAt" color="softer" class="italics">
+            {{ this.$t('post.edited') }}
+          </ds-text>
+        </ds-flex-item>
+        <ds-flex-item>
+          <ds-space margin-top="base">
             <client-only>
               <content-menu
                 placement="bottom-end"
@@ -17,6 +26,10 @@
                 :is-owner="isAuthor(post.author ? post.author.id : null)"
               />
             </client-only>
+          </ds-space>
+        </ds-flex-item>
+      </ds-flex>
+      <!-- Content Menu (can open Modals) -->
       <ds-space margin-bottom="small" />
       <ds-heading tag="h3" no-margin class="hyphenate-text">{{ post.title }}</ds-heading>
       <ds-space margin-bottom="small" />