Add ability to generate via links from the sidebar.

- Use document plugin to get canonical url for sharing. - Introduce Topbar share icon - Add social media icons to icomoon - Generate via uri in the share-dialog directive - Add sharing via Facebook, Twitter, Google plus, and email - Make account dialog and share dialog consistent - Add information about sharing to the help page. - Add tests (Thanks @nickstenning!)

Add ability to generate via links from the sidebar.
- Use document plugin to get canonical url for sharing. - Introduce Topbar share icon - Add social media icons to icomoon - Generate via uri in the share-dialog directive - Add sharing via Facebook, Twitter, Google plus, and email - Make account dialog and share dialog consistent - Add information about sharing to the help page. - Add tests (Thanks @nickstenning!)
3277f2f4 · Jake Hartnell · 41fa4384 · 3277f2f4 · 3277f2f4 · 3277f2f4
Commit 3277f2f4 authored Mar 09, 2015 by Jake Hartnell
11 changed files
--- a/h/static/scripts/app-controller.coffee
+++ b/h/static/scripts/app-controller.coffee
@@ -43,8 +43,18 @@ module.exports = class AppController
      applyUpdates(action, payload)
      $scope.$digest()

+    # App dialogs
+    $scope.accountDialog = visible: false
+    $scope.shareDialog = visible: false
+
+    # Check to see if we are on the stream page so we can hide share button.
+    if $window.top is $window
+      $scope.showShareButton = false
+    else
+      $scope.showShareButton = true
+
    oncancel = ->
-      $scope.dialog.visible = false
+      $scope.accountDialog.visible = false

    cleanupAnnotations = ->
      # Clean up any annotations that need to be unloaded.
@@ -68,7 +78,7 @@ module.exports = class AppController
      if isFirstRun and not (newVal or oldVal)
        $scope.login()
      else
-        $scope.dialog.visible = false
+        $scope.accountDialog.visible = false

      # Update any edits in progress.
      for draft in drafts.all()
@@ -85,12 +95,12 @@ module.exports = class AppController
      $route.reload()

    $scope.login = ->
-      $scope.dialog.visible = true
+      $scope.accountDialog.visible = true
      identity.request {oncancel}

    $scope.logout = ->
      return unless drafts.discard()
-      $scope.dialog.visible = false
+      $scope.accountDialog.visible = false
      identity.logout()

    $scope.loadMore = (number) ->
@@ -100,8 +110,6 @@ module.exports = class AppController
      $scope.search.query = ''
      annotationUI.clearSelectedAnnotations()

-    $scope.dialog = visible: false
-
    $scope.search =
      query: $location.search()['q']


--- a/h/static/scripts/app.coffee
+++ b/h/static/scripts/app.coffee
@@ -111,6 +111,7 @@ module.exports = angular.module('h', [
 .directive('spinner', require('./directive/spinner'))
 .directive('tabbable', require('./directive/tabbable'))
 .directive('tabReveal', require('./directive/tab-reveal'))
+.directive('shareDialog', require('./directive/share-dialog'))

 .filter('converter', require('./filter/converter'))
 .filter('moment', require('./filter/moment'))

--- a/h/static/scripts/directive/share-dialog.coffee
+++ b/h/static/scripts/directive/share-dialog.coffee
+###*
+# @ngdoc directive
+# @name share-dialog
+# @restrict A
+# @description This dialog generates a via link to the page h is currently
+# loaded on.
+###
+module.exports = ['crossframe', (crossframe) ->
+  link: (scope, elem, attrs, ctrl) ->
+    scope.viaPageLink = ''
+
+    # Watch scope.shareDialog.visible: when it changes to true, focus input
+    # and selection.
+    scope.$watch (-> scope.shareDialog?.visible), (visible) ->
+      if visible
+        scope.$evalAsync(-> elem.find('#via').focus().select())
+
+    scope.$watchCollection (-> crossframe.providers), ->
+      if crossframe.providers?.length
+        # XXX: Consider multiple providers in the future
+        p = crossframe.providers[0]
+        if p.entities?.length
+          e = p.entities[0]
+          scope.viaPageLink = 'https://via.hypothes.is/' + e
+
+  restrict: 'A'
+  templateUrl: 'share_dialog.html'
+]
--- a/h/static/scripts/directive/test/share-dialog-test.coffee
+++ b/h/static/scripts/directive/test/share-dialog-test.coffee
+{module, inject} = require('angular-mock')
+
+assert = chai.assert
+
+describe 'share-dialog', ->
+  $scope = null
+  $compile = null
+  fakeCrossFrame = null
+
+  before ->
+    angular.module('h', [])
+    .directive('shareDialog', require('../share-dialog'))
+
+  beforeEach module('h')
+  beforeEach module('h.templates')
+
+  beforeEach module ($provide) ->
+    fakeCrossFrame = {providers: []}
+
+    $provide.value 'crossframe', fakeCrossFrame
+    return
+
+  beforeEach inject (_$compile_, _$rootScope_) ->
+    $compile = _$compile_
+    $scope = _$rootScope_.$new()
+
+  it 'generates new via link', ->
+    $element = $compile('<div share-dialog="">')($scope)
+    fakeCrossFrame.providers.push {entities: ['http://example.com']}
+    $scope.$digest()
+    assert.equal($scope.viaPageLink,
+                 'https://via.hypothes.is/http://example.com')
--- a/h/static/scripts/test/app-controller-test.coffee
+++ b/h/static/scripts/test/app-controller-test.coffee
@@ -117,7 +117,11 @@ describe 'AppController', ->

  it 'does not show login form for logged in users', ->
    createController()
-    assert.isFalse($scope.dialog.visible)
+    assert.isFalse($scope.accountDialog.visible)
+
+  it 'does not show the share dialog at start', ->
+    createController()
+    assert.isFalse($scope.shareDialog.visible)

  describe 'applyUpdate', ->


--- a/h/static/styles/common.scss
+++ b/h/static/styles/common.scss
@@ -111,6 +111,27 @@ html {
 }


+// Share this view /////////////////////
+.share-dialog-toggle {
+  top: 1px;
+  left: 8px;
+  position: relative;
+  cursor: pointer;
+  color: $gray-light;
+  float: left;
+  margin-right: 15px;
+
+  &:hover {
+    color: $gray-dark;
+  }
+}
+
+.share-links {
+  a {
+    font-size: 1.5em;
+    padding: .3em;
+  }
+}

 //FORM RELATED////////////////////////////////
 .form-horizontal {

--- a/h/static/styles/simple-search.scss
+++ b/h/static/styles/simple-search.scss
@@ -9,7 +9,7 @@
  @include clearfix;
  position: relative;
  padding: 0 1.5385em;
-  color: $gray;
+  color: $gray-darker;
 }

 .simple-search-form * {
@@ -23,7 +23,7 @@
 }

 :not(:focus) ~ .simple-search-icon {
-  color: $gray-lighter;
+  color: $gray-light;
 }

 input.simple-search-input {

--- a/h/static/styles/vendor/fonts/h.eot
+++ b/h/static/styles/vendor/fonts/h.eot
--- a/h/static/styles/vendor/fonts/selection.json
+++ b/h/static/styles/vendor/fonts/selection.json
@@ -16,13 +16,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 271,
-				"order": 56,
+				"order": 60,
 				"prevSize": 24,
-				"code": 58934,
+				"code": 58920,
 				"name": "link"
 			},
 			"setIdx": 0,
-			"setId": 2,
+			"setId": 6,
 			"iconIdx": 271
 		},
 		{
@@ -40,13 +40,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 264,
-				"order": 1,
+				"order": 3,
 				"prevSize": 24,
 				"name": "create",
 				"code": 58919
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 0
 		},
 		{
@@ -64,13 +64,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 32,
-				"order": 2,
+				"order": 4,
 				"prevSize": 24,
 				"code": 58916,
 				"name": "delete"
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 1
 		},
 		{
@@ -88,13 +88,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 275,
-				"order": 3,
+				"order": 5,
 				"prevSize": 24,
 				"code": 58917,
 				"name": "remove"
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 2
 		},
 		{
@@ -112,13 +112,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 521,
-				"order": 4,
+				"order": 6,
 				"prevSize": 24,
 				"code": 58918,
 				"name": "edit"
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 3
 		},
 		{
@@ -136,13 +136,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 25,
-				"order": 5,
+				"order": 7,
 				"prevSize": 24,
 				"name": "bookmark",
 				"code": 58880
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 4
 		},
 		{
@@ -160,13 +160,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 35,
-				"order": 6,
+				"order": 8,
 				"name": "done",
 				"prevSize": 24,
 				"code": 58881
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 5
 		},
 		{
@@ -184,13 +184,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 65,
-				"order": 7,
+				"order": 9,
 				"name": "lock",
 				"prevSize": 24,
 				"code": 58882
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 6
 		},
 		{
@@ -208,13 +208,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 96,
-				"order": 8,
+				"order": 10,
 				"prevSize": 24,
 				"name": "search",
 				"code": 58883
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 7
 		},
 		{
@@ -232,13 +232,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 97,
-				"order": 9,
+				"order": 11,
 				"prevSize": 24,
 				"name": "settings",
 				"code": 58884
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 8
 		},
 		{
@@ -256,13 +256,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 156,
-				"order": 10,
+				"order": 12,
 				"name": "visibility",
 				"prevSize": 24,
 				"code": 58885
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 9
 		},
 		{
@@ -280,13 +280,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 157,
-				"order": 11,
+				"order": 13,
 				"name": "visibility-off",
 				"prevSize": 24,
 				"code": 58886
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 10
 		},
 		{
@@ -304,13 +304,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 253,
-				"order": 12,
+				"order": 14,
 				"name": "add",
 				"prevSize": 24,
 				"code": 58888
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 11
 		},
 		{
@@ -328,13 +328,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 260,
-				"order": 13,
+				"order": 15,
 				"name": "clear",
 				"prevSize": 24,
 				"code": 58889
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 12
 		},
 		{
@@ -352,13 +352,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 261,
-				"order": 14,
+				"order": 16,
 				"name": "content-copy",
 				"prevSize": 24,
 				"code": 58890
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 13
 		},
 		{
@@ -376,13 +376,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 267,
-				"order": 15,
+				"order": 17,
 				"prevSize": 24,
 				"name": "flag",
 				"code": 58892
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 14
 		},
 		{
@@ -400,13 +400,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 278,
-				"order": 16,
+				"order": 18,
 				"prevSize": 24,
 				"name": "reply",
 				"code": 58893
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 15
 		},
 		{
@@ -425,13 +425,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 378,
-				"order": 17,
+				"order": 19,
 				"name": "border-color",
 				"prevSize": 24,
 				"code": 58894
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 16
 		},
 		{
@@ -449,13 +449,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 391,
-				"order": 18,
+				"order": 20,
 				"prevSize": 24,
 				"name": "format-bold",
 				"code": 58895
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 17
 		},
 		{
@@ -473,13 +473,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 398,
-				"order": 19,
+				"order": 21,
 				"prevSize": 24,
 				"name": "format-italic",
 				"code": 58896
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 18
 		},
 		{
@@ -497,13 +497,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 400,
-				"order": 20,
+				"order": 22,
 				"prevSize": 24,
 				"name": "format-list-bulleted",
 				"code": 58897
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 19
 		},
 		{
@@ -521,13 +521,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 401,
-				"order": 21,
+				"order": 23,
 				"prevSize": 24,
 				"name": "format-list-numbered",
 				"code": 58898
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 20
 		},
 		{
@@ -545,13 +545,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 403,
-				"order": 22,
+				"order": 24,
 				"prevSize": 24,
 				"name": "format-quote",
 				"code": 58899
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 21
 		},
 		{
@@ -569,13 +569,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 406,
-				"order": 23,
+				"order": 25,
 				"name": "functions",
 				"prevSize": 24,
 				"code": 58900
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 22
 		},
 		{
@@ -592,14 +592,14 @@
 			},
 			"attrs": [],
 			"properties": {
-				"order": 24,
+				"order": 26,
 				"id": 751,
 				"prevSize": 24,
 				"code": 58903,
 				"name": "insert-comment"
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 23
 		},
 		{
@@ -617,13 +617,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 415,
-				"order": 25,
+				"order": 58,
 				"prevSize": 24,
 				"name": "insert-link",
 				"code": 58901
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 24
 		},
 		{
@@ -641,13 +641,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 416,
-				"order": 26,
+				"order": 28,
 				"prevSize": 24,
 				"name": "insert-photo",
 				"code": 58902
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 25
 		},
 		{
@@ -665,13 +665,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 673,
-				"order": 27,
+				"order": 43,
 				"prevSize": 24,
 				"name": "arrow-drop-down",
 				"code": 58905
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 26
 		},
 		{
@@ -689,13 +689,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 677,
-				"order": 28,
+				"order": 30,
 				"prevSize": 24,
 				"name": "cancel",
 				"code": 58906
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 27
 		},
 		{
@@ -713,13 +713,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 678,
-				"order": 29,
+				"order": 31,
 				"name": "check",
 				"prevSize": 24,
 				"code": 58907
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 28
 		},
 		{
@@ -736,14 +736,14 @@
 			},
 			"attrs": [],
 			"properties": {
-				"order": 30,
+				"order": 32,
 				"id": 749,
 				"prevSize": 24,
 				"code": 58887,
 				"name": "chevron-left"
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 29
 		},
 		{
@@ -760,14 +760,14 @@
 			},
 			"attrs": [],
 			"properties": {
-				"order": 31,
+				"order": 33,
 				"id": 750,
 				"prevSize": 24,
 				"code": 58904,
 				"name": "chevron-right"
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 30
 		},
 		{
@@ -785,13 +785,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 681,
-				"order": 32,
+				"order": 34,
 				"name": "close",
 				"prevSize": 24,
 				"code": 58908
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 31
 		},
 		{
@@ -809,13 +809,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 682,
-				"order": 33,
+				"order": 35,
 				"prevSize": 24,
 				"name": "expand-less",
 				"code": 58909
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 32
 		},
 		{
@@ -833,13 +833,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 683,
-				"order": 34,
+				"order": 36,
 				"name": "expand-more",
 				"prevSize": 24,
 				"code": 58910
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 33
 		},
 		{
@@ -857,13 +857,13 @@
 			"attrs": [],
 			"properties": {
 				"id": 746,
-				"order": 35,
+				"order": 37,
 				"prevSize": 24,
 				"name": "public",
 				"code": 58914
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 34
 		},
 		{
@@ -881,15 +881,128 @@
 			"attrs": [],
 			"properties": {
 				"id": 748,
-				"order": 36,
+				"order": 38,
 				"name": "share",
 				"prevSize": 24,
 				"code": 58915
 			},
-			"setIdx": 1,
-			"setId": 1,
+			"setIdx": 2,
+			"setId": 4,
 			"iconIdx": 35
 		},
+		{
+			"icon": {
+				"paths": [
+					"M853.333 170.667h-682.667c-47.147 0-84.907 38.187-84.907 85.333l-0.427 512c0 47.147 38.187 85.333 85.333 85.333h682.667c47.147 0 85.333-38.187 85.333-85.333v-512c0-47.147-38.187-85.333-85.333-85.333zM853.333 341.333l-341.333 213.333-341.333-213.333v-85.333l341.333 213.333 341.333-213.333v85.333z"
+				],
+				"attrs": [
+					{}
+				],
+				"isMulticolor": false,
+				"tags": [
+					"mail"
+				],
+				"grid": 24
+			},
+			"attrs": [
+				{}
+			],
+			"properties": {
+				"order": 53,
+				"id": 3,
+				"prevSize": 24,
+				"code": 58922,
+				"name": "mail"
+			},
+			"setIdx": 4,
+			"setId": 2,
+			"iconIdx": 0
+		},
+		{
+			"icon": {
+				"paths": [
+					"M559.066 64c0 0-200.956 0-267.94 0-120.12 0-233.17 91.006-233.17 196.422 0 107.726 81.882 194.666 204.088 194.666 8.498 0 16.756-0.17 24.842-0.752-7.93 15.186-13.602 32.288-13.602 50.042 0 29.938 16.104 54.21 36.468 74.024-15.386 0-30.242 0.448-46.452 0.448-148.782-0.002-263.3 94.758-263.3 193.020 0 96.778 125.542 157.314 274.334 157.314 169.624 0 263.306-96.244 263.306-193.028 0-77.6-22.896-124.072-93.686-174.134-24.216-17.144-70.53-58.836-70.53-83.344 0-28.72 8.196-42.868 51.428-76.646 44.312-34.624 75.672-83.302 75.672-139.916 0-67.406-30.020-133.098-86.372-154.772h84.954l59.96-43.344zM465.48 719.458c2.126 8.972 3.284 18.206 3.284 27.628 0 78.2-50.392 139.31-194.974 139.31-102.842 0-177.116-65.104-177.116-143.3 0-76.642 92.126-140.444 194.964-139.332 24 0.254 46.368 4.116 66.67 10.69 55.826 38.826 95.876 60.762 107.172 105.004zM300.818 427.776c-69.038-2.064-134.636-77.226-146.552-167.86-11.916-90.666 34.37-160.042 103.388-157.99 69.010 2.074 134.638 74.814 146.558 165.458 11.906 90.66-34.39 162.458-103.394 160.392zM832 256v-192h-64v192h-192v64h192v192h64v-192h192v-64z"
+				],
+				"attrs": [],
+				"isMulticolor": false,
+				"tags": [
+					"google-plus",
+					"brand",
+					"social"
+				],
+				"defaultCode": 58515,
+				"grid": 16
+			},
+			"attrs": [],
+			"properties": {
+				"id": 1292,
+				"order": 48,
+				"prevSize": 32,
+				"code": 60040,
+				"ligatures": "google-plus, brand2",
+				"name": "google-plus"
+			},
+			"setIdx": 1,
+			"setId": 5,
+			"iconIdx": 392
+		},
+		{
+			"icon": {
+				"paths": [
+					"M853.35 0h-682.702c-94.25 0-170.648 76.42-170.648 170.686v682.63c0 94.266 76.398 170.684 170.648 170.684h341.352v-448h-128v-128h128v-96c0-88.366 71.634-160 160-160h160v128h-160c-17.674 0-32 14.328-32 32v96h176l-32 128h-144v448h213.35c94.25 0 170.65-76.418 170.65-170.684v-682.63c0-94.266-76.4-170.686-170.65-170.686z"
+				],
+				"attrs": [],
+				"isMulticolor": false,
+				"tags": [
+					"facebook",
+					"brand",
+					"social"
+				],
+				"defaultCode": 58521,
+				"grid": 16
+			},
+			"attrs": [],
+			"properties": {
+				"id": 1298,
+				"order": 54,
+				"prevSize": 32,
+				"code": 60045,
+				"ligatures": "facebook2, brand7",
+				"name": "facebook"
+			},
+			"setIdx": 1,
+			"setId": 5,
+			"iconIdx": 397
+		},
+		{
+			"icon": {
+				"paths": [
+					"M1024 194.418c-37.676 16.708-78.164 28.002-120.66 33.080 43.372-26 76.686-67.17 92.372-116.23-40.596 24.078-85.556 41.56-133.41 50.98-38.32-40.83-92.922-66.34-153.346-66.34-116.022 0-210.088 94.058-210.088 210.078 0 16.466 1.858 32.5 5.44 47.878-174.6-8.764-329.402-92.4-433.018-219.506-18.084 31.028-28.446 67.116-28.446 105.618 0 72.888 37.088 137.192 93.46 174.866-34.438-1.092-66.832-10.542-95.154-26.278-0.020 0.876-0.020 1.756-0.020 2.642 0 101.788 72.418 186.696 168.522 206-17.626 4.8-36.188 7.372-55.348 7.372-13.538 0-26.698-1.32-39.528-3.772 26.736 83.46 104.32 144.206 196.252 145.896-71.9 56.35-162.486 89.934-260.916 89.934-16.958 0-33.68-0.994-50.116-2.94 92.972 59.61 203.402 94.394 322.042 94.394 386.422 0 597.736-320.124 597.736-597.744 0-9.108-0.206-18.168-0.61-27.18 41.056-29.62 76.672-66.62 104.836-108.748z"
+				],
+				"attrs": [],
+				"isMulticolor": false,
+				"tags": [
+					"twitter",
+					"brand",
+					"tweet",
+					"social"
+				],
+				"defaultCode": 58525,
+				"grid": 16
+			},
+			"attrs": [],
+			"properties": {
+				"id": 1302,
+				"order": 46,
+				"prevSize": 32,
+				"code": 60049,
+				"ligatures": "twitter, brand11",
+				"name": "twitter"
+			},
+			"setIdx": 1,
+			"setId": 5,
+			"iconIdx": 401
+		},
 		{
 			"icon": {
 				"paths": [
@@ -912,15 +1025,15 @@
 				}
 			],
 			"properties": {
-				"order": 37,
+				"order": 39,
 				"id": 199,
 				"prevSize": 32,
 				"code": 58911,
 				"name": "cc-by"
 			},
-			"setIdx": 1,
-			"setId": 1,
-			"iconIdx": 36
+			"setIdx": 3,
+			"setId": 3,
+			"iconIdx": 0
 		},
 		{
 			"icon": {
@@ -944,15 +1057,15 @@
 				}
 			],
 			"properties": {
-				"order": 38,
+				"order": 40,
 				"id": 200,
 				"prevSize": 32,
 				"code": 58912,
 				"name": "cc-logo"
 			},
-			"setIdx": 1,
-			"setId": 1,
-			"iconIdx": 37
+			"setIdx": 3,
+			"setId": 3,
+			"iconIdx": 1
 		},
 		{
 			"icon": {
@@ -983,15 +1096,15 @@
 				}
 			],
 			"properties": {
-				"order": 39,
+				"order": 41,
 				"id": 201,
 				"prevSize": 32,
 				"code": 58913,
 				"name": "cc-zero"
 			},
-			"setIdx": 1,
-			"setId": 1,
-			"iconIdx": 38
+			"setIdx": 3,
+			"setId": 3,
+			"iconIdx": 2
 		},
 		{
 			"icon": {
@@ -1016,15 +1129,15 @@
 				{}
 			],
 			"properties": {
-				"order": 40,
+				"order": 42,
 				"id": 0,
 				"prevSize": 32,
 				"name": "markdown",
 				"code": 58891
 			},
-			"setIdx": 1,
-			"setId": 1,
-			"iconIdx": 39
+			"setIdx": 3,
+			"setId": 3,
+			"iconIdx": 3
 		}
 	],
 	"height": 1024,
@@ -1032,38 +1145,45 @@
 		"name": "h"
 	},
 	"preferences": {
-		"showGlyphs": true,
-		"showQuickUse": true,
-		"showQuickUse2": true,
-		"showSVGs": true,
 		"fontPref": {
 			"prefix": "h-icon-",
 			"metadata": {
 				"fontFamily": "h",
 				"majorVersion": 1,
-				"minorVersion": 0
+				"minorVersion": 5
 			},
+			"showGlyphs": true,
 			"metrics": {
 				"emSize": 1024,
 				"baseline": 6.25,
 				"whitespace": 50
 			},
-			"showSelector": false,
+			"resetPoint": 58880,
+			"showQuickUse": true,
+			"quickUsageToken": false,
 			"showMetrics": true,
-			"showMetadata": true,
-			"showVersion": false,
-			"embed": true
+			"showMetadata": false,
+			"embed": true,
+			"showSelector": false,
+			"showVersion": true
 		},
 		"imagePref": {
-			"prefix": "icon-",
-			"png": true,
-			"useClassSelector": true,
-			"color": 4473924,
-			"bgColor": 16777215,
-			"classSelector": ".icon"
+			"color": 0,
+			"height": 32,
+			"columns": 16,
+			"margin": 16,
+			"png": false,
+			"sprites": true,
+			"prefix": "icon-"
 		},
 		"historySize": 100,
 		"showCodes": true,
-		"gridSize": 16
+		"gridSize": 16,
+		"showLiga": false,
+		"showGrid": true,
+		"showGlyphs": true,
+		"showQuickUse": true,
+		"showQuickUse2": true,
+		"showSVGs": true
 	}
 }
\ No newline at end of file
--- a/h/static/styles/vendor/icomoon.css
+++ b/h/static/styles/vendor/icomoon.css
@@ -4,7 +4,7 @@
 }
 @font-face {
 	font-family: 'h';
-	src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
+	src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
 	font-weight: normal;
 	font-style: normal;
 }
@@ -24,7 +24,7 @@
 }

 .h-icon-link:before {
-	content: "\e636";
+	content: "\e628";
 }

 .h-icon-create:before {
@@ -171,6 +171,22 @@
 	content: "\e623";
 }

+.h-icon-mail:before {
+	content: "\e62a";
+}
+
+.h-icon-google-plus:before {
+	content: "\ea88";
+}
+
+.h-icon-facebook:before {
+	content: "\ea8d";
+}
+
+.h-icon-twitter:before {
+	content: "\ea91";
+}
+
 .h-icon-cc-by:before {
 	content: "\e61f";
 }

--- a/h/templates/client/share_dialog.html
+++ b/h/templates/client/share_dialog.html
+<div id="dialog" class="sheet content">
+  <i class="close h-icon-close"
+     role="button"
+     title="Close"
+     ng-click="shareDialog.visible = false"></i>
+  <div class="form-vertical tabbable">
+	<div class="form tab-pane" data-title="Share">
+	  <p>Share the link below to show anyone these annotations and invite them to contribute their own.</p>
+	  <p><input id="via"
+				class="form-input"
+				type="text"
+				ng-value="viaPageLink"
+				readonly /></p>
+	  <p class="share-links">
+		<a href="//twitter.com/intent/tweet?url={{viaPageLink}}"
+		   target="_blank"
+		   title="Tweet link"
+		   class="h-icon-twitter"></a>
+		<a href="//www.facebook.com/sharer/sharer.php?u={{viaPageLink}}"
+		   target="_blank"
+		   title="Share on Facebook"
+		   class="h-icon-facebook"></a>
+		<a href="//plus.google.com/share?url={{viaPageLink}}"
+		   target="_blank"
+		   title="Post on Google Plus"
+		   class="h-icon-google-plus"></a>
+		<a href="mailto:?subject=Let's%20Annotate&amp;body={{viaPageLink}}"
+		   title="Share via email"
+		   class="h-icon-mail"></a>
+		</p>
+	</div>
+  </div>
+</div>