aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/DocumentDecorations.scss31
-rw-r--r--src/client/views/DocumentDecorations.tsx51
-rw-r--r--src/client/views/nodes/VideoBox.tsx3
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}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 20:43:54 +0000