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

Fix perf issue with collapse animations

Browse Source
This commit is contained in:
Nils Maier 2014-06-03 02:05:30 +02:00
parent 36c282536f
commit 7b37e69283
2 changed files with 30 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -347,7 +347,7 @@
class="row-fluid download" data-gid="{{download.gid}}"> class="row-fluid download" data-gid="{{download.gid}}">
<tbody> <tbody>
<tr> <tr>
<td class="download-name download-item" ng-click="download.collapsed = !download.collapsed"> <td class="download-name download-item" ng-click="toggleCollapsed(download)">
<i class="icon-magnet" style="color: red;" ng-show="download.metadata"></i> {{download.name}} <i class="icon-magnet" style="color: red;" ng-show="download.metadata"></i> {{download.name}}
</td> </td>
<td class="download-controls download-item" rowspan="2"> <td class="download-controls download-item" rowspan="2">
@ -404,7 +404,7 @@
</li> </li>
<li> <li>
<a ng-click="download.collapsed = !download.collapsed" <a ng-click="toggleCollapsed(download)"
href="#"><i class="icon-info-sign">&nbsp;</i> More Info</a> href="#"><i class="icon-info-sign">&nbsp;</i> More Info</a>
</li> </li>
@ -418,7 +418,7 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="download-overview download-item" ng-click="download.collapsed = !download.collapsed" ng-switch="download.status"> <td class="download-overview download-item" ng-click="toggleCollapsed(download)" ng-switch="download.status">
<!-- {{{ statistics --> <!-- {{{ statistics -->
<ul class="stats pull-left" ng-switch-when="active"> <ul class="stats pull-left" ng-switch-when="active">
<!-- {{{ active download statistics --> <!-- {{{ active download statistics -->
@ -551,15 +551,15 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="download-progress download-item" colspan="2" ng-click="download.collapsed = !download.collapsed"> <td class="download-progress download-item" colspan="2" ng-click="toggleCollapsed(download)">
<div class="progress progress-striped" ng-class="getProgressClass(download)"> <div class="progress progress-striped" ng-class="getProgressClass(download)">
<div class="bar" style="width: {{getProgress(download)}}%;"></div> <div class="bar" style="width: {{getProgress(download)}}%;"></div>
</div> </div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td colspan="2" ng-click="download.collapsed = !download.collapsed" ng-switch="download.collapsed"> <td colspan="2" ng-click="toggleCollapsed(download)" ng-switch="download.collapsed">
<div collapse="download.collapsed"> <div ng-switch-when="false" collapse="download.animCollapsed">
<div class="download-item" ng-show="download.numPieces > 1"> <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> <canvas bitfield="download.bitfield" draw="!download.collapsed" pieces="download.numPieces" class="progress chunk-canvas" width="1400" chunkbar></canvas>
</div> </div>

25
js/ctrls/main.js
View File

@ -243,6 +243,28 @@ function(
scope.loadFilters(); scope.loadFilters();
scope.toggleCollapsed = function(download) {
if (!download.collapsed) {
download.animCollapsed = true;
// ng-unswitch after half a second.
// XXX hacky way, because I'm to lazy right now to wire up proper
// transitionend events.
setTimeout(function() {
scope.$apply(function() {
download.collapsed = true;
});
}, 500);
return;
}
download.collapsed = false;
setTimeout(function() {
scope.$apply(function() {
download.animCollapsed = false;
});
}, 0);
};
// max downloads shown in one page // max downloads shown in one page
scope.pageSize = pageSize; scope.pageSize = pageSize;
@ -338,7 +360,8 @@ function(
uploadSpeed: d.uploadSpeed, uploadSpeed: d.uploadSpeed,
fmtUploadSpeed: utils.fmtspeed(d.uploadSpeed), fmtUploadSpeed: utils.fmtspeed(d.uploadSpeed),
collapsed: true, collapsed: true,
files: [] animCollapsed: true,
files: [],
}; };
} }
else { else {