Toderp side list

dist/ionic-angular.js

@@ -188,9 +188,23 @@ angular.module('ionic.ui.list', ['ionic.service'])
     replace: true,
     transclude: true,
     scope: {},
-    template: '<ul class="list-group" ng-transclude></ul>'
+    template: '<ul class="list-group" ng-transclude></ul>',
+    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'])
 

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;
+  position: relative;
-  left: 0;
+  background-color: #fff;
-  top: 0;
-  right: 0;
-  bottom: 0;
   z-index: 1;
-  background-color: white;
+  padding: 15px 15px;
-  -webkit-transition: left 1s ease-in-out, right 1s ease-in-out; }
+  -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;

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;
+  position: relative;
-  left: 0;
+  background-color: #fff;
-  top: 0;
-  right: 0;
-  bottom: 0;
   z-index: 1;
-  background-color: white;
+  padding: 15px 15px;
-  -webkit-transition: left 1s ease-in-out, right 1s ease-in-out; }
+  -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;

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;
       });
     },

example/toderp2/index.html

@@ -137,9 +137,14 @@
               <input type="text" ng-model="newProject.title" placeholder="Create a new list...">
             </form>
             <list>
-              <a ng-click="selectProject(project)" class="list-item list-item-primary" ng-class="{active: project.$id == activeProject.project.name()}" ng-repeat="project in projects">
+              <li class="list-item list-item-primary" ng-class="{active: project.$id == activeProject.project.name()}" ng-repeat="project in projects">
+                <div class="list-item-content" ng-click="selectProject(project)">
                   {{project.title}}
-              </a>
+                </div>
+                <div class="list-item-buttons">
+                  <button class="button button-danger" ng-click="deleteProject(project)">Delete</button>
+                </div>
+              </li>
             </list>
           </content>
         </menu>

js/ext/angular/src/directive/ionicList.js

@@ -6,6 +6,20 @@ angular.module('ionic.ui.list', ['ionic.service'])
     replace: true,
     transclude: true,
     scope: {},
-    template: '<ul class="list-group" ng-transclude></ul>'
+    template: '<ul class="list-group" ng-transclude></ul>',
+    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: {}
+  }
+});
+*/

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;
       });
     },

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;
+  position: relative;
-  left: 0;
+
-  top: 0;
+  background-color: #fff;
-  right: 0;
+
-  bottom: 0;
   z-index: 1;
 
-  background-color: white;
+  padding: 15px 15px;
 
-  -webkit-transition: left 1s ease-in-out, right 1s ease-in-out;
+  -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;
+  }
 }
 
 

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;
+    }
   }
 };
 

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 {

test/lists.html

@@ -19,7 +19,7 @@
       <main class="content-wrapper">
         <div class="content has-header">
           <ul id="list" class="list">
-            <a href="#" class="list-item">
+            <li href="#" class="list-item">
               <div class="list-item-content">
                 Sasafras
                 <i class="icon-arrow-right"></i>
@@ -27,7 +27,7 @@
               <div class="list-item-buttons">
                 <button class="button button-danger">Delete</button>
               </div>
-            </a>
+            </li>
             <a href="#" class="list-item">
               Candy
               <i class="icon-arrow-right"></i>