Skip to content

Commit 352327f

Browse files
boushleysindresorhus
boushley
authored and
sindresorhus
committed
Merge ExtJS branch into master
1 parent a2f8f05 commit 352327f

File tree

11 files changed

+510
-165
lines changed

11 files changed

+510
-165
lines changed

‎architecture-examples/extjs/css/app.css

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
html,
2+
body {
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
:focus {
8+
outline: none;
9+
}
10+
11+
body {
12+
font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
13+
line-height: 1.4em;
14+
background: #eeeeee;
15+
color: #333333;
16+
width: 520px;
17+
margin: 0 auto;
18+
-webkit-font-smoothing: antialiased;
19+
}
20+
21+
#todoapp {
22+
background: #fff;
23+
padding: 20px;
24+
margin-bottom: 40px;
25+
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
26+
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
27+
-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
28+
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
29+
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
30+
-webkit-border-radius: 0 0 5px 5px;
31+
-moz-border-radius: 0 0 5px 5px;
32+
-ms-border-radius: 0 0 5px 5px;
33+
-o-border-radius: 0 0 5px 5px;
34+
border-radius: 0 0 5px 5px;
35+
}
36+
37+
#todoapp h1 {
38+
font-size: 36px;
39+
font-weight: bold;
40+
text-align: center;
41+
padding: 0 0 10px 0;
42+
}
43+
44+
#todoapp input[type="text"] {
45+
width: 466px;
46+
font-size: 24px;
47+
font-family: inherit;
48+
line-height: 1.4em;
49+
border: 0;
50+
outline: none;
51+
padding: 6px;
52+
border: 1px solid #999999;
53+
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
54+
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
55+
-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
56+
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
57+
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
58+
}
59+
60+
#todoapp input::-webkit-input-placeholder {
61+
font-style: italic;
62+
}
63+
64+
#todo-list {
65+
margin: 10px 0;
66+
padding: 0;
67+
list-style: none;
68+
}
69+
70+
#todo-list li {
71+
padding: 18px 20px 18px 0;
72+
position: relative;
73+
font-size: 24px;
74+
border-bottom: 1px solid #cccccc;
75+
}
76+
77+
#todo-list li:last-child {
78+
border-bottom: none;
79+
}
80+
81+
#todo-list li.done label {
82+
color: #777777;
83+
text-decoration: line-through;
84+
}
85+
86+
#todo-list li .destroy {
87+
display: none;
88+
position: absolute;
89+
top: 20px;
90+
right: 10px;
91+
cursor: pointer;
92+
width: 20px;
93+
height: 20px;
94+
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAABGdBTUEAALGPC/xhBQAAACdQTFRFzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMAAAA////zMzMhnu0WAAAAAt0Uk5T5u3pqtV3jFQEKAC0bVelAAAAfUlEQVQI12NYtWpFsc8R865VqxhWrZpyBgg8QcylZ8AgCsjMgTCPrWJYfgYKqhjWwJgaDDVnzpw+c2bPmTPHGWzOnNm95/TuM2cOM/AARXfvBooeZAAp270bRCIz4QoOIGtDMqwJZoUEQzvCYrhzuhhWtUKYEahOX7UK6iEA3A6NUGwCTZIAAAAASUVORK5CYII=') no-repeat center center;
95+
}
96+
97+
#todo-list li:hover .destroy {
98+
display: block;
99+
}
100+
101+
#todo-list li.editing {
102+
border-bottom: none;
103+
margin-top: -1px;
104+
padding: 0;
105+
}
106+
107+
#todo-list li.editing:last-child {
108+
margin-bottom: -1px;
109+
}
110+
111+
#todo-list li.editing .edit {
112+
display: block;
113+
width: 444px;
114+
padding: 13px 15px 14px 20px;
115+
margin: 0;
116+
}
117+
118+
#todo-list li.editing .view {
119+
display: none;
120+
}
121+
122+
#todo-list li .view label {
123+
word-break: break-word;
124+
}
125+
126+
#todo-list li .edit {
127+
display: none;
128+
}
129+
130+
#todoapp footer {
131+
margin: 0 -20px -20px -20px;
132+
overflow: hidden;
133+
color: #555555;
134+
background: #f4fce8;
135+
border-top: 1px solid #ededed;
136+
padding: 0 20px;
137+
line-height: 37px;
138+
-webkit-border-radius: 0 0 5px 5px;
139+
-moz-border-radius: 0 0 5px 5px;
140+
-ms-border-radius: 0 0 5px 5px;
141+
-o-border-radius: 0 0 5px 5px;
142+
border-radius: 0 0 5px 5px;
143+
}
144+
145+
#clear-completed {
146+
float: right;
147+
line-height: 20px;
148+
text-decoration: none;
149+
background: rgba(0, 0, 0, 0.1);
150+
color: #555555;
151+
font-size: 11px;
152+
margin-top: 8px;
153+
margin-bottom: 8px;
154+
padding: 0 10px 1px;
155+
cursor: pointer;
156+
-webkit-border-radius: 12px;
157+
-moz-border-radius: 12px;
158+
-ms-border-radius: 12px;
159+
-o-border-radius: 12px;
160+
border-radius: 12px;
161+
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
162+
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
163+
-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
164+
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
165+
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
166+
}
167+
168+
#clear-completed:hover {
169+
background: rgba(0, 0, 0, 0.15);
170+
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
171+
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
172+
-ms-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
173+
-o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
174+
box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
175+
}
176+
177+
#clear-completed:active {
178+
position: relative;
179+
top: 1px;
180+
}
181+
182+
#todo-count span {
183+
font-weight: bold;
184+
}
185+
186+
#instructions {
187+
margin: 10px auto;
188+
color: #777777;
189+
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
190+
text-align: center;
191+
}
192+
193+
#instructions a {
194+
color: #336699;
195+
}
196+
197+
#credits {
198+
margin: 30px auto;
199+
color: #999;
200+
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
201+
text-align: center;
202+
}
203+
204+
#credits a {
205+
color: #888;
206+
}

‎architecture-examples/extjs/index.html

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,29 @@
11
<!doctype html>
2-
<html>
2+
<html lang="en">
33
<head>
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6-
<title>ExtJS• TodoMVC</title>
7-
<link rel="stylesheet" href="css/style.css">
6+
<title>ExtJS • TodoMVC</title>
7+
<link rel="stylesheet" href="../assets/base.css">
8+
<link rel="stylesheet" href="css/app.css">
89
<!--[if IE]>
910
<script src="../assets/ie.js"></script>
1011
<![endif]-->
1112
</head>
1213
<body>
13-
<div id="todo">
14-
<h1>Todos</h1>
15-
<input type="text" id="taskfield" placeholder="What needs to be done?" />
14+
<div id="todoapp">
15+
<header>
16+
<h1>Todos</h1>
17+
<input id="new-todo" type="text" placeholder="What needs to be done?">
18+
</header>
19+
<section id="main"></section>
1620
</div>
17-
<div class="credits">
18-
Credits:<br /><a href="http://revolunet.com/">Revolunet</a>
21+
<div id="instructions">
22+
Double-click to edit a todo.
23+
</div>
24+
<div id="credits">
25+
Created by <a href="http://revolunet.com/">Revolunet</a><br />
26+
Updates by <a href="http://github.com/boushley">Aaron Boushley</a>
1927
</div>
2028
<script src="../../assets/base.js"></script>
2129
<script src="http://extjs.cachefly.net/ext-4.0.2a/bootstrap.js"></script>

‎architecture-examples/extjs/js/app.js

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,27 @@
11
Ext.Loader.setConfig({enabled:true});
22

33
Ext.application({
4-
name: 'Todo',
5-
appFolder: 'js',
6-
controllers: ['Tasks'],
7-
launch: function() {
4+
name: 'Todo',
5+
appFolder: 'js',
6+
controllers: ['Tasks'],
7+
launch: function() {
88

9-
Ext.create('Ext.container.Container', {
10-
renderTo: 'todo',
11-
items: [{
12-
xtype: 'taskField',
13-
contentEl: 'taskfield'
14-
}, {
15-
xtype: 'taskList'
16-
}, {
17-
xtype: 'taskToolbar'
18-
}]
19-
});
9+
Ext.create('Todo.view.TaskField', {
10+
renderTo: Ext.select('header').first(),
11+
contentEl: 'new-todo'
12+
});
2013

21-
}
14+
Ext.create('Todo.view.CheckAllBox', {
15+
renderTo: 'main'
16+
});
17+
18+
Ext.create('Todo.view.TaskList', {
19+
renderTo: 'main'
20+
});
21+
22+
Ext.create('Todo.view.TaskToolbar', {
23+
renderTo: 'todoapp'
24+
});
25+
26+
}
2227
});

0 commit comments

Comments
 (0)