Discussion improvements for groups

Show when a comment has been edited.

Closes #372

Hide the report functionnality for now

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Discussion/DiscussionComment.vue

@@ -4,7 +4,7 @@
       <figure class="image is-48x48" v-if="comment.actor.avatar">
         <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
       </figure>
-      <b-icon v-else size="is-medium" icon="account-circle" />
+      <b-icon v-else size="is-large" icon="account-circle" />
     </div>
     <div class="body">
       <div class="meta">
@@ -12,10 +12,10 @@
           <strong>{{ comment.actor.name }}</strong>
           <small>@{{ usernameWithDomain(comment.actor) }}</small>
         </span>
-        <a v-else class="name comment-link has-text-grey">
+        <span v-else class="name comment-link has-text-grey">
-          <span>{{ $t("[deleted]") }}</span>
+          {{ $t("[deleted]") }}
-        </a>
+        </span>
-        <span class="icons" v-if="!comment.deletedAt">
+        <span class="icons" v-if="!comment.deletedAt && comment.actor.id === currentActor.id">
           <b-dropdown aria-role="list">
             <b-icon slot="trigger" role="button" icon="dots-horizontal" />
 
@@ -35,24 +35,30 @@
               <b-icon icon="delete"></b-icon>
               {{ $t("Delete") }}
             </b-dropdown-item>
-            <b-dropdown-item aria-role="listitem" @click="isReportModalActive = true">
+            <!-- <b-dropdown-item aria-role="listitem" @click="isReportModalActive = true">
               <b-icon icon="flag" />
               {{ $t("Report") }}
-            </b-dropdown-item>
+            </b-dropdown-item> -->
           </b-dropdown>
         </span>
         <div class="post-infos">
-          <span :title="comment.updatedAt | formatDateTimeString">
+          <span :title="comment.insertedAt | formatDateTimeString">
             {{ $timeAgo.format(new Date(comment.updatedAt), "twitter") || $t("Right now") }}</span
           >
         </div>
       </div>
-      <div
+      <div v-if="!editMode && !comment.deletedAt" class="text-wrapper">
-        class="description-content"
+        <div class="description-content" v-html="comment.text"></div>
-        v-html="comment.text"
+        <p
-        v-if="!editMode && !comment.deletedAt"
+          v-if="comment.insertedAt.getTime() !== comment.updatedAt.getTime()"
-      ></div>
+          :title="comment.updatedAt | formatDateTimeString"
-      <div v-else-if="!editMode">{{ $t("[This comment has been deleted]") }}</div>
+        >
+          {{ $t("Edited {ago}", { ago: $timeAgo.format(new Date(comment.updatedAt)) }) }}
+        </p>
+      </div>
+      <div class="comment-deleted" v-else-if="!editMode">
+        {{ $t("[This comment has been deleted by it's author]") }}
+      </div>
       <form v-else class="edition" @submit.prevent="updateComment">
         <editor v-model="updatedComment" />
         <div class="buttons">
@@ -92,7 +98,7 @@ export default class DiscussionComment extends Vue {
 
   usernameWithDomain = usernameWithDomain;
 
-  isReportModalActive: boolean = false;
+  // isReportModalActive: boolean = false;
 
   toggleEditMode() {
     this.updatedComment = this.comment.text;
@@ -133,10 +139,8 @@ article.comment {
           line-height: 1rem;
         }
 
-        span {
         color: #3c376e;
       }
-      }
 
       .icons {
         display: inline;
@@ -144,8 +148,17 @@ article.comment {
       }
     }
 
+    .text-wrapper,
+    .comment-deleted {
+      padding: 0 1rem;
+
+      & > p {
+        font-size: 0.85rem;
+        font-style: italic;
+      }
+
       div.description-content {
-      padding: 0 1rem 0.3rem;
+        padding-bottom: 0.3rem;
 
         /deep/ h1 {
           font-size: 2rem;
@@ -189,6 +202,7 @@ article.comment {
         }
       }
     }
+  }
 
   div.avatar {
     padding-top: 1rem;

js/src/graphql/discussion.ts

@@ -57,6 +57,7 @@ export const DISCUSSION_FIELDS_FRAGMENT = gql`
     lastComment {
       id
       text
+      insertedAt
       updatedAt
     }
     actor {

js/src/i18n/en_US.json

@@ -762,5 +762,7 @@
   "Leave group": "Leave group",
   "Remove": "Remove",
   "Update": "Update",
-  "Search…": "Search…"
+  "Search…": "Search…",
+  "Edited {ago}": "Edited {ago}",
+  "[This comment has been deleted by it's author]": "[This comment has been deleted by it's author]"
 }

js/src/i18n/fr_FR.json

@@ -763,5 +763,7 @@
   "{title} ({count} todos)": "{title} ({count} todos)",
   "© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap",
   "Update": "Éditer",
-  "Search…": "Rechercher…"
+  "Search…": "Rechercher…",
+  "Edited {ago}": "Édité {ago}",
+  "[This comment has been deleted by it's author]": "[Ce commentaire a été supprimé par son auteur]"
 }

js/src/types/comment.model.ts

@@ -59,7 +59,7 @@ export class CommentModel implements IComment {
     this.actor = hash.actor ? new Actor(hash.actor) : new Actor();
     this.event = new EventModel(hash.event);
     this.replies = hash.replies;
-    this.updatedAt = hash.updatedAt;
+    this.updatedAt = new Date(hash.updatedAt as string);
     this.deletedAt = hash.deletedAt;
     this.insertedAt = new Date(hash.insertedAt as string);
     this.totalReplies = hash.totalReplies;