moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2025-03-03 18:22:05 -05:00
Code Issues Releases Wiki Activity

Fix mail-list filtering and iScroll refresh together with ngAnimate

Browse Source
This commit is contained in:
Tankred Hase 2014-04-23 16:30:29 +02:00
parent af6f44177b
commit 6bb1bd2239
3 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/js/controller/mail-list.js
View File

@ -401,7 +401,8 @@ define(function(require) {
// //
var ngModule = angular.module('mail-list', []); var ngModule = angular.module('mail-list', []);
ngModule.directive('ngIscroll', function() {
ngModule.directive('ngIscroll', function($timeout) {
return { return {
link: function(scope, elm, attrs) { link: function(scope, elm, attrs) {
var model = attrs.ngIscroll, var model = attrs.ngIscroll,
@ -451,11 +452,14 @@ define(function(require) {
myScroll.on('scrollEnd', scope.loadVisibleBodies); myScroll.on('scrollEnd', scope.loadVisibleBodies);
// refresh iScroll when model length changes // refresh iScroll when model length changes
scope.$watch(model, function() { scope.$watchCollection(model, function() {
$timeout(function() {
myScroll.refresh(); myScroll.refresh();
scope.$apply();
});
// load the visible message bodies, when the list is re-initialized and when scrolling stopped // load the visible message bodies, when the list is re-initialized and when scrolling stopped
scope.loadVisibleBodies(); scope.loadVisibleBodies();
}, true); });
} }
}; };
}); });

4
src/sass/components/_mail-list.scss
View File

@ -19,6 +19,10 @@
cursor: pointer; cursor: pointer;
transition: background-color $time-li-fade, color $time-li-fade; transition: background-color $time-li-fade, color $time-li-fade;
&.ng-animate {
transition: none;
}
h3 { h3 {
@include text-overflow; @include text-overflow;

2
src/tpl/mail-list.html
View File

@ -8,7 +8,7 @@
<input class="input-text input-search" type="search" results="5" ng-model="searchText" placeholder=" Filter..." focus-me="state.mailList.searching"> <input class="input-text input-search" type="search" results="5" ng-model="searchText" placeholder=" Filter..." focus-me="state.mailList.searching">
</div> </div>
<div class="list-wrapper" ng-iscroll="filteredMessages.length"> <div class="list-wrapper" ng-iscroll="filteredMessages">
<ul class="mail-list"> <ul class="mail-list">
<li ng-class="{'mail-list-active': email === state.mailList.selected, 'mail-list-attachment': email.attachments !== undefined && email.attachments.length > 0, 'mail-list-unread': email.unread, 'mail-list-replied': !email.unread && email.answered}" ng-click="select(email)" ng-repeat="email in (filteredMessages = (state.nav.currentFolder.messages | filter:searchText | orderBy:'uid':true | limitTo:100))"> <li ng-class="{'mail-list-active': email === state.mailList.selected, 'mail-list-attachment': email.attachments !== undefined && email.attachments.length > 0, 'mail-list-unread': email.unread, 'mail-list-replied': !email.unread && email.answered}" ng-click="select(email)" ng-repeat="email in (filteredMessages = (state.nav.currentFolder.messages | filter:searchText | orderBy:'uid':true | limitTo:100))">
<h3>{{email.from[0].name || email.from[0].address}}</h3> <h3>{{email.from[0].name || email.from[0].address}}</h3>