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
Hide 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;
}
&.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 {
padding: 0;
width: 220px;
border: none;
color: $text-color;
}
.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
View file @ 3435194f
......@@ -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/fonts/selection.json
View file @ 3435194f
{
"IcoMoonType": "selection",
"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": {
"paths": [
......@@ -29,9 +71,9 @@
"prevSize": 24,
"code": 59651
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 0
"iconIdx": 1
},
{
"icon": {
......@@ -75,9 +117,9 @@
"prevSize": 24,
"code": 59652
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 1
"iconIdx": 2
},
{
"icon": {
......@@ -107,9 +149,9 @@
"prevSize": 24,
"code": 59653
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 2
"iconIdx": 3
},
{
"icon": {
......@@ -133,9 +175,9 @@
"prevSize": 24,
"code": 59392
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 3
"iconIdx": 4
},
{
"icon": {
......@@ -163,9 +205,9 @@
"prevSize": 24,
"code": 59393
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 4
"iconIdx": 5
},
{
"icon": {
......@@ -190,9 +232,9 @@
"prevSize": 24,
"code": 58910
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 5
"iconIdx": 6
},
{
"icon": {
......@@ -218,9 +260,9 @@
"name": "cancel-outline",
"code": 58905
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 6
"iconIdx": 7
},
{
"icon": {
......@@ -244,11 +286,11 @@
"prevSize": 24,
"code": 60040,
"ligatures": "google-plus, brand2",
"name": "google-plus"
"name": "google-plus-old"
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 7
"iconIdx": 8
},
{
"icon": {
......@@ -274,9 +316,9 @@
"ligatures": "facebook2, brand7",
"name": "facebook"
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 8
"iconIdx": 9
},
{
"icon": {
......@@ -303,9 +345,9 @@
"ligatures": "twitter, brand11",
"name": "twitter"
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 9
"iconIdx": 10
},
{
"icon": {
......@@ -331,9 +373,9 @@
"name": "github",
"code": 59648
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 10
"iconIdx": 11
},
{
"icon": {
......@@ -358,9 +400,9 @@
"name": "feed",
"code": 59649
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 11
"iconIdx": 12
},
{
"icon": {
......@@ -391,9 +433,9 @@
"code": 58911,
"name": "cc-by"
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 12
"iconIdx": 13
},
{
"icon": {
......@@ -424,9 +466,9 @@
"code": 58912,
"name": "cc-logo"
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 13
"iconIdx": 14
},
{
"icon": {
......@@ -464,9 +506,9 @@
"code": 58913,
"name": "cc-zero"
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 14
"iconIdx": 15
},
{
"icon": {
......@@ -498,9 +540,9 @@
"name": "markdown",
"code": 58891
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 15
"iconIdx": 16
},
{
"icon": {
......@@ -522,9 +564,9 @@
"code": 59650,
"name": "move"
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 16
"iconIdx": 17
},
{
"icon": {
......@@ -547,9 +589,9 @@
"code": 58909,
"name": "arrow-right"
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 17
"iconIdx": 18
},
{
"icon": {
......@@ -572,9 +614,9 @@
"code": 58921,
"name": "arrow-drop-down"
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 18
"iconIdx": 19
},
{
"icon": {
......@@ -597,9 +639,9 @@
"code": 58920,
"name": "link"
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 19
"iconIdx": 20
},
{
"icon": {
......@@ -622,9 +664,9 @@
"name": "create",
"code": 58919
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 20
"iconIdx": 21
},
{
"icon": {
......@@ -647,9 +689,9 @@
"code": 58916,
"name": "delete"
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 21
"iconIdx": 22
},
{
"icon": {
......@@ -672,9 +714,9 @@
"code": 58917,
"name": "remove"
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 22
"iconIdx": 23
},
{
"icon": {
......@@ -697,9 +739,9 @@
"code": 58918,
"name": "edit"
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 23
"iconIdx": 24
},
{
"icon": {
......@@ -722,9 +764,9 @@
"name": "bookmark",
"code": 58880
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 24
"iconIdx": 25
},
{
"icon": {
......@@ -747,9 +789,9 @@
"prevSize": 24,
"code": 58881
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 25
"iconIdx": 26
},
{
"icon": {
......@@ -772,9 +814,9 @@
"prevSize": 24,
"code": 58882
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 26
"iconIdx": 27
},
{
"icon": {
......@@ -798,9 +840,9 @@
"name": "search",
"code": 58883
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 27
"iconIdx": 28
},
{
"icon": {
......@@ -823,9 +865,9 @@
"name": "settings",
"code": 58884
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 28
"iconIdx": 29
},
{
"icon": {
......@@ -848,9 +890,9 @@
"prevSize": 24,
"code": 58885
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 29
"iconIdx": 30
},
{
"icon": {
......@@ -873,9 +915,9 @@
"prevSize": 24,
"code": 58886
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 30
"iconIdx": 31
},
{
"icon": {
......@@ -898,9 +940,9 @@
"prevSize": 24,
"code": 58888
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 31
"iconIdx": 32
},
{
"icon": {
......@@ -923,9 +965,9 @@
"prevSize": 24,
"code": 58889
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 32
"iconIdx": 33
},
{
"icon": {
......@@ -948,9 +990,9 @@
"prevSize": 24,
"code": 58890
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 33
"iconIdx": 34
},
{
"icon": {
......@@ -973,9 +1015,9 @@
"name": "flag",
"code": 58892
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 34
"iconIdx": 35
},
{
"icon": {
......@@ -998,9 +1040,9 @@
"name": "reply",
"code": 58893
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 35
"iconIdx": 36
},
{
"icon": {
......@@ -1024,9 +1066,9 @@
"prevSize": 24,
"code": 58894
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 36
"iconIdx": 37
},
{
"icon": {
......@@ -1049,9 +1091,9 @@
"name": "format-bold",
"code": 58895
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 37
"iconIdx": 38
},
{
"icon": {
......@@ -1074,9 +1116,9 @@
"name": "format-italic",
"code": 58896
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 38
"iconIdx": 39
},
{
"icon": {
......@@ -1099,9 +1141,9 @@
"name": "format-list-bulleted",
"code": 58897
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 39
"iconIdx": 40
},
{
"icon": {
......@@ -1124,9 +1166,9 @@
"name": "format-list-numbered",
"code": 58898
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 40
"iconIdx": 41
},
{
"icon": {
......@@ -1149,9 +1191,9 @@
"name": "format-quote",
"code": 58899
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 41
"iconIdx": 42
},
{
"icon": {
......@@ -1174,9 +1216,9 @@
"prevSize": 24,
"code": 58900
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 42
"iconIdx": 43
},
{
"icon": {
......@@ -1199,9 +1241,9 @@
"code": 58903,
"name": "insert-comment"
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 43
"iconIdx": 44
},
{
"icon": {
......@@ -1224,9 +1266,9 @@
"name": "insert-link",
"code": 58901
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 44
"iconIdx": 45
},
{
"icon": {
......@@ -1249,9 +1291,9 @@
"name": "insert-photo",
"code": 58902
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 45
"iconIdx": 46
},
{
"icon": {
......@@ -1274,9 +1316,9 @@
"name": "cancel",
"code": 58906
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 46
"iconIdx": 47
},
{
"icon": {
......@@ -1299,9 +1341,9 @@
"prevSize": 24,
"code": 58907
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 47
"iconIdx": 48
},
{
"icon": {
......@@ -1324,9 +1366,9 @@
"code": 58887,
"name": "chevron-left"
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 48
"iconIdx": 49
},
{
"icon": {
......@@ -1349,9 +1391,9 @@
"code": 58904,
"name": "chevron-right"
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 49
"iconIdx": 50
},
{
"icon": {
......@@ -1374,9 +1416,9 @@
"prevSize": 24,
"code": 58908
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 50
"iconIdx": 51
},
{
"icon": {
......@@ -1399,9 +1441,9 @@
"name": "public",
"code": 58914
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 51
"iconIdx": 52
},
{
"icon": {
......@@ -1424,9 +1466,9 @@
"prevSize": 24,
"code": 58915
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 52
"iconIdx": 53
},
{
"icon": {
......@@ -1453,9 +1495,9 @@
"code": 58922,
"name": "mail"
},
"setIdx": 0,
"setIdx": 1,
"setId": 1,
"iconIdx": 53
"iconIdx": 54
}
],
"height": 1024,
......
h/static/styles/vendor/icomoon.css
View file @ 3435194f
......@@ -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
View file @ 3435194f
......@@ -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>
class="h-icon-link"
ng-href="{{vm.annotationURI}}"
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"
......
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