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] 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" />