made decorations semi transparent until hover to make ui less noisy

3 files changed, 51 insertions, 34 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index fe1190e27..b41962c73 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -25,6 +25,10 @@ $resizeHandler: 8px;
         align-items: center;
         text-align: center;
         font-size: 30px;
+        opacity: 0.1;
+        &:hover {
+            opacity: 1;
+        }
     }
     .documentDecorations-rotationCenter {
         position: absolute;
@@ -72,10 +76,12 @@ $resizeHandler: 8px;
             height: 20px;
             min-width: 20px;
             border-radius: 100%;
+            opacity: 0.5;
             cursor: pointer;
 
             &:hover {
                 color: #02600d;
+                opacity: 1;
             }
         }
 
@@ -93,10 +99,12 @@ $resizeHandler: 8px;
             height: 20px;
             min-width: 20px;
             border-radius: 100%;
+            opacity: 0.5;
             cursor: pointer;
 
             &:hover {
                 color: #a94442;
+                opacity: 1;
             }
 
             > svg {
@@ -120,10 +128,12 @@ $resizeHandler: 8px;
             height: 20px;
             min-width: 20px;
             border-radius: 100%;
+            opacity: 0.5;
             cursor: pointer;
 
             &:hover {
                 color: #a94442;
+                opacity: 1;
             }
 
             > svg {
@@ -144,6 +154,10 @@ $resizeHandler: 8px;
             border-radius: 8px;
             outline: none;
             border: none;
+            opacity: 0.3;
+            &:hover {
+                opacity: 1;
+            }
 
             .documentDecorations-titleSpan,
             .documentDecorations-titleSpan-Dark {
@@ -206,7 +220,7 @@ $resizeHandler: 8px;
     .documentDecorations-rightResizer {
         pointer-events: auto;
         background: $medium-gray;
-        opacity: 0.1;
+        opacity: 0.2;
         &:hover {
             opacity: 1;
         }
@@ -248,10 +262,8 @@ $resizeHandler: 8px;
     }
 
     .documentDecorations-lock {
-        position: absolute;
+        position: relative;
         background: black;
-        right: 23px;
-        top: 3px;
         color: gray;
         height: 14;
         width: 14;
@@ -261,6 +273,7 @@ $resizeHandler: 8px;
         align-items: center;
         flex-direction: column;
         border-radius: 15%;
+        cursor: default;
     }
 
     .documentDecorations-rotationPath {
@@ -277,7 +290,6 @@ $resizeHandler: 8px;
     .documentDecorations-bottomRightResizer {
         cursor: nwse-resize;
         background: unset;
-        opacity: 1;
         transform: scale(2);
     }
 
@@ -317,7 +329,6 @@ $resizeHandler: 8px;
     .documentDecorations-bottomRightResizer {
         cursor: nwse-resize;
         background: unset;
-        opacity: 1;
     }
 
     .documentDecorations-topLeftResizer {
@@ -333,7 +344,6 @@ $resizeHandler: 8px;
     .documentDecorations-topLeftResizer:hover,
     .documentDecorations-bottomRightResizer:hover {
         opacity: 1;
-        background: black;
     }
 
     .documentDecorations-bottomRightResizer {
@@ -344,7 +354,6 @@ $resizeHandler: 8px;
     .documentDecorations-bottomLeftResizer {
         cursor: nesw-resize;
         background: unset;
-        opacity: 1;
         transform: scale(2);
     }
 
@@ -360,7 +369,6 @@ $resizeHandler: 8px;
 
     .documentDecorations-topRightResizer:hover,
     .documentDecorations-bottomLeftResizer:hover {
-        background: black;
         opacity: 1;
     }
 
@@ -414,6 +422,11 @@ $resizeHandler: 8px;
     gap: 5px;
     top: 4px;
     background: $light-gray;
+    opacity: 0.2;
+    pointer-events: all;
+    &:hover {
+        opacity: 1;
+    }
 }
 
 .linkButtonWrapper {
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 8e0686038..47347284c 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -755,24 +755,6 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
         );
 
         const colorScheme = StrCast(Doc.ActiveDashboard?.colorScheme);
-        const titleArea = this._editingTitle ? (
-            <input
-                ref={this._keyinput}
-                className={`documentDecorations-title${colorScheme}`}
-                type="text"
-                name="dynbox"
-                autoComplete="on"
-                value={hideTitle ? '' : this._accumulatedTitle}
-                onBlur={e => !hideTitle && this.titleBlur()}
-                onChange={action(e => !hideTitle && (this._accumulatedTitle = e.target.value))}
-                onKeyDown={hideTitle ? emptyFunction : this.titleEntered}
-                onPointerDown={e => e.stopPropagation()}
-            />
-        ) : (
-            <div className="documentDecorations-title" key="title" onPointerDown={this.onTitleDown}>
-                <span className={`documentDecorations-titleSpan${colorScheme}`}>{`${hideTitle ? '' : this.selectionTitle}`}</span>
-            </div>
-        );
 
         const leftBounds = this.props.boundsLeft;
         const topBounds = LightboxView.LightboxDoc ? 0 : this.props.boundsTop;
@@ -782,7 +764,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
         bounds.r = Math.max(bounds.x, Math.max(leftBounds, Math.min(window.innerWidth, bounds.r + borderRadiusDraggerWidth + this._resizeBorderWidth / 2) - this._resizeBorderWidth / 2 - borderRadiusDraggerWidth));
         bounds.b = Math.max(bounds.y, Math.max(topBounds, Math.min(window.innerHeight, bounds.b + this._resizeBorderWidth / 2 + this._linkBoxHeight) - this._resizeBorderWidth / 2 - this._linkBoxHeight));
 
-        const useLock = bounds.r - bounds.x > 120;
+        const useLock = bounds.r - bounds.x > 135 && seldocview.props.CollectionFreeFormDocumentView;
         const useRotation = seldocview.rootDoc.type !== DocumentType.EQUATION; // when do we want an object to not rotate?
         const rotation = NumCast(seldocview.rootDoc._rotation);
 
@@ -795,6 +777,32 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
         const maxDist = Math.min((this.Bounds.r - this.Bounds.x) / 2, (this.Bounds.b - this.Bounds.y) / 2);
         const radiusHandle = (borderRadius / docMax) * maxDist;
         const radiusHandleLocation = Math.min(radiusHandle, maxDist);
+
+        const titleArea = this._editingTitle ? (
+            <input
+                ref={this._keyinput}
+                className={`documentDecorations-title${colorScheme}`}
+                type="text"
+                name="dynbox"
+                autoComplete="on"
+                value={hideTitle ? '' : this._accumulatedTitle}
+                onBlur={e => !hideTitle && this.titleBlur()}
+                onChange={action(e => !hideTitle && (this._accumulatedTitle = e.target.value))}
+                onKeyDown={hideTitle ? emptyFunction : this.titleEntered}
+                onPointerDown={e => e.stopPropagation()}
+            />
+        ) : (
+            <div className="documentDecorations-title" key="title" onPointerDown={this.onTitleDown}>
+                <span className={`documentDecorations-titleSpan${colorScheme}`}>{`${hideTitle ? '' : this.selectionTitle}`}</span>
+                {!useLock ? null : (
+                    <Tooltip key="lock" title={<div className="dash-tooltip">toggle ability to interact with document</div>} placement="top">
+                        <div className="documentDecorations-lock" style={{ color: seldocview.rootDoc._lockedPosition ? 'red' : undefined }} onPointerDown={this.onLockDown} onContextMenu={e => e.preventDefault()}>
+                            <FontAwesomeIcon size="sm" icon="lock" />
+                        </div>
+                    </Tooltip>
+                )}
+            </div>
+        );
         return (
             <div className={`documentDecorations${colorScheme}`}>
                 <div
@@ -857,11 +865,6 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                                     onContextMenu={e => e.preventDefault()}
                                 />
                             )}
-                            {!useLock ? null : (
-                                <div key="lock" className="documentDecorations-lock" style={{ color: seldocview.rootDoc._lockedPosition ? 'red' : undefined }} onPointerDown={this.onLockDown} onContextMenu={e => e.preventDefault()}>
-                                    <FontAwesomeIcon size="sm" icon="lock" />
-                                </div>
-                            )}
 
                             {hideDocumentButtonBar ? null : (
                                 <div
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index fb47bfc07..70ac84fa4 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -9,7 +9,7 @@ import { InkTool } from '../../../fields/InkField';
 import { List } from '../../../fields/List';
 import { Cast, NumCast, StrCast } from '../../../fields/Types';
 import { AudioField, ImageField, VideoField } from '../../../fields/URLField';
-import { emptyFunction, formatTime, OmitKeys, returnFalse, returnOne, setupMoveUpEvents, Utils } from '../../../Utils';
+import { emptyFunction, formatTime, OmitKeys, returnEmptyString, returnFalse, returnOne, setupMoveUpEvents, Utils } from '../../../Utils';
 import { Docs, DocUtils } from '../../documents/Documents';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { Networking } from '../../Network';
@@ -1107,6 +1107,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                             addDocument={this.addDocWithTimecode}
                             finishMarquee={this.finishMarquee}
                             savedAnnotations={this.savedAnnotations}
+                            selectionText={returnEmptyString}
                             annotationLayer={this._annotationLayer.current}
                             mainCont={this._mainCont.current}
                             anchorMenuCrop={this.crop}