List updates and directives with it!

dist/ionic-angular.js

@@ -187,24 +187,55 @@ angular.module('ionic.ui.list', ['ionic.service'])
     restrict: 'E',
     replace: true,
     transclude: true,
-    scope: {},
-    template: '<ul class="list-group" ng-transclude></ul>',
+    scope: {
+      isEditing: '='
+    },
+    template: '<ul class="list" ng-class="{\'list-editing\': isEditing}" 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: {}
+    template:   '<li class="list-item">' +
+                ' <div class="list-item-edit" ng-if="item.canDelete">' +
+                '   <button class="button button-icon"><i class="icon-minus-sign"></i></button>' +
+                ' </div>' +
+                ' <div class="list-item-content" ng-transclude>' +
+                ' </div>' +
+                ' <div class="list-item-buttons" ng-if="item.canSwipe">' +
+                '   <button class="button button-{{button.type}}" ng-repeat="button in item.buttons">{{item.button.text}}</button>' +
+                ' </div>' +
+                '</li>',
+    link: function($scope, $element, $attr) {
+    }
   }
-});
-*/
+})
+
+.directive('listItems', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    scope: {
+      isEditing: '=',
+      items: '='
+    },
+    template: '<ul class="list" ng-class="{\'list-editing\': isEditing}">' +
+                '<list-item ng-repeat="item in items" canDelete="item.canDelete" canSwipe="item.canSwipe">' +
+                ' {{item.text}}' +
+                '</list-item>' + 
+              '</ul>',
+    link: function($scope, $element, $attr) {
+      var lv = new ionic.views.List({el: $element[0]});
+    }
+  }
+})
 ;
 angular.module('ionic.ui.nav', ['ionic.service'])
 

dist/ionic-ios7.css

@@ -325,7 +325,8 @@ body {
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
   -webkit-tap-highlight-color: transparent;
-  -webkit-user-drag: none; }
+  -webkit-user-drag: none;
+  -webkit-user-select: none; }
 
 .view-full {
   position: fixed;
@@ -1061,6 +1062,12 @@ a.list-item {
   a.list-item:hover, a.list-item:focus {
     text-decoration: none; }
 
+.list-editing .list-item-content {
+  left: 50px; }
+.list-editing .list-item-edit {
+  left: 0px;
+  opacity: 1; }
+
 .list-item-content {
   position: relative;
   background-color: #fff;
@@ -1068,6 +1075,20 @@ a.list-item {
   padding: 15px 15px;
   -webkit-transition: left 0.2s ease-in-out; }
 
+.list-item-edit {
+  position: absolute;
+  z-index: 0;
+  left: -48px;
+  top: 0;
+  width: 48px;
+  height: 100%;
+  line-height: 100%;
+  opacity: 0;
+  -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
+  .list-item-edit i {
+    color: #ef4e3a;
+    font-size: 36px; }
+
 .list-item-buttons {
   position: absolute;
   z-index: 0;

dist/ionic.css

@@ -390,7 +390,8 @@ body {
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
   -webkit-tap-highlight-color: transparent;
-  -webkit-user-drag: none; }
+  -webkit-user-drag: none;
+  -webkit-user-select: none; }
 
 .view-full {
   position: fixed;
@@ -1149,6 +1150,12 @@ a.list-item {
   a.list-item:hover, a.list-item:focus {
     text-decoration: none; }
 
+.list-editing .list-item-content {
+  left: 50px; }
+.list-editing .list-item-edit {
+  left: 0px;
+  opacity: 1; }
+
 .list-item-content {
   position: relative;
   background-color: #fff;
@@ -1156,6 +1163,20 @@ a.list-item {
   padding: 15px 15px;
   -webkit-transition: left 0.2s ease-in-out; }
 
+.list-item-edit {
+  position: absolute;
+  z-index: 0;
+  left: -48px;
+  top: 0;
+  width: 48px;
+  height: 100%;
+  line-height: 100%;
+  opacity: 0;
+  -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
+  .list-item-edit i {
+    color: #ef4e3a;
+    font-size: 36px; }
+
 .list-item-buttons {
   position: absolute;
   z-index: 0;

example/toderp2/css/app.css

@@ -50,6 +50,13 @@
   color: #4a87ee;
 }
 
+/* Tasks view */
+
+#task-list {
+}
+#task-list .completed {
+  text-decoration: line-through;
+}
 
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
   #signup-view {

example/toderp2/index.html

@@ -119,9 +119,10 @@
             <form ng-submit="addTask(newTask)">
               <input type="text" ng-model="newTask.title" placeholder="Add an item...">
             </form>
-            <list>
+            <list id="task-list">
               <li class="list-item" ng-repeat="task in activeProject.tasks" ng-class="{completed: task.isCompleted}">
-                {{task.title}}
+                <input type="checkbox" ng-model="task.isCompleted"> {{task.title}}
+                <input type="text" ng-model="task.title">
               </li>
             </list>
           </div>

example/toderp2/js/controllers.js

@@ -25,8 +25,8 @@ angular.module('ionic.todo.controllers', ['ionic.todo'])
   console.log('Created login Ctrl');
 
   $scope.loginForm = {
-    email: 'max@drifty.com',
-    password: 'test'
+    email: 'ihasmax@gmail.com',
+    password: 'traintown'
   };
 
   $scope.close = function() {

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

@@ -5,21 +5,52 @@ angular.module('ionic.ui.list', ['ionic.service'])
     restrict: 'E',
     replace: true,
     transclude: true,
-    scope: {},
-    template: '<ul class="list-group" ng-transclude></ul>',
+    scope: {
+      isEditing: '='
+    },
+    template: '<ul class="list" ng-class="{\'list-editing\': isEditing}" 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: {}
+    template:   '<li class="list-item">' +
+                ' <div class="list-item-edit" ng-if="item.canDelete">' +
+                '   <button class="button button-icon"><i class="icon-minus-sign"></i></button>' +
+                ' </div>' +
+                ' <div class="list-item-content" ng-transclude>' +
+                ' </div>' +
+                ' <div class="list-item-buttons" ng-if="item.canSwipe">' +
+                '   <button class="button button-{{button.type}}" ng-repeat="button in item.buttons">{{item.button.text}}</button>' +
+                ' </div>' +
+                '</li>',
+    link: function($scope, $element, $attr) {
+    }
   }
-});
-*/
+})
+
+.directive('listItems', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    scope: {
+      isEditing: '=',
+      items: '='
+    },
+    template: '<ul class="list" ng-class="{\'list-editing\': isEditing}">' +
+                '<list-item ng-repeat="item in items" canDelete="item.canDelete" canSwipe="item.canSwipe">' +
+                ' {{item.text}}' +
+                '</list-item>' + 
+              '</ul>',
+    link: function($scope, $element, $attr) {
+      var lv = new ionic.views.List({el: $element[0]});
+    }
+  }
+})

js/ext/angular/test/list.html

@@ -0,0 +1,103 @@
+<html ng-app="navTest">
+  <head>
+    <meta charset="utf-8">
+    <title>List</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="../../../../dist/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>
+    <style>
+      .reveal-animation {
+        /*
+        -webkit-transform: translate3d(0%, 0, 0);
+                transform: translate3d(0%, 0, 0);
+
+       -webkit-transition: -webkit-transform 1s ease-in-out;
+               transition:         transform 1s ease-in-out;
+        */
+      }
+      .reveal-animation.ng-enter {
+        -webkit-transition: .2s ease-in-out all;
+        -webkit-transform:translate3d(100%,0,0) ;
+      }
+      .reveal-animation.ng-enter-active {
+        -webkit-transform:translate3d(0,0,0) ;
+      }
+      .reveal-animation.ng-leave {
+        -webkit-transition: .2s ease-in-out all;
+        -webkit-transform:translate3d(0%,0,0);
+      }
+      .reveal-animation.ng-leave-active {
+        -webkit-transition: .2s ease-in-out all;
+        -webkit-transform:translate3d(-100%,0,0);
+      }
+    </style>
+
+  </head>
+  <body>
+
+    <content has-header="true" ng-controller="TestCtrl" class="reveal-animation">
+      <list is-editing="isEditingItems">
+        <li href="#" class="list-item">
+          <div class="list-item-edit">
+            <button class="button button-icon"><i class="icon-minus-sign"></i></button>
+          </div>
+          <div class="list-item-content">
+            Item 1
+            <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 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="items" is-editing="isEditingItems">
+      </list-items>
+      <button ng-click="edit()" class="button button-success">Edit</button>
+    </content>
+
+    <script src="../../../../dist/ionic.js"></script>
+    <script src="../../../../dist/ionic-angular.js"></script>
+    <script>
+      angular.module('navTest', ['ionic.ui.list'])
+
+      .controller('TestCtrl', function($scope) {
+        $scope.items = [{
+          text: 'Item 1',
+          canDelete: true,
+          canSwipe: true,
+          buttons: [{
+            text: 'Kill'
+          }]
+        }];
+        $scope.edit = function() {
+          $scope.isEditingItems = !$scope.isEditingItems;
+        }
+      });
+
+    </script>
+  </body>
+</html>
+

scss/ionic/_listview.scss

@@ -88,6 +88,16 @@ a.list-item {
   }
 }
 
+.list-editing {
+  .list-item-content {
+    left: 50px;
+  }
+  .list-item-edit {
+    left: 0px;
+    opacity: 1;
+  }
+}
+
 .list-item-content {
   position: relative;
 
@@ -99,6 +109,25 @@ a.list-item {
 
   -webkit-transition: left 0.2s ease-in-out;
 }
+
+.list-item-edit {
+  position: absolute;
+  z-index: 0;
+  left: -48px;
+  top: 0;
+  width: 48px;
+  height: 100%;
+  line-height: 100%;
+  opacity: 0;
+
+  -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+
+  i {
+    color: $brand-danger;
+    font-size: 36px;
+  }
+}
+
 .list-item-buttons {
   position: absolute;
   z-index: 0;

scss/ionic/_scaffolding.scss

@@ -24,6 +24,7 @@ body {
           text-size-adjust: none;
   -webkit-tap-highlight-color: transparent;
   -webkit-user-drag: none;
+  -webkit-user-select: none;
 }
 
 .view {