diff options
| -rw-r--r-- | weed/server/filer_ui/breadcrumb.go | 6 | ||||
| -rw-r--r-- | weed/server/filer_ui/filer.html | 88 |
2 files changed, 44 insertions, 50 deletions
diff --git a/weed/server/filer_ui/breadcrumb.go b/weed/server/filer_ui/breadcrumb.go index 5016117a8..3201ff76c 100644 --- a/weed/server/filer_ui/breadcrumb.go +++ b/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, "/") { diff --git a/weed/server/filer_ui/filer.html b/weed/server/filer_ui/filer.html index 593d115f0..9befef10f 100644 --- a/weed/server/filer_ui/filer.html +++ b/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> - {{if $entry.IsDirectory}} - <label class="button danger" onclick="handleDelete('{{ printpath $path "/" $entry.Name "/" }}')">Delete</label> - {{else}} - <label class="button danger" onclick="handleDelete('{{ printpath $path "/" $entry.Name }}')">Delete</label> - {{end}} - <label class="button info" onclick="handleRename('{{ $entry.Name }}', '{{ printpath $path "/" }}')">Rename</label> + <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="btn btn-danger" onclick="handleDelete('{{ printpath $path "/" $entry.Name "/" }}')">Delete</label> + {{else}} + <label class="btn btn-danger" onclick="handleDelete('{{ printpath $path "/" $entry.Name }}')">Delete</label> + {{end}} + </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; |