Replace the privacy selector with the combined Save / Privacy settings button

 * Move the annotation privacy label below the button. The label's
   height may vary depending on the selected option, so moving it
   below the button avoids changing the button's position when
   a different option is selected from the dropdown.

 * Remove the previous separate privacy dropdown and replace with
   the combined button.

 * Use flexbox to simplify layout of the annotation form actions

Card 89

h/static/scripts/directive/annotation.coffee

@@ -127,6 +127,12 @@ AnnotationController = [
     this.setShared = ->
       model.permissions = permissions.public(model.group)
 
+    this.setPrivacy = (privacy) ->
+      if privacy == 'private'
+        this.setPrivate()
+      else if privacy == 'shared'
+        this.setShared()
+
     ###*
     # @ngdoc method
     # @name annotation.AnnotationController#authorize

h/static/styles/annotations.scss

@@ -192,3 +192,11 @@ privacy {
     }
   }
 }
+
+// the actions for publishing annotations and reverting changes
+// at the bottom of an annotation card
+.annotation-form-actions {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 10px;
+}

h/templates/client/annotation.html

@@ -34,14 +34,6 @@
             ng-bind-html="vm.document | documentDomain"
             ng-if="!vm.embedded">
       </span>
-
-      <!-- Editing controls -->
-      <aside class="pull-right" ng-if="vm.editing">
-        <privacy ng-click="$event.stopPropagation()"
-                 ng-if="vm.annotation.permissions && vm.editing && action != 'delete'"
-                 model="annotation">
-      </aside>
-      <!-- / Editing controls -->
     </span>
 
 
@@ -118,6 +110,20 @@
   <!-- / Tags -->
 
   <footer class="annotation-footer">
+    <div class="annotation-form-actions" ng-if="vm.editing" ng-switch="vm.action">
+      <button ng-switch-when="delete"
+              ng-click="vm.save()"
+              class="primary-action-btn"><i class="h-icon-check btn-icon"></i> Delete</button>
+      <publish-annotation-btn
+        group="vm.group()"
+        is-shared="vm.isShared()"
+        on-save="vm.save()"
+        on-set-privacy="vm.setPrivacy(level)"></publish-annotation-btn>
+      <button class="btn btn-clean"
+              ng-click="vm.revert()"
+              ><i class="h-icon-cancel btn-icon"></i> Cancel</button>
+    </div>
+
     <div class="small" ng-if="vm.editing">
       <p ng-if="vm.isPrivate()">
         <i class="h-icon-lock"></i>
@@ -133,23 +139,6 @@
       </p>
     </div>
 
-    <div class="form-actions" ng-if="vm.editing" ng-switch="vm.action">
-      <div class="form-actions-buttons form-actions-left">
-        <button ng-switch-when="edit"
-                ng-click="vm.save()"
-                class="btn"><i class="h-icon-check btn-icon"></i> Save</button>
-        <button ng-switch-when="delete"
-                ng-click="vm.save()"
-                class="btn"><i class="h-icon-check btn-icon"></i> Delete</button>
-        <button ng-switch-default
-                ng-click="vm.save()"
-                class="btn"><i class="h-icon-check btn-icon"></i> Save</button>
-        <button class="btn btn-clean"
-                ng-click="vm.revert()"
-                ><i class="h-icon-cancel btn-icon"></i> Cancel</button>
-      </div>
-    </div>
-
     <div class="annotation-section annotation-license"
          ng-show="vm.isShared() && vm.editing">
       <a href="http://creativecommons.org/publicdomain/zero/1.0/"