diff --git a/dist/ionic-angular.js b/dist/ionic-angular.js
index ceb3691dcd..c15f0ca5c4 100644
--- a/dist/ionic-angular.js
+++ b/dist/ionic-angular.js
@@ -188,9 +188,23 @@ angular.module('ionic.ui.list', ['ionic.service'])
replace: true,
transclude: true,
scope: {},
- template: '
'
+ template: '',
+ link: function($scope, $element, $attr) {
+ var lv = new ionic.views.List({el: $element[0]});
+ }
}
})
+
+/*
+.directive('listItem', function() {
+ return {
+ restrict: 'E',
+ replace: true,
+ transclude: true,
+ scope: {}
+ }
+});
+*/
;
angular.module('ionic.ui.nav', ['ionic.service'])
diff --git a/dist/ionic-ios7.css b/dist/ionic-ios7.css
index 72c70e7d77..0c4edbf3b1 100644
--- a/dist/ionic-ios7.css
+++ b/dist/ionic-ios7.css
@@ -324,7 +324,8 @@ body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
text-size-adjust: none;
- -webkit-tap-highlight-color: transparent; }
+ -webkit-tap-highlight-color: transparent;
+ -webkit-user-drag: none; }
.view-full {
position: fixed;
@@ -935,7 +936,6 @@ address {
position: relative;
display: block;
margin-bottom: -1px;
- padding: 15px 15px;
background-color: white;
border: 1px solid #dddddd; }
.list-item:last-child {
@@ -960,6 +960,9 @@ address {
color: #333333;
background-color: white;
border-color: #333333; }
+ .list-item.list-item-default.active .list-item-content, .list-item.list-item-default:active .list-item-content {
+ background-color: white;
+ color: #333333; }
.list-item.list-item-secondary {
/*
color: $color;
@@ -970,6 +973,9 @@ address {
color: #333333;
background-color: white;
border-color: #333333; }
+ .list-item.list-item-secondary.active .list-item-content, .list-item.list-item-secondary:active .list-item-content {
+ background-color: white;
+ color: #333333; }
.list-item.list-item-primary {
/*
color: $color;
@@ -980,6 +986,9 @@ address {
color: white;
background-color: #4a87ee;
border-color: #333333; }
+ .list-item.list-item-primary.active .list-item-content, .list-item.list-item-primary:active .list-item-content {
+ background-color: #4a87ee;
+ color: white; }
.list-item.list-item-info {
/*
color: $color;
@@ -990,6 +999,9 @@ address {
color: white;
background-color: #43cee6;
border-color: #333333; }
+ .list-item.list-item-info.active .list-item-content, .list-item.list-item-info:active .list-item-content {
+ background-color: #43cee6;
+ color: white; }
.list-item.list-item-success {
/*
color: $color;
@@ -1000,6 +1012,9 @@ address {
color: white;
background-color: #66cc33;
border-color: #333333; }
+ .list-item.list-item-success.active .list-item-content, .list-item.list-item-success:active .list-item-content {
+ background-color: #66cc33;
+ color: white; }
.list-item.list-item-warning {
/*
color: $color;
@@ -1010,6 +1025,9 @@ address {
color: white;
background-color: #f0b840;
border-color: #333333; }
+ .list-item.list-item-warning.active .list-item-content, .list-item.list-item-warning:active .list-item-content {
+ background-color: #f0b840;
+ color: white; }
.list-item.list-item-danger {
/*
color: $color;
@@ -1020,6 +1038,9 @@ address {
color: white;
background-color: #ef4e3a;
border-color: #333333; }
+ .list-item.list-item-danger.active .list-item-content, .list-item.list-item-danger:active .list-item-content {
+ background-color: #ef4e3a;
+ color: white; }
.list-item.list-item-dark {
/*
color: $color;
@@ -1030,6 +1051,9 @@ address {
color: white;
background-color: #444444;
border-color: #333333; }
+ .list-item.list-item-dark.active .list-item-content, .list-item.list-item-dark:active .list-item-content {
+ background-color: #444444;
+ color: white; }
a.list-item {
color: #333333;
@@ -1038,20 +1062,20 @@ a.list-item {
text-decoration: none; }
.list-item-content {
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
+ position: relative;
+ background-color: #fff;
z-index: 1;
- background-color: white;
- -webkit-transition: left 1s ease-in-out, right 1s ease-in-out; }
+ padding: 15px 15px;
+ -webkit-transition: left 0.2s ease-in-out; }
.list-item-buttons {
position: absolute;
z-index: 0;
right: 0;
top: 0; }
+ .list-item-buttons .button {
+ border-radius: 0;
+ border: none; }
.list-divider {
padding: 5px 15px;
diff --git a/dist/ionic.css b/dist/ionic.css
index 38b2e92da0..64ed55aa58 100644
--- a/dist/ionic.css
+++ b/dist/ionic.css
@@ -389,7 +389,8 @@ body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
text-size-adjust: none;
- -webkit-tap-highlight-color: transparent; }
+ -webkit-tap-highlight-color: transparent;
+ -webkit-user-drag: none; }
.view-full {
position: fixed;
@@ -1023,7 +1024,6 @@ address {
position: relative;
display: block;
margin-bottom: -1px;
- padding: 15px 15px;
background-color: white;
border: 1px solid #dddddd; }
.list-item:last-child {
@@ -1048,6 +1048,9 @@ address {
color: #333333;
background-color: white;
border-color: #333333; }
+ .list-item.list-item-default.active .list-item-content, .list-item.list-item-default:active .list-item-content {
+ background-color: white;
+ color: #333333; }
.list-item.list-item-secondary {
/*
color: $color;
@@ -1058,6 +1061,9 @@ address {
color: #333333;
background-color: white;
border-color: #333333; }
+ .list-item.list-item-secondary.active .list-item-content, .list-item.list-item-secondary:active .list-item-content {
+ background-color: white;
+ color: #333333; }
.list-item.list-item-primary {
/*
color: $color;
@@ -1068,6 +1074,9 @@ address {
color: white;
background-color: #4a87ee;
border-color: #333333; }
+ .list-item.list-item-primary.active .list-item-content, .list-item.list-item-primary:active .list-item-content {
+ background-color: #4a87ee;
+ color: white; }
.list-item.list-item-info {
/*
color: $color;
@@ -1078,6 +1087,9 @@ address {
color: white;
background-color: #43cee6;
border-color: #333333; }
+ .list-item.list-item-info.active .list-item-content, .list-item.list-item-info:active .list-item-content {
+ background-color: #43cee6;
+ color: white; }
.list-item.list-item-success {
/*
color: $color;
@@ -1088,6 +1100,9 @@ address {
color: white;
background-color: #66cc33;
border-color: #333333; }
+ .list-item.list-item-success.active .list-item-content, .list-item.list-item-success:active .list-item-content {
+ background-color: #66cc33;
+ color: white; }
.list-item.list-item-warning {
/*
color: $color;
@@ -1098,6 +1113,9 @@ address {
color: white;
background-color: #f0b840;
border-color: #333333; }
+ .list-item.list-item-warning.active .list-item-content, .list-item.list-item-warning:active .list-item-content {
+ background-color: #f0b840;
+ color: white; }
.list-item.list-item-danger {
/*
color: $color;
@@ -1108,6 +1126,9 @@ address {
color: white;
background-color: #ef4e3a;
border-color: #333333; }
+ .list-item.list-item-danger.active .list-item-content, .list-item.list-item-danger:active .list-item-content {
+ background-color: #ef4e3a;
+ color: white; }
.list-item.list-item-dark {
/*
color: $color;
@@ -1118,6 +1139,9 @@ address {
color: white;
background-color: #444444;
border-color: #333333; }
+ .list-item.list-item-dark.active .list-item-content, .list-item.list-item-dark:active .list-item-content {
+ background-color: #444444;
+ color: white; }
a.list-item {
color: #333333;
@@ -1126,20 +1150,20 @@ a.list-item {
text-decoration: none; }
.list-item-content {
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
+ position: relative;
+ background-color: #fff;
z-index: 1;
- background-color: white;
- -webkit-transition: left 1s ease-in-out, right 1s ease-in-out; }
+ padding: 15px 15px;
+ -webkit-transition: left 0.2s ease-in-out; }
.list-item-buttons {
position: absolute;
z-index: 0;
right: 0;
top: 0; }
+ .list-item-buttons .button {
+ border-radius: 0;
+ border: none; }
.list-divider {
padding: 5px 15px;
diff --git a/dist/ionic.js b/dist/ionic.js
index 78deb62cee..abf069fa17 100644
--- a/dist/ionic.js
+++ b/dist/ionic.js
@@ -1787,10 +1787,14 @@ window.ionic = {
window.ionic.onGesture('swipeleft', function(e) {
_this._handleSwipeLeft(e);
+ e.gesture.stopDetect();
+ return false;
}, this.el);
window.ionic.onGesture('swiperight', function(e) {
_this._handleSwipeRight(e);
+ e.gesture.stopDetect();
+ return false;
}, this.el);
};
@@ -1809,13 +1813,16 @@ window.ionic = {
content = item;
}
+ if(!content) {
+ return;
+ }
+
// Grab the buttons
buttons = content.parentNode.querySelector('.list-item-buttons');
if(buttons) {
buttonsWidth = buttons.offsetWidth;
// Slide the content over left by the button width
- content.style.right = buttonsWidth + 'px';
content.style.left = -buttonsWidth + 'px';
}
});
@@ -1824,7 +1831,8 @@ window.ionic = {
window.requestAnimationFrame(function() {
var item = e.target,
- cl = item.classList;
+ cl = item.classList,
+ content;
if(cl.contains('list-item')) {
content = item.querySelector('.list-item-content');
@@ -1832,7 +1840,11 @@ window.ionic = {
content = item;
}
- content.style.right = 0;
+ // This item didn't have content
+ if(!content) {
+ return;
+ }
+
content.style.left = 0;
});
},
diff --git a/example/toderp2/index.html b/example/toderp2/index.html
index 80abc9898b..1a6cd28e90 100644
--- a/example/toderp2/index.html
+++ b/example/toderp2/index.html
@@ -137,9 +137,14 @@
-
- {{project.title}}
-
+
+
+ {{project.title}}
+
+
+
+
+
diff --git a/js/ext/angular/src/directive/ionicList.js b/js/ext/angular/src/directive/ionicList.js
index cfee698f06..8bb562a7f6 100644
--- a/js/ext/angular/src/directive/ionicList.js
+++ b/js/ext/angular/src/directive/ionicList.js
@@ -6,6 +6,20 @@ angular.module('ionic.ui.list', ['ionic.service'])
replace: true,
transclude: true,
scope: {},
- template: ''
+ template: '',
+ link: function($scope, $element, $attr) {
+ var lv = new ionic.views.List({el: $element[0]});
+ }
}
})
+
+/*
+.directive('listItem', function() {
+ return {
+ restrict: 'E',
+ replace: true,
+ transclude: true,
+ scope: {}
+ }
+});
+*/
diff --git a/js/views/listView.js b/js/views/listView.js
index 45fbd4a474..fb63690afc 100644
--- a/js/views/listView.js
+++ b/js/views/listView.js
@@ -7,10 +7,14 @@
window.ionic.onGesture('swipeleft', function(e) {
_this._handleSwipeLeft(e);
+ e.gesture.stopDetect();
+ return false;
}, this.el);
window.ionic.onGesture('swiperight', function(e) {
_this._handleSwipeRight(e);
+ e.gesture.stopDetect();
+ return false;
}, this.el);
};
@@ -29,13 +33,16 @@
content = item;
}
+ if(!content) {
+ return;
+ }
+
// Grab the buttons
buttons = content.parentNode.querySelector('.list-item-buttons');
if(buttons) {
buttonsWidth = buttons.offsetWidth;
// Slide the content over left by the button width
- content.style.right = buttonsWidth + 'px';
content.style.left = -buttonsWidth + 'px';
}
});
@@ -44,7 +51,8 @@
window.requestAnimationFrame(function() {
var item = e.target,
- cl = item.classList;
+ cl = item.classList,
+ content;
if(cl.contains('list-item')) {
content = item.querySelector('.list-item-content');
@@ -52,7 +60,11 @@
content = item;
}
- content.style.right = 0;
+ // This item didn't have content
+ if(!content) {
+ return;
+ }
+
content.style.left = 0;
});
},
diff --git a/scss/ionic/_listview.scss b/scss/ionic/_listview.scss
index d5b1faa2a3..0f9fc13391 100644
--- a/scss/ionic/_listview.scss
+++ b/scss/ionic/_listview.scss
@@ -18,7 +18,6 @@
display: block;
// Place the border on the list items and negative margin up for better styling
margin-bottom: -1px;
- padding: 15px 15px;
background-color: $list-default-background;
border: $list-item-border;
@@ -90,22 +89,26 @@ a.list-item {
}
.list-item-content {
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
+ position: relative;
+
+ background-color: #fff;
+
z-index: 1;
- background-color: white;
-
- -webkit-transition: left 1s ease-in-out, right 1s ease-in-out;
+ padding: 15px 15px;
+
+ -webkit-transition: left 0.2s ease-in-out;
}
.list-item-buttons {
position: absolute;
z-index: 0;
right: 0;
top: 0;
+
+ .button {
+ border-radius: 0;
+ border: none;
+ }
}
diff --git a/scss/ionic/_mixins.scss b/scss/ionic/_mixins.scss
index 2cf71ef9f0..c35c3c0c83 100644
--- a/scss/ionic/_mixins.scss
+++ b/scss/ionic/_mixins.scss
@@ -78,10 +78,16 @@
border-color: $borderColor;
*/
+
&.active, &:active {
color: $activeColor;
background-color: $activeBgColor;
border-color: $activeBorderColor;
+
+ .list-item-content {
+ background-color: $activeBgColor;
+ color: $activeColor;
+ }
}
};
diff --git a/scss/ionic/_scaffolding.scss b/scss/ionic/_scaffolding.scss
index 21347929ae..9757d167f7 100644
--- a/scss/ionic/_scaffolding.scss
+++ b/scss/ionic/_scaffolding.scss
@@ -23,6 +23,7 @@ body {
-webkit-text-size-adjust: none;
text-size-adjust: none;
-webkit-tap-highlight-color: transparent;
+ -webkit-user-drag: none;
}
.view {
diff --git a/test/lists.html b/test/lists.html
index 0079e347d0..9620cb63f2 100644
--- a/test/lists.html
+++ b/test/lists.html
@@ -19,7 +19,7 @@