Skip to content

Commit a5f147d

Browse files
beemanbeeman
committed
Clean up File upload view
1 parent 9845ed2 commit a5f147d

4 files changed

Lines changed: 91 additions & 101 deletions

File tree

‎client/app/css/AdminLTE.css‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);
22
@import url(//fonts.googleapis.com/css?family=Kaushan+Script);
3-
/*!
3+
/*!
44
* AdminLTE v1.2
55
* Author: AlmsaeedStudio.com
66
* License: Open source - MIT
@@ -748,7 +748,7 @@ header.header .logo .icon {
748748
left: 0px;
749749
}
750750
}
751-
/*
751+
/*
752752
Dropdown menus
753753
----------------------------
754754
*/
@@ -1126,7 +1126,7 @@ header.header .logo .icon {
11261126
left: auto;
11271127
}
11281128
}
1129-
/*
1129+
/*
11301130
All form elements including input, select, textarea etc.
11311131
-----------------------------------------------------------------
11321132
*/
@@ -1176,7 +1176,7 @@ header.header .logo .icon {
11761176
.radio {
11771177
padding-left: 0;
11781178
}
1179-
/*
1179+
/*
11801180
Compenent: Progress bars
11811181
--------------------------------
11821182
*/
@@ -1953,8 +1953,6 @@ Component: timeline
19531953
}
19541954
.btn.btn-file {
19551955
position: relative;
1956-
width: 120px;
1957-
height: 35px;
19581956
overflow: hidden;
19591957
}
19601958
.btn.btn-file > input[type='file'] {
@@ -2037,7 +2035,7 @@ Component: timeline
20372035
-moz-border-radius: 50%;
20382036
border-radius: 50%;
20392037
}
2040-
/*
2038+
/*
20412039
Component: callout
20422040
------------------------
20432041
*/
@@ -2077,7 +2075,7 @@ Component: timeline
20772075
.callout.callout-info h4 {
20782076
color: #3A87AD;
20792077
}
2080-
/*
2078+
/*
20812079
Component: alert
20822080
------------------------
20832081
*/
@@ -2389,7 +2387,7 @@ Component: timeline
23892387
margin-top: 30px;
23902388
text-align: center;
23912389
}
2392-
/*
2390+
/*
23932391
Page: register and login
23942392
*/
23952393
.form-box {
@@ -2455,7 +2453,7 @@ Component: timeline
24552453
width: 90%;
24562454
}
24572455
}
2458-
/*
2456+
/*
24592457
Page: 404 and 500 error pages
24602458
------------------------------------
24612459
*/
@@ -2505,7 +2503,7 @@ Component: timeline
25052503
.error-page:after {
25062504
clear: both;
25072505
}
2508-
/*
2506+
/*
25092507
Page: Invoice
25102508
*/
25112509
.invoice {
@@ -2538,12 +2536,12 @@ Component: timeline
25382536
white-space: normal!important;
25392537
}
25402538
}
2541-
/*
2539+
/*
25422540
Skins
25432541
-----
25442542
*/
2545-
/*
2546-
Skin Blue
2543+
/*
2544+
Skin Blue
25472545
---------
25482546
*/
25492547
/* skin-blue navbar */

‎client/app/modules/browser/views/models.items.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@
22
<div class="panel panel-default">
33
<div class="panel-heading">
44
{{items.model.name}}
5-
65
<span class="pull-right">
76
<a ui-sref="app.browser.models.items.add({ modelName: items.model.name})" class="btn btn-xs btn-default">Add</a>
87
</span>
9-
108
</div>
119

12-
<alert ng-if="!items.items || !items.items.length" type="alert alert-info">
13-
No items found
14-
<span ng-if="items.model.name">for {{items.model.name}}</span>
15-
</alert>
10+
<div class="panel-body" ng-if="!items.items || !items.items.length">
11+
<alert type="alert alert-info">
12+
No items found
13+
<span ng-if="items.model.name">for {{items.model.name}}</span>
14+
</alert>
15+
</div>
1616

1717
<div class="table-responsive" ng-if="items.items && items.items.length" style="overflow: auto">
1818
<table class="table table-striped" ng-if="items.itemKeys">

‎client/app/modules/files/views/list.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<h4 class="list-group-item-heading">
1818
{{item.container}} /
1919
<a href="{{apiUrl}}/containers/files/download/{{item.name}}" target="_blank"><strong>{{item.name}}</strong></a>
20-
<small>{{item.size}}</small>
20+
<small>{{item.size/1024/1024|number:2 }} MB </small>
2121
</h4>
2222

2323
</div>

‎client/app/modules/files/views/upload.html‎

Lines changed: 72 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -3,91 +3,83 @@
33
<div class="panel-heading">
44
<a href="" ui-sref="^.list" class="btn btn-xs btn-default"><i class="fa fa-arrow-left"></i></a>
55
{{ 'Upload files' | translate }}
6-
</div>
7-
<div class="panel-body">
8-
9-
<div class="col-md-2">
10-
<div class="file-input btn btn-block btn-success btn-file">
11-
{{ 'Browse files' | translate }}&hellip; <input nv-file-select type="file" uploader="ctrl.uploader"
12-
multiple/>
6+
<span class="text-muted" translate>You can just drag them in this window!</span>
7+
<span class="pull-right">
8+
<div class="file-input btn btn-xs btn-success btn-file">
9+
{{ 'Browse' | translate }}&hellip;
10+
<input nv-file-select type="file" uploader="ctrl.uploader" multiple/>
1311
</div>
14-
<span class="text-muted" translate>Or you can just drag them in this window!</span>
15-
</div>
16-
17-
<div class="col-md-10">
18-
19-
<div class="row">
20-
<div class="col-md-12">
21-
<div ng-if="ctrl.uploader.progress">
22-
<br/>
12+
</span>
13+
</div>
2314

24-
<div class="progress">
25-
<div class="progress-bar" role="progressbar" ng-style="{ 'width': ctrl.uploader.progress + '%' }">
26-
{{ctrl.uploader.progress}}%
27-
</div>
28-
</div>
29-
</div>
15+
<table class="table table-bordered table-stiped">
16+
<tr>
17+
<th width="50%" translate>Name</th>
18+
<th ng-show="ctrl.uploader.isHTML5" translate>Size</th>
19+
<th ng-show="ctrl.uploader.isHTML5" translate>Progress</th>
20+
<th translate>Status</th>
21+
<th translate>Actions</th>
22+
</tr>
23+
<tr ng-repeat="item in ctrl.uploader.queue">
24+
<td><strong>{{ item.file.name }}</strong>
25+
</td>
26+
<td ng-show="ctrl.uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB
27+
</td>
28+
<td ng-show="ctrl.uploader.isHTML5">
29+
<div class="progress" style="margin-bottom: 0;">
30+
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
31+
</div>
32+
</td>
33+
<td class="text-center">
34+
<span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
35+
<span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
36+
<span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
37+
</td>
38+
<td nowrap>
39+
<div class="input-group pull-right btn-group btn-group-xs">
40+
<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()"
41+
ng-disabled="item.isReady || item.isUploading || item.isSuccess">
42+
<span class="glyphicon glyphicon-upload"></span>
43+
</button>
44+
<button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()"
45+
ng-disabled="!item.isUploading">
46+
<span class="glyphicon glyphicon-ban-circle"></span>
47+
</button>
48+
<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
49+
<span class="glyphicon glyphicon-trash"></span>
50+
</button>
3051
</div>
52+
</td>
53+
</tr>
54+
</table>
3155

32-
<div class="panel panel-default">
33-
<div class="panel-heading">
34-
{{ 'Upload queue' | translate }}
35-
<small> {{ ctrl.uploader.queue.length }} {{ 'in queue' | translate }}</small>
36-
<div class="pull-right btn-group">
37-
<button type="button" class="btn btn-success btn-xs" ng-click="ctrl.uploader.uploadAll()"
38-
ng-disabled="!ctrl.uploader.getNotUploadedItems().length">
39-
<span class="glyphicon glyphicon-upload"></span> {{ 'Upload all' | translate }}
40-
</button>
41-
<button type="button" class="btn btn-warning btn-xs" ng-click="ctrl.uploader.cancelAll()"
42-
ng-disabled="!ctrl.uploader.isUploading">
43-
<span class="glyphicon glyphicon-ban-circle"></span> {{ 'Cancel all' | translate }}
44-
</button>
45-
<button type="button" class="btn btn-danger btn-xs" ng-click="ctrl.uploader.clearQueue()"
46-
ng-disabled="!ctrl.uploader.queue.length">
47-
<span class="glyphicon glyphicon-trash"></span> {{ 'Remove all' | translate }}
48-
</button>
49-
</div>
56+
<div class="panel-footer">
57+
<div class="row">
58+
<div class="col-md-3">
59+
{{ 'Upload queue' | translate }}
60+
<small> {{ ctrl.uploader.queue.length }} {{ 'in queue' | translate }}</small>
61+
</div>
62+
<div class="col-md-6">
63+
<div class="progress" style="margin-bottom: 0px;" ng-if="ctrl.uploader.progress">
64+
<div class="progress-bar" role="progressbar" ng-style="{ 'width': ctrl.uploader.progress + '%' }">
65+
{{ctrl.uploader.progress}}%
5066
</div>
51-
<table class="table table-bordered table-stiped">
52-
<tr>
53-
<th width="50%" translate>Name</th>
54-
<th ng-show="ctrl.uploader.isHTML5" translate>Size</th>
55-
<th ng-show="ctrl.uploader.isHTML5" translate>Progress</th>
56-
<th translate>Status</th>
57-
<th translate>Actions</th>
58-
</tr>
59-
<tr ng-repeat="item in ctrl.uploader.queue">
60-
<td><strong>{{ item.file.name }}</strong>
61-
</td>
62-
<td ng-show="ctrl.uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB
63-
</td>
64-
<td ng-show="ctrl.uploader.isHTML5">
65-
<div class="progress" style="margin-bottom: 0;">
66-
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
67-
</div>
68-
</td>
69-
<td class="text-center">
70-
<span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
71-
<span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
72-
<span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
73-
</td>
74-
<td nowrap>
75-
<div class="input-group pull-right btn-group btn-group-xs">
76-
<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()"
77-
ng-disabled="item.isReady || item.isUploading || item.isSuccess">
78-
<span class="glyphicon glyphicon-upload"></span>
79-
</button>
80-
<button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()"
81-
ng-disabled="!item.isUploading">
82-
<span class="glyphicon glyphicon-ban-circle"></span>
83-
</button>
84-
<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
85-
<span class="glyphicon glyphicon-trash"></span>
86-
</button>
87-
</div>
88-
</td>
89-
</tr>
90-
</table>
67+
</div>
68+
</div>
69+
<div class="col-md-3" class="text-nowrap">
70+
<div class="pull-right btn-group" class="text-nowrap">
71+
<a class="btn btn-success btn-xs" ng-click="ctrl.uploader.uploadAll()"
72+
ng-disabled="!ctrl.uploader.getNotUploadedItems().length">
73+
{{ 'Upload' | translate }}
74+
</a>
75+
<a class="btn btn-warning btn-xs" ng-click="ctrl.uploader.cancelAll()"
76+
ng-disabled="!ctrl.uploader.isUploading">
77+
{{ 'Cancel' | translate }}
78+
</a>
79+
<a class="btn btn-danger btn-xs" ng-click="ctrl.uploader.clearQueue()"
80+
ng-disabled="!ctrl.uploader.queue.length">
81+
{{ 'Remove' | translate }}
82+
</a>
9183
</div>
9284
</div>
9385
</div>

0 commit comments

Comments
 (0)