Add a directive which implements the 'Post to X' button for publishing an annotation

This directive provides a button to publish an annotation
plus a dropdown-menu for changing its privacy settings.

Card 89

h/static/scripts/app.coffee

@@ -149,6 +149,7 @@ module.exports = angular.module('h', [
 .directive('shareDialog', require('./directive/share-dialog'))
 .directive('windowScroll', require('./directive/window-scroll'))
 .directive('primaryActionBtn', require('./directive/primary-action-btn'))
+.directive('publishAnnotationBtn', require('./directive/publish-annotation-btn'))
 
 .filter('converter', require('./filter/converter'))
 .filter('moment', require('./filter/moment'))

h/static/scripts/directive/publish-annotation-btn.js

+// @ngInject
+function PublishAnnotationBtnController($scope) {
+  var vm = this;
+  vm.group = {
+    name: $scope.group.name,
+    type: $scope.group.public ? 'public' : 'group'
+  };
+  vm.showDropdown = false;
+  vm.privateLabel = 'Only Me';
+
+  updatePublishActionLabel();
+
+  this.save = function () {
+    $scope.onSave();
+  };
+
+  this.setShared = function () {
+    $scope.onSetPrivacy({level: 'shared'});
+  }
+
+  this.setPrivate = function () {
+    $scope.onSetPrivacy({level: 'private'});
+  }
+
+  function updatePublishActionLabel() {
+    if ($scope.isShared) {
+      vm.publishDestination = vm.group.name;
+    } else {
+      vm.publishDestination = vm.privateLabel;
+    }
+  }
+  $scope.$watch('isShared', function () {
+    updatePublishActionLabel();
+  });
+}
+
+module.exports = function () {
+  return {
+    controller: PublishAnnotationBtnController,
+    controllerAs: 'vm',
+    restrict: 'E',
+    scope: {
+      group: '=',
+      isShared: '=',
+      onSave: '&',
+      onSetPrivacy: '&'
+    },
+    templateUrl: 'publish_annotation_btn.html'
+  };
+}

h/static/styles/app.scss

@@ -3,11 +3,12 @@
 $base-font-size: 12px;
 $base-line-height: 20px;
 
-@import 'reset';
-@import 'common';
+@import './reset';
+@import './common';
 
 // components
-@import 'primary-action-btn';
+@import './primary-action-btn';
+@import './publish-annotation-btn';
 
 body {
   @extend .noise;

h/static/styles/publish-annotation-btn.scss

+.publish-annotation-btn {
+  &__btn {
+    width: 250px;
+  }
+
+  &__dropdown-menu {
+    width: 100%;
+  }
+}

h/templates/client/publish_annotation_btn.html

+<div dropdown="" class="publish-annotation-btn__btn" is-open="vm.showDropdown">
+  <primary-action-btn
+    label="'Post to ' + vm.publishDestination"
+    ng-click="vm.save()"
+    on-toggle-dropdown="vm.showDropdown = !vm.showDropdown"
+    title="Publish this annotation to {{vm.publishDestination}}"
+    dropdown-menu-label="Change annotation sharing setting">
+  </primary-action-btn>
+  <ul class="dropdown-menu pull-right publish-annotation-btn__dropdown-menu" role="menu">
+    <li ng-click="vm.setShared()">
+      <a href="">
+        <i class="small"
+           ng-class="'h-icon-' + vm.group.type"></i>
+        <span ng-bind="vm.group.name"></span>
+      </a>
+    </li>
+    <li ng-click="vm.setPrivate()">
+      <a href="">
+        <i class="small h-icon-lock"></i>
+        <span ng-bind="vm.privateLabel"></span>
+      </a>
+    </li>
+  </ul>
+</div>