jdb/timestamper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding hover-able icons to timeline entries.

Browse Source 
- Added notes and delete icons right and left entry marks respectively.
- Notes icon slide toggles the notes display (hidden by default).
This commit is contained in:
Jonathan Bernard 2011-05-09 10:52:21 -05:00
parent 74d8a7f015
commit 808492154d
18 changed files with 79 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
www/css/ts-screen.css
View File

@ -171,10 +171,26 @@ input {
padding: 0 2rem; } padding: 0 2rem; }
#entry-list .entry div { #entry-list .entry div {
display: inline-block; } display: inline-block; }
#entry-list .entry .mark {
position: relative; }
#entry-list .entry .mark img.delete-icon {
display: none;
left: -20px;
position: absolute;
top: 6px; }
#entry-list .entry .mark img.notes-icon {
display: none;
margin-top: 6px;
float: right; }
#entry-list .entry:hover .mark img {
display: inline; }
#entry-list .entry .mark-input, #entry-list .entry .timestamp-input { #entry-list .entry .mark-input, #entry-list .entry .timestamp-input {
display: none; } display: none; }
#entry-list .entry .notes, #entry-list .entry .notes-input { #entry-list .entry .notes, #entry-list .entry .notes-input {
display: none; } display: none;
font-family: Cantarell;
font-size: small;
padding-left: 1em; }
#entry-list .entry.edit-mark .mark-input { #entry-list .entry.edit-mark .mark-input {
display: inline-block; } display: inline-block; }
#entry-list .entry.edit-mark .mark { #entry-list .entry.edit-mark .mark {

26
www/css/ts-screen.scss
View File

@ -241,9 +241,33 @@ input {
div { display: inline-block; } div { display: inline-block; }
.mark {
position: relative;
img.delete-icon {
display: none;
left: -20px;
position: absolute;
top: 6px;
}
img.notes-icon {
display: none;
margin-top: 6px;
float: right;
}
}
&:hover .mark img { display: inline; }
.mark-input, .timestamp-input { display: none; } .mark-input, .timestamp-input { display: none; }
.notes, .notes-input { display: none; } .notes, .notes-input {
display: none;
font-family: Cantarell;
font-size: small;
padding-left: 1em;
}
&.edit-mark { &.edit-mark {
.mark-input { display: inline-block; } .mark-input { display: inline-block; }

BIN
www/img/notepad_2_icon&16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
www/img/notepad_2_icon&24.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
www/img/notepad_2_icon&32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
www/img/notepad_2_icon&48.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
www/img/pencil_icon&16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
www/img/pencil_icon&24.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
www/img/pencil_icon&32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
www/img/pencil_icon&48.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
www/img/round_delete_icon&16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
www/img/round_delete_icon&24.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
www/img/round_delete_icon&32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
www/img/round_delete_icon&48.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

10
www/index.yaws
View File

@ -59,8 +59,8 @@ out(YArg) ->
</script> </script>
<script type="text/html" id="userTemplate"> <script type="text/html" id="userTemplate">
<div class="fullname">{{name}}</div> <div class="fullname">{{name}}</div>
<input class='fullname-input' type='text' value='{{name}}'/></div> <input class="fullname-input" type="text" value="{{name}}"/></div>
<div class='drop-menu'> <div class="drop-menu">
<div class="username"> - {{id}}</div> <div class="username"> - {{id}}</div>
<ul class="drop-menu-items"> <ul class="drop-menu-items">
<li><a href="#">logout</a></li> <li><a href="#">logout</a></li>
@ -82,7 +82,11 @@ out(YArg) ->
<li class="timeline-link"><a href="#">{{id}}</a></li> <li class="timeline-link"><a href="#">{{id}}</a></li>
</script> </script>
<script type="text/html" id="entryTemplate"> <script type="text/html" id="entryTemplate">
<div class="mark">{{mark}}</div> <div class="mark">
<img class="delete-icon" src="/img/round_delete_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}}"/> <input class="mark-input" type="text" value="{{mark}}"/>
<div class="timestamp">{{start}}</div> <div class="timestamp">{{start}}</div>
<input class="timestamp-input" type="text" value="{{timestamp}}"/> <input class="timestamp-input" type="text" value="{{timestamp}}"/>

9
www/js/ts.js
View File

@ -92,6 +92,7 @@ $(document).ready(function(){
className: 'entry', className: 'entry',
events: { events: {
"click img.notes-icon" : "toggleNotes",
"dblclick div.mark" : "editMark", "dblclick div.mark" : "editMark",
"dblclick div.timestamp" : "editTimestamp", "dblclick div.timestamp" : "editTimestamp",
"keypress .mark-input" : "updateOnEnter", "keypress .mark-input" : "updateOnEnter",
@ -100,7 +101,7 @@ $(document).ready(function(){
initialize: function(options) { initialize: function(options) {
_.bindAll(this, 'render', 'close', 'editTImestamp', _.bindAll(this, 'render', 'close', 'editTImestamp',
'editMark', 'updateOnEnter', 'getViewModel'); 'editMark', 'updateOnEnter', 'getViewModel', 'toggleNotes');
this.model.bind('change', this.render); this.model.bind('change', this.render);
this.model.view = this; this.model.view = this;
@ -124,7 +125,7 @@ $(document).ready(function(){
*/ */
update: function() { update: function() {
var data = this.getViewModel(); var data = this.getViewModel();
this.$('.mark').text(data.mark); this.$('.mark span').text(data.mark);
this.$('.mark-input').val(data.mark); this.$('.mark-input').val(data.mark);
this.$('.timestamp').text(data.start); this.$('.timestamp').text(data.start);
this.$('.timestamp-input').val(data.timestamp); this.$('.timestamp-input').val(data.timestamp);
@ -226,6 +227,10 @@ $(document).ready(function(){
return (day > 0 ? day + "d " : "") + return (day > 0 ? day + "d " : "") +
(hr > 0 ? hr + "hr " : "") + (hr > 0 ? hr + "hr " : "") +
min + "m "; min + "m ";
},
toggleNotes: function() {
this.$('.notes').slideToggle();
} }
}); });

42
www/prototype.html
View File

@ -53,7 +53,7 @@
<div id="entries"> <div id="entries">
<div class="entry"> <div class="entry">
<div class="mark">ITHelp: Entering tickets.</div> <div class="mark"><img src="img/round_delete_icon&16.png" class="delete-icon"/><span>ITHelp: Entering tickets.</span><img src="img/notepad_2_icon&16.png" class="notes-icon"/></div>
<input class="mark-input" type="text"/> <input class="mark-input" type="text"/>
<div class="timestamp">12:32</div> <div class="timestamp">12:32</div>
<input class="timestamp-input" type="text"/> <input class="timestamp-input" type="text"/>
@ -61,7 +61,7 @@
<div class="notes">Some notes should go here, but they should be hidden by default</div> <div class="notes">Some notes should go here, but they should be hidden by default</div>
</div> </div>
<div class="entry"> <div class="entry">
<div class="mark">ITHelp: Helping Steve wth WR Updates.</div> <div class="mark"><img src="img/round_delete_icon&16.png" class="delete-icon"/><span>ITHelp: Helping Steve wth WR Updates.</span><img src="img/notepad_2_icon&16.png" class="notes-icon"/></div>
<input class="mark-input" type="text"/> <input class="mark-input" type="text"/>
<div class="timestamp">9:56</div> <div class="timestamp">9:56</div>
<input class="timestamp-input" type="text"/> <input class="timestamp-input" type="text"/>
@ -69,7 +69,7 @@
<div class="notes">Some notes should go here, but they should be hidden by default</div> <div class="notes">Some notes should go here, but they should be hidden by default</div>
</div> </div>
<div class="entry"> <div class="entry">
<div class="mark">Email</div> <div class="mark"><img src="img/round_delete_icon&16.png" class="delete-icon"/><span>Email</span><img src="img/notepad_2_icon&16.png" class="notes-icon"/></div>
<input class="mark-input" type="text"/> <input class="mark-input" type="text"/>
<div class="timestamp">9:10</div> <div class="timestamp">9:10</div>
<input class="timestamp-input" type="text"/> <input class="timestamp-input" type="text"/>
@ -82,7 +82,7 @@
<h5 class='duration'>duration</h5> <h5 class='duration'>duration</h5>
</div> </div>
<div class="entry"> <div class="entry">
<div class="mark">ITHelp: Working #7801.</div> <div class="mark"><img src="img/round_delete_icon&16.png" class="delete-icon"/><span>ITHelp: Working #7801.</span><img src="img/notepad_2_icon&16.png" class="notes-icon"/></div>
<input class="mark-input" type="text"/> <input class="mark-input" type="text"/>
<div class="timestamp">3:12 pm</div> <div class="timestamp">3:12 pm</div>
<input class="timestamp-input" type="text"/> <input class="timestamp-input" type="text"/>
@ -90,7 +90,7 @@
<div class="notes">Some notes should go here, but they should be hidden by default</div> <div class="notes">Some notes should go here, but they should be hidden by default</div>
</div> </div>
<div class="entry"> <div class="entry">
<div class="mark">Lunch.</div> <div class="mark"><img src="img/round_delete_icon&16.png" class="delete-icon"/><span>Lunch.</span><img src="img/notepad_2_icon&16.png" class="notes-icon"/></div>
<input class="mark-input" type="text"/> <input class="mark-input" type="text"/>
<div class="timestamp">11:47 am</div> <div class="timestamp">11:47 am</div>
<input class="timestamp-input" type="text"/> <input class="timestamp-input" type="text"/>
@ -98,7 +98,7 @@
<div class="notes">Some notes should go here, but they should be hidden by default</div> <div class="notes">Some notes should go here, but they should be hidden by default</div>
</div> </div>
<div class="entry"> <div class="entry">
<div class="mark">ITHelp: Entering tickets.</div> <div class="mark"><img src="img/round_delete_icon&16.png" class="delete-icon"/><span>ITHelp: Entering tickets.</span><img src="img/notepad_2_icon&16.png" class="notes-icon"/></div>
<input class="mark-input" type="text"/> <input class="mark-input" type="text"/>
<div class="timestamp">9:20 am</div> <div class="timestamp">9:20 am</div>
<input class="timestamp-input" type="text"/> <input class="timestamp-input" type="text"/>
@ -106,7 +106,7 @@
<div class="notes">Some notes should go here, but they should be hidden by default</div> <div class="notes">Some notes should go here, but they should be hidden by default</div>
</div> </div>
<div class="entry"> <div class="entry">
<div class="mark">ITHelp: Reproducing #7796.</div> <div class="mark"><img src="img/round_delete_icon&16.png" class="delete-icon"/><span>ITHelp: Reproducing #7796.</span><img src="img/notepad_2_icon&16.png" class="notes-icon"/></div>
<input class="mark-input" type="text"/> <input class="mark-input" type="text"/>
<div class="timestamp">9:11 am</div> <div class="timestamp">9:11 am</div>
<input class="timestamp-input" type="text"/> <input class="timestamp-input" type="text"/>
@ -119,7 +119,7 @@
<h5 class='duration'>duration</h5> <h5 class='duration'>duration</h5>
</div> </div>
<div class="entry"> <div class="entry">
<div class="mark">ITHelp: Working #7733.</div> <div class="mark"><img src="img/round_delete_icon&16.png" class="delete-icon"/><span>ITHelp: Working #7733.</span><img src="img/notepad_2_icon&16.png" class="notes-icon"/></div>
<input class="mark-input" type="text"/> <input class="mark-input" type="text"/>
<div class="timestamp">16:41</div> <div class="timestamp">16:41</div>
<input class="timestamp-input" type="text"/> <input class="timestamp-input" type="text"/>
@ -127,7 +127,7 @@
<div class="notes">Some notes should go here, but they should be hidden by default</div> <div class="notes">Some notes should go here, but they should be hidden by default</div>
</div> </div>
<div class="entry"> <div class="entry">
<div class="mark">Zend Training: Building Security Into Your PHP Applications</div> <div class="mark"><img src="img/round_delete_icon&16.png" class="delete-icon"/><span>Zend Training: Building Security Into Your PHP Applications</span><img src="img/notepad_2_icon&16.png" class="notes-icon"/></div>
<input class="mark-input" type="text"/> <input class="mark-input" type="text"/>
<div class="timestamp">10:30</div> <div class="timestamp">10:30</div>
<input class="timestamp-input" type="text"/> <input class="timestamp-input" type="text"/>
@ -135,7 +135,7 @@
<div class="notes">Some notes should go here, but they should be hidden by default</div> <div class="notes">Some notes should go here, but they should be hidden by default</div>
</div> </div>
<div class="entry"> <div class="entry">
<div class="mark">ITHelp.</div> <div class="mark"><img src="img/round_delete_icon&16.png" class="delete-icon"/><span>ITHelp.</span><img src="img/notepad_2_icon&16.png" class="notes-icon"/></div>
<input class="mark-input" type="text"/> <input class="mark-input" type="text"/>
<div class="timestamp">8:40</div> <div class="timestamp">8:40</div>
<input class="timestamp-input" type="text"/> <input class="timestamp-input" type="text"/>
@ -148,7 +148,7 @@
<h5 class='duration'>duration</h5> <h5 class='duration'>duration</h5>
</div> </div>
<div class="entry"> <div class="entry">
<div class="mark">Training Steve: Databases and SQL</div> <div class="mark"><img src="img/round_delete_icon&16.png" class="delete-icon"/><span>Training Steve: Databases and SQL</span><img src="img/notepad_2_icon&16.png" class="notes-icon"/></div>
<input class="mark-input" type="text"/> <input class="mark-input" type="text"/>
<div class="timestamp">16:09</div> <div class="timestamp">16:09</div>
<input class="timestamp-input" type="text"/> <input class="timestamp-input" type="text"/>
@ -156,7 +156,7 @@
<div class="notes">Some notes should go here, but they should be hidden by default</div> <div class="notes">Some notes should go here, but they should be hidden by default</div>
</div> </div>
<div class="entry"> <div class="entry">
<div class="mark">Preparing Instructional Material: Database Basics</div> <div class="mark"><img src="img/round_delete_icon&16.png" class="delete-icon"/><span>Preparing Instructional Material: Database Basics</span><img src="img/notepad_2_icon&16.png" class="notes-icon"/></div>
<input class="mark-input" type="text"/> <input class="mark-input" type="text"/>
<div class="timestamp">15:12</div> <div class="timestamp">15:12</div>
<input class="timestamp-input" type="text"/> <input class="timestamp-input" type="text"/>
@ -164,7 +164,7 @@
<div class="notes">Some notes should go here, but they should be hidden by default</div> <div class="notes">Some notes should go here, but they should be hidden by default</div>
</div> </div>
<div class="entry"> <div class="entry">
<div class="mark">ITHelp: Working #7729.</div> <div class="mark"><img src="img/round_delete_icon&16.png" class="delete-icon"/><span>ITHelp: Working #7729.</span><img src="img/notepad_2_icon&16.png" class="notes-icon"/></div>
<input class="mark-input" type="text"/> <input class="mark-input" type="text"/>
<div class="timestamp">15:09</div> <div class="timestamp">15:09</div>
<input class="timestamp-input" type="text"/> <input class="timestamp-input" type="text"/>
@ -172,7 +172,7 @@
<div class="notes">Some notes should go here, but they should be hidden by default</div> <div class="notes">Some notes should go here, but they should be hidden by default</div>
</div> </div>
<div class="entry"> <div class="entry">
<div class="mark">ITHelp.</div> <div class="mark"><img src="img/round_delete_icon&16.png" class="delete-icon"/><span>ITHelp.</span><img src="img/notepad_2_icon&16.png" class="notes-icon"/></div>
<input class="mark-input" type="text"/> <input class="mark-input" type="text"/>
<div class="timestamp">14:44</div> <div class="timestamp">14:44</div>
<input class="timestamp-input" type="text"/> <input class="timestamp-input" type="text"/>
@ -180,7 +180,7 @@
<div class="notes">Some notes should go here, but they should be hidden by default</div> <div class="notes">Some notes should go here, but they should be hidden by default</div>
</div> </div>
<div class="entry"> <div class="entry">
<div class="mark">ITHelp: Working #7728.</div> <div class="mark"><img src="img/round_delete_icon&16.png" class="delete-icon"/><span>ITHelp: Working #7728.</span><img src="img/notepad_2_icon&16.png" class="notes-icon"/></div>
<input class="mark-input" type="text"/> <input class="mark-input" type="text"/>
<div class="timestamp">14:41</div> <div class="timestamp">14:41</div>
<input class="timestamp-input" type="text"/> <input class="timestamp-input" type="text"/>
@ -188,7 +188,7 @@
<div class="notes">Some notes should go here, but they should be hidden by default</div> <div class="notes">Some notes should go here, but they should be hidden by default</div>
</div> </div>
<div class="entry"> <div class="entry">
<div class="mark">ITHelp.</div> <div class="mark"><img src="img/round_delete_icon&16.png" class="delete-icon"/><span>ITHelp.</span><img src="img/notepad_2_icon&16.png" class="notes-icon"/></div>
<input class="mark-input" type="text"/> <input class="mark-input" type="text"/>
<div class="timestamp">14:00</div> <div class="timestamp">14:00</div>
<input class="timestamp-input" type="text"/> <input class="timestamp-input" type="text"/>
@ -196,7 +196,7 @@
<div class="notes">Some notes should go here, but they should be hidden by default</div> <div class="notes">Some notes should go here, but they should be hidden by default</div>
</div> </div>
<div class="entry"> <div class="entry">
<div class="mark">Lunch.</div> <div class="mark"><img src="img/round_delete_icon&16.png" class="delete-icon"/><span>Lunch.</span><img src="img/notepad_2_icon&16.png" class="notes-icon"/></div>
<input class="mark-input" type="text"/> <input class="mark-input" type="text"/>
<div class="timestamp">13:05</div> <div class="timestamp">13:05</div>
<input class="timestamp-input" type="text"/> <input class="timestamp-input" type="text"/>
@ -204,7 +204,7 @@
<div class="notes">Some notes should go here, but they should be hidden by default</div> <div class="notes">Some notes should go here, but they should be hidden by default</div>
</div> </div>
<div class="entry"> <div class="entry">
<div class="mark">ITHelp: Working #7725.</div> <div class="mark"><img src="img/round_delete_icon&16.png" class="delete-icon"/><span>ITHelp: Working #7725.</span><img src="img/notepad_2_icon&16.png" class="notes-icon"/></div>
<input class="mark-input" type="text"/> <input class="mark-input" type="text"/>
<div class="timestamp">12:40</div> <div class="timestamp">12:40</div>
<input class="timestamp-input" type="text"/> <input class="timestamp-input" type="text"/>
@ -212,7 +212,7 @@
<div class="notes">Some notes should go here, but they should be hidden by default</div> <div class="notes">Some notes should go here, but they should be hidden by default</div>
</div> </div>
<div class="entry"> <div class="entry">
<div class="mark">Zend Training: Building Security Into You PHP Applications.</div> <div class="mark"><img src="img/round_delete_icon&16.png" class="delete-icon"/><span>Zend Training: Building Security Into You PHP Applications.</span><img src="img/notepad_2_icon&16.png" class="notes-icon"/></div>
<input class="mark-input" type="text"/> <input class="mark-input" type="text"/>
<div class="timestamp">10:30</div> <div class="timestamp">10:30</div>
<input class="timestamp-input" type="text"/> <input class="timestamp-input" type="text"/>
@ -220,7 +220,7 @@
<div class="notes">Some notes should go here, but they should be hidden by default</div> <div class="notes">Some notes should go here, but they should be hidden by default</div>
</div> </div>
<div class="entry"> <div class="entry">
<div class="mark">Zend Training: Preparing for security training.</div> <div class="mark"><img src="img/round_delete_icon&16.png" class="delete-icon"/><span>Zend Training: Preparing for security training.</span><img src="img/notepad_2_icon&16.png" class="notes-icon"/></div>
<input class="mark-input" type="text"/> <input class="mark-input" type="text"/>
<div class="timestamp">09:25</div> <div class="timestamp">09:25</div>
<input class="timestamp-input" type="text"/> <input class="timestamp-input" type="text"/>
@ -228,7 +228,7 @@
<div class="notes">Some notes should go here, but they should be hidden by default</div> <div class="notes">Some notes should go here, but they should be hidden by default</div>
</div> </div>
<div class="entry"> <div class="entry">
<div class="mark">ITHelp: Working #7700.</div> <div class="mark"><img src="img/round_delete_icon&16.png" class="delete-icon"/><span>ITHelp: Working #7700.</span><img src="img/notepad_2_icon&16.png" class="notes-icon"/></div>
<input class="mark-input" type="text"/> <input class="mark-input" type="text"/>
<div class="timestamp">09:17</div> <div class="timestamp">09:17</div>
<input class="timestamp-input" type="text"/> <input class="timestamp-input" type="text"/>

4
yaws.dev.conf
View File

@ -1,4 +1,4 @@
ebin_dir = T:/projects/jdb-labs/timestamper/web-app/ebin ebin_dir = /home/jdbernard/projects/jdb-labs/timestamper/web-app/ebin
#include_dir = /home/jdbernard/projects/timestamper/web-app/src #include_dir = /home/jdbernard/projects/timestamper/web-app/src
runmod = timestamper_dev runmod = timestamper_dev
@ -6,6 +6,6 @@ runmod = timestamper_dev
<server timestamper-local> <server timestamper-local>
port = 8000 port = 8000
listen = 127.0.0.1 listen = 127.0.0.1
docroot = T:/projects/jdb-labs/timestamper/web-app/www docroot = /home/jdbernard/projects/jdb-labs/timestamper/web-app/www
appmods = ts_api appmods = ts_api
</server> </server>