Some list editing improvements

dist/css/ionic-ios7.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /**
 * Adapted from normalize.css and some reset.css. We don't care even one
 * bit about old IE, so we don't need any hacks for that in here.
@@ -1094,7 +1093,7 @@ a.list-item {
   background-color: #fff;
   z-index: 2;
   padding: 15px 15px;
-  -webkit-transition: margin-left 0.2s ease-in-out, left 0.2s ease-in-out; }
+  -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
   .list-item-content > i:last-child {
     float: right; }
   .list-item-content > .toggle:last-child, .list-item-content input:last-child, .list-item-content > button:last-child {
@@ -1124,6 +1123,20 @@ a.list-item {
   .list-item-edit i {
     color: #ef4e3a;
     font-size: 24px; }
+  .list-item-edit.ng-enter {
+    -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+    left: -48px;
+    opacity: 0; }
+  .list-item-edit.ng-enter-active {
+    opacity: 1;
+    left: 0; }
+  .list-item-edit.ng-leave {
+    -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+    left: 0px;
+    opacity: 1; }
+  .list-item-edit.ng-leave-active {
+    opacity: 0;
+    left: -48px; }
 
 .list-item-drag {
   position: absolute;

dist/css/ionic.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 @font-face {
   font-family: 'ionicons';
   src: url("fonts/ionicons.eot");
@@ -2181,7 +2180,7 @@ a.list-item {
   background-color: #fff;
   z-index: 2;
   padding: 15px 15px;
-  -webkit-transition: margin-left 0.2s ease-in-out, left 0.2s ease-in-out; }
+  -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
   .list-item-content > i:last-child {
     float: right; }
   .list-item-content > .toggle:last-child, .list-item-content input:last-child, .list-item-content > button:last-child {
@@ -2211,6 +2210,20 @@ a.list-item {
   .list-item-edit i {
     color: #ef4e3a;
     font-size: 24px; }
+  .list-item-edit.ng-enter {
+    -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+    left: -48px;
+    opacity: 0; }
+  .list-item-edit.ng-enter-active {
+    opacity: 1;
+    left: 0; }
+  .list-item-edit.ng-leave {
+    -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+    left: 0px;
+    opacity: 1; }
+  .list-item-edit.ng-leave-active {
+    opacity: 0;
+    left: -48px; }
 
 .list-item-drag {
   position: absolute;

dist/js/ionic-angular.js

@@ -187,31 +187,37 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
 .directive('listItem', function() {
   return {
     restrict: 'E',
+    require: '^list',
     replace: true,
     transclude: true,
-    template:   '<li class="list-item">' + 
+    scope: {
-                ' <div class="list-item-edit" ng-if="item.canDelete && isEditing">' +
+      onSelect: '&',
-                '   <button class="button button-icon" ng-click="deleteClicked()"><i ng-class="deleteIcon"></i></button>' +
+      onDelete: '&',
-                ' </div>' +
+      onButtonClicked: '&',
-                ' <div class="list-item-content" ng-transclude>' +
+      canDelete: '@',
-                ' </div>' +
+      canReorder: '@',
-                ' <div class="list-item-drag" ng-if="item.canReorder && isEditing">' + 
+      canSwipe: '@',
-                '   <button ng-click="startReorder()"><i ng-class="reorderIcon"></i></button>' +
+      buttons: '=',
-                ' </div>' +
+    },
-                ' <div class="list-item-buttons" ng-if="item.canSwipe && !isEditing">' +
+    template:   '<li class="list-item">\
-                '   <button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in item.buttons">{{button.text}}</button>' +
+                   <div class="list-item-edit" ng-if="canDelete && isEditing">\
-                ' </div>' +
+                     <button class="button button-icon" ng-click="onDelete()"><i ng-class="deleteIcon"></i></button>\
-                '</li>',
+                   </div>\
-    link: function($scope, $element, $attr) {
+                   <div class="list-item-content" ng-transclude>\
-      // Triggered when a button is clicked
+                   </div>\
-      $scope.buttonClicked = function(button) {
+                   <div class="list-item-drag" ng-if="canReorder && isEditing">\
-        button.buttonClicked && button.buttonClicked($scope.item);
+                     <button ng-click="startReorder()"><i ng-class="reorderIcon"></i></button>\
-      }
+                   </div>\
+                   <div class="list-item-buttons" ng-if="canSwipe && !isEditing">\
+                     <button ng-click="onButtonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
+                   </div>\
+                </li>',
+    link: function($scope, $element, $attr, list) {
+      $scope.deleteIcon = list.scope.deleteIcon;
 
-      // Triggered when the delete item is clicked
+      list.scope.$watch('isEditing', function(v) {
-      $scope.deleteClicked = function() {
+        $scope.isEditing = v;
-        $scope.item.deleteItem && $scope.item.deleteItem();
+      });
-      }
     }
   }
 })
@@ -221,46 +227,27 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
     restrict: 'E',
     replace: true,
     transclude: true,
+
     scope: {
       isEditing: '=',
-      items: '=',
-      animation: '@',
-      deleteIcon: '@',
-      reorderIcon: '@'
-    },
-    template: '<ul class="list" ng-class="{\'list-editing\': isEditing}">' +
-                '<list-item ng-repeat="item in items" canDelete="item.canDelete" canSwipe="item.canSwipe" animation="my-repeat-animation">' +
-                ' {{item.text}}' +
-                ' <i class="{{item.icon}}" ng-if="item.icon"></i>' + 
-                '</list-item>' + 
-              '</ul>',
-    compile: function(element, attr, transclude) {
-      return function($scope, $element, $attr) {
-        var lv = new ionic.views.List({el: $element[0]});
-
-        if(attr.animation) {
-          $element.addClass(attr.animation);
-        }
-
-        $element.append(transclude($scope));
-      }
-    }
-  }
-})
-
-.directive('listSimple', function() {
-  return {
-    restrict: 'E',
-    replace: true,
-    transclude: true,
-    scope: {
-      isEditing: '=',
-      items: '=',
-      animation: '@',
       deleteIcon: '@'
     },
-    template: '<ul class="list" ng-class="{\'list-editing\': isEditing}" ng-transclude>' +
+
-              '</ul>',
+    // So we can require being under this
+    controller: function($scope) {
+      var _this = this;
+
+      this.scope = $scope;
+
+      $scope.$watch('isEditing', function(v) {
+        _this.isEditing = true;
+        console.log('Is Editing Changed', v);
+      });
+    },
+
+    template: '<ul class="list" ng-class="{\'list-editing\': isEditing}" ng-transclude>\
+              </ul>',
+
     compile: function(element, attr, transclude) {
       return function($scope, $element, $attr) {
         var lv = new ionic.views.List({el: $element[0]});

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

@@ -3,31 +3,37 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
 .directive('listItem', function() {
   return {
     restrict: 'E',
+    require: '^list',
     replace: true,
     transclude: true,
-    template:   '<li class="list-item">' + 
+    scope: {
-                ' <div class="list-item-edit" ng-if="item.canDelete && isEditing">' +
+      onSelect: '&',
-                '   <button class="button button-icon" ng-click="deleteClicked()"><i ng-class="deleteIcon"></i></button>' +
+      onDelete: '&',
-                ' </div>' +
+      onButtonClicked: '&',
-                ' <div class="list-item-content" ng-transclude>' +
+      canDelete: '@',
-                ' </div>' +
+      canReorder: '@',
-                ' <div class="list-item-drag" ng-if="item.canReorder && isEditing">' + 
+      canSwipe: '@',
-                '   <button ng-click="startReorder()"><i ng-class="reorderIcon"></i></button>' +
+      buttons: '=',
-                ' </div>' +
+    },
-                ' <div class="list-item-buttons" ng-if="item.canSwipe && !isEditing">' +
+    template:   '<li class="list-item">\
-                '   <button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in item.buttons">{{button.text}}</button>' +
+                   <div class="list-item-edit" ng-if="canDelete && isEditing">\
-                ' </div>' +
+                     <button class="button button-icon" ng-click="onDelete()"><i ng-class="deleteIcon"></i></button>\
-                '</li>',
+                   </div>\
-    link: function($scope, $element, $attr) {
+                   <div class="list-item-content" ng-transclude>\
-      // Triggered when a button is clicked
+                   </div>\
-      $scope.buttonClicked = function(button) {
+                   <div class="list-item-drag" ng-if="canReorder && isEditing">\
-        button.buttonClicked && button.buttonClicked($scope.item);
+                     <button ng-click="startReorder()"><i ng-class="reorderIcon"></i></button>\
-      }
+                   </div>\
+                   <div class="list-item-buttons" ng-if="canSwipe && !isEditing">\
+                     <button ng-click="onButtonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
+                   </div>\
+                </li>',
+    link: function($scope, $element, $attr, list) {
+      $scope.deleteIcon = list.scope.deleteIcon;
 
-      // Triggered when the delete item is clicked
+      list.scope.$watch('isEditing', function(v) {
-      $scope.deleteClicked = function() {
+        $scope.isEditing = v;
-        $scope.item.deleteItem && $scope.item.deleteItem();
+      });
-      }
     }
   }
 })
@@ -37,46 +43,27 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
     restrict: 'E',
     replace: true,
     transclude: true,
+
     scope: {
       isEditing: '=',
-      items: '=',
-      animation: '@',
-      deleteIcon: '@',
-      reorderIcon: '@'
-    },
-    template: '<ul class="list" ng-class="{\'list-editing\': isEditing}">' +
-                '<list-item ng-repeat="item in items" canDelete="item.canDelete" canSwipe="item.canSwipe" animation="my-repeat-animation">' +
-                ' {{item.text}}' +
-                ' <i class="{{item.icon}}" ng-if="item.icon"></i>' + 
-                '</list-item>' + 
-              '</ul>',
-    compile: function(element, attr, transclude) {
-      return function($scope, $element, $attr) {
-        var lv = new ionic.views.List({el: $element[0]});
-
-        if(attr.animation) {
-          $element.addClass(attr.animation);
-        }
-
-        $element.append(transclude($scope));
-      }
-    }
-  }
-})
-
-.directive('listSimple', function() {
-  return {
-    restrict: 'E',
-    replace: true,
-    transclude: true,
-    scope: {
-      isEditing: '=',
-      items: '=',
-      animation: '@',
       deleteIcon: '@'
     },
-    template: '<ul class="list" ng-class="{\'list-editing\': isEditing}" ng-transclude>' +
+
-              '</ul>',
+    // So we can require being under this
+    controller: function($scope) {
+      var _this = this;
+
+      this.scope = $scope;
+
+      $scope.$watch('isEditing', function(v) {
+        _this.isEditing = true;
+        console.log('Is Editing Changed', v);
+      });
+    },
+
+    template: '<ul class="list" ng-class="{\'list-editing\': isEditing}" ng-transclude>\
+              </ul>',
+
     compile: function(element, attr, transclude) {
       return function($scope, $element, $attr) {
         var lv = new ionic.views.List({el: $element[0]});

js/ext/angular/test/list.html

@@ -5,7 +5,7 @@
 
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link rel="stylesheet" href="../../../../dist/ionic.css">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
@@ -49,45 +49,20 @@
   <body>
 
     <content has-header="true" ng-controller="TestCtrl" class="reveal-animation">
-      <list is-editing="isEditingItems">
+      <list is-editing="isEditingItems" animation="my-repeat-animation" delete-icon="icon-minus-circled" reorder-icon="icon-navicon">
-        <li href="#" class="list-item">
+        <list-item ng-repeat="item in items" 
-          <div class="list-item-edit">
+        can-delete="true"
-            <button class="button button-icon"><i class="icon-minus-circled"></i></button>
+                 on-delete="deleteProject(project)"
-          </div>
+                 on-select="selectProject(project)">
-          <div class="list-item-content">
+          {{item.text}}
-            Item 1
+          <i class="{{item.icon}}"></i>
-            <i class="icon-arrow-right"></i>
+        </list-item>
-          </div>
-          <div class="list-item-buttons">
-            <button class="button button-danger">Delete</button>
-          </div>
-        </li>
-        <li href="#" class="list-item">
-          <div class="list-item-content">
-            Item 2
-            <i class="icon-arrow-right"></i>
-          </div>
-          <div class="list-item-buttons">
-            <button class="button button-danger">Delete</button>
-          </div>
-        </li>
-        <li href="#" class="list-item">
-          <div class="list-item-content">
-            Item 3
-            <i class="icon-arrow-right"></i>
-          </div>
-          <div class="list-item-buttons">
-            <button class="button button-danger">Delete</button>
-          </div>
-        </li>
-      </list>
-      <list items="items" is-editing="isEditingItems" animation="my-repeat-animation" delete-icon="icon-minus-circled">
       </list>
       <button ng-click="edit()" class="button button-success">Edit</button>
     </content>
 
-    <script src="../../../../dist/ionic.js"></script>
+    <script src="../../../../dist/js/ionic.js"></script>
-    <script src="../../../../dist/ionic-angular.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
     <script>
       angular.module('navTest', ['ionic.ui.list', 'ngAnimate'])
 
@@ -104,7 +79,6 @@
             canSwipe: true,
             canReorder: true,
             icon: 'icon-chevron-right',
-            reorderIcon: 'icon-navicon',
             hide: false,
             deleteItem: removeItem,
             buttons: [{
@@ -119,7 +93,6 @@
             canSwipe: true,
             canReorder: true,
             icon: 'icon-chevron-right',
-            reorderIcon: 'icon-navicon',
             deleteItem: removeItem,
             buttons: [{
               text: 'Kill',
@@ -133,7 +106,6 @@
             canSwipe: true,
             canReorder: true,
             icon: 'icon-chevron-right',
-            reorderIcon: 'icon-navicon',
             deleteItem: removeItem,
             buttons: [{
               text: 'Kill',

scss/ionic/_listview.scss

@@ -120,7 +120,7 @@ a.list-item {
 
   padding: 15px 15px;
 
-  -webkit-transition: margin-left 0.2s ease-in-out, left 0.2s ease-in-out;
+  -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
 
   // Align icons to the right
   > i:last-child {
@@ -165,6 +165,26 @@ a.list-item {
     color: $brand-danger;
     font-size: 24px;
   }
+
+
+  &.ng-enter {
+    -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+    left: -48px;
+    opacity: 0;
+  }
+  &.ng-enter-active {
+    opacity: 1;
+    left: 0;
+  }
+  &.ng-leave {
+    -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+    left: 0px;
+    opacity: 1;
+  }
+  &.ng-leave-active {
+    opacity: 0;
+    left: -48px;
+  }
 }
 
 .list-item-drag {