Implement new share dialog design and update google plus icon.

New share dialog enables sharing an annotation on various social media
and a copyable link
https://trello.com/c/9lieEMfd/290-as-a-user-i-can-share-direct-links-to-annotations-with-my-world

* Hide new sharer behind the direct_linking flag
* Update google plus icon

h/static/styles/annotation.scss

@@ -155,6 +155,11 @@ $annotation-card-left-padding: 10px;
   }
 
   &.open .share-dialog {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &.open .share-dialog--actions {
     display: block;
   }
 }
@@ -162,18 +167,20 @@ $annotation-card-left-padding: 10px;
 .share-dialog {
   position: absolute;
   right: 0;
-  bottom: 100%;
-  padding: 3px;
+  bottom: 130%;
   z-index: 1;
-  display: block;
   background: $white;
   border: 1px solid $gray-lighter;
   border-radius: 2px;
   white-space: nowrap;
+  width: 200px;
+  font-size: $body1-font-size;
+  cursor: default;
+  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.15);
 
   &:after, &:before {
     top: 100%;
-    right: 20px;
+    right: 10px;
     border: solid transparent;
     content: " ";
     height: 0;
@@ -195,13 +202,18 @@ $annotation-card-left-padding: 10px;
     border-width: 6px;
     margin-right: -6px;
   }
+}
 
-  input {
+.share-dialog--actions {
+  padding: 3px;
+  width: inherit;
+}
+
+.share-dialog__link {
   padding: 0;
   width: 220px;
   border: none;
   color: $text-color;
-  }
 }
 
 .annotation-collapsed-replies {

h/static/styles/share-link.scss

@@ -12,7 +12,21 @@
 }
 
 .share-link:hover {
-  text-decoration: underline;
+  width: 100%;
+  color: $gray-dark;
+}
+
+.share-dialog-link {
+  font-size: $body1-font-size;
+  margin: 10px;
+  padding: 5px;
+  color: $text-color;
+  border: 1px solid $gray-lighter;
+  border-radius: 2px;
+  background: #F2F2F2;
+}
+
+.share-dialog-link:hover {
   color: $gray-dark;
 }
 
@@ -27,6 +41,30 @@
   width: 100%;
 }
 
+.share-dialog-target {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border-bottom: 1px solid $gray-lighter;
+  font-size: $body1-font-size;
+  padding: 10px;
+}
+
+.share-dialog-target__label {
+  font-weight: bold;
+}
+
+.share-dialog-target__icon {
+  color: #7A7A7A;
+  text-decoration: none;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.share-dialog-target__icon:hover {
+  color: #202020;
+}
+
 .share-link-icons {
   display: flex;
   flex-direction: row;

h/static/styles/vendor/icomoon.css

@@ -20,6 +20,9 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
+.h-icon-google-plus:before {
+    content: "\e906";
+}
 .h-icon-annotate:before {
     content: "\e903";
 }
@@ -41,7 +44,7 @@
 .h-icon-cancel-outline:before {
     content: "\e619";
 }
-.h-icon-google-plus:before {
+.h-icon-google-plus-old:before {
     content: "\ea88";
 }
 .h-icon-facebook:before {

h/templates/client/annotation.html

@@ -154,18 +154,50 @@
     <div class="annotation-actions" ng-if="!vm.isSaving && !vm.editing() && vm.id()">
       <div ng-show="vm.isSaving">Saving…</div>
       <button class="small btn btn-clean"
-              ng-click="vm.reply()"
-              ><i class="h-icon-reply btn-icon"></i> Reply</button>
-      <span class="share-dialog-wrapper">
+        ng-click="vm.reply()">
+        <i class="h-icon-reply btn-icon"></i>
+        Reply
+      </button>
+      <span class="share-dialog-wrapper" ng-if="!vm.feature('direct_linking')">
         <button class="small btn btn-clean"
-                ng-click="vm.share($event)"
-                ><i class="h-icon-link btn-icon"></i> Link</button>
-        <span class="share-dialog" ng-click="$event.stopPropagation()">
+          ng-click="vm.share($event)">
+          <i class="h-icon-link btn-icon"></i>
+          Link
+        </button>
+        <span class="share-dialog share-dialog--actions" ng-click="$event.stopPropagation()">
           <a target="_blank"
             class="h-icon-link"
             ng-href="{{vm.annotationURI}}"
-             title="Open in new tab"></a>
-          <input type="text" value="{{vm.annotationURI}}" readonly>
+            title="Open in new tab">
+          </a>
+          <input class="share-dialog__link" type="text" value="{{vm.annotationURI}}" readonly>
+        </span>
+      </span>
+      <span class="share-dialog-wrapper" ng-if="vm.feature('direct_linking')">
+        <button class="small btn btn-clean"
+          ng-click="vm.share($event)">
+          <i class="h-icon-share btn-icon"></i>
+        </button>
+        <span class="share-dialog" ng-click="$event.stopPropagation()">
+          <span class="share-dialog-target">
+            <span class="share-dialog-target__label">Share:</span>
+            <a href="https://twitter.com/intent/tweet?url={{vm.annotationURI}}"
+              target="_blank"
+              title="Tweet link"
+              class="share-dialog-target__icon h-icon-twitter"></a>
+            <a href="https://www.facebook.com/sharer/sharer.php?u={{vm.annotationURI}}"
+              target="_blank"
+              title="Share on Facebook"
+              class="share-dialog-target__icon h-icon-facebook"></a>
+            <a href="https://plus.google.com/share?url={{vm.annotationURI}}"
+              target="_blank"
+              title="Post on Google Plus"
+              class="share-dialog-target__icon h-icon-google-plus"></a>
+            <a href="mailto:?subject=Let's%20Annotate&amp;body={{vm.annotationURI}}"
+              title="Share via email"
+              class="share-dialog-target__icon h-icon-mail"></a>
+          </span>
+          <input class="share-dialog-link" type="text" value="{{vm.annotationURI}}" readonly>
         </span>
       </span>
       <button class="small btn btn-clean"