[update] Show difference between versions + [update] button

site/app.class.js

@@ -50,6 +50,10 @@ class App
 		// Some file
 		project.files.create_version( './folder-test/test-4.css', fs.readFileSync( '../test-folder/folder-1/test-4.css', 'utf8' ) )
 		project.files.create_version( './folder-test/depth-test/test-3.js', fs.readFileSync( '../test-folder/folder-2/test-3.js', 'utf8' ) )
+		project.files.create_version( './folder-test/depth-test/test-3.js', fs.readFileSync( '../test-folder/folder-2/test-3-diff-1.js', 'utf8' ) )
+		project.files.create_version( './folder-test/depth-test/test-3.js', fs.readFileSync( '../test-folder/folder-2/test-3-diff-2.js', 'utf8' ) )
+		project.files.create_version( './folder-test/depth-test/test-3.js', fs.readFileSync( '../test-folder/folder-2/test-3-diff-3.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-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' )

site/models/file.class.js

@@ -37,7 +37,17 @@ class File
 
 		version.date    = new Date()
 		version.content = content
-		version.diff    = last_version ? diff.diffChars( last_version.content, version.content ) : false
+
+		if( !last_version )
+			version.diff = false
+		else
+			version.diff = diff.diffLines(
+				last_version.content,
+				version.content,
+				{
+					// ignoreWhitespace: true
+				}
+			)
 
 		// Emit
 		this.socket.emit( 'create_version', { file: this.path.full, version: version } )

site/public/javascript/controllers/project.js

@@ -29,6 +29,18 @@ application.controller(
                 $scope.always_last_version = !$scope.always_last_version;
             };
 
+            $scope.mark_all_as_read = function()
+            {
+                // Each file
+                for( var _file_key in project.files )
+                {
+                    var _file = project.files[ _file_key ];
+
+                    _file.notif = 0
+                    _file.new   = false
+                }
+            };
+
             $scope.folder_click = function( folder )
             {
                 // console.log('folder click');

site/public/javascript/services/project.js

@@ -117,7 +117,7 @@ application.factory(
                 // Connect event
                 socket.on( 'connect', function()
                 {
-                    console.log('connected');
+
                 } );
 
                 socket.on( 'create_file', function( data )

site/public/stylesheets/style.css

@@ -3,6 +3,7 @@
  */
 body {background:#24262e;font-size:14px;font-family:Helvetica,Arial;color:#f1f5ff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
 a {text-decoration:none;}
+* {padding:0;margin:0;box-sizing:border-box;}
 
 /**
  * Main header
@@ -44,7 +45,11 @@ section.page-project section.file .code pre {position:relative;overflow:hidden;}
 section.page-project section.file .code pre code {line-height:20px;font-family:monospace;}
 section.page-project section.file .code pre code.lines {position:absolute;top:0;left:0;width:38px;padding:0.5em;opacity:0.2;}
 section.page-project section.file .code pre code.hljs {margin-left:38px;}
-// section.page-project section.file .code pre code {position:absolute;top:0;left:20px;}
+section.page-project section.file .code pre code.differences {position:absolute;top:0;left:38px;padding:0.5em;}
+section.page-project section.file .code pre code.differences .value {opacity:0.4;}
+section.page-project section.file .code pre code.differences span.removed {display:none;border:1px solid red;}
+section.page-project section.file .code pre code.differences span.removed .value {display:none;}
+section.page-project section.file .code pre code.differences span.added {border:1px solid #b0ea23;background:rgba(176, 234, 35, 0.1);}
 
 .hljs-line-numbers {text-align:right;border-right:1px solid #ccc;color:#999;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
 

site/views/pages/index/project.jade

@@ -25,6 +25,8 @@ section.page-project(ng-controller="ProjectController as controller",ng-init="in
             div.always-last-version-toggle(ng-click="always_last_version_toggle_click()",ng-class="always_last_version ? 'active' : 'inactive'")
                 .switch
                 | always last version
+            div.mark-all-as-read(ng-click="mark_all_as_read()")
+                | Mark all as read
         .aside-tree
             nav.files-tree-nav
                 ul
@@ -54,6 +56,10 @@ section.page-project(ng-controller="ProjectController as controller",ng-init="in
                             .line= line_index++
                     code(hljs,hljs-source="version.content")
                         | {{ version.content }}
+                    code.differences(ng-if="version.diff")
+                        span(ng-repeat="_difference in version.diff",ng-class="{removed: _difference.removed, added: _difference.added}")
+                            span.value
+                                | {{ _difference.value }}
 
 
 include ../../partials/footer.jade

test-folder/folder-2/test-3-diff-1.js

@@ -0,0 +1,14 @@
+'use strict'
+
+/**
+ * Test
+ */
+class Pwet extends AnotherClass
+{
+    constructor( argument )
+    {
+        console.log('Hello')
+    }
+}
+
+let pwet = new Pwet()

test-folder/folder-2/test-3-diff-2.js

@@ -0,0 +1,15 @@
+'use strict'
+
+/**
+ * Test
+ */
+class Pwet extends AnotherClass
+{
+    constructor( argument )
+    {
+        console.log('Hello')
+        console.log('World')
+    }
+}
+
+let pwet = new Pwet()

test-folder/folder-2/test-3-diff-3.js

@@ -0,0 +1,17 @@
+'use strict'
+
+/**
+ * Test
+ */
+class Pwet extends AnotherClass
+{
+    constructor( argument )
+    {
+        console.log('Hello')
+        console.log('World')
+
+
+    }
+}
+
+let pwet = new Pwet()

test-folder/folder-2/test-3-diff-4.js

@@ -0,0 +1,17 @@
+'use strict'
+
+/**
+ * Test
+ */
+class Pwet extends AnotherClass
+{
+    constructor( argument )
+    {
+        console.log('Hell')
+        console.log('World')
+
+
+    }
+}
+
+let pwet = new Pwet()