Merge pull request rapidpro#90 from praekelt/OPENHELPD-61-add-clearer…

…-time-based-info Openhelpd 61 add clearer time based info
BlueRidgeLabs · Aug 18, 2016 · 5f4895d · 5f4895d
2 parents 418e30b + 974a46a
commit 5f4895d
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 21 deletions.
diff --git a/karma/test-directives.coffee b/karma/test-directives.coffee
@@ -5,17 +5,19 @@ describe('directives:', () ->
   $rootScope = null
   $templateCache = null
   $q = null
+  $filter = null
 
   beforeEach(() ->
     module('templates')
     module('cases')
     module('templates')
 
-    inject((_$compile_, _$rootScope_, _$templateCache_, _$q_) ->
+    inject((_$compile_, _$rootScope_, _$templateCache_, _$q_, _$filter_) ->
       $compile = _$compile_
       $rootScope = _$rootScope_
       $templateCache = _$templateCache_
       $q = _$q_
+      $filter = _$filter_
     )
   )
 
@@ -61,6 +63,31 @@ describe('directives:', () ->
     )
   )
 
+  #=======================================================================
+  # Tests for tooltip
+  #=======================================================================
+  describe('cpDateTooltip', () ->
+
+    it('adds an element with a tooltip to the dom', () ->
+      $scope = $rootScope.$new()
+      $scope.time = new Date "December 25, 2016 23:15:00"
+
+      template = $compile('<cp-date-tooltip time=time position="top-right" />')
+      element = template($scope)[0]
+      $rootScope.$digest()
+
+      autodate = $filter('autodate')
+      expect(element.textContent).toMatch(autodate($scope.time))
+
+      div = element.querySelector('div')
+      expect(div.hasAttribute("uib-tooltip")).toBe(true)
+      fulldate = $filter('fulldate')
+      expect(div.getAttribute("uib-tooltip")).toMatch(fulldate($scope.time))
+      expect(div.hasAttribute("tooltip-placement")).toBe(true)
+      expect(div.getAttribute("tooltip-placement")).toMatch("top")
+    )
+  )
+
   describe('fieldvalue', () ->
     $filter = null
 

diff --git a/static/coffee/directives.coffee b/static/coffee/directives.coffee
@@ -77,3 +77,15 @@ directives.directive('cpAlerts', -> {
 directives.directive('cpPod', -> {
   templateUrl: -> '/sitestatic/templates/pod.html'
 })
+
+#=====================================================================
+# Tooltip directive
+# Shows 'displayText' with a tooltip at 'position' containing 'tooltipText'
+#=====================================================================
+directives.directive('cpDateTooltip', () ->
+  return {
+    restrict: 'E',
+    scope: {time: '=', position: '@'},
+    templateUrl: '/sitestatic/templates/tooltip.html',
+  }
+)
diff --git a/static/templates/tooltip.html b/static/templates/tooltip.html
@@ -0,0 +1,3 @@
+<div uib-tooltip="[[ time | fulldate ]]" tooltip-placement="{{ position }}">
+    [[ time | autodate ]]
+</div>
diff --git a/templates/cases/case_read.haml b/templates/cases/case_read.haml
@@ -82,10 +82,7 @@
         .timeline{ ng-controller:"CaseTimelineController", ng-init:"init()" }
           .timeline-event.clearfix{ ng-repeat:"event in timeline | reverse", ng-class:'{ "timeline-action": (event.type == "A"), "timeline-incoming": (event.type == "I"), "timeline-outgoing": (event.type == "O") }' }
             .event-time
-              %span.short
-                [[ event.time | autodate ]]
-              %span.long.hide
-                [[ event.time | fulldate ]]
+              <cp-date-tooltip time=event.time position="top-right" />
 
             .{ ng-if:'event.type == "A"' }
               %span{ ng-if:'event.item.created_by.name == "System"'}
@@ -199,16 +196,6 @@
 
 - block extra-script
   {{ block.super }}
-  :javascript
-    $(function() {
-        $('.timeline').on('mouseover', '.event-time', function() {
-          $(this).children('.long').removeClass('hide');
-          $(this).children('.short').addClass('hide');
-        }).on('mouseleave', '.event-time', function() {
-          $(this).children('.short').removeClass('hide');
-          $(this).children('.long').addClass('hide');
-        });
-    });
 
   - for pod_type in pod_types
     - for script in pod_type.scripts

diff --git a/templates/cases/inbox_cases.haml b/templates/cases/inbox_cases.haml
@@ -23,7 +23,7 @@
     .cases{ infinite-scroll:"loadOldItems(false)", infinite-scroll-disabled:"!isInfiniteScrollEnabled()" }
       .stackitem.clearfix.hoverable{ ng-repeat:"item in items | filter: getItemFilter()", ng-click:"onClickCase(item)" }
         .case-time
-          [[ item.opened_on | autodate ]]
+          <cp-date-tooltip time=item.opened_on position="top-right" />
         .case-text
           %span.label-container{ ng-if:"!item.user_assignee" }
             %span.label.label-warning

diff --git a/templates/cases/inbox_messages.haml b/templates/cases/inbox_messages.haml
@@ -137,7 +137,7 @@
           %a.flag{ ng-click:"onToggleMessageFlag(item)" }
             %i.glyphicon.glyphicon-flag
         .message-time
-          [[ item.time | autodate ]]
+          <cp-date-tooltip time=item.time position="top-right" />
         .message-contact
           %a{ ng-click:"activateContact(item.contact)" }><
             <cp-contact contact="item.contact" fields="fields">

diff --git a/templates/cases/inbox_outgoing.haml b/templates/cases/inbox_outgoing.haml
@@ -32,7 +32,7 @@
     .messages{ infinite-scroll:"loadOldItems(false)", infinite-scroll-disabled:"!isInfiniteScrollEnabled()" }
       .stackitem.clearfix.hoverable{ ng-repeat:"item in items" }
         .message-time
-          [[ item.time | autodate ]]
+          <cp-date-tooltip time=item.time position="top-right" />
         .message-sender
           %a{ ng-href:"/user/read/[[ item.sender.id ]]/" }><
             [[ item.sender.name ]]

diff --git a/templates/cases/partner_read.haml b/templates/cases/partner_read.haml
@@ -120,7 +120,7 @@
                 %tbody
                   %tr{ ng-repeat:"item in items" }
                     %td{ nowrap:"" }
-                      [[ item.time | autodate ]]
+                      <cp-date-tooltip time=item.time position="top-left" />
                     %td
                       %a{ ng-href:"/user/read/[[ item.sender.id ]]/" }><
                         [[ item.sender.name ]]

diff --git a/templates/contacts/contact_read.haml b/templates/contacts/contact_read.haml
@@ -41,7 +41,7 @@
           .list-group
             %a.list-group-item{ ng-repeat:"item in cases", ng-href:"/case/read/[[ item.id ]]/" }
               .case-time
-                [[ item.opened_on | autodate ]]
+                <cp-date-tooltip time=item.opened_on position="top-right" />
               .case-text
                 %span.label-container
                   %span.label.label-warning

diff --git a/templates/partials/modal_messagehistory.haml b/templates/partials/modal_messagehistory.haml
@@ -7,7 +7,7 @@
     .message-history
       .action.stackitem{ ng-repeat:"action in actions" }
         .action-time
-          [[ action.created_on | autodate ]]
+          <cp-date-tooltip time=action.created_on position="top-right" />
 
         %span{ ng-if:'action.action == "F"' }
           Flagged