aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/collections/CollectionStackingView.tsx4
-rw-r--r--src/client/views/collections/TabDocView.tsx2
-rw-r--r--src/client/views/nodes/CollectionFreeFormDocumentView.tsx30
-rw-r--r--src/client/views/nodes/PresBox.scss1
-rw-r--r--src/client/views/nodes/PresBox.tsx35
-rw-r--r--src/client/views/presentationview/PresElementBox.scss218
-rw-r--r--src/client/views/presentationview/PresElementBox.tsx133
7 files changed, 176 insertions, 247 deletions
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 72ce041e1..d41e0528d 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -295,12 +295,16 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
if (docs) {
newDocs.map((doc, i) => {
if (i === 0) {
+ doc.dragging = false;
+ DragManager.docsBeingDragged = [];
if (targInd === -1) targInd = docs.length;
else targInd = docs.indexOf(this.filteredChildren[targInd]);
const srcInd = docs.indexOf(doc);
docs.splice(srcInd, 1);
docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, doc);
} else if (i < (newDocs.length / 2)) { //glr: for some reason dragged documents are duplicated
+ doc.dragging = false;
+ DragManager.docsBeingDragged = [];
if (targInd === -1) targInd = docs.length;
else targInd = docs.indexOf(newDocs[0]) + 1;
const srcInd = docs.indexOf(doc);
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 8c1a003b9..70eb5b895 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -123,7 +123,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
@undoBatch
@action
public static PinDoc(doc: Doc, unpin = false, audioRange?: boolean) {
- if (unpin) console.log('remove unpin');
+ if (unpin) console.log('TODO: Remove UNPIN from this location');
//add this new doc to props.Document
const curPres = CurrentUserUtils.ActivePresentation;
if (curPres) {
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index d6f8ce19c..5a8ce4e14 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -65,7 +65,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
w: Cast(doc["w-indexed"], listSpec("number"), [NumCast(doc._width)]).reduce((p, w, i) => (i <= timecode && w !== undefined) || p === undefined ? w : p, undefined as any as number),
x: Cast(doc["x-indexed"], listSpec("number"), [NumCast(doc.x)]).reduce((p, x, i) => (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number),
y: Cast(doc["y-indexed"], listSpec("number"), [NumCast(doc.y)]).reduce((p, y, i) => (i <= timecode && y !== undefined) || p === undefined ? y : p, undefined as any as number),
- scroll: Cast(doc["scroll-indexed"], listSpec("number"), [NumCast(doc._scrollY, 0)]).reduce((p, s, i) => (i <= timecode && s !== undefined) || p === undefined ? s : p, undefined as any as number),
+ scroll: Cast(doc["scroll-indexed"], listSpec("number"), [NumCast(doc._scrollTop, 0)]).reduce((p, s, i) => (i <= timecode && s !== undefined) || p === undefined ? s : p, undefined as any as number),
opacity: Cast(doc["opacity-indexed"], listSpec("number"), [NumCast(doc.opacity, 1)]).reduce((p, o, i) => i <= timecode || p === undefined ? o : p, undefined as any as number),
});
}
@@ -97,24 +97,24 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
d["text-color"] = "grey";
} else { d["text-color"] = "black"; }
} else if (d.appearFrame === 0) {
- d["text-color"] = "black";
}
}
- public static updateScrollframe(doc: Doc, time: number) {
- const timecode = Math.round(time);
- const scrollIndexed = Cast(doc['scroll-indexed'], listSpec("number"), null);
- scrollIndexed?.length <= timecode + 1 && scrollIndexed.push(undefined as any as number);
- setTimeout(() => doc.dataTransition = "inherit", 1010);
- }
+ // public static updateScrollframe(doc: Doc, time: number) {
+ // console.log('update scroll frame');
+ // const timecode = Math.round(time);
+ // const scrollIndexed = Cast(doc['scroll-indexed'], listSpec("number"), null);
+ // scrollIndexed?.length <= timecode + 1 && scrollIndexed.push(undefined as any as number);
+ // setTimeout(() => doc.dataTransition = "inherit", 1010);
+ // }
- public static setupScroll(doc: Doc, timecode: number) {
- const scrollList = new List<number>();
- scrollList[timecode] = NumCast(doc._scrollY);
- doc["scroll-indexed"] = scrollList;
- doc.activeFrame = ComputedField.MakeFunction("self._currentFrame");
- doc._scrollY = ComputedField.MakeInterpolated("scroll", "activeFrame");
- }
+ // public static setupScroll(doc: Doc, timecode: number) {
+ // const scrollList = new List<number>();
+ // scrollList[timecode] = NumCast(doc._scrollTop);
+ // doc["scroll-indexed"] = scrollList;
+ // doc.activeFrame = ComputedField.MakeFunction("self._currentFrame");
+ // doc._scrollTop = ComputedField.MakeInterpolated("scroll", "activeFrame");
+ // }
public static updateKeyframe(docs: Doc[], time: number, targetDoc?: Doc) {
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 7bc6c1dfd..ad2e7122f 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -22,7 +22,6 @@ $light-background: #ececec;
position: relative;
height: calc(100% - 67px);
width: 100%;
- margin-top: 3px;
}
.presBox-toolbar-dropdown {
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 7eca09f8c..1af1d5c90 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -118,7 +118,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
this.rootDoc._forceRenderEngine = "timeline";
this.rootDoc._replacedChrome = "replaced";
this.layoutDoc.presStatus = "edit";
- this.layoutDoc._gridGap = 5;
+ this.layoutDoc._gridGap = 0;
+ this.layoutDoc._yMargin = 0;
this.turnOffEdit(true);
DocListCastAsync((Doc.UserDoc().myPresentations as Doc).data).then(async pres => {
await Promise.all(pres!);
@@ -153,7 +154,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
setTimeout(() => targetDoc._viewTransition = undefined, 1010);
// targetDoc._currentFrame = curFrame + 1;
this.nextKeyframe(targetDoc, activeItem);
- // if (targetDoc.scrollProgressivize) CollectionFreeFormDocumentView.updateScrollframe(targetDoc, currentFrame);
if (activeItem.presProgressivize) CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0, targetDoc);
else targetDoc.editing = true;
// if (activeItem.zoomProgressivize) this.zoomProgressivizeNext(targetDoc);
@@ -277,7 +277,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
// If openDocument is selected then it should open the document for the user
if (activeItem.openDocument) {
- collectionDocView ? collectionDocView.props.addDocTab(activeItem, "inPlace") : this.props.addDocTab(activeItem, "replace:right");
+ collectionDocView ? collectionDocView.props.addDocTab(activeItem, "replace") : this.props.addDocTab(activeItem, "replace:left");
} else
//docToJump stayed same meaning, it was not in the group or was the last element in the group
if (activeItem.zoomProgressivize && this.rootDoc.presStatus !== 'edit') {
@@ -526,7 +526,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
// pivot field may be set by the user in timeline view (or some other way) -- need to reset it here
viewType === CollectionViewType.Stacking && (this.rootDoc._pivotField = undefined);
this.rootDoc._viewType = viewType;
- if (viewType === CollectionViewType.Stacking) this.layoutDoc._gridGap = 5;
+ if (viewType === CollectionViewType.Stacking) this.layoutDoc._gridGap = 0;
});
/**
@@ -1252,22 +1252,13 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
const currentFrame = Cast(tagDoc._currentFrame, "number", null);
if (currentFrame === undefined) {
tagDoc._currentFrame = 0;
- CollectionFreeFormDocumentView.setupScroll(tagDoc, 0);
+ // CollectionFreeFormDocumentView.setupScroll(tagDoc, 0);
CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0);
}
- CollectionFreeFormDocumentView.updateScrollframe(tagDoc, currentFrame);
+ // if (tagDoc.editScrollProgressivize) CollectionFreeFormDocumentView.updateScrollframe(tagDoc, currentFrame);
CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0, tagDoc);
tagDoc._currentFrame = Math.max(0, (currentFrame || 0) + 1);
tagDoc.lastFrame = Math.max(NumCast(tagDoc._currentFrame), NumCast(tagDoc.lastFrame));
- // if (curDoc.zoomProgressivize) {
- // const resize = document.getElementById('resizable');
- // if (resize) {
- // resize.style.width = this.checkList(tagDoc, curDoc["viewfinder-width-indexed"]) + 'px';
- // resize.style.height = this.checkList(tagDoc, curDoc["viewfinder-height-indexed"]) + 'px';
- // resize.style.top = this.checkList(tagDoc, curDoc["viewfinder-top-indexed"]) + 'px';
- // resize.style.left = this.checkList(tagDoc, curDoc["viewfinder-left-indexed"]) + 'px';
- // }
- // }
}
@undoBatch
@@ -1281,15 +1272,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
}
CollectionFreeFormDocumentView.gotoKeyframe(childDocs.slice());
tagDoc._currentFrame = Math.max(0, (currentFrame || 0) - 1);
- // if (actItem.zoomProgressivize) {
- // const resize = document.getElementById('resizable');
- // if (resize) {
- // resize.style.width = this.checkList(tagDoc, actItem["viewfinder-width-indexed"]) + 'px';
- // resize.style.height = this.checkList(tagDoc, actItem["viewfinder-height-indexed"]) + 'px';
- // resize.style.top = this.checkList(tagDoc, actItem["viewfinder-top-indexed"]) + 'px';
- // resize.style.left = this.checkList(tagDoc, actItem["viewfinder-left-indexed"]) + 'px';
- // }
- // }
}
/**
@@ -1474,7 +1456,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
activeItem.scrollProgressivize = !activeItem.scrollProgressivize;
const targetDoc: Doc = this.targetDoc;
targetDoc.scrollProgressivize = !targetDoc.scrollProgressivize;
- CollectionFreeFormDocumentView.setupScroll(targetDoc, NumCast(targetDoc._currentFrame));
+ // CollectionFreeFormDocumentView.setupScroll(targetDoc, NumCast(targetDoc._currentFrame));
if (targetDoc.editScrollProgressivize) {
targetDoc.editScrollProgressivize = false;
targetDoc._currentFrame = 0;
@@ -1684,6 +1666,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
</Tooltip>
<Tooltip title={<><div className="dash-tooltip">{this.rootDoc.expandBoolean ? "Minimize all" : "Expand all"}</div></>}>
<div className={`toolbar-button ${this.rootDoc.expandBoolean ? "active" : ""}`} onClick={this.toggleExpandMode}>
+ {/* <FontAwesomeIcon icon={this.rootDoc.expandBoolean ? "eye-slash" : "eye"} /> */}
<FontAwesomeIcon icon={"eye"} />
</div>
</Tooltip>
@@ -1802,7 +1785,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
{this.topPanel}
{this.toolbar}
{this.newDocumentToolbarDropdown}
- <div className="presBox-listCont">
+ <div className="presBox-listCont" style={{ padding: 0 }}>
{mode !== CollectionViewType.Invalid ?
<CollectionView {...this.props}
ContainingCollectionDoc={this.props.Document}
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index 4642caeb2..0e1953e7c 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -1,12 +1,14 @@
$light-blue: #AEDDF8;
$dark-blue: #5B9FDD;
$light-background: #ececec;
+$slide-background: #d5dce2;
+$slide-hover: #98b7da;
+$slide-active: #5B9FDD;
-.presElementBox-item {
+.presItem-container {
cursor: grab;
display: grid;
- grid-template-columns: max-content max-content max-content max-content;
- background-color: #d5dce2;
+ grid-template-columns: 20px auto;
font-family: Roboto;
letter-spacing: normal;
position: relative;
@@ -14,121 +16,63 @@ $light-background: #ececec;
width: 100%;
height: 100%;
font-weight: 400;
- border-radius: 6px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
- transition: all .3s;
- padding: 0px;
- padding-bottom: 3px;
-
- .presElementBox-highlight {
- position: absolute;
- transform: translate(-100px, -4px);
- z-index: -1;
- width: calc(100% + 200px);
- height: calc(100% + 8px);
- background-color: $light-blue;
- }
-
- .presElementBox-highlightTop {
- position: absolute;
- transform: translate(-100px, -4px);
- z-index: -1;
- width: calc(100% + 200px);
- height: calc(50% + 4px);
- }
-
- .presElementBox-highlightBottom {
- position: absolute;
- transform: translate(-100px, 0px);
- z-index: -1;
- top: 50%;
- width: calc(100% + 200px);
- height: calc(50% + 4px);
- }
+ align-items: center;
- .documentView-node {
- position: absolute;
- z-index: 1;
+ .presItem-number {
+ margin-top: 7px;
+ font-size: 12px;
+ font-weight: 700;
+ text-align: center;
+ justify-self: center;
+ align-self: flex-start;
+ position: relative;
+ display: inline-block;
+ overflow: hidden;
}
-}
-
-.presElementBox-item-above {
- border-top: black 2px solid;
-}
-
-.presElementBox-item-below {
- border-bottom: black 2px solid;
-}
-.presElementBox-item:hover {
- transition: all .1s;
- background: #98b7da;
- border-radius: 6px;
-}
-.presElementBox-active {
- color: black;
- border-radius: 6px;
- border: solid 2px $dark-blue;
}
-.presElementBox-buttons {
+.presItem-slide {
+ position: relative;
+ background-color: #d5dce2;
+ border-radius: 5px;
+ height: calc(100% - 8px);
+ width: calc(100% - 5px);
display: grid;
- grid-template-rows: 15px;
- top: 15px;
- left: -20;
- position: absolute;
- width: 100%;
- height: auto;
-
- .presElementBox-interaction {
- display: none;
- }
-
- .presElementBox-interaction-selected {
- color: grey;
- background-color: rgba(0, 0, 0, 0);
- float: left;
- padding: 0px;
- width: 20px;
- height: 20px;
+ grid-template-columns: max-content max-content max-content max-content auto;
+
+ .presItem-name {
+ z-index: 300;
+ align-self: center;
+ font-size: 13px;
+ font-family: Roboto;
+ font-weight: 500;
+ position: relative;
+ top: 1px;
+ padding-left: 10px;
+ padding-right: 10px;
+ letter-spacing: normal;
+ width: max-content;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: pre;
}
}
-.presElementBox-number {
- font-size: 12px;
- width: 20;
- font-weight: 700;
- text-align: right;
- justify-content: center;
- align-content: center;
- left: -20;
- position: absolute;
- display: inline-block;
- overflow: hidden;
+.presItem-slide.active {
+ box-shadow: 0 0 0px 1.5px $dark-blue;
}
-.presElementBox-name {
- z-index: 300;
- align-self: center;
- font-size: 13px;
- font-family: Roboto;
- font-weight: 500;
- position: relative;
- top: 1px;
- padding-left: 10px;
- padding-right: 10px;
- letter-spacing: normal;
- width: max-content;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: pre;
-}
+// .presItem-slide:hover {
+// background: $slide-hover;
+// }
.presElementBox-time {
align-self: center;
@@ -162,52 +106,34 @@ $light-background: #ececec;
overflow: hidden;
}
-.presElementBox-closeIcon {
- cursor: pointer;
- position: absolute;
- border-radius: 100%;
- z-index: 300;
- right: 3px;
- top: 3px;
- width: 20px;
- height: 20px;
+.presItem-slideButtons {
display: flex;
- font-size: 75%;
- background-color: black;
- color: white;
- justify-content: center;
- align-items: center;
-}
-
-.presElementBox-expand {
- cursor: pointer;
- position: absolute;
- border-radius: 100%;
- z-index: 300;
- right: 26px;
- top: 3px;
- width: 20px;
- height: 20px;
- display: flex;
- font-size: 75%;
- background-color: black;
- color: white;
- justify-content: center;
- align-items: center;
-}
+ grid-column: 7;
+ width: 60px;
+ justify-self: right;
+ justify-content: flex-end;
+
+ .slideButton {
+ cursor: pointer;
+ position: relative;
+ border-radius: 100%;
+ z-index: 300;
+ width: 15px;
+ height: 15px;
+ display: flex;
+ font-size: 75%;
+ justify-self: center;
+ align-self: center;
+ background-color: rgba(0, 0, 0, 0.5);
+ color: white;
+ justify-content: center;
+ align-items: center;
+ transition: 0.2s;
+ margin-right: 3px;
+ }
-.presElementBox-expand-selected {
- cursor: pointer;
- position: absolute;
- border-radius: 100%;
- right: 3px;
- bottom: 3px;
- width: 20px;
- height: 20px;
- z-index: 300;
- display: flex;
- background-color: black;
- color: white;
- justify-content: center;
- align-items: center;
+ .slideButton:hover {
+ background-color: rgba(0, 0, 0, 1);
+ transform: scale(1.15);
+ }
} \ No newline at end of file
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index aa44c13d1..97344d33d 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -74,7 +74,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
embedHeight = () => 100;
// embedWidth = () => this.props.PanelWidth();
// embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight);
- embedWidth = () => this.props.PanelWidth() - 20;
+ embedWidth = () => this.props.PanelWidth() - 30;
/**
* The function that is responsible for rendering a preview or not for this
* presentation element.
@@ -155,11 +155,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
}
headerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+ const activeItem = this.rootDoc;
e.stopPropagation();
e.preventDefault();
- DragManager.docsBeingDragged = [];
- this._highlightTopRef.current!.style.borderBottom = "0px";
- this._highlightBottomRef.current!.style.borderBottom = "0px";
}
startDrag = (e: PointerEvent, down: number[], delta: number[]) => {
@@ -167,10 +165,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray().map(doc => doc));
const dragItem: HTMLElement[] = [];
PresBox.Instance._dragArray.map(ele => {
- const drag = ele;
- drag.style.backgroundColor = "#d5dce2";
- drag.style.borderRadius = '5px';
- dragItem.push(drag);
+ const doc = ele;
+ doc.className = "presItem-slide"
+ dragItem.push(doc);
});
if (activeItem) {
DragManager.StartDocumentDrag(dragItem.map(ele => ele), dragData, e.clientX, e.clientY);
@@ -180,27 +177,34 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
return false;
}
- private _highlightTopRef: React.RefObject<HTMLDivElement> = React.createRef();
- private _highlightBottomRef: React.RefObject<HTMLDivElement> = React.createRef();
-
-
- onPointerTop = (e: React.PointerEvent<HTMLDivElement>) => {
- if (DragManager.docsBeingDragged.length > 1) {
- this._highlightTopRef.current!.style.borderTop = "solid 2px #5B9FDD";
- }
+ onPointerOver = (e: any) => {
+ document.removeEventListener("pointermove", this.onPointerMove);
+ document.addEventListener("pointermove", this.onPointerMove);
}
- onPointerBottom = (e: React.PointerEvent<HTMLDivElement>) => {
+ onPointerMove = (e: PointerEvent) => {
+ const slide = this._itemRef.current!;
+ const rect = slide!.getBoundingClientRect();
+ let y = e.clientY - rect.top; //y position within the element.
+ let height = slide.clientHeight;
+ let halfLine = height / 2;
if (DragManager.docsBeingDragged.length > 1) {
- this._highlightBottomRef.current!.style.borderBottom = "solid 2px #5B9FDD";
+ if (y <= halfLine) {
+ slide.style.borderTop = "solid 2px #5B9FDD";
+ slide.style.borderBottom = "0px";
+ } else if (y > halfLine) {
+ slide.style.borderTop = "0px";
+ slide.style.borderBottom = "solid 2px #5B9FDD";
+ }
}
+ document.removeEventListener("pointermove", this.onPointerMove);
}
- onPointerLeave = (e: React.PointerEvent<HTMLDivElement>) => {
- if (DragManager.docsBeingDragged.length > 1) {
- this._highlightBottomRef.current!.style.borderBottom = "0px";
- this._highlightTopRef.current!.style.borderTop = "0px";
- }
+ onPointerLeave = (e: any) => {
+ console.log('pointerLeave');
+ this._itemRef.current!.style.borderTop = "0px"
+ this._itemRef.current!.style.borderBottom = "0px"
+ document.removeEventListener("pointermove", this.onPointerMove);
}
@action
@@ -225,12 +229,21 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
return true;
}
- render() {
- const className = "presElementBox-item" + (PresBox.Instance._selectedArray.includes(this.rootDoc) ? " presElementBox-active" : "");
- return !(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise ? (null) : (
- <div className={className} key={this.props.Document[Id] + this.indexInPres}
+ @action
+ clearArrays = () => {
+ PresBox.Instance._eleArray = [];
+ PresBox.Instance._eleArray.push(this._itemRef.current!);
+ PresBox.Instance._dragArray = [];
+ PresBox.Instance._dragArray.push(this._dragRef.current!);
+ }
+
+ @computed get mainItem() {
+ const isSelected: boolean = PresBox.Instance._selectedArray.includes(this.rootDoc);
+ const isDragging: boolean = BoolCast(this.rootDoc.dragging);
+ return (
+ <div className={`presItem-container`} key={this.props.Document[Id] + this.indexInPres}
ref={this._itemRef}
- style={{ outlineWidth: Doc.IsBrushed(this.targetDoc) ? `1px` : "0px", }}
+ style={{ backgroundColor: isSelected ? "#AEDDF8" : "rgba(0,0,0,0)", opacity: isDragging ? 0.3 : 1 }}
onClick={e => {
e.stopPropagation();
e.preventDefault();
@@ -243,30 +256,26 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
// Regular click
} else {
this.props.focus(this.rootDoc);
- PresBox.Instance._eleArray = [];
- PresBox.Instance._eleArray.push(this._itemRef.current!);
- PresBox.Instance._dragArray = [];
- PresBox.Instance._dragArray.push(this._dragRef.current!);
+ this.clearArrays();
}
}}
onDoubleClick={e => {
console.log('double click to open');
this.toggleProperties();
this.props.focus(this.rootDoc);
- PresBox.Instance._eleArray = [];
- PresBox.Instance._eleArray.push(this._itemRef.current!);
- PresBox.Instance._dragArray = [];
- PresBox.Instance._dragArray.push(this._dragRef.current!);
+ this.clearArrays();
}}
+ onPointerOver={this.onPointerOver}
+ onPointerLeave={this.onPointerLeave}
onPointerDown={this.headerDown}
onPointerUp={this.headerUp}
>
- <>
- <div className="presElementBox-number">
- {`${this.indexInPres + 1}.`}
- </div>
- <div ref={this._dragRef} className="presElementBox-name" style={{ maxWidth: (PresBox.Instance.toolbarWidth - 70) }}>
- <EditableView
+ <div className="presItem-number">
+ {`${this.indexInPres + 1}.`}
+ </div>
+ <div ref={this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`}>
+ <div className="presItem-name" style={{ maxWidth: (PresBox.Instance.toolbarWidth - 70) }}>
+ {isSelected ? <EditableView
ref={this._titleRef}
contents={this.rootDoc.title}
GetValue={() => StrCast(this.rootDoc.title)}
@@ -274,25 +283,33 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
this.onSetValue(value);
return true;
})}
- />
+ /> :
+ this.rootDoc.title
+ }
</div>
<Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.transition}</div></Tooltip>
<Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.duration}</div></Tooltip>
<Tooltip title={<><div className="dash-tooltip">{"Presentation pin view"}</div></>}><div className="presElementBox-time" style={{ fontWeight: 700, display: this.rootDoc.presPinView && PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>V</div></Tooltip>
- <Tooltip title={<><div className="dash-tooltip">{"Remove from presentation"}</div></>}><div
- className="presElementBox-closeIcon"
- onClick={this.removeItem}>
- <FontAwesomeIcon icon={"trash"} onPointerDown={e => e.stopPropagation()} />
- </div></Tooltip>
- <Tooltip title={<><div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}</div></>}><div className={"presElementBox-expand" + (this.rootDoc.presExpandInlineButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); }}>
- <FontAwesomeIcon icon={(this.rootDoc.presExpandInlineButton ? "angle-up" : "angle-down")} onPointerDown={e => e.stopPropagation()} />
- </div></Tooltip>
- </>
- <div ref={this._highlightTopRef} onPointerOver={this.onPointerTop} onPointerLeave={this.onPointerLeave} className="presElementBox-highlightTop" style={{ zIndex: 299, backgroundColor: "rgba(0,0,0,0)" }} />
- <div ref={this._highlightBottomRef} onPointerOver={this.onPointerBottom} onPointerLeave={this.onPointerLeave} className="presElementBox-highlightBottom" style={{ zIndex: 299, backgroundColor: "rgba(0,0,0,0)" }} />
- <div className="presElementBox-highlight" style={{ backgroundColor: PresBox.Instance._selectedArray.includes(this.rootDoc) ? "#AEDDF8" : "rgba(0,0,0,0)" }} />
- {this.renderEmbeddedInline}
- </div>
- );
+ <div className={"presItem-slideButtons"}>
+ <Tooltip title={<><div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}</div></>}><div className={"slideButton"} onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); }}>
+ <FontAwesomeIcon icon={this.rootDoc.presExpandInlineButton ? "eye-slash" : "eye"} onPointerDown={e => e.stopPropagation()} />
+ </div></Tooltip>
+ <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>
+ {this.renderEmbeddedInline}
+ </div>
+ </div>);
+ }
+
+ render() {
+ let item = null;
+ if (!(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise) item = null;
+ else item = this.mainItem;
+
+ return item;
}
} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 15:57:31 +0000