From 65940c176cca651bf4bfface9be5d86d49c881c6 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Tue, 20 Oct 2020 18:21:05 +0800 Subject: presBox updates for pull drag changes + renaming marquee options + fixes --- .../views/presentationview/PresElementBox.scss | 77 +++++++++++++++++++--- 1 file changed, 68 insertions(+), 9 deletions(-) (limited to 'src/client/views/presentationview/PresElementBox.scss') diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index f1bdb7737..60fe33f3f 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -36,7 +36,6 @@ $slide-active: #5B9FDD; overflow: hidden; } - } .presItem-slide { @@ -46,17 +45,18 @@ $slide-active: #5B9FDD; height: calc(100% - 7px); width: calc(100% - 5px); display: grid; - grid-template-rows: 23px auto; + grid-template-rows: 16px 10px auto; grid-template-columns: max-content max-content max-content max-content auto; .presItem-name { + min-width: 20px; z-index: 300; + top: 1px; align-self: center; - font-size: 13px; + font-size: 12px; font-family: Roboto; font-weight: 500; position: relative; - top: 1px; padding-left: 10px; padding-right: 10px; letter-spacing: normal; @@ -64,13 +64,35 @@ $slide-active: #5B9FDD; text-overflow: ellipsis; overflow: hidden; white-space: pre; + transition: 500ms; + } + + .presItem-docName { + min-width: 20px; + z-index: 300; + align-self: center; + font-style: italic; + font-size: 9px; + font-family: Roboto; + font-weight: 300; + position: relative; + padding-left: 10px; + padding-right: 10px; + letter-spacing: normal; + width: max-content; + text-overflow: ellipsis; + overflow: hidden; + white-space: pre; + transition: 500ms; + grid-row: 2; + grid-column: 1/6; } .presItem-time { align-self: center; position: relative; - top: 2px; padding-right: 10px; + top: 1px; font-size: 10; font-weight: 300; font-family: Roboto; @@ -80,6 +102,7 @@ $slide-active: #5B9FDD; .presItem-embedded { overflow: hidden; + grid-row: 3; grid-column: 1/8; position: relative; display: flex; @@ -106,6 +129,7 @@ $slide-active: #5B9FDD; .presItem-slideButtons { display: flex; grid-column: 7; + grid-row: 1/3; width: 60px; justify-self: right; justify-content: flex-end; @@ -115,10 +139,10 @@ $slide-active: #5B9FDD; position: relative; border-radius: 100%; z-index: 300; - width: 15px; - height: 15px; + width: 18px; + height: 18px; display: flex; - font-size: 10px; + font-size: 12px; justify-self: center; align-self: center; background-color: rgba(0, 0, 0, 0.5); @@ -131,15 +155,50 @@ $slide-active: #5B9FDD; .slideButton:hover { background-color: rgba(0, 0, 0, 1); - transform: scale(1.15); + transform: scale(1.2); } } } + + .presItem-slide.active { box-shadow: 0 0 0px 1.5px $dark-blue; } +.presItem-multiDrag { + font-family: Roboto; + font-weight: 600; + color: white; + text-align: center; + justify-content: center; + align-content: center; + width: 100px; + height: 40px; + position: absolute; + background-color: $dark-blue; + z-index: 4000; + border-radius: 10px; + box-shadow: black 0.4vw 0.4vw 0.8vw; + +} + +.presItem-miniSlide { + font-weight: 700; + grid-column: 1/8; + align-self: center; + justify-self: center; + background-color: #d5dce2; + width: 28px; + text-align: center; + height: 28px; + border-radius: 5px; +} + +.presItem-miniSlide.active { + box-shadow: 0 0 0px 1.5px $dark-blue; +} + // .presItem-slide:hover { // background: $slide-hover; // } -- cgit v1.2.3-70-g09d2 From 50fa76eb644bc9fe2de7525f0f144c4393341af7 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Wed, 21 Oct 2020 02:19:02 +0800 Subject: updates before push --- src/client/views/collections/TabDocView.tsx | 2 +- .../collections/collectionFreeForm/MarqueeView.tsx | 1 + src/client/views/nodes/PresBox.tsx | 85 +++++++++++++--------- .../views/presentationview/PresElementBox.scss | 4 +- .../views/presentationview/PresElementBox.tsx | 17 ++++- 5 files changed, 66 insertions(+), 43 deletions(-) (limited to 'src/client/views/presentationview/PresElementBox.scss') diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index cd84d2d78..9e25bb607 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -144,7 +144,7 @@ export class TabDocView extends React.Component { if (!curPresDocView) { CollectionDockingView.AddSplit(curPres, "right"); } - DocumentManager.Instance.jumpToDocument(doc, false, undefined, Cast(doc.context, Doc, null)); + DocumentManager.Instance.jumpToDocument(doc, false, undefined); } } diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 7c64fd429..f95c21972 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -397,6 +397,7 @@ export class MarqueeView extends React.Component this.layoutDoc.presStatus = PresStatus.Edit; this.layoutDoc._gridGap = 0; this.layoutDoc._yMargin = 0; + document.addEventListener("keydown", this.keyEvents, true); this.turnOffEdit(true); DocListCastAsync((Doc.UserDoc().myPresentations as Doc).data).then(pres => !pres?.includes(this.rootDoc) && Doc.AddDocToList(Doc.UserDoc().myPresentations as Doc, "data", this.rootDoc)); @@ -561,22 +562,24 @@ export class PresBox extends ViewBoxBaseComponent * When the movement dropdown is changes */ @undoBatch - updateMovement = action((movement: any, activeItem: Doc, targetDoc: Doc) => { - switch (movement) { - case PresMovement.Zoom: //Pan and zoom - activeItem.presMovement = PresMovement.Zoom; - break; - case PresMovement.Pan: //Pan - activeItem.presMovement = PresMovement.Pan; - break; - case PresMovement.Jump: //Jump Cut - activeItem.presJump = true; - activeItem.presMovement = PresMovement.Jump; - break; - case PresMovement.None: default: - activeItem.presMovement = PresMovement.None; - break; - } + updateMovement = action((movement: any) => { + if (this._selectedArray) this._selectedArray.forEach((doc) => { + switch (movement) { + case PresMovement.Zoom: //Pan and zoom + doc.presMovement = PresMovement.Zoom; + break; + case PresMovement.Pan: //Pan + doc.presMovement = PresMovement.Pan; + break; + case PresMovement.Jump: //Jump Cut + doc.presJump = true; + doc.presMovement = PresMovement.Jump; + break; + case PresMovement.None: default: + doc.presMovement = PresMovement.None; + break; + } + }) }); setMovementName = action((movement: any, activeItem: Doc): string => { @@ -685,7 +688,7 @@ export class PresBox extends ViewBoxBaseComponent // Key for when the presentaiton is active @undoBatch - keyEvents = action(async (e: KeyboardEvent) => { + keyEvents = action((e: KeyboardEvent) => { if (e.target instanceof HTMLInputElement) return; let handled = false; const anchorNode = document.activeElement as HTMLDivElement; @@ -713,16 +716,22 @@ export class PresBox extends ViewBoxBaseComponent if (this.layoutDoc.presStatus === "manual") this.startAutoPres(this.itemIndex); else if (this.layoutDoc.presStatus === "auto") if (this._presTimer) clearTimeout(this._presTimer); handled = true; - } if (e.keyCode === 8) { // delete selected items + } if (e.keyCode === 8) { // delete (backspace) selected items if (this.layoutDoc.presStatus === "edit") { - await Promise.all(this._selectedArray.map((doc, i): boolean => { - const removed: boolean = this.removeDocument(doc); - console.log("Is removed? : " + i + " | " + removed); - return removed; - })); - action(() => this._selectedArray = []); - action(() => this._eleArray = []); - action(() => this._dragArray = []); + + let result: any = []; + runInAction(() => { + for (let doc of this._selectedArray) { + setTimeout(() => { + const removed: boolean = this.removeDocument(doc); + result.push(removed) + console.log("Is removed? : " + " | " + removed); + }, 100); + } + this._selectedArray = [] + this._eleArray = [] + this._dragArray = [] + }); handled = true; } } if (handled) { @@ -737,8 +746,8 @@ export class PresBox extends ViewBoxBaseComponent } if ((e.keyCode === 39 || e.keyCode === 40) && e.shiftKey) { // left(37) / a(65) / up(38) to go back if (this.layoutDoc.presStatus === "edit" && this._selectedArray.length > 0) { const index = this.childDocs.indexOf(this._selectedArray[this._selectedArray.length]); - if ((index - 1) > 0) { - this._selectedArray.push(this.childDocs[index - 1]); + if ((index + 1) < this._selectedArray.length) { + this._selectedArray.push(this.childDocs[index + 1]); } } handled = true; @@ -852,7 +861,9 @@ export class PresBox extends ViewBoxBaseComponent if (change) timeInMS += change; if (timeInMS < 100) timeInMS = 100; if (timeInMS > 10000) timeInMS = 10000; - if (this.activeItem) this.activeItem.presTransition = timeInMS; + if (this._selectedArray) this._selectedArray.forEach((doc) => { + doc.presTransition = timeInMS; + }) } // Converts seconds to ms and updates presDuration @@ -862,7 +873,9 @@ export class PresBox extends ViewBoxBaseComponent if (change) timeInMS += change; if (timeInMS < 100) timeInMS = 100; if (timeInMS > 20000) timeInMS = 20000; - if (this.activeItem) this.activeItem.presDuration = timeInMS; + if (this._selectedArray) this._selectedArray.forEach((doc) => { + doc.presDuration = timeInMS; + }) } @@ -883,10 +896,10 @@ export class PresBox extends ViewBoxBaseComponent {this.setMovementName(activeItem.presMovement, activeItem)}
e.stopPropagation()} style={{ display: this.openMovementDropdown ? "grid" : "none" }}> -
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.None, activeItem, targetDoc)}>None
-
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Zoom, activeItem, targetDoc)}>Pan and Zoom
-
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Pan, activeItem, targetDoc)}>Pan
-
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Jump, activeItem, targetDoc)}>Jump cut
+
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.None)}>None
+
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Zoom)}>Pan and Zoom
+
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Pan)}>Pan
+
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Jump)}>Jump cut
@@ -972,9 +985,9 @@ export class PresBox extends ViewBoxBaseComponent
-
this.applyTo(this._selectedArray)}> + {/*
this.applyTo(this._selectedArray)}> Apply to selected -
+
*/}
this.applyTo(this.childDocs)}> Apply to all
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 60fe33f3f..6152c56e9 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -174,13 +174,13 @@ $slide-active: #5B9FDD; justify-content: center; align-content: center; width: 100px; - height: 40px; + height: 30px; position: absolute; background-color: $dark-blue; z-index: 4000; border-radius: 10px; box-shadow: black 0.4vw 0.4vw 0.8vw; - + line-height: 30px; } .presItem-miniSlide { diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 61d6e9027..f136d7f8e 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -22,6 +22,7 @@ import { undoBatch } from "../../util/UndoManager"; import { EditableView } from "../EditableView"; import { DocUtils } from "../../documents/Documents"; import { DateField } from "../../../fields/DateField"; +import { DocumentManager } from "../../util/DocumentManager"; export const presSchema = createSchema({ presentationTargetDoc: Doc, @@ -162,7 +163,7 @@ export class PresElementBox extends ViewBoxBaseComponent { - const miniView: boolean = PresBox.Instance.toolbarWidth <= 100; + const miniView: boolean = this.toolbarWidth <= 100; const activeItem = this.rootDoc; const dragArray = PresBox.Instance._dragArray; const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray().map(doc => doc)); @@ -278,11 +279,19 @@ export class PresElementBox extends ViewBoxBaseComponent= 300; - const miniView: boolean = PresBox.Instance.toolbarWidth <= 100; + const toolbarWidth: number = this.toolbarWidth; + const showMore: boolean = this.toolbarWidth >= 300; + const miniView: boolean = this.toolbarWidth <= 100; const targetDoc: Doc = this.targetDoc; const activeItem: Doc = this.rootDoc; return ( -- cgit v1.2.3-70-g09d2 From e73cf54b9dfea74ff34d9d6227f209efdb1f23e4 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Wed, 21 Oct 2020 03:40:32 +0800 Subject: not possible to change pres document perspective + removing unessecary doc actions + progressivize --- src/client/views/PropertiesView.tsx | 6 ++-- src/client/views/collections/CollectionMenu.tsx | 9 ++--- .../collections/collectionFreeForm/MarqueeView.tsx | 2 +- src/client/views/nodes/PresBox.tsx | 40 +++++++++++++++------- .../views/presentationview/PresElementBox.scss | 6 ++-- 5 files changed, 39 insertions(+), 24 deletions(-) (limited to 'src/client/views/presentationview/PresElementBox.scss') diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 39a4d293b..e93173c9e 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -1010,7 +1010,7 @@ export class PropertiesView extends React.Component { {PresBox.Instance.transitionDropdown}
: null} } - {!selectedItem || type === DocumentType.VID || type === DocumentType.AUDIO ? (null) :
+ {/* {!selectedItem || type === DocumentType.VID || type === DocumentType.AUDIO ? (null) :
this.openPresProgressivize = !this.openPresProgressivize)} style={{ backgroundColor: this.openPresProgressivize ? "black" : "" }}> @@ -1022,8 +1022,8 @@ export class PropertiesView extends React.Component { {this.openPresProgressivize ?
{PresBox.Instance.progressivizeDropdown}
: null} -
} - {!selectedItem || (type !== DocumentType.COL && type !== DocumentType.VID && type !== DocumentType.AUDIO) ? (null) :
+
} */} + {!selectedItem || (type !== DocumentType.COL && type !== DocumentType.AUDIO) ? (null) :
{ this.openSlideOptions = !this.openSlideOptions; })} style={{ backgroundColor: this.openSlideOptions ? "black" : "" }}> diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 3f55cf103..34fb2bdee 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -344,7 +344,8 @@ export class CollectionViewBaseChrome extends React.Component + const isPres: boolean = (this.document && this.document.type === DocumentType.PRES); + return isPres ? (null) : (
drop document to apply or drag to create button
} placement="bottom">
-
; +
); } @computed get selectedDocumentView() { @@ -425,7 +426,7 @@ export class CollectionViewBaseChrome extends React.Component; const targetDoc = this.selectedDoc; {/* return (!targetDoc || (targetDoc._viewType !== CollectionViewType.Freeform && targetDoc.type !== DocumentType.IMG)) ? (null) :
{"Pin to presentation trail with current view"}
} placement="top"> */ } - return (targetDoc && (targetDoc._viewType === CollectionViewType.Freeform || targetDoc._viewType === CollectionViewType.Stacking || targetDoc.type === DocumentType.IMG || targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.WEB || targetDoc.type === DocumentType.RTF || targetDoc.type === DocumentType.COMPARISON)) ?
{"Pin to presentation trail with current view"}
} placement="top"> + return (targetDoc && targetDoc.type !== DocumentType.PRES && (targetDoc._viewType === CollectionViewType.Freeform || targetDoc._viewType === CollectionViewType.Stacking || targetDoc.type === DocumentType.IMG || targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.WEB || targetDoc.type === DocumentType.RTF || targetDoc.type === DocumentType.COMPARISON)) ?
{"Pin to presentation trail with current view"}
} placement="top">
} placement="top"> + return !targetDoc || targetDoc.type === DocumentType.PRES ? (null) : {"Tap or Drag to create an alias"}
} placement="top"> diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index f95c21972..42a601aa2 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -397,7 +397,7 @@ export class MarqueeView extends React.Component this._pathBoolean = false; srcContext.presPathView = false; } else { - undoBatch(() => { - runInAction(() => this._pathBoolean = !this._pathBoolean); - srcContext.presPathView = this._pathBoolean; - }) + runInAction(() => this._pathBoolean = !this._pathBoolean); + srcContext.presPathView = this._pathBoolean; } } @@ -562,8 +560,26 @@ export class PresBox extends ViewBoxBaseComponent * When the movement dropdown is changes */ @undoBatch - updateMovement = action((movement: any) => { - if (this._selectedArray) this._selectedArray.forEach((doc) => { + updateMovement = action((movement: any, all?: boolean) => { + if (all) { + this.childDocs.forEach((doc) => { + switch (movement) { + case PresMovement.Zoom: //Pan and zoom + doc.presMovement = PresMovement.Zoom; + break; + case PresMovement.Pan: //Pan + doc.presMovement = PresMovement.Pan; + break; + case PresMovement.Jump: //Jump Cut + doc.presJump = true; + doc.presMovement = PresMovement.Jump; + break; + case PresMovement.None: default: + doc.presMovement = PresMovement.None; + break; + } + }) + } else if (this._selectedArray) this._selectedArray.forEach((doc) => { switch (movement) { case PresMovement.Zoom: //Pan and zoom doc.presMovement = PresMovement.Zoom; @@ -1008,6 +1024,7 @@ export class PresBox extends ViewBoxBaseComponent applyTo = (array: Doc[]) => { const activeItem: Doc = this.activeItem; const targetDoc: Doc = this.targetDoc; + this.updateMovement(activeItem.presMovement, true); array.forEach((doc) => { const curDoc = Cast(doc, Doc, null); const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null); @@ -1016,9 +1033,6 @@ export class PresBox extends ViewBoxBaseComponent curDoc.presDuration = activeItem.presDuration; tagDoc.presEffect = targetDoc.presEffect; tagDoc.presEffectDirection = targetDoc.presEffectDirection; - tagDoc.presMovement = targetDoc.presMovement; - curDoc.presMovement = activeItem.presMovement; - this.updateMovement(activeItem.presMovement, curDoc, tagDoc); curDoc.presHideTillShownButton = activeItem.presHideTillShownButton; curDoc.presHideAfterButton = activeItem.presHideAfterButton; } @@ -1033,12 +1047,12 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
-
+
activeItem.playAuto = !activeItem.playAuto}>Play automatically
activeItem.playAuto = !activeItem.playAuto}>Play on next
- {targetDoc.type === DocumentType.VID ?
activeItem.presVidFullScreen = !activeItem.presVidFullScreen}>Full screen
: (null)} - {targetDoc.type === DocumentType.VID || targetDoc.type === DocumentType.AUDIO ?
+ {/* {targetDoc.type === DocumentType.VID ?
activeItem.presVidFullScreen = !activeItem.presVidFullScreen}>Full screen
: (null)} */} + {targetDoc.type === DocumentType.AUDIO ?
Start time
onChange={action((e: React.ChangeEvent) => { activeItem.presStartTime = Number(e.target.value); })} />
: (null)} - {targetDoc.type === DocumentType.VID || targetDoc.type === DocumentType.AUDIO ?
+ {targetDoc.type === DocumentType.AUDIO ?
End time
Date: Wed, 21 Oct 2020 05:26:53 +0800 Subject: Undo batch fixes + minor UI changes --- src/client/views/nodes/PresBox.tsx | 148 ++++++++++++++++----- .../views/presentationview/PresElementBox.scss | 1 - .../views/presentationview/PresElementBox.tsx | 4 +- 3 files changed, 116 insertions(+), 37 deletions(-) (limited to 'src/client/views/presentationview/PresElementBox.scss') diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 7bf3ec0d7..53b2433e8 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -38,12 +38,12 @@ export enum PresMovement { } export enum PresEffect { - Fade = "fade", - Flip = "flip", - Rotate = "rotate", - Bounce = "bounce", - Roll = "roll", - None = "none", + Fade = "Fade", + Flip = "Flip", + Rotate = "Rotate", + Bounce = "Bounce", + Roll = "Roll", + None = "None", } enum PresStatus { @@ -298,7 +298,14 @@ export class PresBox extends ViewBoxBaseComponent }; // If openDocument is selected then it should open the document for the user if (activeItem.openDocument) { + const presStatus = this.rootDoc.presStatus; openInTab(); + // this still needs some fixing + setTimeout(() => { + const presDocView = DocumentManager.Instance.getDocumentView(this.rootDoc); + if (presDocView) SelectionManager.SelectDoc(presDocView, false); + this.rootDoc.presStatus = presStatus; + }, 2000) } 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 !== PresStatus.Edit) { @@ -481,7 +488,6 @@ export class PresBox extends ViewBoxBaseComponent } } - @undoBatch @action toggleExpandMode = () => { runInAction(() => this._expandBoolean = !this._expandBoolean); this.childDocs.forEach((doc) => { @@ -846,23 +852,23 @@ export class PresBox extends ViewBoxBaseComponent * It also makes sure that the option swithches from hide-after to this one, since both * can't coexist. */ - @action - onFadeDocumentAfterPresentedClick = (e: React.MouseEvent) => { - e.stopPropagation(); - const activeItem: Doc = this.activeItem; - const targetDoc: Doc = this.targetDoc; - activeItem.presFadeButton = !activeItem.presFadeButton; - if (!activeItem.presFadeButton) { - if (targetDoc) { - targetDoc.opacity = 1; - } - } else { - activeItem.presHideAfterButton = false; - if (this.rootDoc.presStatus !== "edit" && targetDoc) { - targetDoc.opacity = 0.5; - } - } - } + // @action + // onFadeDocumentAfterPresentedClick = (e: React.MouseEvent) => { + // e.stopPropagation(); + // const activeItem: Doc = this.activeItem; + // const targetDoc: Doc = this.targetDoc; + // activeItem.presFadeButton = !activeItem.presFadeButton; + // if (!activeItem.presFadeButton) { + // if (targetDoc) { + // targetDoc.opacity = 1; + // } + // } else { + // activeItem.presHideAfterButton = false; + // if (this.rootDoc.presStatus !== "edit" && targetDoc) { + // targetDoc.opacity = 0.5; + // } + // } + // } // Converts seconds to ms and updates presTransition @undoBatch @@ -888,6 +894,80 @@ export class PresBox extends ViewBoxBaseComponent }) } + @undoBatch + updateHideBefore = (activeItem: Doc) => { + activeItem.presHideTillShownButton = !activeItem.presHideTillShownButton; + this._selectedArray.forEach((doc) => { + doc.presHideTillShownButton = activeItem.presHideTillShownButton; + }); + } + + @undoBatch + updateHideAfter = (activeItem: Doc) => { + activeItem.presHideAfterButton = !activeItem.presHideAfterButton; + this._selectedArray.forEach((doc) => { + doc.presHideAfterButton = activeItem.presHideAfterButton; + }); + } + + @undoBatch + updateOpenDoc = (activeItem: Doc) => { + activeItem.openDocument = !activeItem.openDocument; + this._selectedArray.forEach((doc) => { + doc.openDocument = activeItem.openDocument; + }); + } + + @undoBatch + updateEffect = (effect: any, all?: boolean) => { + if (all) { + this.childDocs.forEach((doc) => { + const tagDoc = Cast(doc.presentationTargetDoc, Doc, null); + switch (effect) { + case PresEffect.Bounce: + tagDoc.presEffect = PresEffect.Bounce; + break; + case PresEffect.Fade: + tagDoc.presEffect = PresEffect.Fade; + break; + case PresEffect.Flip: + tagDoc.presEffect = PresEffect.Flip; + break; + case PresEffect.Roll: + tagDoc.presEffect = PresEffect.Roll; + break; + case PresEffect.Rotate: + tagDoc.presEffect = PresEffect.Rotate; + break; + case PresEffect.None: default: + tagDoc.presEffect = PresEffect.None; + break; + } + }) + } else if (this._selectedArray) this._selectedArray.forEach((doc) => { + const tagDoc = Cast(doc.presentationTargetDoc, Doc, null); + switch (effect) { + case PresEffect.Bounce: + tagDoc.presEffect = PresEffect.Bounce; + break; + case PresEffect.Fade: + tagDoc.presEffect = PresEffect.Fade; + break; + case PresEffect.Flip: + tagDoc.presEffect = PresEffect.Flip; + break; + case PresEffect.Roll: + tagDoc.presEffect = PresEffect.Roll; + break; + case PresEffect.Rotate: + tagDoc.presEffect = PresEffect.Rotate; + break; + case PresEffect.None: default: + tagDoc.presEffect = PresEffect.None; + break; + } + }) + } @computed get transitionDropdown() { const activeItem: Doc = this.activeItem; @@ -938,9 +1018,9 @@ export class PresBox extends ViewBoxBaseComponent
Visibility {"&"} Duration
-
{"Hide before presented"}
}>
activeItem.presHideTillShownButton = !activeItem.presHideTillShownButton)}>Hide before
 -
{"Hide after presented"}
}>
activeItem.presHideAfterButton = !activeItem.presHideAfterButton)}>Hide after
 -
{"Open document in a new tab"}
}>
activeItem.openDocument = !activeItem.openDocument)}>Open
 +
{"Hide before presented"}
}>
this.updateHideBefore(activeItem)}>Hide before
 +
{"Hide after presented"}
}>
this.updateHideAfter(activeItem)}>Hide after
 +
{"Open document in a new tab"}
}>
this.updateOpenDoc(activeItem)}>Open
Slide Duration
@@ -972,12 +1052,12 @@ export class PresBox extends ViewBoxBaseComponent {effect}
e.stopPropagation()}> -
e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'None')}>None
-
e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'Fade')}>Fade In
-
e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'Flip')}>Flip
-
e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'Rotate')}>Rotate
-
e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'Bounce')}>Bounce
-
e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'Roll')}>Roll
+
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.None)}>None
+
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Fade)}>Fade In
+
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Flip)}>Flip
+
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Rotate)}>Rotate
+
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Bounce)}>Bounce
+
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Roll)}>Roll
@@ -1025,13 +1105,13 @@ export class PresBox extends ViewBoxBaseComponent const activeItem: Doc = this.activeItem; const targetDoc: Doc = this.targetDoc; this.updateMovement(activeItem.presMovement, true); + this.updateEffect(targetDoc.presEffect, true); array.forEach((doc) => { const curDoc = Cast(doc, Doc, null); const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null); if (tagDoc && targetDoc) { curDoc.presTransition = activeItem.presTransition; curDoc.presDuration = activeItem.presDuration; - tagDoc.presEffect = targetDoc.presEffect; tagDoc.presEffectDirection = targetDoc.presEffectDirection; curDoc.presHideTillShownButton = activeItem.presHideTillShownButton; curDoc.presHideAfterButton = activeItem.presHideAfterButton; diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 86ab9efad..105f283f0 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -71,7 +71,6 @@ $slide-active: #5B9FDD; min-width: 20px; z-index: 300; align-self: center; - font-style: italic; font-size: 9px; font-family: Roboto; font-weight: 300; diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index f136d7f8e..2ac37bc28 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -332,7 +332,7 @@ export class PresElementBox extends ViewBoxBaseComponent} {miniView ? (null) :
-
+
{isSelected ? e.stopPropagation()} />
-
{activeItem.presPinView ? "View of " + targetDoc.title : targetDoc.title}
+
{activeItem.presPinView ? (<>View of {targetDoc.title}) : targetDoc.title}
{this.renderEmbeddedInline}
}
); -- cgit v1.2.3-70-g09d2 From 0519f80d3da933a6e86fd1dc0e214e8d391ea922 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Wed, 21 Oct 2020 06:27:28 +0800 Subject: UI for miniSlide --- src/client/views/presentationview/PresElementBox.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'src/client/views/presentationview/PresElementBox.scss') diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 105f283f0..00ba5f9bb 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -98,7 +98,7 @@ $slide-active: #5B9FDD; z-index: 300; letter-spacing: normal; } - + .presItem-embedded { overflow: hidden; grid-row: 3; @@ -112,7 +112,7 @@ $slide-active: #5B9FDD; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } - + .presItem-embeddedMask { width: 100%; height: 100%; @@ -184,14 +184,16 @@ $slide-active: #5B9FDD; .presItem-miniSlide { font-weight: 700; + font-size: 12; grid-column: 1/8; align-self: center; justify-self: center; background-color: #d5dce2; - width: 28px; + width: 26px; text-align: center; - height: 28px; - border-radius: 5px; + height: 26px; + line-height: 28px; + border-radius: 100%; } .presItem-miniSlide.active { @@ -200,6 +202,4 @@ $slide-active: #5B9FDD; // .presItem-slide:hover { // background: $slide-hover; -// } - - +// } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From a714d27782c454874a2ea6206f29ed0c5058ead2 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Sat, 24 Oct 2020 13:40:51 +0800 Subject: add slide title and fix shift-arrow selection --- src/client/views/collections/TabDocView.tsx | 2 +- .../collections/collectionFreeForm/MarqueeView.tsx | 2 +- src/client/views/nodes/PresBox.tsx | 29 ++++++++++++++-------- .../views/presentationview/PresElementBox.scss | 2 -- 4 files changed, 21 insertions(+), 14 deletions(-) (limited to 'src/client/views/presentationview/PresElementBox.scss') diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 5bdf19a31..1ab8065b4 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -130,7 +130,7 @@ export class TabDocView extends React.Component { const batch = UndoManager.StartBatch("pinning doc"); const pinDoc = Doc.MakeAlias(doc); pinDoc.presentationTargetDoc = doc; - pinDoc.title = doc.title; + pinDoc.title = doc.title + " - slide"; pinDoc.presMovement = PresMovement.Zoom; pinDoc.context = curPres; Doc.AddDocToList(curPres, "data", pinDoc); diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 42a601aa2..292ddb19a 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -397,7 +397,7 @@ export class MarqueeView extends React.Component const activeNext = Cast(this.childDocs[this.itemIndex + 1], Doc, null); const activeItem: Doc = this.activeItem; const targetDoc: Doc = this.targetDoc; - const childDocs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); - const currentFrame = Cast(targetDoc._currentFrame, "number", null); - const lastFrame = Cast(targetDoc.lastFrame, "number", null); - const curFrame = NumCast(targetDoc._currentFrame); + const currentFrame = Cast(targetDoc?._currentFrame, "number", null); + const lastFrame = Cast(targetDoc?.lastFrame, "number", null); + const curFrame = NumCast(targetDoc?._currentFrame); let internalFrames: boolean = false; if (activeItem.presProgressivize || activeItem.zoomProgressivize || targetDoc.scrollProgressivize) internalFrames = true; // Case 1: There are still other frames and should go through all frames before going to next slide if (internalFrames && lastFrame !== undefined && curFrame < lastFrame) { + const childDocs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); targetDoc._viewTransition = "all 1s"; setTimeout(() => targetDoc._viewTransition = undefined, 1010); // targetDoc._currentFrame = curFrame + 1; @@ -317,8 +317,6 @@ export class PresBox extends ViewBoxBaseComponent // this still needs some fixing setTimeout(resetSelection, 500); }; - const tabMap = CollectionDockingView.Instance.tabMap; - console.log(tabMap); // If openDocument is selected then it should open the document for the user if (activeItem.openDocument) { openInTab(); @@ -728,7 +726,9 @@ export class PresBox extends ViewBoxBaseComponent break; case "Down": case "ArrowDown": case "Right": case "ArrowRight": + if (this.itemIndex >= this.childDocs.length - 1) return; if (e.shiftKey) { // TODO: update to work properly + console.log("Down: " + this.rootDoc._itemIndex, this.itemIndex, this.childDocs.length) this.rootDoc._itemIndex = NumCast(this.rootDoc._itemIndex) + 1; this._selectedArray.push(this.childDocs[this.rootDoc._itemIndex]); } else { @@ -739,7 +739,9 @@ export class PresBox extends ViewBoxBaseComponent break; case "Up": case "ArrowUp": case "Left": case "ArrowLeft": + if (this.itemIndex === 0) return; if (e.shiftKey) { // TODO: update to work properly + console.log("Up: " + this.rootDoc._itemIndex, this.itemIndex, this.childDocs.length) this.rootDoc._itemIndex = NumCast(this.rootDoc._itemIndex) - 1; this._selectedArray.push(this.childDocs[this.rootDoc._itemIndex]); } else { @@ -795,21 +797,28 @@ export class PresBox extends ViewBoxBaseComponent if (docs.includes(tagDoc)) { docs.push(tagDoc); order.push( -
+
{index + 1}
); } else { docs.push(tagDoc); order.push( -
+
{index + 1}
); } - // Case B: Document is not inside of the collection + // Case B: Document is presPinView and is presCollection + } else if (doc.pinWithView && this.rootDoc.presCollection === tagDoc) { + docs.push(tagDoc); + order.push( +
+
{index + 1}
+
); + // Case C: Document is not contained within presCollection } else { docs.push(tagDoc); order.push( -
+
{index + 1}
); } diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 00ba5f9bb..919142975 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -64,7 +64,6 @@ $slide-active: #5B9FDD; text-overflow: ellipsis; overflow: hidden; white-space: pre; - transition: 500ms; } .presItem-docName { @@ -82,7 +81,6 @@ $slide-active: #5B9FDD; text-overflow: ellipsis; overflow: hidden; white-space: pre; - transition: 500ms; grid-row: 2; grid-column: 1/6; } -- cgit v1.2.3-70-g09d2 From 98a39486cc1a6c9cc272aa5a8d69bf4fd3e7b6bc Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Sun, 25 Oct 2020 05:12:48 +0800 Subject: code cleanup and changes - fix open in new tab bug changed from replace --- src/client/views/collections/TabDocView.tsx | 3 +- .../collections/collectionFreeForm/MarqueeView.tsx | 3 +- src/client/views/nodes/PresBox.tsx | 300 +++++++++------------ .../views/presentationview/PresElementBox.scss | 1 - .../views/presentationview/PresElementBox.tsx | 6 +- 5 files changed, 139 insertions(+), 174 deletions(-) (limited to 'src/client/views/presentationview/PresElementBox.scss') diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 1ab8065b4..fd91d4841 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -127,10 +127,11 @@ export class TabDocView extends React.Component { //add this new doc to props.Document const curPres = CurrentUserUtils.ActivePresentation; if (curPres) { + if (doc === curPres) { alert("Cannot pin presentation document to itself"); return; } const batch = UndoManager.StartBatch("pinning doc"); const pinDoc = Doc.MakeAlias(doc); pinDoc.presentationTargetDoc = doc; - pinDoc.title = doc.title + " - slide"; + pinDoc.title = doc.title + " - Slide"; pinDoc.presMovement = PresMovement.Zoom; pinDoc.context = curPres; Doc.AddDocToList(curPres, "data", pinDoc); diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 292ddb19a..c6d1c9da2 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -393,11 +393,12 @@ export class MarqueeView extends React.Component; @@ -84,7 +86,7 @@ export class PresBox extends ViewBoxBaseComponent @observable private presentTools: boolean = false; @computed get childDocs() { return DocListCast(this.dataDoc[this.fieldKey]); } @computed get itemIndex() { return NumCast(this.rootDoc._itemIndex); } - @computed get activeItem() { return Cast(this.childDocs[this.itemIndex], Doc, null); } + @computed get activeItem() { return Cast(this.childDocs[NumCast(this.rootDoc._itemIndex)], Doc, null); } @computed get targetDoc() { return Cast(this.activeItem?.presentationTargetDoc, Doc, null); } @computed get scrollable(): boolean { if (this.targetDoc.type === DocumentType.PDF || this.targetDoc.type === DocumentType.WEB || this.targetDoc.type === DocumentType.RTF || this.targetDoc._viewType === CollectionViewType.Stacking) return true; @@ -100,7 +102,7 @@ export class PresBox extends ViewBoxBaseComponent if (Doc.UserDoc().activePresentation = this.rootDoc) PresBox.Instance = this; if (!this.presElement) { // create exactly one presElmentBox template to use by any and all presentations. Doc.UserDoc().presElement = new PrefetchProxy(Docs.Create.PresElementBoxDocument({ - title: "pres element template", backgroundColor: "transparent", _xMargin: 0, isTemplateDoc: true, isTemplateForField: "data" + title: "pres element template", type: DocumentType.PRESELEMENT, backgroundColor: "transparent", _xMargin: 0, isTemplateDoc: true, isTemplateForField: "data" })); // this script will be called by each presElement to get rendering-specific info that the PresBox knows about but which isn't written to the PresElement // this is a design choice -- we could write this data to the presElements which would require a reaction to keep it up to date, and it would prevent @@ -113,7 +115,7 @@ export class PresBox extends ViewBoxBaseComponent } @computed get selectedDocumentView() { if (SelectionManager.SelectedDocuments().length) return SelectionManager.SelectedDocuments()[0]; - if (PresBox.Instance?._selectedArray) return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc); + if (this._selectedArray) return DocumentManager.Instance.getDocumentView(this.rootDoc); return undefined; } @computed get isPres(): boolean { @@ -131,6 +133,7 @@ export class PresBox extends ViewBoxBaseComponent componentWillUnmount() { document.removeEventListener("keydown", this.keyEvents, true); this._presKeyEventsActive = false; + this.resetPresentation(); // Turn of progressivize editors this.turnOffEdit(true); } @@ -151,12 +154,24 @@ export class PresBox extends ViewBoxBaseComponent !pres?.includes(this.rootDoc) && Doc.AddDocToList(Doc.UserDoc().myPresentations as Doc, "data", this.rootDoc)); } - updateCurrentPresentation = () => { - Doc.UserDoc().activePresentation = this.rootDoc; + updateCurrentPresentation = (pres?: Doc) => { + if (pres && pres.type === DocumentType.PRES) { + Doc.UserDoc().activePresentation = pres; + this.selectPres(pres); + } else { + Doc.UserDoc().activePresentation = this.rootDoc; + this.selectPres(); + } document.removeEventListener("keydown", this.keyEvents, true); document.addEventListener("keydown", this.keyEvents, true); - this.selectPres(); PresBox.Instance = this; + if (Doc.UserDoc().activePresentation !== this.rootDoc) { + PresBox.Instance.forceUpdate(); + } + console.log("PresBox.Instance: " + PresBox.Instance) + console.log("Active item title: " + this.activeItem.title) + console.log("ChildDocs length: " + this.childDocs.length) + console.log("rootDoc.title: " + this.rootDoc.title) } /** @@ -202,9 +217,9 @@ export class PresBox extends ViewBoxBaseComponent if (targetNext.type === DocumentType.AUDIO) AudioBox.Instance.playFrom(NumCast(activeNext.presStartTime)); // if (targetNext.type === DocumentType.VID) { VideoBox.Instance.Play() }; } else if (targetNext.type === DocumentType.AUDIO || targetNext.type === DocumentType.VID) { activeNext.playNow = true; console.log('play next after it is navigated to'); } - this.gotoDocument(nextSelected, this.itemIndex); + this.gotoDocument(nextSelected); } else if (this.childDocs[this.itemIndex + 1] === undefined && this.layoutDoc.presLoop) { - this.gotoDocument(0, this.itemIndex); + this.gotoDocument(0); } } @@ -229,15 +244,14 @@ export class PresBox extends ViewBoxBaseComponent } else if (activeItem) { let prevSelected = this.itemIndex; prevSelected = Math.max(0, prevSelected - 1); - this.gotoDocument(prevSelected, this.itemIndex); + this.gotoDocument(prevSelected); if (NumCast(prevTargetDoc.lastFrame) > 0) prevTargetDoc._currentFrame = NumCast(prevTargetDoc.lastFrame); } } //The function that is called when a document is clicked or reached through next or back. //it'll also execute the necessary actions if presentation is playing. - public gotoDocument = action((index: number, fromDoc: number) => { - this.updateCurrentPresentation(); + public gotoDocument = action((index: number) => { Doc.UnBrushAllDocs(); if (index >= 0 && index < this.childDocs.length) { this.rootDoc._itemIndex = index; @@ -263,9 +277,8 @@ export class PresBox extends ViewBoxBaseComponent if (presTargetDoc?.lastFrame !== undefined) { presTargetDoc._currentFrame = 0; } - this._selectedArray.splice(0, this._selectedArray.length, this.childDocs[index]); //Update selected array - //Handles movement to element - if (this.layoutDoc._viewType === "stacking") this.navigateToElement(this.childDocs[index]); + this._selectedArray.splice(0, this._selectedArray.length, this.childDocs[index]); //Updates selected array + if (this.layoutDoc._viewType === "stacking") this.navigateToElement(this.childDocs[index]); // Handles movement to element this.onHideDocument(); //Handles hide after/before } }); @@ -290,13 +303,6 @@ export class PresBox extends ViewBoxBaseComponent this.layoutDoc.presCollection = srcContext; } else if (targetDoc) this.layoutDoc.presCollection = targetDoc; } - // if (collectionDocView) { - // if (srcContext && srcContext !== presCollection) { - // // Case 1: new srcContext inside of current collection so add a new tab to the current pres collection - // collectionDocView.props.addDocTab(srcContext, "inPlace"); - // } - // } - this.updateCurrentPresentation(); const docToJump = curDoc; const willZoom = false; const presStatus = this.rootDoc.presStatus; @@ -313,7 +319,8 @@ export class PresBox extends ViewBoxBaseComponent self._eleArray.splice(0, self._eleArray.length, ...eleViewCache); }); const openInTab = () => { - collectionDocView ? collectionDocView.props.addDocTab(activeItem, "replace") : this.props.addDocTab(activeItem, "replace:left"); + collectionDocView ? collectionDocView.props.addDocTab(activeItem, "") : this.props.addDocTab(activeItem, ":left"); + this.layoutDoc.presCollection = activeItem; // this still needs some fixing setTimeout(resetSelection, 500); }; @@ -422,17 +429,17 @@ export class PresBox extends ViewBoxBaseComponent const curDoc = Cast(doc, Doc, null); const tagDoc = Cast(curDoc.presentationTargetDoc!, Doc, null); if (tagDoc) tagDoc.opacity = 1; - if (curDoc.presHideTillShownButton) { + if (curDoc.presHideBefore) { if (index > this.itemIndex) { tagDoc.opacity = 0; - } else if (!curDoc.presHideAfterButton) { + } else if (!curDoc.presHideAfter) { tagDoc.opacity = 1; } } - if (curDoc.presHideAfterButton) { + if (curDoc.presHideAfter) { if (index < this.itemIndex) { tagDoc.opacity = 0; - } else if (!curDoc.presHideTillShownButton) { + } else if (!curDoc.presHideBefore) { tagDoc.opacity = 1; } } @@ -473,7 +480,7 @@ export class PresBox extends ViewBoxBaseComponent }; this.layoutDoc.presStatus = PresStatus.Autoplay; this.startPresentation(startSlide); - this.gotoDocument(startSlide, this.itemIndex); + this.gotoDocument(startSlide); load(); } @@ -489,8 +496,8 @@ export class PresBox extends ViewBoxBaseComponent //The function that resets the presentation by removing every action done by it. It also //stops the presentaton. resetPresentation = () => { - this.updateCurrentPresentation(); this.rootDoc._itemIndex = 0; + for (const doc of this.childDocs) Cast(doc.presentationTargetDoc, Doc, null).opacity = 1; } @action togglePath = (srcContext: Doc, off?: boolean) => { @@ -519,10 +526,10 @@ export class PresBox extends ViewBoxBaseComponent this.updateCurrentPresentation(); this.childDocs.map(doc => { const tagDoc = doc.presentationTargetDoc as Doc; - if (doc.presHideTillShownButton && this.childDocs.indexOf(doc) > startIndex) { + if (doc.presHideBefore && this.childDocs.indexOf(doc) > startIndex) { tagDoc.opacity = 0; } - if (doc.presHideAfterButton && this.childDocs.indexOf(doc) < startIndex) { + if (doc.presHideAfter && this.childDocs.indexOf(doc) < startIndex) { tagDoc.opacity = 0; } }); @@ -641,17 +648,18 @@ export class PresBox extends ViewBoxBaseComponent } @action - selectPres = () => { - const presDocView = DocumentManager.Instance.getDocumentView(this.rootDoc)!; + selectPres = (pres?: Doc) => { + const presDocView = DocumentManager.Instance.getDocumentView(pres ? pres : this.rootDoc)!; SelectionManager.SelectDoc(presDocView, false); } //Regular click @action selectElement = (doc: Doc) => { - this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.itemIndex)); - if (doc.presPinView || doc.presentationTargetDoc === this.layoutDoc.presCollection) setTimeout(() => this.updateCurrentPresentation(), 0); - else this.updateCurrentPresentation(); + const context = Cast(doc.context, Doc, null) + this.gotoDocument(this.childDocs.indexOf(doc)); + if (doc.presPinView || doc.presentationTargetDoc === this.layoutDoc.presCollection) setTimeout(() => this.updateCurrentPresentation(context), 0); + else this.updateCurrentPresentation(context); } //Command click @@ -728,12 +736,12 @@ export class PresBox extends ViewBoxBaseComponent case "Right": case "ArrowRight": if (this.itemIndex >= this.childDocs.length - 1) return; if (e.shiftKey) { // TODO: update to work properly - console.log("Down: " + this.rootDoc._itemIndex, this.itemIndex, this.childDocs.length) + // console.log("Down: " + this.rootDoc._itemIndex, this.itemIndex, this.childDocs.length) this.rootDoc._itemIndex = NumCast(this.rootDoc._itemIndex) + 1; this._selectedArray.push(this.childDocs[this.rootDoc._itemIndex]); } else { this.next(); - if (this._presTimer) clearTimeout(this._presTimer); + if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } } handled = true; break; @@ -741,22 +749,22 @@ export class PresBox extends ViewBoxBaseComponent case "Left": case "ArrowLeft": if (this.itemIndex === 0) return; if (e.shiftKey) { // TODO: update to work properly - console.log("Up: " + this.rootDoc._itemIndex, this.itemIndex, this.childDocs.length) + // console.log("Up: " + this.rootDoc._itemIndex, this.itemIndex, this.childDocs.length) this.rootDoc._itemIndex = NumCast(this.rootDoc._itemIndex) - 1; this._selectedArray.push(this.childDocs[this.rootDoc._itemIndex]); } else { this.back(); - if (this._presTimer) clearTimeout(this._presTimer); + if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } } handled = true; break; case "Spacebar": case " ": - if (this.layoutDoc.presStatus === "manual") this.startAutoPres(this.itemIndex); - else if (this.layoutDoc.presStatus === "auto") if (this._presTimer) clearTimeout(this._presTimer); + if (this.layoutDoc.presStatus === PresStatus.Manual) this.startAutoPres(this.itemIndex); + else if (this.layoutDoc.presStatus === PresStatus.Autoplay) if (this._presTimer) clearTimeout(this._presTimer); handled = true; break; case "a": - if ((e.metaKey || e.altKey) && this.layoutDoc.presStatus === "edit") { + if ((e.metaKey || e.altKey) && this.layoutDoc.presStatus === PresStatus.Edit) { this._selectedArray.splice(0, this._selectedArray.length, ...this.childDocs); handled = true; } @@ -780,11 +788,18 @@ export class PresBox extends ViewBoxBaseComponent } } + getAllIndexes = (arr: Doc[], val: Doc): number => { + var indexes = [], i; + for (i = 0; i < arr.length; i++) + if (arr[i] === val) + indexes.push(i); + return indexes.length; + } + // Adds the index in the pres path graphically @computed get order() { const order: JSX.Element[] = []; const docs: Doc[] = []; - const number: number[] = []; this.childDocs.filter(doc => Cast(doc.presentationTargetDoc, Doc, null)).forEach((doc, index) => { const tagDoc = Cast(doc.presentationTargetDoc, Doc, null); const srcContext = Cast(tagDoc.context, Doc, null); @@ -792,18 +807,26 @@ export class PresBox extends ViewBoxBaseComponent const height = Math.max(NumCast(tagDoc._height) / 10, 15); const edge = Math.max(width, height); const fontSize = edge * 0.8; + const gap = 2; // Case A: Document is contained within the collection if (this.rootDoc.presCollection === srcContext) { if (docs.includes(tagDoc)) { + const prevOccurances: number = this.getAllIndexes(docs, tagDoc); docs.push(tagDoc); order.push( -
+
this.selectElement(doc)}>
{index + 1}
); } else { docs.push(tagDoc); order.push( -
+
this.selectElement(doc)}>
{index + 1}
); } @@ -865,29 +888,6 @@ export class PresBox extends ViewBoxBaseComponent />); } - /** - * The function that is called on click to turn fading document after presented option on/off. - * It also makes sure that the option swithches from hide-after to this one, since both - * can't coexist. - */ - // @action - // onFadeDocumentAfterPresentedClick = (e: React.MouseEvent) => { - // e.stopPropagation(); - // const activeItem: Doc = this.activeItem; - // const targetDoc: Doc = this.targetDoc; - // activeItem.presFadeButton = !activeItem.presFadeButton; - // if (!activeItem.presFadeButton) { - // if (targetDoc) { - // targetDoc.opacity = 1; - // } - // } else { - // activeItem.presHideAfterButton = false; - // if (this.rootDoc.presStatus !== "edit" && targetDoc) { - // targetDoc.opacity = 0.5; - // } - // } - // } - // Converts seconds to ms and updates presTransition setTransitionTime = (number: String, change?: number) => { let timeInMS = Number(number) * 1000; @@ -911,57 +911,38 @@ export class PresBox extends ViewBoxBaseComponent */ @undoBatch updateMovement = action((movement: any, all?: boolean) => { - if (all) { - this.childDocs.forEach((doc) => { - switch (movement) { - case PresMovement.Zoom: //Pan and zoom - doc.presMovement = PresMovement.Zoom; - break; - case PresMovement.Pan: //Pan - doc.presMovement = PresMovement.Pan; - break; - case PresMovement.Jump: //Jump Cut - doc.presJump = true; - doc.presMovement = PresMovement.Jump; - break; - case PresMovement.None: default: - doc.presMovement = PresMovement.None; - break; - } - }); - } else { - this._selectedArray?.forEach((doc) => { - switch (movement) { - case PresMovement.Zoom: //Pan and zoom - doc.presMovement = PresMovement.Zoom; - break; - case PresMovement.Pan: //Pan - doc.presMovement = PresMovement.Pan; - break; - case PresMovement.Jump: //Jump Cut - doc.presJump = true; - doc.presMovement = PresMovement.Jump; - break; - case PresMovement.None: default: - doc.presMovement = PresMovement.None; - break; - } - }); - } + const array: any[] = all ? this.childDocs : this._selectedArray; + array.forEach((doc) => { + switch (movement) { + case PresMovement.Zoom: //Pan and zoom + doc.presMovement = PresMovement.Zoom; + break; + case PresMovement.Pan: //Pan + doc.presMovement = PresMovement.Pan; + break; + case PresMovement.Jump: //Jump Cut + doc.presJump = true; + doc.presMovement = PresMovement.Jump; + break; + case PresMovement.None: default: + doc.presMovement = PresMovement.None; + break; + } + }) }); @undoBatch @action updateHideBefore = (activeItem: Doc) => { - activeItem.presHideTillShownButton = !activeItem.presHideTillShownButton; - this._selectedArray?.forEach((doc) => doc.presHideTillShownButton = activeItem.presHideTillShownButton); + activeItem.presHideBefore = !activeItem.presHideBefore; + this._selectedArray?.forEach((doc) => doc.presHideBefore = activeItem.presHideBefore); } @undoBatch @action updateHideAfter = (activeItem: Doc) => { - activeItem.presHideAfterButton = !activeItem.presHideAfterButton; - this._selectedArray?.forEach((doc) => doc.presHideAfterButton = activeItem.presHideAfterButton); + activeItem.presHideAfter = !activeItem.presHideAfter; + this._selectedArray?.forEach((doc) => doc.presHideAfter = activeItem.presHideAfter); } @undoBatch @@ -976,55 +957,30 @@ export class PresBox extends ViewBoxBaseComponent @undoBatch @action updateEffect = (effect: any, all?: boolean) => { - if (all) { - this.childDocs.forEach((doc) => { - const tagDoc = Cast(doc.presentationTargetDoc, Doc, null); - switch (effect) { - case PresEffect.Bounce: - tagDoc.presEffect = PresEffect.Bounce; - break; - case PresEffect.Fade: - tagDoc.presEffect = PresEffect.Fade; - break; - case PresEffect.Flip: - tagDoc.presEffect = PresEffect.Flip; - break; - case PresEffect.Roll: - tagDoc.presEffect = PresEffect.Roll; - break; - case PresEffect.Rotate: - tagDoc.presEffect = PresEffect.Rotate; - break; - case PresEffect.None: default: - tagDoc.presEffect = PresEffect.None; - break; - } - }); - } else { - this._selectedArray?.forEach((doc) => { - const tagDoc = Cast(doc.presentationTargetDoc, Doc, null); - switch (effect) { - case PresEffect.Bounce: - tagDoc.presEffect = PresEffect.Bounce; - break; - case PresEffect.Fade: - tagDoc.presEffect = PresEffect.Fade; - break; - case PresEffect.Flip: - tagDoc.presEffect = PresEffect.Flip; - break; - case PresEffect.Roll: - tagDoc.presEffect = PresEffect.Roll; - break; - case PresEffect.Rotate: - tagDoc.presEffect = PresEffect.Rotate; - break; - case PresEffect.None: default: - tagDoc.presEffect = PresEffect.None; - break; - } - }); - } + const array: any[] = all ? this.childDocs : this._selectedArray; + array.forEach((doc) => { + const tagDoc = Cast(doc.presentationTargetDoc, Doc, null); + switch (effect) { + case PresEffect.Bounce: + tagDoc.presEffect = PresEffect.Bounce; + break; + case PresEffect.Fade: + tagDoc.presEffect = PresEffect.Fade; + break; + case PresEffect.Flip: + tagDoc.presEffect = PresEffect.Flip; + break; + case PresEffect.Roll: + tagDoc.presEffect = PresEffect.Roll; + break; + case PresEffect.Rotate: + tagDoc.presEffect = PresEffect.Rotate; + break; + case PresEffect.None: default: + tagDoc.presEffect = PresEffect.None; + break; + } + }); } @computed get transitionDropdown() { @@ -1081,8 +1037,8 @@ export class PresBox extends ViewBoxBaseComponent
Visibility {"&"} Duration
-
{"Hide before presented"}
}>
this.updateHideBefore(activeItem)}>Hide before
 -
{"Hide after presented"}
}>
this.updateHideAfter(activeItem)}>Hide after
 +
{"Hide before presented"}
}>
this.updateHideBefore(activeItem)}>Hide before
 +
{"Hide after presented"}
}>
this.updateHideAfter(activeItem)}>Hide after
{"Open document in a new tab"}
}>
this.updateOpenDoc(activeItem)}>Open
@@ -1175,8 +1131,8 @@ export class PresBox extends ViewBoxBaseComponent curDoc.presTransition = activeItem.presTransition; curDoc.presDuration = activeItem.presDuration; tagDoc.presEffectDirection = targetDoc.presEffectDirection; - curDoc.presHideTillShownButton = activeItem.presHideTillShownButton; - curDoc.presHideAfterButton = activeItem.presHideAfterButton; + curDoc.presHideBefore = activeItem.presHideBefore; + curDoc.presHideAfter = activeItem.presHideAfter; } }); } @@ -1372,7 +1328,7 @@ export class PresBox extends ViewBoxBaseComponent if (data && presData) { data.push(doc); TabDocView.PinDoc(doc, false); - this.gotoDocument(this.childDocs.length, this.itemIndex); + this.gotoDocument(this.childDocs.length); } else { this.props.addDocTab(doc, "add:right"); } @@ -1866,7 +1822,7 @@ export class PresBox extends ViewBoxBaseComponent
-
{presKeyEvents ? "Key are active" : "Keys are not active - click anywhere on the presentation trail to activate keys"}
}> +
{presKeyEvents ? "Keys are active" : "Keys are not active - click anywhere on the presentation trail to activate keys"}
}>
@@ -2005,7 +1961,7 @@ export class PresBox extends ViewBoxBaseComponent
{"Loop"}
}>
this.layoutDoc.presLoop = !this.layoutDoc.presLoop}>
-
{this.layoutDoc.presStatus === "auto" ? "Pause" : "Autoplay"}
}>
 +
{this.layoutDoc.presStatus === PresStatus.Autoplay ? "Pause" : "Autoplay"}
}>
250 ? "inline-flex" : "none" }}> @@ -2022,13 +1978,17 @@ export class PresBox extends ViewBoxBaseComponent @action startOrPause = () => { - if (this.layoutDoc.presStatus === "manual" || this.layoutDoc.presStatus === "edit") this.startAutoPres(this.itemIndex); + if (this.layoutDoc.presStatus === PresStatus.Manual || this.layoutDoc.presStatus === PresStatus.Edit) this.startAutoPres(this.itemIndex); else this.pauseAutoPres(); } render() { // calling this method for keyEvents this.isPres; + // console.log("ActivePres Title: " + Cast(Doc.UserDoc().activePresentation, Doc, null).title); + // for (const doc of this._selectedArray) { + // console.log(doc.title); + // } // needed to ensure that the childDocs are loaded for looking up fields this.childDocs.slice(); const mode = StrCast(this.rootDoc._viewType) as CollectionViewType; @@ -2039,7 +1999,7 @@ export class PresBox extends ViewBoxBaseComponent
{"Loop"}
}>
this.layoutDoc.presLoop = !this.layoutDoc.presLoop}>
-
{this.layoutDoc.presStatus === "auto" ? "Pause" : "Autoplay"}
}>
 +
{this.layoutDoc.presStatus === PresStatus.Autoplay ? "Pause" : "Autoplay"}
}>
@@ -2047,7 +2007,7 @@ export class PresBox extends ViewBoxBaseComponent {this.playButtonFrames}
-
{ this.updateMinimize(); this.layoutDoc.presStatus = "edit"; clearTimeout(this._presTimer); }))}>EXIT
+
{ this.updateMinimize(); this.layoutDoc.presStatus = PresStatus.Edit; clearTimeout(this._presTimer); }))}>EXIT
: diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 919142975..df5e346e1 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -2,7 +2,6 @@ $light-blue: #AEDDF8; $dark-blue: #5B9FDD; $light-background: #ececec; $slide-background: #d5dce2; -$slide-hover: #98b7da; $slide-active: #5B9FDD; .presItem-container { diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 0dc8a2148..aee309d5b 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -194,7 +194,11 @@ export class PresElementBox extends ViewBoxBaseComponent { const slide = this._itemRef.current!; - if (slide && DragManager.docsBeingDragged.length > 0) { + let dragIsPresItem: boolean = DragManager.docsBeingDragged.length > 0 ? true : false; + for (const doc of DragManager.docsBeingDragged) { + if (!doc.presentationTargetDoc) dragIsPresItem = false; + } + if (slide && dragIsPresItem) { const rect = slide.getBoundingClientRect(); const y = e.clientY - rect.top; //y position within the element. const height = slide.clientHeight; -- cgit v1.2.3-70-g09d2 From 5372e9b221aa72f7dfa22121ce8a4d85573da8cf Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Wed, 4 Nov 2020 02:47:49 +0800 Subject: reset old width because default width for doc is 400 so max does not work --- src/client/views/EditableView.tsx | 3 ++- src/client/views/collections/CollectionSubView.tsx | 2 +- src/client/views/nodes/PresBox.tsx | 6 ++---- src/client/views/presentationview/PresElementBox.scss | 2 +- src/client/views/presentationview/PresElementBox.tsx | 13 ++++++++----- 5 files changed, 14 insertions(+), 12 deletions(-) (limited to 'src/client/views/presentationview/PresElementBox.scss') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 9606b5a91..ed7a8265f 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -35,6 +35,7 @@ export interface EditableProps { sizeToContent?: boolean; maxHeight?: number; display?: string; + overflow?: string; autosuggestProps?: { resetValue: () => void; value: string, @@ -227,7 +228,7 @@ export class EditableView extends React.Component { setTimeout(() => this.props.autosuggestProps?.resetValue(), 0); return this.props.contents instanceof ObjectField ? (null) :
{ this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()} diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index f88ebd9ac..b27f64ff0 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -483,7 +483,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: if (text && !text.includes("https://")) { UndoManager.RunInBatch(() => this.addDocument(Docs.Create.TextDocument(text, { ...options, title: text.substring(0, 20), _width: 400, _height: 315 })), "drop"); } else { - alert("Document updloaded failed - possibly an unsupported file type."); + alert("Document upload failed - possibly an unsupported file type."); } } disposer(); diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 04eda8b90..190af34b9 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -322,10 +322,8 @@ export class PresBox extends ViewBoxBaseComponent // Handles the setting of presCollection if (includesDoc) { //Case 1: Pres collection should not change as it is already the same - console.log(1); } else if (tab !== undefined) { // Case 2: Pres collection should update - console.log(2); this.layoutDoc.presCollection = srcContext; } const presStatus = this.rootDoc.presStatus; @@ -352,10 +350,10 @@ export class PresBox extends ViewBoxBaseComponent if (activeItem.openDocument) { openInTab(); } else if (curDoc.presMovement === PresMovement.Pan && targetDoc) { - await DocumentManager.Instance.jumpToDocument(targetDoc, false, openInTab, srcContext, undefined, undefined, undefined, includesDoc ? undefined : resetSelection); // documents open in new tab instead of on right + await DocumentManager.Instance.jumpToDocument(targetDoc, false, openInTab, srcContext, undefined, undefined, undefined, includesDoc || tab ? undefined : resetSelection); // documents open in new tab instead of on right } else if ((curDoc.presMovement === PresMovement.Zoom || curDoc.presMovement === PresMovement.Jump) && targetDoc) { //awaiting jump so that new scale can be found, since jumping is async - await DocumentManager.Instance.jumpToDocument(targetDoc, true, openInTab, srcContext, undefined, undefined, undefined, includesDoc ? undefined : resetSelection); // documents open in new tab instead of on right + await DocumentManager.Instance.jumpToDocument(targetDoc, true, openInTab, srcContext, undefined, undefined, undefined, includesDoc || tab ? undefined : resetSelection); // documents open in new tab instead of on right } // After navigating to the document, if it is added as a presPinView then it will // adjust the pan and scale to that of the pinView when it was added. diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index df5e346e1..73a08b6de 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -42,7 +42,7 @@ $slide-active: #5B9FDD; background-color: #d5dce2; border-radius: 5px; height: calc(100% - 7px); - width: calc(100% - 5px); + width: calc(100% - 15px); display: grid; grid-template-rows: 16px 10px auto; grid-template-columns: max-content max-content max-content max-content auto; diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 0e10cce47..7b4afeb69 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -273,15 +273,17 @@ export class PresElementBox extends ViewBoxBaseComponent= 300; - const miniView: boolean = this.toolbarWidth <= 100; + const miniView: boolean = this.toolbarWidth <= 110; const targetDoc: Doc = this.targetDoc; const activeItem: Doc = this.rootDoc; return ( @@ -311,11 +313,12 @@ export class PresElementBox extends ViewBoxBaseComponent} {miniView ? (null) :
-
+
StrCast(activeItem.title)} SetValue={this.onSetValue} /> @@ -344,7 +347,7 @@ export class PresElementBox extends ViewBoxBaseComponent e.stopPropagation()} />
-
{activeItem.presPinView ? (<>View of {targetDoc.title}) : targetDoc.title}
+
{activeItem.presPinView ? (<>View of {targetDoc.title}) : targetDoc.title}
{this.renderEmbeddedInline}
}
); -- cgit v1.2.3-70-g09d2