Implemented notes UI.

- Switched from a global reset in www/css/ts-screen.scss to a selected
  top-level elements reset to allow default formatting for user notes.
- Restructured the #entry-list and entry displays.
- Restructured notes div, now has a sub-div for text and a textarea
  element for input.
- Added Showdown.js, a JavaScript Markdown library for formatting comments.
- Moved EntryView blur events to the View events map.
- Added images for expansion of notes.
- Added the ability to edit notes.
- Split EntryListView.addOne into renderOne and addOne so that renderOne
  can be called with a new entry (fixes duration glitch)
This commit is contained in:
Jonathan Bernard
2011-05-16 04:09:37 -05:00
parent 65a9a517f9
commit 2cc17b85f1
35 changed files with 1949 additions and 1427 deletions

View File

@ -2,7 +2,7 @@
<html>
<head>
<title>TimeStamper - Simple Time Tracking</title>
<link href='http://fonts.googleapis.com/css?family=Arvo|Bentham|Cuprum|Cantarell|Geo|Josefin+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Anonymous+Pro|Arvo|Bentham|Cantarell|Josefin+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" media="screen" href="/css/ts-screen.css" type="text/css"/>
<!-- Needed for IE, but I'm not sure if I'm going to support IE with this tool. -->
<!--<script type="text/javascript" src="/js/json2.js"></script>-->
@ -14,6 +14,7 @@
<!-- DEV -->
<script type="text/javascript" src="/js/jquery-1.5.js"></script>
<script type="text/javascript" src="/js/showdown.js"></script>
<script type="text/javascript" src="/js/underscore.js"></script>
<script type="text/javascript" src="/js/ICanHaz.js"></script>
<script type="text/javascript" src="/js/backbone.js"></script>
@ -83,16 +84,18 @@ out(YArg) ->
</script>
<script type="text/html" id="entryTemplate">
<div class="mark">
<img class="delete-icon" src="/img/round_delete_icon&16.png"/>
<img class="expand-entry" src="/img/br_down_icon_16.png"/>
<img class="collapse-entry" src="/img/br_up_icon_16.png"/>
<span>{{mark}}</span>
<img class="notes-icon" src="/img/notepad_2_icon&16.png"/>
</div>
<input class="mark-input" type="text" value="{{mark}}"/>
<div class="timestamp">{{start}}</div>
<input class="timestamp-input" type="text" value="{{timestamp}}"/>
<div class="duration">{{duration}}</div>
<div class="notes">{{notes}}</div>
<input class="notes-input" type="textarea" value="{{notes}}"/>
<div class="notes">
<div class="notes-text">{{notes}}</div>
<textarea class="notes-input" rows="10">{{notes}}</textarea>
</div>
</script>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>