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
Download Patch File Download Diff File Expand all files Collapse all files

42
www/prototype.html
View File

@ -53,7 +53,7 @@
<div id="entries">
<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"/>
<div class="timestamp">12:32</div>
<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>
<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"/>
<div class="timestamp">9:56</div>
<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>
<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"/>
<div class="timestamp">9:10</div>
<input class="timestamp-input" type="text"/>
@ -82,7 +82,7 @@
<h5 class='duration'>duration</h5>
</div>
<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"/>
<div class="timestamp">3:12 pm</div>
<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>
<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"/>
<div class="timestamp">11:47 am</div>
<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>
<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"/>
<div class="timestamp">9:20 am</div>
<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>
<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"/>
<div class="timestamp">9:11 am</div>
<input class="timestamp-input" type="text"/>
@ -119,7 +119,7 @@
<h5 class='duration'>duration</h5>
</div>
<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"/>
<div class="timestamp">16:41</div>
<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>
<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"/>
<div class="timestamp">10:30</div>
<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>
<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"/>
<div class="timestamp">8:40</div>
<input class="timestamp-input" type="text"/>
@ -148,7 +148,7 @@
<h5 class='duration'>duration</h5>
</div>
<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"/>
<div class="timestamp">16:09</div>
<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>
<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"/>
<div class="timestamp">15:12</div>
<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>
<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"/>
<div class="timestamp">15:09</div>
<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>
<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"/>
<div class="timestamp">14:44</div>
<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>
<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"/>
<div class="timestamp">14:41</div>
<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>
<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"/>
<div class="timestamp">14:00</div>
<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>
<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"/>
<div class="timestamp">13:05</div>
<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>
<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"/>
<div class="timestamp">12:40</div>
<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>
<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"/>
<div class="timestamp">10:30</div>
<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>
<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"/>
<div class="timestamp">09:25</div>
<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>
<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"/>
<div class="timestamp">09:17</div>
<input class="timestamp-input" type="text"/>