This commit is contained in:
Max Lynch
2013-11-08 17:25:54 -06:00
parent d082c0c148
commit b94a2e7c10
6 changed files with 50 additions and 111 deletions

1
dist/css/ionic.css vendored
View File

@ -3553,7 +3553,6 @@ button.item-button-right:after {
*/
.list {
position: relative;
overflow: hidden;
margin-bottom: 20px;
padding-top: 1px;
padding-bottom: 1px;

View File

@ -489,7 +489,8 @@ angular.module('ionic.ui.content', [])
transclude: true,
scope: {
onRefresh: '&',
onRefreshOpening: '&'
onRefreshOpening: '&',
scroll: '@'
},
compile: function(element, attr, transclude) {
return function($scope, $element, $attr) {
@ -510,7 +511,9 @@ angular.module('ionic.ui.content', [])
}
// If they want plain overflows scrolling, add that as a class
if(attr.overflowScroll === "true") {
if($scope.scroll === "false") {
// Do nothing for now
} else if(attr.overflowScroll === "true") {
c.addClass('overflow-scroll');
} else {
// Otherwise, supercharge this baby!
@ -638,7 +641,9 @@ angular.module('ionic.ui.list', ['ngAnimate'])
scope: {
isEditing: '=',
deleteIcon: '@',
reorderIcon: '@'
reorderIcon: '@',
onRefresh: '&',
onRefreshOpening: '&'
},
controller: function($scope) {
@ -658,7 +663,14 @@ angular.module('ionic.ui.list', ['ngAnimate'])
return function($scope, $element, $attr) {
var lv = new ionic.views.ListView({
el: $element[0],
listEl: $element[0].children[0]
listEl: $element[0].children[0],
hasPullToRefresh: (typeof $scope.onRefresh !== 'undefined'),
onRefresh: function() {
$scope.onRefresh();
},
onRefreshOpening: function(amt) {
$scope.onRefreshOpening({amount: amt});
}
});
if(attr.animation) {
@ -667,55 +679,7 @@ angular.module('ionic.ui.list', ['ngAnimate'])
};
}
};
})
.directive('virtualList', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {
isEditing: '=',
deleteIcon: '@',
reorderIcon: '@',
itemHeight: '@'
},
controller: function($scope, $element) {
var _this = this;
this.scope = $scope;
this.element = $element;
var lv = new ionic.views.ListView({
el: $element[0],
listEl: $element[0].children[0],
isVirtual: true,
itemHeight: $scope.itemHeight,
});
this.listView = lv;
$scope.$watch('isEditing', function(v) {
_this.isEditing = true;
});
},
template: '<div class="scroll"><ul class="list" ng-class="{\'list-editing\': isEditing}" ng-transclude>\
</ul></div>',
compile: function(element, attr, transclude) {
return function($scope, $element, $attr) {
if(attr.animation) {
$element.addClass(attr.animation);
}
};
}
};
})
});
})();
;

View File

@ -22,7 +22,8 @@ angular.module('ionic.ui.content', [])
transclude: true,
scope: {
onRefresh: '&',
onRefreshOpening: '&'
onRefreshOpening: '&',
scroll: '@'
},
compile: function(element, attr, transclude) {
return function($scope, $element, $attr) {
@ -43,7 +44,9 @@ angular.module('ionic.ui.content', [])
}
// If they want plain overflows scrolling, add that as a class
if(attr.overflowScroll === "true") {
if($scope.scroll === "false") {
// Do nothing for now
} else if(attr.overflowScroll === "true") {
c.addClass('overflow-scroll');
} else {
// Otherwise, supercharge this baby!

View File

@ -89,7 +89,9 @@ angular.module('ionic.ui.list', ['ngAnimate'])
scope: {
isEditing: '=',
deleteIcon: '@',
reorderIcon: '@'
reorderIcon: '@',
onRefresh: '&',
onRefreshOpening: '&'
},
controller: function($scope) {
@ -109,7 +111,14 @@ angular.module('ionic.ui.list', ['ngAnimate'])
return function($scope, $element, $attr) {
var lv = new ionic.views.ListView({
el: $element[0],
listEl: $element[0].children[0]
listEl: $element[0].children[0],
hasPullToRefresh: (typeof $scope.onRefresh !== 'undefined'),
onRefresh: function() {
$scope.onRefresh();
},
onRefreshOpening: function(amt) {
$scope.onRefreshOpening({amount: amt});
}
});
if(attr.animation) {
@ -118,54 +127,6 @@ angular.module('ionic.ui.list', ['ngAnimate'])
};
}
};
})
.directive('virtualList', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {
isEditing: '=',
deleteIcon: '@',
reorderIcon: '@',
itemHeight: '@'
},
controller: function($scope, $element) {
var _this = this;
this.scope = $scope;
this.element = $element;
var lv = new ionic.views.ListView({
el: $element[0],
listEl: $element[0].children[0],
isVirtual: true,
itemHeight: $scope.itemHeight,
});
this.listView = lv;
$scope.$watch('isEditing', function(v) {
_this.isEditing = true;
});
},
template: '<div class="scroll"><ul class="list" ng-class="{\'list-editing\': isEditing}" ng-transclude>\
</ul></div>',
compile: function(element, attr, transclude) {
return function($scope, $element, $attr) {
if(attr.animation) {
$element.addClass(attr.animation);
}
};
}
};
})
});
})();

View File

@ -48,7 +48,11 @@
</style>
</head>
<body ng-controller="RootCtrl">
<tabs animation="fade-in-out" tabs-type="tabs-icon-only" tabs-style="tabs-primary" controller-changed="onControllerChanged(oldController, oldIndex, newController, newIndex)">
<tabs
animation="fade-in-out"
tabs-type="tabs-icon-only"
tabs-style="tabs-primary"
controller-changed="onControllerChanged(oldController, oldIndex, newController, newIndex)">
<tab title="Home" icon-on="icon ion-ios7-filing" icon-off="icon ion-ios7-filing-outline" ng-controller="HomeCtrl">
<header class="bar bar-header bar-secondary">
@ -56,8 +60,14 @@
<h1 class="title">Tasks</h1>
<button class="button button-clear button-primary" ng-click="isEditingItems = !isEditingItems">Edit</button>
</header>
<content has-header="true" has-tabs="true">
<list is-editing="isEditingItems" animation="fade-out" delete-icon="icon ion-minus-circled" reorder-icon="icon ion-navicon">
<content has-header="true" has-tabs="true" scroll="false">
<list on-refresh="onRefresh()" is-editing="isEditingItems" animation="fade-out" delete-icon="icon ion-minus-circled" reorder-icon="icon ion-navicon">
<refresher>
<div id="refresh-content">
Refreshing
<i class="icon ion-ios7-reloading"></i>
</div>
</refresher>
<list-item ng-repeat="item in items"
item="item"
buttons="item.buttons"
@ -145,6 +155,9 @@
item.isCompleted = true;
};
$scope.onRefresh = function() {
console.log('ON REFRESH');
}
$scope.removeItem = function(item) {
removeItem(item);

View File

@ -6,7 +6,6 @@
.list {
position: relative;
overflow: hidden;
margin-bottom: 20px;
padding-top: $item-border-width;
padding-bottom: $item-border-width;