List syncing

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

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

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">' +

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">
+              <list-item ng-class="{active: project.$id == activeProject.project.name()}"
-                <div class="list-item-edit">
+                         ng-repeat="project in projects"
-                  <button class="button button-icon" ng-click="deleteProject(project)"><i class="icon-minus-circled"></i></button>
+                         on-delete="deleteProject(project)"
-                </div>
+                         on-select="selectProject(project)">
-                <div class="list-item-content" ng-click="selectProject(project)">
                   {{project.title}}
-                </div>
+              </list-item>
-                <div class="list-item-buttons">
-                  <button class="button button-danger" ng-click="deleteProject(project)">Delete</button>
-                </div>
-              </li>
             </list-simple>
           </content>
         </menu>

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">' +

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">' +

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: [{

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%;