gitlab-com-seaweedfs/seaweedfs
1
0
Fork 0
mirror of https://github.com/seaweedfs/seaweedfs.git synced 2024-01-19 02:48:24 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #2886 from blacktear23/filer-ui-bootstrap-style

Browse source 
Change filer-ui to bootstrap style
This commit is contained in:
Chris Lu 2022-04-07 10:04:46 -07:00 committed by GitHub
parent f34205e110 11a9f993a8
commit aa7703c6dd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 44 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
weed/server/filer_ui/breadcrumb.go
View file

@ -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, "/") {

88
weed/server/filer_ui/filer.html
View file

@ -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;