furk4ngg/keppler
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ Site > Viewer > Add line modifications

Browse Source
This commit is contained in:
brunosimon
2017-08-30 22:02:48 +02:00
parent fccffc2a2b
commit 5d745928ee
7 changed files with 154 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/project.js
+44 -15
View File
@@ -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', `
<?php
}`)
this.files.createVersion('./test/file.php', `<?php
/**
* Test
@@ -155,10 +187,8 @@ class ClassName extends AnotherClass
{
}
}
`)
this.files.createVersion('./test/file.html', `
<!DOCTYPE html>
}`)
this.files.createVersion('./test/file.html', `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
@@ -172,8 +202,7 @@ class ClassName extends AnotherClass
</form>
</section>
</body>
</html>
`)
</html>`)
// Add some with icons
this.files.createVersion('./test/icons/test.js', 'Test icon')
site/src/components/files-tree/style.styl
+7
View File
@@ -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
+2 -2
View File
@@ -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
+1
View File
@@ -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
+78 -2
View File
@@ -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
+17 -4
View File
@@ -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
+5 -1
View File
@@ -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>