merged hannah's linking changes

1 files changed, 101 insertions, 46 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 0dfa6f0ff..ecddb8b06 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -1,5 +1,6 @@
 @import "globalCssVariables";
 
+$linkGap : 3px;
 .documentDecorations {
     position: absolute;
 }
@@ -72,6 +73,7 @@
     }
 }
 
+
 .documentDecorations-closeButton {
     background: $alt-accent;
     opacity: 0.8;
@@ -103,36 +105,77 @@
     opacity: 0.1;
 }
 
+//     position: absolute;
+//     display: grid;
+//     z-index: 1000;
+//     grid-template-rows: 20px 1fr 20px 0px;
+//     grid-template-columns: 20px 1fr 20px;
+//     pointer-events: none;
+//     #documentDecorations-centerCont {
+//         background: none;
+//     }
+//     .documentDecorations-resizer {
+//         pointer-events: auto;
+//         background: lightblue;
+//         opacity: 0.4;
+//     }
+//     #documentDecorations-topLeftResizer,
+//     #documentDecorations-bottomRightResizer {
+//         cursor: nwse-resize;
+//     }
+//     #documentDecorations-topRightResizer,
+//     #documentDecorations-bottomLeftResizer {
+//         cursor: nesw-resize;
+//     }
+//     #documentDecorations-topResizer,
+//     #documentDecorations-bottomResizer {
+//         cursor: ns-resize;
+//     }
+//     #documentDecorations-leftResizer,
+//     #documentDecorations-rightResizer {
+//         cursor: ew-resize;
+//     }
+// }
 .linkFlyout {
+    grid-column: 2/4;
+    margin-top: $linkGap;
+}
+
+.linkButton-empty:hover {
+    background: $main-accent;
+    transform: scale(1.05);
+    cursor: pointer;
+}
+
+.linkButton-nonempty:hover {
+    background: $main-accent;
+    transform: scale(1.05);
+    cursor: pointer;
+}
+
+.link-button-container {
     grid-column: 1/4;
-    margin-left: 25px;
+    width: auto;
+    height: auto;
+    display: flex;
+    flex-direction: row;
 }
 
 .linkButton-linker {
-    position: absolute;
-    bottom: 0px;
-    left: 0px;
+    margin-left: 5px;
+    margin-top: $linkGap;
     height: 20px;
     width: 20px;
-    margin-top: 10px;
-    margin-right: 5px;
+    text-align: center;
     border-radius: 50%;
-    opacity: 0.9;
     pointer-events: auto;
     color: $dark-color;
     border: $dark-color 1px solid;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    font-size: 75%;
-    transition: transform 0.2s;
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
 }
 
-.linkButton-tray {
-    grid-column: 1/4;
+.linkButton-linker:hover {
+    cursor: pointer;
+    transform: scale(1.05);
 }
 
 .linkButton-empty, .linkButton-nonempty {
@@ -164,38 +207,50 @@
     bottom: 0;
     left: 50px;
     pointer-events: auto;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: 75%;
+    transition: transform 0.2s;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 
-    .templating-button {
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        opacity: 0.9;
-        background-color: $dark-color;
-        color: $light-color;
-        text-align: center;
-        cursor: pointer;
+.fa-icon-link {
+    margin-top: 3px;
+}
+.templating-button {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    opacity: 0.9;
+    font-size:14;
+    background-color: $dark-color;
+    color: $light-color;
+    text-align: center;
+    cursor: pointer;
 
-        &:hover {
-            background: $main-accent;
-            transform: scale(1.05);
-        }
+    &:hover {
+        background: $main-accent;
+        transform: scale(1.05);
     }
+}
+
+#template-list {
+    position: absolute;
+    top: 0;
+    left: 30px;
+    width: 150px;
+    line-height: 25px;
+    max-height: 175px;
+    font-family: $sans-serif;
+    font-size: 12px;
+    background-color: $light-color-secondary;
+    padding: 2px 12px;
+    list-style: none;
 
-    #template-list {
-        position: absolute;
-        top: 0;
-        left: 30px;
-        width: 150px;
-        line-height: 25px;
-        max-height: 175px;
-        font-family: $sans-serif;
-        font-size: 12px;
-        background-color: $light-color-secondary;
-        padding: 2px 12px;
-        list-style: none;
-
-        input {
-            margin-right: 10px;
-        }
+    input {
+        margin-right: 10px;
     }
 }
\ No newline at end of file