Fixes bugs in implementation and adds new/folder buttons

app/assets/javascripts/repo/repo_binary_viewer.js

@@ -18,9 +18,27 @@ export default class RepoBinaryViewer {
         }
       },
 
+      methods: {
+        supportedNonBinaryFileType(fileExt) {
+          switch(fileExt) {
+            case 'md':
+              this.binaryTypes.markdown = true;
+              return true;
+              break;
+            default:
+              return false;
+          }
+        }
+      },
+
       watch: {
         blobRaw() {
           if(!this.binary) return;
+          let supported = supportedNonBinaryFileType();
+          if(supported) {
+
+            return;
+          }
           switch(this.binaryMimeType) {
             case 'image/png':
               this.binaryTypes.png = true;

app/assets/javascripts/repo/repo_editor.js

@@ -15,7 +15,8 @@ export default class RepoEditor {
       this.monacoEditor = monaco.editor
       .create(
         document.getElementById('ide'), {
-          model: null
+          model: null,
+          readOnly: true
         }
       )
       Helper.monacoInstance = monaco;
@@ -42,7 +43,7 @@ export default class RepoEditor {
 
       watch: {
         isTree() {
-          if(this.isTree || !this.openedFiles.length) {
+          if(!this.openedFiles.length) {
             self.el.style.display = 'none';
           } else {
             self.el.style.display = 'inline-block';
@@ -50,7 +51,7 @@ export default class RepoEditor {
         },
 
         openedFiles() {
-          if((this.isTree || !this.openedFiles.length) || this.binary) {
+          if((!this.openedFiles.length) || this.binary) {
             self.el.style.display = 'none';
           } else {
             self.el.style.display = 'inline-block';

app/assets/javascripts/repo/repo_file.js

 let RepoFile = {
   template: `
-  <tr v-if='!loading.tree || hasFiles'>
+  <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>
-      <a :href='file.url' @click.prevent='linkClicked(file)' :title='file.url'>{{file.name}}</a>
+      <a :href='file.url' @click.prevent='linkClicked(file)' class='repo-file-name' :title='file.url'>{{file.name}}</a>
     </td>
-    <td v-if='!isMini'>
-      <div class='ellipsis'>{{file.lastCommitMessage}}</div>
+    <td v-if='!isMini' class='hidden-sm hidden-xs'>
+      <div class='commit-message'>{{file.lastCommitMessage}}</div>
     </td>
-    <td v-if='!isMini'>
+    <td v-if='!isMini' class='hidden-xs'>
       <span>{{file.lastCommitUpdate}}</span>
     </td>
   </tr>
@@ -19,7 +19,8 @@ let RepoFile = {
     isTree: Boolean,
     isMini: Boolean,
     loading: Object,
-    hasFiles: Boolean
+    hasFiles: Boolean,
+    activeFile: Object
   },
 
   methods: {

app/assets/javascripts/repo/repo_file_options.js

+let RepoFileOptions = {
+  template: `
+    <tr v-if='isMini' class='repo-file-options'>
+      <td>
+        <span class='title'>{{projectName}}</span>
+        <ul>
+          <li>
+            <a href='#' title='New File'>
+              <i class='fa fa-file-o'></i>
+            </a>
+          </li>
+          <li>
+            <a href='#' title='New Folder'>
+              <i class='fa fa-folder-o'></i>
+            </a>
+          </li>
+        </ul>
+      </td>
+    </tr>
+  `,
+  props: {
+    name: 'repo-file-options',
+    isMini: Boolean,
+    projectName: String
+  }
+}
+
+export default RepoFileOptions;
\ No newline at end of file

app/assets/javascripts/repo/repo_helper.js

@@ -61,6 +61,13 @@ let RepoHelper = {
     return newList;
   },
 
+  resetBinaryTypes() {
+    let s = '';
+    for(s in Store.binaryTypes) {
+      Store.binaryTypes[s] = false;
+    }
+  },
+
   setActiveFile(file) {
     Store.openedFiles = Store.openedFiles.map((openedFile) => {
       openedFile.active = file.url === openedFile.url;
@@ -73,6 +80,7 @@ let RepoHelper = {
       Store.blobRaw = file.base64;
       console.log('binary', file)
     } else {
+      console.log('f', file)
       Store.blobRaw = file.plain;
     }
     if(!file.loading){
@@ -150,10 +158,8 @@ let RepoHelper = {
     // may be tree or file.
   getContent(file) {
     const loadingData = this.setLoading(true);
-    console.log('loading data', loadingData)
     Service.getContent()
     .then((response) => {
-      console.log('loadddd')
       let data = response.data;
       this.setLoading(false, loadingData);
       Store.isTree = this.isTree(data);
@@ -185,7 +191,6 @@ let RepoHelper = {
         let newDirectory = this.dataToListOfFiles(data);
         Store.files = this.insertNewFilesIntoParentDir(file, Store.files, newDirectory);
         Store.prevURL = this.blobURLtoParent(Service.url);
-        console.log('Store.prevURL',Store.prevURL);
       }
     })
     .catch((response)=> {

app/assets/javascripts/repo/repo_loading_file.js

@@ -3,36 +3,28 @@ let RepoLoadingFile = {
   <tr v-if='loading.tree && !hasFiles'>
     <td>
       <div class="animation-container animation-container-small">
-        <div class="line-of-code-1"></div>
-        <div class="line-of-code-2"></div>
-        <div class="line-of-code-3"></div>
-        <div class="line-of-code-4"></div>
-        <div class="line-of-code-5"></div>
-        <div class="line-of-code-6"></div>
+        <div v-for="n in 6" :class="lineOfCode(n)"></div>
       </div>
     </td>
-    <td v-if="!isMini">
+    <td v-if="!isMini" class='hidden-sm hidden-xs'>
       <div class="animation-container">
-        <div class="line-of-code-1"></div>
-        <div class="line-of-code-2"></div>
-        <div class="line-of-code-3"></div>
-        <div class="line-of-code-4"></div>
-        <div class="line-of-code-5"></div>
-        <div class="line-of-code-6"></div>
+        <div v-for="n in 6" :class="lineOfCode(n)"></div>
       </div>
     </td>
-    <td v-if="!isMini">
+    <td v-if="!isMini" class='hidden-xs'>
       <div class="animation-container animation-container-small">
-        <div class="line-of-code-1"></div>
-        <div class="line-of-code-2"></div>
-        <div class="line-of-code-3"></div>
-        <div class="line-of-code-4"></div>
-        <div class="line-of-code-5"></div>
-        <div class="line-of-code-6"></div>
+        <div v-for="n in 6" :class="lineOfCode(n)"></div>
       </div>
     </td>
   </tr>
   `,
+  
+  methods: {
+    lineOfCode(n) {
+      return `line-of-code-${n}`;
+    }
+  },
+
   props: {
     loading: Object,
     hasFiles: Boolean,

app/assets/javascripts/repo/repo_sidebar.js

@@ -3,6 +3,7 @@ import Helper from './repo_helper'
 import Vue from 'vue'
 import Store from './repo_store'
 import RepoPreviousDirectory from './repo_prev_directory'
+import RepoFileOptions from './repo_file_options'
 import RepoFile from './repo_file'
 import RepoLoadingFile from './repo_loading_file'
 import RepoMiniMixin from './repo_mini_mixin'
@@ -19,6 +20,7 @@ export default class RepoSidebar {
       el: '#sidebar',
       mixins: [RepoMiniMixin],
       components: {
+        'repo-file-options': RepoFileOptions,
         'repo-previous-directory': RepoPreviousDirectory,
         'repo-file': RepoFile,
         'repo-loading-file': RepoLoadingFile,

app/assets/javascripts/repo/repo_store.js

@@ -10,14 +10,15 @@ let RepoStore = {
   blobRaw: '',
   blobRendered: '',
   openedFiles: [],
-  activeFile: '',
+  activeFile: {},
   files: [],
   binary: false,
   binaryMimeType: '',
   //scroll bar space for windows
   scrollWidth: 0,
   binaryTypes: {
-    png: false
+    png: false,
+    markdown: false
   },
   loading: {
     tree: false,

app/assets/stylesheets/framework/layout.scss

@@ -120,3 +120,9 @@ of the body element here, we negate cascading side effects but allow momentum sc
 .page-with-sidebar {
   -webkit-overflow-scrolling: auto;
 }
+.truncate {
+  width: 250px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
\ No newline at end of file

app/assets/stylesheets/framework/mixins.scss

@@ -118,3 +118,10 @@
     @content;
   }
 }
+
+@mixin truncate($width: 250px) {
+  width: $width;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

app/assets/stylesheets/pages/repo.scss

@@ -2,20 +2,18 @@
   display: none;
 }
 
-.ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 300px;
-}
-
 .fade-enter-active, .fade-leave-active {
   transition: opacity .5s
 }
+
 .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
   opacity: 0
 }
 
+.commit-message {
+  @include truncate(250px);
+}
+
 .tree-content-holder {
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
@@ -98,15 +96,66 @@ header {
 
   tr {
     -webkit-animation: fadein 0.5s;
+    &.repo-file-options td {
+      padding: 0;
+      border-top: none;
+      background: $gray-light;
+      width: 190px;
+      display: inline-block;
+      border-top: none;
+
+      &:hover {
+        .title {
+          width: 105px;
+        }
+
+        ul {
+          display: inline-block;  
+        }
+        
+      }
+
+      .title {
+        display: inline-block;
+        font-size: 10px;
+        text-transform: uppercase;
+        font-weight: bold;
+        color: $gray-darkest;
+        width: 185px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        vertical-align: middle;
+        padding: 2px 16px;
+      }
+      ul {
+        display: none;
+        float: right;
+        margin: 0 10px 0 0;
+        padding: 1px 0;
+
+        li {
+          display: inline-block;
+          padding: 0px 2px;
+          border-bottom: none;
+        }
+      }
+    }
+    .fa {
+      margin-right: 5px;
+    }
   }
 
   a {
     color: $almost-black;
+    display: inline-block;
+    vertical-align: middle;
   }
 
   ul {
     list-style-type: none;
     padding: 0;
+
     li {
       border-bottom: 1px solid $border-gray-normal;
       padding: 10px 20px;

app/controllers/concerns/renders_blob.rb

@@ -11,8 +11,9 @@ module RendersBlob
       else
         blob.simple_viewer
       end
+    
     return render_404 unless viewer
-    puts blob
+
     if blob.binary?
       render json: {
         binary: true,

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

@@ -11,4 +11,10 @@
   - else
     - viewer.prepare!
 
-    = render 'projects/tree/tree_content'
+    -# 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
+

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

@@ -6,14 +6,15 @@
           Name
         %th{"v-else" => "1"}
           Project
-        %th{"v-if" => "!isMini"}
+        %th.hidden-sm.hidden-xs{"v-if" => "!isMini"}
           Last Commit
-        %th{"v-if" => "!isMini"}
+        %th.hidden-xs{"v-if" => "!isMini"}
           Last Update
       %tbody
+        %tr{ is: "repo-file-options", ":is-mini" => "isMini", "project-name" => @project.name }
         %tr{ is: "repo-previous-directory", ":prevurl" => "prevURL", "@linkclicked" => "linkClicked" }
         %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" }
+        %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"}
       %li{ is: "repo-tab", "v-for" => "tab in openedFiles", ":key" => "tab.id", ":tab" => "tab", ":class" => "{'active' : tab.active}" }