From 80a8e0a7e48ee84cb121b80d72d485bc10e9269b Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Thu, 1 Oct 2020 19:32:21 +0800 Subject: redesigned presItems --- .../views/collections/CollectionStackingView.tsx | 5 +- src/client/views/nodes/PresBox.tsx | 7 +- .../views/presentationview/PresElementBox.scss | 182 ++++++++++++++++----- .../views/presentationview/PresElementBox.tsx | 132 ++++++++------- 4 files changed, 229 insertions(+), 97 deletions(-) (limited to 'src') 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 { - 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 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 // 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 // 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
{this.rootDoc.expandBoolean ? "Minimize all" : "Expand all"}
}>
+ {/* */}
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 4642caeb2..cb97c398c 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,49 +16,123 @@ $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; + align-items: center; + + .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; } - .presElementBox-highlightTop { - position: absolute; - transform: translate(-100px, -4px); - z-index: -1; - width: calc(100% + 200px); - height: calc(50% + 4px); + .presItem-slide { + position: relative; + background-color: #d5dce2; + border-radius: 5px; + /* margin-left: 20px; */ + height: calc(100% - 5px); + width: 100%; + 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-highlightBottom { - position: absolute; - transform: translate(-100px, 0px); - z-index: -1; - top: 50%; - width: calc(100% + 200px); - height: calc(50% + 4px); + .presItem-slide.active { + border: solid 2px $dark-blue; } - .documentView-node { - position: absolute; - z-index: 1; + .presItem-slide:hover { + background: $slide-hover; } } +.presItem-slide { + position: relative; + background-color: #d5dce2; + border-radius: 5px; + /* margin-left: 20px; */ + height: calc(100% - 5px); + width: 100%; + 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-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); +} + +.documentView-node { + position: absolute; + z-index: 1; +} + .presElementBox-item-above { border-top: black 2px solid; } @@ -179,6 +255,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 +305,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 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) => { + 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 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 = React.createRef(); - private _highlightBottomRef: React.RefObject = React.createRef(); - - - onPointerTop = (e: React.PointerEvent) => { - 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) => { + 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) => { - 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 { + 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 ( +
{ e.stopPropagation(); e.preventDefault(); @@ -243,29 +261,25 @@ export class PresElementBox extends ViewBoxBaseComponent { 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} > - <> -
- {`${this.indexInPres + 1}.`} -
-
+
+ {`${this.indexInPres + 1}.`} +
+
+
{ e.stopPropagation(); this.presExpandDocumentClick(); isSelected ? console.log('selected') : console.log('not selected'); }} style={{ maxWidth: (PresBox.Instance.toolbarWidth - 70) }}>
{"Movement speed"}
}>
300 ? "block" : "none" }}>{this.transition}
{"Duration"}
}>
300 ? "block" : "none" }}>{this.duration}
{"Presentation pin view"}
}>
300 ? "block" : "none" }}>V
 -
{"Remove from presentation"}
}>
- e.stopPropagation()} /> -
-
{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}
}>
{ e.stopPropagation(); this.presExpandDocumentClick(); }}> - e.stopPropagation()} /> -
- -
-
-
- {this.renderEmbeddedInline} -
- ); +
+
{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}
}>
{ e.stopPropagation(); this.presExpandDocumentClick(); }}> + e.stopPropagation()} /> +
+
{"Remove from presentation"}
}>
+ e.stopPropagation()} /> +
+
+ {this.renderEmbeddedInline} +
+
); + } + + 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 -- cgit v1.2.3-70-g09d2