Makes tabs work multi browser

app/assets/javascripts/repo/repo_editor.js

@@ -105,9 +105,7 @@ export default class RepoEditor {
           this.monacoInstance.setModel(null);
 
           const languages = monaco.languages.getLanguages();
-          console.log(languages)
           const languageID = Helper.getLanguageIDForFile(this.activeFile, languages);
-          console.log('languageID',languageID)
           const newModel = monaco.editor.createModel(this.blobRaw, languageID);
 
           this.monacoInstance.setModel(newModel);

app/assets/javascripts/repo/repo_file.vue

 <script>
+import TimeAgoMixin from '../vue_shared/mixins/timeago';
+
 const RepoFile = {
+  mixins: [TimeAgoMixin],
   props: {
     file: {
       type: Object,
@@ -48,7 +51,7 @@ export default RepoFile;
   </td>
 
   <td v-if="!isMini" class="hidden-xs">
-    <span>{{file.lastCommitUpdate}}</span>
+    <span>{{timeFormated(file.lastCommitUpdate)}}</span>
   </td>
 </tr>
 </template>

app/assets/javascripts/repo/repo_tab.vue

@@ -34,7 +34,7 @@ export default RepoTab;
 
 <template>
 <li>
-  <a href="#" @click.prevent="xClicked(tab)" v-if="!tab.loading">
+  <a href="#" class="close" @click.prevent="xClicked(tab)" v-if="!tab.loading">
     <i class="fa" :class="changedClass"></i>
   </a>
 

app/assets/javascripts/repo/repo_tabs.js

@@ -5,7 +5,7 @@ import RepoMiniMixin from './repo_mini_mixin';
 
 export default class RepoTabs {
   constructor(el) {
-    RepoTabs.styleTabsForWindows();
+    // RepoTabs.styleTabsForWindows();
     this.initVue(el);
   }
 
@@ -20,8 +20,8 @@ export default class RepoTabs {
     });
   }
 
-  static styleTabsForWindows() {
-    const scrollWidth = Number(document.body.dataset.scrollWidth);
-    Store.scrollWidth = scrollWidth;
-  }
+  // static styleTabsForWindows() {
+  //   const scrollWidth = Number(document.body.dataset.scrollWidth);
+  //   Store.scrollWidth = scrollWidth;
+  // }
 }

app/assets/stylesheets/pages/repo.scss

@@ -55,15 +55,15 @@
     }
 
     #tabs {
-      height: 41px;
+      height: 51px;
       border-bottom: 1px solid $white-normal;
       padding-left: 0;
       margin-bottom: 0;
       display: inline-block;
       white-space: nowrap;
       width: 100%;
-      overflow-y: none;
-      overflow-x: scroll;
+      overflow-y: hidden;
+      overflow-x: auto;
 
       li {
         animation: fadein 0.5s;
@@ -80,6 +80,16 @@
 
         a {
           color: $black;
+          display: inline-block;
+          width: 100px;
+          text-align: center;
+          overflow: hidden;
+          text-overflow: ellipsis;
+
+          &.close {
+            width: auto;
+            font-size: 15px;
+          }
         }
 
         i.fa.fa-times,
@@ -98,9 +108,12 @@
 
     #repo-file-buttons {
       background: $gray-light;
-      padding: 5px;
-      margin-top: -5px;
       border-bottom: 1px solid $white-normal;
+      padding: 5px;
+      margin-top: -15px;
+      padding: 10px 5px;
+      position: relative;
+      border-top: 1px solid $white-normal;
     }
 
     #binary-viewer {

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

@@ -16,7 +16,7 @@
         %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" }
   .panel-right>
-    %ul#tabs{ "v-if" => "isMini", ":style" => "{height: 41 + scrollWidth + 'px'}", "v-cloak" => "1" }
+    %ul#tabs{ "v-if" => "isMini", "v-cloak" => "1" }
       %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) } }