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 { .download-name {
font-size: 12px; font-weight: bold;
font-size: small;
word-wrap: break-word; word-wrap: break-word;
} }
.active-download, .waiting-download, .stopped-download, .download { .active-download, .waiting-download, .stopped-download, .download {
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 0.9em;
background-color: rgb(245, 245, 245); background-color: rgb(245, 245, 245);
border: 1px solid rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
@ -20,8 +32,8 @@
.download-graph { .download-graph {
width: 30%; width: 30%;
margin-top: 5px; margin-top: 1em;
margin-bottom: 5px; margin-bottom: 1em;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
@ -33,24 +45,26 @@
margin-bottom: 0px; margin-bottom: 0px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
text-align: center;
} }
.stats li { .stats li {
padding: 5px;
margin-top: 2px;
margin-bottom: 2px; margin-bottom: 2px;
padding: 0.75ex;
width: 20ex;
text-align: center;
overflow: scroll;
} }
.download-progress { .download-item {
cursor: pointer; cursor: pointer;
margin: 0px; margin: 0;
padding-left: 5px; padding-left: 6px;
padding-right: 5px; padding-right: 6px;
padding-top: 0.3ex;
padding-bottom: 0.5ex;
} }
.download-controls { .download-controls {
width: 65px; width: 65px;
padding: 5px;
} }
.download-controls .btn-group { .download-controls .btn-group {
height: 28px; height: 28px;
@ -66,26 +80,15 @@
font-size: 16px; font-size: 16px;
color: gray; 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 { .download-detail h4 {
margin-left: 10px; margin-left: 10px;
} }
.download-files { .download-files {
width: 90%; max-width: 90%;
margin-left: auto; margin: 6px;
margin-right: auto;
} }
.download-files li { .download-files li {
padding: 5px; padding: 0.8ex;
margin: 5px; 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 */ /* fix modal overflow on low resolutions */
.modal { .modal {
position: absolute; 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"> <ul class="dropdown-menu">
<li> <li>
<a href="#" ng-click="addUris()"> <a href="#" ng-click="addUris()">
<i class="icon-download"></i> By URIs <i class="icon-download">&nbsp;</i> By URIs
</a> </a>
</li> </li>
<li ng-show="isFeatureEnabled('BitTorrent')"> <li ng-show="isFeatureEnabled('BitTorrent')">
<a href="#" ng-click="addTorrents()"> <a href="#" ng-click="addTorrents()">
<i class="icon-file"></i> By Torrents <i class="icon-file">&nbsp;</i> By Torrents
</a> </a>
</li> </li>
<li ng-show="isFeatureEnabled('Metalink')"> <li ng-show="isFeatureEnabled('Metalink')">
<a href="#" ng-click="addMetalinks()"> <a href="#" ng-click="addMetalinks()">
<i class="icon-file"></i> By Metalinks <i class="icon-file">&nbsp;</i> By Metalinks
</a> </a>
</li> </li>
</ul> </ul>
@ -128,24 +128,24 @@
<li> <li>
<a <a
href="#" 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>
<li> <li>
<a <a
href="#" 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>
<li> <li>
<a <a
href="#" 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> </li>
<!-- not adding remove all as requires many rpc syscalls to finish <!-- not adding remove all as requires many rpc syscalls to finish
<li> <li>
<a <a
href="#" 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> </li>
--> -->
</ul> </ul>
@ -163,25 +163,25 @@
<li> <li>
<a <a
ng-click="changeCSettings()" ng-click="changeCSettings()"
href="#"><i class="icon-wrench"></i> Connection Settings</a> href="#"><i class="icon-wrench">&nbsp;</i> Connection Settings</a>
</li> </li>
<li> <li>
<a <a
ng-click="changeGSettings()" ng-click="changeGSettings()"
href="#"><i class="icon-wrench"></i> Global Settings</a> href="#"><i class="icon-wrench">&nbsp;</i> Global Settings</a>
</li> </li>
<li> <li>
<a <a
ng-click="showServerInfo()" 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>
<li> <li>
<a <a
ng-click="showAbout()" 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> </li>
</ul> </ul>
</li> </li>
@ -194,10 +194,10 @@
href="#">Miscellaneous <b class="caret"></b></a> href="#">Miscellaneous <b class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li> <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>
<li> <li>
<a href="#"><i class="icon-info-sign"></i> About</a> <a href="#"><i class="icon-info-sign">&nbsp;</i> About</a>
</li> </li>
</ul> </ul>
</li> </li>
@ -212,7 +212,7 @@
<div role="main" class="container" ng-controller="DownloadCtrl"> <div role="main" class="container" ng-controller="DownloadCtrl">
<!-- {{{ alerts --> <!-- {{{ 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"> <div class="alert alert-{{alert.type}}" ng-repeat="alert in pendingAlerts">
<span ng-bind-html="alert.msg"></span> <span ng-bind-html="alert.msg"></span>
<button type="button" class="close" ng-click="removeAlert($index)">x</button> <button type="button" class="close" ng-click="removeAlert($index)">x</button>
@ -262,8 +262,8 @@
<form class="row" ng-show="(totalAria2Downloads() > pageSize) || downloadFilter.length"> <form class="row" ng-show="(totalAria2Downloads() > pageSize) || downloadFilter.length">
<fieldset> <fieldset>
<div class="span4"> <div class="span4">
<label>Search</label> <label for="downloadFilter">Search</label>
<input typ="text" ng-model="downloadFilter" class="input-large"/> <input id="downloadFilter" type="text" ng-model="downloadFilter" class="input-large"/>
<br> <br>
<b>Found: {{totalDownloads}} / {{totalAria2Downloads()}} </b> <b>Found: {{totalDownloads}} / {{totalAria2Downloads()}} </b>
</div> </div>
@ -275,12 +275,10 @@
class="row download" data-gid="{{download.gid}}"> class="row download" data-gid="{{download.gid}}">
<tbody> <tbody>
<tr> <tr>
<td <td class="download-name download-item" ng-click="download.collapsed = !download.collapsed">
ng-click="download.collapsed = !download.collapsed" {{getName(download)}}
class="download-overview">
<b class="download-name">{{getName(download)}}</b>
</td> </td>
<td class="download-controls" rowspan="2"> <td class="download-controls download-item" rowspan="2">
<!-- {{{ download control buttons --> <!-- {{{ download control buttons -->
<div class="btn-group"> <div class="btn-group">
<button <button
@ -326,21 +324,21 @@
<a <a
ng-click="showSettings(download)" ng-click="showSettings(download)"
ng-show="['waiting', 'active'].indexOf( getType(download) )!= -1" 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>
<li ng-show="download.bittorrent && false"> <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>
<li> <li>
<a ng-click="download.collapsed = !download.collapsed" <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>
<li class="visible-phone"> <li class="visible-phone">
<a ng-click="remove(download)" <a ng-click="remove(download)"
href="#"><i class="icon-remove"></i> Remove</a> href="#"><i class="icon-remove">&nbsp;</i> Remove</a>
</li> </li>
</ul> </ul>
</div> </div>
@ -348,194 +346,171 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td <td class="download-overview download-item" ng-click="download.collapsed = !download.collapsed">
ng-click="download.collapsed = !download.collapsed"
class="download-overview">
<!-- {{{ statistics --> <!-- {{{ statistics -->
<ul class="stats pull-left"> <ul class="stats pull-left" ng-show="hasStatus(download, 'active')">
<!-- {{{ active download statistics --> <!-- {{{ active download statistics -->
<li <li class="label label-active hidden-phone hidden-tablet">
ng-show="hasStatus(download, 'active')" <span title="Download status"><i class="icon-play">&nbsp;</i> {{download.status}}</span>
class="label label-success hidden-phone hidden-tablet">
<span>Status: {{download.status}}</span>
</li> </li>
<li <li class="label" ng-class="{'label-active': download.downloadSpeed > 2048, 'label-warning': download.downloadSpeed <= 2048}">
ng-show="hasStatus(download, 'active')" <span title="Download Speed"><i class="icon-download">&nbsp;</i> {{download.downloadSpeed | bspeed}}</span>
class="label label-success">
<span>ETA: {{getEta(download) | time}}</span>
</li> </li>
<li <li ng-show="download.bittorrent" class="label hidden-phone" ng-class="{'label-active': download.uploadSpeed > 2048}">
ng-show="hasStatus(download, 'active')" <span title="Upload Speed"><i class="icon-upload">&nbsp;</i> {{download.uploadSpeed | bspeed}}</span>
class="label label-success hidden-phone">
<span>Size: {{download.totalLength | blength}}</span>
</li> </li>
<li <li class="label label-active">
ng-show="hasStatus(download, 'active')" <span title="Estimated time"><i class="icon-time">&nbsp;</i> {{getEta(download) | time}}</span>
class="label label-success hidden-phone">
<span>Downloaded: {{download.completedLength | blength}}</span>
</li> </li>
<li <li class="label label-active hidden-phone">
ng-show="hasStatus(download, 'active')" <span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{download.totalLength | blength}}</span>
class="label label-success hidden-phone hidden-tablet">
<span>Progress: {{getProgress(download)}}%</span>
</li> </li>
<li <li class="label label-active hidden-phone">
ng-show="hasStatus(download, 'active')" <span title="Downloaded"><i class="icon-download-alt">&nbsp;</i> {{download.completedLength | blength}}</span>
class="label label-success">
<span>Speed: {{download.downloadSpeed | bspeed}}</span>
</li> </li>
<!-- TODO: figure out how to do multiple ng-show <li class="label label-active hidden-phone hidden-tablet">
<li ng-show="download.bittorrent" class="label label-success hidden-phone">Upload Speed: <span class="download-uploadSpeed">{{download.uploadSpeed | bspeed}}</span></li> <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 --> <!-- {{{ paused download statistics -->
<li <li class="label label-info">
ng-show="hasStatus(download, ['paused', 'waiting'])" <span title="Download Status"><i class="icon-pause">&nbsp;</i> {{download.status}}</span>
class="label label-info">
<span>Status: {{download.status}}</span>
</li> </li>
<li <li class="label label-info">
ng-show="hasStatus(download, ['paused', 'waiting'])" <span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{download.totalLength | blength}}</span>
class="label label-info">
<span>Size: {{download.totalLength | blength}}</span>
</li> </li>
<li <li class="label label-info hidden-phone">
ng-show="hasStatus(download, ['paused', 'waiting'])" <span title="Downloaded"><i class="icon-download-alt">&nbsp;</i> {{download.completedLength | blength}}</span>
class="label label-info hidden-phone">
<span>Downloaded: {{download.completedLength | blength}}</span>
</li> </li>
<li <li class="label label-info hidden-phone">
ng-show="hasStatus(download, ['paused', 'waiting'])" <span title="Download Path"><i class="icon-folder-open">&nbsp;</i> {{download.dir}}</span>
class="label label-info hidden-phone">
<span>Path: {{download.dir}}</span>
</li> </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 --> <!-- {{{ complete download statistics -->
<li <li class="label label-success">
ng-show="hasStatus(download, 'complete')" <span title="Download Status"><i class="icon-check">&nbsp;</i> {{download.status}}</span>
class="label">
<span>Status: {{download.status}}</span>
</li> </li>
<li <li class="label label-success hidden-phone">
ng-show="hasStatus(download, 'complete')" <span title="Download Path"><i class="icon-folder-open">&nbsp;</i> {{download.dir}}</span>
class="label hidden-phone">
<span>Path: {{download.dir}}</span>
</li> </li>
<li <li class="label label-success">
ng-show="hasStatus(download, 'complete')" <span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{download.totalLength | blength}}</span>
class="label">
<span>Size: {{download.totalLength | blength}}</span>
</li> </li>
<!-- }}} --> <!-- }}} -->
</ul>
<ul class="stats pull-left" ng-show="hasStatus(download, 'removed')">
<!-- {{{ removed download statistics --> <!-- {{{ removed download statistics -->
<li <li class="label label-warning">
ng-show="hasStatus(download, 'removed')" <span title="Download Status"><i class="icon-remove">&nbsp;</i> {{download.status}}</span>
class="label label-warning">
<span>Status: {{download.status}}</span>
</li> </li>
<li <li ng-show="hasStatus(download, 'removed')"
ng-show="hasStatus(download, 'removed')"
class="label label-warning hidden-phone"> 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>
<li <li ng-show="hasStatus(download, 'removed')"
ng-show="hasStatus(download, 'removed')"
class="label label-warning"> class="label label-warning">
<span>Size: {{download.totalLength | blength}}</span> <span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{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>
</li> </li>
<!-- }}} --> <!-- }}} -->
</ul> </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> </td>
</tr> </tr>
<tr> <tr>
<td class="download-progress" colspan="2" ng-click="download.collapsed = !download.collapsed"> <td class="download-progress download-item" colspan="2" ng-click="download.collapsed = !download.collapsed">
<div class="progress progress-striped" ng-class="getProgressClass(download)">
<div ng-show="hasStatus(download, 'active')" class="progress progress-striped" style="width: 100%; margin: 0; padding: 0;">
<div class="bar" style="width: {{getProgress(download)}}%;"></div> <div class="bar" style="width: {{getProgress(download)}}%;"></div>
</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> </td>
</tr> </tr>
<tr ng-click="download.collapsed = !download.collapsed" class="download-detail"> <tr>
<td colspan="2"> <td colspan="2" ng-click="download.collapsed = !download.collapsed">
<div collapse="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> <div class="download-item" ng-show="download.numPieces > 1">
<ul class="stats"> <canvas bitfield="download.bitfield" draw="!download.collapsed" pieces="download.numPieces" class="progress chunk-canvas" width="1400" chunkbar></canvas>
<li class="label">Status: <span class="download-status">{{download.status}}</span></li> </div>
<li class="label">GID: <span class="download-gid">{{download.gid}}</span></li> <ul class="stats download-item">
<li class="label">Dir: <span class="download-dir">{{download.dir}}</span></li> <li class="label" title="Download Path"><i class="icon-folder-open">&nbsp;</i> <span class="download-dir">{{download.dir}}</span></li>
<li class="label">Size: <span class="download-totalLength">{{download.totalLength | blength}}</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">Downloaded: <span class="download-completedLength">{{download.completedLength | blength}}</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">Num of Pieces: <span class="download-numPieces">{{download.numPieces}}</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">Piece Length: <span class="download-pieceLength">{{download.pieceLength | 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">ETA: <span class="download-eta">{{getEta(download) | time}}</span></li>
<li class="label">Down Speed: <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" 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" ng-show="download.bittorrent">Upload Length: <span class="download-uploadLength">{{download.uploadLength | blength}}</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> </ul>
<ul class="download-files hidden-phone download-item">
<h4 class="hidden-phone">Download Files</h4>
<ul class="download-files hidden-phone">
<li class="label" ng-repeat="file in download.files">{{file.path | prelative:download.dir}} ({{file.length | blength}})</li> <li class="label" ng-repeat="file in download.files">{{file.path | prelative:download.dir}} ({{file.length | blength}})</li>
</ul> </ul>
<div ng-show="hasStatus(download, 'active')" class="download-item">
<div ng-show="hasStatus(download, 'active')">
<div class="download-graph" dspeed="download.downloadSpeed" uspeed="download.uploadSpeed" dgraph draw="!download.collapsed"></div> <div class="download-graph" dspeed="download.downloadSpeed" uspeed="download.uploadSpeed" dgraph draw="!download.collapsed"></div>
</div> </div>
</div> </div>

2
js/ctrls/alert.js
View File

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

19
js/ctrls/download.js
View File

@ -144,7 +144,7 @@ function(
scope.totalDownloads = downloads.length; 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 // fix the bug when downloads are deleted until no left on a specific page
if (scope.currentPage > scope.totalPages) if (scope.currentPage > scope.totalPages)
@ -242,6 +242,23 @@ function(
return (d.totalLength-d.completedLength) / d.downloadSpeed; 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 // gets the progress in percentages
scope.getProgress = function(d) { scope.getProgress = function(d) {
var percentage = (d.completedLength / d.totalLength)*100 || 0; var percentage = (d.completedLength / d.totalLength)*100 || 0;