Merge pull request #3105 from hypothesis/sheetaluk/new_sharer

Sheetaluk/new sharer
hypothesis · Mar 18, 2016 · 3d410c8 · 3d410c8
2 parents d67fb8b + 731c6f6
commit 3d410c8
Show file tree

Hide file tree

Showing 6 changed files with 258 additions and 131 deletions.
diff --git a/h/static/styles/annotation.scss b/h/static/styles/annotation.scss
@@ -155,25 +155,32 @@ $annotation-card-left-padding: 10px;
   }
 
   &.open .share-dialog {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &.open .share-dialog--actions {
     display: block;
   }
 }
 
 .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 {

diff --git a/h/static/styles/share-link.scss b/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;

diff --git a/h/static/styles/vendor/fonts/h.woff b/h/static/styles/vendor/fonts/h.woff