Skip to content

T
todomvc
Commit dcfe69c4 authored by Addy Osmani's avatar Addy Osmani
Browse files
Options

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

AngularJS Cleanup/Edits
parents e320deed dea0f1cf
Show whitespace changes
Inline Side-by-side
Showing with 76 additions and 14 deletions
todo-example/angularjs/css/app.css
View file @ dcfe69c4
...@@ -43,6 +43,17 @@ html { ...@@ -43,6 +43,17 @@ html {
cursor:pointer; 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 { #todoapp {
width: 480px; width: 480px;
margin: 0 auto 40px; margin: 0 auto 40px;
...@@ -164,7 +175,20 @@ html { ...@@ -164,7 +175,20 @@ html {
*zoom: 1; *zoom: 1;
margin-top: 10px; margin-top: 10px;
color: #777777; 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 { #todo-stats:after {
content: "\0020"; content: "\0020";
display: block; display: block;
...@@ -183,6 +207,47 @@ html { ...@@ -183,6 +207,47 @@ html {
#todo-stats .todo-clear { #todo-stats .todo-clear {
float: right; 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 { #todo-stats .todo-clear a {
color: #777777; color: #777777;
font-size: 12px; font-size: 12px;
......
todo-example/angularjs/index.html
View file @ dcfe69c4
<!doctype html> <!doctype html>
<html xmlns:ng="http://angularjs.org/"> <html xmlns:ng="http://angularjs.org/" xmlns:my="http://rx.org">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>AngularJS Todo App</title> <title>AngularJS Todo App</title>
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<div id="todo-form"> <div id="todo-form">
</div> </div>
<form id="todo-form" ng:submit="addTodo()"> <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"> <span class="ui-tooltip-top" ng:show="showHitEnterHint">
Press Enter to save this task Press Enter to save this task
</span> </span>
...@@ -39,13 +39,13 @@ ...@@ -39,13 +39,13 @@
</div> </div>
<div id="todo-stats"> <div id="todo-stats">
<span class="todo-count" ng:show="hasTodos()"> <span class="todo-count" ng:show="hasTodos()">
<span class="number">{{ remainingTodos() }}</span> <ng:pluralize count="remainingTodos()" when="{'0' : 'No items left.', '1': '1 item left.', 'other' : '{} items left.' }">
<span class="word">items</span> left. </ng:pluralize>
</span> </span>
<span class="todo-clear" ng:show="hasFinishedTodos()"> <span class="todo-clear" ng:show="hasFinishedTodos()">
<a ng:click="clearCompletedItems()"> <a ng:click="clearCompletedItems()">
Clear <span class="number-done">{{ finishedTodos() }}</span> Clear <ng:pluralize count="finishedTodos()" when="{'1': '1 completed item', 'other' : '{} completed items' }">
completed <span class="word-done">item</span> </ng:pluralize>
</a> </a>
</span> </span>
</div> </div>
...@@ -64,16 +64,14 @@ ...@@ -64,16 +64,14 @@
Rewritten to use <a href="http://angularjs.org">AngularJS </a> by Rewritten to use <a href="http://angularjs.org">AngularJS </a> by
<br> <br>
<a href="http://cburgdorf.wordpress.com/">Christoph Burgdorf</a> <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> </p>
</div> </div>
<script src="js/booter.js"></script> <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.js"></script>
<script src="lib/rx/rx.angular.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/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/widgets.js"></script>
<script src="js/directive.js"></script> <script src="js/directive.js"></script>
</body> </body>
</html> </html>
todo-example/angularjs/js/directive.js
View file @ dcfe69c4
...@@ -10,11 +10,10 @@ angular.directive('my:blur', function(expression, compiledElement) { ...@@ -10,11 +10,10 @@ angular.directive('my:blur', function(expression, compiledElement) {
}; };
}); });
angular.directive("my:focus", function(expression, compiledElement){ angular.directive("my:focus", function(expression, compiledElement){
return function(element){ return function(element){
this.$watch(expression, function(){ this.$watch(expression, function(){
if(angular.formatter.boolean.parse(expression) && element.length > 0){ if(angular.formatter.boolean.parse(expression)){
element[0].focus(); element[0].focus();
} }
}, element); }, element);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7