General <taskMeta:> component for handling charts, edit, and whatever

else might come along

src/app/index.coffee

@@ -240,7 +240,7 @@ ready (model) ->
     # Derby extends model.at to support creation from DOM nodes
     model.at(e.target).remove()
     
-  exports.toggleEdit = (e, el) ->
+  exports.toggleMeta = (e, el) ->
     selector = $(el).attr('data-selector')
     if selector.charAt(0) == '$'
       selector = '\\' + selector

styles/app/index.styl

@@ -44,7 +44,7 @@ h1.todos, h1.rewards
 .task:hover
   cursor: move
   
-li:hover .task-meta .edit-link
+li:hover .task-meta-controls .hover-show
   display: inline  
 
 .task
@@ -56,14 +56,14 @@ li:hover .task-meta .edit-link
     line-height: 18px
     color: black
 
-  .task-meta
+  .task-meta-controls
     float:right
     
   .task-controls,.task-text
     display:inline
     margin-right:10px
 
-  .task-meta .edit-link
+  .task-meta-controls .hover-show
     display: none;
 
   .vote-up, .vote-down

views/app/index.html

@@ -103,10 +103,15 @@
 <task:>
   <li data-id={{:task.id}} class="task {taskClasses(:task.type, :task.completed, :task.value, _hideCompleted)}">
     <pre>
-    <div class="task-meta">
+    <div class="task-meta-controls">
       <!-- TODO make this a popover -->    
       
-      <a x-bind=click:toggleEdit data-selector="{{:task.id}}-edit" class="edit-link"><i class="icon-pencil"></i></a>
+      <div class="hover-show">
+        <a x-bind=click:toggleMeta data-selector="{{:task.id}}-edit" class="edit-link"><i class="icon-pencil"></i></a>
+        {#if :task.history} 
+          <a x-bind=click:toggleMeta data-selector="{{:task.id}}-chart" class="chart-link"><i class="icon-signal"></i></a>
+        {/}
+      </div>
       
       <!--<a class="edit-link" href="#/<%= id %>/edit">Edit</a>-->
       {#if :task.notes}
@@ -129,11 +134,11 @@
     </div>
     <div class="task-text" x-bind=keydown:shortcuts contenteditable>{unescaped :task.text}</div>
 
-    <app:editPopover />
+    <app:taskMeta />
     </pre>
   </li>
   
-<editPopover:>
+<taskMeta:>
   <div style="display:none;" id={{:task.id}}-edit>
     <hr/>
     <form x-bind=submit:toggleEdit data-selector="{{:task.id}}-edit">
@@ -159,16 +164,15 @@
       <button type=submit class="btn">Save</button>
       <button x-bind=click:del class="btn btn-danger">Delete</button>
     </form>
-    
-    <div id="{:task.id}-chart">
-      {#each :task.history}
-        Date:<div>{date}</div>
-        Value:<div>{value}</div>
-      {/}
-    </div>
-    
   </div>  
   
+  <div style="display:none;" id={{:task.id}}-chart>
+    <hr/>
+    {#each :task.history}
+      Value: {value} | Date: {date}<br/>
+    {/}
+  </div>
+  
 <Footer:>
   <a href="https://github.com/lefnire/habitrpg"><img style="z-index:11; position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
   <!--<div id="footer">