Skip to content

C
coopwire-hypothesis
Commit 3435194f authored by Sheetal Umesh Kumar's avatar Sheetal Umesh Kumar
Browse files
Options

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
parent 8500f117
Show whitespace changes
Inline Side-by-side
Showing with 258 additions and 131 deletions
h/static/styles/annotation.scss
View file @ 3435194f
...@@ -155,6 +155,11 @@ $annotation-card-left-padding: 10px; ...@@ -155,6 +155,11 @@ $annotation-card-left-padding: 10px;
} }
&.open .share-dialog { &.open .share-dialog {
display: flex;
flex-direction: column;
}
&.open .share-dialog--actions {
display: block; display: block;
} }
} }
...@@ -162,18 +167,20 @@ $annotation-card-left-padding: 10px; ...@@ -162,18 +167,20 @@ $annotation-card-left-padding: 10px;
.share-dialog { .share-dialog {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 100%; bottom: 130%;
padding: 3px;
z-index: 1; z-index: 1;
display: block;
background: $white; background: $white;
border: 1px solid $gray-lighter; border: 1px solid $gray-lighter;
border-radius: 2px; border-radius: 2px;
white-space: nowrap; 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 { &:after, &:before {
top: 100%; top: 100%;
right: 20px; right: 10px;
border: solid transparent; border: solid transparent;
content: " "; content: " ";
height: 0; height: 0;
...@@ -195,13 +202,18 @@ $annotation-card-left-padding: 10px; ...@@ -195,13 +202,18 @@ $annotation-card-left-padding: 10px;
border-width: 6px; border-width: 6px;
margin-right: -6px; margin-right: -6px;
} }
}
input { .share-dialog--actions {
padding: 3px;
width: inherit;
}
.share-dialog__link {
padding: 0; padding: 0;
width: 220px; width: 220px;
border: none; border: none;
color: $text-color; color: $text-color;
}
} }
.annotation-collapsed-replies { .annotation-collapsed-replies {
......
h/static/styles/share-link.scss
View file @ 3435194f
...@@ -12,7 +12,21 @@ ...@@ -12,7 +12,21 @@
} }
.share-link:hover { .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; color: $gray-dark;
} }
...@@ -27,6 +41,30 @@ ...@@ -27,6 +41,30 @@
width: 100%; 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 { .share-link-icons {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
......
h/static/styles/vendor/fonts/selection.json
View file @ 3435194f
{ {
"IcoMoonType": "selection", "IcoMoonType": "selection",
"icons": [ "icons": [
{
"icon": {
"paths": [
"M512 614.4h290.377c-11.703 75.337-87.771 220.891-290.377 220.891-174.811 0-317.44-144.823-317.44-323.291s142.629-323.291 317.44-323.291c99.474 0 166.034 42.423 204.069 78.994l138.971-133.851c-89.234-83.383-204.8-133.851-343.040-133.851-283.063 0-512 228.937-512 512s228.937 512 512 512c295.497 0 491.52-207.726 491.52-500.297 0-33.646-3.657-59.246-8.046-84.846h-483.474v175.543z",
"M1609.143 438.857h-146.286v-146.286h-146.286v146.286h-146.286v146.286h146.286v146.286h146.286v-146.286h146.286z"
],
"attrs": [
{
"fill": "rgb(122, 122, 122)"
},
{
"fill": "rgb(122, 122, 122)"
}
],
"isMulticolor": false,
"width": 1609,
"grid": 16,
"tags": [
"google-plus",
"brand",
"social"
]
},
"attrs": [
{
"fill": "rgb(122, 122, 122)"
},
{
"fill": "rgb(122, 122, 122)"
}
],
"properties": {
"order": 58,
"id": 1316,
"name": "google-plus",
"prevSize": 24,
"code": 59654
},
"setIdx": 1,
"setId": 1,
"iconIdx": 0
},
{ {
"icon": { "icon": {
"paths": [ "paths": [
...@@ -29,9 +71,9 @@ ...@@ -29,9 +71,9 @@
"prevSize": 24, "prevSize": 24,
"code": 59651 "code": 59651
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 0 "iconIdx": 1
}, },
{ {
"icon": { "icon": {
...@@ -75,9 +117,9 @@ ...@@ -75,9 +117,9 @@
"prevSize": 24, "prevSize": 24,
"code": 59652 "code": 59652
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 1 "iconIdx": 2
}, },
{ {
"icon": { "icon": {
...@@ -107,9 +149,9 @@ ...@@ -107,9 +149,9 @@
"prevSize": 24, "prevSize": 24,
"code": 59653 "code": 59653
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 2 "iconIdx": 3
}, },
{ {
"icon": { "icon": {
...@@ -133,9 +175,9 @@ ...@@ -133,9 +175,9 @@
"prevSize": 24, "prevSize": 24,
"code": 59392 "code": 59392
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 3 "iconIdx": 4
}, },
{ {
"icon": { "icon": {
...@@ -163,9 +205,9 @@ ...@@ -163,9 +205,9 @@
"prevSize": 24, "prevSize": 24,
"code": 59393 "code": 59393
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 4 "iconIdx": 5
}, },
{ {
"icon": { "icon": {
...@@ -190,9 +232,9 @@ ...@@ -190,9 +232,9 @@
"prevSize": 24, "prevSize": 24,
"code": 58910 "code": 58910
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 5 "iconIdx": 6
}, },
{ {
"icon": { "icon": {
...@@ -218,9 +260,9 @@ ...@@ -218,9 +260,9 @@
"name": "cancel-outline", "name": "cancel-outline",
"code": 58905 "code": 58905
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 6 "iconIdx": 7
}, },
{ {
"icon": { "icon": {
...@@ -244,11 +286,11 @@ ...@@ -244,11 +286,11 @@
"prevSize": 24, "prevSize": 24,
"code": 60040, "code": 60040,
"ligatures": "google-plus, brand2", "ligatures": "google-plus, brand2",
"name": "google-plus" "name": "google-plus-old"
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 7 "iconIdx": 8
}, },
{ {
"icon": { "icon": {
...@@ -274,9 +316,9 @@ ...@@ -274,9 +316,9 @@
"ligatures": "facebook2, brand7", "ligatures": "facebook2, brand7",
"name": "facebook" "name": "facebook"
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 8 "iconIdx": 9
}, },
{ {
"icon": { "icon": {
...@@ -303,9 +345,9 @@ ...@@ -303,9 +345,9 @@
"ligatures": "twitter, brand11", "ligatures": "twitter, brand11",
"name": "twitter" "name": "twitter"
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 9 "iconIdx": 10
}, },
{ {
"icon": { "icon": {
...@@ -331,9 +373,9 @@ ...@@ -331,9 +373,9 @@
"name": "github", "name": "github",
"code": 59648 "code": 59648
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 10 "iconIdx": 11
}, },
{ {
"icon": { "icon": {
...@@ -358,9 +400,9 @@ ...@@ -358,9 +400,9 @@
"name": "feed", "name": "feed",
"code": 59649 "code": 59649
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 11 "iconIdx": 12
}, },
{ {
"icon": { "icon": {
...@@ -391,9 +433,9 @@ ...@@ -391,9 +433,9 @@
"code": 58911, "code": 58911,
"name": "cc-by" "name": "cc-by"
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 12 "iconIdx": 13
}, },
{ {
"icon": { "icon": {
...@@ -424,9 +466,9 @@ ...@@ -424,9 +466,9 @@
"code": 58912, "code": 58912,
"name": "cc-logo" "name": "cc-logo"
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 13 "iconIdx": 14
}, },
{ {
"icon": { "icon": {
...@@ -464,9 +506,9 @@ ...@@ -464,9 +506,9 @@
"code": 58913, "code": 58913,
"name": "cc-zero" "name": "cc-zero"
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 14 "iconIdx": 15
}, },
{ {
"icon": { "icon": {
...@@ -498,9 +540,9 @@ ...@@ -498,9 +540,9 @@
"name": "markdown", "name": "markdown",
"code": 58891 "code": 58891
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 15 "iconIdx": 16
}, },
{ {
"icon": { "icon": {
...@@ -522,9 +564,9 @@ ...@@ -522,9 +564,9 @@
"code": 59650, "code": 59650,
"name": "move" "name": "move"
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 16 "iconIdx": 17
}, },
{ {
"icon": { "icon": {
...@@ -547,9 +589,9 @@ ...@@ -547,9 +589,9 @@
"code": 58909, "code": 58909,
"name": "arrow-right" "name": "arrow-right"
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 17 "iconIdx": 18
}, },
{ {
"icon": { "icon": {
...@@ -572,9 +614,9 @@ ...@@ -572,9 +614,9 @@
"code": 58921, "code": 58921,
"name": "arrow-drop-down" "name": "arrow-drop-down"
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 18 "iconIdx": 19
}, },
{ {
"icon": { "icon": {
...@@ -597,9 +639,9 @@ ...@@ -597,9 +639,9 @@
"code": 58920, "code": 58920,
"name": "link" "name": "link"
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 19 "iconIdx": 20
}, },
{ {
"icon": { "icon": {
...@@ -622,9 +664,9 @@ ...@@ -622,9 +664,9 @@
"name": "create", "name": "create",
"code": 58919 "code": 58919
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 20 "iconIdx": 21
}, },
{ {
"icon": { "icon": {
...@@ -647,9 +689,9 @@ ...@@ -647,9 +689,9 @@
"code": 58916, "code": 58916,
"name": "delete" "name": "delete"
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 21 "iconIdx": 22
}, },
{ {
"icon": { "icon": {
...@@ -672,9 +714,9 @@ ...@@ -672,9 +714,9 @@
"code": 58917, "code": 58917,
"name": "remove" "name": "remove"
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 22 "iconIdx": 23
}, },
{ {
"icon": { "icon": {
...@@ -697,9 +739,9 @@ ...@@ -697,9 +739,9 @@
"code": 58918, "code": 58918,
"name": "edit" "name": "edit"
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 23 "iconIdx": 24
}, },
{ {
"icon": { "icon": {
...@@ -722,9 +764,9 @@ ...@@ -722,9 +764,9 @@
"name": "bookmark", "name": "bookmark",
"code": 58880 "code": 58880
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 24 "iconIdx": 25
}, },
{ {
"icon": { "icon": {
...@@ -747,9 +789,9 @@ ...@@ -747,9 +789,9 @@
"prevSize": 24, "prevSize": 24,
"code": 58881 "code": 58881
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 25 "iconIdx": 26
}, },
{ {
"icon": { "icon": {
...@@ -772,9 +814,9 @@ ...@@ -772,9 +814,9 @@
"prevSize": 24, "prevSize": 24,
"code": 58882 "code": 58882
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 26 "iconIdx": 27
}, },
{ {
"icon": { "icon": {
...@@ -798,9 +840,9 @@ ...@@ -798,9 +840,9 @@
"name": "search", "name": "search",
"code": 58883 "code": 58883
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 27 "iconIdx": 28
}, },
{ {
"icon": { "icon": {
...@@ -823,9 +865,9 @@ ...@@ -823,9 +865,9 @@
"name": "settings", "name": "settings",
"code": 58884 "code": 58884
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 28 "iconIdx": 29
}, },
{ {
"icon": { "icon": {
...@@ -848,9 +890,9 @@ ...@@ -848,9 +890,9 @@
"prevSize": 24, "prevSize": 24,
"code": 58885 "code": 58885
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 29 "iconIdx": 30
}, },
{ {
"icon": { "icon": {
...@@ -873,9 +915,9 @@ ...@@ -873,9 +915,9 @@
"prevSize": 24, "prevSize": 24,
"code": 58886 "code": 58886
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 30 "iconIdx": 31
}, },
{ {
"icon": { "icon": {
...@@ -898,9 +940,9 @@ ...@@ -898,9 +940,9 @@
"prevSize": 24, "prevSize": 24,
"code": 58888 "code": 58888
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 31 "iconIdx": 32
}, },
{ {
"icon": { "icon": {
...@@ -923,9 +965,9 @@ ...@@ -923,9 +965,9 @@
"prevSize": 24, "prevSize": 24,
"code": 58889 "code": 58889
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 32 "iconIdx": 33
}, },
{ {
"icon": { "icon": {
...@@ -948,9 +990,9 @@ ...@@ -948,9 +990,9 @@
"prevSize": 24, "prevSize": 24,
"code": 58890 "code": 58890
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 33 "iconIdx": 34
}, },
{ {
"icon": { "icon": {
...@@ -973,9 +1015,9 @@ ...@@ -973,9 +1015,9 @@
"name": "flag", "name": "flag",
"code": 58892 "code": 58892
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 34 "iconIdx": 35
}, },
{ {
"icon": { "icon": {
...@@ -998,9 +1040,9 @@ ...@@ -998,9 +1040,9 @@
"name": "reply", "name": "reply",
"code": 58893 "code": 58893
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 35 "iconIdx": 36
}, },
{ {
"icon": { "icon": {
...@@ -1024,9 +1066,9 @@ ...@@ -1024,9 +1066,9 @@
"prevSize": 24, "prevSize": 24,
"code": 58894 "code": 58894
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 36 "iconIdx": 37
}, },
{ {
"icon": { "icon": {
...@@ -1049,9 +1091,9 @@ ...@@ -1049,9 +1091,9 @@
"name": "format-bold", "name": "format-bold",
"code": 58895 "code": 58895
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 37 "iconIdx": 38
}, },
{ {
"icon": { "icon": {
...@@ -1074,9 +1116,9 @@ ...@@ -1074,9 +1116,9 @@
"name": "format-italic", "name": "format-italic",
"code": 58896 "code": 58896
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 38 "iconIdx": 39
}, },
{ {
"icon": { "icon": {
...@@ -1099,9 +1141,9 @@ ...@@ -1099,9 +1141,9 @@
"name": "format-list-bulleted", "name": "format-list-bulleted",
"code": 58897 "code": 58897
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 39 "iconIdx": 40
}, },
{ {
"icon": { "icon": {
...@@ -1124,9 +1166,9 @@ ...@@ -1124,9 +1166,9 @@
"name": "format-list-numbered", "name": "format-list-numbered",
"code": 58898 "code": 58898
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 40 "iconIdx": 41
}, },
{ {
"icon": { "icon": {
...@@ -1149,9 +1191,9 @@ ...@@ -1149,9 +1191,9 @@
"name": "format-quote", "name": "format-quote",
"code": 58899 "code": 58899
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 41 "iconIdx": 42
}, },
{ {
"icon": { "icon": {
...@@ -1174,9 +1216,9 @@ ...@@ -1174,9 +1216,9 @@
"prevSize": 24, "prevSize": 24,
"code": 58900 "code": 58900
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 42 "iconIdx": 43
}, },
{ {
"icon": { "icon": {
...@@ -1199,9 +1241,9 @@ ...@@ -1199,9 +1241,9 @@
"code": 58903, "code": 58903,
"name": "insert-comment" "name": "insert-comment"
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 43 "iconIdx": 44
}, },
{ {
"icon": { "icon": {
...@@ -1224,9 +1266,9 @@ ...@@ -1224,9 +1266,9 @@
"name": "insert-link", "name": "insert-link",
"code": 58901 "code": 58901
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 44 "iconIdx": 45
}, },
{ {
"icon": { "icon": {
...@@ -1249,9 +1291,9 @@ ...@@ -1249,9 +1291,9 @@
"name": "insert-photo", "name": "insert-photo",
"code": 58902 "code": 58902
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 45 "iconIdx": 46
}, },
{ {
"icon": { "icon": {
...@@ -1274,9 +1316,9 @@ ...@@ -1274,9 +1316,9 @@
"name": "cancel", "name": "cancel",
"code": 58906 "code": 58906
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 46 "iconIdx": 47
}, },
{ {
"icon": { "icon": {
...@@ -1299,9 +1341,9 @@ ...@@ -1299,9 +1341,9 @@
"prevSize": 24, "prevSize": 24,
"code": 58907 "code": 58907
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 47 "iconIdx": 48
}, },
{ {
"icon": { "icon": {
...@@ -1324,9 +1366,9 @@ ...@@ -1324,9 +1366,9 @@
"code": 58887, "code": 58887,
"name": "chevron-left" "name": "chevron-left"
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 48 "iconIdx": 49
}, },
{ {
"icon": { "icon": {
...@@ -1349,9 +1391,9 @@ ...@@ -1349,9 +1391,9 @@
"code": 58904, "code": 58904,
"name": "chevron-right" "name": "chevron-right"
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 49 "iconIdx": 50
}, },
{ {
"icon": { "icon": {
...@@ -1374,9 +1416,9 @@ ...@@ -1374,9 +1416,9 @@
"prevSize": 24, "prevSize": 24,
"code": 58908 "code": 58908
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 50 "iconIdx": 51
}, },
{ {
"icon": { "icon": {
...@@ -1399,9 +1441,9 @@ ...@@ -1399,9 +1441,9 @@
"name": "public", "name": "public",
"code": 58914 "code": 58914
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 51 "iconIdx": 52
}, },
{ {
"icon": { "icon": {
...@@ -1424,9 +1466,9 @@ ...@@ -1424,9 +1466,9 @@
"prevSize": 24, "prevSize": 24,
"code": 58915 "code": 58915
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 52 "iconIdx": 53
}, },
{ {
"icon": { "icon": {
...@@ -1453,9 +1495,9 @@ ...@@ -1453,9 +1495,9 @@
"code": 58922, "code": 58922,
"name": "mail" "name": "mail"
}, },
"setIdx": 0, "setIdx": 1,
"setId": 1, "setId": 1,
"iconIdx": 53 "iconIdx": 54
} }
], ],
"height": 1024, "height": 1024,
......
h/static/styles/vendor/icomoon.css
View file @ 3435194f
...@@ -20,6 +20,9 @@ ...@@ -20,6 +20,9 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.h-icon-google-plus:before {
content: "\e906";
}
.h-icon-annotate:before { .h-icon-annotate:before {
content: "\e903"; content: "\e903";
} }
...@@ -41,7 +44,7 @@ ...@@ -41,7 +44,7 @@
.h-icon-cancel-outline:before { .h-icon-cancel-outline:before {
content: "\e619"; content: "\e619";
} }
.h-icon-google-plus:before { .h-icon-google-plus-old:before {
content: "\ea88"; content: "\ea88";
} }
.h-icon-facebook:before { .h-icon-facebook:before {
......
h/templates/client/annotation.html
View file @ 3435194f
...@@ -154,18 +154,50 @@ ...@@ -154,18 +154,50 @@
<div class="annotation-actions" ng-if="!vm.isSaving && !vm.editing() && vm.id()"> <div class="annotation-actions" ng-if="!vm.isSaving && !vm.editing() && vm.id()">
<div ng-show="vm.isSaving">Saving…</div> <div ng-show="vm.isSaving">Saving…</div>
<button class="small btn btn-clean" <button class="small btn btn-clean"
ng-click="vm.reply()" ng-click="vm.reply()">
><i class="h-icon-reply btn-icon"></i> Reply</button> <i class="h-icon-reply btn-icon"></i>
<span class="share-dialog-wrapper"> Reply
</button>
<span class="share-dialog-wrapper" ng-if="!vm.feature('direct_linking')">
<button class="small btn btn-clean" <button class="small btn btn-clean"
ng-click="vm.share($event)" ng-click="vm.share($event)">
><i class="h-icon-link btn-icon"></i> Link</button> <i class="h-icon-link btn-icon"></i>
<span class="share-dialog" ng-click="$event.stopPropagation()"> Link
</button>
<span class="share-dialog share-dialog--actions" ng-click="$event.stopPropagation()">
<a target="_blank" <a target="_blank"
class="h-icon-link" class="h-icon-link"
ng-href="{{vm.annotationURI}}" ng-href="{{vm.annotationURI}}"
title="Open in new tab"></a> title="Open in new tab">
<input type="text" value="{{vm.annotationURI}}" readonly> </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>
</span> </span>
<button class="small btn btn-clean" <button class="small btn btn-clean"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment