From a5e3c52e1d9e1da77177ae2e45c5f4d3e4ea7f8c Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Thu, 3 Oct 2019 12:01:04 +0200
Subject: [PATCH 1/3] Show that a Post/Comment has been edited

---
 webapp/components/Comment/Comment.vue | 43 +++++++++++++++++++--------
 webapp/graphql/CommentMutations.js    |  2 ++
 webapp/graphql/Fragments.js           |  2 ++
 webapp/locales/de.json                | 10 ++++---
 webapp/locales/en.json                |  6 ++--
 webapp/locales/pt.json                | 22 +++++++++++---
 webapp/pages/post/_id/_slug/index.vue | 33 +++++++++++++-------
 7 files changed, 85 insertions(+), 33 deletions(-)

diff --git a/webapp/components/Comment/Comment.vue b/webapp/components/Comment/Comment.vue
index 31bbc811f..6fc076c7b 100644
--- a/webapp/components/Comment/Comment.vue
+++ b/webapp/components/Comment/Comment.vue
@@ -12,20 +12,33 @@
   <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" />
+        <ds-flex>
+          <ds-flex-item width="40%">
+            <hc-user :user="author" :date-time="comment.createdAt" />
+          </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"
+                  placement="bottom-end"
+                  resource-type="comment"
+                  :resource="comment"
+                  :modalsData="menuModalsData"
+                  class="float-right"
+                  :is-owner="isAuthor(author.id)"
+                  @showEditCommentMenu="editCommentMenu"
+                />
+              </client-only>
+            </ds-space>
+          </ds-flex-item>
+        </ds-flex>
         <!-- Content Menu (can open Modals) -->
-        <client-only>
-          <content-menu
-            v-show="!openEditCommentMenu"
-            placement="bottom-end"
-            resource-type="comment"
-            :resource="comment"
-            :modalsData="menuModalsData"
-            class="float-right"
-            :is-owner="isAuthor(author.id)"
-            @showEditCommentMenu="editCommentMenu"
-          />
-        </client-only>
       </ds-space>
       <div v-if="openEditCommentMenu">
         <hc-comment-form
@@ -199,4 +212,8 @@ span.show-more-or-less {
   margin: 0px 20px;
   cursor: pointer;
 }
+
+.ds-text.italics {
+  font-style: italic;
+}
 </style>
diff --git a/webapp/graphql/CommentMutations.js b/webapp/graphql/CommentMutations.js
index dd8d1d3a0..133b61f18 100644
--- a/webapp/graphql/CommentMutations.js
+++ b/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 {
diff --git a/webapp/graphql/Fragments.js b/webapp/graphql/Fragments.js
index e50d4bbe1..e0c6e699e 100644
--- a/webapp/graphql/Fragments.js
+++ b/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
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index c547e063f..b6ee3f320 100644
--- a/webapp/locales/de.json
+++ b/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"
     }
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 48fd36c0d..b243e39a3 100644
--- a/webapp/locales/en.json
+++ b/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": {
diff --git a/webapp/locales/pt.json b/webapp/locales/pt.json
index d08d569c2..b43711998 100644
--- a/webapp/locales/pt.json
+++ b/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"
   }
-}
\ No newline at end of file
+}
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index 0fda144d0..0c45c0ca3 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -6,17 +6,30 @@
       :class="{ 'post-card': true, 'disabled-content': post.disabled }"
     >
       <ds-space margin-bottom="small" />
-      <hc-user :user="post.author" :date-time="post.createdAt" />
+      <ds-flex>
+        <ds-flex-item width="40%">
+          <hc-user :user="post.author" :date-time="post.createdAt" />
+        </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"
+                resource-type="contribution"
+                :resource="post"
+                :modalsData="menuModalsData"
+                :is-owner="isAuthor(post.author ? post.author.id : null)"
+              />
+            </client-only>
+          </ds-space>
+        </ds-flex-item>
+      </ds-flex>
       <!-- Content Menu (can open Modals) -->
-      <client-only>
-        <content-menu
-          placement="bottom-end"
-          resource-type="contribution"
-          :resource="post"
-          :modalsData="menuModalsData"
-          :is-owner="isAuthor(post.author ? post.author.id : null)"
-        />
-      </client-only>
       <ds-space margin-bottom="small" />
       <ds-heading tag="h3" no-margin class="hyphenate-text">{{ post.title }}</ds-heading>
       <ds-space margin-bottom="small" />

From 3912b21ea2f24e2e25682060b7166d1511442e6e Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Fri, 4 Oct 2019 00:55:14 +0200
Subject: [PATCH 2/3] refactor: use named slot for additional text

@mattwr18 I can see odd behaviour of the EDITED marker on mobile: The
text would just overlap.

The current behaviour has its flaws, e.g. if you have a long text it
won't wrap but overflow the comment card. But putting the additional
text into a named slot is certainly better than adding some nodes next
to the `<hc-user>` component.
---
 webapp/components/Comment/Comment.vue | 48 ++++++++++-----------------
 webapp/components/User/User.vue       |  4 +--
 webapp/pages/post/_id/_slug/index.vue | 38 ++++++++-------------
 3 files changed, 34 insertions(+), 56 deletions(-)

diff --git a/webapp/components/Comment/Comment.vue b/webapp/components/Comment/Comment.vue
index 6fc076c7b..534c45e6b 100644
--- a/webapp/components/Comment/Comment.vue
+++ b/webapp/components/Comment/Comment.vue
@@ -12,33 +12,25 @@
   <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" />
-          </ds-flex-item>
-          <ds-flex-item>
-            <ds-text v-if="comment.createdAt !== comment.updatedAt" color="softer" class="italics">
-              {{ this.$t('comment.edited') }}
+        <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>
-          </ds-flex-item>
-          <ds-flex-item>
-            <ds-space margin-top="base">
-              <client-only>
-                <content-menu
-                  v-show="!openEditCommentMenu"
-                  placement="bottom-end"
-                  resource-type="comment"
-                  :resource="comment"
-                  :modalsData="menuModalsData"
-                  class="float-right"
-                  :is-owner="isAuthor(author.id)"
-                  @showEditCommentMenu="editCommentMenu"
-                />
-              </client-only>
-            </ds-space>
-          </ds-flex-item>
-        </ds-flex>
-        <!-- Content Menu (can open Modals) -->
+          </template>
+        </hc-user>
+        <client-only>
+          <content-menu
+            v-show="!openEditCommentMenu"
+            placement="bottom-end"
+            resource-type="comment"
+            :resource="comment"
+            :modalsData="menuModalsData"
+            class="float-right"
+            :is-owner="isAuthor(author.id)"
+            @showEditCommentMenu="editCommentMenu"
+          />
+        </client-only>
       </ds-space>
       <div v-if="openEditCommentMenu">
         <hc-comment-form
@@ -212,8 +204,4 @@ span.show-more-or-less {
   margin: 0px 20px;
   cursor: pointer;
 }
-
-.ds-text.italics {
-  font-style: italic;
-}
 </style>
diff --git a/webapp/components/User/User.vue b/webapp/components/User/User.vue
index eb7092bcc..3afef5c11 100644
--- a/webapp/components/User/User.vue
+++ b/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>
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index 0c45c0ca3..1357f9653 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -6,30 +6,20 @@
       :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" />
-        </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"
-                resource-type="contribution"
-                :resource="post"
-                :modalsData="menuModalsData"
-                :is-owner="isAuthor(post.author ? post.author.id : null)"
-              />
-            </client-only>
-          </ds-space>
-        </ds-flex-item>
-      </ds-flex>
-      <!-- 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"
+          resource-type="contribution"
+          :resource="post"
+          :modalsData="menuModalsData"
+          :is-owner="isAuthor(post.author ? post.author.id : null)"
+        />
+      </client-only>
       <ds-space margin-bottom="small" />
       <ds-heading tag="h3" no-margin class="hyphenate-text">{{ post.title }}</ds-heading>
       <ds-space margin-bottom="small" />

From 99db1338c1522f389f5e5deec019cba839011179 Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Fri, 4 Oct 2019 01:05:39 +0200
Subject: [PATCH 3/3] docs: add storybook section for edit information

---
 webapp/components/User/User.story.js | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/webapp/components/User/User.story.js b/webapp/components/User/User.story.js
index e7a66de3f..931f40da6 100644
--- a/webapp/components/User/User.story.js
+++ b/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: () => ({