Allows tabs to work with multiple browsers and scrollbars

app/assets/javascripts/repo/repo_file.vue

@@ -42,7 +42,8 @@ export default RepoFile;
 <template>
 <tr v-if="!loading.tree || hasFiles" :class="{'active': activeFile.url === file.url}">
   <td>
-    <i class="fa" :class="file.icon" :style="{'margin-left': file.level * 10 + 'px'}"></i>
+    <i class="fa" v-if="!file.loading" :class="file.icon" :style="{'margin-left': file.level * 10 + 'px'}"></i>
+    <i class="fa fa-spinner fa-spin" v-if="file.loading" :style="{'margin-left': file.level * 10 + 'px'}"></i>
     <a :href="file.url" @click.prevent="linkClicked(file)" class="repo-file-name" :title="file.url">{{file.name}}</a>
   </td>
 

app/assets/javascripts/repo/repo_helper.js

@@ -94,14 +94,14 @@ const RepoHelper = {
     return oldList;
   },
 
-  getContent(treeOrFile) {
+  getContent(treeOrFile, cb) {
     let file = treeOrFile;
-    const loadingData = RepoHelper.setLoading(true);
-
+    // const loadingData = RepoHelper.setLoading(true);
     Service.getContent()
     .then((response) => {
       const data = response.data;
-      RepoHelper.setLoading(false, loadingData);
+      // RepoHelper.setLoading(false, loadingData);
+      if(cb) cb();
       Store.isTree = RepoHelper.isTree(data);
       if (!Store.isTree) {
         if (!file) file = data;
@@ -153,6 +153,7 @@ const RepoHelper = {
     const simpleBlob = RepoHelper.serializeRepoEntity('blob', blob);
     simpleBlob.lastCommitMessage = blob.last_commit.message;
     simpleBlob.lastCommitUpdate = blob.last_commit.committed_date;
+    simpleBlob.loading = false;
 
     return simpleBlob;
   },
@@ -174,6 +175,7 @@ const RepoHelper = {
       url,
       icon: RepoHelper.toFA(icon),
       level: 0,
+      loading: false,
     };
   },
 

app/assets/javascripts/repo/repo_sidebar.js

@@ -43,19 +43,27 @@ export default class RepoSidebar {
         linkClicked(clickedFile) {
           let url = '';
           let file = clickedFile;
+          file.loading = true;
           if (typeof file === 'object') {
             if (file.type === 'tree' && file.opened) {
               file = Store.removeChildFilesOfTree(file);
             } else {
               url = file.url;
               Service.url = url;
-              Helper.getContent(file);
+              // I need to refactor this to do the `then` here.
+              // Not a callback. For now this is good enough.
+              // it works.
+              Helper.getContent(file, () => {
+                file.loading = false;
+              });
             }
           } else if (typeof file === 'string') {
             // go back
             url = file;
             Service.url = url;
-            Helper.getContent();
+            Helper.getContent(null, () => {
+              file.loading = false;
+            });
           }
         },
       },

app/assets/javascripts/repo/repo_store.js

@@ -16,6 +16,10 @@ const RepoStore = {
   blobRaw: '',
   blobRendered: '',
   openedFiles: [],
+  tabSize: 100,
+  defaultTabSize: 100,
+  minTabSize: 30,
+  tabsOverflow: 41,
   activeFile: {
     active: true,
     binary: false,
@@ -29,6 +33,7 @@ const RepoStore = {
     raw: false,
     newContent: '',
     changed: false,
+    loading: false
   },
   activeFileIndex: 0,
   activeLine: 0,
@@ -136,6 +141,7 @@ const RepoStore = {
       mime_type: 'loading',
       name: 'loading',
       url: randomURL,
+      fake: true,
     };
 
     RepoStore.openedFiles.push(newFakeFile);

app/assets/javascripts/repo/repo_tab.vue

@@ -38,7 +38,7 @@ export default RepoTab;
     <i class="fa" :class="changedClass"></i>
   </a>
 
-  <a href="#" v-if="!tab.loading" :title="tab.url" @click.prevent="tabClicked(tab)">{{tab.name}}</a>
+  <a href="#" class="repo-tab" v-if="!tab.loading" :title="tab.url" @click.prevent="tabClicked(tab)">{{tab.name}}</a>
 
   <i v-if="tab.loading" class="fa fa-spinner fa-spin"></i>
 </li>

app/assets/javascripts/repo/repo_tabs.js

@@ -17,6 +17,23 @@ export default class RepoTabs {
         'repo-tab': RepoTab,
       },
       data: () => Store,
+
+      methods: {
+        isOverflow() {
+          let tabs = document.getElementById('tabs');
+          if(tabs) {
+            return tabs.scrollWidth > tabs.offsetWidth;
+          } 
+        }
+      },
+
+      watch: {
+        openedFiles() {
+          Vue.nextTick(() => {
+            this.tabsOverflow = this.isOverflow();  
+          });
+        }
+      }
     });
   }
 

app/assets/stylesheets/pages/repo.scss

@@ -55,7 +55,7 @@
     }
 
     #tabs {
-      height: 51px;
+      height: 61px;
       border-bottom: 1px solid $white-normal;
       padding-left: 0;
       margin-bottom: 0;
@@ -65,12 +65,22 @@
       overflow-y: hidden;
       overflow-x: auto;
 
+      &.overflown {
+        height: 61px;
+
+        li {
+          padding: 20px 18px;
+        }
+      }
+
       li {
-        animation: fadein 0.5s;
+        animation: swipeRightAppear ease-in 0.1s;
+        animation-iteration-count: 1;
+        transform-origin: 0% 50%;
         list-style-type: none;
         background: $gray-normal;
         display: inline-block;
-        padding: 10px 18px;
+        padding: 20px 18px;
         border-right: 1px solid $border-color;
         white-space: nowrap;
 
@@ -85,6 +95,7 @@
           text-align: center;
           overflow: hidden;
           text-overflow: ellipsis;
+          vertical-align: middle;
 
           &.close {
             width: auto;
@@ -110,10 +121,10 @@
       background: $gray-light;
       border-bottom: 1px solid $white-normal;
       padding: 5px;
-      margin-top: -15px;
       padding: 10px 5px;
       position: relative;
       border-top: 1px solid $white-normal;
+      margin-top: -5px;
     }
 
     #binary-viewer {
@@ -319,12 +330,14 @@
   }
 }
 
-@keyframes fadein {
-  from {
-    opacity: 0;
+@keyframes swipeRightAppear {
+  0% {
+    transform:  scaleX(0.00) ;
   }
-
-  to {
-    opacity: 1;
+  45% {
+    transform:  scaleX(0.26) ;
+  }
+  100% {
+    transform:  scaleX(1.00) ;
   }
 }

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

@@ -14,14 +14,14 @@
         %tr{ is: "repo-file-options", ":is-mini" => "isMini", "project-name" => @project.name }
         %tr{ is: "repo-previous-directory", ":prev-url" => "prevURL", "@linkclicked" => "linkClicked(prevURL)" }
         %tr{ is: "repo-loading-file", "v-for" => "n in 5", ":loading" => "loading", ":has-files" => "!!files.length", ":is-mini" => "isMini" }
-        %tr{ is: "repo-file", "v-for" => "file in files", ":key" => "file.id", ":file" => "file",":is-mini" => "isMini", "@linkclicked" => "linkClicked(file)", ":is-tree" => "isTree", ":loading" => "loading", ":has-files" => "!!files.length", ":active-file" => "activeFile" }
+        %tr{ is: "repo-file", "v-for" => "file in files", ":key" => "file.id", ":file" => "file",":is-mini" => "isMini", "@linkclicked" => "linkClicked(file)", ":is-tree" => "isTree", ":has-files" => "!!files.length", ":active-file" => "activeFile" }
   .panel-right>
-    %ul#tabs{ "v-if" => "isMini", "v-cloak" => "1" }
+    %ul#tabs{ "v-if" => "isMini", "v-cloak" => "1", ":class" => "{'overflown': tabsOverflow}" }
       %li{ is: "repo-tab", "v-for" => "tab in openedFiles", ":key" => "tab.id", ":tab" => "tab", ":class" => "{'active' : tab.active}" }
     #repo-file-buttons
     #ide{ data: { url: repo_url(@project) } }
     #binary-viewer{ "v-if" => "binary" }
-      %img{ "v-if" => "binaryTypes.png", ":src" => "pngBlobWithDataURI", ":alt" => "activeFile.name", alt: '' }
+      %img{ "v-if" => "binaryTypes.png", ":src" => "pngBlobWithDataURI", ":alt" => "activeFile.name", alt: "" }
       %div{ "v-if" => "binaryTypes.markdown", "v-html" => "activeFile.html" }
   #commit-area{ "v-if" => "changedFiles.length" }
     %form.form-horizontal