✨ Site > Viewer > Add line modifications

site/src/components/files-tree/style.styl

@@ -0,0 +1,7 @@
+.file-tree
+    position absolute
+    top 80px
+    bottom 0px
+    left 0
+    width 25%
+    overflow-y scroll

site/src/components/files-tree/template.html

@@ -1,7 +1,7 @@
-<div>
+<div class="file-tree">
     <input type="text" v-model="searchValue">
     <files-tree-folder v-for="folder of files.folders" :key="+ new Date()" :content="folder" :depth="0"></files-tree-folder>
     <div>
-    	<a href="#" class="all-read" @click.prevent="onAllReadClick">Mark all as read</a>
+         <a href="#" class="all-read" @click.prevent="onAllReadClick">Mark all as read</a>
     </div>
 </div>

site/src/components/versions/style.styl

@@ -4,4 +4,5 @@
     left 0
     width 25%
     height 100%
+    overflow-y scroll
     background rgba(255, 0, 0, 0.3)

site/src/components/viewer/script.js

@@ -23,9 +23,85 @@ export default
             return this.$store.state.files.currentVersion
         },
 
-        linesCount()
+        lines()
         {
-            return (this.$store.state.files.currentVersion.content.match(/\n/g) || []).length + 1
+            const lines = []
+            const lineBreaks = (this.version.content.match(/\n/g) || []).length + 1
+
+            // Create all lines
+            for(let i = 0; i < lineBreaks; i++)
+            {
+                const line = {}
+                line.index = lines.length + 1
+                line.added = false
+                line.removed = false
+
+                lines.push(line)
+            }
+
+            // Loop through each diff and add line infos
+            if(this.version.diff)
+            {
+                let lineProgress = 0
+
+                // Added lines and unchanged lines
+                for(const diffKey in this.version.diff)
+                {
+                    const diff = this.version.diff[diffKey]
+                    let lineBreaks = (diff.value.match(/\n/g) || []).length
+
+                    if(parseInt(diffKey) === this.version.diff.length - 1)
+                    {
+                        lineBreaks += 1
+                    }
+
+                    if(diff.added)
+                    {
+                        for(let i = 0; i < lineBreaks; i++)
+                        {
+                            const line = lines[lineProgress + i]
+                            line.added = true
+                        }
+                    }
+
+                    if(!diff.removed)
+                    {
+                        lineProgress += lineBreaks
+                    }
+                }
+
+                lineProgress = 0
+
+                // Removed lines
+                for(const diffKey in this.version.diff)
+                {
+                    const diff = this.version.diff[diffKey]
+                    let lineBreaks = (diff.value.match(/\n/g) || []).length
+
+                    if(parseInt(diffKey) === this.version.diff.length - 1)
+                    {
+                        lineBreaks += 1
+                    }
+
+                    if(diff.removed)
+                    {
+                        const line = lines[lineProgress]
+                        const nextLine = lines[lineProgress + 1]
+
+                        if(!line.added && (!nextLine || nextLine.added === false))
+                        {
+                            line.removed = true
+                        }
+                    }
+
+                    if(!diff.removed)
+                    {
+                        lineProgress += lineBreaks
+                    }
+                }
+            }
+
+            return lines
         }
     },
 

site/src/components/viewer/style.styl

@@ -4,7 +4,7 @@
     font-weight normal
     font-style normal
     src url('../../../static/fonts/Inconsolata-Regular.ttf')
-    
+
 @font-face
     font-family 'Inconsolata'
     font-weight bold
@@ -24,19 +24,32 @@
     font-size 15px
     background #2d2d49
     overflow scroll
-    
+
 .lines
     position absolute
     top 0
     left 0
     pointer-events none
-    
+
     .line
+        position relative
         color #abb2bf
         opacity 0.75
         letter-spacing -1px
         padding-left 25px
-    
+
+        .added
+            position absolute
+            top 0
+            left 9px
+            color #00ffa5
+
+        .removed
+            top -10px
+            left 9px
+            position absolute
+            color #ff8157
+
 .code
     position absolute
     top 0

site/src/components/viewer/template.html

@@ -1,6 +1,10 @@
 <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="i in linesCount">{{ i }}.</div>
+        <div class="line" v-for="line in lines">
+            <div class="added" v-if="line.added">+</div>
+            <div class="removed" v-if="line.removed">-</div>
+            <span class="index">{{ line.index }}.</span>
+        </div>
     </div>
 </div>