Making toderp progress

dist/ionic-angular.js

@@ -226,10 +226,6 @@ angular.module('ionic.ui.nav', ['ionic.service'])
     controller: 'NavCtrl',
     //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
     template: '<div class="view" ng-transclude></div>',
-    compile: function(element, attr, transclude, navCtrl) {
-      return function($scope, $element, $attr) {
-      };
-    }
   }
 })
 
@@ -237,7 +233,6 @@ angular.module('ionic.ui.nav', ['ionic.service'])
   return {
     restrict: 'E',
     require: '^navCtrl',
-    transclude: true,
     replace: true,
     scope: true,
     template: '<header class="bar bar-header bar-dark nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' + 
@@ -317,11 +312,8 @@ angular.module('ionic.ui.sideMenu', [])
 
 .directive('sideMenuCtrl', function() {
   return {
-    restrict: 'E',
+    restrict: 'CA',
     controller: 'SideMenuCtrl',
-    replace: true,
-    transclude: true,
-    template: '<div class="view" ng-transclude></div>',
   }
 })
 
@@ -374,11 +366,11 @@ angular.module('ionic.ui.sideMenu', [])
     require: '^sideMenuCtrl',
     replace: true,
     transclude: true,
-    scope: true,
+    template: '<div class="menu menu-{{side}}"></div>',
-    template: '<div class="menu menu-{{side}}" ng-transclude></div>',
     compile: function(element, attr, transclude, sideMenuCtrl) {
       return function($scope, $element, $attr) {
         $scope.side = attr.side;
+        $element.append(transclude($scope));
       };
     }
   }

dist/ionic-ios7.css

@@ -2305,11 +2305,11 @@ a.button {
   padding: 10px; }
 
 .slide-in-up {
-  opacity: 0.5;
+  opacity: 0;
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
-  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
+  -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-  transition: -webkit-transform 0.3s, opacity 0.2s;
+  transition: -webkit-transform 0.4s, opacity 0.1s;
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
   transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
   -webkit-animation-fill-mode: forwards; }

dist/ionic.css

@@ -2387,11 +2387,11 @@ a.button {
   padding: 10px; }
 
 .slide-in-up {
-  opacity: 0.5;
+  opacity: 0;
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
-  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
+  -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-  transition: -webkit-transform 0.3s, opacity 0.2s;
+  transition: -webkit-transform 0.4s, opacity 0.1s;
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
   transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
   -webkit-animation-fill-mode: forwards; }

example/toderp2/index.html

@@ -107,14 +107,22 @@
 
     <!-- Tasks -->
     <script id="tasks.html" type="text/ng-template">
-      <side-menu-ctrl id="tasks-view" nav-content class="view" ng-controller="TasksCtrl" nav-bar="false">
+      <div class="view" side-menu-ctrl id="tasks-view" nav-content class="view" ng-controller="TasksCtrl" nav-bar="false">
         <div class="full-section" side-menu-content>
           <header class="bar bar-header bar-secondary">
-            <a href="#" class="button"><i class="icon-reorder"></i></a>
+            <a href="#" class="button button-icon"><i class="icon-reorder"></i></a>
-            <h1 class="title">{{activeList.title}}</h1>
+            <h1 class="title">{{activeProject.title}}</h1>
+            <button class="button button-clear button-primary">Edit</button>
           </header>
           <div class="content has-header">
-            <h1>Slide me side to side!</h1>
+            <form ng-submit="addTask(newTask)">
+              <input type="text" ng-model="newTask.title" placeholder="Add an item...">
+            </form>
+            <list>
+              <li class="list-item" ng-repeat="task in activeProject.tasks" ng-class="{completed: task.isCompleted}">
+                {{task.title}}
+              </li>
+            </list>
           </div>
         </div>
         <menu side="left">
@@ -123,14 +131,14 @@
             <div class="toderp-small-logo"></div>
             <button class="button button-icon">S</button>
           </header>
-          <content has-header="true" ng-controller="ProjectsCtrl">
+          <content has-header="true">
             <form ng-submit="addProject(newProject)">
               <input type="text" ng-model="newProject.title" placeholder="Create a new list...">
             </form>
             <list>
-              <li class="list-item" ng-repeat="project in projects">
+              <a ng-click="setActiveProject(project)" class="list-item" ng-repeat="project in projects">
                 {{project.title}}
-              </li>
+              </a>
             </list>
           </content>
         </menu>

example/toderp2/js/app.js

@@ -15,4 +15,4 @@ angular.module('ionic.todo', [
                'ngAnimate'])
 
 // Our Firebase URL
-.constant('FIREBASE_URL', 'https://ionic-todo-demo.firebaseio.com/');
+.constant('FIREBASE_URL', 'https://ionic-todo-demo.firebaseio.com/todo');

example/toderp2/js/controllers.js

@@ -62,59 +62,59 @@ angular.module('ionic.todo.controllers', ['ionic.todo'])
 
   $scope.showLogin = function() {
     $scope.loginModal && $scope.loginModal.show();
-    /*
-    ActionSheet.show({
-      buttons: [
-        { text: 'Option 1' },
-        { text: 'Option 2' },
-        { text: 'Option 3' },
-      ],
-      destructiveText: 'Delete life',
-      titleText: 'Are you sure about life?',
-      cancelText: 'Cancel',
-      cancel: function() {
-        console.log('CANCELLED');
-      },
-      buttonClicked: function(index) {
-        console.log('BUTTON CLICKED', index);
-        return true;
-      },
-      destructiveButtonClicked: function() {
-        return true;
-      }
-    });
-    */
   };
 })
 
 
 // The tasks controller (main app controller)
-.controller('TasksCtrl', function($scope, angularFire, FIREBASE_URL) {
+.controller('TasksCtrl', function($scope, angularFire, angularFireCollection, FIREBASE_URL) {
-  var taskRef = new Firebase(FIREBASE_URL + '/todos');
+  /*
-  $scope.todos = [];
+  var lastProjectRef = new Firebase(FIREBASE_URL + '/lastproject');
-  angularFire(taskRef, $scope, 'todos');
+  var lastProjectPromise = angularFire(lastProjectRef, $scope, 'lastProject');
+  $scope.lastProject = null;
+  */
 
-  $scope.addTask = function(task) {
-    var t = {};
-    t = angular.extend({
-     id: $scope.user.id
-    }, task);
-
-    console.log("Adding task:", t);
-    $scope.todos.push(t);
-
-    $scope.task = {};
-  };
-})
-
-.controller('ProjectsCtrl', function($scope, angularFire, FIREBASE_URL) {
-  var taskRef = new Firebase(FIREBASE_URL + '/projects');
 
   $scope.newProject = {};
 
-  $scope.projects = [];
+  $scope.newTask = {};
-  angularFire(taskRef, $scope, 'projects');
 
+
+  /**
+   * Add a new tasks to the current project.
+   */
+  $scope.addTask = function(task) {
+    if(!$scope.activeProject) {
+      return;
+    }
+
+    if(!$scope.activeProject.tasks) {
+      $scope.activeProject.tasks = [];
+    }
+    $scope.activeProject.tasks.push({
+      title: task.title,
+      user_id: $scope.user.id,
+      isCompleted: false
+    });
+
+    $scope.newTask = {};
+  };
+
+  /**
+   * Set the current project
+   */
+  $scope.setActiveProject = function(project) {
+    if(project.$ref) {
+      $scope.activeProject = angularFire(project.$ref, $scope, 'activeProject');
+    } else {
+      $scope.activeProject = angularFire(project, $scope, 'activeProject');
+    }
+    //$scope.lastProject = project;
+  }
+
+  /**
+   * Add a project to the projects list.
+   */
   $scope.addProject = function(newProject) {
     var p = {
       title: newProject.title,
@@ -124,14 +124,14 @@ angular.module('ionic.todo.controllers', ['ionic.todo'])
 
     console.log("Adding project:", p);
 
-    $scope.projects.push(p);
 
     // Reset the form
     $scope.newProject = {};
+
+    $scope.setActiveProject($scope.projects.add(p));
   };
 
-  // Check if we need to create an initial list
+  $scope.projects = angularFireCollection(new Firebase(FIREBASE_URL + '/project_list'), function(snapshot) {
-  taskRef.on('value', function(snapshot) {
     if(!snapshot.val()) {
       var title = prompt('Create your first list:');
       if(title) {

js/ext/angular/src/directive/ionicNav.js

@@ -53,10 +53,6 @@ angular.module('ionic.ui.nav', ['ionic.service'])
     controller: 'NavCtrl',
     //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
     template: '<div class="view" ng-transclude></div>',
-    compile: function(element, attr, transclude, navCtrl) {
-      return function($scope, $element, $attr) {
-      };
-    }
   }
 })
 
@@ -64,7 +60,6 @@ angular.module('ionic.ui.nav', ['ionic.service'])
   return {
     restrict: 'E',
     require: '^navCtrl',
-    transclude: true,
     replace: true,
     scope: true,
     template: '<header class="bar bar-header bar-dark nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' + 

js/ext/angular/src/directive/ionicSideMenu.js

@@ -33,11 +33,8 @@ angular.module('ionic.ui.sideMenu', [])
 
 .directive('sideMenuCtrl', function() {
   return {
-    restrict: 'E',
+    restrict: 'CA',
     controller: 'SideMenuCtrl',
-    replace: true,
-    transclude: true,
-    template: '<div class="view" ng-transclude></div>',
   }
 })
 
@@ -90,11 +87,11 @@ angular.module('ionic.ui.sideMenu', [])
     require: '^sideMenuCtrl',
     replace: true,
     transclude: true,
-    scope: true,
+    template: '<div class="menu menu-{{side}}"></div>',
-    template: '<div class="menu menu-{{side}}" ng-transclude></div>',
     compile: function(element, attr, transclude, sideMenuCtrl) {
       return function($scope, $element, $attr) {
         $scope.side = attr.side;
+        $element.append(transclude($scope));
       };
     }
   }

scss/ionic/_animations.scss

@@ -2,13 +2,13 @@ $bezier-function: cubic-bezier(.1, .7, .1, 1);
  
 .slide-in-up {
   // Start hidden
-  opacity: 0.5;
+  opacity: 0;
   // Start it down low
  -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
 
-  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
+  -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-  transition: -webkit-transform 0.3s, opacity 0.2s;
+  transition: -webkit-transform 0.4s, opacity 0.1s;
 
   -webkit-transition-timing-function: $bezier-function;
   transition-timing-function: $bezier-function;