Functionality to move between files.

app/assets/javascripts/dispatcher.js

@@ -342,7 +342,7 @@ import RepoBundle from './repo/repo_bundle';
           shortcut_handler = true;
           break;
         case 'projects:blob:show':
-          new RepoBundle();
+          new RepoBundle();  
           break;
         case 'projects:blame:show':
           initBlob();

app/assets/javascripts/repo/repo_bundle.js

@@ -6,6 +6,7 @@ import Helper from './repo_helper'
 
 export default class RepoBundle {
   constructor() {
+    console.log(document.getElementById('ide'))
     const url = document.getElementById('ide').dataset.url;
     Store.service = Service;
     Store.service.url = url;

app/assets/javascripts/repo/repo_editor.js

@@ -35,20 +35,26 @@ export default class RepoEditor {
             )
           );
         }
-
-        if(this.isTree) {
-          self.el.styles = 'display: none';
-        } else {
-          self.el.styles = 'display: inline-block';
-        }
       },
 
       watch: {
+        isTree() {
+          if(this.isTree) {
+            self.el.style.display = 'none';
+          } else {
+            self.el.style.display = 'inline-block';
+          }
+        },
+
         blobRaw() {
           if(this.isTree) {
           } else {
-            // this.blobRaw
-            // console.log('models', editor.getModels())
+            self.monacoEditor.setModel(
+              monaco.editor.createModel(
+                this.blobRaw,
+                'plain'
+              )
+            );
           }
         }
       }

app/assets/javascripts/repo/repo_file.js

 let RepoFile = {
   template: `
-  <li>
-    <div class='col-md-4'>
+  <tr>
+    <td>
       <i class='fa' :class='file.icon'></i>
       <a :href='file.url' @click.prevent='linkClicked(file)'>{{file.name}}</a>
-    </div>
-    <div class="col-md-4">
-      <span>{{JSON.stringify(file)}}</span>
-    </div>
-  </li>
+    </td>
+    <td v-if='isTree'>
+      <div class='ellipsis'>{{file.lastCommitMessage}}</div>
+    </td>
+    <td v-if='isTree'>
+      <span>{{file.lastCommitUpdate}}</span>
+    </td>
+  </tr>
   `,
   props: {
     name: 'repo-file',
     file: Object,
+    isTree: Boolean
   },
 
   methods: {
     linkClicked(file) {
+      console.log(this.isTree)
       this.$emit('linkclicked', file);
     }
   }

app/assets/javascripts/repo/repo_helper.js

@@ -11,6 +11,21 @@ let RepoHelper = {
   ? window.performance
   : Date,
 
+  getLanguagesForMimeType(mimetypeNeedle, monaco) {
+    const langs = monaco.languages.getLanguages();
+    let lang = '';
+    langs.every((lang) => {
+      const hasLang = lang.mimetypes.some((mimetype) => {
+        return mimetypeNeedle === mimetype
+      });
+      if(hasLang) {
+        lang = lang.id;
+        return true;
+      }
+      return false;
+    });
+  },
+
   blobURLtoParent(url) {
     const split = url.split('/');
     split.pop();
@@ -24,7 +39,7 @@ let RepoHelper = {
     // may be tree or file.
   getContent() {
     Service.getContent()
-    .then((response)=> {
+    .then((response) => {
       let data = response.data;
       Store.isTree = this.isTree(data);
       if(!Store.isTree) {
@@ -32,10 +47,10 @@ let RepoHelper = {
         const parentURL = this.blobURLtoParent(Service.url);
         Store.blobRaw = data.plain;
         Service.getContent(parentURL)
-        .then((response)=> {
-          console.log(response.data)
+        .then((response) => {
+          Store.files = this.dataToListOfFiles(response.data);
         })
-        .catch((response)=> {
+        .catch((response) => {
 
         });
       } else {
@@ -61,7 +76,9 @@ let RepoHelper = {
         type: 'blob',
         name: blob.name,
         url: blob.url,
-        icon: this.toFA(blob.icon)
+        icon: this.toFA(blob.icon),
+        lastCommitMessage: blob.last_commit.message,
+        lastCommitUpdate: blob.last_commit.committed_date
       })
     });
 
@@ -104,7 +121,6 @@ let RepoHelper = {
     var history = window.history;
     this._key = this.genKey();
     history.pushState({ key: this._key }, '', url);
-    window.scrollTo(0, 0);
   }
 };
 

app/assets/javascripts/repo/repo_prev_directory.js

+let RepoPreviousDirectory = {
+  template: `
+  <tr>
+    <td colspan='3'>
+      <a href='#' @click.prevent='linkClicked("prev")'>..</a>
+    </td>
+  </tr>
+  `,
+  props: {
+    name: 'repo-previous-directory',
+  },
+
+  methods: {
+    linkClicked(file) {
+      console.log(this.isTree)
+      this.$emit('linkclicked', file);
+    }
+  }
+};
+export default RepoPreviousDirectory;
\ No newline at end of file

app/assets/javascripts/repo/repo_sidebar.js

@@ -2,6 +2,7 @@ import Service from './repo_service'
 import Helper from './repo_helper'
 import Vue from 'vue'
 import Store from './repo_store'
+import RepoPreviousDirectory from './repo_prev_directory'
 import RepoFile from './repo_file'
 
 export default class RepoSidebar {
@@ -9,13 +10,15 @@ export default class RepoSidebar {
     this.url = url;
     this.initVue();
     this.el = document.getElementById('ide');
+    console.log(document.getElementById('sidebar'))
   }
 
   initVue() {
     this.vue = new Vue({
       el: '#sidebar',
       components: {
-        'repo-file':RepoFile,
+        'repo-previous-directory': RepoPreviousDirectory,
+        'repo-file': RepoFile,
       },
 
       created() {
@@ -34,11 +37,16 @@ export default class RepoSidebar {
         },
 
         linkClicked(file) {
-          Service.url = file.url;
-          Helper.getContent();
-          Helper.toURL(file.url);
+          if(file === 'prev'){
+            
+          } else {
+            Service.url = file.url;
+            Helper.getContent();
+            Helper.toURL(file.url);  
+          }
+          
         }
-      }
+      },
     });
   }
 }
\ No newline at end of file

app/assets/javascripts/repo/repo_store.js

@@ -2,7 +2,6 @@ let RepoStore = {
   service: '',
   editor: '',
   sidebar: '',
-
   isTree: false,
   trees: [],
   blobs: [],

app/assets/stylesheets/pages/repo.scss

@@ -2,6 +2,13 @@
   display: none;
 }
 
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 300px;
+}
+
 .fade-enter-active, .fade-leave-active {
   transition: opacity .5s
 }
@@ -16,12 +23,22 @@
 
 header {
   background: $gray-light;
-  padding: 10px 25px;
-  border-bottom: 1px solid $border-color;
-  font-size: $code_font_size;
+  padding: 10px 15px;
+}
+
+#ide {
+  display: inline-block;
+  width: 85%;
 }
 
 #sidebar {
+  &.sidebar-mini {
+    display: inline-block;
+    vertical-align: top;
+    width: 15%;
+    border-right: 1px solid $white-normal;
+  }
+
   ul {
     list-style-type: none;
     padding: 0;

app/views/projects/blob/_blob.html.haml

@@ -8,5 +8,3 @@
   = render "projects/blob/auxiliary_viewer", blob: blob
 
 #blob-content-holder.blob-content-holder
-  #sidebar
-  #ide{ data: { url: repo_url }, style: "height:400px;" }

app/views/projects/tree/_tree_content.html.haml

 .tree-content-holder
   %header
     Project
-  #sidebar
-    %ul
-      %repo-file{ "v-for" => "file in files", ":key" => "file.id", ":file" => "file","@linkclicked" => "linkClicked(file)" }
-  #ide{ data: { url: repo_url }, style: "height:400px;" }
-
-  - if tree.readme
-    = render "projects/tree/readme", readme: tree.readme
+  #sidebar.isworking{ ":class" => "{'sidebar-mini' : !isTree}" }<
+    %table.table
+      %thead{"v-if" => "isTree"}
+        %th
+          Name
+        %th{"v-if" => "isTree"}
+          Last Commit
+        %th{"v-if" => "isTree"}
+          Last Update
+      %tr{ is: "repo-previous-directory" }
+      %tr{ is: "repo-file", "v-for" => "file in files", ":key" => "file.id", ":file" => "file","@linkclicked" => "linkClicked(file)", ":is-tree" => "isTree" }
+  #ide{ data: { url: repo_url }, style: "height:400px;" }>
 
 - if can_edit_tree?
   = render 'projects/blob/upload', title: _('Upload New File'), placeholder: _('Upload New File'), button_title: _('Upload file'), form_path: namespace_project_create_blob_path(@project.namespace, @project, @id), method: :post