Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Rebasing

Conflicts:
	apps/tasks/js/tasks.js
  • Loading branch information...
commit 17a1c2e75cdd50eb923dff2fc691e5ea167651fe 2 parents 429c2e6 + 1605490
@etiennesegonzac etiennesegonzac authored
View
15 apps/tasks/index.html
@@ -14,8 +14,8 @@
<body>
<div id="root" class="active view" data-title="Tasks">
<header>
- <a id="task-new" href="#task" class="right button">+</a>
- <span id="tasks-title" class="label" data-l10n-id="tasks">Tasks</span>
+ <a id="task-new" href="#task" class="right button plus">+</a>
+ <h1 id="tasks-title" class="label" data-l10n-id="tasks">Tasks</h1>
</header>
<div id="tasks-loading" class="loading hidden" data-l10n-id="loading">Loading ...</div>
<ul id="tasks" class="tableView"></ul>
@@ -25,20 +25,21 @@
<div id="task" class="view" data-title="Task">
<header>
<a href="#root" class="left button" data-l10n-id="back">Back</a>
- <a id="task-save" href="#root" class="right button" data-l10n-id="save">Save</a>
+ <h1 id="task-title" class="label" data-l10n-id="task">Task</h1>
+ <a id="task-save" href="#root" class="right button save-btn" data-l10n-id="save">Save</a>
</header>
<ul class="tableView">
- <li>
- <span data-l10n-id="name">Name</span>
+ <li class="singleline">
+ <span class="view-task-lbl" data-l10n-id="name">Name</span>
<input type="text" name="task.name" placeholder="New task" />
<p></p>
</li>
<li class="multiline">
- <span data-l10n-id="description">Description</span>
+ <span class="view-task-lbl" data-l10n-id="description">Description</span>
<textarea name="task.desc"></textarea>
</li>
<li>
- <span data-l10n-id="done">Done</span>
+ <span class="view-task-lbl" data-l10n-id="done">Done</span>
<label>
<input type="checkbox" name="task.done"/>
<span></span>
View
29 apps/tasks/js/tasks.js
@@ -41,7 +41,6 @@ var TaskList = {
},
init: function() {
-
this.loading.classList.remove('hidden');
TasksDB.load();
},
@@ -59,7 +58,6 @@ var TaskList = {
},
fill: function(taskDataList) {
-
var self = this;
taskDataList.forEach(function(task) {
@@ -122,6 +120,16 @@ var EditTask = {
return this.doneInput = document.querySelector('input[name=\'task.done\']');
},
+ get taskTitle() {
+ delete this.taskTitle;
+ return this.taskTitle = document.getElementById('task-title');
+ },
+
+ get deleteElement() {
+ delete this.deleteElement;
+ return this.deleteElement = document.querySelector('li.delete');
+ },
+
handleEvent: function(evt) {
switch (evt.type) {
case 'click':
@@ -131,7 +139,10 @@ var EditTask = {
switch (input.id) {
case 'task-save':
- this.updateCurrent();
+ if (!this.updateCurrent()) {
+ evt.preventDefault();
+ return false;
+ }
break;
case 'task-del':
this.deleteCurrent();
@@ -153,11 +164,23 @@ var EditTask = {
},
load: function(task) {
+
+ // Reset the required message to blank
+ this.nameInput.nextElementSibling.innerHTML = '';
+
// Set the values
this.element.dataset.id = task.id;
this.nameInput.value = task.name;
this.descInput.value = task.desc;
this.doneInput.checked = task.done;
+
+ if (task.id) {
+ this.taskTitle.innerHTML = 'Edit Task';
+ this.deleteElement.style.display = 'block';
+ } else {
+ this.taskTitle.innerHTML = 'New Task';
+ this.deleteElement.style.display = 'none';
+ }
},
updateCurrent: function() {
View
71 apps/tasks/style/tasks.css
@@ -1,27 +1,3 @@
-html, body {
- font-family: "Roboto", sans-serif;
-}
-
-@font-face {
- font-family: Roboto;
- src: url('fonts/Roboto-Regular.ttf');
-}
-@font-face {
- font-family: Roboto;
- font-weight: bold;
- src: url('fonts/Roboto-Bold.ttf');
-}
-@font-face {
- font-family: Roboto;
- font-style: italic;
- src: url('fonts/Roboto-Italic.ttf');
-}
-@font-face {
- font-family: Roboto;
- font-weight: bold;
- font-style: italic;
- src: url('fonts/Roboto-BoldItalic.ttf');
-}
/* ---------- header --------------- */
@@ -50,14 +26,15 @@ a.button, span.button {
padding:12px;
min-width: 6mozmm;
line-height: 22px;
- border:1px solid #aaa;
- background-color:#FFF;
- color:#000;
+ border:1px solid #282d32;
+ background-image: -moz-linear-gradient(#5c636c, #3d434a);
+ color:#c7d8e4;
display:inline-block;
text-align: center;
text-decoration:none;
- border-radius: 15px;
+ border-radius: 7px;
cursor:pointer;
+ text-shadow: 0px 1px 0px #305b5e;
}
a.button.right {
@@ -79,8 +56,9 @@ select, input, textarea {
clear: both;
background:none;
border:1px solid #AAA;
- width: -moz-calc(100% - 24px);
- margin:8px;
+ border-radius: 5px;
+ width: -moz-calc(100% - 44px);
+ margin:8px 8px 3px 8px;
font-size: 1em;
}
@@ -104,12 +82,17 @@ input ~ *:empty {
}
.view label.text {
- text-align:right;
+ text-align: right;
padding: 20px 0;
text-indent:20px;
direction:rtl;
}
+.tableView p {
+ padding: 0;
+ margin: 0 0 0 0.3em;
+}
+
li img {
vertical-align: middle;
margin-right:10px;
@@ -125,15 +108,35 @@ li img {
background-color: #f5f5f5;
}
+li.singleline {
+ height: 162px;
+}
+
li.multiline {
- height: 132px;
+ height: 172px;
}
li.delete {
text-align: center;
+ background: none;
+ border: 0;
}
li.delete > a {
- color: red;
- text-align: underline;
+ font-size: 1.3em;
+ border-radius: 7px;
+ margin: 10px auto;
+ background: #333;
+ background-image: -moz-linear-gradient(#c8494e, #9a3a3f);
+ color: #eff3e4;
+ text-shadow: 0px 1px 0px #305b5e;
+ box-shadow: 0 1px 0px rgba(0,0,0,0.75);
+}
+
+.view-task-lbl {
+ padding: 0.3em 0 0 0.5em;
+}
+
+a.plus {
+ font-size: 1.7em;
}
View
32 apps/tasks/style/ui.css
@@ -1,7 +1,18 @@
+@font-face {
+ font-family: 'Open Sans';
+ src: url('fonts/Open-Sans.woff');
+}
+@font-face {
+ font-family: 'Open Sans';
+ font-weight: bold;
+ src: url('fonts/Open-Sans-Bold.woff');
+}
+
html, body {
margin: 0;
padding: 0;
font-size: 3mozmm;
+ font-family: "Open Sans", sans-serif;
overflow: hidden !important;
}
@@ -13,15 +24,23 @@ body.hidden * {
display: none;
}
+textarea, input {
+ font-family: "Open Sans", sans-serif;
+ padding: 0.3em;
+}
+input {
+ height: 40px;
+}
+
header {
position: relative;
height: 62px;
line-height: 62px;
text-align: center;
background-color: #fff;
- background-image: -moz-linear-gradient(#fff, #eaeae4);
+ background-image: -moz-linear-gradient(#4d555f, #292e33);
+ color: #fff;
border-bottom: solid 2px #a3a3a3;
- border-radius: 8px 8px 0 0;
}
body > header {
@@ -35,7 +54,8 @@ header h1 {
text-align: center;
font-family: "Open Sans", sans-serif;
font-weight: bold;
- font-size: 1em;
+ font-size: 1.3em;
+ text-shadow: 0px 1px 0px #305b5e;
}
/* View */
@@ -91,7 +111,7 @@ ul li { /* 96px, including a 2px border */
position: relative;
height: 94px;
background-color: #f5f5f5;
- border-bottom: 2px solid #c3c9cb;
+ border-bottom: 1px solid #c3c9cb;
color: #555;
}
@@ -130,7 +150,7 @@ ul li > small {
position: absolute;
left: 20px;
top: 50%;
- font-size: 0.65em;
+ font-size: 0.9em;
color: #888;
}
@@ -180,4 +200,4 @@ ul li > small {
.view label > input[type=checkbox]:checked + span {
background: url(images/checked.png) no-repeat scroll center center,
-moz-linear-gradient(#ffffff, #eaeae4);
-}
+}
Please sign in to comment.
Something went wrong with that request. Please try again.