From b1ab0dabbe480e2982927e4f26ddfb5915c42021 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 7 Sep 2021 17:55:25 +0200
Subject: [PATCH] Discussions views improvements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/Discussions/Create.vue     | 59 +++++++++++++++++++++++--
 js/src/views/Discussions/Discussion.vue | 58 +++++++++++++++---------
 2 files changed, 91 insertions(+), 26 deletions(-)

diff --git a/js/src/views/Discussions/Create.vue b/js/src/views/Discussions/Create.vue
index a5ae11bf0..f2a0bbc71 100644
--- a/js/src/views/Discussions/Create.vue
+++ b/js/src/views/Discussions/Create.vue
@@ -1,14 +1,57 @@
 <template>
   <section class="section container">
-    <h1>{{ $t("Create a discussion") }}</h1>
+    <nav class="breadcrumb" aria-label="breadcrumbs">
+      <ul v-if="group">
+        <li>
+          <router-link :to="{ name: RouteName.MY_GROUPS }">{{
+            $t("My groups")
+          }}</router-link>
+        </li>
+        <li>
+          <router-link
+            :to="{
+              name: RouteName.GROUP,
+              params: { preferredUsername: usernameWithDomain(group) },
+            }"
+            >{{ group.name }}</router-link
+          >
+        </li>
+        <li>
+          <router-link
+            :to="{
+              name: RouteName.DISCUSSION_LIST,
+              params: { preferredUsername: usernameWithDomain(group) },
+            }"
+            >{{ $t("Discussions") }}</router-link
+          >
+        </li>
+        <li class="is-active">
+          <router-link
+            :to="{
+              name: RouteName.CREATE_DISCUSSION,
+              params: { preferredUsername: usernameWithDomain(group) },
+            }"
+            >{{ $t("Create") }}</router-link
+          >
+        </li>
+      </ul>
+      <b-skeleton v-else-if="$apollo.loading" :animated="animated"></b-skeleton>
+    </nav>
+    <h1 class="title">{{ $t("Create a discussion") }}</h1>
 
     <form @submit.prevent="createDiscussion">
       <b-field
         :label="$t('Title')"
+        label-for="discussion-title"
         :message="errors.title"
         :type="errors.title ? 'is-danger' : undefined"
       >
-        <b-input aria-required="true" required v-model="discussion.title" />
+        <b-input
+          aria-required="true"
+          required
+          v-model="discussion.title"
+          id="discussion-title"
+        />
       </b-field>
 
       <b-field :label="$t('Text')">
@@ -24,7 +67,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { IGroup, IPerson } from "@/types/actor";
+import { IGroup, IPerson, usernameWithDomain } from "@/types/actor";
 import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
 import { FETCH_GROUP } from "@/graphql/group";
 import { CREATE_DISCUSSION } from "@/graphql/discussion";
@@ -66,6 +109,10 @@ export default class CreateDiscussion extends Vue {
 
   errors = { title: "" };
 
+  RouteName = RouteName;
+
+  usernameWithDomain = usernameWithDomain;
+
   async createDiscussion(): Promise<void> {
     this.errors = { title: "" };
     try {
@@ -100,7 +147,11 @@ export default class CreateDiscussion extends Vue {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
+.container.section {
+  background: $white;
+}
+
 .markdown-render h1 {
   font-size: 2em;
 }
diff --git a/js/src/views/Discussions/Discussion.vue b/js/src/views/Discussions/Discussion.vue
index aa4999b6e..411bcebdb 100644
--- a/js/src/views/Discussions/Discussion.vue
+++ b/js/src/views/Discussions/Discussion.vue
@@ -46,23 +46,27 @@
     </b-message>
     <section>
       <div class="discussion-title">
-        <h2 class="title" v-if="discussion.title && !editTitleMode">
+        <h1 class="title" v-if="discussion.title && !editTitleMode">
           {{ discussion.title }}
-          <span
-            v-if="
-              currentActor.id === discussion.creator.id ||
-              isCurrentActorAGroupModerator
-            "
-            @click="
-              () => {
-                newTitle = discussion.title;
-                editTitleMode = true;
-              }
-            "
-          >
-            <b-icon icon="pencil" />
-          </span>
-        </h2>
+        </h1>
+        <b-button
+          icon-right="pencil"
+          size="is-small"
+          :title="$t('Update discussion title')"
+          v-if="
+            discussion.creator &&
+            !editTitleMode &&
+            (currentActor.id === discussion.creator.id ||
+              isCurrentActorAGroupModerator)
+          "
+          @click="
+            () => {
+              newTitle = discussion.title;
+              editTitleMode = true;
+            }
+          "
+        >
+        </b-button>
         <b-skeleton
           v-else-if="!editTitleMode && $apollo.loading"
           height="50px"
@@ -73,12 +77,19 @@
           @submit.prevent="updateDiscussion"
           class="title-edit"
         >
-          <b-input :value="discussion.title" v-model="newTitle" />
+          <b-field :label="$t('Title')" label-for="discussion-title">
+            <b-input
+              :value="discussion.title"
+              v-model="newTitle"
+              id="discussion-title"
+            />
+          </b-field>
           <div class="buttons">
             <b-button
               type="is-primary"
               native-type="submit"
               icon-right="check"
+              :title="$t('Update discussion title')"
             />
             <b-button
               @click="
@@ -88,6 +99,7 @@
                 }
               "
               icon-right="close"
+              :title="$t('Cancel discussion title edition')"
             />
             <b-button
               @click="openDeleteDiscussionConfirmation"
@@ -489,15 +501,17 @@ div.container.section {
   padding: 1rem 5% 4rem;
 
   div.discussion-title {
-    margin-bottom: 0.75rem;
+    margin-bottom: 1.75rem;
+    display: flex;
+    align-items: center;
 
-    h2.title {
-      span {
-        cursor: pointer;
-      }
+    h1.title {
+      margin-bottom: 0;
+      margin-right: 10px;
     }
 
     form.title-edit {
+      flex: 1;
       div.control {
         margin-bottom: 0.75rem;
       }