Merge pull request #12 from dandoyon/angular-cleanup-branch

AngularJS Cleanup/Edits

Merge pull request #12 from dandoyon/angular-cleanup-branch
AngularJS Cleanup/Edits
dcfe69c4 · Addy Osmani · e320deed · dea0f1cf · dcfe69c4 · dcfe69c4
Commit dcfe69c4 authored Sep 19, 2011 by Addy Osmani
3 changed files
--- a/todo-example/angularjs/css/app.css
+++ b/todo-example/angularjs/css/app.css
@@ -43,6 +43,17 @@ html {
  cursor:pointer;
 }

+#todoapp {
+    background: none repeat scroll 0 0 white;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+    background: none repeat scroll 0 0 white;
+    margin: 0 auto 40px;
+    padding: 20px;
+    width: 480px;
+}
+
 #todoapp {
  width: 480px;
  margin: 0 auto 40px;
@@ -164,7 +175,20 @@ html {
  *zoom: 1;
  margin-top: 10px;
  color: #777777;
+  
+  background: none repeat scroll 0 0 #F4FCE8;
+    border-radius: 0 0 5px 5px;
+    border-top: 1px solid #EDEDED;
+    color: #555555;
+    display: block;
+    line-height: 36px;
+    margin: 20px -20px -20px;
+    overflow: hidden;
+    padding: 0 20px;
 }
+
+
+    
  #todo-stats:after {
    content: "\0020";
    display: block;
@@ -183,6 +207,47 @@ html {
  #todo-stats .todo-clear {
    float: right;
  }
+  
+  #todoapp #todo-stats {
+    background: none repeat scroll 0 0 #F4FCE8;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border-top: 1px solid #EDEDED;
+    color: #555555;
+    line-height: 36px;
+    margin-top: 10px;
+    padding: 0 20px;
+}
+
+  #todoapp #todo-stats .todo-clear a {
+	display: block;
+	line-height: 20px;
+	text-decoration: none;
+	-moz-border-radius: 12px;
+	-webkit-border-radius: 12px;
+	-o-border-radius: 12px;
+	-ms-border-radius: 12px;
+	-khtml-border-radius: 12px;
+	border-radius: 12px;
+	background: rgba(0, 0, 0, 0.1);
+	color: #555555;
+	font-size: 11px;
+	margin-top: 8px;
+	padding: 0 10px 1px;
+	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+}
+/* line 136 */
+#todoapp #todo-stats .todo-clear a:hover {
+	background: rgba(0, 0, 0, 0.15);
+	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+	-o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+	box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+}
+
    #todo-stats .todo-clear a {
      color: #777777;
      font-size: 12px;

--- a/todo-example/angularjs/index.html
+++ b/todo-example/angularjs/index.html
 <!doctype html>
-<html xmlns:ng="http://angularjs.org/">
+<html xmlns:ng="http://angularjs.org/" xmlns:my="http://rx.org">
 <head>
  <meta charset="utf-8">
  <title>AngularJS Todo App</title>
@@ -16,7 +16,7 @@
            <div id="todo-form">
            </div>
            <form id="todo-form" ng:submit="addTodo()">
-                <input id="new-todo" name="newTodo" placeholder="What needs to be done?" type="text">
+                <input id="new-todo" name="newTodo" my:blur="addTodo()" placeholder="What needs to be done?" type="text">
                <span class="ui-tooltip-top" ng:show="showHitEnterHint">
                    Press Enter to save this task
                </span>
@@ -39,13 +39,13 @@
            </div>
            <div id="todo-stats">
              <span class="todo-count" ng:show="hasTodos()">
-                <span class="number">{{ remainingTodos() }}</span>
-                <span class="word">items</span> left.
+                <ng:pluralize count="remainingTodos()" when="{'0' : 'No items left.', '1': '1 item left.', 'other' : '{} items left.' }">
+                </ng:pluralize>
              </span>
              <span class="todo-clear" ng:show="hasFinishedTodos()">
                  <a ng:click="clearCompletedItems()">
-                  Clear <span class="number-done">{{ finishedTodos() }}</span>
-                  completed <span class="word-done">item</span>
+                  	Clear <ng:pluralize count="finishedTodos()" when="{'1': '1 completed item', 'other' : '{} completed items' }">
+                  	</ng:pluralize>
                  </a>
              </span>
        </div>
@@ -64,16 +64,14 @@
            Rewritten to use <a href="http://angularjs.org">AngularJS </a> by
            <br>
            <a href="http://cburgdorf.wordpress.com/">Christoph Burgdorf</a>
+            <br>Cleanup, edits: <a href="http://www.linkedin.com/pub/dan-doyon/2/1b0/a83">Dan Doyon</a>
        </p>
    </div>
  <script src="js/booter.js"></script>
-  <script src="lib/angular/angular.js" ng:autobind></script>
+  <script src="lib/angular/angular.min.js" ng:autobind></script>
  <script src="lib/rx/rx.js"></script>
  <script src="lib/rx/rx.angular.js"></script>
-  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
-  <script src="js/filters.js"></script>
-  <script src="js/widgets.js"></script>
  <script src="js/directive.js"></script>  
 </body>
 </html>
--- a/todo-example/angularjs/js/directive.js
+++ b/todo-example/angularjs/js/directive.js
@@ -10,13 +10,12 @@ angular.directive('my:blur', function(expression, compiledElement) {
    };
 });

-
 angular.directive("my:focus", function(expression, compiledElement){
  return function(element){
    this.$watch(expression, function(){
-    if(angular.formatter.boolean.parse(expression) && element.length > 0){
-      element[0].focus();
-    } 
+      if(angular.formatter.boolean.parse(expression)){
+        element[0].focus();
+      } 
    }, element);
  };
 });