q3aql/webui-aria2
q3aql/webui-aria2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Re-style

Browse Source 
* Fix alignment issues
* Use fixed width for label
* Iconize labels
* Colorize speeds
* Simplifications
* Re-arragements
This commit is contained in:
Nils Maier 2014-02-20 21:36:21 +01:00
parent c22cd3c28c
commit 89005aa168
5 changed files with 206 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
css/download.css
View File

@ -1,10 +1,22 @@
.download .label {
-webkit-transition: all 2s;
transition: all 2s;
}
.download .progress {
width: 100%;
margin: 0;
padding: 0;
}
.download-name {
font-size: 12px;
font-weight: bold;
font-size: small;
word-wrap: break-word;
}
.active-download, .waiting-download, .stopped-download, .download {
width: 100%;
margin-bottom: 10px;
margin-bottom: 0.9em;
background-color: rgb(245, 245, 245);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 4px 4px 4px 4px;
@ -20,8 +32,8 @@
.download-graph {
width: 30%;
margin-top: 5px;
margin-bottom: 5px;
margin-top: 1em;
margin-bottom: 1em;
margin-left: auto;
margin-right: auto;
}
@ -33,24 +45,26 @@
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.stats li {
padding: 5px;
margin-top: 2px;
margin-bottom: 2px;
padding: 0.75ex;
width: 20ex;
text-align: center;
overflow: scroll;
}
.download-progress {
.download-item {
cursor: pointer;
margin: 0px;
padding-left: 5px;
padding-right: 5px;
margin: 0;
padding-left: 6px;
padding-right: 6px;
padding-top: 0.3ex;
padding-bottom: 0.5ex;
}
.download-controls {
width: 65px;
padding: 5px;
}
.download-controls .btn-group {
height: 28px;
@ -66,26 +80,15 @@
font-size: 16px;
color: gray;
}
.download-overview {
cursor: pointer;
padding-left: 5px;
}
.download-detail {
cursor: pointer;
}
.download-detail .stats li {
width: 150px;
margin-bottom: 5px;
}
.download-detail h4 {
margin-left: 10px;
}
.download-files {
width: 90%;
margin-left: auto;
margin-right: auto;
max-width: 90%;
margin: 6px;
}
.download-files li {
padding: 5px;
margin: 5px;
padding: 0.8ex;
margin: 6px;
}

27
css/style.css
View File

@ -1,3 +1,26 @@
.label-active, .badge-active, .progress-active .bar {
background-color: #62C462;
}
.progress-success .bar {
background-color: #468847 !important;
}
.alerts {
position: fixed;
left: 1em;
right: 1em;
bottom: 1em;
z-index: 900;
margin: 0;
padding: 0;
background: white;
background: rgba(255,255,255,0.7);
}
.alert {
margin: 1em;
border-width: 0.5ex;
}
/* fix modal overflow on low resolutions */
.modal {
position: absolute;
@ -8,4 +31,8 @@
}
}
.download-graph {
font-size: x-small;
font-family: sans-serif;
}

283
index.html
View File

@ -106,17 +106,17 @@
<ul class="dropdown-menu">
<li>
<a href="#" ng-click="addUris()">
<i class="icon-download"></i> By URIs
<i class="icon-download">&nbsp;</i> By URIs
</a>
</li>
<li ng-show="isFeatureEnabled('BitTorrent')">
<a href="#" ng-click="addTorrents()">
<i class="icon-file"></i> By Torrents
<i class="icon-file">&nbsp;</i> By Torrents
</a>
</li>
<li ng-show="isFeatureEnabled('Metalink')">
<a href="#" ng-click="addMetalinks()">
<i class="icon-file"></i> By Metalinks
<i class="icon-file">&nbsp;</i> By Metalinks
</a>
</li>
</ul>
@ -128,24 +128,24 @@
<li>
<a
href="#"
ng-click="forcePauseAll()"><i class="icon-pause"></i> Pause All</a>
ng-click="forcePauseAll()"><i class="icon-pause">&nbsp;</i> Pause All</a>
</li>
<li>
<a
href="#"
ng-click="unpauseAll()"><i class="icon-play"></i> Resume Paused</a>
ng-click="unpauseAll()"><i class="icon-play">&nbsp;</i> Resume Paused</a>
</li>
<li>
<a
href="#"
ng-click="purgeDownloadResult()"><i class="icon-remove"></i> Purge Completed</a>
ng-click="purgeDownloadResult()"><i class="icon-remove">&nbsp;</i> Purge Completed</a>
</li>
<!-- not adding remove all as requires many rpc syscalls to finish
<li>
<a
href="#"
ng-click="removeAll()"><i class="icon-fire"></i> Remove All</a>
ng-click="removeAll()"><i class="icon-fire">&nbsp;</i> Remove All</a>
</li>
-->
</ul>
@ -163,25 +163,25 @@
<li>
<a
ng-click="changeCSettings()"
href="#"><i class="icon-wrench"></i> Connection Settings</a>
href="#"><i class="icon-wrench">&nbsp;</i> Connection Settings</a>
</li>
<li>
<a
ng-click="changeGSettings()"
href="#"><i class="icon-wrench"></i> Global Settings</a>
href="#"><i class="icon-wrench">&nbsp;</i> Global Settings</a>
</li>
<li>
<a
ng-click="showServerInfo()"
href="#"><i class="icon-info-sign"></i> Server info</a>
href="#"><i class="icon-info-sign">&nbsp;</i> Server info</a>
</li>
<li>
<a
ng-click="showAbout()"
href="#"><i class="icon-question-sign"></i> About and contribute</a>
href="#"><i class="icon-question-sign">&nbsp;</i> About and contribute</a>
</li>
</ul>
</li>
@ -194,10 +194,10 @@
href="#">Miscellaneous <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="#"><i class="icon-list-alt"></i> Global Statistics</a>
<a href="#"><i class="icon-list-alt">&nbsp;</i> Global Statistics</a>
</li>
<li>
<a href="#"><i class="icon-info-sign"></i> About</a>
<a href="#"><i class="icon-info-sign">&nbsp;</i> About</a>
</li>
</ul>
</li>
@ -212,7 +212,7 @@
<div role="main" class="container" ng-controller="DownloadCtrl">
<!-- {{{ alerts -->
<div ng-controller="AlertCtrl" class="row">
<div ng-controller="AlertCtrl" class="row alerts">
<div class="alert alert-{{alert.type}}" ng-repeat="alert in pendingAlerts">
<span ng-bind-html="alert.msg"></span>
<button type="button" class="close" ng-click="removeAlert($index)">x</button>
@ -262,8 +262,8 @@
<form class="row" ng-show="(totalAria2Downloads() > pageSize) || downloadFilter.length">
<fieldset>
<div class="span4">
<label>Search</label>
<input typ="text" ng-model="downloadFilter" class="input-large"/>
<label for="downloadFilter">Search</label>
<input id="downloadFilter" type="text" ng-model="downloadFilter" class="input-large"/>
<br>
<b>Found: {{totalDownloads}} / {{totalAria2Downloads()}} </b>
</div>
@ -275,12 +275,10 @@
class="row download" data-gid="{{download.gid}}">
<tbody>
<tr>
<td
ng-click="download.collapsed = !download.collapsed"
class="download-overview">
<b class="download-name">{{getName(download)}}</b>
<td class="download-name download-item" ng-click="download.collapsed = !download.collapsed">
{{getName(download)}}
</td>
<td class="download-controls" rowspan="2">
<td class="download-controls download-item" rowspan="2">
<!-- {{{ download control buttons -->
<div class="btn-group">
<button
@ -326,21 +324,21 @@
<a
ng-click="showSettings(download)"
ng-show="['waiting', 'active'].indexOf( getType(download) )!= -1"
href="#"><i class="icon-cog"></i> Settings</a>
href="#"><i class="icon-cog">&nbsp;</i> Settings</a>
</li>
<li ng-show="download.bittorrent && false">
<a href="#"><i class="icon-list-alt"></i> Peers</a>
<a href="#"><i class="icon-list-alt">&nbsp;</i> Peers</a>
</li>
<li>
<a ng-click="download.collapsed = !download.collapsed"
href="#"><i class="icon-info-sign"></i> More Info</a>
href="#"><i class="icon-info-sign">&nbsp;</i> More Info</a>
</li>
<li class="visible-phone">
<a ng-click="remove(download)"
href="#"><i class="icon-remove"></i> Remove</a>
href="#"><i class="icon-remove">&nbsp;</i> Remove</a>
</li>
</ul>
</div>
@ -348,194 +346,171 @@
</td>
</tr>
<tr>
<td
ng-click="download.collapsed = !download.collapsed"
class="download-overview">
<td class="download-overview download-item" ng-click="download.collapsed = !download.collapsed">
<!-- {{{ statistics -->
<ul class="stats pull-left">
<ul class="stats pull-left" ng-show="hasStatus(download, 'active')">
<!-- {{{ active download statistics -->
<li
ng-show="hasStatus(download, 'active')"
class="label label-success hidden-phone hidden-tablet">
<span>Status: {{download.status}}</span>
<li class="label label-active hidden-phone hidden-tablet">
<span title="Download status"><i class="icon-play">&nbsp;</i> {{download.status}}</span>
</li>
<li
ng-show="hasStatus(download, 'active')"
class="label label-success">
<span>ETA: {{getEta(download) | time}}</span>
<li class="label" ng-class="{'label-active': download.downloadSpeed > 2048, 'label-warning': download.downloadSpeed <= 2048}">
<span title="Download Speed"><i class="icon-download">&nbsp;</i> {{download.downloadSpeed | bspeed}}</span>
</li>
<li
ng-show="hasStatus(download, 'active')"
class="label label-success hidden-phone">
<span>Size: {{download.totalLength | blength}}</span>
<li ng-show="download.bittorrent" class="label hidden-phone" ng-class="{'label-active': download.uploadSpeed > 2048}">
<span title="Upload Speed"><i class="icon-upload">&nbsp;</i> {{download.uploadSpeed | bspeed}}</span>
</li>
<li
ng-show="hasStatus(download, 'active')"
class="label label-success hidden-phone">
<span>Downloaded: {{download.completedLength | blength}}</span>
<li class="label label-active">
<span title="Estimated time"><i class="icon-time">&nbsp;</i> {{getEta(download) | time}}</span>
</li>
<li
ng-show="hasStatus(download, 'active')"
class="label label-success hidden-phone hidden-tablet">
<span>Progress: {{getProgress(download)}}%</span>
<li class="label label-active hidden-phone">
<span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{download.totalLength | blength}}</span>
</li>
<li
ng-show="hasStatus(download, 'active')"
class="label label-success">
<span>Speed: {{download.downloadSpeed | bspeed}}</span>
<li class="label label-active hidden-phone">
<span title="Downloaded"><i class="icon-download-alt">&nbsp;</i> {{download.completedLength | blength}}</span>
</li>
<!-- TODO: figure out how to do multiple ng-show
<li ng-show="download.bittorrent" class="label label-success hidden-phone">Upload Speed: <span class="download-uploadSpeed">{{download.uploadSpeed | bspeed}}</span></li>
-->
<li class="label label-active hidden-phone hidden-tablet">
<span title="Progress"><i class="icon-chevron-right">&nbsp;</i> {{getProgress(download)}}%</span>
</li>
<!-- }}} -->
</ul>
<ul class="stats pull-left" ng-show="hasStatus(download, 'paused')">
<!-- {{{ paused download statistics -->
<li
ng-show="hasStatus(download, ['paused', 'waiting'])"
class="label label-info">
<span>Status: {{download.status}}</span>
<li class="label label-info">
<span title="Download Status"><i class="icon-pause">&nbsp;</i> {{download.status}}</span>
</li>
<li
ng-show="hasStatus(download, ['paused', 'waiting'])"
class="label label-info">
<span>Size: {{download.totalLength | blength}}</span>
<li class="label label-info">
<span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{download.totalLength | blength}}</span>
</li>
<li
ng-show="hasStatus(download, ['paused', 'waiting'])"
class="label label-info hidden-phone">
<span>Downloaded: {{download.completedLength | blength}}</span>
<li class="label label-info hidden-phone">
<span title="Downloaded"><i class="icon-download-alt">&nbsp;</i> {{download.completedLength | blength}}</span>
</li>
<li
ng-show="hasStatus(download, ['paused', 'waiting'])"
class="label label-info hidden-phone">
<span>Path: {{download.dir}}</span>
<li class="label label-info hidden-phone">
<span title="Download Path"><i class="icon-folder-open">&nbsp;</i> {{download.dir}}</span>
</li>
<!-- }}} -->
</ul>
<ul class="stats pull-left" ng-show="hasStatus(download, 'waiting')">
<!-- {{{ paused download statistics -->
<li class="label">
<span title="Download Status"><i class="icon-caret-right">&nbsp;</i> {{download.status}}</span>
</li>
<li class="label">
<span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{download.fmtTotalLength}}</span>
</li>
<li class="label hidden-phone">
<span title="Downloaded"><i class="icon-download-alt">&nbsp;</i> {{download.fmtCompletedLength}}</span>
</li>
<li class="label hidden-phone">
<span title="Download Path"><i class="icon-folder-open">&nbsp;</i> {{download.dir}}</span>
</li>
<!-- }}} -->
</ul>
<ul class="stats pull-left" ng-show="hasStatus(download, 'complete')">
<!-- {{{ complete download statistics -->
<li
ng-show="hasStatus(download, 'complete')"
class="label">
<span>Status: {{download.status}}</span>
<li class="label label-success">
<span title="Download Status"><i class="icon-check">&nbsp;</i> {{download.status}}</span>
</li>
<li
ng-show="hasStatus(download, 'complete')"
class="label hidden-phone">
<span>Path: {{download.dir}}</span>
<li class="label label-success hidden-phone">
<span title="Download Path"><i class="icon-folder-open">&nbsp;</i> {{download.dir}}</span>
</li>
<li
ng-show="hasStatus(download, 'complete')"
class="label">
<span>Size: {{download.totalLength | blength}}</span>
<li class="label label-success">
<span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{download.totalLength | blength}}</span>
</li>
<!-- }}} -->
</ul>
<ul class="stats pull-left" ng-show="hasStatus(download, 'removed')">
<!-- {{{ removed download statistics -->
<li
ng-show="hasStatus(download, 'removed')"
class="label label-warning">
<span>Status: {{download.status}}</span>
<li class="label label-warning">
<span title="Download Status"><i class="icon-remove">&nbsp;</i> {{download.status}}</span>
</li>
<li
ng-show="hasStatus(download, 'removed')"
<li ng-show="hasStatus(download, 'removed')"
class="label label-warning hidden-phone">
<span>Path: {{download.dir}}</span>
<span title="Download Path"><i class="icon-folder-open">&nbsp;</i> {{download.dir}}</span>
</li>
<li
ng-show="hasStatus(download, 'removed')"
<li ng-show="hasStatus(download, 'removed')"
class="label label-warning">
<span>Size: {{download.totalLength | blength}}</span>
</li>
<!-- }}} -->
<!-- {{{ error download statistics -->
<li
ng-show="hasStatus(download, 'error')"
class="label label-important">
<span>Status: {{download.status}}</span>
</li>
<li
ng-show="hasStatus(download, 'error')"
class="label label-important hidden-phone">
<span>Path: {{download.dir}}</span>
</li>
<li
ng-show="hasStatus(download, 'error')"
class="label label-important">
<span>Size: {{download.totalLength | blength}}</span>
<span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{download.totalLength | blength}}</span>
</li>
<!-- }}} -->
</ul>
<ul class="stats pull-left" ng-show="hasStatus(download, 'error')">
<!-- {{{ error download statistics -->
<li class="label label-important">
<span title="Download Status"><i class="icon-remove-sign">&nbsp;</i> {{download.status}}</span>
</li>
<li class="label label-important hidden-phone">
<span title="Download Path"><i class="icon-folder-open">&nbsp;</i> {{download.dir}}</span>
</li>
<li class="label label-important">
<span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{download.totalLength | blength}}</span>
</li>
<!-- }}} -->
</ul>
<!-- }}} -->
</td>
</tr>
<tr>
<td class="download-progress" colspan="2" ng-click="download.collapsed = !download.collapsed">
<div ng-show="hasStatus(download, 'active')" class="progress progress-striped" style="width: 100%; margin: 0; padding: 0;">
<td class="download-progress download-item" colspan="2" ng-click="download.collapsed = !download.collapsed">
<div class="progress progress-striped" ng-class="getProgressClass(download)">
<div class="bar" style="width: {{getProgress(download)}}%;"></div>
</div>
<div ng-show="hasStatus(download, ['paused', 'waiting'])" class="progress progress-info progress-striped" style="width: 100%; margin: 0; padding: 0;">
<div class="bar" style="width: {{getProgress(download)}}%;"></div>
</div>
<div ng-show="hasStatus(download, 'error')" class="progress progress-danger progress-striped" style="width: 100%; margin: 0; padding: 0;">
<div class="bar" style="width: {{getProgress(download)}}%;"></div>
</div>
<div ng-show="hasStatus(download, 'removed')" class="progress progress-warning progress-striped" style="width: 100%; margin: 0; padding: 0;">
<div class="bar" style="width: {{getProgress(download)}}%;"></div>
</div>
<div ng-show="hasStatus(download, 'complete')" class="progress progress-success progress-striped" style="width: 100%; margin: 0; padding: 0;">
<div class="bar" style="width: {{getProgress(download)}}%;"></div>
</div>
</td>
</tr>
<tr ng-click="download.collapsed = !download.collapsed" class="download-detail">
<td colspan="2">
<tr>
<td colspan="2" ng-click="download.collapsed = !download.collapsed">
<div collapse="download.collapsed">
<canvas bitfield="download.bitfield" draw="!download.collapsed" pieces="download.numPieces" class="progress chunk-canvas" width="1400" style="width: 100%; margin: 5px;" chunkbar></canvas>
<ul class="stats">
<li class="label">Status: <span class="download-status">{{download.status}}</span></li>
<li class="label">GID: <span class="download-gid">{{download.gid}}</span></li>
<li class="label">Dir: <span class="download-dir">{{download.dir}}</span></li>
<li class="label">Size: <span class="download-totalLength">{{download.totalLength | blength}}</span></li>
<li class="label">Downloaded: <span class="download-completedLength">{{download.completedLength | blength}}</span></li>
<li class="label">Num of Pieces: <span class="download-numPieces">{{download.numPieces}}</span></li>
<li class="label">Piece Length: <span class="download-pieceLength">{{download.pieceLength | blength}}</span></li>
<li class="label">ETA: <span class="download-eta">{{getEta(download) | time}}</span></li>
<li class="label">Down Speed: <span class="download-downloadSpeed">{{download.downloadSpeed | bspeed}}</span></li>
<div class="download-item" ng-show="download.numPieces > 1">
<canvas bitfield="download.bitfield" draw="!download.collapsed" pieces="download.numPieces" class="progress chunk-canvas" width="1400" chunkbar></canvas>
</div>
<ul class="stats download-item">
<li class="label" title="Download Path"><i class="icon-folder-open">&nbsp;</i> <span class="download-dir">{{download.dir}}</span></li>
<li class="label" title="Estimated Time"><i class="icon-time">&nbsp;</i> <span class="download-eta">{{getEta(download) | time}}</span></li>
<li class="label" title="Download Size"><i class="icon-cloud-download">&nbsp;</i> <span class="download-totalLength">{{download.totalLength | blength}}</span></li>
<li class="label" title="Downloaded"><i class="icon-download-alt">&nbsp;</i> <span class="download-completedLength">{{download.completedLength | blength}}</span></li>
<li class="label" title="Download Speed"><i class="icon-download">&nbsp;</i> <span class="download-downloadSpeed">{{download.downloadSpeed | bspeed}}</span></li>
<li class="label" ng-show="download.bittorrent">Upload Speed: <span class="download-uploadSpeed">{{download.uploadSpeed | bspeed}}</span></li>
<li class="label" ng-show="download.bittorrent">Upload Length: <span class="download-uploadLength">{{download.uploadLength | blength}}</span></li>
<li class="label" title="Upload Speed" ng-show="download.bittorrent"><i class="icon-upload">&nbsp;</i> <span class="download-uploadSpeed">{{download.uploadSpeed | bspeed}}</span></li>
<li class="label" title="Uploaded" ng-show="download.bittorrent"><i class="icon-upload-alt">&nbsp;</i> <span class="download-uploadLength">{{download.uploadLength | blength}}</span></li>
<li class="label">Connections: <span class="download-connections">{{download.connections}}</span></li>
<li class="label" title="Connections"><i class="icon-link">&nbsp;</i> <span class="download-connections">{{download.connections}}</span></li>
<li class="label" title="Download GID"><i class="icon-reorder">&nbsp;</i> <span class="download-gid">{{download.gid}}</span></li>
<li class="label" title="Number of Pieces"># of <i class="icon-puzzle-piece">&nbsp;</i> <span class="download-numPieces">{{download.numPieces}}</span></li>
<li class="label" title="Piece Length"><i class="icon-puzzle-piece"></i> Length&nbsp; <span class="download-pieceLength">{{download.pieceLength | blength}}</span></li>
</ul>
<h4 class="hidden-phone">Download Files</h4>
<ul class="download-files hidden-phone">
<ul class="download-files hidden-phone download-item">
<li class="label" ng-repeat="file in download.files">{{file.path | prelative:download.dir}} ({{file.length | blength}})</li>
</ul>
<div ng-show="hasStatus(download, 'active')">
<div ng-show="hasStatus(download, 'active')" class="download-item">
<div class="download-graph" dspeed="download.downloadSpeed" uspeed="download.uploadSpeed" dgraph draw="!download.collapsed"></div>
</div>
</div>

2
js/ctrls/alert.js
View File

@ -17,7 +17,7 @@ angular.module('webui.ctrls.alert', [
setTimeout(function() {
var ind = scope.pendingAlerts.indexOf(obj);
if (ind != -1) scope.removeAlert(ind);
}, 10000);
}, type == "error" ? 10000 : 3000);
scope.$digest();
});

19
js/ctrls/download.js
View File

@ -144,7 +144,7 @@ function(
scope.totalDownloads = downloads.length;
scope.totalPages = Math.ceil(scope.totalDownloads / scope.pageSize)
scope.totalPages = Math.ceil(scope.totalDownloads / scope.pageSize) || 1;
// fix the bug when downloads are deleted until no left on a specific page
if (scope.currentPage > scope.totalPages)
@ -242,6 +242,23 @@ function(
return (d.totalLength-d.completedLength) / d.downloadSpeed;
}
scope.getProgressClass = function(d) {
switch (d.status) {
case "paused":
return "progress-info";
case "error":
return "progress-danger";
case "removed":
return "progress-warning";
case "active":
return "progress-active";
case "complete":
return "progress-success";
default:
return "";
}
};
// gets the progress in percentages
scope.getProgress = function(d) {
var percentage = (d.completedLength / d.totalLength)*100 || 0;