Folder view as path bar

app/assets/javascripts/vue/treeview.js

@@ -25,6 +25,25 @@
           return _.find(this.paths, function(path){
             return self.path == path.path;
           });
+        },
+        currentDirs: function() {
+          if(this.path === "/") {
+            return ["/"];
+          }
+
+          var path = this.path;
+          if(this.selected && !this.selected.is_dir) {
+            path = path.replace(/\/[^/]+$/, "");
+          }
+          var root = "/";
+          var dirs = [];
+          path.split("/").forEach(function(dir) {
+            dirs.push(root + dir);
+            if(dir) {
+              root = root + dir + "/";
+            }
+          });
+          return dirs;
         }
       },
 
@@ -32,6 +51,10 @@
         isAncestor: function(target) {
           return this.path.indexOf(target) === 0;
         },
+        basename: function(path) {
+          if (path === "/") return "/";
+          return path.match(/[^/]+$/)[0];
+        },
         fetchTree: function() {
           var self = this;
           new Promise(function(resolve, reject) {
@@ -42,6 +65,7 @@
         },
         fetchPreview: function(){
           var self = this;
+          this.preview = "";
           new Promise(function(resolve, reject) {
             $.getJSON("/api/file_preview?file=" + self.selected.path, resolve).fail(reject);
           }).then(function(lines){

app/assets/stylesheets/common.css.scss

@@ -65,7 +65,7 @@ label {
 
 #treeview {
   .tree {
-    height: 20em;
+    height: 40em;
     overflow-y: auto;
   }
   .preview {
@@ -73,9 +73,31 @@ label {
   }
   .vue-path {
     cursor: pointer;
+    display: block;
 
+    &:hover {
+      background-color: #d9d9d9;
+    }
     &.selected {
-      background-color: #cfc;
+      background-color: #9cf;
+    }
+  }
+  .dirs {
+    padding: 1ex 0;
+    .dir {
+      background: #e0e9f9;
+      padding: 0 1ex;
+      margin: 0 1ex 0 0;
+      cursor: pointer;
+    }
+    .fa-caret-right {
+      color: #bbb;
     }
   }
 }
+
+
+.fa-folder, .fa-folder-open {
+  color: #6af;
+}
+

app/views/shared/vue/_treeview.html.erb

@@ -1,9 +1,20 @@
 <div id="treeview">
   <input type="text" name="<%= try(:name) %>" size="48" v-model="path" />
+  <div class="dirs">
+    <span v-repeat="currentDirs">
+      <span v-if="$index > 0">
+        <%= icon('fa-caret-right') %>
+      </span>
+      <span v-on="click: selectPath($value)" class="dir">
+        {{ basename($value) }}
+      </span>
+    </span>
+  </div>
   <div class="tree">
     <pre>
 <span v-on="click: selectPath(path)" class="vue-path" v-class="selected: isSelected(path)" v-repeat="paths"><span
-  v-if="is_dir"><span v-if="!isAncestor(path)"><%= icon("fa-folder") %></span><span v-if="isAncestor(path)"><%= icon("fa-folder-open") %></span></span>{{ path }}<span v-if="isSuffixRequired($data)">/</span>
+  v-if="is_dir"><%= icon("fa-folder") %></span><span
+  v-if="!is_dir"><%= icon("fa-file-o") %></span>{{ basename(path) }}
 </span></pre>
   </div>
 

lib/treeview.rb

@@ -15,7 +15,7 @@ class Treeview
   end
 
   def tree
-    parents + Dir.glob("#{root_dir == "/" ? "/" : "#{root_dir}/"}*").map do |file|
+    Dir.glob("#{root_dir == "/" ? "/" : "#{root_dir}/"}*").map do |file|
       {
         :path => file,
         :is_dir => File.directory?(file),