Merge branch 'master' of https://github.com/brown-dash/Dash-Web

1 files changed, 54 insertions, 30 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 2e8d31478..4e0b061a6 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -1,19 +1,45 @@
 @import 'global/globalCssVariables';
 
 $linkGap: 3px;
-$headerHeight: 20px;
+$headerHeight: 25px;
 $resizeHandler: 8px;
 
 .documentDecorations-Dark,
 .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;
+    }
+    .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 +54,8 @@ $resizeHandler: 8px;
         grid-column-end: 4;
         flex-direction: row;
         gap: 2px;
-
+        pointer-events: all;
+        cursor: move;
 
         .documentDecorations-openButton {
             display: flex;
@@ -51,7 +78,7 @@ $resizeHandler: 8px;
                 color: #02600d;
             }
         }
-        
+
         .documentDecorations-closeButton {
             display: flex;
             align-items: center;
@@ -71,7 +98,7 @@ $resizeHandler: 8px;
             &:hover {
                 color: #a94442;
             }
-        
+
             > svg {
                 margin: 0;
             }
@@ -98,7 +125,7 @@ $resizeHandler: 8px;
             &:hover {
                 color: #a94442;
             }
-        
+
             > svg {
                 margin: 0;
             }
@@ -207,31 +234,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 +247,21 @@ $resizeHandler: 8px;
         cursor: nwse-resize;
     }
 
+    .documentDecorations-lock {
+        position: absolute;
+        background: black;
+        right: 11;
+        top: 30px;
+        color: gray;
+        height: 14;
+        width: 14;
+        pointer-events: all;
+        margin: auto;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+    }
+
     .documentDecorations-rotationPath {
         position: absolute;
         width: 100%;
@@ -254,6 +277,7 @@ $resizeHandler: 8px;
         cursor: nwse-resize;
         background: unset;
         opacity: 1;
+        transform: scale(2);
     }
 
     .documentDecorations-topLeftResizer {
@@ -308,6 +332,7 @@ $resizeHandler: 8px;
     .documentDecorations-topLeftResizer:hover,
     .documentDecorations-bottomRightResizer:hover {
         opacity: 1;
+        background: black;
     }
 
     .documentDecorations-bottomRightResizer {
@@ -319,6 +344,7 @@ $resizeHandler: 8px;
         cursor: nesw-resize;
         background: unset;
         opacity: 1;
+        transform: scale(2);
     }
 
     .documentDecorations-topRightResizer {
@@ -333,7 +359,6 @@ $resizeHandler: 8px;
 
     .documentDecorations-topRightResizer:hover,
     .documentDecorations-bottomLeftResizer:hover {
-        cursor: nesw-resize;
         background: black;
         opacity: 1;
     }
@@ -353,8 +378,6 @@ $resizeHandler: 8px;
     }
 }
 
-
-
 .documentDecorations-background {
     background: lightblue;
     position: absolute;
@@ -388,6 +411,7 @@ $resizeHandler: 8px;
     justify-content: center;
     align-items: center;
     gap: 5px;
+    top: 4px;
     background: $light-gray;
 }