Reduce contrast and color of hidden annotations

Provide additional visual cues to indicate that annotations have been
hidden by striking through their text and applying a greyscale and
contrast filter.

See https://github.com/hypothesis/product-backlog/issues/183 for
designs.

src/sidebar/components/annotation.js

@@ -505,6 +505,10 @@ function AnnotationController(
     return streamer.hasPendingDeletion(vm.annotation.id);
   };
 
+  vm.isHiddenByModerator = function () {
+    return annotationUI.isHiddenByModerator(vm.annotation.id);
+  };
+
   vm.isReply = function () {
     return isReply(vm.annotation);
   };

src/sidebar/components/test/annotation-test.js

@@ -84,6 +84,7 @@ describe('annotation', function() {
     var $window;
     var fakeAnalytics;
     var fakeAnnotationMapper;
+    var fakeAnnotationUI;
     var fakeDrafts;
     var fakeFlash;
     var fakeGroups;
@@ -116,7 +117,12 @@ describe('annotation', function() {
 
     before(function() {
       angular.module('h', [])
-        .component('annotation', annotationComponent());
+        .component('annotation', annotationComponent())
+        .component('markdown', {
+          bindings: {
+            textClass: '<?',
+          },
+        });
     });
 
     beforeEach(angular.mock.module('h'));
@@ -141,7 +147,9 @@ describe('annotation', function() {
         flagAnnotation: sandbox.stub(),
       };
 
-      var fakeAnnotationUI = {};
+      fakeAnnotationUI = {
+        isHiddenByModerator: sandbox.stub().returns(false),
+      };
 
       fakeDrafts = {
         update: sandbox.stub(),
@@ -1041,5 +1049,16 @@ describe('annotation', function() {
       var el = createDirective(ann).element;
       assert.equal(el[0].querySelector('blockquote').textContent, '<<-&->>');
     });
+
+    it('renders hidden annotations with a custom text class', function () {
+      var ann = fixtures.defaultAnnotation();
+      fakeAnnotationUI.isHiddenByModerator.returns(true);
+      var el = createDirective(ann).element;
+      assert.deepEqual(el.find('markdown').controller('markdown'), {
+        textClass: {
+          'annotation-body is-hidden': true,
+        },
+      });
+    });
   });
 });

src/sidebar/directive/markdown.js

@@ -167,6 +167,7 @@ module.exports = function($sanitize) {
     scope: {
       readOnly: '<',
       text: '<?',
+      textClass: '<?',
       onEditText: '&',
     },
     template: require('../templates/markdown.html'),

src/sidebar/directive/test/markdown-test.js

@@ -250,4 +250,15 @@ describe('markdown', function () {
       assert.isFalse(isPreviewing());
     });
   });
+
+  describe('custom text class', function () {
+    it('should apply custom text class to text container', function () {
+      var editor = util.createDirective(document, 'markdown', {
+        readOnly: true,
+        textClass: 'fancy-effect',
+      });
+      var viewEl = viewElement(editor);
+      assert.include(viewEl.className, 'fancy-effect');
+    });
+  });
 });

src/sidebar/templates/annotation.html

@@ -82,6 +82,7 @@
       overflow-hysteresis="20"
       content-data="vm.state().text">
       <markdown text="vm.state().text"
+                text-class="{'annotation-body is-hidden':vm.isHiddenByModerator()}"
                 on-edit-text="vm.setText(text)"
                 read-only="!vm.editing()">
       </markdown>

src/sidebar/templates/markdown.html

@@ -17,6 +17,6 @@
           ng-show="showEditor()"
           ng-click="$event.stopPropagation()"></textarea>
 <div class="markdown-body js-markdown-preview"
-     ng-class="preview && 'markdown-preview'"
+     ng-class="(preview && 'markdown-preview') || textClass"
      ng-dblclick="togglePreview()"
      ng-show="!showEditor()"></div>

src/styles/annotation.scss

@@ -102,6 +102,11 @@
   margin-left: 0px;
 }
 
+.annotation-body.is-hidden {
+  text-decoration: line-through;
+  filter: grayscale(100%) contrast(65%);
+}
+
 // the footer at the bottom of an annotation displaying
 // the annotation actions and reply counts
 .annotation-footer {