Ux improvements

app/main/views.py

@@ -1,5 +1,5 @@
 from datetime import datetime
-from flask import render_template, session, redirect, url_for, flash
+from flask import render_template, session, redirect, url_for, flash, abort
 from flask.ext.login import current_user, login_required
 
 from . import main
@@ -21,6 +21,14 @@ def index():
  else:
  return render_template('index.html')
 
+@main.route('/note/<int:id>')
+@login_required
+def note(id):
+ note = Note.query.get_or_404(id)
+ if current_user != note.author:
+ abort(403)
+ return render_template('note.html', notes=[note])
+
 @main.route('/edit/<int:id>', methods=['GET', 'POST'])
 @login_required
 def edit(id):

app/static/css/style.css

@@ -85,6 +85,10 @@ a.buttons {
  text-decoration: none;
 }
 
+li.task-list-item {
+ list-style-type: none;
+}
+
 /* Style for Releases Plugin */
 #releases {
  list-style-type: none;

app/static/js/braindump.js

@@ -5,7 +5,7 @@ editor.session.setMode("ace/mode/markdown");
 editor.getSession().setUseWrapMode(true);
 editor.setAutoScrollEditorIntoView(true);
 editor.setOption("minLines", 10);
-editor.setOption("maxLines", 100);
+editor.setOption("maxLines", 25);
 
 var textarea = $('textarea[id="body"]').hide();
 var textarea_html_label = $('label[for="body_html"]').hide();
@@ -15,3 +15,22 @@ editor.getSession().on('change', function(){
  textarea_html.val(marked(editor.getSession().getValue()));
  textarea.val(editor.getSession().getValue());
 });
+
+// Hot Keys
+editor.commands.addCommand({
+ name: 'insert text',
+ bindKey: {win: 'Ctrl-1', mac: 'Ctrl-1'},
+ exec: function(editor) {
+ editor.insert("- [ ] TODO")
+ },
+ readOnly: true // false if this command should not apply in readOnly mode
+});
+
+editor.commands.addCommand({
+ name: 'Insert TimeStamp',
+ bindKey: {win: 'Ctrl-d', mac: 'Ctrl-d'},
+ exec: function(editor) {
+ editor.insert(moment().format('MMMM Do YYYY, h:mm:ss a') + "\n");
+ },
+ readOnly: true // false if this command should not apply in readOnly mode
+});

app/static/js/libs/marked.js

@@ -27,6 +27,7 @@ var block = {
  text: /^[^\n]+/
 };
 
+block.checkbox = /^\[([ x])\] +/;
 block.bullet = /(?:[*+-]|\d+\.)/;
 block.item = /^( *)(bull) [^\n]*(?:\n(?!\1bull )[^\n]*)*/;
 block.item = replace(block.item, 'gm')
@@ -157,7 +158,8 @@ Lexer.prototype.token = function(src, top, bq) {
  , item
  , space
  , i
- , l;
+ , l
+ , checked;
 
  while (src) {
  // newline
@@ -304,6 +306,16 @@ Lexer.prototype.token = function(src, top, bq) {
  space = item.length;
  item = item.replace(/^ *([*+-]|\d+\.) +/, '');
 
+ if (this.options.gfm) {
+ checked = block.checkbox.exec(item);
+
+ if (checked) {
+ checked = checked[1] === 'x';
+ item = item.replace(block.checkbox, '');
+ } else {
+ checked = undefined;
+ }
+ }
  // Outdent whatever the
  // list item contains. Hacky.
  if (~item.indexOf('\n ')) {
@@ -333,6 +345,7 @@ Lexer.prototype.token = function(src, top, bq) {
  }
 
  this.tokens.push({
+ checked: checked,
  type: loose
  ? 'loose_item_start'
  : 'list_item_start'
@@ -809,13 +822,23 @@ Renderer.prototype.hr = function() {
  return this.options.xhtml ? '<hr/>\n' : '<hr>\n';
 };
 
-Renderer.prototype.list = function(body, ordered) {
+Renderer.prototype.list = function(body, ordered, taskList) {
  var type = ordered ? 'ol' : 'ul';
- return '<' + type + '>\n' + body + '</' + type + '>\n';
+ var classes = taskList ? ' class="task-list"' : '';
+ return '<' + type + classes + '>\n' + body + '</' + type + '>\n';
 };
 
-Renderer.prototype.listitem = function(text) {
- return '<li>' + text + '</li>\n';
+Renderer.prototype.listitem = function(text, checked) {
+ if (checked === undefined) {
+ return '<li>' + text + '</li>\n';
+ }
+
+ return '<li class="task-list-item">'
+ + '<input type="checkbox" class="task-list-item-checkbox"'
+ + (checked ? ' checked' : '')
+ + '> '
+ + text
+ + '</li>\n';
 };
 
 Renderer.prototype.paragraph = function(text) {
@@ -1037,24 +1060,29 @@ Parser.prototype.tok = function() {
  }
  case 'list_start': {
  var body = ''
+ , taskList = false
  , ordered = this.token.ordered;
 
  while (this.next().type !== 'list_end') {
+ if (this.token.checked !== undefined) {
+ taskList = true;
+ }
  body += this.tok();
  }
 
- return this.renderer.list(body, ordered);
+ return this.renderer.list(body, ordered, taskList);
  }
  case 'list_item_start': {
- var body = '';
+ var body = ''
+ , checked = this.token.checked;
 
  while (this.next().type !== 'list_item_end') {
  body += this.token.type === 'text'
  ? this.parseText()
  : this.tok();
  }
 
- return this.renderer.listitem(body);
+ return this.renderer.listitem(body, checked);
  }
  case 'loose_item_start': {
  var body = '';
@@ -1063,7 +1091,7 @@ Parser.prototype.tok = function() {
  body += this.tok();
  }
 
- return this.renderer.listitem(body);
+ return this.renderer.listitem(body, checked);
  }
  case 'html': {
  var html = !this.token.pre && !this.options.pedantic

app/templates/_notes.html

@@ -2,7 +2,7 @@
  {% for note in notes %}
  <li class="note">
  <div class="note-content">
- <div class="note-title"><h3>{{ note.title }}</h3></div>
+ <div class="note-title"><a href="{{ url_for('.note', id=note.id)}}"><h3>{{ note.title }}</h3></a></div>
  <div class="note-date">{{ moment(note.timestamp).fromNow() }}
  by <a href="{{ url_for('.index', username=note.author.username) }}">{{ note.author.username }}</a> </div>
  <div class="note-body">

app/templates/note.html

@@ -0,0 +1,7 @@
+{% extends 'base.html' %}
+
+{% block title %} Braindump | Note {% endblock %}
+
+{% block page_content %}
+{% include '_notes.html' %}
+{% endblock %}