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 @@