[update] New line added icon

site/public/javascript/services/project.js

@@ -28,11 +28,19 @@ application.factory(
                 _version.lines = [];
                 var length = _version.content.split(/\r\n|\r|\n/).length;
                 for( var i = 1; i < length + 1; i++ )
-                    _version.lines.push( i );
+                {
+                    var line = {};
+                    line.index   = i;
+                    line.added   = false;
+                    line.removed = false;
+
+                    _version.lines.push( line );
+                }
 
                 // Differences
-                var count    = 0,
-                    modified = 0;
+                var count      = 0,
+                    modified   = 0,
+                    line_index = 0;
 
                 if( !_version.diff )
                 {
@@ -45,9 +53,31 @@ application.factory(
                     for( var _diff_key in _version.diff )
                     {
                         var _diff = _version.diff[ _diff_key ];
+
                         count += _diff.count;
+
                         if( _diff.added /*|| _diff.removed*/ )
+                        {
                             modified += _diff.count;
+                        }
+
+                        // Add info to line
+                        if( typeof _diff.removed === 'undefined' )
+                        {
+                            var lines_breaks = _diff.value.match(/\r\n|\r|\n/g),
+                                lines_count  = lines_breaks ? lines_breaks.length : 0;
+
+                            if( _diff.added )
+                            {
+                                for( var j = line_index; j < line_index + lines_count; j++ )
+                                {
+                                    var line = _version.lines[ j ];
+                                    line.added = true;
+                                }
+                            }
+
+                            line_index += lines_count;
+                        }
                     }
                     _version.diff_ratio = modified / count;
                 }

site/public/stylus/pages/project.styl

@@ -483,7 +483,35 @@ body.project
                     left 0
                     width 38px
                     padding 0.5em
-                    opacity 0.2
+                    
+                    .line
+                        position relative
+                        
+                        .index
+                            opacity 0.2
+                            
+                        .added-icon
+                            display none
+                            position absolute
+                            top 50%
+                            right -2px
+                            width 6px
+                            height 6px
+                            margin-top -3px
+                            
+                            .bar
+                                display block
+                                position absolute
+                                background #17f861
+                                
+                                &.bar-1
+                                    left 2px
+                                    width 2px
+                                    height 100%
+                                &.bar-2
+                                    top 2px
+                                    width 100%
+                                    height 2px
 
                 .current
                     pre
@@ -495,31 +523,6 @@ body.project
                             margin-left 38px
                             background none
                             outline none
-
-                .differences
-                    position absolute
-                    top 0
-                    left 38px
-                    padding 0.5em
-                    pointer-events none
-
-                    pre
-                        code
-
-                            .value
-                                visibility hidden
-
-                            &.inactive
-                                display none
-
-                            span
-                                &.removed
-                                    display none
-                                    border 1px solid red
-
-                                    .value
-                                        display none
-
-                                &.added
-                                    border 1px solid #b0ea23
-                                    background rgba(176, 234, 35, 0.1)
+.state-show-differences
+    section.main section.file section.code .lines .line.added .added-icon
+        display block