WIP notification settings

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

js/src/components/Comment/Comment.vue

@@ -6,32 +6,26 @@
       :id="commentId"
     >
       <popover-actor-card
-        class="media-left"
         :actor="comment.actor"
         :inline="true"
         v-if="comment.actor"
       >
         <figure
-          class="image is-48x48"
+          class="image is-32x32 media-left"
           v-if="!comment.deletedAt && comment.actor.avatar"
         >
           <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
         </figure>
-        <b-icon
-          class="media-left"
-          v-else
-          size="is-large"
-          icon="account-circle"
-        />
+        <b-icon class="media-left" v-else icon="account-circle" />
       </popover-actor-card>
       <div v-else class="media-left">
         <figure
-          class="image is-48x48"
+          class="image is-32x32"
           v-if="!comment.deletedAt && comment.actor.avatar"
         >
           <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
         </figure>
-        <b-icon v-else size="is-large" icon="account-circle" />
+        <b-icon v-else icon="account-circle" />
       </div>
       <div class="media-content">
         <div class="content">
@@ -39,19 +33,21 @@
             <strong :class="{ organizer: commentFromOrganizer }">{{
               comment.actor.name
             }}</strong>
-            <small>@{{ usernameWithDomain(comment.actor) }}</small>
-            <a class="comment-link has-text-grey" :href="commentURL">
-              <small>{{
-                formatDistanceToNow(new Date(comment.updatedAt), {
-                  locale: $dateFnsLocale,
-                  addSuffix: true,
-                })
-              }}</small>
-            </a>
+            <small class="has-text-grey">{{
+              usernameWithDomain(comment.actor)
+            }}</small>
           </span>
           <a v-else class="comment-link has-text-grey" :href="commentURL">
             <span>{{ $t("[deleted]") }}</span>
           </a>
+          <a class="comment-link has-text-grey" :href="commentURL">
+            <small>{{
+              formatDistanceToNow(new Date(comment.updatedAt), {
+                locale: $dateFnsLocale,
+                addSuffix: true,
+              })
+            }}</small>
+          </a>
           <span class="icons" v-if="!comment.deletedAt">
             <button
               v-if="comment.actor.id === currentActor.id"
@@ -369,8 +365,17 @@ form.reply {
   }
 }
 
-.comment-link small:hover {
-  color: hsl(0, 0%, 21%);
+a.comment-link {
+  text-decoration: none;
+  margin-left: 5px;
+  &:hover {
+    text-decoration: underline;
+  }
+  small {
+    &:hover {
+      color: hsl(0, 0%, 21%);
+    }
+  }
 }
 
 .root-comment .replies {

js/src/components/Comment/CommentTree.vue

@@ -17,26 +17,34 @@
         </figure>
         <div class="media-content">
           <div class="field">
-            <p class="control">
-              <editor
-                ref="commenteditor"
-                mode="comment"
-                v-model="newComment.text"
-              />
-            </p>
-            <p class="help is-danger" v-if="emptyCommentError">
-              {{ $t("Comment text can't be empty") }}
-            </p>
-          </div>
-          <div class="send-comment">
-            <b-button
-              native-type="submit"
-              type="is-primary"
-              class="comment-button-submit"
-              >{{ $t("Post a comment") }}</b-button
-            >
+            <div class="field">
+              <p class="control">
+                <editor
+                  ref="commenteditor"
+                  mode="comment"
+                  v-model="newComment.text"
+                />
+              </p>
+              <p class="help is-danger" v-if="emptyCommentError">
+                {{ $t("Comment text can't be empty") }}
+              </p>
+            </div>
+            <div class="field notify-participants" v-if="isEventOrganiser">
+              <b-switch v-model="newComment.isAnnouncement">{{
+                $t("Notify participants")
+              }}</b-switch>
+            </div>
           </div>
         </div>
+        <div class="send-comment">
+          <b-button
+            native-type="submit"
+            type="is-primary"
+            class="comment-button-submit"
+            icon-left="send"
+            :aria-label="$t('Post a comment')"
+          />
+        </div>
       </article>
     </form>
     <b-notification v-else-if="isConnected" :closable="false">{{
@@ -157,6 +165,7 @@ export default class CommentTree extends Vue {
           inReplyToCommentId: comment.inReplyToComment
             ? comment.inReplyToComment.id
             : null,
+          isAnnouncement: comment.isAnnouncement,
         },
         update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
           if (data == null) return;
@@ -359,6 +368,10 @@ form.new-comment {
       flex: 1;
       padding-right: 10px;
       margin-bottom: 0;
+
+      &.notify-participants {
+        margin-top: 0.5rem;
+      }
     }
   }
 }