[update] Improve versions infos + [update] Active file

site/public/javascript/controllers/project.js

@@ -9,32 +9,57 @@ application.controller(
             // Every 5 seconds
             $interval( function()
             {
-                // // Each version
+                // Each file
-                // project.each_version( function( version )
+                for( var _file_key in project.files )
-                // {
+                {
-                //     // Date
+                    var _file = project.files[ _file_key ];
-                //     version.time_from_now = version.moment_date.fromNow();
+
-                // } );
+                    // Each version
+                    for( var _version_key in _file.versions )
+                    {
+                        var _version = _file.versions[ _version_key ];
+                        // Date
+                        _version.time_from_now = _version.moment_date.fromNow();
+                    }
+                }
             }, 5000 );
 
+            $scope.always_last_version_toggle_click = function()
+            {
+                $scope.always_last_version = !$scope.always_last_version;
+            };
+
             $scope.folder_click = function( folder )
             {
-                console.log('folder click');
+                // console.log('folder click');
                 // folder.active = !folder.active;
             };
 
             $scope.file_click = function( file )
             {
-                file = file.data;
+                // File
-                file.notif = 0;
+                if( $scope.file )
+                    $scope.file.active = false;
+
+                file        = file.data;
+                file.notif  = 0;
+                file.active = true;
+                $scope.file = file;
+
+                // Version
+                if( $scope.version )
+                    $scope.version.active = false;
 
-                // file.active = true;
-                $scope.file    = file;
                 $scope.version = file.versions[ file.versions.length - 1 ];
+                $scope.version.active = true
             };
 
             $scope.version_click = function( version )
             {
+                if( $scope.version )
+                    $scope.version.active = false;
+
+                version.active = true;
                 $scope.version = version;
             };
 
@@ -47,13 +72,13 @@ application.controller(
             {
                 $scope.$apply( function()
                 {
-                    $scope.project = project;
                 } );
             } );
 
-            $scope.project = project.data;
+            $scope.project             = project;
-            $scope.file    = null;
+            $scope.file                = null;
-            $scope.version = null;
+            $scope.always_last_version = true;
+            $scope.version             = null;
         }
     ]
 );

site/public/javascript/services/project.js

@@ -75,9 +75,6 @@ application.factory(
 
                 socket.on( 'create_file', function( data )
                 {
-                    // console.log('create_file');
-                    // console.log(data);
-
                     var file = result.files[ data.path.full ];
 
                     // Doesn't exist yet
@@ -105,9 +102,6 @@ application.factory(
 
                 socket.on( 'create_version', function( data )
                 {
-                    // console.log('create_version');
-                    // console.log(data);
-
                     var file = result.files[ data.file ];
 
                     // Doesn't exist yet
@@ -125,9 +119,6 @@ application.factory(
 
                 socket.on( 'delete_file', function( data )
                 {
-                    // console.log('delete_file');
-                    // console.log(data);
-
                     var file = result.files[ data.path.full ];
 
                     // Doesn't exist yet
@@ -146,8 +137,7 @@ application.factory(
                 // Update project event
                 socket.on( 'update_project', function( data )
                 {
-                    // console.log('update_project');
+                    result.name  = data.name;
-                    // console.log(data);
 
                     // Duplicate files
                     for( var _file_key in data.files )

site/public/stylesheets/style.css

@@ -28,10 +28,18 @@ section.page-projects .projects .item:last-child:after {display:none;}
  */
 section.page-project {position:fixed;top:60px;right:0;bottom:0;left:0;}
 section.page-project .aside {position:absolute;top:0;bottom:0;left:0;width:240px;}
-section.page-project section.file {position:absolute;top:0;right:0;bottom:0;left:240px;}
+section.page-project .aside .aside-header {padding:10px;background:#3b3f4e;}
-section.page-project section.file .file-header {position:absolute;top:0;right:0;left:0;height:30px;line-height:30px;padding:0 0 0 10px;background:#00f;}
+section.page-project .aside .aside-header .always-last-version-toggle {cursor:pointer;}
-section.page-project section.file .versions-nav {position:absolute;top:30px;bottom:0;left:0;width:140px;background:#555;}
+section.page-project .aside .aside-header .always-last-version-toggle .switch {display:inline-block;width:12px;height:12px;border:1px solid #f1f5ff;}
-section.page-project section.file .code {position:absolute;top:30px;right:0;bottom:0;left:140px;background:#ff0;}
+section.page-project .aside .aside-header .always-last-version-toggle.active .switch {background:#f1f5ff;}
+section.page-project section.main {position:absolute;top:0;right:0;bottom:0;left:240px;}
+section.page-project section.no-file {position:absolute;top:0;right:0;bottom:0;left:0;}
+section.page-project section.file {position:absolute;top:0;right:0;bottom:0;left:0;}
+section.page-project section.file .file-header {position:absolute;top:0;right:0;left:0;height:30px;line-height:30px;padding:0 0 0 10px;background:#777;}
+section.page-project section.file .versions-nav {position:absolute;top:30px;bottom:0;left:0;width:160px;background:#555;overflow-y:scroll;}
+section.page-project section.file .versions-nav .version {display:block;padding:10px;}
+section.page-project section.file .versions-nav .version.active {background:#666;}
+section.page-project section.file .code {position:absolute;top:30px;right:0;bottom:0;left:160px;background:#ff0;}
 section.page-project section.file .code pre code {position:absolute;top:0;right:0;bottom:0;left:0;}
 
 /**
@@ -43,7 +51,7 @@ nav.files-tree-nav li {line-height:24px;cursor:pointer;}
 // nav.files-tree-nav .folder.active > ul {display:block;}
 nav.files-tree-nav i {margin:0 6px 0 0;}
 nav.files-tree-nav li > span {display:block;color:#ccc;}
-// nav.files-tree-nav .active span {color:#fff;}
+nav.files-tree-nav li.active {background:rgba(255,255,255,0.1);}
 
 
 nav.files-tree-nav li > span {padding-left:16px;}

site/views/pages/index/project.jade

@@ -6,7 +6,7 @@ script(type="text/ng-template",id="folder_template.html")
         | {{_folder.name}}
     ul
         li.folder(ng-repeat="_folder in _folder.folders",ng-include="'folder_template.html'",ng-class="_folder.active ? 'active' : 'inactive'")
-        li.file(ng-repeat="(_key,_file) in _folder.files",ng-class="_file.active ? 'active' : 'inactive'")
+        li.file(ng-repeat="(_key,_file) in _folder.files",ng-class="_file.data.active ? 'active' : 'inactive'")
             span(ng-click="file_click(_file)")
                 i.fa.fa-file-text
                 | {{_file.name}}
@@ -16,25 +16,34 @@ script(type="text/ng-template",id="folder_template.html")
 section.page-project(ng-controller="ProjectController as controller",ng-init="init('" + project_slug + "')")
     aside.aside
         header.aside-header
-            | {{project.name}}
+            div.name
+                | {{project.name}}
+            div.always-last-version-toggle(ng-click="always_last_version_toggle_click()",ng-class="always_last_version ? 'active' : 'inactive'")
+                .switch
+                | always last version
         nav.files-tree-nav
             ul
                 li.folder(ng-repeat="_folder in project.tree.folders",ng-include="'folder_template.html'",ng-class="_folder.active ? 'active' : 'inactive'")
-    section.file
+    section.main
-        header.file-header
+        section.no-file(ng-if="!file")
-            | {{file.name}}
+            | No file
-        nav.versions-nav
+        section.file(ng-if="file")
-            a.version(href="#",ng-repeat="_version in file.versions",ng-click="version_click(_version)")
+            header.file-header
-                div.date
+                span.path
-                    | {{_version.date_formated}}
+                    | {{file.path.directory}}/
-                    sup.time-from-now
+                span.name
-                        | ({{_version.time_from_now}})
+                    | {{file.name}}
-                div.differences
+            nav.versions-nav
-                    | {{_version.diff_percent}}
+                a.version(href="#",ng-repeat="_version in file.versions",ng-click="version_click(_version)",ng-class="_version.active ? 'active' : 'inactive'")
-                br
+                    div.date
-        section.code
+                        | {{_version.date_formated}}
-            pre
+                    div.time-from-now
-                code(hljs,hljs-source="version.content")
+                        | {{_version.time_from_now}}
+                    div.differences
+                        | {{_version.diff_percent}}
+            section.code
+                pre
+                    code(hljs,hljs-source="version.content")
 
 
 include ../../partials/footer.jade