From cc40017b1a294e92fad109e3f9f327b01b2c356b Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Fri, 11 Oct 2013 14:26:16 -0500
Subject: [PATCH] List syncing

---
 dist/css/ionic-ios7.css                     | 18 +++++++++++++++---
 dist/css/ionic.css                          | 18 +++++++++++++++---
 dist/js/ionic-angular.js                    | 11 ++++++++---
 example/toderp2/index.html                  | 15 +++++----------
 js/ext/angular/src/directive/ionicList.js   | 10 +++++++---
 js/ext/angular/src/directive/ionicToggle.js |  1 +
 js/ext/angular/test/list.html               |  7 +++++++
 scss/ionic/_listview.scss                   | 18 ++++++++++++++++--
 8 files changed, 74 insertions(+), 24 deletions(-)

diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index a7732791bb..5474efb988 100644
--- a/dist/css/ionic-ios7.css
+++ b/dist/css/ionic-ios7.css
@@ -1078,7 +1078,8 @@ a.list-item {
  * "edit mode"
  */
 .list-editing .list-item-content {
-  margin-left: 30px; }
+  margin-left: 30px;
+  margin-right: 30px; }
 .list-editing .list-item-edit {
   left: 0px;
   opacity: 1; }
@@ -1091,7 +1092,7 @@ a.list-item {
 .list-item-content {
   position: relative;
   background-color: #fff;
-  z-index: 1;
+  z-index: 2;
   padding: 15px 15px;
   -webkit-transition: margin-left 0.2s ease-in-out, left 0.2s ease-in-out; }
   .list-item-content > i:last-child {
@@ -1124,13 +1125,24 @@ a.list-item {
     color: #ef4e3a;
     font-size: 24px; }
 
+.list-item-drag {
+  position: absolute;
+  z-index: 0;
+  right: 0;
+  top: 0;
+  height: 100%; }
+  .list-item-drag .button {
+    height: 100%;
+    border-radius: 0;
+    border: none; }
+
 /**
  * The hidden right-side buttons that can be exposed under a list item
  * with dragging.
  */
 .list-item-buttons {
   position: absolute;
-  z-index: 0;
+  z-index: 1;
   right: 0;
   top: 0;
   height: 100%; }
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 6b1b7e3d59..655ea213e8 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2165,7 +2165,8 @@ a.list-item {
  * "edit mode"
  */
 .list-editing .list-item-content {
-  margin-left: 30px; }
+  margin-left: 30px;
+  margin-right: 30px; }
 .list-editing .list-item-edit {
   left: 0px;
   opacity: 1; }
@@ -2178,7 +2179,7 @@ a.list-item {
 .list-item-content {
   position: relative;
   background-color: #fff;
-  z-index: 1;
+  z-index: 2;
   padding: 15px 15px;
   -webkit-transition: margin-left 0.2s ease-in-out, left 0.2s ease-in-out; }
   .list-item-content > i:last-child {
@@ -2211,13 +2212,24 @@ a.list-item {
     color: #ef4e3a;
     font-size: 24px; }
 
+.list-item-drag {
+  position: absolute;
+  z-index: 0;
+  right: 0;
+  top: 0;
+  height: 100%; }
+  .list-item-drag .button {
+    height: 100%;
+    border-radius: 0;
+    border: none; }
+
 /**
  * The hidden right-side buttons that can be exposed under a list item
  * with dragging.
  */
 .list-item-buttons {
   position: absolute;
-  z-index: 0;
+  z-index: 1;
   right: 0;
   top: 0;
   height: 100%; }
diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index c02714da2f..e6399d9079 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -190,12 +190,15 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
     replace: true,
     transclude: true,
     template:   '<li class="list-item">' + 
-                ' <div class="list-item-edit" ng-if="item.canDelete">' +
+                ' <div class="list-item-edit" ng-if="item.canDelete && isEditing">' +
                 '   <button class="button button-icon" ng-click="deleteClicked()"><i ng-class="deleteIcon"></i></button>' +
                 ' </div>' +
                 ' <div class="list-item-content" ng-transclude>' +
                 ' </div>' +
-                ' <div class="list-item-buttons" ng-if="item.canSwipe">' +
+                ' <div class="list-item-drag" ng-if="item.canReorder && isEditing">' + 
+                '   <button ng-click="startReorder()"><i ng-class="reorderIcon"></i></button>' +
+                ' </div>' +
+                ' <div class="list-item-buttons" ng-if="item.canSwipe && !isEditing">' +
                 '   <button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in item.buttons">{{button.text}}</button>' +
                 ' </div>' +
                 '</li>',
@@ -222,7 +225,8 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
       isEditing: '=',
       items: '=',
       animation: '@',
-      deleteIcon: '@'
+      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">' +
@@ -583,6 +587,7 @@ angular.module('ionic.ui.toggle', [])
     restrict: 'E',
     replace: true,
     require: '?ngModel',
+    scope: true,
     template: '<div class="toggle">' +
               ' <input type="checkbox">'+
               ' <div class="track">' +
diff --git a/example/toderp2/index.html b/example/toderp2/index.html
index fc6ee8a1ce..c24d5786c4 100644
--- a/example/toderp2/index.html
+++ b/example/toderp2/index.html
@@ -141,17 +141,12 @@
               <input type="text" ng-model="newProject.title" placeholder="Create a new list...">
             </form>
             <list-simple is-editing="isEditingProjects">
-              <li class="list-item list-item-primary" ng-class="{active: project.$id == activeProject.project.name()}" ng-repeat="project in projects">
-                <div class="list-item-edit">
-                  <button class="button button-icon" ng-click="deleteProject(project)"><i class="icon-minus-circled"></i></button>
-                </div>
-                <div class="list-item-content" ng-click="selectProject(project)">
+              <list-item ng-class="{active: project.$id == activeProject.project.name()}"
+                         ng-repeat="project in projects"
+                         on-delete="deleteProject(project)"
+                         on-select="selectProject(project)">
                   {{project.title}}
-                </div>
-                <div class="list-item-buttons">
-                  <button class="button button-danger" ng-click="deleteProject(project)">Delete</button>
-                </div>
-              </li>
+              </list-item>
             </list-simple>
           </content>
         </menu>
diff --git a/js/ext/angular/src/directive/ionicList.js b/js/ext/angular/src/directive/ionicList.js
index 4e3bd9fe29..5349f132d9 100644
--- a/js/ext/angular/src/directive/ionicList.js
+++ b/js/ext/angular/src/directive/ionicList.js
@@ -6,12 +6,15 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
     replace: true,
     transclude: true,
     template:   '<li class="list-item">' + 
-                ' <div class="list-item-edit" ng-if="item.canDelete">' +
+                ' <div class="list-item-edit" ng-if="item.canDelete && isEditing">' +
                 '   <button class="button button-icon" ng-click="deleteClicked()"><i ng-class="deleteIcon"></i></button>' +
                 ' </div>' +
                 ' <div class="list-item-content" ng-transclude>' +
                 ' </div>' +
-                ' <div class="list-item-buttons" ng-if="item.canSwipe">' +
+                ' <div class="list-item-drag" ng-if="item.canReorder && isEditing">' + 
+                '   <button ng-click="startReorder()"><i ng-class="reorderIcon"></i></button>' +
+                ' </div>' +
+                ' <div class="list-item-buttons" ng-if="item.canSwipe && !isEditing">' +
                 '   <button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in item.buttons">{{button.text}}</button>' +
                 ' </div>' +
                 '</li>',
@@ -38,7 +41,8 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
       isEditing: '=',
       items: '=',
       animation: '@',
-      deleteIcon: '@'
+      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">' +
diff --git a/js/ext/angular/src/directive/ionicToggle.js b/js/ext/angular/src/directive/ionicToggle.js
index 165a7fc40d..57d2736559 100644
--- a/js/ext/angular/src/directive/ionicToggle.js
+++ b/js/ext/angular/src/directive/ionicToggle.js
@@ -7,6 +7,7 @@ angular.module('ionic.ui.toggle', [])
     restrict: 'E',
     replace: true,
     require: '?ngModel',
+    scope: true,
     template: '<div class="toggle">' +
               ' <input type="checkbox">'+
               ' <div class="track">' +
diff --git a/js/ext/angular/test/list.html b/js/ext/angular/test/list.html
index f5a3d1aad6..6c776e6e9c 100644
--- a/js/ext/angular/test/list.html
+++ b/js/ext/angular/test/list.html
@@ -102,7 +102,9 @@
             text: 'Item 1',
             canDelete: true,
             canSwipe: true,
+            canReorder: true,
             icon: 'icon-chevron-right',
+            reorderIcon: 'icon-navicon',
             hide: false,
             deleteItem: removeItem,
             buttons: [{
@@ -115,7 +117,9 @@
             text: 'Item 2',
             canDelete: true,
             canSwipe: true,
+            canReorder: true,
             icon: 'icon-chevron-right',
+            reorderIcon: 'icon-navicon',
             deleteItem: removeItem,
             buttons: [{
               text: 'Kill',
@@ -127,7 +131,9 @@
             text: 'Item 3',
             canDelete: true,
             canSwipe: true,
+            canReorder: true,
             icon: 'icon-chevron-right',
+            reorderIcon: 'icon-navicon',
             deleteItem: removeItem,
             buttons: [{
               text: 'Kill',
@@ -139,6 +145,7 @@
             text: 'Item 4',
             canDelete: true,
             canSwipe: true,
+            canReorder: true,
             icon: 'icon-chevron-right',
             deleteItem: removeItem,
             buttons: [{
diff --git a/scss/ionic/_listview.scss b/scss/ionic/_listview.scss
index b2433fdd0d..3bb3e10400 100644
--- a/scss/ionic/_listview.scss
+++ b/scss/ionic/_listview.scss
@@ -96,6 +96,7 @@ a.list-item {
 .list-editing {
   .list-item-content {
     margin-left: 30px;
+    margin-right: 30px;
   }
   .list-item-edit {
     left: 0px;
@@ -115,7 +116,7 @@ a.list-item {
 
   background-color: #fff;
 
-  z-index: 1;
+  z-index: 2;
 
   padding: 15px 15px;
 
@@ -166,13 +167,26 @@ a.list-item {
   }
 }
 
+.list-item-drag {
+  position: absolute;
+  z-index: 0;
+  right: 0;
+  top: 0;
+  height: 100%;
+
+  .button {
+    height: 100%;
+    border-radius: 0;
+    border: none;
+  }
+}
 /**
  * The hidden right-side buttons that can be exposed under a list item
  * with dragging.
  */
 .list-item-buttons {
   position: absolute;
-  z-index: 0;
+  z-index: 1;
   right: 0;
   top: 0;
   height: 100%;