Improve comment section

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

js/src/components/Comment/Comment.vue

@@ -1,24 +1,27 @@
 <template>
   <li :class="{ reply: comment.inReplyToComment }">
-    <article
-      class="media"
-      :class="{ selected: commentSelected, organizer: commentFromOrganizer }"
-      :id="commentId"
-    >
-      <figure class="media-left" v-if="!comment.deletedAt && comment.actor.avatar">
-        <p class="image is-48x48">
-          <img :src="comment.actor.avatar.url" alt="" />
-        </p>
-      </figure>
-      <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
+    <article class="media" :class="{ selected: commentSelected }" :id="commentId">
+      <popover-actor-card :actor="comment.actor" :inline="true" v-if="comment.actor">
+        <figure class="media-left" v-if="!comment.deletedAt && comment.actor.avatar">
+          <p class="image is-48x48 is-rounded">
+            <img :src="comment.actor.avatar.url" alt="" />
+          </p>
+        </figure>
+        <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
+      </popover-actor-card>
+      <div v-else>
+        <figure class="media-left" v-if="!comment.deletedAt && comment.actor.avatar">
+          <p class="image is-48x48 is-rounded">
+            <img :src="comment.actor.avatar.url" alt="" />
+          </p>
+        </figure>
+        <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
+      </div>
       <div class="media-content">
         <div class="content">
           <span class="first-line" v-if="!comment.deletedAt">
-            <strong>{{ comment.actor.name }}</strong>
-            <small v-if="comment.actor.domain"
-              >@{{ comment.actor.preferredUsername }}@{{ comment.actor.domain }}</small
-            >
-            <small v-else>@{{ comment.actor.preferredUsername }}</small>
+            <strong :class="{ organizer: commentFromOrganizer }">{{ comment.actor.name }}</strong>
+            <small>@{{ usernameWithDomain(comment.actor) }}</small>
             <a class="comment-link has-text-grey" :href="commentURL">
               <small>{{ timeago(new Date(comment.updatedAt)) }}</small>
             </a>
@@ -55,7 +58,11 @@
         </div>
         <nav
           class="reply-action level is-mobile"
-          v-if="currentActor.id && event.options.commentModeration !== CommentModeration.CLOSED"
+          v-if="
+            currentActor.id &&
+            event.options.commentModeration !== CommentModeration.CLOSED &&
+            !comment.deletedAt
+          "
         >
           <div class="level-left">
             <span
@@ -100,17 +107,22 @@
         </div>
       </article>
     </form>
-    <transition-group name="comment-replies" v-if="showReplies" class="comment-replies" tag="ul">
-      <comment
-        class="reply"
-        v-for="reply in comment.replies"
-        :key="reply.id"
-        :comment="reply"
-        :event="event"
-        @create-comment="$emit('create-comment', $event)"
-        @delete-comment="$emit('delete-comment', $event)"
-      />
-    </transition-group>
+    <div class="replies">
+      <div class="left">
+        <div class="vertical-border" @click="showReplies = false" />
+      </div>
+      <transition-group name="comment-replies" v-if="showReplies" class="comment-replies" tag="ul">
+        <comment
+          class="reply"
+          v-for="reply in comment.replies"
+          :key="reply.id"
+          :comment="reply"
+          :event="event"
+          @create-comment="$emit('create-comment', $event)"
+          @delete-comment="$emit('delete-comment', $event)"
+        />
+      </transition-group>
+    </div>
   </li>
 </template>
 <script lang="ts">
@@ -119,12 +131,13 @@ import EditorComponent from "@/components/Editor.vue";
 import TimeAgo from "javascript-time-ago";
 import { CommentModel, IComment } from "../../types/comment.model";
 import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
-import { IPerson } from "../../types/actor";
+import { IPerson, usernameWithDomain } from "../../types/actor";
 import { COMMENTS_THREADS, FETCH_THREAD_REPLIES } from "../../graphql/comment";
 import { IEvent, CommentModeration } from "../../types/event.model";
 import ReportModal from "../Report/ReportModal.vue";
 import { IReport } from "../../types/report.model";
 import { CREATE_REPORT } from "../../graphql/report";
+import PopoverActorCard from "../../components/Account/PopoverActorCard.vue";
 
 @Component({
   apollo: {
@@ -135,6 +148,7 @@ import { CREATE_REPORT } from "../../graphql/report";
   components: {
     editor: () => import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
     comment: () => import(/* webpackChunkName: "comment" */ "./Comment.vue"),
+    PopoverActorCard,
   },
 })
 export default class Comment extends Vue {
@@ -158,6 +172,8 @@ export default class Comment extends Vue {
 
   CommentModeration = CommentModeration;
 
+  usernameWithDomain = usernameWithDomain;
+
   async mounted() {
     const localeName = this.$i18n.locale;
     const locale = await import(`javascript-time-ago/locale/${localeName}`);
@@ -302,9 +318,22 @@ form.reply {
 }
 
 .first-line {
+  margin-bottom: 3px;
+
   * {
     padding: 0 5px 0 0;
   }
+
+  strong.organizer {
+    background: $primary;
+    border-radius: 12px;
+    color: white;
+    padding: 0 6px;
+  }
+
+  & > small {
+    margin-left: 0.3rem;
+  }
 }
 
 .editor-line {
@@ -322,8 +351,27 @@ form.reply {
   color: hsl(0, 0%, 21%);
 }
 
-.root-comment .comment-replies > .reply {
-  padding-left: 3rem;
+.root-comment .replies {
+  display: flex;
+
+  .left {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-right: 10px;
+
+    .vertical-border {
+      width: 3px;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.05);
+      margin: 10px calc(1rem + 1px);
+      cursor: pointer;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
 }
 
 .media .media-content {
@@ -353,13 +401,11 @@ form.reply {
 
 article {
   border-radius: 4px;
+  margin-bottom: 5px;
 
   &.selected {
     background-color: lighten($secondary, 30%);
   }
-  &.organizer:not(.selected) {
-    background-color: lighten($primary, 50%);
-  }
 }
 
 .comment-replies-enter-active,

js/src/components/Editor.vue

@@ -443,7 +443,6 @@ export default class EditorComponent extends Vue {
   replyToComment(comment: IComment) {
     const actorModel = new Actor(comment.actor);
     if (!this.editor) return;
-    console.log(this.editor.commands);
     this.editor.commands.mention({
       id: actorModel.id,
       label: actorModel.usernameWithDomain().substring(1),
@@ -697,12 +696,19 @@ $color-white: #eee;
   font-size: 0.9rem;
   font-weight: bold;
   border-radius: 5px;
-  padding: 0.2rem 0.5rem;
+  padding: 0.2rem;
   white-space: nowrap;
+  margin-right: 0.2rem;
 }
 .mention-suggestion {
   color: rgba($color-black, 0.6);
 }
+
+.mention .mention {
+  background: initial;
+  margin-right: 0;
+}
+
 .suggestion-list {
   padding: 0.2rem;
   border: 2px solid rgba($color-black, 0.1);

js/src/components/Event/ShareEventModal.vue

@@ -40,7 +40,7 @@
 import { Component, Prop, Vue } from "vue-property-decorator";
 import { IEvent } from "../../types/event.model";
 // @ts-ignore
-import DiasporaLogo from "../../assets/diaspora-icon.svg";
+import DiasporaLogo from "../../assets/diaspora-icon.svg?inline";
 
 @Component({
   components: {

js/src/graphql/comment.ts

@@ -17,6 +17,7 @@ export const COMMENT_FIELDS_FRAGMENT = gql`
       domain
       preferredUsername
       name
+      summary
     }
     totalReplies
     updatedAt
@@ -58,11 +59,11 @@ export const COMMENTS_THREADS = gql`
       id
       uuid
       comments {
-        ...CommentRecursive
+        ...CommentFields
       }
     }
   }
-  ${COMMENT_RECURSIVE_FRAGMENT}
+  ${COMMENT_FIELDS_FRAGMENT}
 `;
 
 export const CREATE_COMMENT_FROM_EVENT = gql`

js/src/variables.scss

@@ -6,38 +6,30 @@ $primary-invert: findColorInvert($primary);
 $secondary: #ffd599;
 $secondary-invert: findColorInvert($secondary);
 
-$success: #0eccaf;
+$success: #1E7D97;
 $success-invert: findColorInvert($success);
 $info: #36bcd4;
 $info-invert: findColorInvert($info);
 $danger: #ff7061;
 $danger-invert: findColorInvert($danger);
 
-$colors: map-merge(
-  $colors,
-  (
-    "primary": (
-      $primary,
+$colors: map-merge($colors,
+  ("primary": ($primary,
       $primary-invert,
     ),
-    "secondary": (
-      $secondary,
+    "secondary": ($secondary,
       $secondary-invert,
     ),
-    "success": (
-      $success,
+    "success": ($success,
       $success-invert,
     ),
-    "info": (
-      $info,
+    "info": ($info,
       $info-invert,
     ),
-    "danger": (
-      $danger,
+    "danger": ($danger,
       $danger-invert,
     ),
-  )
-);
+  ));
 
 // Navbar
 $navbar-background-color: $secondary;
@@ -52,25 +44,34 @@ $body-background-color: #efeef4;
 $fullhd-enabled: false;
 $hero-body-padding-medium: 6rem 1.5rem;
 
-main > .container {
+main>.container {
   background: $body-background-color;
 }
 
 $title-color: #3c376e;
-$title-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
-  serif;
+$title-family: "Liberation Sans",
+"Helvetica Neue",
+Roboto,
+Helvetica,
+Arial,
+serif;
 $title-weight: 700;
 $title-size: 40px;
 $title-sub-size: 45px;
 $title-sup-size: 30px;
 
 $subtitle-color: #3a384c;
-$subtitle-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
-  serif;
+$subtitle-family: "Liberation Sans",
+"Helvetica Neue",
+Roboto,
+Helvetica,
+Arial,
+serif;
 $subtitle-weight: 400;
 $subtitle-size: 32px;
 $subtitle-sub-size: 30px;
 $subtitle-sup-size: 15px;
+
 .title {
   margin: 30px auto 45px;
 }
@@ -80,4 +81,4 @@ $subtitle-sup-size: 15px;
   display: inline;
   padding: 3px 8px;
   margin: 15px auto 30px;
-}
+}

js/src/views/Moderation/Report.vue

@@ -40,6 +40,7 @@
                     v-if="report.reported.avatar"
                     class="image"
                     :src="report.reported.avatar.url"
+                    alt=""
                   />
                   @{{ report.reported.preferredUsername }}
                 </router-link>
@@ -61,6 +62,7 @@
                     v-if="report.reporter.avatar"
                     class="image"
                     :src="report.reporter.avatar.url"
+                    alt=""
                   />
                   @{{ report.reporter.preferredUsername }}
                 </router-link>
@@ -188,8 +190,8 @@
       </div>
 
       <form @submit="addNote()">
-        <b-field :label="$t('New note')">
-          <b-input type="textarea" v-model="noteContent"></b-input>
+        <b-field :label="$t('New note')" label-for="newNoteInput">
+          <b-input type="textarea" v-model="noteContent" id="newNoteInput"></b-input>
         </b-field>
         <b-button type="submit" @click="addNote">{{ $t("Add a note") }}</b-button>
       </form>