aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/nodes/trails/PresElementBox.tsx129
1 files changed, 35 insertions, 94 deletions
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index a00441ddc..e4fab7528 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -81,9 +81,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
ScreenToLocalListTransform = (xCord: number, yCord: number) => [xCord, yCord];
@action
- presExpandDocumentClick = () => {
- this.rootDoc.presExpandInlineButton = !this.rootDoc.presExpandInlineButton;
- };
+ presExpandDocumentClick = () => (this.rootDoc.presExpandInlineButton = !this.rootDoc.presExpandInlineButton);
embedHeight = (): number => 97;
// embedWidth = () => this.props.PanelWidth();
@@ -385,7 +383,6 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
hideRecording = (e: React.MouseEvent, iconClick: boolean = false) => {
e.stopPropagation();
this.removeAllRecordingInOverlay();
-
// if (iconClick) PresElementBox.showVideo = false;
};
@@ -405,7 +402,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
@undoBatch
@action
- startRecording = (activeItem: Doc) => {
+ startRecording = (e: React.MouseEvent, activeItem: Doc) => {
+ e.stopPropagation();
console.log('start recording', 'activeItem', activeItem);
if (PresElementBox.videoIsRecorded(activeItem)) {
// if we already have an existing recording
@@ -481,22 +479,13 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
onPointerOver={this.onPointerOver}
onPointerLeave={this.onPointerLeave}
onPointerDown={this.headerDown}>
- {/* {miniView ?
- // when width is LESS than 110 px
- <div className={`presItem-miniSlide ${isSelected ? "active" : ""}`} ref={miniView ? this._dragRef : null}>
- {`${this.indexInPres + 1}.`}
- </div>
- :
- // when width is MORE than 110 px
- <div className="presItem-number">
- {`${this.indexInPres + 1}.`}
- </div>} */}
- {/* <div className="presItem-number">
- {`${this.indexInPres + 1}.`}
- </div> */}
- {miniView ? null : (
+ {miniView ? (
+ <div className={`presItem-miniSlide ${isSelected ? 'active' : ''}`} ref={this._dragRef}>
+ {`${this.indexInPres + 1}.`}
+ </div>
+ ) : (
<div
- ref={miniView ? null : this._dragRef}
+ ref={this._dragRef}
className={`presItem-slide ${isSelected ? 'active' : ''}`}
style={{
backgroundColor: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor),
@@ -514,79 +503,37 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
</div>
{/* <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.transition}</div></Tooltip> */}
{/* <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.duration}</div></Tooltip> */}
- <div className={'presItem-slideButtons'}>
- <Tooltip
- title={
- <>
- <div className="dash-tooltip">{'Update view'}</div>
- </>
- }>
+ <div className="presItem-slideButtons">
+ <Tooltip title={<div className="dash-tooltip">Update view</div>}>
<div className="slideButton" onClick={() => this.updateView(targetDoc, activeItem)} style={{ fontWeight: 700, display: activeItem.presPinView ? 'flex' : 'none' }}>
V
</div>
</Tooltip>
-
- {this.recordingIsInOverlay ? (
- <Tooltip
- title={
- <>
- <div className="dash-tooltip">{'Hide Recording'}</div>
- </>
- }>
- <div className="slideButton" onClick={e => this.hideRecording(e, true)} style={{ fontWeight: 700 }}>
- <FontAwesomeIcon icon={'video-slash'} onPointerDown={e => e.stopPropagation()} />
- </div>
- </Tooltip>
- ) : (
- <Tooltip
- title={
- <>
- <div className="dash-tooltip">{`${PresElementBox.videoIsRecorded(activeItem) ? 'Show' : 'Start'} recording`}</div>
- </>
- }>
- <div
- className="slideButton"
- onClick={e => {
- e.stopPropagation();
- this.startRecording(activeItem);
- }}
- style={{ fontWeight: 700 }}>
- <FontAwesomeIcon icon={'video'} onPointerDown={e => e.stopPropagation()} />
- </div>
- </Tooltip>
- )}
-
- {this.indexInPres === 0 ? null : (
- <Tooltip
- title={
- <>
- <div className="dash-tooltip">{activeItem.groupWithUp ? 'Ungroup' : 'Group with up'}</div>
- </>
- }>
- <div
- className="slideButton"
- onClick={() => (activeItem.groupWithUp = !activeItem.groupWithUp)}
- style={{
- zIndex: 1000 - this.indexInPres,
- fontWeight: 700,
- backgroundColor: activeItem.groupWithUp ? (presColorBool ? presBoxColor : Colors.MEDIUM_BLUE) : undefined,
- height: activeItem.groupWithUp ? 53 : 18,
- transform: activeItem.groupWithUp ? 'translate(0, -17px)' : undefined,
- }}>
- <div style={{ transform: activeItem.groupWithUp ? 'rotate(180deg) translate(0, -17.5px)' : 'rotate(0deg)' }}>
- <FontAwesomeIcon icon={'arrow-up'} onPointerDown={e => e.stopPropagation()} />
- </div>
+ <Tooltip title={<div className="dash-tooltip">{this.recordingIsInOverlay ? 'Hide Recording' : `${PresElementBox.videoIsRecorded(activeItem) ? 'Show' : 'Start'} recording`}</div>}>
+ <div className="slideButton" onClick={e => (this.recordingIsInOverlay ? this.hideRecording(e, true) : this.startRecording(e, activeItem))} style={{ fontWeight: 700 }}>
+ <FontAwesomeIcon icon={`video${this.recordingIsInOverlay ? '-slash' : ''}`} onPointerDown={e => e.stopPropagation()} />
+ </div>
+ </Tooltip>
+ <Tooltip title={<div className="dash-tooltip">{activeItem.groupWithUp ? 'Ungroup' : 'Group with up'}</div>}>
+ <div
+ className="slideButton"
+ onClick={() => (activeItem.groupWithUp = !activeItem.groupWithUp)}
+ style={{
+ display: this.indexInPres === 0 ? 'none' : '',
+ zIndex: 1000 - this.indexInPres,
+ fontWeight: 700,
+ backgroundColor: activeItem.groupWithUp ? (presColorBool ? presBoxColor : Colors.MEDIUM_BLUE) : undefined,
+ height: activeItem.groupWithUp ? 53 : 18,
+ transform: activeItem.groupWithUp ? 'translate(0, -17px)' : undefined,
+ }}>
+ <div style={{ transform: activeItem.groupWithUp ? 'rotate(180deg) translate(0, -17.5px)' : 'rotate(0deg)' }}>
+ <FontAwesomeIcon icon={'arrow-up'} onPointerDown={e => e.stopPropagation()} />
</div>
- </Tooltip>
- )}
- <Tooltip
- title={
- <>
- <div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? 'Minimize' : 'Expand'}</div>
- </>
- }>
+ </div>
+ </Tooltip>
+ <Tooltip title={<div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? 'Minimize' : 'Expand'}</div>}>
<div
- className={'slideButton'}
+ className="slideButton"
onClick={e => {
e.stopPropagation();
this.presExpandDocumentClick();
@@ -594,18 +541,12 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
<FontAwesomeIcon icon={this.rootDoc.presExpandInlineButton ? 'eye-slash' : 'eye'} onPointerDown={e => e.stopPropagation()} />
</div>
</Tooltip>
- <Tooltip
- title={
- <>
- <div className="dash-tooltip">{'Remove from presentation'}</div>
- </>
- }>
+ <Tooltip title={<div className="dash-tooltip">Remove from presentation</div>}>
<div className={'slideButton'} onClick={this.removeItem}>
<FontAwesomeIcon icon={'trash'} onPointerDown={e => e.stopPropagation()} />
</div>
</Tooltip>
</div>
- {/* <div className="presItem-docName" style={{ maxWidth: showMore ? (toolbarWidth - 195) : toolbarWidth - 105 }}>{activeItem.presPinView ? (<><i>View of </i> {targetDoc.title}</>) : targetDoc.title}</div> */}
{this.renderEmbeddedInline}
</div>
)}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 15:24:02 +0000