✨ Site > Chat > Add associated file to messages

lib/chat.js

@@ -60,6 +60,7 @@ class Chat
                 broadcastMessage.time = data.time
                 broadcastMessage.text = data.text
                 broadcastMessage.file = data.file
+                broadcastMessage.version = data.version
                 broadcastMessage.line = data.line
                 broadcastMessage.user = user
 
@@ -190,6 +191,7 @@ class Chat
             data.time = new Date()
             data.text = `message ${counting++}`
             data.file = null
+            data.version = null
             data.line = null
             this.messages.push(data)
 
@@ -199,6 +201,7 @@ class Chat
             broadcastMessage.time = data.time
             broadcastMessage.text = data.text
             broadcastMessage.file = data.file
+            broadcastMessage.version = data.version
             broadcastMessage.line = data.line
             broadcastMessage.user = userA
 

site/src/components/chat/script.js

@@ -7,13 +7,22 @@ export default
         return {
             userName: '',
             messageText: '',
-            open: false,
             unreadCount: 0
         }
     },
 
     computed:
     {
+        open()
+        {
+            return this.$store.state.chat.open
+        },
+
+        question()
+        {
+            return this.$store.state.chat.question
+        },
+
         messages()
         {
             return this.$store.state.chat.messages
@@ -64,7 +73,7 @@ export default
     {
         onHeaderClick()
         {
-            this.open = !this.open
+            this.$store.commit('toggleChat')
 
             // Reset unread count
             if(this.open)
@@ -89,14 +98,30 @@ export default
 
         onMessageTextKeyDown(event)
         {
-            // Blur if enter pressed
+            // Enter key pressed
             if(event.keyCode === 13)
             {
                 event.preventDefault()
+
+                // Blur
                 event.target.blur()
 
-                this.$store.commit('setPendingMessage', { text: this.messageText })
+                // Create and send message
+                const message = {}
+                message.text = this.messageText
+
+                if(this.question)
+                {
+                    message.file = this.question.file
+                    message.line = this.question.line
+                    message.version = this.question.version
+                }
+
+                this.$store.commit('setPendingMessage', message)
                 this.messageText = ''
+
+                // Reset question
+                this.$store.commit('setQuestion', null)
             }
         },
 
@@ -109,6 +134,22 @@ export default
             {
                 this.unreadCount = 0
             }
+        },
+
+        onQuestionRemoveClick()
+        {
+            this.$store.commit('setQuestion', null)
+        },
+
+        onFileClick(file, version, line)
+        {
+            this.$store.commit('setFile', file)
+            this.$store.commit('setLine', line)
+
+            window.requestAnimationFrame(() =>
+            {
+                this.$store.commit('setVersion', version)
+            })
         }
     }
 }

site/src/components/chat/style.styl

@@ -2,6 +2,7 @@
     position fixed
     bottom 0
     right 90px
+    background #fff
 
 .header
     cursor pointer

site/src/components/chat/template.html

@@ -12,6 +12,9 @@
                     <div class="user" :style="`color: ${message.user.color};`">
                         {{ message.user.name }}
                     </div>
+                    <a href="#" class="file" v-if="message.file && message.line" @click.prevent="onFileClick(message.file, message.version, message.line)">
+                        {{ message.file }}:{{ message.line }}
+                    </a>
                     <div class="text">
                         {{ message.text }}
                     </div>
@@ -21,6 +24,11 @@
         <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="question" v-if="question">
+            Question:
+            <span class="question-file">{{ question.file }}:{{ question.line }}</span>
+            <a href="#" class="remove" @click.prevent="onQuestionRemoveClick">x</a>
+        </div>
         <div class="message">
             <textarea class="text" v-model="messageText" @keydown="onMessageTextKeyDown($event)"></textarea>
         </div>

site/src/components/files-tree-file/script.js

@@ -65,6 +65,7 @@ export default
         onNameClick()
         {
             this.$store.commit('setFile', this.content.path.full)
+            this.$store.commit('setLine', null)
         }
     }
 }

site/src/components/versions/script.js

@@ -71,6 +71,7 @@ export default
             this.file.isChanged = false
 
             this.$store.commit('setVersion', version)
+            this.$store.commit('setLine', null)
         }
     }
 }

site/src/components/viewer/script.js

@@ -28,6 +28,7 @@ export default
         {
             const lines = []
             const lineBreaks = (this.version.content.match(/\n/g) || []).length + 1
+            const currentLine = this.$store.state.files.currentLine
 
             // Create all lines
             for(let i = 0; i < lineBreaks; i++)
@@ -36,6 +37,7 @@ export default
                 line.index = lines.length + 1
                 line.added = false
                 line.removed = false
+                line.active = currentLine !== null && i === currentLine - 1
 
                 lines.push(line)
             }
@@ -134,6 +136,16 @@ export default
                     }
                 }
             }
+        },
+
+        onLineClick(index)
+        {
+            const question = {}
+            question.line = index
+            question.version = this.version.date
+            question.file = this.$store.state.files.current.path.full
+            this.$store.commit('setQuestion', question)
+            this.$store.commit('openChat')
         }
     }
 }

site/src/components/viewer/style.styl

@@ -32,7 +32,6 @@
     position absolute
     top 0
     left 0
-    pointer-events none
 
     .line
         position relative
@@ -40,6 +39,7 @@
         opacity 0.75
         letter-spacing -1px
         padding-left 25px
+        cursor pointer
 
         .added
             position absolute
@@ -48,11 +48,30 @@
             color #00ffa5
 
         .removed
+            position absolute
             top -10px
             left 9px
-            position absolute
             color #ff8157
 
+        .question
+            display none
+            position absolute
+            top 0
+            right -8px
+            font-size 12px
+            color #00d8ff
+
+        .active
+            position absolute
+            top 0
+            right -14px
+            font-size 12px
+            color #00d8ff
+
+        &:hover
+            .question
+                display block
+
 .code
     position absolute
     top 0

site/src/components/viewer/template.html

@@ -1,10 +1,12 @@
 <div class="viewer" v-if="version">
     <pre class="code" v-highlightjs="version.content" contenteditable @keydown="onCodeKeyDown($event)"><code :class="[ extension ]"></code></pre>
     <div class="lines">
-        <div class="line" v-for="line in lines">
+        <div class="line" v-for="line in lines" @click.prevent="onLineClick(line.index)">
-            <div class="added" v-if="line.added && differencesActive">+</div>
+            <span class="added" v-if="line.added && differencesActive">+</span>
-            <div class="removed" v-if="line.removed && differencesActive">-</div>
+            <span class="removed" v-if="line.removed && differencesActive">-</span>
             <span class="index">{{ line.index }}.</span>
+            <span class="question">?</span>
+            <span class="active" v-if="line.active">!</span>
         </div>
     </div>
 </div>

site/src/store/modules/chat.js

@@ -1,11 +1,13 @@
 export default {
     state:
     {
+        open: false,
         user: null,
         pendingUser: null,
         messages: [],
         pendingMessage: null,
-        pendingAlert: null
+        pendingAlert: null,
+        question: null
     },
 
     mutations:
@@ -39,6 +41,26 @@ export default {
         {
             const date = new Date()
             state.pendingAlert = { date }
+        },
+
+        setQuestion(state, data)
+        {
+            state.question = data
+        },
+
+        openChat(state)
+        {
+            state.open = true
+        },
+
+        closeChat(state)
+        {
+            state.open = false
+        },
+
+        toggleChat(state)
+        {
+            state.open = !state.open
         }
     }
 }

site/src/store/modules/files.js

@@ -6,6 +6,7 @@ export default {
         tree: new FileTree({ autoWash: true }),
         current: null,
         currentVersion: null,
+        currentLine: null,
         search: ''
     },
 
@@ -37,8 +38,10 @@ export default {
 
         setFile(state, data)
         {
+            // Retrieve file from path
             const file = state.tree.getFile(data)
 
+            // No current file or file different than current
             if(!state.current || state.current.id !== file.id)
             {
                 state.current = file
@@ -59,8 +62,30 @@ export default {
         },
 
         setVersion(state, data)
+        {
+            // Date sent
+            if(typeof data === 'string')
+            {
+                // Find version by date
+                const version = state.current.versions.find((version) => version.date === data)
+
+                // Found
+                if(version)
+                {
+                    state.currentVersion = version
+                }
+            }
+
+            // Version directly sent
+            else
             {
                 state.currentVersion = data
+            }
+        },
+
+        setLine(state, data)
+        {
+            state.currentLine = data
         },
 
         searchFile(state, data)