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.
parent a368bafa
...@@ -1120,7 +1120,7 @@ describe('annotation', function() { ...@@ -1120,7 +1120,7 @@ describe('annotation', function() {
it('flags the annotation when the user clicks the "Flag" button', function () { it('flags the annotation when the user clicks the "Flag" button', function () {
fakeAnnotationMapper.flagAnnotation.returns(Promise.resolve()); fakeAnnotationMapper.flagAnnotation.returns(Promise.resolve());
var el = createDirective().element; var el = createDirective().element;
var flagBtn = findActionButton(el, 'Flag'); var flagBtn = findActionButton(el, 'Report this annotation to the moderators');
flagBtn.onClick(); flagBtn.onClick();
assert.called(fakeAnnotationMapper.flagAnnotation); assert.called(fakeAnnotationMapper.flagAnnotation);
}); });
...@@ -1128,7 +1128,7 @@ describe('annotation', function() { ...@@ -1128,7 +1128,7 @@ describe('annotation', function() {
it('highlights the "Flag" button if the annotation is flagged', function () { it('highlights the "Flag" button if the annotation is flagged', function () {
var ann = Object.assign(fixtures.defaultAnnotation(), { flagged: true }); var ann = Object.assign(fixtures.defaultAnnotation(), { flagged: true });
var el = createDirective(ann).element; 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); assert.ok(flaggedBtn);
}); });
}); });
......
...@@ -145,14 +145,14 @@ ...@@ -145,14 +145,14 @@
<annotation-action-button <annotation-action-button
icon="'h-icon-annotation-flag'" icon="'h-icon-annotation-flag'"
is-disabled="vm.isDeleted()" is-disabled="vm.isDeleted()"
label="'Flag'" label="'Report this annotation to the moderators'"
ng-if="!vm.isFlagged()" ng-if="!vm.isFlagged()"
on-click="vm.flag()" on-click="vm.flag()"
></annotation-action-button> ></annotation-action-button>
<annotation-action-button <annotation-action-button
icon="'h-icon-annotation-flag annotation--flagged'" icon="'h-icon-annotation-flag annotation--flagged'"
is-disabled="vm.isDeleted()" is-disabled="vm.isDeleted()"
label="'Annotation has been flagged'" label="'Annotation has been reported to the moderators'"
ng-if="vm.isFlagged()" ng-if="vm.isFlagged()"
></annotation-action-button> ></annotation-action-button>
</span> </span>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment