Task notes modals (#8521)

* Merged in develop

* Show task notes modal on click

* Began adding tests

* Removed extra characters

* Fixed lingering popup

* Added markdown

* Fixed line endings

test/client-old/spec/directives/task.directive.js

@@ -0,0 +1,35 @@
+describe('task Directive', () => {
+  var compile, scope, directiveElem, $modal;
+
+  beforeEach(function(){
+    module(function($provide) {
+      $modal = {
+        open: sandbox.spy(),
+      };
+      $provide.value('$modal', $modal);
+    });
+
+    inject(function($compile, $rootScope, $templateCache) {
+      compile = $compile;
+      scope = $rootScope.$new();
+
+      $templateCache.put('templates/task.html', '<div>Task</div>');
+    });
+
+
+    directiveElem = getCompiledElement();
+  });
+
+  function getCompiledElement(){
+    var element = angular.element('<task></task>');
+    var compiledElement = compile(element)(scope);
+    scope.$digest();
+    return compiledElement;
+  }
+
+  xit('opens task note modal', () => {
+    scope.showNoteDetails();
+
+    expect($modal.open).to.be.calledOnce;
+  });
+})

website/client-old/js/directives/task.directive.js

@@ -7,9 +7,10 @@
 
   task.$inject = [
     'Shared',
+    '$modal',
   ];
 
-  function task(Shared) {
+  function task(Shared, $modal) {
     return {
       restrict: 'E',
       templateUrl: 'templates/task.html',
@@ -18,6 +19,22 @@
         $scope.getClasses = function (task, user, list, main) {
           return Shared.taskClasses(task, user.filters, user.preferences.dayStart, user.lastCron, list.showCompleted, main);
         }
+
+        $scope.showNoteDetails = function (task) {
+          task.popoverOpen = false;
+
+          $modal.open({
+            templateUrl: 'modals/task-extra-notes.html',
+            controller: function ($scope, task) {
+              $scope.task = task;
+            },
+            resolve: {
+              task: function() {
+                return task;
+              }
+            }
+          })
+        };
       }
     }
   }

website/common/locales/en/tasks.json

@@ -164,6 +164,7 @@
     "confirmScoreNotes": "Confirm task scoring with notes",
     "taskScoreNotesTooLong": "Task score notes must be less than 256 characters",
     "groupTasksByChallenge": "Group tasks by challenge title",
+    "taskNotes": "Task Notes",
     "monthlyRepeatHelpContent": "This task will be due every X months",
     "yearlyRepeatHelpContent": "This task will be due every X years"
 }

website/views/shared/modals/index.jade

@@ -26,6 +26,7 @@ include ./login-incentives-reward-unlocked.jade
 include ./generic.jade
 include ./tasks-edit.jade
 include ./task-notes.jade
+include ./task-extra-notes.jade
 
 //- Settings
 script(type='text/ng-template', id='modals/change-day-start.html')

website/views/shared/modals/task-extra-notes.jade

@@ -0,0 +1,10 @@
+script(id='modals/task-extra-notes.html', type='text/ng-template')
+  .modal-header
+    h4=env.t('taskNotes')
+
+  .modal-body
+    div
+      markdown(text='task.notes')
+
+  .modal-footer
+    .btn.btn-primary(ng-click="$close()")=env.t('close')

website/views/shared/tasks/meta_controls.jade

@@ -67,6 +67,6 @@
     // notes
 
   // Make this icon available regardless of task ownership
-  a.task-notes(ng-show='task.notes && !task._editing', ng-click='task.popoverOpen = !task.popoverOpen', popover-trigger='click', data-popover-html="{{task.notes | markdown}}", popover-placement="top", popover-append-to-body='{{::modal ? "false":"true"}}')
+  a.task-notes(ng-show='task.notes && !task._editing', ng-click='showNoteDetails(task);', popover-trigger='hover', data-popover-html="{{task.notes | markdown}}", popover-placement="top", popover-append-to-body='{{::modal ? "false":"true"}}')
     span.glyphicon.glyphicon-comment
     |