Merge remote-tracking branch 'origin/templating'

1 files changed, 58 insertions, 38 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index dd646e77c..27b94e6d2 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -3,18 +3,19 @@
 .documentDecorations {
     position: absolute;
 }
+
 .documentDecorations-container {
     z-index: $docDecorations-zindex;
     position: absolute;
     top: 0;
-    left:0;
+    left: 0;
     display: grid;
     grid-template-rows: 20px 8px 1fr 8px;
     grid-template-columns: 8px 16px 1fr 8px 8px;
     pointer-events: none;
 
     #documentDecorations-centerCont {
-        grid-column:3;
+        grid-column: 3;
         background: none;
     }
 
@@ -39,8 +40,8 @@
     #documentDecorations-bottomRightResizer,
     #documentDecorations-topRightResizer,
     #documentDecorations-rightResizer {
-        grid-column-start:5;
-        grid-column-end:7;
+        grid-column-start: 5;
+        grid-column-end: 7;
     }
 
     #documentDecorations-topLeftResizer,
@@ -64,7 +65,7 @@
     }
     .title{
         background: lightblue;
-        grid-column-start:3;
+        grid-column-start: 3;
         grid-column-end: 4;
         pointer-events: auto;
         overflow: hidden;
@@ -72,7 +73,7 @@
 }
 
 .documentDecorations-closeButton {
-    background:$alt-accent;
+    background: $alt-accent;
     opacity: 0.8;
     grid-column-start: 4;
     grid-column-end: 6;
@@ -80,8 +81,9 @@
     text-align: center;
     cursor: pointer;
 }
+
 .documentDecorations-minimizeButton {
-    background:$alt-accent;
+    background: $alt-accent;
     opacity: 0.8;
     grid-column-start: 1;
     grid-column-end: 3;
@@ -94,6 +96,7 @@
     width: $MINIMIZED_ICON_SIZE;
     height: $MINIMIZED_ICON_SIZE;
 }
+
 .documentDecorations-background {
     background: lightblue;
     position: absolute;
@@ -105,21 +108,9 @@
     margin-left: 25px;
 }
 
-.linkButton-empty:hover {
-    background: $main-accent;
-    transform: scale(1.05);
-    cursor: pointer;
-}
-
-.linkButton-nonempty:hover {
-    background: $main-accent;
-    transform: scale(1.05);
-    cursor: pointer;
-}
-
 .linkButton-linker {
-    position:absolute;
-    bottom:0px;
+    position: absolute;
+    bottom: 0px;
     left: 0px;
     height: 20px;
     width: 20px;
@@ -139,13 +130,14 @@
     justify-content: center;
     align-items: center;
 }
+
 .linkButton-tray {
     grid-column: 1/4;
 }
+
 .linkButton-empty {
     height: 20px;
     width: 20px;
-    margin-top: 10px;
     border-radius: 50%;
     opacity: 0.9;
     pointer-events: auto;
@@ -159,23 +151,51 @@
     display: flex;
     justify-content: center;
     align-items: center;
+
+    &:hover {
+        background: $main-accent;
+        transform: scale(1.05);
+        cursor: pointer;
+    }
 }
 
-.linkButton-nonempty {
-    height: 20px;
-    width: 20px;
-    margin-top: 10px;
-    border-radius: 50%;
-    opacity: 0.9;
+.templating-menu {
+    position: absolute;
+    bottom: 0;
+    left: 50px;
     pointer-events: auto;
-    background-color: $dark-color;
-    color: $light-color;
-    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;
+
+        &: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;
+
+        input {
+            margin-right: 10px;
+        }
+    }
 }
\ No newline at end of file