add markdown-formatting link - hide textarea if guidelines not accepting - chat ui

website/client/components/groups/chat.vue

@@ -1,9 +1,10 @@
 <template lang="pug">
   .row.chat-row
     .col-12
-      h3(v-once) {{ label }}
+      h3.float-left.label(:class="{accepted: communityGuidelinesAccepted }") {{ label }}
+      div.float-right(v-markdown='$t("markdownFormattingHelp")')
 
-      .row
+      .row(v-if="communityGuidelinesAccepted")
         textarea(:placeholder='placeholder',
                   v-model='newMessage',
                   ref='user-entry',
@@ -22,14 +23,14 @@
                 :caretPosition = 'caretPosition',
                 :chat='group.chat')
 
+      community-guidelines
+
       .row.chat-actions
         .col-6.chat-receive-actions
           button.btn.btn-secondary.float-left.fetch(v-once, @click='fetchRecentMessages()') {{ $t('fetchRecentMessages') }}
           button.btn.btn-secondary.float-left(v-once, @click='reverseChat()') {{ $t('reverseChat') }}
         .col-6.chat-send-actions
-          button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }}
+          button.btn.btn-primary.send-chat.float-right(:disabled="!communityGuidelinesAccepted", @click='sendMessage()') {{ $t('send') }}
-
-      community-guidelines
 
       slot(
         name="additionRow",
@@ -46,9 +47,14 @@
   import autocomplete from '../chat/autoComplete';
   import communityGuidelines from './communityGuidelines';
   import chatMessage from '../chat/chatMessages';
+  import { mapState } from 'client/libs/store';
+  import markdownDirective from 'client/directives/markdown';
 
   export default {
     props: ['label', 'group', 'placeholder'],
+    directives: {
+      markdown: markdownDirective,
+    },
     components: {
       autocomplete,
       communityGuidelines,
@@ -71,9 +77,13 @@
       };
     },
     computed: {
+      ...mapState({user: 'user.data'}),
       currentLength () {
         return this.newMessage.length;
       },
+      communityGuidelinesAccepted () {
+        return this.user.flags.communityGuidelinesAccepted;
+      },
     },
     methods: {
       // https://medium.com/@_jh3y/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a
@@ -196,6 +206,16 @@
   .chat-row {
     position: relative;
 
+    .label:not(.accepted) {
+      color: #a5a1ac;
+    }
+
+    .row {
+      margin-left: 0;
+      margin-right: 0;
+      clear: both;
+    }
+
     textarea {
       min-height: 150px;
       width: 100%;
@@ -204,7 +224,7 @@
       font-style: italic;
       line-height: 1.43;
       color: $gray-300;
-      padding: .5em;
+      padding: 10px 12px;
     }
 
     .user-entry {

website/client/components/groups/communityGuidelines.vue

@@ -11,17 +11,31 @@
 
 .community-guidelines {
   background-color: rgba(135, 129, 144, 0.84);
-  padding: 1em;
+  padding-left: 0;
+  padding-right: 0;
   color: $white;
-  position: absolute;
-  top: 0;
-  height: 150px;
-  margin-top: 2.3em;
   width: 100%;
+  // width: calc(100% - 24px);
   border-radius: 4px;
   align-items: center;
   justify-content: center;
 
+  .col {
+    padding: 20px 24px;
+  }
+
+  a {
+    text-decoration: underline;
+    color: $white;
+    font-weight: bold;
+  }
+
+  button {
+    margin: 20px 12px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+
   .btn-follow-guidelines {
     white-space: pre-line;
   }