Merge branch 'master' into schema-mehek

1 files changed, 74 insertions, 34 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 2e8d31478..ccac5ffe4 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -8,12 +8,42 @@ $resizeHandler: 8px;
 .documentDecorations {
     position: absolute;
     z-index: 2000;
+
+    // Rotation handler
+    .documentDecorations-rotation {
+        border-radius: 100%;
+        height: 30;
+        width: 30;
+        right: -30;
+        top: calc(50% - 15px);
+        position: absolute;
+        pointer-events: all;
+        cursor: pointer;
+        background: white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        font-size: 30px;
+        opacity: 0.1;
+        &:hover {
+            opacity: 1;
+        }
+    }
+    .documentDecorations-rotationCenter {
+        position: absolute;
+        width: 6px;
+        height: 6px;
+        pointer-events: all;
+        background: green;
+        border-radius: 50%;
+    }
 }
 .documentDecorations-Dark {
     background: dimgray;
 }
+
 .documentDecorations-container {
-    z-index: $docDecorations-zindex;
     position: absolute;
     top: 0;
     left: 0;
@@ -28,7 +58,8 @@ $resizeHandler: 8px;
         grid-column-end: 4;
         flex-direction: row;
         gap: 2px;
-
+        pointer-events: all;
+        cursor: move;
 
         .documentDecorations-openButton {
             display: flex;
@@ -45,13 +76,15 @@ $resizeHandler: 8px;
             height: 20px;
             min-width: 20px;
             border-radius: 100%;
+            opacity: 0.5;
             cursor: pointer;
 
             &:hover {
                 color: #02600d;
+                opacity: 1;
             }
         }
-        
+
         .documentDecorations-closeButton {
             display: flex;
             align-items: center;
@@ -66,12 +99,14 @@ $resizeHandler: 8px;
             height: 20px;
             min-width: 20px;
             border-radius: 100%;
+            opacity: 0.5;
             cursor: pointer;
 
             &:hover {
                 color: #a94442;
+                opacity: 1;
             }
-        
+
             > svg {
                 margin: 0;
             }
@@ -93,12 +128,14 @@ $resizeHandler: 8px;
             height: 20px;
             min-width: 20px;
             border-radius: 100%;
+            opacity: 0.5;
             cursor: pointer;
 
             &:hover {
                 color: #a94442;
+                opacity: 1;
             }
-        
+
             > svg {
                 margin: 0;
             }
@@ -117,6 +154,10 @@ $resizeHandler: 8px;
             border-radius: 8px;
             outline: none;
             border: none;
+            opacity: 0.3;
+            &:hover {
+                opacity: 1;
+            }
 
             .documentDecorations-titleSpan,
             .documentDecorations-titleSpan-Dark {
@@ -179,7 +220,7 @@ $resizeHandler: 8px;
     .documentDecorations-rightResizer {
         pointer-events: auto;
         background: $medium-gray;
-        opacity: 0.1;
+        opacity: 0.2;
         &:hover {
             opacity: 1;
         }
@@ -207,31 +248,12 @@ $resizeHandler: 8px;
         grid-column: 3;
     }
 
-    // Rotation handler
-    .documentDecorations-rotation {
-        border-radius: 100%;
-        height: 30;
-        width: 30;
-        right: -10;
-        top: 50%;
-        z-index: 1000000;
-        position: absolute;
-        pointer-events: all;
-        cursor: pointer;
-        background: white;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        text-align: center;
-        font-size: 30px;
-    }
-
     // Border radius handler
     .documentDecorations-borderRadius {
         position: absolute;
         border-radius: 100%;
-        left: 3px;
-        top: 23px;
+        left: 7px;
+        top: 27px;
         background: $medium-gray;
         height: 10;
         width: 10;
@@ -239,6 +261,21 @@ $resizeHandler: 8px;
         cursor: nwse-resize;
     }
 
+    .documentDecorations-lock {
+        position: relative;
+        background: black;
+        color: gray;
+        height: 14;
+        width: 14;
+        pointer-events: all;
+        margin: auto;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        border-radius: 15%;
+        cursor: default;
+    }
+
     .documentDecorations-rotationPath {
         position: absolute;
         width: 100%;
@@ -253,7 +290,7 @@ $resizeHandler: 8px;
     .documentDecorations-bottomRightResizer {
         cursor: nwse-resize;
         background: unset;
-        opacity: 1;
+        transform: scale(2);
     }
 
     .documentDecorations-topLeftResizer {
@@ -292,7 +329,6 @@ $resizeHandler: 8px;
     .documentDecorations-bottomRightResizer {
         cursor: nwse-resize;
         background: unset;
-        opacity: 1;
     }
 
     .documentDecorations-topLeftResizer {
@@ -318,7 +354,7 @@ $resizeHandler: 8px;
     .documentDecorations-bottomLeftResizer {
         cursor: nesw-resize;
         background: unset;
-        opacity: 1;
+        transform: scale(2);
     }
 
     .documentDecorations-topRightResizer {
@@ -333,8 +369,6 @@ $resizeHandler: 8px;
 
     .documentDecorations-topRightResizer:hover,
     .documentDecorations-bottomLeftResizer:hover {
-        cursor: nesw-resize;
-        background: black;
         opacity: 1;
     }
 
@@ -353,8 +387,6 @@ $resizeHandler: 8px;
     }
 }
 
-
-
 .documentDecorations-background {
     background: lightblue;
     position: absolute;
@@ -388,7 +420,15 @@ $resizeHandler: 8px;
     justify-content: center;
     align-items: center;
     gap: 5px;
+    top: 4px;
     background: $light-gray;
+    opacity: 0.2;
+    pointer-events: all;
+    transition: opacity 1s;
+    &:hover {
+        transition: unset;
+        opacity: 1;
+    }
 }
 
 .linkButtonWrapper {