merged with master

1 files changed, 143 insertions, 36 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 2e7142a8e..76b7481a0 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -29,29 +29,118 @@ $linkGap: 3px;
     top: 20px;
     display: inline-block;
     position: absolute;
-    opacity: 0.5;
-  }
+    top: 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;
+        background: none;
+    }
 
-  .documentDecorations-radius {
-    pointer-events: auto;
-    opacity: 1;
-    transform: translate(10px, 10px);
-    grid-row: 4;
-  }
+    .documentDecorations-selectorButton {
+        pointer-events: auto;
+        height: 15px;
+        width: 15px;
+        left: -20px;
+        top: 20px;
+        display: inline-block;
+        position: absolute;
+        opacity: 0.5;
+    }
 
-  .documentDecorations-topLeftResizer,
-  .documentDecorations-topRightResizer,
-  .documentDecorations-bottomLeftResizer,
-  .documentDecorations-bottomRightResizer,
-  .documentDecorations-leftResizer,
-  .documentDecorations-topResizer,
-  .documentDecorations-bottomResizer,
-  .documentDecorations-rightResizer {
-    pointer-events: auto;
-    background: $medium-gray;
-    opacity: 0.1;
-    &:hover {
-      opacity: 1;
+    .documentDecorations-radius {
+        pointer-events: auto;
+        opacity: 1;
+        transform: translate(10px, 10px);
+        grid-row: 4;
+    }
+
+    .documentDecorations-topLeftResizer,
+    .documentDecorations-topRightResizer,
+    .documentDecorations-bottomLeftResizer,
+    .documentDecorations-bottomRightResizer,
+    .documentDecorations-leftResizer,
+    .documentDecorations-topResizer,
+    .documentDecorations-bottomResizer,
+    .documentDecorations-rightResizer {
+        pointer-events: auto;
+        background: $medium-gray;
+        opacity: 0.1;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+    .documentDecorations-topLeftResizer,
+    .documentDecorations-leftResizer,
+    .documentDecorations-bottomLeftResizer {
+        grid-column: 1
+    }
+
+    .documentDecorations-topResizer,
+    .documentDecorations-bottomResizer {
+        grid-column-start: 2;
+        grid-column-end: 5;
+    }
+
+    .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-topLeftResizer {
+        border-left: 2px solid;
+        border-top: solid 2px;
+    }
+
+    .documentDecorations-bottomRightResizer {
+        border-right: 2px solid;
+        border-bottom: solid 2px;
+    }
+
+    .documentDecorations-topLeftResizer:hover,
+    .documentDecorations-bottomRightResizer:hover {
+        opacity: 1;
     }
   }
 
@@ -153,10 +242,27 @@ $linkGap: 3px;
     cursor: ns-resize;
   }
 
-  .documentDecorations-leftResizer,
-  .documentDecorations-rightResizer {
-    cursor: ew-resize;
-  }
+    .documentDecorations-title {
+        opacity: 1;
+        grid-column-start: 2;
+        grid-column-end: 4;
+        pointer-events: auto;
+        overflow: hidden;
+        text-align: center;
+        display: flex;
+        margin-left: 5px;
+        height: 22px;
+        position: absolute;
+
+        .documentDecorations-titleSpan {
+            width: 100%;
+            border-radius: 8px;
+            background: #ffffffcf;
+            position: absolute;
+            display: inline-block;
+            cursor: move;
+        }
+    }
 
   .documentDecorations-contextMenu {
     width: 25px;
@@ -260,17 +366,17 @@ $linkGap: 3px;
 }
 
 .link-button-container {
-  border-radius: 10px;
-  width: max-content;
-  height: auto;
-  display: flex;
-  flex-direction: row;
-  z-index: 998;
-  position: absolute;
-  justify-content: center;
-  align-items: center;
-  gap: 5px;
-  background: $medium-gray;
+    border-radius: 13px;
+    width: max-content;
+    height: auto;
+    display: flex;
+    flex-direction: row;
+    z-index: 998;
+    position: absolute;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    background: $medium-gray;
 }
 
 .linkButtonWrapper {
@@ -335,6 +441,7 @@ $linkGap: 3px;
 .documentdecorations-icon {
   margin: 0px;
 }
+
 .templating-button,
 .docDecs-tagButton {
   width: 20px;