Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

User interface improvements

  • Loading branch information...
commit 5c5fb5c5f5ad296f192dc5ca49c91aa340efe465 1 parent 19fbb2e
Alex Young authored
View
14 app.js
@@ -184,7 +184,9 @@ if (app.settings.env == 'production') {
// Document list
app.get('/documents.:format?', loadUser, function(req, res) {
- Document.find({ user_id: req.currentUser.id }, function(err, documents) {
+ Document.find({ user_id: req.currentUser.id },
+ [], { sort: ['title', 'descending'] },
+ function(err, documents) {
switch (req.params.format) {
case 'json':
res.send(documents.map(function(d) {
@@ -200,6 +202,16 @@ app.get('/documents.:format?', loadUser, function(req, res) {
});
});
+app.get('/documents/titles.json', loadUser, function(req, res) {
+ Document.find({ user_id: req.currentUser.id },
+ [], { sort: ['title', 'descending'] },
+ function(err, documents) {
+ res.send(documents.map(function(d) {
+ return { title: d.title, id: d.id };
+ }));
+ });
+});
+
app.get('/documents/:id.:format?/edit', loadUser, function(req, res, next) {
Document.findOne({ _id: req.params.id, user_id: req.currentUser.id }, function(err, d) {
if (!d) return next(new NotFound('Document not found'));
View
16 public/javascripts/application.js
@@ -83,8 +83,8 @@
divider.css({ height: height + 'px' });
ed.css({
- width: content.width() - 20 + 'px',
- height: content.height() - 5 + 'px'
+ width: content.width() + 'px',
+ height: content.height() - 22 - $('input.title').height() + 'px'
}).focus();
$('#controls').css({
@@ -99,6 +99,7 @@
$('#document-list .selected').removeClass('selected');
li.addClass('selected');
$('#editor').val(data.data);
+ $('.title').val(data.title);
$('#editor').focus();
});
@@ -111,12 +112,21 @@
$('#save-button').click(function() {
var id = $('#document-list .selected').itemID(),
- params = { d: { data: $('#editor').val(), id: id, title: $('#document-list .selected').html() } };
+ params = { d: { data: $('#editor').val(), id: id, title: $('input.title').val() } };
$.put('/documents/' + id + '.json', params, function(data) {
// Saved, will return JSON
+ $('#document-title-' + id).html(data.title);
});
});
+ $('#create-document').click(function(e) {
+ $.post('/documents.json', { d: { data: '', title: 'Untitled Document' } }, function(new_doc) {
+ $('#document-list').append('<li><a id="document-title-' + new_doc._id + '" href="/documents/' + new_doc._id + '">' + new_doc.title + '</a></li>');
+ $('#document-title-' + new_doc._id).click();
+ });
+ e.preventDefault();
+ });
+
$('#html-button').click(function() {
var container = $('#html-container');
if (container.is(':visible')) {
View
46 public/stylesheets/style.css
@@ -17,6 +17,10 @@ form {
margin: 0;
padding: 0;
}
+a {
+ outline: none;
+ -moz-outline-style: none;
+}
#header {
width: 100%;
height: 35px;
@@ -136,15 +140,33 @@ ul.toolbar a {
text-shadow: #fff 0 1px 0;
text-decoration: none;
}
+ul.toolbar a:active {
+ background-color: #666;
+ color: #fff;
+}
#editor-container {
float: right;
width: 100%;
}
-#editor {
+#editor,
+#editor-container input.title {
border: none;
outline: none;
font-size: 108%;
float: right;
+ clear: both;
+ border-bottom: 1px solid #999;
+ margin: 0;
+ width: 100%;
+ padding: 5px 0;
+}
+#editor-container input:focus {
+ background-color: #ffc;
+}
+#editor-container input.title {
+ float: left;
+ padding-left: 4px;
+ margin-left: 1px;
}
#controls {
position: absolute;
@@ -202,3 +224,25 @@ ul.toolbar a {
-webkit-box-shadow: 0 0 8px #f6f6f6;
box-shadow: 0 0 8px #f6f6f6;
}
+form.users {
+ background-color: #f0f0f0;
+ border: 1px solid #999;
+ float: left;
+ padding: 0 10px 10px 10px;
+}
+form.users div {
+ padding: 10px 0 0 0;
+ float: left;
+ clear: left;
+}
+form.users label {
+ width: 140px;
+ float: left;
+ clear: right;
+ color: #666;
+ font-weight: bold;
+}
+form.users input[type=submit] {
+ margin-left: 140px;
+ clear: both;
+}
View
49 public/stylesheets/style.styl
@@ -6,6 +6,7 @@ medium-grey = #999
dark-grey = #666
black = #111
selected-colour = #8897ba
+light-selection-colour = #ffc
grey-border()
border-top 1px solid highlight-colour
@@ -33,6 +34,10 @@ h1, h2, h3, h4, h5, h6, p, ul, li, div, form
margin 0
padding 0
+a
+ outline none
+ -moz-outline-style none
+
#header
width 100%
height 35px
@@ -152,15 +157,32 @@ ul.toolbar a
text-shadow #fff 0 1px 0
text-decoration none
+ul.toolbar a:active
+ background-color dark-grey
+ color white
+
#editor-container
float right
width 100%
-#editor
+#editor, #editor-container input.title
border none
outline none
font-size 108%
float right
+ clear both
+ border-bottom 1px solid medium-grey
+ margin 0
+ width 100%
+ padding 5px 0
+
+#editor-container input:focus
+ background-color light-selection-colour
+
+#editor-container input.title
+ float left
+ padding-left 4px
+ margin-left 1px
#controls
position absolute
@@ -214,4 +236,27 @@ ul.toolbar a
padding 0 5px
opacity 0.9
font-weight bold
- centre-shadow(8px, light-grey)
+ centre-shadow(8px, light-grey)
+
+form.users
+ background-color faded-white
+ border 1px solid medium-grey
+ float left
+ padding 0 10px 10px 10px
+
+form.users div
+ padding 10px 0 0 0
+ float left
+ clear left
+
+form.users label
+ width 140px
+ float left
+ clear right
+ color dark-grey
+ font-weight bold
+
+form.users input[type=submit]
+ margin-left 140px
+ clear both
+
View
4 views/documents/index.jade
@@ -8,7 +8,7 @@
ul.toolbar
li
- a(href='/documents/new')
+ a#create-document(href='/documents/new')
+
li
a#delete-document(href='#')
@@ -19,6 +19,8 @@
.content
#html-container(style='display: none')
#editor-container
+ div.title
+ input.title(name='d[title]')= d.title
textarea#editor(name='d[data]')
ul#controls.toolbar
View
4 views/sessions/new.jade
@@ -1,8 +1,8 @@
.page
h2 Log In
p
- a.button(href='/users/new') Register
- form#login(method='post', action='/sessions')
+ a.button(href='/users/new') Create an account &rarr;
+ form.users#login(method='post', action='/sessions')
!=partial('../users/fields', { locals: { user: user } })
div
label(for='remember_me') Remember me:
View
2  views/users/new.jade
@@ -1,7 +1,7 @@
.page
h2 Register
- form(method='post', action='/users')
+ form.users(method='post', action='/users')
!=partial('fields', { locals: { user: user } })
div
input(type='submit', value='Register')
Please sign in to comment.
Something went wrong with that request. Please try again.