Skip to content

T
todomvc
Commit 751c5f81 authored by James Thomas's avatar James Thomas
Browse files
Options

Moving across to new template

parent 2b194cd9
Hide whitespace changes
Inline Side-by-side
Showing with 89 additions and 614 deletions
architecture-examples/dojo/css/app.css 0 → 100644
View file @ 751c5f81
#todo-list li .toggle.dijitChecked:after {
color: #85ada7;
text-shadow: 0 1px 0 #669991;
bottom: 1px;
position: relative;
}
/* When checkbox is selected, score through todo item content */
.dijitCheckBoxChecked + .todo-content {
color: #666;
text-decoration: line-through;
}
/* When checkbox is selected, score through todo item content after an edit */
.dijitCheckBoxChecked + .dijitInline + .todo-content {
color: #666;
text-decoration: line-through;
}
.claro .dijitCheckBox, .claro .dijitCheckBoxIcon {
background-image: none;
}
/* Need to have the background-image on IE */
.dj_ie .claro .dijitCheckBox, .claro .dijitCheckBoxIcon {
background-image: url("form/images/checkboxRadioButtonStates.png");
}
#todo-list .dijitCheckBoxInput {
opacity: 0;
position: absolute;
top: 14px;
z-index: 10;
}
architecture-examples/dojo/css/todos.css deleted 100644 → 0
View file @ 2b194cd9
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
a img {
border: none;
}
html {
background: #eeeeee;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.4em;
background: #eeeeee;
color: #333333;
}
#todoapp {
width: 480px;
margin: 0 auto 40px;
background: white;
padding: 20px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
}
#todoapp h1 {
font-size: 36px;
font-weight: bold;
text-align: center;
padding: 20px 0 30px 0;
line-height: 1;
}
.create-todo {
position: relative;
}
.create-todo input {
width: 466px;
font-size: 24px;
font-family: inherit;
line-height: 1.4em;
border: 0;
outline: none;
padding: 6px;
border: 1px solid #999999;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
}
.create-todo span {
position: absolute;
z-index: 999;
width: 170px;
left: 50%;
margin-left: -85px;
}
.todo-list {
margin-top: 10px;
}
.todo-list li {
padding: 12px 20px 11px 0;
position: relative;
font-size: 24px;
line-height: 1.1em;
border-bottom: 1px solid #cccccc;
}
.todo-list li:after {
content: "\0020";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
.todo-list li.editing {
padding: 0;
border-bottom: 0;
}
.todo-list .editing .display,
.todo-list .edit {
display: none;
}
.todo-list .editing .edit {
display: block;
}
.todo-list .editing input {
width: 444px;
font-size: 24px;
font-family: inherit;
margin: 0;
line-height: 1.6em;
border: 0;
outline: none;
padding: 10px 7px 0px 27px;
border: 1px solid #999999;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
}
.todo-list .check {
position: relative;
top: 11px;
margin: 0 10px 0 7px;
float: left;
}
.todo-list .done .todo-content {
text-decoration: line-through;
color: #777777;
}
.todo-list .todo-destroy {
position: absolute;
right: 5px;
top: 14px;
display: none;
cursor: pointer;
width: 20px;
height: 20px;
background: url(destroy.png) no-repeat 0 0;
}
.todo-list li:hover .todo-destroy {
display: block;
}
.todo-list .todo-destroy:hover {
background-position: 0 -20px;
}
.todo-stats {
*zoom: 1;
margin-top: 10px;
color: #777777;
display: none;
}
.todo-stats.items_present {
display: block;
}
.todo-stats:after {
content: "\0020";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
.todo-stats .todo-count {
float: left;
}
.todo-stats .todo-count .number {
font-weight: bold;
color: #333333;
}
.todo-stats .todo-clear {
float: right;
display: none
}
.todo-stats.items_selected .todo-clear {
display: inline;
}
.todo-stats .todo-clear a {
color: #777777;
font-size: 12px;
}
.todo-stats .todo-clear a:visited {
color: #777777;
}
.todo-stats .todo-clear a:hover {
color: #336699;
}
#instructions {
width: 520px;
margin: 10px auto;
color: #777777;
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
text-align: center;
}
#instructions a {
color: #336699;
}
#credits {
width: 520px;
margin: 30px auto;
color: #999;
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
text-align: center;
}
#credits a {
color: #888;
}
/*
* François 'cahnory' Germain
*/
.ui-tooltip, .ui-tooltip-top, .ui-tooltip-right, .ui-tooltip-bottom, .ui-tooltip-left {
color:#ffffff;
cursor:normal;
display:-moz-inline-stack;
display:inline-block;
font-size:12px;
font-family:arial;
padding:.5em 1em;
position:relative;
text-align:center;
text-shadow:0 -1px 1px #111111;
-webkit-border-top-left-radius:4px ;
-webkit-border-top-right-radius:4px ;
-webkit-border-bottom-right-radius:4px ;
-webkit-border-bottom-left-radius:4px ;
-khtml-border-top-left-radius:4px ;
-khtml-border-top-right-radius:4px ;
-khtml-border-bottom-right-radius:4px ;
-khtml-border-bottom-left-radius:4px ;
-moz-border-radius-topleft:4px ;
-moz-border-radius-topright:4px ;
-moz-border-radius-bottomright:4px ;
-moz-border-radius-bottomleft:4px ;
border-top-left-radius:4px ;
border-top-right-radius:4px ;
border-bottom-right-radius:4px ;
border-bottom-left-radius:4px ;
-o-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
-moz-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
-khtml-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
-webkit-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
background-color:#3b3b3b;
background-image:-moz-linear-gradient(top,#555555,#222222);
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#555555),color-stop(1,#222222));
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222);
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222);
}
.ui-tooltip:after, .ui-tooltip-top:after, .ui-tooltip-right:after, .ui-tooltip-bottom:after, .ui-tooltip-left:after {
content:"\25B8";
display:block;
font-size:2em;
height:0;
line-height:0;
position:absolute;
}
.ui-tooltip:after, .ui-tooltip-bottom:after {
color:#2a2a2a;
bottom:0;
left:1px;
text-align:center;
text-shadow:1px 0 2px #000000;
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-khtml-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
width:100%;
}
.ui-tooltip-top:after {
bottom:auto;
color:#4f4f4f;
left:-2px;
top:0;
text-align:center;
text-shadow:none;
-o-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-khtml-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
width:100%;
}
.ui-tooltip-right:after {
color:#222222;
right:-0.375em;
top:50%;
margin-top:-.05em;
text-shadow:0 1px 2px #000000;
-o-transform:rotate(0);
-moz-transform:rotate(0);
-khtml-transform:rotate(0);
-webkit-transform:rotate(0);
}
.ui-tooltip-left:after {
color:#222222;
left:-0.375em;
top:50%;
margin-top:.1em;
text-shadow:0 -1px 2px #000000;
-o-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-khtml-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}
/*the following changes require some cleanup and integration with the above.**/
/* line 9 */
/* line 17 */
#todoapp {
background: white;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-o-border-bottom-left-radius: 5px;
-ms-border-bottom-left-radius: 5px;
-khtml-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-o-border-bottom-right-radius: 5px;
-ms-border-bottom-right-radius: 5px;
-khtml-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
}
/* line 24 */
/* line 32 */
#todoapp .content .create-todo {
position: relative;
}
/* line 34 */
#todoapp .content .create-todo input {
font-size: 24px;
font-family: inherit;
line-height: 1.4em;
border: 0;
outline: none;
padding: 6px;
border: 1px solid #999999;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
}
/* line 47 */
#todoapp .content .create-todo span {
position: absolute;
z-index: 999;
width: 170px;
left: 50%;
margin-left: -85px;
opacity: 0;
}
/* line 55 */
#todoapp .content ul.todo-list {
margin-top: 10px;
}
/* line 57 */
#todoapp .content ul.todo-list li {
padding: 15px 20px 15px 0;
position: relative;
font-size: 24px;
border-bottom: 1px solid #cccccc;
*zoom: 1;
}
/* line 22, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
#todoapp .content ul.todo-list li:after {
content: "\0020";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
/* line 64 */
#todoapp .content ul.todo-list li.editing {
padding: 0;
border-bottom: 0;
}
/* line 67 */
#todoapp .content ul.todo-list li.editing .todo-input {
display: block;
width: 466px;
font-size: 24px;
font-family: inherit;
line-height: 1.4em;
border: 0;
outline: none;
padding: 6px;
border: 1px solid #999999;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
}
/* line 79 */
#todoapp .content ul.todo-list li.editing .todo-content {
display: none;
}
/* line 81 */
#todoapp .content ul.todo-list li.editing .todo-check {
display: none;
}
/* line 83 */
#todoapp .content ul.todo-list li.editing .todo-destroy {
display: none !important;
}
/* line 85 */
#todoapp .content ul.todo-list li .todo-input {
display: none;
}
/* line 87 */
#todoapp .content ul.todo-list li .todo-check {
position: relative;
top: 6px;
margin: 0 10px 0 7px;
float: left;
}
/* line 93 */
#todoapp .content ul.todo-list li.done .todo-content {
text-decoration: line-through;
color: #777777;
}
/* line 96 */
#todoapp .content ul.todo-list li .todo-destroy {
position: absolute;
right: 0px;
top: 22px;
display: none;
cursor: pointer;
width: 20px;
height: 20px;
}
/* line 106 */
#todoapp .content ul.todo-list li:hover .todo-destroy {
display: block;
}
/* line 109 */
#todoapp .todo-stats {
*zoom: 1;
margin-top: 10px;
color: #555555;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-o-border-bottom-left-radius: 5px;
-ms-border-bottom-left-radius: 5px;
-khtml-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-o-border-bottom-right-radius: 5px;
-ms-border-bottom-right-radius: 5px;
-khtml-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
background: #f4fce8;
border-top: 1px solid #ededed;
padding: 0 20px;
line-height: 36px;
}
/* line 22, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
#todoapp .todo-stats:after {
content: "\0020";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
/* line 118 */
#todoapp .todo-stats .todo-count {
float: left;
}
/* line 120 */
#todoapp .todo-stats .todo-count .number {
font-weight: bold;
color: #555555;
}
/* line 123 */
#todoapp .todo-stats .todo-clear {
float: right;
}
/* line 125 */
#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;
}
/* line 139 */
#todoapp .todo-stats .todo-clear a:active {
position: relative;
top: 1px;
}
/* When checkbox is selected, score through todo item content */
.dijitCheckBoxChecked + .todo-content {
color: #666;
text-decoration: line-through;
}
/* When checkbox is selected, score through todo item content after an edit */
.dijitCheckBoxChecked + .dijitInline + .todo-content {
color: #666;
text-decoration: line-through;
}
/** Override Claro's CSS rule to style application like other examples */
.claro .dijitInlineEditBoxDisplayModeHover {
background-color: white;
border: 1px solid transparent;
}
.claro .dijitCheckBox, .claro .dijitCheckBoxIcon {
background-image: none;
}
/* Need to have the background-image on IE */
.dj_ie .claro .dijitCheckBox, .claro .dijitCheckBoxIcon {
background-image: url("form/images/checkboxRadioButtonStates.png");
}
.dijitCheckBoxInput {
opacity: 1;
}
architecture-examples/dojo/index.html
View file @ 751c5f81
<!doctype html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Dojo • TodoMVC</title>
<style>@import "./css/claro.css";</style>
<link href="css/todos.css" rel="stylesheet">
<link rel="stylesheet" href="../../assets/base.css">
<!-- CSS overrides - remove if you don't need it -->
<link rel="stylesheet" href="css/app.css">
<!--[if IE]>
<script src="../../assets/ie.js"></script>
<![endif]-->
</head>
<body class="claro">
<div id="todoapp">
<div class="title">
<h1>Todos</h1>
</div>
<div class="content" data-dojo-type="todo.app"></div>
<section id="todoapp" data-dojo-type="todo.app"></section>
<div id="credits">
Created by <a href="http://jamesthom.as/">James Thomas</a> and <a href="https://github.com/edchat">Ed Chatelain</a>
</div>
</div>
<script src="../../assets/base.js"></script>
<script data-dojo-config="async:true, parseOnLoad:true, locale:'en', paths:{'todo':'../../todo'}, deps:['dojo/parser', 'todo/app']" src="./js/dtk/dojo/dojo.js"></script>
<script data-dojo-config="async:true, parseOnLoad:true, locale:'en', paths:{'todo':'/code/JavaScript/todomvc/architecture-examples/dojo/js/todo/'}, deps:['dojo/parser', 'todo/app']" src="/code/JavaScript/Libraries/DTK/dojo-release-1.7.2-src/dojo/dojo.js"></script>
</body>
</html>
\ No newline at end of file
</html>
architecture-examples/dojo/js/todo/app.html
View file @ 751c5f81
<div>
<div class="create-todo">
<input class="new-todo" data-dojo-attach-event="onkeypress:onKeyPress" placeholder="What needs to be done?" type="text"/>
<section>
<header id="header">
<h1>todos</h1>
<input id="new-todo" data-dojo-attach-event="onkeypress:onKeyPress" placeholder="What needs to be done?" type="text" autofocus>
<span class="ui-tooltip-top" style="display:none;">Press Enter to save this task</span>
</div>
</header>
<div class="todos">
<ul class="todo-list" data-dojo-attach-point="todo_list" data-dojo-type="dojox.mvc.Repeat" data-dojo-props="ref: this.model.todos, exprchar: '#'">
<section id="main">
<input id="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list" data-dojo-attach-point="todo_list" data-dojo-type="dojox.mvc.Repeat" data-dojo-props="ref: this.model.todos, exprchar: '#'">
<li data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '#{this.index}'">
<div class="todo">
<input class="check" data-dojo-type="todo.form.CheckBox" data-dojo-props='ref: "isDone"' style="display:inline-block" >
<div class="todo-content dijitInline" data-dojo-type="dijit.InlineEditBox"
data-dojo-props='ref: "todo_text", editor:"dijit.form.TextBox", autosave:true, width:"420px", style:"width:420px;"'></div>
<div class="view">
<input class="toggle" type="checkbox" data-dojo-type="todo.form.CheckBox" data-dojo-props='ref: "isDone"' style="display:inline-block" >
<label class="dijitInline" data-dojo-type="dijit.InlineEditBox"
data-dojo-props='ref: "todo_text", editor:"dijit.form.TextBox", autosave:true, width:"420px", style:"width:420px;"'></label>
<span class="todo-destroy" data-model-id="#{this.index}">
</span>
<button class="destroy" data-model-id="#{this.index}">
</button>
</div>
</li>
</ul>
</div>
</ul>
</section>
<div class="todo-stats" data-dojo-attach-point="todo_stats">
<span class="todo-count">
<span data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: this.model.incomplete" class="number"></span>
<!-- This footer should hidden by default and shown when there are todos -->
<footer id="footer" data-dojo-attach-point="todo_stats">
<!-- This should be `0 items left` by default -->
<span id="todo-count">
<strong>
<span data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: this.model.incomplete" class="number"></span>
</strong>
<span class="word">items</span> left.
</span>
<span class="todo-clear">
<a href="#" data-dojo-attach-event="onclick:removeCompletedItems">
Clear
<span class="number-done" data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: this.model.complete" ></span>
completed items
</a>
</span>
</div>
</div>
<!-- Remove this if you don't implement routing -->
<ul id="filters">
<li>
<a class="selected" href="#/">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" data-dojo-attach-event="onclick:removeCompletedItems">
Clear completed (
<span class="number-done" data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: this.model.complete" ></span>
)
</button>
</footer>
</section>
architecture-examples/dojo/js/todo/app.js
View file @ 751c5f81
......@@ -49,7 +49,7 @@ define(["dojo/_base/declare",
* contents.
*/
postCreate: function () {
on(this.domNode, ".todo-destroy:click", lang.hitch(this, "onRemove"));
on(this.domNode, ".destroy:click", lang.hitch(this, "onRemove"));
this.onItemStatusUpdate();
},
......
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