✨ 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
+    border none
+
+.messages
+    height 300px
+    overflow-y scroll

site/src/components/chat/template.html

@@ -1,24 +1,26 @@
 <div class="chat">
-    <header>
+    <header class="header" @click="onHeaderClick">
         Discussions
     </header>
-    <div class="messages">
-        <div class="message" v-for="message of messages" :key="message.date">
-            <div class="date">
-                {{ message.time }}
-            </div>
-            <div class="user" :style="`color: ${message.user.color};`">
-                {{ message.user.name }}
-            </div>
-            <div class="text">
-                {{ message.text }}
+    <div class="content" v-show="open">
+        <div class="messages">
+            <div class="message" v-for="message of messages" :key="message.date">
+                <div class="date">
+                    {{ message.time }}
+                </div>
+                <div class="user" :style="`color: ${message.user.color};`">
+                    {{ message.user.name }}
+                </div>
+                <div class="text">
+                    {{ message.text }}
+                </div>
             </div>
         </div>
-    </div>
-    <div class="infos" v-if="user">
-        Your nickname is <input class="user-name" :style="`color: ${user.color};`" v-model="userName" @change="onUserNameChange($event)" @keydown="onUserNameKeyDown($event)"/>
-    </div>
-    <div class="message">
-        <textarea class="text" v-model="messageText" @keydown="onMessageTextKeyDown($event)"></textarea>
+        <div class="infos" v-if="user">
+            Your nickname is <input class="user-name" :style="`color: ${user.color};`" v-model="userName" @change="onUserNameChange($event)" @keydown="onUserNameKeyDown($event)"/>
+        </div>
+        <div class="message">
+            <textarea class="text" v-model="messageText" @keydown="onMessageTextKeyDown($event)"></textarea>
+        </div>
     </div>
 </div>