From 71b813b51f8e5d4e566eee5cac195f94c02f9ee1 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Fri, 14 Aug 2020 03:04:10 +0800 Subject: minimize + import multiple --- src/client/views/MainView.tsx | 1 + src/client/views/OverlayView.scss | 2 +- src/client/views/OverlayView.tsx | 2 +- .../views/collections/CollectionDockingView.scss | 76 ----------- .../views/collections/CollectionDockingView.tsx | 73 ++++------- src/client/views/nodes/AudioBox.tsx | 1 - src/client/views/nodes/PresBox.scss | 96 ++++++++++++-- src/client/views/nodes/PresBox.tsx | 142 +++++++++++++-------- 8 files changed, 209 insertions(+), 184 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index be8807336..816de55ca 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -903,6 +903,7 @@ export class MainView extends React.Component { const sidebarDocView = DocumentManager.Instance.getDocumentView(sidebar); const input = document.createElement("input"); input.type = "file"; + input.multiple = true; input.accept = ".zip, application/pdf, video/*, image/*, audio/*"; input.onchange = async _e => { const upload = Utils.prepend("/uploadDoc"); diff --git a/src/client/views/OverlayView.scss b/src/client/views/OverlayView.scss index 09a349012..555f4298d 100644 --- a/src/client/views/OverlayView.scss +++ b/src/client/views/OverlayView.scss @@ -44,6 +44,6 @@ } .overlayView-doc { - z-index: 1; + z-index: 9002; //so that it appears above chroma position: absolute; } \ No newline at end of file diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx index 5c3a8185c..49580cde4 100644 --- a/src/client/views/OverlayView.tsx +++ b/src/client/views/OverlayView.tsx @@ -182,7 +182,7 @@ export class OverlayView extends React.Component { offsetx = NumCast(d.x) - e.clientX; offsety = NumCast(d.y) - e.clientY; }; - return
+ return
{ - if (!CollectionDockingView.Instance) return undefined; - const instance = CollectionDockingView.Instance; - const replaceTab = (doc: Doc, child: any): Opt => { - for (const contentItem of child.contentItems) { - const { config, isStack, isRow, isColumn } = contentItem; - if (isRow || isColumn || isStack) { - const val = replaceTab(doc, contentItem); - if (val) return val; - } else if (config.component === "DocumentFrameRenderer" && - config.props.documentId === doc[Id]) { - const alias = Doc.MakeAlias(doc); - config.props.documentId = alias[Id]; - config.title = alias.title; - instance.stateChanged(); - return alias; - } - } - return undefined; - }; - return replaceTab(document, instance._goldenLayout.root); - } - // // Creates a vertical split on the right side of the docking view, and then adds the Document to the right of that split // @@ -358,6 +333,32 @@ export class CollectionDockingView extends React.Component { + Doc.GetProto(document).lastOpened = new DateField; + const docContentConfig = CollectionDockingView.makeDocumentConfig(document, undefined, libraryPath); + if (stack === undefined) { + let stack: any = this._goldenLayout.root; + while (!stack.isStack) { + if (stack.contentItems.length) { + stack = stack.contentItems[0]; + } else { + stack.addChild({ type: 'stack', content: [docContentConfig] }); + stack = undefined; + break; + } + } + if (stack) { + stack.addChild(docContentConfig); + } + } else { + stack.addChild(docContentConfig, undefined); + } + this.layoutChanged(); + return true; + } + setupGoldenLayout() { const config = StrCast(this.props.Document.dockingConfig); if (config) { @@ -871,26 +872,7 @@ export class DockedFrameRenderer extends React.Component { const currentFrame = Cast(presTargetDoc.currentFrame, "number", null); return currentFrame; } - renderMiniPres() { - return ( -
- {
-
-
PresBox.Instance.startAutoPres(PresBox.Instance.itemIndex)}>
-
-
-
- Slide {PresBox.Instance.itemIndex + 1} / {PresBox.Instance.childDocs.length} - {PresBox.Instance.playButtonFrames} -
-
-
EXIT
-
} -
- ); - } + renderMiniMap() { return
{ ContainingCollectionView={undefined} ContainingCollectionDoc={undefined} /> {document._viewType === CollectionViewType.Freeform && !this._document?.hideMinimap ? this.renderMiniMap() : (null)} - {document._viewType === CollectionViewType.Freeform && this._document?.miniPres ? this.renderMiniPres() : (null)} ; } diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 011b6ff87..900963eb0 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -510,7 +510,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent AudioBox.LabelScript; render() { - AudioBox.Instance = this; const interactive = SnappingManager.GetIsDragging() || this.active() ? "-interactive" : ""; this._first = true; // for indicating the first marker that is rendered this.path && this._buckets.length !== 100 ? this.peaks : null; // render waveform if audio is done recording diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 54accb012..c4d8f1a4f 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -13,7 +13,7 @@ $light-background: #ececec; width: 100%; min-width: 20px; height: 100%; - min-height: 41px; + min-height: 35px; letter-spacing: 2px; overflow: hidden; transition: 0.7s opacity ease; @@ -801,7 +801,7 @@ $light-background: #ececec; } - .miniPresOverlay { + .presPanelOverlay { background-color: #323232; color: white; border-radius: 5px; @@ -816,7 +816,7 @@ $light-background: #ececec; right: 10px; transition: all 0.2s; - .miniPres-button-text { + .presPanel-button-text { display: flex; height: 20; width: max-content; @@ -833,13 +833,13 @@ $light-background: #ececec; transition: all 0.3s; } - .miniPres-divider { + .presPanel-divider { width: 0.5px; height: 80%; border-right: solid 1px #5a5a5a; } - .miniPres-button-frame { + .presPanel-button-frame { justify-self: center; align-self: center; align-items: center; @@ -854,7 +854,7 @@ $light-background: #ececec; border-radius: 5px; } - .miniPres-button { + .presPanel-button { cursor: pointer; display: flex; height: 20; @@ -867,11 +867,11 @@ $light-background: #ececec; transition: all 0.3s; } - .miniPres-button:hover { + .presPanel-button:hover { background-color: #5a5a5a; } - .miniPres-button-text:hover { + .presPanel-button-text:hover { background-color: #5a5a5a; } } @@ -950,4 +950,82 @@ $light-background: #ececec; .select { font-size: 100%; } -} \ No newline at end of file +} + +.miniPres:hover { + opacity: 1; +} + +.miniPres { + cursor: grab; + position: absolute; + overflow: hidden; + right: 10; + top: 10; + opacity: 0.1; + transition: all 0.4s; + /* border: solid 1px; */ + color: white; + /* box-shadow: black 0.4vw 0.4vw 0.8vw; */ + + .miniPresOverlay { + display: grid; + grid-template-columns: auto auto auto auto auto auto auto auto; + grid-template-rows: 100%; + height: 100%; + justify-items: center; + align-items: center; + + .miniPres-button-text { + cursor: pointer; + display: flex; + height: 20; + font-weight: 400; + min-width: 100%; + border-radius: 5px; + align-items: center; + justify-content: center; + transition: all 0.3s; + } + + .miniPres-button-frame { + justify-self: center; + align-self: center; + align-items: center; + display: grid; + grid-template-columns: auto auto auto; + justify-content: space-around; + font-size: 11; + margin-left: 7; + width: 30; + height: 85%; + background-color: rgba(91, 157, 221, 0.4); + border-radius: 5px; + } + + .miniPres-divider { + width: 0.5px; + height: 80%; + border-right: solid 2px #5a5a5a; + } + + .miniPres-button { + cursor: pointer; + display: flex; + height: 20; + min-width: 20; + border-radius: 100%; + align-items: center; + justify-content: center; + transition: all 0.3s; + } + + .miniPres-button:hover { + background-color: #5a5a5a; + } + + .miniPres-button-text:hover { + background-color: #5a5a5a; + } + } +} diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index cada3bc83..c9303f153 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -147,9 +147,12 @@ export class PresBox extends ViewBoxBaseComponent // Case 3: No more frames in current doc and next slide is defined, therefore move to next slide } else if (this.childDocs[this.itemIndex + 1] !== undefined) { const nextSelected = this.itemIndex + 1; + if (presTargetDoc.type === DocumentType.AUDIO) AudioBox.Instance.pause(); this.gotoDocument(nextSelected, this.itemIndex); const targetNext = Cast(activeNext.presentationTargetDoc, Doc, null); if (activeNext && targetNext.type === DocumentType.AUDIO && activeNext.playAuto) { + AudioBox.Instance.playFrom(0); + this._moveOnFromAudio = true; } else this._moveOnFromAudio = false; } } @@ -353,9 +356,8 @@ export class PresBox extends ViewBoxBaseComponent for (var i = startSlide; i < this.childDocs.length; i++) { activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - if (targetDoc.presDuration && targetDoc.presTransition) { - duration = NumCast(targetDoc.presDuration) + NumCast(targetDoc.presTransition); - } else duration = 2500; + duration = NumCast(targetDoc.presDuration) + NumCast(targetDoc.presTransition); + if (duration <= 100) { duration = 2500; } if (NumCast(targetDoc.lastFrame) > 0) { for (var f = 0; f < NumCast(targetDoc.lastFrame); f++) { await timer(duration / NumCast(targetDoc.lastFrame)); @@ -415,18 +417,36 @@ export class PresBox extends ViewBoxBaseComponent * The method called to open the presentation as a minimized view * TODO: Look at old updateMinimize and compare... */ - updateMinimize = () => { - const srcContext = Cast(this.rootDoc.presCollection, Doc, null); - this.turnOffEdit(); - if (srcContext) { - if (srcContext.miniPres) { - srcContext.miniPres = false; - CollectionDockingView.AddRightSplit(this.rootDoc); - } else { - srcContext.miniPres = true; - this.props.addDocTab?.(this.rootDoc, "close"); - } + @undoBatch + @action + updateMinimize = (e: React.MouseEvent) => { + if (this.layoutDoc.inOverlay) { + this.layoutDoc.presStatus = 'edit'; + Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); + CollectionDockingView.AddRightSplit(this.rootDoc); + this.layoutDoc.inOverlay = false; + } else { + this.layoutDoc.presStatus = 'manual'; + console.log('test'); + const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); + this.rootDoc.x = pt[0] + (this.props.PanelWidth() - 250); + this.rootDoc.y = pt[1] + 10; + this.rootDoc._height = 35; + this.rootDoc._width = 250; + this.props.addDocTab?.(this.rootDoc, "close"); + Doc.AddDocToList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); } + // const srcContext = Cast(this.rootDoc.presCollection, Doc, null); + // this.turnOffEdit(); + // if (srcContext) { + // if (srcContext.miniPres) { + // srcContext.miniPres = false; + // CollectionDockingView.AddRightSplit(this.rootDoc); + // } else { + // srcContext.miniPres = true; + // this.props.addDocTab?.(this.rootDoc, "close"); + // } + // } } /** @@ -465,6 +485,7 @@ export class PresBox extends ViewBoxBaseComponent break; case 'jump': //Jump Cut targetDoc.presTransition = 0; + activeItem.presZoomButton = true; activeItem.presSwitchButton = !activeItem.presSwitchButton; if (activeItem.presSwitchButton) activeItem.presMovement = 'Jump cut'; else activeItem.presMovement = 'None'; @@ -574,8 +595,10 @@ export class PresBox extends ViewBoxBaseComponent const anchorNode = document.activeElement as HTMLDivElement; if (anchorNode && anchorNode.className?.includes("lm_title")) return; if (e.keyCode === 27) { // Escape key - if (this.layoutDoc.presStatus === "edit") { this._selectedArray = []; this._eleArray = []; this._dragArray = []; } - else this.layoutDoc.presStatus = "edit"; if (this._presTimer) clearTimeout(this._presTimer); + if (this.layoutDoc.inOverlay) this.updateMinimize; + else if (this.layoutDoc.presStatus === "edit") { this._selectedArray = []; this._eleArray = []; this._dragArray = []; } + else this.layoutDoc.presStatus = "edit"; + if (this._presTimer) clearTimeout(this._presTimer); handled = true; } if ((e.metaKey || e.altKey) && e.keyCode === 65) { // Ctrl-A to select all if (this.layoutDoc.presStatus === "edit") { @@ -862,6 +885,8 @@ export class PresBox extends ViewBoxBaseComponent return effect; } + @undoBatch + @action applyTo = (array: Doc[]) => { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); @@ -1096,7 +1121,7 @@ export class PresBox extends ViewBoxBaseComponent @computed get presentDropdown() { return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> -
this.updateMinimize()}> +
Minimize
{ this.layoutDoc.presStatus = "manual"; this.turnOffEdit(); }))}> @@ -1287,9 +1312,10 @@ export class PresBox extends ViewBoxBaseComponent doc.editZoomProgressivize = false; doc.editScrollProgressivize = false; const targetDoc = Cast(doc.presentationTargetDoc, Doc, null); - targetDoc.editSnapZoomProgressivize = false; - targetDoc.editZoomProgressivize = false; - targetDoc.editScrollProgressivize = false; + if (targetDoc) { + targetDoc.editZoomProgressivize = false; + targetDoc.editScrollProgressivize = false; + } }); } @@ -1607,18 +1633,18 @@ export class PresBox extends ViewBoxBaseComponent @computed get playButtons() { // Case 1: There are still other frames and should go through all frames before going to next slide - return (
-
-
this.startAutoPres(this.itemIndex)}>
-
-
-
250 ? "inline-flex" : "none" }}> + return (
+
+
this.startAutoPres(this.itemIndex)}>
+
+
+
250 ? "inline-flex" : "none" }}> Slide {this.itemIndex + 1} / {this.childDocs.length} {this.playButtonFrames}
-
- {this.props.PanelWidth() > 250 ?
this.layoutDoc.presStatus = "edit"}>EXIT
- :
this.layoutDoc.presStatus = "edit"}> +
+ {this.props.PanelWidth() > 250 ?
this.layoutDoc.presStatus = "edit"}>EXIT
+ :
this.layoutDoc.presStatus = "edit"}>
}
); @@ -1630,28 +1656,44 @@ export class PresBox extends ViewBoxBaseComponent // needed to ensure that the childDocs are loaded for looking up fields this.childDocs.slice(); const mode = StrCast(this.rootDoc._viewType) as CollectionViewType; - return
- {this.topPanel} - {this.toolbar} - {this.newDocumentToolbarDropdown} -
- {mode !== CollectionViewType.Invalid ? - - : (null) - } + return this.layoutDoc.inOverlay ? +
+ {
+
+
this.startAutoPres(this.itemIndex)}>
+
+
+
+ Slide {this.itemIndex + 1} / {this.childDocs.length} + {this.playButtonFrames} +
+
+
EXIT
+
}
-
; + : +
+ {this.topPanel} + {this.toolbar} + {this.newDocumentToolbarDropdown} +
+ {mode !== CollectionViewType.Invalid ? + + : (null) + } +
+
; } } Scripting.addGlobal(function lookupPresBoxField(container: Doc, field: string, data: Doc) { -- cgit v1.2.3-70-g09d2