aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/collections/CollectionStackingView.tsx5
-rw-r--r--src/client/views/nodes/PresBox.tsx7
-rw-r--r--src/client/views/presentationview/PresElementBox.scss154
-rw-r--r--src/client/views/presentationview/PresElementBox.tsx132
4 files changed, 172 insertions, 126 deletions
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index daaee67dc..d41e0528d 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -294,14 +294,17 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
const docs = this.childDocList;
if (docs) {
newDocs.map((doc, i) => {
- console.log(doc.title);
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/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 7eca09f8c..739f564a5 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -118,7 +118,7 @@ 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.turnOffEdit(true);
DocListCastAsync((Doc.UserDoc().myPresentations as Doc).data).then(async pres => {
await Promise.all(pres!);
@@ -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;
});
/**
@@ -1684,6 +1684,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>
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index 4642caeb2..0fd32602a 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,67 +16,68 @@ $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);
- }
+ align-items: center;
- .presElementBox-highlightBottom {
- position: absolute;
- transform: translate(-100px, 0px);
- z-index: -1;
- top: 50%;
- width: calc(100% + 200px);
- height: calc(50% + 4px);
+ .presItem-number {
+ font-size: 12px;
+ font-weight: 700;
+ text-align: center;
+ justify-self: center;
+ align-self: center;
+ /* padding-right: 3%; */
+ /* width: 8%; */
+ position: relative;
+ display: inline-block;
+ overflow: hidden;
}
- .documentView-node {
- position: absolute;
- z-index: 1;
- }
+
}
-.presElementBox-item-above {
- border-top: black 2px solid;
+.presItem-slide {
+ position: relative;
+ background-color: #d5dce2;
+ border-radius: 5px;
+ height: calc(100% - 5px);
+ width: calc(100% - 5px);
+ display: grid;
+ 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-item-below {
- border-bottom: black 2px solid;
+.presItem-slide.active {
+ border: solid 2px $dark-blue;
}
-.presElementBox-item:hover {
- transition: all .1s;
- background: #98b7da;
- border-radius: 6px;
+.presItem-slide:hover {
+ background: $slide-hover;
}
-.presElementBox-active {
- color: black;
- border-radius: 6px;
- border: solid 2px $dark-blue;
+.documentView-node {
+ position: absolute;
+ z-index: 1;
}
.presElementBox-buttons {
@@ -100,19 +103,6 @@ $light-background: #ececec;
}
}
-.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;
-}
-
.presElementBox-name {
z-index: 300;
align-self: center;
@@ -179,6 +169,37 @@ $light-background: #ececec;
align-items: center;
}
+
+.presItem-slideButtons {
+ display: flex;
+ grid-column: 7;
+ width: 40px;
+ justify-self: right;
+ justify-content: space-evenly;
+
+ .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;
+ }
+
+ .slideButton:hover {
+ background-color: rgba(0, 0, 0, 1);
+ transform: scale(1.15);
+ }
+}
.presElementBox-expand {
cursor: pointer;
position: absolute;
@@ -198,15 +219,16 @@ $light-background: #ececec;
.presElementBox-expand-selected {
cursor: pointer;
- position: absolute;
+ position: relative;
border-radius: 100%;
- right: 3px;
- bottom: 3px;
- width: 20px;
- height: 20px;
z-index: 300;
+ width: 15px;
+ height: 15px;
display: flex;
- background-color: black;
+ font-size: 75%;
+ justify-self: right;
+ align-self: center;
+ background-color: rgba(0,0,0,0.5);
color: white;
justify-content: center;
align-items: center;
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index aa44c13d1..8d53c8cc6 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,39 @@ 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) => {
+ console.log('pointerOver');
+ document.removeEventListener("pointermove", this.onPointerMove);
+ document.addEventListener("pointermove", this.onPointerMove);
}
- onPointerBottom = (e: React.PointerEvent<HTMLDivElement>) => {
+ onPointerMove = (e: PointerEvent) => {
+ console.log('pointerMove');
+ 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;
+ console.log(y);
+ console.log(height);
+ console.log(halfLine);
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 +234,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)" }}
onClick={e => {
e.stopPropagation();
e.preventDefault();
@@ -243,29 +261,25 @@ 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) }}>
+ <div className="presItem-number">
+ {`${this.indexInPres + 1}.`}
+ </div>
+ <div ref={this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`} style={{ opacity: isDragging ? 0.3 : 1 }}>
+ <div className="presItem-name" onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); isSelected ? console.log('selected') : console.log('not selected'); }} style={{ maxWidth: (PresBox.Instance.toolbarWidth - 70) }}>
<EditableView
ref={this._titleRef}
contents={this.rootDoc.title}
@@ -279,20 +293,26 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
<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 23:10:01 +0000