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

[update] Improve scrolls + Add stylus file support

Browse Source
This commit is contained in:
brunosimon
2016-08-31 22:46:54 +02:00
parent a74df14a8c
commit fadb7df799
6 changed files with 103 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/app.class.js
+4 -1
View File
@@ -56,13 +56,16 @@ class App
project.files.create_version( './folder-test/depth-test/test-3.js', fs.readFileSync( '../test-folder/folder-2/test-3-diff-4.js', 'utf8' ) ) project.files.create_version( './folder-test/depth-test/test-3.js', fs.readFileSync( '../test-folder/folder-2/test-3-diff-4.js', 'utf8' ) )
project.files.create_version( './folder-test/test-1.html', fs.readFileSync( '../test-folder/test-1.html', 'utf8' ) ) project.files.create_version( './folder-test/test-1.html', fs.readFileSync( '../test-folder/test-1.html', 'utf8' ) )
project.files.create_version( './folder-test/test-2.php', fs.readFileSync( '../test-folder/test-2.php', 'utf8' ) ) project.files.create_version( './folder-test/test-2.php', fs.readFileSync( '../test-folder/test-2.php', 'utf8' ) )
project.files.create_version( './folder-test/big-one.txt', 'content 4\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline' ) project.files.create_version( './folder-test/big-one.txt', 'line\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline\nline' )
project.files.create_version( './folder-test/loooooooooooooooooooooooooooooooong-one.txt', 'abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz' )
project.files.create_version( './icons/test.js', 'Test icon' ) project.files.create_version( './icons/test.js', 'Test icon' )
project.files.create_version( './icons/test.html', 'Test icon' ) project.files.create_version( './icons/test.html', 'Test icon' )
project.files.create_version( './icons/test.sass', 'Test icon' ) project.files.create_version( './icons/test.sass', 'Test icon' )
project.files.create_version( './icons/test.scss', 'Test icon' ) project.files.create_version( './icons/test.scss', 'Test icon' )
project.files.create_version( './icons/test.less', 'Test icon' ) project.files.create_version( './icons/test.less', 'Test icon' )
project.files.create_version( './icons/test.stylus', 'Test icon' )
project.files.create_version( './icons/test.styl', 'Test icon' )
project.files.create_version( './icons/test.css', 'Test icon' ) project.files.create_version( './icons/test.css', 'Test icon' )
project.files.create_version( './icons/test.php', 'Test icon' ) project.files.create_version( './icons/test.php', 'Test icon' )
project.files.create_version( './icons/test.json', 'Test icon' ) project.files.create_version( './icons/test.json', 'Test icon' )
site/public/javascript/services/project.js
+7
View File
@@ -16,6 +16,12 @@ application.factory(
_version.date_formated = _version.moment_date.format( 'LTS' ); _version.date_formated = _version.moment_date.format( 'LTS' );
_version.time_from_now = _version.moment_date.fromNow(); _version.time_from_now = _version.moment_date.fromNow();
// Lines
_version.lines = [];
var length = _version.content.split(/\r\n|\r|\n/).length;
for( var i = 1; i < length + 1; i++ )
_version.lines.push( i );
// Differences // Differences
var count = 0, var count = 0,
modified = 0; modified = 0;
@@ -65,6 +71,7 @@ application.factory(
'html' : [ 'html', 'htm' ], 'html' : [ 'html', 'htm' ],
'sass' : [ 'sass', 'scss' ], 'sass' : [ 'sass', 'scss' ],
'less' : [ 'less' ], 'less' : [ 'less' ],
'stylus' : [ 'stylus', 'styl' ],
'css' : [ 'css' ], 'css' : [ 'css' ],
'php' : [ 'php' ], 'php' : [ 'php' ],
'json' : [ 'json' ], 'json' : [ 'json' ],
site/public/stylesheet/style.css
+1 -1
View File
File diff suppressed because one or more lines are too long
site/public/stylus/pages/project.styl
+52 -34
View File
@@ -68,7 +68,7 @@ body.project
padding 12px 20px 0 20px padding 12px 20px 0 20px
border-top 1px solid #515771 border-top 1px solid #515771
border-bottom 1px solid #515771 border-bottom 1px solid #515771
background rgba(0,0,0,0.2) background #2c2f42
.name .name
position absolute position absolute
@@ -90,9 +90,10 @@ body.project
position absolute position absolute
top 115px top 115px
left 0 left 0
width 100% bottom 95px
bottom 110px width calc(100% + 15px)
overflow-y scroll overflow-y scroll
overflow-x scroll
nav.files-tree-nav nav.files-tree-nav
position absolute position absolute
@@ -104,6 +105,7 @@ body.project
line-height 24px line-height 24px
font-size 12px font-size 12px
cursor pointer cursor pointer
white-space nowrap
.name .name
position relative position relative
@@ -132,24 +134,25 @@ body.project
line-height 13px line-height 13px
> span > span
display block display inline-block
padding-left 16px * 1 padding-right 20px
padding-left 15px * 1
li > span li > span
padding-left 16px * 2 padding-left 15px * 2
li li > span li li > span
padding-left 16px * 3 padding-left 15px * 3
li li li > span li li li > span
padding-left 16px * 4 padding-left 15px * 4
li li li li > span li li li li > span
padding-left 16px * 5 padding-left 15px * 5
li li li li li > span li li li li li > span
padding-left 16px * 6 padding-left 15px * 6
li li li li li li > span li li li li li li > span
padding-left 16px * 7 padding-left 15px * 7
li li li li li li li > span li li li li li li li > span
padding-left 16px * 8 padding-left 15px * 8
li li li li li li li li > span li li li li li li li li > span
padding-left 16px * 9 padding-left 15px * 9
&.active &.active
background #4d5b8d background #4d5b8d
@@ -175,6 +178,8 @@ body.project
background-image url('../svg/sass.svg') background-image url('../svg/sass.svg')
&.less &.less
background-image url('../svg/less.svg') background-image url('../svg/less.svg')
&.stylus
background-image url('../svg/stylus.svg')
&.css &.css
background-image url('../svg/css.svg') background-image url('../svg/css.svg')
&.php &.php
@@ -224,12 +229,12 @@ body.project
left 0 left 0
width 100% width 100%
height 110px height 110px
padding 15px 20px 0 20px padding 10px 20px 0 20px
border-top 1px solid #515771 border-top 1px solid #515771
background rgba(0,0,0,0.2) background #2c2f42
.button-container .button-container
margin-bottom 5px
.button .button
&.switch &.switch
display inline-block display inline-block
@@ -277,6 +282,7 @@ body.project
&.default &.default
display inline-block display inline-block
margin 10px 0
padding 5px 10px padding 5px 10px
background rgba(128,147,232,0.2) background rgba(128,147,232,0.2)
text-decoration none text-decoration none
@@ -292,6 +298,7 @@ body.project
left 240px left 240px
right 0 right 0
bottom 0 bottom 0
background #31344a
section.no-file section.no-file
position absolute position absolute
@@ -346,10 +353,12 @@ body.project
position absolute position absolute
top 0 top 0
left 0 left 0
width 200px
bottom 0 bottom 0
width 215px
padding-bottom 5px
background #4d5b8d background #4d5b8d
overflow-y scroll overflow-y scroll
overflow-x hidden
a.version a.version
display block display block
@@ -436,37 +445,46 @@ body.project
section.code section.code
position absolute position absolute
top 30px top 30px
right 0 right -15px
bottom 0 bottom -15px
left 200px left 200px
background #31344a
overflow-y scroll overflow-y scroll
overflow-x scroll
pre pre
position relative position relative
overflow hidden
code code
line-height 20px line-height 20px
font-family monospace font-family monospace
&.lines .lines
position absolute position absolute
top 0 top 0
left 0 left 0
width 38px width 38px
padding 0.5em padding 0.5em
opacity 0.2 opacity 0.2
&.hljs .current
pre
code
display inline-block
margin-right 15px
margin-bottom 15px
margin-left 38px margin-left 38px
background none background none
&.differences .differences
position absolute position absolute
top 0 top 0
left 38px left 38px
padding 0.5em padding 0.5em
pointer-events none pointer-events none
pre
code
.value .value
visibility hidden visibility hidden
site/public/svg/stylus.svg
+21
View File
@@ -0,0 +1,21 @@
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="38.8 33.4 138.5 141.4" enable-background="new 38.8 33.4 138.5 141.4" xml:space="preserve">
<g>
<path fill="#B3D107" d="M170.8,33.4c1.6,0,3,0.4,4,1.2c1,0.8,1.7,1.9,2.1,3.3c0.4,1.4,0.4,2.9,0.2,4.7c-0.3,1.8-0.9,3.5-1.9,5.2
c-0.2,0.2-0.5,0.2-0.8,0c-0.3-0.2-0.5-0.5-0.7-0.8c0.2-1.3-0.2-2.4-1.4-3.3c-1.1-0.9-2.9-1.3-5.3-1.3c-4.5,0-9,1.7-13.5,5
c-4.5,3.3-8.9,7.7-13.2,13.2c-4.3,5.5-8.3,11.8-12,18.9c-3.7,7.1-6.9,14.4-9.7,22c-2.7,7.5-4.9,15-6.5,22.5
c-1.6,7.4-2.4,14.2-2.4,20.3c0,3.3,0.9,4.9,2.8,4.9c1.3,0,2.6-0.5,3.9-1.6c1.3-1.1,2.7-2.7,4.3-4.9c0.3-0.2,0.6-0.2,0.9,0.1
c0.3,0.3,0.4,0.6,0.2,1.1c-2.2,3.3-4.8,6-7.7,8.2c-2.9,2.2-5.6,3.3-8,3.3c-2.1,0-3.5-0.6-4.3-1.8c-0.8-1.2-1.2-2.7-1.2-4.6
c0-5.1,1.1-11.6,3.3-19.3c2.2-7.7,5.1-15.8,8.8-24.4c3.7-8.6,7.9-17.1,12.7-25.7c4.8-8.5,9.8-16.2,15-23
c5.2-6.8,10.4-12.4,15.7-16.6C161.3,35.6,166.2,33.4,170.8,33.4z"/>
</g>
<g>
<path fill="#B3D107" d="M45.3,174.9c-1.6,0-3-0.4-4-1.2c-1-0.8-1.7-1.9-2.1-3.3c-0.4-1.4-0.4-2.9-0.2-4.7c0.3-1.8,0.9-3.5,1.9-5.2
c0.2-0.2,0.5-0.2,0.8,0c0.3,0.2,0.5,0.5,0.7,0.8c-0.2,1.3,0.2,2.4,1.4,3.3c1.1,0.9,2.9,1.3,5.3,1.3c4.5,0,9-1.7,13.5-5
c4.5-3.3,8.9-7.7,13.2-13.2c4.3-5.5,8.3-11.7,12-18.9c3.7-7.1,6.9-14.4,9.7-22c2.7-7.5,4.9-15,6.5-22.5c1.6-7.4,2.4-14.2,2.4-20.3
c0-3.3-0.9-4.9-2.8-4.9c-1.3,0-2.6,0.5-3.9,1.6c-1.3,1.1-2.7,2.7-4.3,4.9c-0.3,0.2-0.6,0.2-0.9-0.1c-0.3-0.3-0.4-0.6-0.2-1.1
c2.2-3.3,4.8-6,7.7-8.2c2.9-2.2,5.6-3.3,8-3.3c2.1,0,3.5,0.6,4.3,1.8s1.2,2.7,1.2,4.6c0,5.1-1.1,11.6-3.3,19.3
c-2.2,7.7-5.1,15.8-8.8,24.4c-3.7,8.6-7.9,17.1-12.7,25.7c-4.8,8.5-9.8,16.2-15,23c-5.2,6.8-10.4,12.4-15.7,16.6
C54.8,172.7,49.9,174.9,45.3,174.9z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

site/views/pages/index/project.jade
+18 -17
View File
@@ -80,12 +80,6 @@ div(ng-controller="ProjectController as controller",ng-init="init('" + project_s
.text .text
| Choose a file | Choose a file
section.file(ng-if="file") section.file(ng-if="file")
header.file-header
.content
span.path
| {{file.path.directory}}/
span.name
| {{file.name}}
nav.versions-nav nav.versions-nav
a.version(href="#",ng-repeat="_version in file.versions",ng-click="version_click(_version)",ng-class="_version.active ? 'active' : 'inactive'") a.version(href="#",ng-repeat="_version in file.versions",ng-click="version_click(_version)",ng-class="_version.active ? 'active' : 'inactive'")
.background .background
@@ -103,18 +97,25 @@ div(ng-controller="ProjectController as controller",ng-init="init('" + project_s
.fill(style="width:{{_version.diff_percent}};") .fill(style="width:{{_version.diff_percent}};")
.percent(style="width:{{_version.diff_percent}};") .percent(style="width:{{_version.diff_percent}};")
| {{_version.diff_percent}} | {{_version.diff_percent}}
header.file-header
.content
span.path
| {{file.path.directory}}/
span.name
| {{file.name}}
section.code section.code
pre .lines
code.lines pre
- var line_index = 1 code
while line_index < 999 .line(ng-repeat="_line in version.lines")
.line= line_index++ | {{ _line }}
code(hljs,hljs-source="version.content") .current(hljs,hljs-source="version.content")
| {{ version.content }} .differences
code.differences(ng-if="version.diff",ng-class="show_differences ? 'active' : 'inactive'") pre
span(ng-repeat="_difference in version.diff",ng-class="{removed: _difference.removed, added: _difference.added}") code(ng-if="version.diff",ng-class="show_differences ? 'active' : 'inactive'")
span.value span(ng-repeat="_difference in version.diff",ng-class="{removed: _difference.removed, added: _difference.added}")
| {{ _difference.value }} span.value
| {{ _difference.value }}
include ../../partials/footer.jade include ../../partials/footer.jade