| OLD | NEW |
|---|
| 1 Content-Type: text/plain | 1 Content-Type: text/plain |
| 2 <html lang="en"><head><style>template { display: none; }</style> | 2 <html lang="en"><head><style>template { display: none; }</style> |
| 3 <!-- | 3 <!-- |
| 4 This test runs the TodoMVC app and evaluates that it renders correctly. | 4 This test runs the TodoMVC app and evaluates that it renders correctly. |
| 5 --> | 5 --> |
| 6 <meta charset="utf-8"> | 6 <meta charset="utf-8"> |
| 7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | 7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| 8 | 8 |
| 9 <link rel="stylesheet" href="../../../web/base.css"> | 9 <link rel="stylesheet" href="../../../web/base.css"> |
| 10 <script src="../../packages/polymer/testing/testing.js"></script> | 10 <script src="../../packages/polymer/testing/testing.js"></script> |
| 11 <title>Dart • TodoMVC</title> | 11 <title>Dart • TodoMVC</title> |
| 12 <style>template, | 12 <style>template, |
| 13 thead[template], | 13 thead[template], |
| 14 tbody[template], | 14 tbody[template], |
| 15 tfoot[template], | 15 tfoot[template], |
| 16 th[template], | 16 th[template], |
| 17 tr[template], | 17 tr[template], |
| 18 td[template], | 18 td[template], |
| 19 caption[template], | 19 caption[template], |
| 20 colgroup[template], | 20 colgroup[template], |
| 21 col[template], | 21 col[template], |
| 22 option[template] { | 22 option[template] { |
| 23 display: none; | 23 display: none; |
| 24 }</style></head><body><polymer-element name="todo-row" extends="li" attributes="
todo"> | 24 }</style></head><body><polymer-element name="todo-row" extends="li" attributes="
todo"> |
| 25 <template> | 25 <template> |
| 26 | 26 <style scoped=""> |
| 27 <style> | |
| 28 .todo-item { | 27 .todo-item { |
| 29 position: relative; | 28 position: relative; |
| 30 font-size: 24px; | 29 font-size: 24px; |
| 31 border-bottom: 1px dotted #ccc; | 30 border-bottom: 1px dotted #ccc; |
| 32 } | 31 } |
| 32 |
| 33 .todo-item.editing { | 33 .todo-item.editing { |
| 34 border-bottom: none; | 34 border-bottom: none; |
| 35 padding: 0; | 35 padding: 0; |
| 36 } | 36 } |
| 37 |
| 38 /* |
| 39 TODO(jmesserly): the ".todo-item label" selector does not work with real |
| 40 ShadowRoot because it crosses the shadow boundary. |
| 41 */ |
| 37 .todo-item.completed [is=editable-label] { | 42 .todo-item.completed [is=editable-label] { |
| 38 color: #a9a9a9; | 43 color: #a9a9a9; |
| 39 text-decoration: line-through; | 44 text-decoration: line-through; |
| 40 } | 45 } |
| 46 |
| 41 .todo-item .toggle { | 47 .todo-item .toggle { |
| 42 text-align: center; | 48 text-align: center; |
| 43 width: 40px; | 49 width: 40px; |
| 50 /* auto, since non-WebKit browsers don't support input styling */ |
| 44 height: auto; | 51 height: auto; |
| 45 position: absolute; | 52 position: absolute; |
| 46 top: 0; | 53 top: 0; |
| 47 bottom: 0; | 54 bottom: 0; |
| 48 margin: auto 0; | 55 margin: auto 0; |
| 49 border: none; | 56 border: none; /* Mobile Safari */ |
| 50 -webkit-appearance: none; | 57 -webkit-appearance: none; |
| 58 /*-moz-appearance: none;*/ |
| 51 -ms-appearance: none; | 59 -ms-appearance: none; |
| 52 -o-appearance: none; | 60 -o-appearance: none; |
| 53 appearance: none; | 61 appearance: none; |
| 54 } | 62 } |
| 63 |
| 55 .todo-item .toggle:after { | 64 .todo-item .toggle:after { |
| 56 content: "✔"; | 65 content: '✔'; |
| 57 line-height: 43px; | 66 line-height: 43px; /* 40 + a couple of pixels visual adjustment */ |
| 58 font-size: 20px; | 67 font-size: 20px; |
| 59 color: #d9d9d9; | 68 color: #d9d9d9; |
| 60 text-shadow: 0 -1px 0 #bfbfbf; | 69 text-shadow: 0 -1px 0 #bfbfbf; |
| 61 } | 70 } |
| 71 |
| 62 .todo-item .toggle:checked:after { | 72 .todo-item .toggle:checked:after { |
| 63 color: #85ada7; | 73 color: #85ada7; |
| 64 text-shadow: 0 1px 0 #669991; | 74 text-shadow: 0 1px 0 #669991; |
| 65 bottom: 1px; | 75 bottom: 1px; |
| 66 position: relative; | 76 position: relative; |
| 67 } | 77 } |
| 68 .todo-item .destroy { | 78 .todo-item .destroy { |
| 69 display: none; | 79 display: none; |
| 70 position: absolute; | 80 position: absolute; |
| 71 top: 0; | 81 top: 0; |
| 72 right: 10px; | 82 right: 10px; |
| 73 bottom: 0; | 83 bottom: 0; |
| 74 width: 40px; | 84 width: 40px; |
| 75 height: 40px; | 85 height: 40px; |
| 76 margin: auto 0; | 86 margin: auto 0; |
| 77 font-size: 22px; | 87 font-size: 22px; |
| 78 color: #a88a8a; | 88 color: #a88a8a; |
| 79 -webkit-transition: all 0.2s; | 89 -webkit-transition: all 0.2s; |
| 80 -moz-transition: all 0.2s; | 90 -moz-transition: all 0.2s; |
| 81 -ms-transition: all 0.2s; | 91 -ms-transition: all 0.2s; |
| 82 -o-transition: all 0.2s; | 92 -o-transition: all 0.2s; |
| 83 transition: all 0.2s; | 93 transition: all 0.2s; |
| 84 } | 94 } |
| 95 |
| 85 .todo-item .destroy:hover { | 96 .todo-item .destroy:hover { |
| 86 text-shadow: 0 0 1px #000, 0 0 10px rgba(199, 107, 107, 0.8); | 97 text-shadow: 0 0 1px #000, |
| 98 0 0 10px rgba(199, 107, 107, 0.8); |
| 87 -webkit-transform: scale(1.3); | 99 -webkit-transform: scale(1.3); |
| 88 -moz-transform: scale(1.3); | 100 -moz-transform: scale(1.3); |
| 89 -ms-transform: scale(1.3); | 101 -ms-transform: scale(1.3); |
| 90 -o-transform: scale(1.3); | 102 -o-transform: scale(1.3); |
| 91 transform: scale(1.3); | 103 transform: scale(1.3); |
| 92 } | 104 } |
| 105 |
| 93 .todo-item .destroy:after { | 106 .todo-item .destroy:after { |
| 94 content: "✖"; | 107 content: '✖'; |
| 95 } | 108 } |
| 109 |
| 96 .todo-item:hover .destroy { | 110 .todo-item:hover .destroy { |
| 97 display: block; | 111 display: block; |
| 98 } | 112 } |
| 99 .todo-item.editing .destroy, .todo-item.editing .toggle { | 113 |
| 114 .todo-item.editing .destroy, |
| 115 .todo-item.editing .toggle { |
| 100 display: none; | 116 display: none; |
| 101 } | 117 } |
| 118 |
| 102 .todo-item.editing:last-child { | 119 .todo-item.editing:last-child { |
| 103 margin-bottom: -1px; | 120 margin-bottom: -1px; |
| 104 } @media screen AND (-webkit-min-device-pixel-ratio:0) { | |
| 105 .todo-item .toggle { | |
| 106 background: none; | |
| 107 } | 121 } |
| 108 #todo-item .toggle { | 122 |
| 109 height: 40px; | 123 /* |
| 124 Hack to remove background from Mobile Safari. |
| 125 Can't use it globally since it destroys checkboxes in Firefox and Opera |
| 126 */ |
| 127 @media screen and (-webkit-min-device-pixel-ratio:0) { |
| 128 .todo-item .toggle { |
| 129 background: none; |
| 130 } |
| 131 #todo-item .toggle { |
| 132 height: 40px; |
| 133 } |
| 110 } | 134 } |
| 111 } | 135 </style> |
| 112 </style><div class="todo-item"> | 136 <div class="todo-item"> |
| 113 <input class="toggle" type="checkbox" checked="{{todo.done}}"> | 137 <input class="toggle" type="checkbox" checked="{{todo.done}}"> |
| 114 <div is="editable-label" id="label" value="{{todo.task}}"></div> | 138 <span is="editable-label" id="label" value="{{todo.task}}"></span> |
| 115 <button class="destroy" on-click="removeTodo"></button> | 139 <button class="destroy" on-click="removeTodo"></button> |
| 116 </div> | 140 </div> |
| 117 </template> | 141 </template> |
| 118 | 142 |
| 119 </polymer-element> | 143 </polymer-element> |
| 120 <polymer-element name="todo-app"> | 144 <polymer-element name="todo-app"> |
| 121 <template> | 145 <template> |
| 122 <section id="todoapp"> | 146 <section id="todoapp"> |
| 123 <header id="header"> | 147 <header id="header"> |
| 124 <h1 class="title">todos</h1> | 148 <h1 class="title">todos</h1> |
| 125 <form on-submit="addTodo"> | 149 <form on-submit="addTodo"> |
| 126 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> | 150 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> |
| 127 </form> | 151 </form> |
| 128 </header> | 152 </header> |
| 129 <section id="main"> | 153 <section id="main"> |
| 130 <input id="toggle-all" type="checkbox" checked="{{app.allChecked}}"> | 154 <input id="toggle-all" type="checkbox" checked="{{app.allChecked}}"> |
| 131 <label for="toggle-all"></label> | 155 <label for="toggle-all"></label> |
| 132 <ul id="todo-list"> | 156 <ul id="todo-list"> |
| 133 <template repeat="{{app.visibleTodos}}"> | 157 <template repeat="{{app.visibleTodos}}"> |
| 134 <li is="todo-row" todo="{{}}"></li> | 158 <li is="todo-row" todo="{{}}"></li> |
| 135 </template> | 159 </template> |
| 136 </ul> | 160 </ul> |
| 137 </section> | 161 </section> |
| 138 <template bind="" if="{{app.hasTodos}}"> | 162 <template bind="" if="{{app.todos.length > 0}}"> |
| 139 <footer id="footer"> | 163 <footer id="footer"> |
| 140 <span id="todo-count"><strong>{{app.remaining}}</strong></span> | 164 <span id="todo-count"><strong>{{app.remaining}}</strong></span> |
| 141 <ul is="router-options" id="filters"> | 165 <ul is="router-options" id="filters"> |
| 142 <li> <a href="#/">All</a> </li> | 166 <li> <a href="#/">All</a> </li> |
| 143 <li> <a href="#/active">Active</a> </li> | 167 <li> <a href="#/active">Active</a> </li> |
| 144 <li> <a href="#/completed">Completed</a> </li> | 168 <li> <a href="#/completed">Completed</a> </li> |
| 145 </ul> | 169 </ul> |
| 146 <template bind="" if="{{app.hasCompleteTodos}}"> | 170 <template bind="" if="{{app.hasCompleteTodos}}"> |
| 147 <button id="clear-completed" on-click="clear"> | 171 <button id="clear-completed" on-click="clear"> |
| 148 Clear completed ({{app.doneCount}}) | 172 Clear completed ({{app.doneCount}}) |
| (...skipping 13 matching lines...) Expand all Loading... |
| 162 </p> | 186 </p> |
| 163 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> | 187 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> |
| 164 </footer> | 188 </footer> |
| 165 </template> | 189 </template> |
| 166 | 190 |
| 167 </polymer-element> | 191 </polymer-element> |
| 168 <polymer-element name="router-options" extends="ul"> | 192 <polymer-element name="router-options" extends="ul"> |
| 169 <template><content></content></template> | 193 <template><content></content></template> |
| 170 | 194 |
| 171 </polymer-element> | 195 </polymer-element> |
| 172 <polymer-element name="editable-label" extends="div" attributes="value"> | 196 <polymer-element name="editable-label" attributes="value"> |
| 173 <template> | 197 <template> |
| 174 <template bind="" if="{{notEditing}}"> | 198 <template bind="" if="{{!editing}}"> |
| 175 <label class="edit-label" on-double-click="edit">{{value}}</label> | 199 <label class="edit-label" on-double-click="edit">{{value}}</label> |
| 176 </template> | 200 </template> |
| 177 <template bind="" if="{{editing}}"> | 201 <template bind="" if="{{editing}}"> |
| 178 <form on-submit="update"> | 202 <form on-submit="update"> |
| 179 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> | 203 <input id="edit" class="edit editing" on-blur="update" on-key-up="maybeC
ancel"> |
| 180 </form> | 204 </form> |
| 181 </template> | 205 </template> |
| 182 </template> | 206 </template> |
| 183 | 207 |
| 184 </polymer-element> | 208 </polymer-element> |
| 185 | 209 |
| 186 <span is="todo-app"><shadow-root> | 210 <span is="todo-app"><shadow-root> |
| 187 <section id="todoapp"> | 211 <section id="todoapp"> |
| 188 <header id="header"> | 212 <header id="header"> |
| 189 <h1 class="title">todos</h1> | 213 <h1 class="title">todos</h1> |
| 190 <form on-submit="addTodo"> | 214 <form on-submit="addTodo"> |
| 191 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> | 215 <input id="new-todo" placeholder="What needs to be done?" autofocus="" o
n-change="addTodo"> |
| 192 </form> | 216 </form> |
| 193 </header> | 217 </header> |
| 194 <section id="main"> | 218 <section id="main"> |
| 195 <input id="toggle-all" type="checkbox"> | 219 <input id="toggle-all" type="checkbox"> |
| 196 <label for="toggle-all"></label> | 220 <label for="toggle-all"></label> |
| 197 <ul id="todo-list"> | 221 <ul id="todo-list"> |
| 198 <template repeat="{{app.visibleTodos}}"> | 222 <template repeat="{{app.visibleTodos}}"></template> |
| 199 <li is="todo-row" todo="{{}}"></li> | |
| 200 </template> | |
| 201 </ul> | 223 </ul> |
| 202 </section> | 224 </section> |
| 203 <template bind="" if="{{app.hasTodos}}"> | 225 <template bind="" if="{{app.todos.length > 0}}"></template> |
| 204 <footer id="footer"> | |
| 205 <span id="todo-count"><strong>{{app.remaining}}</strong></span> | |
| 206 <ul is="router-options" id="filters"> | |
| 207 <li> <a href="#/">All</a> </li> | |
| 208 <li> <a href="#/active">Active</a> </li> | |
| 209 <li> <a href="#/completed">Completed</a> </li> | |
| 210 </ul> | |
| 211 <template bind="" if="{{app.hasCompleteTodos}}"> | |
| 212 <button id="clear-completed" on-click="clear"> | |
| 213 Clear completed ({{app.doneCount}}) | |
| 214 </button> | |
| 215 </template> | |
| 216 </footer> | |
| 217 </template> | |
| 218 </section> | 226 </section> |
| 219 <footer id="info"> | 227 <footer id="info"> |
| 220 <p>Double-click to edit a todo.</p> | 228 <p>Double-click to edit a todo.</p> |
| 221 <p>Credits: the <a href="http://www.dartlang.org">Dart</a> team.</p> | 229 <p>Credits: the <a href="http://www.dartlang.org">Dart</a> team.</p> |
| 222 <p> | 230 <p> |
| 223 Learn more about | 231 Learn more about |
| 224 <a href="https://www.dartlang.org/articles/dart-web-components/">Dart + We
b Components</a> | 232 <a href="https://www.dartlang.org/articles/dart-web-components/">Dart + We
b Components</a> |
| 225 or | 233 or |
| 226 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. | 234 <a href="https://github.com/dart-lang/web-ui/tree/master/example/todomvc">
view the source</a>. |
| 227 </p> | 235 </p> |
| 228 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> | 236 <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p> |
| 229 </footer> | 237 </footer> |
| 230 </shadow-root></span> | 238 </shadow-root></span> |
| 231 | 239 |
| 232 | 240 |
| 233 | 241 |
| 234 <script type="text/javascript" src="packages/shadow_dom/shadow_dom.debug.js"></s
cript> | 242 <script type="text/javascript" src="packages/shadow_dom/shadow_dom.debug.js"></s
cript> |
| 235 <script type="application/dart" src="todomvc_mainpage_test.html_bootstrap.dart">
</script></body></html> | 243 <script type="application/dart" src="todomvc_mainpage_test.html_bootstrap.dart">
</script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 22962005:
Merge pull request #581 from kevmoo/polymer (Closed)
Base URL: https://github.com/dart-lang/web-ui.git@polymer