Made Tag tooltups in search items deletable, improved UX of the toolt…

…ip quite a bit
startupstorm · Jun 9, 2014 · f805281 · f805281
1 parent 36f81ce
commit f805281
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 18 deletions.
diff --git a/static/default/html/partials/search_item.html b/static/default/html/partials/search_item.html
@@ -23,26 +23,26 @@
   </td>
   <td class="from">
     <a href="{{url}}" title="{{metadata.from.fn}} &lt;{{from.address}}&gt;">
-    {% if metadata.from.fn %}{{ metadata.from.fn|nice_name(28) }}{% else %}({{_("No Name")}}){% endif %}</a>
-    {% if conversation_count > 1 %}<span class="conversation-count">{{conversation_count}}</span>{% endif %}
-    {% if metadata.flags.replied %}<span class="icon-reply"></span>{% endif %}
+      {% if metadata.from.fn %}{{ metadata.from.fn|nice_name(28) }}{% else %}({{_("No Name")}}){% endif %}
+      {% if conversation_count > 1 %}<span class="conversation-count">{{conversation_count}}</span>{% endif %}
+      {% if metadata.flags.replied %}<span class="icon-reply"></span>{% endif %}
+    </a>
   </td>
   <td class="subject">
-    <a class="item-subject" href="{{url}}">
     <span class="item-tags">
     {% if has_label_tags(result.data.tags, metadata.tag_tids) %}
     {% for tid in metadata.tag_tids %}
       {% set tag = result.data.tags[tid] %}
       {% if tag.label and not tag.searched %}
-      <span class="pile-message-tag" style="color: {{theme_settings().colors[tag.label_color]}}" data-tid="{{tag.tid}}">
+      <span class="pile-message-tag" id="pile-message-tag-{{tag.tid}}-{{mid}}" style="color: {{theme_settings().colors[tag.label_color]}}" data-tid="{{tag.tid}}" data-mid="{{mid}}">
         <span class="pile-message-tag-icon {{tag.icon}}"></span>
         <span class="pile-message-tag-name">{{tag.name}}</span>
       </span>
       {% endif %}
     {% endfor %}
     {% endif %}
     </span>
-    {% if metadata.subject %}{{ metadata.subject|nice_subject }}{% else %}({{_("No Subject")}}){% endif %}</a>
+    <a class="item-subject" href="{{url}}">{% if metadata.subject %}{{ metadata.subject|nice_subject }}{% else %}({{_("No Subject")}}){% endif %}</a>
   </td>
   <td class="date">
     <a href="/search/dates:{{metadata.date}}/">{{metadata.timestamp|elapsed_datetime}}</a>

diff --git a/static/default/html/partials/tooltips.html b/static/default/html/partials/tooltips.html
@@ -1,8 +1,7 @@
 <script id="tooltip-pile-tag-details" type="text/template">
   <div>
-    <h4 class="text-center" style="color: <%= label_color %> "><span class=" <%= icon %> "></span> <%= name %></h4>
-    <p>This tag has <strong><%= stats.new %> new</strong> and <strong> <%= stats.all %> total</strong> messages</p>
-    <p><a href="<%= url %>"><span class="icon-links"></span> Browse Tag</a></p>
-    <p><a href="<%= tid %>"><span class="icon-circle-x"></span> Remove Tag</a></p>
+    <h4 class="text-center" style="color: <%= new_mailpile.theme.colors[label_color] %> "><span class=" <%= icon %> "></span> <%= name %></h4>
+    <p><a href="<%= url %>" data-mid="<%= mid %>"><span class="icon-links"></span> {{_("Browse Tag")}}</a></p>
+    <p><a href="#" data-tid="<%= tid %>" data-mid="<%= mid %>" class="pile-tag-delete"><span class="icon-circle-x"></span> {{_("Remove Tag")}}</a></p>
   </div>
 </script>
diff --git a/static/default/js/app/pile.js b/static/default/js/app/pile.js
@@ -33,6 +33,7 @@ MailPile.prototype.pile_action_unselect = function(item) {
 	.prop('checked', false);
 };
 
+
 /* Pile - Display */
 MailPile.prototype.pile_display = function(current, change) {
 
@@ -51,6 +52,7 @@ MailPile.prototype.pile_display = function(current, change) {
 
 }
 
+
 /* Pile - Bulk Select / Unselect All */
 $(document).on('click', '#pile-select-all-action', function(e) {
 
@@ -73,17 +75,23 @@ $(document).on('click', '#pile-select-all-action', function(e) {
 
 /* Pile - Select & Unselect Items */
 $(document).on('click', '#pile-results tr.result', function(e) {
-	if (e.target.href === undefined && $(this).data('state') !== 'selected') {
+  console.log()
+	if (e.target.href === undefined &&
+      $(this).data('state') !== 'selected' &&
+      $(e.target).hasClass('pile-message-tag-name') == false) {
 		mailpile.pile_action_select($(this));		
 	}
 });
 
 $(document).on('click', '#pile-results tr.result-on', function(e) {
-	if (e.target.href === undefined && $(this).data('state') === 'selected') {
+	if (e.target.href === undefined &&
+      $(this).data('state') === 'selected' && 
+      $(e.target).hasClass('pile-message-tag-name') == false) {
 		mailpile.pile_action_unselect($(this));
 	}
 });
 
+
 /* Pile - Show Unread */
 $(document).on('click', '.button-sub-navigation', function() {
 
@@ -270,9 +278,21 @@ MailPile.prototype.sidebar_tags_droppable_opts = {
   }
 };
 
+/* Make Pile items draggable to sidebar */
 $('li.sidebar-tags-draggable').droppable(mailpile.sidebar_tags_droppable_opts);
 
 
+/* Tag Tooltip - Actions */
+$(document).on('click', '.pile-tag-delete', function(e) {
+  e.preventDefault();
+  var tid = $(this).data('tid');
+  var mid = $(this).data('mid');
+  mailpile.tag_add_delete([], tid, mid, function(result) {
+    $('#pile-message-tag-' + tid + '-' + mid).qtip('hide').remove();
+  });
+});
+
+
 $(document).ready(function() {
 
   // Render Display Size
@@ -294,10 +314,9 @@ $(document).ready(function() {
     content: {
       title: false,
       text: function(event, api) {
-        var tag = _.findWhere(mailpile.instance.tags, { tid: $(this).data('tid').toString() });              
-        var template = $('#tooltip-pile-tag-details').html();
-        var html = _.template(template, tag);
-        return html;
+        var tooltip_data = _.findWhere(mailpile.instance.tags, { tid: $(this).data('tid').toString() });              
+        tooltip_data['mid'] = $(this).data('mid');
+        return  _.template($('#tooltip-pile-tag-details').html(), tooltip_data);
       }
     },
     style: {
@@ -319,10 +338,12 @@ $(document).ready(function() {
 			}
     },
     show: {
+      event: 'click',
       delay: 150
     },
     hide: {
-      delay: 1000
+      event: false,
+      inactive: 700
     }
   });
 

diff --git a/static/default/less/app/pile.less b/static/default/less/app/pile.less
@@ -29,7 +29,7 @@
 
 	#pile-results tr a        { font-size: 14px; font-weight: normal; color: inherit; }
 	#pile-results tr.in_new a { font-weight: bold;}
-  #pile-results td span.pile-message-tag { font-weight: bold; margin-right: 5px; }
+  #pile-results td span.pile-message-tag { font-weight: bold; margin-right: 5px; cursor: pointer; }
 
   #pile-results td.draggable       { width: 12px; cursor: move; }
   #pile-results td.draggable:hover { cursor: move; }