✨ Site > Chat > Add associated file to messages

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

@@ -64,13 +64,14 @@ export default
             this.keepLatest = true
             this.$store.commit('setVersion', this.versions[0])
         },
-        
+
         onVersionClick(version, index)
         {
             this.keepLatest = index === 0
             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="added" v-if="line.added && differencesActive">+</div>
-            <div class="removed" v-if="line.removed && differencesActive">-</div>
+        <div class="line" v-for="line in lines" @click.prevent="onLineClick(line.index)">
+            <span class="added" v-if="line.added && differencesActive">+</span>
+            <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>