Improve comment tree

Closes #862

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

js/src/components/Comment/CommentTree.vue

@@ -45,8 +45,8 @@
             type="is-primary"
             class="comment-button-submit"
             icon-left="send"
-            :aria-label="$t('Post a comment')"
+            >{{ $t("Send") }}</b-button
-          />
+          >
         </div>
       </article>
     </form>
@@ -63,7 +63,7 @@
       <transition-group
         key="list"
         name="comment-list"
-        v-if="comments.length"
+        v-if="filteredOrderedComments.length"
         class="comment-list"
         tag="ul"
       >
@@ -77,9 +77,9 @@
           @delete-comment="deleteComment"
         />
       </transition-group>
-      <div v-else class="no-comments" key="no-comments">
+      <empty-content v-else icon="comment" key="no-comments" :inline="true">
         <span>{{ $t("No comments yet") }}</span>
-      </div>
+      </empty-content>
     </transition-group>
   </div>
 </template>
@@ -99,6 +99,7 @@ import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
 import { IPerson } from "../../types/actor";
 import { IEvent } from "../../types/event.model";
 import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
+import EmptyContent from "@/components/Utils/EmptyContent.vue";
 
 @Component({
   apollo: {
@@ -119,6 +120,7 @@ import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
   components: {
     Comment,
     IdentityPickerWrapper,
+    EmptyContent,
     editor: () =>
       import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
   },
@@ -364,13 +366,25 @@ export default class CommentTree extends Vue {
 
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
+@import "~bulma/sass/utilities/mixins.sass";
 form.new-comment {
   padding-bottom: 1rem;
 
+  .media {
+    flex-wrap: wrap;
+    justify-content: center;
+    .media-left {
+      @include mobile {
+        @include margin-right(0.5rem);
+        @include margin-left(0.5rem);
+      }
+    }
+
     .media-content {
       display: flex;
       align-items: center;
       align-content: center;
+      width: min-content;
 
       .field {
         flex: 1;
@@ -382,6 +396,7 @@ form.new-comment {
         }
       }
     }
+  }
 }
 
 .no-comments {

js/tests/unit/specs/components/Comment/CommentTree.spec.ts

@@ -162,7 +162,9 @@ describe("CommentTree", () => {
       requestHandlers.eventCommentThreadsQueryHandler
     ).toHaveBeenCalledWith({ eventUUID: eventData.uuid });
 
-    expect(wrapper.find(".no-comments").text()).toBe("No comments yet");
+    expect(wrapper.findComponent({ name: "EmptyContent" }).text()).toBe(
+      "No comments yet"
+    );
     expect(wrapper.html()).toMatchSnapshot();
   });
 });

js/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap

@@ -20,7 +20,7 @@ exports[`CommentTree renders a comment tree with comments 1`] = `
         </div>
       </div>
       <div class="send-comment">
-        <b-button-stub type="is-primary" iconleft="send" nativetype="submit" tag="button" aria-label="Post a comment" class="comment-button-submit"></b-button-stub>
+        <b-button-stub type="is-primary" iconleft="send" nativetype="submit" tag="button" class="comment-button-submit">Send</b-button-stub>
       </div>
     </article>
   </form>
@@ -62,12 +62,12 @@ exports[`CommentTree renders an empty comment tree 1`] = `
         </div>
       </div>
       <div class="send-comment">
-        <b-button-stub type="is-primary" iconleft="send" nativetype="submit" tag="button" aria-label="Post a comment" class="comment-button-submit"></b-button-stub>
+        <b-button-stub type="is-primary" iconleft="send" nativetype="submit" tag="button" class="comment-button-submit">Send</b-button-stub>
       </div>
     </article>
   </form>
   <transition-group-stub tag="div" name="comment-empty-list">
-    <div class="no-comments"><span>No comments yet</span></div>
+    <empty-content-stub icon="comment" inline="true"><span>No comments yet</span></empty-content-stub>
   </transition-group-stub>
 </div>
 `;