diff --git a/lib/project.js b/lib/project.js index 99decbd..63048e1 100644 --- a/lib/project.js +++ b/lib/project.js @@ -108,18 +108,52 @@ class Project console.log('project'.green.bold + ' - ' + 'add test contents'.cyan) // Add some with true contents - this.files.createVersion('./test/file.css', ` -body { + this.files.createVersion('./test/file.css', `body { margin:0; padding:0; } +h1, h2 +{ + font-size:20px; +} + +h3 +{ + font-size:15px; +} + +h4 +{ + font-size:10px; +} + .toto .tata > span { background:url('kikoo.png') top left repeat-x; +}`) + setTimeout(() => + { + this.files.createVersion('./test/file.css', `body +{ + margin: 0; } - `) - this.files.createVersion('./test/file.js', ` -'use strict' + +h1 +{ + font-size:20px; +} + +h4 +{ + font-size:10px; +} + +.toto .tata > span +{ + background: url('kikoo.png') top left repeat-x; + }`) + }, 20) + this.files.createVersion('./test/file.js', `'use strict' /** * Test @@ -135,10 +169,8 @@ class ClassName extends AnotherClass { } -} - `) - this.files.createVersion('./test/file.php', ` - +}`) + this.files.createVersion('./test/file.html', ` @@ -172,8 +202,7 @@ class ClassName extends AnotherClass - - `) +`) // Add some with icons this.files.createVersion('./test/icons/test.js', 'Test icon') diff --git a/site/src/components/files-tree/style.styl b/site/src/components/files-tree/style.styl index e69de29..1278937 100644 --- a/site/src/components/files-tree/style.styl +++ b/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 \ No newline at end of file diff --git a/site/src/components/files-tree/template.html b/site/src/components/files-tree/template.html index 700c2dd..02e70d7 100644 --- a/site/src/components/files-tree/template.html +++ b/site/src/components/files-tree/template.html @@ -1,7 +1,7 @@ -
+
- Mark all as read + Mark all as read
\ No newline at end of file diff --git a/site/src/components/versions/style.styl b/site/src/components/versions/style.styl index 66eb880..11ccf48 100644 --- a/site/src/components/versions/style.styl +++ b/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) \ No newline at end of file diff --git a/site/src/components/viewer/script.js b/site/src/components/viewer/script.js index e2d1447..683b669 100644 --- a/site/src/components/viewer/script.js +++ b/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 } }, diff --git a/site/src/components/viewer/style.styl b/site/src/components/viewer/style.styl index add6e78..92592f1 100644 --- a/site/src/components/viewer/style.styl +++ b/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 diff --git a/site/src/components/viewer/template.html b/site/src/components/viewer/template.html index fc0a182..cf4f16c 100644 --- a/site/src/components/viewer/template.html +++ b/site/src/components/viewer/template.html @@ -1,6 +1,10 @@
-
{{ i }}.
+
+
+
+
-
+ {{ line.index }}. +
\ No newline at end of file