From 03f615af39ebabbbda123a0eef8ec2ec4d3b15e9 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@codiqa.com>
Date: Mon, 7 Oct 2013 00:22:11 -0500
Subject: [PATCH] Toderp working , list item styles for active state

---
 dist/ionic-ios7.css               | 93 ++++++++++++++++++++++++++++---
 dist/ionic.css                    | 89 +++++++++++++++++++++++++++--
 example/toderp2/index.html        |  2 +-
 example/toderp2/js/controllers.js | 26 ++++++---
 scss/ionic/_listview.scss         | 10 +++-
 scss/ionic/_mixins.scss           | 15 +++++
 6 files changed, 214 insertions(+), 21 deletions(-)

diff --git a/dist/ionic-ios7.css b/dist/ionic-ios7.css
index 799ec2c654..cbea98357d 100644
--- a/dist/ionic-ios7.css
+++ b/dist/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.
@@ -182,7 +181,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid silver; }
+  border: 1px solid #c0c0c0; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -1547,6 +1546,86 @@ address {
     z-index: 2; }
     .list-item.active .list-item-heading, .list-item.active:hover .list-item-heading, .list-item.active:focus .list-item-heading {
       color: inherit; }
+  .list-item.list-item-default {
+    /*
+    color: $color;
+    background-color: $bgColor;
+    border-color: $borderColor;
+    */ }
+    .list-item.list-item-default.active, .list-item.list-item-default:active {
+      color: #333333;
+      background-color: white;
+      border-color: #333333; }
+  .list-item.list-item-secondary {
+    /*
+    color: $color;
+    background-color: $bgColor;
+    border-color: $borderColor;
+    */ }
+    .list-item.list-item-secondary.active, .list-item.list-item-secondary:active {
+      color: #333333;
+      background-color: white;
+      border-color: #333333; }
+  .list-item.list-item-primary {
+    /*
+    color: $color;
+    background-color: $bgColor;
+    border-color: $borderColor;
+    */ }
+    .list-item.list-item-primary.active, .list-item.list-item-primary:active {
+      color: white;
+      background-color: #4a87ee;
+      border-color: #333333; }
+  .list-item.list-item-info {
+    /*
+    color: $color;
+    background-color: $bgColor;
+    border-color: $borderColor;
+    */ }
+    .list-item.list-item-info.active, .list-item.list-item-info:active {
+      color: white;
+      background-color: #43cee6;
+      border-color: #333333; }
+  .list-item.list-item-success {
+    /*
+    color: $color;
+    background-color: $bgColor;
+    border-color: $borderColor;
+    */ }
+    .list-item.list-item-success.active, .list-item.list-item-success:active {
+      color: white;
+      background-color: #66cc33;
+      border-color: #333333; }
+  .list-item.list-item-warning {
+    /*
+    color: $color;
+    background-color: $bgColor;
+    border-color: $borderColor;
+    */ }
+    .list-item.list-item-warning.active, .list-item.list-item-warning:active {
+      color: white;
+      background-color: #f0b840;
+      border-color: #333333; }
+  .list-item.list-item-danger {
+    /*
+    color: $color;
+    background-color: $bgColor;
+    border-color: $borderColor;
+    */ }
+    .list-item.list-item-danger.active, .list-item.list-item-danger:active {
+      color: white;
+      background-color: #ef4e3a;
+      border-color: #333333; }
+  .list-item.list-item-dark {
+    /*
+    color: $color;
+    background-color: $bgColor;
+    border-color: $borderColor;
+    */ }
+    .list-item.list-item-dark.active, .list-item.list-item-dark:active {
+      color: white;
+      background-color: #444444;
+      border-color: #333333; }
 
 a.list-item {
   color: #333333;
@@ -1768,7 +1847,7 @@ select:focus,
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus {
-  outline: thin dotted #333333;
+  outline: thin dotted #333;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px; }
 
@@ -1855,7 +1934,7 @@ input[type="checkbox"][readonly] {
   right: 20px;
   transition: 0.2s ease;
   transition-property: left, right;
-  transition-delay: 0s, 0.05s; }
+  transition-delay: 0s, .05s; }
 
 .toggle :checked + .track {
   /* When the toggle is "on" */
@@ -1870,7 +1949,7 @@ input[type="checkbox"][readonly] {
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: 0.05s, 0s; }
+    transition-delay: .05s, 0s; }
 
 /* hide a radio button's icon by default */
 .radio-item [class^="icon-"],
@@ -2095,7 +2174,7 @@ input[type="checkbox"][readonly] {
     border: none;
     background: none; }
     .button.button-icon:active, .button.button-icon.active {
-      text-shadow: 0px 0px 10px white;
+      text-shadow: 0px 0px 10px #fff;
       box-shadow: none;
       background: none; }
 
@@ -2278,7 +2357,7 @@ a.button {
   width: 100%;
   background-color: white;
   border-radius: 2px;
-  border: 1px solid #dddddd; }
+  border: 1px solid #ddd; }
 
 .card-header {
   padding: 10px;
diff --git a/dist/ionic.css b/dist/ionic.css
index 50f13fd568..597134ae4e 100644
--- a/dist/ionic.css
+++ b/dist/ionic.css
@@ -1,4 +1,3 @@
-@charset "UTF-8";
 @font-face {
   font-family: 'ionicon-test';
   src: url("fonts/ionicon-test.eot");
@@ -247,7 +246,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid silver; }
+  border: 1px solid #c0c0c0; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -1635,6 +1634,86 @@ address {
     z-index: 2; }
     .list-item.active .list-item-heading, .list-item.active:hover .list-item-heading, .list-item.active:focus .list-item-heading {
       color: inherit; }
+  .list-item.list-item-default {
+    /*
+    color: $color;
+    background-color: $bgColor;
+    border-color: $borderColor;
+    */ }
+    .list-item.list-item-default.active, .list-item.list-item-default:active {
+      color: #333333;
+      background-color: white;
+      border-color: #333333; }
+  .list-item.list-item-secondary {
+    /*
+    color: $color;
+    background-color: $bgColor;
+    border-color: $borderColor;
+    */ }
+    .list-item.list-item-secondary.active, .list-item.list-item-secondary:active {
+      color: #333333;
+      background-color: white;
+      border-color: #333333; }
+  .list-item.list-item-primary {
+    /*
+    color: $color;
+    background-color: $bgColor;
+    border-color: $borderColor;
+    */ }
+    .list-item.list-item-primary.active, .list-item.list-item-primary:active {
+      color: white;
+      background-color: #4a87ee;
+      border-color: #333333; }
+  .list-item.list-item-info {
+    /*
+    color: $color;
+    background-color: $bgColor;
+    border-color: $borderColor;
+    */ }
+    .list-item.list-item-info.active, .list-item.list-item-info:active {
+      color: white;
+      background-color: #43cee6;
+      border-color: #333333; }
+  .list-item.list-item-success {
+    /*
+    color: $color;
+    background-color: $bgColor;
+    border-color: $borderColor;
+    */ }
+    .list-item.list-item-success.active, .list-item.list-item-success:active {
+      color: white;
+      background-color: #66cc33;
+      border-color: #333333; }
+  .list-item.list-item-warning {
+    /*
+    color: $color;
+    background-color: $bgColor;
+    border-color: $borderColor;
+    */ }
+    .list-item.list-item-warning.active, .list-item.list-item-warning:active {
+      color: white;
+      background-color: #f0b840;
+      border-color: #333333; }
+  .list-item.list-item-danger {
+    /*
+    color: $color;
+    background-color: $bgColor;
+    border-color: $borderColor;
+    */ }
+    .list-item.list-item-danger.active, .list-item.list-item-danger:active {
+      color: white;
+      background-color: #ef4e3a;
+      border-color: #333333; }
+  .list-item.list-item-dark {
+    /*
+    color: $color;
+    background-color: $bgColor;
+    border-color: $borderColor;
+    */ }
+    .list-item.list-item-dark.active, .list-item.list-item-dark:active {
+      color: white;
+      background-color: #444444;
+      border-color: #333333; }
 
 a.list-item {
   color: #333333;
@@ -1856,7 +1935,7 @@ select:focus,
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus {
-  outline: thin dotted #333333;
+  outline: thin dotted #333;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px; }
 
@@ -2177,7 +2256,7 @@ input[type="checkbox"][readonly] {
     border: none;
     background: none; }
     .button.button-icon:active, .button.button-icon.active {
-      text-shadow: 0px 0px 10px white;
+      text-shadow: 0px 0px 10px #fff;
       box-shadow: none;
       background: none; }
 
@@ -2360,7 +2439,7 @@ a.button {
   width: 100%;
   background-color: white;
   border-radius: 2px;
-  border: 1px solid #dddddd; }
+  border: 1px solid #ddd; }
 
 .card-header {
   padding: 10px;
diff --git a/example/toderp2/index.html b/example/toderp2/index.html
index 200198aead..8b736171a3 100644
--- a/example/toderp2/index.html
+++ b/example/toderp2/index.html
@@ -136,7 +136,7 @@
               <input type="text" ng-model="newProject.title" placeholder="Create a new list...">
             </form>
             <list>
-              <a ng-click="setActiveProject(project)" class="list-item" ng-repeat="project in projects">
+            <a ng-click="setActiveProject(project)" class="list-item list-item-primary" ng-class="{active: project.isActive}" ng-repeat="project in projects">
                 {{project.title}}
               </a>
             </list>
diff --git a/example/toderp2/js/controllers.js b/example/toderp2/js/controllers.js
index 2408c8811b..03b92802c5 100644
--- a/example/toderp2/js/controllers.js
+++ b/example/toderp2/js/controllers.js
@@ -91,12 +91,16 @@ angular.module('ionic.todo.controllers', ['ionic.todo'])
     if(!$scope.activeProject.tasks) {
       $scope.activeProject.tasks = [];
     }
-    $scope.activeProject.tasks.push({
+    $scope.activeProject.tasks.add({
       title: task.title,
       user_id: $scope.user.id,
       isCompleted: false
     });
 
+    // Set the priorty for this project to the new date, so it will
+    // sort higher
+    $scope.activeProject.project.setPriority(+new Date);
+
     $scope.newTask = {};
   };
 
@@ -104,12 +108,17 @@ angular.module('ionic.todo.controllers', ['ionic.todo'])
    * Set the current project
    */
   $scope.setActiveProject = function(project) {
+    // Grab the ref. It's the object on new project, and the $ref
+    // object on exist (for example, from the ng-repeat)
+    var ref = project;
     if(project.$ref) {
-      $scope.activeProject = angularFire(project.$ref, $scope, 'activeProject');
-    } else {
-      $scope.activeProject = angularFire(project, $scope, 'activeProject');
+      ref = project.$ref;
     }
-    //$scope.lastProject = project;
+    $scope.activeProject = {
+      project: ref,
+      title: project.title,
+      tasks: angularFireCollection(ref.child('tasks'))
+    };
   }
 
   /**
@@ -119,7 +128,8 @@ angular.module('ionic.todo.controllers', ['ionic.todo'])
     var p = {
       title: newProject.title,
       user_id: $scope.user.id,
-      tasks: []
+      tasks: [],
+      isActive: true
     };
 
     console.log("Adding project:", p);
@@ -128,7 +138,9 @@ angular.module('ionic.todo.controllers', ['ionic.todo'])
     // Reset the form
     $scope.newProject = {};
 
-    $scope.setActiveProject($scope.projects.add(p));
+    var np = $scope.projects.add(p);
+    np.setPriority(+new Date);
+    $scope.setActiveProject(np);
   };
 
   $scope.projects = angularFireCollection(new Firebase(FIREBASE_URL + '/project_list'), function(snapshot) {
diff --git a/scss/ionic/_listview.scss b/scss/ionic/_listview.scss
index 8e08ae98f9..4d86763384 100644
--- a/scss/ionic/_listview.scss
+++ b/scss/ionic/_listview.scss
@@ -52,7 +52,7 @@
   &.active,
   &.active:hover,
   &.active:focus {
-    z-index: 2; // Place active items above their siblings for proper border styling
+    z-index: 2; 
     //color: $list-group-active-color;
     //background-color: $list-group-active-bg;
     //border-color: $list-group-active-border;
@@ -66,6 +66,14 @@
     }
   }
 
+  &.list-item-default { @include list-item-style-active($brand-default, $gray-dark, $gray-dark); }
+  &.list-item-secondary { @include list-item-style-active($brand-default, $gray-dark, $gray-dark); }
+  &.list-item-primary { @include list-item-style-active($brand-primary, $gray-dark, $white); }
+  &.list-item-info { @include list-item-style-active($brand-info, $gray-dark, $white); }
+  &.list-item-success { @include list-item-style-active($brand-success, $gray-dark, $white); }
+  &.list-item-warning { @include list-item-style-active($brand-warning, $gray-dark, $white); }
+  &.list-item-danger { @include list-item-style-active($brand-danger, $gray-dark, $white); }
+  &.list-item-dark { @include list-item-style-active($brand-dark, $gray-dark, $white); }
 }
 
 // Linked list items
diff --git a/scss/ionic/_mixins.scss b/scss/ionic/_mixins.scss
index 6666e7ff4c..0ad22c562c 100644
--- a/scss/ionic/_mixins.scss
+++ b/scss/ionic/_mixins.scss
@@ -70,6 +70,21 @@
 	}
 }
 
+//$bgColor, $borderColor, $color, 
+@mixin list-item-style-active($activeBgColor, $activeBorderColor, $activeColor) {
+  /*
+  color: $color;
+  background-color: $bgColor;
+  border-color: $borderColor;
+  */
+
+  &.active, &:active {
+    color: $activeColor;
+    background-color: $activeBgColor;
+    border-color: $activeBorderColor;
+  }
+};
+
 @mixin bar-style($bgColor, $borderColor, $color) {
   background-color: $bgColor;
   border-color: $borderColor;