filebrowser: pathbar: make pathbar responsible (part 1)

vispa/extensions/file/static/css/base/base.css

@@ -95,8 +95,10 @@
     position:absolute !important;
     left: 0px !important;
     bottom: 0px !important;
-    height: 30px !important;
+    height: 32px !important;
     background-color: #fcfcfc;
+    overflow-x: auto;
+    overflow-y: hidden;
     /* following entry has to be removed when bookmarks leave this place */
     border-top: 1px solid #d3d3d3;
 }
@@ -125,4 +127,4 @@
 
 .breadcrumb > li + li:before {
     color: #333;
-}
\ No newline at end of file
+}

vispa/extensions/file/static/css/base/views/table/table.css

@@ -53,7 +53,7 @@
 /* div around the filelist */
 .file-table-list-container {
     position: absolute;
-    bottom: 30px;
+    bottom: 32px;
     right: 0px;
     top: 34px;
     left: 0px;
@@ -166,7 +166,8 @@
 
 /* selected rows */
 .files-table .file-table-row[selected] {
-    background-color: #D6D6D6;
+    /*background-color: #D6D6D6;*/
+    background-color: #f9f9f9;
 }
 
 

vispa/extensions/file/static/html/pathbar.html

 <div class="file-path-bar">
-	<div class="bookmark-opener text-center">
-		<i class="glyphicon glyphicon-bookmark"></i>
-	</div>
+    <div class="bookmark-opener text-center">
+        <i class="glyphicon glyphicon-bookmark"></i>
+    </div>
     <ul class="file-path-parts breadcrumb">
-        <li><a href="#" data-bind="pathPart"></a></li>
+        <li><a href="#" nowrap class="file-path-bar-item" data-bind="pathPart"></a></li>
     </ul>
 </div>
\ No newline at end of file

vispa/extensions/file/static/js/base/view.js

@@ -153,24 +153,19 @@ var FileBaseView = Class.extend({
       dfd.done(function() {
         var pathParts = self.FileBase.helper.splitPath(dfd.responseText);
 
-        // to make path readable: replace first pathPart to disk
-        if (pathParts[0].pathPart == "") {
-          pathParts[0].pathPart = " ";
-        }
-
-        // build pathes to pathParts
+        // build links to pathParts
         var pathPartsLinks = []
-        var t = "";
+        var item = "";
         $.each(pathParts, function(idx, part) {
           if (idx == 0) {
-            t = "/";
+            item = "/";
           } else {
-            t = t + "/" + part.pathPart;
+            item = item + "/" + part.pathPart;
           }
-          t = t.replace(/\/{2,}/g, "/");
+          item = item.replace(/\/{2,}/g, "/");
           pathPartsLinks.push({
             "pathPart": part.pathPart,
-            "pathPartLink": t
+            "pathPartLink": item
           });
         })
 
@@ -196,8 +191,15 @@ var FileBaseView = Class.extend({
           }
           self.FileBase.updateView();
         })
-      });
 
+        // make path bar responsive, also on resizing window
+        self.resizePathBar(self.filePathBar);
+        $(window).resize(function() {
+          self.resizePathBar(self.filePathBar);
+        });
+
+      });
+      // bookmarks. remove following lines, when bookmarks are thrown out
       $(".bookmark-opener", self.filePathBar).on(clicktype, function(event) {
         event.stopPropagation();
         self.FileBase.bookmarkcontainer.changeVisibility();
@@ -205,7 +207,33 @@ var FileBaseView = Class.extend({
     });
   },
 
-  // toggleViewMenu: function(prevView, newView) {
+
+  resizePathBar: function(pathBar) {
+    var replaceWith = " ...";
+    var pathPartItems = $("li", pathBar);
+    var replace = false;
+
+    pathPartItems.each(function(index, value) {
+      var heightPathbarItems = $("ul", pathBar).height();
+
+      if (heightPathbarItems < 20) {
+      }
+      else{
+        if (index > 0 && index < pathPartItems.length-2) {
+          $(this).hide();
+          if (replace === false) {
+            $(this).after(replaceWith);
+            replace = true;
+          }
+        }
+      }
+    });
+    // TO DO: the other way round (upper code works when browser is getting smaller, not when it is getting wider..)
+    // TO DO: shorten li:last-child when folder name is to long
+  },
+
+
+  // toggleViewMenu: function(preView, newView) {
   toggleViewMenu: function() {
     var ids = ["Table", "Symbol"];
     var view = this.FileBase.workflow.currentView.type;