From e64fa1920bde0b73d9e587f783d7a9a577012bba Mon Sep 17 00:00:00 2001
From: Sean Hammond <git@snhmnd.fastmail.com>
Date: Wed, 26 Apr 2017 16:24:29 +0100
Subject: [PATCH] Clarify in tooltip what flag button does

The flag button on an annotation has a tooltip that says simply "Flag"
(or "Annotation has been flagged" if it's already flagged) but there's
no indication to the user what flagging is or does (even when they click
the button, all that happens is the flag turns red).

"Flagging" can certainly be misinterpreted. I think some apps use it as
a way to keep track of "special" or "favorite" items (usually called
"starring" in most modern apps), or have a variety of different "flags"
that you can apply to an email or whatever it is (important, work,
personal, etc, this is usually called "tagging" or "labelling" in most
modern apps).

This commit changes the tooltips to clarify that what the button does is
report the annotation to the moderators. I've used the verb "report"
rather than "flag" as I think "Report this annotation to the moderators"
sounds better than "Flag this annotation to the moderators".  Either way
I think "to the moderators" is important to clarify that this button
sends a message to the moderators and isn't, for example, just flagging
for personal use like starring / tagging / labeling.
---
 src/sidebar/components/test/annotation-test.js | 4 ++--
 src/sidebar/templates/annotation.html          | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/sidebar/components/test/annotation-test.js b/src/sidebar/components/test/annotation-test.js
index a9b8913fa88..8ed11be40da 100644
--- a/src/sidebar/components/test/annotation-test.js
+++ b/src/sidebar/components/test/annotation-test.js
@@ -1120,7 +1120,7 @@ describe('annotation', function() {
     it('flags the annotation when the user clicks the "Flag" button', function () {
       fakeAnnotationMapper.flagAnnotation.returns(Promise.resolve());
       var el = createDirective().element;
-      var flagBtn = findActionButton(el, 'Flag');
+      var flagBtn = findActionButton(el, 'Report this annotation to the moderators');
       flagBtn.onClick();
       assert.called(fakeAnnotationMapper.flagAnnotation);
     });
@@ -1128,7 +1128,7 @@ describe('annotation', function() {
     it('highlights the "Flag" button if the annotation is flagged', function () {
       var ann = Object.assign(fixtures.defaultAnnotation(), { flagged: true });
       var el = createDirective(ann).element;
-      var flaggedBtn = findActionButton(el, 'Annotation has been flagged');
+      var flaggedBtn = findActionButton(el, 'Annotation has been reported to the moderators');
       assert.ok(flaggedBtn);
     });
   });
diff --git a/src/sidebar/templates/annotation.html b/src/sidebar/templates/annotation.html
index 4d4f818ac8b..a8d1671e2c3 100644
--- a/src/sidebar/templates/annotation.html
+++ b/src/sidebar/templates/annotation.html
@@ -145,14 +145,14 @@
         <annotation-action-button
          icon="'h-icon-annotation-flag'"
          is-disabled="vm.isDeleted()"
-         label="'Flag'"
+         label="'Report this annotation to the moderators'"
          ng-if="!vm.isFlagged()"
          on-click="vm.flag()"
         ></annotation-action-button>
         <annotation-action-button
          icon="'h-icon-annotation-flag annotation--flagged'"
          is-disabled="vm.isDeleted()"
-         label="'Annotation has been flagged'"
+         label="'Annotation has been reported to the moderators'"
          ng-if="vm.isFlagged()"
         ></annotation-action-button>
       </span>