Add file and tab switching.

app/assets/javascripts/repo/repo_bundle.js

+import Tabs from './repo_tabs'
 import Sidebar from './repo_sidebar'
 import Editor from './repo_editor'
 import Service from './repo_service'
@@ -10,6 +11,7 @@ export default class RepoBundle {
     const url = document.getElementById('ide').dataset.url;
     Store.service = Service;
     Store.service.url = url;
+    Store.tabs = new Tabs();
     Store.sidebar = new Sidebar(url);
     Store.editor = new Editor();
     Helper.getContent();

app/assets/javascripts/repo/repo_editor.js

@@ -39,16 +39,23 @@ export default class RepoEditor {
 
       watch: {
         isTree() {
-          if(this.isTree) {
+          if(this.isTree && !this.openedFiles.length) {
             self.el.style.display = 'none';
           } else {
             self.el.style.display = 'inline-block';
           }
         },
 
-        blobRaw() {
-          if(this.isTree) {
+        openedFiles() {
+          if(this.isTree && !this.openedFiles.length) {
+            self.el.style.display = 'none';
           } else {
+            self.el.style.display = 'inline-block';
+          }
+        },
+
+        blobRaw() {
+          if(!this.isTree) {
             self.monacoEditor.setModel(
               monaco.editor.createModel(
                 this.blobRaw,

app/assets/javascripts/repo/repo_file.js

@@ -2,13 +2,13 @@ let RepoFile = {
   template: `
   <tr>
     <td>
-      <i class='fa' :class='file.icon'></i>
-      <a :href='file.url' @click.prevent='linkClicked(file)'>{{file.name}}</a>
+      <i class='fa' :class='file.icon' :style='{"margin-left": file.level * 10 + "px"}'></i>
+      <a :href='file.url' @click.prevent='linkClicked(file)' :title='file.url'>{{file.name}}</a>
     </td>
-    <td v-if='isTree'>
+    <td v-if='!isMini'>
       <div class='ellipsis'>{{file.lastCommitMessage}}</div>
     </td>
-    <td v-if='isTree'>
+    <td v-if='!isMini'>
       <span>{{file.lastCommitUpdate}}</span>
     </td>
   </tr>
@@ -16,7 +16,8 @@ let RepoFile = {
   props: {
     name: 'repo-file',
     file: Object,
-    isTree: Boolean
+    isTree: Boolean,
+    isMini: Boolean
   },
 
   methods: {

app/assets/javascripts/repo/repo_helper.js

@@ -36,8 +36,56 @@ let RepoHelper = {
     return split.join('/');
   },
 
+  insertNewFilesIntoParentDir(inDirectory, oldList, newList) {
+    let indexOfFile;
+    if(!inDirectory) {
+      return newList;
+    }
+    oldList.find((file, i) => {
+      if(file.url === inDirectory.url){
+        indexOfFile = i+1;
+        return true;
+      }
+      return false;
+    });
+    if(indexOfFile){
+      // insert new list into old list
+      newList.forEach((newFile) => {
+        newFile.level = inDirectory.level + 1;
+        oldList.splice(indexOfFile, 0, newFile);
+      });
+      return oldList;
+    }
+    return newList;
+  },
+
+  setActiveFile(file) {
+    Store.openedFiles = Store.openedFiles.map((openedFile) => {
+      openedFile.active = file.url === openedFile.url;
+      return openedFile;
+    });
+    Store.blobRaw = file.plain;
+    this.toURL(file.url);
+  },
+
+  removeFromOpenedFiles(file) {
+    if(file.type === 'tree') return;
+    Store.openedFiles = Store.openedFiles.filter((openedFile) => {
+      return openedFile.url !== file.url;
+    });
+  },
+
+  addToOpenedFiles(file) {
+    const openedFilesAlreadyExists = Store.openedFiles.some((openedFile) => {
+      return openedFile.url === file.url
+    });
+    if(!openedFilesAlreadyExists) {
+      Store.openedFiles.push(file);
+    }
+  },
+
     // may be tree or file.
-  getContent() {
+  getContent(file) {
     Service.getContent()
     .then((response) => {
       let data = response.data;
@@ -47,16 +95,14 @@ let RepoHelper = {
         const parentURL = this.blobURLtoParent(Service.url);
         Store.blobRaw = data.plain;
         Store.prevURL = this.blobURLtoParent(parentURL);
-        Service.getContent(parentURL)
-        .then((response) => {
-          Store.files = this.dataToListOfFiles(response.data);
-        })
-        .catch((response) => {
-
-        });
+        data.url = file.url;
+        this.addToOpenedFiles(data);
+        this.setActiveFile(data);
+        console.log(data);
       } else {
         // it's a tree
-        Store.files = this.dataToListOfFiles(data);
+        let newDirectory = this.dataToListOfFiles(data);
+        Store.files = this.insertNewFilesIntoParentDir(file, Store.files, newDirectory);
         Store.prevURL = this.blobURLtoParent(Service.url);
       }
     })
@@ -80,7 +126,8 @@ let RepoHelper = {
         url: blob.url,
         icon: this.toFA(blob.icon),
         lastCommitMessage: blob.last_commit.message,
-        lastCommitUpdate: blob.last_commit.committed_date
+        lastCommitUpdate: blob.last_commit.committed_date,
+        level: 0
       })
     });
 
@@ -89,7 +136,8 @@ let RepoHelper = {
         type: 'tree',
         name: tree.name,
         url: tree.url,
-        icon: this.toFA(tree.icon)
+        icon: this.toFA(tree.icon),
+        level: 0
       })
     });
 
@@ -98,7 +146,8 @@ let RepoHelper = {
         type: 'submodule',
         name: submodule.name,
         url: submodule.url,
-        icon: this.toFA(submodule.icon)
+        icon: this.toFA(submodule.icon),
+        level: 0
       })
     });
 

app/assets/javascripts/repo/repo_mini_mixin.js

+import Store from './repo_store'
+
+let RepoMiniMixin = {
+  computed: {
+    isMini() {
+      console.log('checking', Store.openedFiles.length)
+      return !!Store.openedFiles.length;
+    }
+  },
+};
+
+export default RepoMiniMixin;
\ No newline at end of file

app/assets/javascripts/repo/repo_sidebar.js

@@ -4,6 +4,7 @@ import Vue from 'vue'
 import Store from './repo_store'
 import RepoPreviousDirectory from './repo_prev_directory'
 import RepoFile from './repo_file'
+import RepoMiniMixin from './repo_mini_mixin'
 
 export default class RepoSidebar {
   constructor(url) {
@@ -16,6 +17,7 @@ export default class RepoSidebar {
   initVue() {
     this.vue = new Vue({
       el: '#sidebar',
+      mixins: [RepoMiniMixin],
       components: {
         'repo-previous-directory': RepoPreviousDirectory,
         'repo-file': RepoFile,
@@ -45,8 +47,9 @@ export default class RepoSidebar {
             url = file.url;
           }
           Service.url = url;
-          Helper.getContent();
-          Helper.toURL(url);
+          if(typeof file === 'object') {
+            Helper.getContent(file);
+          }
         }
       },
     });

app/assets/javascripts/repo/repo_store.js

@@ -9,7 +9,7 @@ let RepoStore = {
   submodules: [],
   blobRaw: '',
   blobRendered: '',
-
+  openedFiles: [],
   files: []
 };
 export default RepoStore;

app/assets/javascripts/repo/repo_tab.js

+import RepoHelper from './repo_helper'
+
+let RepoTab = {
+  template: `
+  <li>
+    <a href='#' @click.prevent='xClicked(tab)'>
+      <i class="fa fa-times" :class="{'fa-times':saved, 'dot-circle-o': !saved}"></i>
+    </a>
+    <a href='#' :title='tab.url' @click.prevent='tabClicked(tab)'>{{tab.name}}</a>
+  </li>
+  `,
+  props: {
+    name: 'repo-tab',
+    tab: Object,
+    saved: true,
+  },
+
+  methods: {
+    tabClicked(file) {
+      RepoHelper.setActiveFile(file);
+    },
+
+    xClicked(file) {
+      RepoHelper.removeFromOpenedFiles(file);
+    }
+  }
+};
+export default RepoTab;
\ No newline at end of file

app/assets/javascripts/repo/repo_tabs.js

+import Vue from 'vue';
+import Store from './repo_store'
+import RepoTab from './repo_tab'
+import RepoMiniMixin from './repo_mini_mixin'
+
+export default class RepoTabs {
+  constructor() {
+    this.initVue();
+  }
+
+  initVue() {
+    this.vue = new Vue({
+      el: '#tabs',
+      mixins: [RepoMiniMixin],
+      components: {
+        'repo-tab': RepoTab,
+      },
+      data: () => Store,
+    });
+  }
+}
\ No newline at end of file

app/assets/stylesheets/pages/repo.scss

@@ -26,17 +26,56 @@ header {
   padding: 10px 15px;
 }
 
-#ide {
+.panel-right{
   display: inline-block;
   width: 85%;
+  #tabs {
+    height: 41px;
+    border-bottom: 1px solid #f0f0f0;
+    padding-left: 0;
+    margin-bottom: 0;
+    background: $gray-light;
+
+    li {
+      list-style-type: none;
+      background: $gray-normal;
+      display: inline-block;
+      padding: 10px 18px;
+      border-right: 1px solid $border-color;
+
+      &.active {
+        background: $white-light;
+      }
+
+      a {
+        color: black;
+      }
+
+      i.fa.fa-times {
+        float: right;
+        margin-top: 3px;
+        margin-left: 15px;
+      }
+    }
+  }
+  #ide {
+    height: 70vh;
+  }  
 }
 
+
 #sidebar {
   &.sidebar-mini {
     display: inline-block;
     vertical-align: top;
     width: 15%;
     border-right: 1px solid $white-normal;
+    height: 75vh;
+    overflow: auto;
+  }
+
+  a {
+    color: $almost-black;
   }
 
   ul {

app/views/projects/_files.html.haml

@@ -5,4 +5,4 @@
   .nav-block
     = render 'projects/tree/tree_header', tree: @tree
 
-  = render 'projects/tree/tree_content', tree: @tree
+  = render 'projects/tree/tree_content'

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

@@ -11,9 +11,4 @@
   - else
     - viewer.prepare!
 
-    -# In the rare case where the first kilobyte of the file looks like text,
-    -# but the file turns out to actually be binary after loading all data,
-    -# we fall back on the binary Download viewer.
-    - viewer = BlobViewer::Download.new(viewer.blob) if viewer.binary_detected_after_load?
-
-    = render viewer.partial_path, viewer: viewer
+    = render 'projects/tree/tree_content'

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

 .tree-content-holder
-  #sidebar{ ":class" => "{'sidebar-mini' : !isTree}" }<
+  #sidebar{ ":class" => "{'sidebar-mini' : isMini}" }<
     %table.table
-      %thead{"v-if" => "isTree"}
-        %th{"v-if" => "isTree"}
+      %thead{"v-if" => "!isMini"}
+        %th{"v-if" => "!isMini"}
           Name
-        %th{"v-else"}
+        %th{"v-else" => "1"}
           Project
-        %th{"v-if" => "isTree"}
+        %th{"v-if" => "!isMini"}
           Last Commit
-        %th{"v-if" => "isTree"}
+        %th{"v-if" => "!isMini"}
           Last Update
       %tr{ is: "repo-previous-directory", ":prevurl" => "prevURL", "@linkclicked" => "linkClicked" }
-      %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;" }>
+      %tr{ is: "repo-file", "v-for" => "file in files", ":key" => "file.id", ":file" => "file",":is-mini" => "isMini", "@linkclicked" => "linkClicked(file)", ":is-tree" => "isTree" }
+  .panel-right>
+    %ul#tabs{"v-if" => "isMini"}
+      %li{ is: "repo-tab", "v-for" => "tab in openedFiles", ":key" => "tab.id", ":tab" => "tab", ":class" => "{'active' : tab.active}" }
+    #ide{ data: { url: repo_url } }
 
 - 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