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 --- src/client/views/nodes/PresBox.scss | 1 + src/client/views/nodes/PresBox.tsx | 78 +++++++++++++++++++++---------------- 2 files changed, 46 insertions(+), 33 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 9a8b861ba..961d1707b 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -56,6 +56,7 @@ $light-background: #ececec; letter-spacing: 0; display: flex; align-items: center; + justify-content: center; transition: 0.5s; } diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 3b7794815..e819cd9c6 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -52,6 +52,11 @@ enum PresStatus { Edit = "edit" } +enum PresColors { + Active = "#AEDDF8", + +} + type PresBoxSchema = makeInterface<[typeof documentSchema]>; const PresBoxDocument = makeInterface(documentSchema); @@ -69,14 +74,15 @@ export class PresBox extends ViewBoxBaseComponent @observable _sortedSelectedArray: Doc[] = []; @observable _eleArray: HTMLElement[] = []; @observable _dragArray: HTMLElement[] = []; + @observable _pathBoolean: boolean = false; + @observable _expandBoolean: boolean = false; @observable private transitionTools: boolean = false; @observable private newDocumentTools: boolean = false; @observable private progressivizeTools: boolean = false; - @observable private presentTools: boolean = false; - @observable private pathBoolean: boolean = false; @observable private openMovementDropdown: boolean = false; @observable private openEffectDropdown: boolean = false; + @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); } @@ -442,7 +448,7 @@ export class PresBox extends ViewBoxBaseComponent } } }; - this.layoutDoc.presStatus = PresStatus.Auto; + this.layoutDoc.presStatus = PresStatus.Autoplay; this.startPresentation(startSlide); this.gotoDocument(startSlide, this.itemIndex); load(); @@ -450,7 +456,7 @@ export class PresBox extends ViewBoxBaseComponent @action pauseAutoPres = () => { - if (this.layoutDoc.presStatus === PresStatus.Auto) { + if (this.layoutDoc.presStatus === PresStatus.Autoplay) { if (this._presTimer) clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; this.layoutDoc.presLoop = false; @@ -466,20 +472,21 @@ export class PresBox extends ViewBoxBaseComponent @action togglePath = (srcContext: Doc, off?: boolean) => { if (off) { - this.pathBoolean = false; + this._pathBoolean = false; srcContext.presPathView = false; } else { - this.pathBoolean = !this.pathBoolean; - srcContext.presPathView = this.pathBoolean; + undoBatch(() => { + runInAction(() => this._pathBoolean = !this._pathBoolean); + srcContext.presPathView = this._pathBoolean; + }) } } @undoBatch @action toggleExpandMode = () => { - this.rootDoc.expandBoolean = !this.rootDoc.expandBoolean; + runInAction(() => this._expandBoolean = !this._expandBoolean); this.childDocs.forEach((doc) => { - if (this.rootDoc.expandBoolean) doc.presExpandInlineButton = true; - else if (!this.rootDoc.expandBoolean) doc.presExpandInlineButton = false; + doc.presExpandInlineButton = this._expandBoolean; }); } @@ -589,9 +596,7 @@ export class PresBox extends ViewBoxBaseComponent addDocumentFilter = (doc: Doc | Doc[]) => { const docs = doc instanceof Doc ? [doc] : doc; docs.forEach((doc, i) => { - if (this.childDocs.includes(doc)) { - if (docs.length === i + 1) return false; - } else if (doc.type === DocumentType.LABEL) { + if (doc.type === DocumentType.LABEL) { const audio = Cast(doc.annotationOn, Doc, null); if (audio) { audio.aliasOf instanceof Doc; @@ -605,7 +610,7 @@ export class PresBox extends ViewBoxBaseComponent } else { doc.aliasOf instanceof Doc && (doc.presentationTargetDoc = doc.aliasOf); !this.childDocs.includes(doc) && (doc.presMovement = PresMovement.Zoom); - if (this.rootDoc.expandBoolean) doc.presExpandInlineButton = true; + if (this._expandBoolean) doc.presExpandInlineButton = true; } }); return true; @@ -743,7 +748,6 @@ export class PresBox extends ViewBoxBaseComponent /** * */ - @undoBatch @action viewPaths = () => { const srcContext = Cast(this.rootDoc.presCollection, Doc, null); @@ -1678,6 +1682,7 @@ export class PresBox extends ViewBoxBaseComponent const propIcon = CurrentUserUtils.propertiesWidth > 0 ? "angle-double-right" : "angle-double-left"; const propTitle = CurrentUserUtils.propertiesWidth > 0 ? "Close Presentation Panel" : "Open Presentation Panel"; const mode = StrCast(this.rootDoc._viewType) as CollectionViewType; + const isMini: boolean = this.toolbarWidth <= 100; return (mode === CollectionViewType.Carousel3D) ? (null) : (
{/*
{"Add new slide"}
}>
this.newDocumentTools = !this.newDocumentTools)}> @@ -1685,23 +1690,29 @@ export class PresBox extends ViewBoxBaseComponent
*/}
{"View paths"}
}> -
1 ? 1 : 0.3 }} className={`toolbar-button ${this.pathBoolean ? "active" : ""}`} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined}> +
1 ? 1 : 0.3, color: this._pathBoolean ? '#AEDDF8' : 'white', width: isMini ? "100%" : undefined }} className={"toolbar-button"} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined}>
-
-
{this.rootDoc.expandBoolean ? "Minimize all" : "Expand all"}
}> -
- {/* */} - -
- -
-
{propTitle}
}> -
- 0 ? '#AEDDF8' : 'white' }} /> -
- + {isMini ? (null) : + <> +
+
{this._expandBoolean ? "Minimize all" : "Expand all"}
}> +
+ {/* */} + +
+ +
+
{propTitle}
}> +
+ 0 ? '#AEDDF8' : 'white' }} /> +
+ + + }
); } @@ -1713,23 +1724,24 @@ export class PresBox extends ViewBoxBaseComponent */ @computed get topPanel() { const mode = StrCast(this.rootDoc._viewType) as CollectionViewType; + const isMini: boolean = this.toolbarWidth <= 100; return (
- + }
0 ? 1 : 0.3 }}>
(this.childDocs.length > 0) && (this.layoutDoc.presStatus = "manual")}>
200 ? "inline-flex" : "none" }}>  Present
- {(mode === CollectionViewType.Carousel3D) ? (null) :
{ if (this.childDocs.length > 0) this.presentTools = !this.presentTools; }))}> @@ -1900,7 +1912,7 @@ export class PresBox extends ViewBoxBaseComponent } Scripting.addGlobal(function lookupPresBoxField(container: Doc, field: string, data: Doc) { if (field === 'indexInPres') return DocListCast(container[StrCast(container.presentationFieldKey)]).indexOf(data); - if (field === 'presCollapsedHeight') return container._viewType === CollectionViewType.Stacking ? 30 : 26; + if (field === 'presCollapsedHeight') return container._viewType === CollectionViewType.Stacking ? 35 : 31; if (field === 'presStatus') return container.presStatus; if (field === '_itemIndex') return container._itemIndex; if (field === 'presBox') return container; -- 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/nodes') 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/nodes') 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/nodes') 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