Make filer-ui bootstrap style

weed/server/filer_ui/breadcrumb.go

@@ -15,8 +15,12 @@ func ToBreadcrumb(fullpath string) (crumbs []Breadcrumb) {
 	parts := strings.Split(fullpath, "/")
 
 	for i := 0; i < len(parts); i++ {
+		name := parts[i]
+		if name == "" {
+			name = "/"
+		}
 		crumb := Breadcrumb{
-			Name: parts[i] + " /",
+			Name: name,
 			Link: "/" + util.Join(parts[0:i+1]...),
 		}
 		if !strings.HasSuffix(crumb.Link, "/") {

weed/server/filer_ui/filer.html

@@ -11,6 +11,7 @@
 
         #drop-area {
             border: 1px transparent;
+            margin-top: 5px;
         }
 
         #drop-area.highlight {
@@ -46,37 +47,13 @@
             vertical-align: bottom;
         }
 
-        .danger {
-            color: red;
-            background: #fff;
-            border: 1px solid #fff;
-            border-radius: 2px;
-        }
-
-        .info {
-            background: #fff;
-            border: 1px solid #fff;
-            border-radius: 2px;
-        }
-
         .footer {
             position: absolute;
-            bottom: 10px;
-            right: 10%;
-            min-width: 30%;
-        }
-
-        .progress-table {
-            width: 100%;
-        }
-
-        .progress-table-file-name {
-            text-align: right;
-        }
-
-        .progress-table-percent {
-            width: 60px;
-            text-align: right;
+            bottom: 0px;
+            right: 5%;
+            min-width: 25%;
+            border-left: 1px solid #ccc;
+            border-right: 1px solid #ccc;
         }
 
         .add-files {
@@ -98,13 +75,17 @@
     </div>
     <div class="row">
         <div>
+            <div class="btn-group btn-group-sm pull-right" role="group" style="margin-top:3px;">
+                <label class="btn btn-default" onclick="handleCreateDir()">New Folder</label>
+                <label class="btn btn-default" for="fileElem">Upload</label>
+            </div>
+            <ol class="breadcrumb">
             {{ range $entry := .Breadcrumbs }}
-            <a href="{{ printpath $entry.Link }}">
+            <li><a href="{{ printpath $entry.Link }}">
                 {{ $entry.Name }}
-            </a>
+            </li></a>
             {{ end }}
-            <label class="button" for="fileElem">Upload</label>
-            <label class="button" onclick="handleCreateDir()">New Folder</label>
+            </ol>
         </div>
     </div>
 
@@ -112,7 +93,12 @@
         <form class="upload-form">
             <input type="file" id="fileElem" multiple onchange="handleFiles(this.files)">
 
-            <table width="100%">
+            {{if .EmptyFolder}}
+            <div class="row add-files">
+                +
+            </div>
+            {{else}}
+            <table width="100%" class="table table-hover">
                 {{$path := .Path }}
                 {{ range $entry_index, $entry := .Entries }}
                 <tr>
@@ -144,20 +130,18 @@
                         {{ $entry.Timestamp.Format "2006-01-02 15:04" }}
                     </td>
                     <td>
+                        <div class="btn-group btn-group-xs pull-right" role="group">
+                            <label class="btn btn-default" onclick="handleRename('{{ $entry.Name }}', '{{ printpath $path "/" }}')">Rename</label>
                             {{if $entry.IsDirectory}}
-                        <label class="button danger" onclick="handleDelete('{{ printpath $path  "/" $entry.Name "/"  }}')">Delete</label>
+                            <label class="btn btn-danger" onclick="handleDelete('{{ printpath $path  "/" $entry.Name "/"  }}')">Delete</label>
                             {{else}}
-                        <label class="button danger" onclick="handleDelete('{{ printpath $path  "/" $entry.Name }}')">Delete</label>
+                            <label class="btn btn-danger" onclick="handleDelete('{{ printpath $path  "/" $entry.Name }}')">Delete</label>
                             {{end}}
-                        <label class="button info" onclick="handleRename('{{ $entry.Name }}', '{{ printpath $path "/" }}')">Rename</label>
+                        </div>
                     </td>
                 </tr>
                 {{ end }}
             </table>
-            {{if .EmptyFolder}}
-            <div class="row add-files">
-                +
-            </div>
             {{end}}
         </form>
     </div>
@@ -234,17 +218,23 @@
 
     function renderProgress() {
         var values = Object.values(uploadList);
-        var html = '<table class="progress-table">\n';
+        var html = '<table class="table">\n<tr><th>Uploading</th><\/tr>\n';
         for (let i of values) {
-            html += '<tr>\n<td class="progress-table-file-name">' + i.name + '<\/td>\n';
-            html += '<td class="progress-table-percent">' + i.percent + '% <\/td>\n<\/tr>\n';
+            var progressBarClass = 'progress-bar-striped active';
+            if (i.percent >= 100) {
+                progressBarClass = 'progress-bar-success';
+            }
+            html += '<tr>\n<td>\n';
+            html += '<div class="progress" style="margin-bottom: 2px;">\n';
+            html += '<div class="progress-bar ' + progressBarClass + '" role="progressbar" aria-valuenow="' + '100" aria-valuemin="0" aria-valuemax="100" style="width:' + i.percent + '%;">';
+            html += '<span style="margin-right: 10px;">' + i.name + '</span>' + i.percent + '%<\/div>';
+            html += '<\/div>\n<\/td>\n<\/tr>\n';
         }
         html += '<\/table>\n';
         progressArea.innerHTML = html;
         if (values.length > 0) {
             progressArea.attributes.style.value = '';
         }
-        console.log('Render Progress', values);
     }
 
     function reportProgress(file, percent) {
@@ -289,7 +279,7 @@
     }
 
     function handleCreateDir() {
-        var dirName = prompt('Directory Name:', '');
+        var dirName = prompt('Folder Name:', '');
         dirName = dirName.trim();
         if (dirName == null || dirName == '') {
             return;