✨ Site > Chat > Add toggle

site/src/components/application/script.js

@@ -13,31 +13,11 @@ export default
         Project
     },
 
-    data()
-    {
-        return {
-            counter: 0
-        }
-    },
-
     computed:
     {
-        projects()
-        {
-            return this.$store.state.projects.all
-        },
-
         project()
         {
             return this.$store.state.projects.current
         }
-    },
-
-    mounted()
-    {
-        window.setInterval(() =>
-        {
-            this.counter++
-        }, 1000)
     }
 }

site/src/components/application/template.html

@@ -1,5 +1,4 @@
 <div id="application">
-    {{ counter }}
     <connexion></connexion>
     <projects></projects>
     <project v-if="project"></project>

site/src/components/chat/script.js

@@ -6,7 +6,8 @@ export default
     {
         return {
             userName: '',
-            messageText: ''
+            messageText: '',
+            open: false
         }
     },
 
@@ -37,6 +38,11 @@ export default
 
     methods:
     {
+        onHeaderClick()
+        {
+            this.open = !this.open
+        },
+
         onUserNameChange()
         {
             this.$store.commit('setPendingUser', { name: this.userName })

site/src/components/chat/style.styl

@@ -3,6 +3,13 @@
     bottom 0
     right 20px
 
+.header
+    cursor pointer
+
 .user-name
     outline none
     border none
+
+.messages
+    height 300px
+    overflow-y scroll

site/src/components/chat/template.html

@@ -1,7 +1,8 @@
 <div class="chat">
-    <header>
+    <header class="header" @click="onHeaderClick">
         Discussions
     </header>
+    <div class="content" v-show="open">
         <div class="messages">
             <div class="message" v-for="message of messages" :key="message.date">
                 <div class="date">
@@ -21,4 +22,5 @@
         <div class="message">
             <textarea class="text" v-model="messageText" @keydown="onMessageTextKeyDown($event)"></textarea>
         </div>
+    </div>
 </div>