✨ Site > Chat > Add associated file to messages

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>