made decorations semi transparent until hover to make ui less noisy

1 files changed, 27 insertions, 24 deletions

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