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 From 3b14058df2cf9cb444836a6b1fea92835eb51761 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Thu, 1 Oct 2020 20:34:46 +0800 Subject: small css changes --- .../views/presentationview/PresElementBox.scss | 98 ++-------------------- 1 file changed, 6 insertions(+), 92 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index cb97c398c..0fd32602a 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -37,50 +37,15 @@ $slide-active: #5B9FDD; overflow: hidden; } - .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; - } - } - - .presItem-slide.active { - border: solid 2px $dark-blue; - } - - .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%; + width: calc(100% - 5px); display: grid; grid-template-columns: max-content max-content max-content max-content auto; @@ -102,30 +67,12 @@ $slide-active: #5B9FDD; } } -.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); +.presItem-slide.active { + border: solid 2px $dark-blue; } -.presElementBox-highlightBottom { - position: absolute; - transform: translate(-100px, 0px); - z-index: -1; - top: 50%; - width: calc(100% + 200px); - height: calc(50% + 4px); +.presItem-slide:hover { + background: $slide-hover; } .documentView-node { @@ -133,26 +80,6 @@ $slide-active: #5B9FDD; z-index: 1; } -.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 { display: grid; grid-template-rows: 15px; @@ -176,19 +103,6 @@ $slide-active: #5B9FDD; } } -.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; -- cgit v1.2.3-70-g09d2 From 3d266cb4636aad2e6fe39595b113b0dd52f4f329 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Sun, 4 Oct 2020 20:20:08 +0800 Subject: stepping through PDF fixes --- src/client/views/collections/TabDocView.tsx | 2 +- .../views/nodes/CollectionFreeFormDocumentView.tsx | 30 +++---- src/client/views/nodes/PresBox.tsx | 27 +----- .../views/presentationview/PresElementBox.scss | 99 +--------------------- 4 files changed, 24 insertions(+), 134 deletions(-) (limited to 'src') 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 { @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 (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 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(); - 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(); + // 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.tsx b/src/client/views/nodes/PresBox.tsx index 739f564a5..2af00586b 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -153,7 +153,6 @@ export class PresBox extends ViewBoxBaseComponent 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); @@ -1252,22 +1251,13 @@ export class PresBox extends ViewBoxBaseComponent 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 +1271,6 @@ export class PresBox extends ViewBoxBaseComponent } 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 +1455,7 @@ export class PresBox extends ViewBoxBaseComponent 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; @@ -1803,7 +1784,7 @@ export class PresBox extends ViewBoxBaseComponent {this.topPanel} {this.toolbar} {this.newDocumentToolbarDropdown} -
+
{mode !== CollectionViewType.Invalid ? Date: Tue, 13 Oct 2020 17:37:14 +0800 Subject: updates before merge --- src/client/views/nodes/PresBox.scss | 1 - src/client/views/nodes/PresBox.tsx | 1 + .../views/presentationview/PresElementBox.scss | 21 ++++++++------------- .../views/presentationview/PresElementBox.tsx | 17 +++++++---------- 4 files changed, 16 insertions(+), 24 deletions(-) (limited to 'src') 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 2af00586b..1af1d5c90 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -119,6 +119,7 @@ export class PresBox extends ViewBoxBaseComponent this.rootDoc._replacedChrome = "replaced"; this.layoutDoc.presStatus = "edit"; 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!); diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index d757fc1de..0e1953e7c 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -25,13 +25,12 @@ $slide-active: #5B9FDD; align-items: center; .presItem-number { + margin-top: 7px; font-size: 12px; font-weight: 700; text-align: center; justify-self: center; - align-self: center; - /* padding-right: 3%; */ - /* width: 8%; */ + align-self: flex-start; position: relative; display: inline-block; overflow: hidden; @@ -44,7 +43,7 @@ $slide-active: #5B9FDD; position: relative; background-color: #d5dce2; border-radius: 5px; - height: calc(100% - 5px); + height: calc(100% - 8px); width: calc(100% - 5px); display: grid; grid-template-columns: max-content max-content max-content max-content auto; @@ -68,17 +67,12 @@ $slide-active: #5B9FDD; } .presItem-slide.active { - border: solid 2px $dark-blue; -} - -.presItem-slide:hover { - background: $slide-hover; + box-shadow: 0 0 0px 1.5px $dark-blue; } -.documentView-node { - position: absolute; - z-index: 1; -} +// .presItem-slide:hover { +// background: $slide-hover; +// } .presElementBox-time { align-self: center; @@ -135,6 +129,7 @@ $slide-active: #5B9FDD; justify-content: center; align-items: center; transition: 0.2s; + margin-right: 3px; } .slideButton:hover { diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 8d53c8cc6..97344d33d 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -178,21 +178,16 @@ export class PresElementBox extends ViewBoxBaseComponent { - console.log('pointerOver'); document.removeEventListener("pointermove", this.onPointerMove); document.addEventListener("pointermove", this.onPointerMove); } 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) { if (y <= halfLine) { slide.style.borderTop = "solid 2px #5B9FDD"; @@ -248,7 +243,7 @@ export class PresElementBox extends ViewBoxBaseComponent { e.stopPropagation(); e.preventDefault(); @@ -278,9 +273,9 @@ export class PresElementBox extends ViewBoxBaseComponent {`${this.indexInPres + 1}.`}
-
-
{ e.stopPropagation(); this.presExpandDocumentClick(); isSelected ? console.log('selected') : console.log('not selected'); }} style={{ maxWidth: (PresBox.Instance.toolbarWidth - 70) }}> - +
+ {isSelected ? StrCast(this.rootDoc.title)} @@ -288,7 +283,9 @@ export class PresElementBox extends ViewBoxBaseComponent + /> : + this.rootDoc.title + }
{"Movement speed"}
}>
300 ? "block" : "none" }}>{this.transition}
{"Duration"}
}>
300 ? "block" : "none" }}>{this.duration}
 -- cgit v1.2.3-70-g09d2 From 9aded8f992b83a53eeb31faa3af1aeea4a5f4617 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Tue, 13 Oct 2020 23:08:20 +0800 Subject: Pres redesign and minor changes --- src/client/views/nodes/PresBox.tsx | 10 +- .../views/presentationview/PresElementBox.scss | 134 +++++++++++---------- .../views/presentationview/PresElementBox.tsx | 12 +- 3 files changed, 82 insertions(+), 74 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 1af1d5c90..f59d6f966 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -1312,7 +1312,7 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
{this.stringType} selected -
+
Contents
Edit
@@ -1501,18 +1501,18 @@ export class PresBox extends ViewBoxBaseComponent const targetDoc: Doc = this.targetDoc; const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); if (!activeItem.presProgressivize) { - targetDoc.editing = false; + // targetDoc.editing = false; activeItem.presProgressivize = true; targetDoc.presProgressivize = true; targetDoc._currentFrame = 0; docs.forEach((doc, i) => CollectionFreeFormDocumentView.setupKeyframes([doc], i, true)); targetDoc.lastFrame = targetDoc.lastFrame ? NumCast(targetDoc.lastFrame) : docs.length - 1; } else { - targetDoc.editProgressivize = false; + // targetDoc.editProgressivize = false; activeItem.presProgressivize = false; targetDoc.presProgressivize = false; targetDoc._currentFrame = 0; - targetDoc.editing = true; + // targetDoc.editing = true; } } @@ -1785,7 +1785,7 @@ export class PresBox extends ViewBoxBaseComponent {this.topPanel} {this.toolbar} {this.newDocumentToolbarDropdown} -
+
{mode !== CollectionViewType.Invalid ? 100; + embedHeight = () => 97; // embedWidth = () => this.props.PanelWidth(); // embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight); embedWidth = () => this.props.PanelWidth() - 30; @@ -81,7 +81,7 @@ export class PresElementBox extends ViewBoxBaseComponent +
-
+
; } @@ -287,9 +287,9 @@ export class PresElementBox extends ViewBoxBaseComponent -
{"Movement speed"}
}>
300 ? "block" : "none" }}>{this.transition}
 -
{"Duration"}
}>
300 ? "block" : "none" }}>{this.duration}
 -
{"Presentation pin view"}
}>
300 ? "block" : "none" }}>V
 +
{"Movement speed"}
}>
300 ? "block" : "none" }}>{this.transition}
 +
{"Duration"}
}>
300 ? "block" : "none" }}>{this.duration}
 +
{"Presentation pin view"}
}>
300 ? "block" : "none" }}>V
{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}
}>
{ e.stopPropagation(); this.presExpandDocumentClick(); }}> e.stopPropagation()} /> -- cgit v1.2.3-70-g09d2 From f38686582cb17c40223174452a08f8ffa576e9b5 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Tue, 13 Oct 2020 23:14:17 +0800 Subject: css mini fix :+1: --- src/client/views/nodes/PresBox.tsx | 4 ++-- src/client/views/presentationview/PresElementBox.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index f59d6f966..9f71611a1 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -1501,7 +1501,7 @@ export class PresBox extends ViewBoxBaseComponent const targetDoc: Doc = this.targetDoc; const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); if (!activeItem.presProgressivize) { - // targetDoc.editing = false; + targetDoc.editing = false; activeItem.presProgressivize = true; targetDoc.presProgressivize = true; targetDoc._currentFrame = 0; @@ -1512,7 +1512,7 @@ export class PresBox extends ViewBoxBaseComponent activeItem.presProgressivize = false; targetDoc.presProgressivize = false; targetDoc._currentFrame = 0; - // targetDoc.editing = true; + targetDoc.editing = true; } } diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 6bd80afb8..f1bdb7737 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -118,7 +118,7 @@ $slide-active: #5B9FDD; width: 15px; height: 15px; display: flex; - font-size: 75%; + font-size: 10px; justify-self: center; align-self: center; background-color: rgba(0, 0, 0, 0.5); -- cgit v1.2.3-70-g09d2 From 80ccba05db32ca09ac513f3ec370f3deef873ce7 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Wed, 14 Oct 2020 02:45:39 +0800 Subject: update view (as button), doc.dragging q? --- .../views/collections/CollectionStackingView.tsx | 4 +-- src/client/views/nodes/PresBox.tsx | 33 ++++++++++++++--- .../views/presentationview/PresElementBox.tsx | 42 ++++++++++++++++------ 3 files changed, 61 insertions(+), 18 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index d41e0528d..3607b97d0 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -295,7 +295,7 @@ export class CollectionStackingView extends CollectionSubView { if (i === 0) { - doc.dragging = false; + if (doc.presentationTargetDoc) doc.dragging = false; //glr: so it only applies to items in presentation DragManager.docsBeingDragged = []; if (targInd === -1) targInd = docs.length; else targInd = docs.indexOf(this.filteredChildren[targInd]); @@ -303,7 +303,7 @@ export class CollectionStackingView extends CollectionSubView srcInd ? targInd - 1 : targInd) + plusOne, 0, doc); } else if (i < (newDocs.length / 2)) { //glr: for some reason dragged documents are duplicated - doc.dragging = false; + if (doc.presentationTargetDoc) doc.dragging = false; DragManager.docsBeingDragged = []; if (targInd === -1) targInd = docs.length; else targInd = docs.indexOf(newDocs[0]) + 1; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 1a16e6237..8e2884968 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -1250,10 +1250,10 @@ export class PresBox extends ViewBoxBaseComponent 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); } - // if (tagDoc.editScrollProgressivize) 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)); @@ -1314,7 +1314,7 @@ export class PresBox extends ViewBoxBaseComponent
Contents
Edit
-
+ {/*
Active text color
{ this.openActiveColorPicker = !this.openActiveColorPicker; })}>
@@ -1325,7 +1325,7 @@ export class PresBox extends ViewBoxBaseComponent
this.openViewedColorPicker = !this.openViewedColorPicker)}>
- {this.viewedColorPicker} + {this.viewedColorPicker} */} {/*
Zoom
Edit
@@ -1352,6 +1352,14 @@ export class PresBox extends ViewBoxBaseComponent
{"Last frame"}
}>
{NumCast(targetDoc.lastFrame)}
+
+
+ +
+
+ {this.frameList} +
+
console.log(" TODO: play frames")}>Play
@@ -1454,7 +1462,7 @@ export class PresBox extends ViewBoxBaseComponent 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; @@ -1715,6 +1723,21 @@ export class PresBox extends ViewBoxBaseComponent ); } + @computed get frameList() { + const activeItem: Doc = this.activeItem; + const targetDoc: Doc = this.targetDoc; + const frameList: number[] = []; + frameList.length = NumCast(targetDoc.lastFrame); + const frameItems = frameList.map((value) => { +
+ +
+ }) + return
+ {frameItems} +
; + } + @computed get playButtonFrames() { const targetDoc: Doc = this.targetDoc; return ( diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index b1eac5832..367bc6533 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -71,10 +71,10 @@ export class PresElementBox extends ViewBoxBaseComponent 97; + embedHeight = (): number => 97; // embedWidth = () => this.props.PanelWidth(); // embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight); - embedWidth = () => this.props.PanelWidth() - 30; + embedWidth = (): number => this.props.PanelWidth() - 30; /** * The function that is responsible for rendering a preview or not for this * presentation element. @@ -155,7 +155,14 @@ export class PresElementBox extends ViewBoxBaseComponent) => { + e.stopPropagation(); + e.preventDefault(); + } + + stopDrag = (e: PointerEvent) => { + console.log('stop drag') const activeItem = this.rootDoc; + activeItem.dragging = false; e.stopPropagation(); e.preventDefault(); } @@ -184,7 +191,7 @@ export class PresElementBox extends ViewBoxBaseComponent { const slide = this._itemRef.current!; - const rect = slide!.getBoundingClientRect(); + const rect = slide?.getBoundingClientRect(); let y = e.clientY - rect.top; //y position within the element. let height = slide.clientHeight; let halfLine = height / 2; @@ -201,9 +208,8 @@ export class PresElementBox extends ViewBoxBaseComponent { - console.log('pointerLeave'); - this._itemRef.current!.style.borderTop = "0px" - this._itemRef.current!.style.borderBottom = "0px" + this._itemRef.current!.style.borderTop = "0px"; + this._itemRef.current!.style.borderBottom = "0px"; document.removeEventListener("pointermove", this.onPointerMove); } @@ -240,6 +246,10 @@ export class PresElementBox extends ViewBoxBaseComponent= 300; + const targetDoc: Doc = Cast(this.rootDoc.presentationTargetDoc, Doc, null); + const activeItem: Doc = this.rootDoc; return (
{ - console.log('double click to open'); this.toggleProperties(); this.props.focus(this.rootDoc); this.clearArrays(); @@ -274,7 +283,7 @@ export class PresElementBox extends ViewBoxBaseComponent
-
+
{isSelected ? -
{"Movement speed"}
}>
300 ? "block" : "none" }}>{this.transition}
 -
{"Duration"}
}>
300 ? "block" : "none" }}>{this.duration}
 -
{"Presentation pin view"}
}>
300 ? "block" : "none" }}>V
 +
{"Movement speed"}
}>
{this.transition}
 +
{"Duration"}
}>
{this.duration}
+
{"Update view"}
}> +
{ + const x = targetDoc._panX; + const y = targetDoc._panY; + const scale = targetDoc._viewScale; + activeItem.presPinViewX = x; + activeItem.presPinViewY = y; + activeItem.presPinViewScale = scale; + }} + style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>V
+
{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}
}>
{ e.stopPropagation(); this.presExpandDocumentClick(); }}> e.stopPropagation()} />
-- cgit v1.2.3-70-g09d2 From 6762d82992732eb14d7d2313d92cf0ae3a30f5a9 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Wed, 14 Oct 2020 02:52:32 +0800 Subject: remove console.log --- src/client/views/presentationview/PresElementBox.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 367bc6533..9052967e5 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -160,7 +160,6 @@ export class PresElementBox extends ViewBoxBaseComponent { - console.log('stop drag') const activeItem = this.rootDoc; activeItem.dragging = false; e.stopPropagation(); -- cgit v1.2.3-70-g09d2