Make annotation permission levels more clear

- Private annotations have the word private as well as the lock icon on the card
- Small styling refinements have been added to make the annotation-license
- Show the word private alongside lock icon.
- Show message explain visibility setting when editing.

h/static/scripts/directive/annotation.coffee

@@ -56,6 +56,7 @@ AnnotationController = [
     @embedded = false
     @hasDiff = false
     @showDiff = undefined
+    @privacyLevel = null
     @timestamp = null
 
     model = $scope.annotationGet()

h/static/scripts/directive/privacy.coffee

@@ -60,6 +60,7 @@ module.exports = ['localStorage', 'permissions', (localStorage, permissions) ->
 
   require: '?ngModel'
   restrict: 'E'
-  scope: {}
+  scope:
+    level: '='
   templateUrl: 'privacy.html'
 ]

h/static/scripts/directive/test/privacy-test.coffee

@@ -61,7 +61,7 @@ describe 'privacy', ->
 
     it 'stores the default visibility level when it changes', ->
       $scope.permissions = {read: ['acct:user@example.com']}
-      $element = $compile('<privacy ng-model="permissions">')($scope)
+      $element = $compile('<privacy ng-model="permissions" level="vm.privacylevel">')($scope)
       $scope.$digest()
       $isolateScope = $element.isolateScope()
       $isolateScope.setLevel(name: VISIBILITY_PUBLIC)
@@ -79,7 +79,7 @@ describe 'privacy', ->
 
         it 'defaults to public', ->
           $scope.permissions = {read: []}
-          $element = $compile('<privacy ng-model="permissions">')($scope)
+          $element = $compile('<privacy ng-model="permissions" level="vm.privacylevel">')($scope)
           $scope.$digest()
           $isolateScope = $element.isolateScope()
           assert.equal $isolateScope.level.name, VISIBILITY_PUBLIC
@@ -89,7 +89,7 @@ describe 'privacy', ->
           fakeLocalStorage.setItem VISIBILITY_KEY, VISIBILITY_PUBLIC
 
           $scope.permissions = {read: []}
-          $element = $compile('<privacy ng-model="permissions">')($scope)
+          $element = $compile('<privacy ng-model="permissions" level="vm.privacylevel">')($scope)
           $scope.$digest()
 
         it 'sets the initial permissions based on the stored privacy level', ->
@@ -106,7 +106,7 @@ describe 'privacy', ->
           fakeLocalStorage.setItem VISIBILITY_KEY, VISIBILITY_PRIVATE
 
           $scope.permissions = {read: ['group:__world__']}
-          $element = $compile('<privacy ng-model="permissions">')($scope)
+          $element = $compile('<privacy ng-model="permissions" level="vm.privacylevel">')($scope)
           $scope.$digest()
           $isolateScope = $element.isolateScope()
           assert.equal($isolateScope.level.name, VISIBILITY_PUBLIC)
@@ -117,14 +117,14 @@ describe 'privacy', ->
 
         it 'fills the permissions fields with the auth.user name', ->
           fakeLocalStorage.setItem VISIBILITY_KEY, VISIBILITY_PRIVATE
-          $element = $compile('<privacy ng-model="permissions">')($scope)
+          $element = $compile('<privacy ng-model="permissions" level="vm.privacylevel">')($scope)
           $scope.$digest()
 
           assert.deepEqual $scope.permissions, fakePermissions.private()
 
         it 'puts group_world into the read permissions for public visibility', ->
           fakeLocalStorage.setItem VISIBILITY_KEY, VISIBILITY_PUBLIC
-          $element = $compile('<privacy ng-model="permissions">')($scope)
+          $element = $compile('<privacy ng-model="permissions" level="vm.privacylevel">')($scope)
           $scope.$digest()
 
           assert.deepEqual $scope.permissions, fakePermissions.public()

h/static/styles/annotations.scss

@@ -79,7 +79,7 @@
 .annotation-license {
   clear: both;
   border-top: #cccccc 1px solid;
-  font-size: 0.9em;
+  font-size: 0.8em;
   padding-top: 0.583em;
 
   a {
@@ -88,8 +88,8 @@
   }
 
   @include icons {
-    font-size: 16px;
-    vertical-align: -3px;
+    font-size: 13px;
+    vertical-align: -2px;
     margin-right: 1px;
   }
 }

h/templates/client/annotation.html

@@ -8,8 +8,11 @@
        target="_blank"
        ng-href="{{vm.baseURI}}u/{{vm.annotation.user}}"
        >{{vm.annotation.user | persona}}</a>
-    <i class="h-icon-lock" ng-show="vm.isPrivate() && !vm.editing"></i>
     <i class="h-icon-border-color" ng-show="vm.isHighlight() && !vm.editing" title="This is a highlight. Click 'edit' to add a note or tag."></i>
+    <span ng-show="vm.isPrivate() && !vm.editing"
+          title="This annotation is viewable only to you.">
+      <i class="h-icon-lock"></i> Private
+    </span>
     <span class="annotation-citation"
           ng-if="!vm.embedded"
           ng-show="vm.document.title">
@@ -24,6 +27,7 @@
       <privacy ng-click="$event.stopPropagation()"
                ng-if="vm.annotation.permissions && vm.editing && action != 'delete'"
                ng-model="vm.annotation.permissions"
+               level="vm.privacyLevel"
                user="{{vm.annotation.user}}"
                class="dropdown privacy pull-right"
                name="privacy" />
@@ -96,6 +100,13 @@
 </div>
 <!-- / Tags -->
 
+<div class="annotation-section small" ng-if="vm.editing">
+  <p ng-show="vm.privacyLevel.text == 'Only Me'">
+    <i class="h-icon-lock"></i> This annotation is viewable only to you.</p>
+  <p ng-show="vm.privacyLevel.text == 'Public'">
+    <i class="h-icon-public"></i> This annotation is viewable to everyone.</p>
+</div>
+
 <div class="annotation-section form-actions"
         ng-if="vm.editing"
         ng-switch="vm.action">