Merge branch 'master' into linking-anh

1 files changed, 286 insertions, 189 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 316f63240..d8ad47ecb 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -1,12 +1,15 @@
 @import "global/globalCssVariables";
 
-$linkGap : 3px;
+$linkGap: 3px;
 
+.documentDecorations-Dark,
 .documentDecorations {
-    position: absolute;
-    z-index: 2000;
+  position: absolute;
+  z-index: 2000;
+}
+.documentDecorations-Dark {
+    background: dimgray;
 }
-
 .documentDecorations-container {
     z-index: $docDecorations-zindex;
     position: absolute;
@@ -56,6 +59,12 @@ $linkGap : 3px;
         }
     }
 
+    .documentDecorations-resizer-Dark
+    {
+        background: $light-gray;
+        opacity: 0.2;
+    }
+
     .documentDecorations-topLeftResizer,
     .documentDecorations-leftResizer,
     .documentDecorations-bottomLeftResizer {
@@ -94,6 +103,7 @@ $linkGap : 3px;
             position: absolute;
         }
     }
+
     .documentDecorations-rotation {
         background: transparent;
         right: -15;
@@ -122,62 +132,105 @@ $linkGap : 3px;
         opacity: 1;
     }
 
-    .documentDecorations-bottomRightResizer {
-        grid-row: 4;
-    }
+  .documentDecorations-topLeftResizer,
+  .documentDecorations-leftResizer,
+  .documentDecorations-bottomLeftResizer {
+    grid-column: 1;
+  }
 
-    .documentDecorations-topRightResizer,
-    .documentDecorations-bottomLeftResizer {
-        cursor: nesw-resize;
-        background: unset;
-        opacity: 1;
-    }
+  .documentDecorations-topResizer,
+  .documentDecorations-bottomResizer {
+    grid-column-start: 2;
+    grid-column-end: 5;
+  }
 
-    .documentDecorations-topRightResizer {
-        border-right: 2px solid;
-        border-top: 2px solid;
-    }
+  .documentDecorations-bottomRightResizer,
+  .documentDecorations-topRightResizer,
+  .documentDecorations-rightResizer {
+    grid-column-start: 5;
+    grid-column-end: 7;
+  }
+
+  .documentDecorations-rotation,
+  .documentDecorations-borderRadius {
+    grid-column: 5;
+    grid-row: 4;
+    border-radius: 100%;
+    background: black;
+    height: 8;
+    right: -12;
+    top: 12;
+    position: relative;
+    pointer-events: all;
+    cursor: nwse-resize;
+
+    .borderRadiusTooltip {
+      width: 10px;
+      height: 10px;
+      position: absolute;
+    }
+  }
+  .documentDecorations-rotation {
+    background: transparent;
+    right: -15;
+  }
+
+  .documentDecorations-topLeftResizer,
+  .documentDecorations-bottomRightResizer {
+    cursor: nwse-resize;
+    background: unset;
+    opacity: 1;
+  }
 
-    .documentDecorations-bottomLeftResizer {
-        border-left: 2px solid;
-        border-bottom: 2px solid;
-    }
+  .documentDecorations-topLeftResizer {
+    border-left: 2px solid;
+    border-top: solid 2px;
+  }
 
-    .documentDecorations-topRightResizer:hover,
-    .documentDecorations-bottomLeftResizer:hover {
-        cursor: nesw-resize;
-        background: black;
-        opacity: 1;
-    }
+  .documentDecorations-bottomRightResizer {
+    border-right: 2px solid;
+    border-bottom: solid 2px;
+  }
 
-    .documentDecorations-topResizer,
-    .documentDecorations-bottomResizer {
-        cursor: ns-resize;
-    }
+  .documentDecorations-topLeftResizer:hover,
+  .documentDecorations-bottomRightResizer:hover {
+    opacity: 1;
+  }
 
-    .documentDecorations-leftResizer,
-    .documentDecorations-rightResizer {
-        cursor: ew-resize;
-    }
+  .documentDecorations-bottomRightResizer {
+    grid-row: 4;
+  }
 
-    .documentDecorations-contextMenu {
-        width: 25px;
-        height: calc(100% + 8px); // 8px for the height of the top resizer bar
-        grid-column-start: 2;
-        grid-column-end: 2;
-        pointer-events: all;
-        padding-left: 5px;
-        cursor: pointer;
-    }
+  .documentDecorations-topRightResizer,
+  .documentDecorations-bottomLeftResizer {
+    cursor: nesw-resize;
+    background: unset;
+    opacity: 1;
+  }
+
+  .documentDecorations-topRightResizer {
+    border-right: 2px solid;
+    border-top: 2px solid;
+  }
+
+  .documentDecorations-bottomLeftResizer {
+    border-left: 2px solid;
+    border-bottom: 2px solid;
+  }
+
+  .documentDecorations-topRightResizer:hover,
+  .documentDecorations-bottomLeftResizer:hover {
+    cursor: nesw-resize;
+    background: black;
+    opacity: 1;
+  }
 
-    .documentDecorations-titleBackground {
-        background: #ffffffcf;
-        border-radius: 8px;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-    }
+  .documentDecorations-topResizer,
+  .documentDecorations-bottomResizer {
+    cursor: ns-resize;
+  }
 
+    .documentDecorations-title-Dark,
     .documentDecorations-title {
         opacity: 1;
         grid-column-start: 2;
@@ -189,81 +242,128 @@ $linkGap : 3px;
         margin-left: 5px;
         height: 22px;
         position: absolute;
-        .documentDecorations-titleSpan {
+
+        .documentDecorations-titleSpan, 
+        .documentDecorations-titleSpan-Dark  {
             width: 100%;
             border-radius: 8px;
-            background: #ffffffcf;
+            background: #ffffffa0;
             position: absolute;
             display: inline-block;
             cursor: move;
         }
+        .documentDecorations-titleSpan-Dark {
+            background: hsla(0, 0%, 0%, 0.412);
+        }
     }
-
-    .focus-visible {
-        margin-left: 0px;
+    .documentDecorations-title-Dark {
+        color: white;
+        background: black;
     }
-}
 
+  .documentDecorations-contextMenu {
+    width: 25px;
+    height: calc(100% + 8px); // 8px for the height of the top resizer bar
+    grid-column-start: 2;
+    grid-column-end: 2;
+    pointer-events: all;
+    padding-left: 5px;
+    cursor: pointer;
+  }
 
-.documentDecorations-iconifyButton {
+  .documentDecorations-titleBackground {
+    background: #ffffffcf;
+    border-radius: 8px;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
+
+  .documentDecorations-title {
     opacity: 1;
-    grid-column-start: 4;
+    grid-column-start: 2;
     grid-column-end: 4;
-    pointer-events: all;
-    right: 0;
-    cursor: pointer;
+    pointer-events: auto;
+    overflow: hidden;
+    text-align: center;
+    display: flex;
+    margin-left: 5px;
+    height: 22px;
     position: absolute;
-    width: 20px;
+    .documentDecorations-titleSpan {
+      width: 100%;
+      border-radius: 8px;
+      background: #ffffffcf;
+      position: absolute;
+      display: inline-block;
+      cursor: move;
+    }
+  }
+
+  .focus-visible {
+    margin-left: 0px;
+  }
+}
+
+.documentDecorations-iconifyButton {
+  opacity: 1;
+  grid-column-start: 4;
+  grid-column-end: 4;
+  pointer-events: all;
+  right: 0;
+  cursor: pointer;
+  position: absolute;
+  width: 20px;
 }
 
 .documentDecorations-openButton {
-    display: flex;
-    align-items: center;
-    opacity: 1;
-    grid-column-start: 5;
-    grid-column-end: 5;
-    pointer-events: all;
-    cursor: pointer;
+  display: flex;
+  align-items: center;
+  opacity: 1;
+  grid-column-start: 5;
+  grid-column-end: 5;
+  pointer-events: all;
+  cursor: pointer;
 }
 
 .documentDecorations-closeButton {
-    display: flex;
-    align-items: center;
-    opacity: 1;
-    grid-column-start: 1;
-    grid-column-end: 3;
-    pointer-events: all;
-    cursor: pointer;
-
-    >svg {
-        margin: 0;
-    }
+  display: flex;
+  align-items: center;
+  opacity: 1;
+  grid-column-start: 1;
+  grid-column-end: 3;
+  pointer-events: all;
+  cursor: pointer;
+
+  > svg {
+    margin: 0;
+  }
 }
 
 .documentDecorations-background {
-    background: lightblue;
-    position: absolute;
-    opacity: 0.1;
+  background: lightblue;
+  position: absolute;
+  opacity: 0.1;
 }
 
 .linkFlyout {
-    grid-column: 2/4;
+  grid-column: 2/4;
 }
 
 .linkButton-empty:hover {
-    background: $medium-gray;
-    transform: scale(1.05);
-    cursor: pointer;
+  background: $medium-gray;
+  transform: scale(1.05);
+  cursor: pointer;
 }
 
 .linkButton-nonempty:hover {
-    background: $medium-gray;
-    transform: scale(1.05);
-    cursor: pointer;
+  background: $medium-gray;
+  transform: scale(1.05);
+  cursor: pointer;
 }
 
 .link-button-container {
-    border-radius: 10px;
+    border-radius: 13px;
     width: max-content;
     height: auto;
     display: flex;
@@ -277,135 +377,132 @@ $linkGap : 3px;
 }
 
 .linkButtonWrapper {
-    pointer-events: auto;
-    padding-right: 5px;
-    width: 25px;
+  pointer-events: auto;
+  padding-right: 5px;
+  width: 25px;
 }
 
 .linkButton-linker {
-    height: 20px;
-    width: 20px;
-    text-align: center;
-    border-radius: 50%;
-    pointer-events: auto;
-    color: $dark-gray;
-    border: $dark-gray 1px solid;
+  height: 20px;
+  width: 20px;
+  text-align: center;
+  border-radius: 50%;
+  pointer-events: auto;
+  color: $dark-gray;
+  border: $dark-gray 1px solid;
 }
 
 .linkButton-linker:hover {
-    cursor: pointer;
-    transform: scale(1.05);
+  cursor: pointer;
+  transform: scale(1.05);
 }
 
 .linkButton-empty,
 .linkButton-nonempty {
-    height: 20px;
-    width: 20px;
-    border-radius: 50%;
-    opacity: 0.9;
-    pointer-events: auto;
-    background-color: $dark-gray;
-    color: $white;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    font-size: 75%;
-    transition: transform 0.2s;
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &:hover {
-        background: $medium-gray;
-        transform: scale(1.05);
-        cursor: pointer;
-    }
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  opacity: 0.9;
+  pointer-events: auto;
+  background-color: $dark-gray;
+  color: $white;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  font-size: 75%;
+  transition: transform 0.2s;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &:hover {
+    background: $medium-gray;
+    transform: scale(1.05);
+    cursor: pointer;
+  }
 }
 
 .templating-menu {
-    position: absolute;
-    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;
+  position: absolute;
+  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;
 }
 
 .documentdecorations-icon {
-    margin: 0px;
+  margin: 0px;
 }
+
 .templating-button,
 .docDecs-tagButton {
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    opacity: 0.9;
-    font-size: 14;
-    background-color: $dark-gray;
-    color: $white;
-    text-align: center;
-    cursor: pointer;
-
-    &:hover {
-        background: $medium-gray;
-        transform: scale(1.05);
-    }
-}
-
-.documentDecorations-darkScheme {
-    background: dimgray;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  opacity: 0.9;
+  font-size: 14;
+  background-color: $dark-gray;
+  color: $white;
+  text-align: center;
+  cursor: pointer;
+
+  &:hover {
+    background: $medium-gray;
+    transform: scale(1.05);
+  }
 }
 
 #template-list {
-    position: absolute;
-    top: 25px;
-    left: 0px;
-    width: max-content;
-    font-family: $sans-serif;
-    font-size: 12px;
-    background-color: $light-gray;
-    padding: 2px 12px;
-    list-style: none;
-
-    .templateToggle,
-    .chromeToggle {
-        text-align: left;
-    }
-
-    input {
-        margin-right: 10px;
-    }
+  position: absolute;
+  top: 25px;
+  left: 0px;
+  width: max-content;
+  font-family: $sans-serif;
+  font-size: 12px;
+  background-color: $light-gray;
+  padding: 2px 12px;
+  list-style: none;
+
+  .templateToggle,
+  .chromeToggle {
+    text-align: left;
+  }
+
+  input {
+    margin-right: 10px;
+  }
 }
 
 @-moz-keyframes spin {
-    100% {
-        -moz-transform: rotate(360deg);
-    }
+  100% {
+    -moz-transform: rotate(360deg);
+  }
 }
 
 @-webkit-keyframes spin {
-    100% {
-        -webkit-transform: rotate(360deg);
-    }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
 }
 
 @keyframes spin {
-    100% {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
 }
 
 @keyframes shadow-pulse {
-    0% {
-        box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.8);
-    }
+  0% {
+    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.8);
+  }
 
-    100% {
-        box-shadow: 0 0 0 10px rgba(0, 255, 0, 0);
-    }
-}
\ No newline at end of file
+  100% {
+    box-shadow: 0 0 0 10px rgba(0, 255, 0, 0);
+  }
+}