diff options
| -rw-r--r-- | src/client/views/.DS_Store | bin | 6148 -> 10244 bytes | |||
| -rw-r--r-- | src/client/views/MainView.tsx | 6 | ||||
| -rw-r--r-- | src/client/views/PropertiesButtons.tsx | 8 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionDockingView.scss | 15 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionDockingView.tsx | 30 | ||||
| -rw-r--r-- | src/client/views/nodes/PresBox.scss | 79 | ||||
| -rw-r--r-- | src/client/views/nodes/PresBox.tsx | 151 |
7 files changed, 127 insertions, 162 deletions
diff --git a/src/client/views/.DS_Store b/src/client/views/.DS_Store Binary files differindex 7a8c419ee..c379549d0 100644 --- a/src/client/views/.DS_Store +++ b/src/client/views/.DS_Store diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 007d531c8..51137a080 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -175,10 +175,8 @@ export class MainView extends React.Component { fa.faFillDrip, fa.faLink, fa.faUnlink, fa.faBold, fa.faItalic, fa.faChevronLeft, fa.faUnderline, fa.faStrikethrough, fa.faSuperscript, fa.faSubscript, fa.faIndent, fa.faEyeDropper, fa.faPaintRoller, fa.faBars, fa.faBrush, fa.faShapes, fa.faEllipsisH, fa.faHandPaper, fa.faMap, fa.faUser, faHireAHelper, fa.faDesktop, fa.faTrashRestore, fa.faUsers, fa.faWrench, fa.faCog, fa.faMap, fa.faBellSlash, fa.faExpandAlt, fa.faArchive, fa.faBezierCurve, fa.faCircle, - fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH, fa.faAngleDoubleLeft); - //Pres trail icons (just for the sake of merging) - library.add(fa.faAngleUp, fa.faAngleDown, fa.faPlayCircle, fa.faClock, - fa.faRocket, fa.faExchangeAlt, faBuffer); + fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH, fa.faAngleDoubleLeft, fa.faAngleUp, + fa.faAngleDown, fa.faPlayCircle, fa.faClock, fa.faRocket, fa.faExchangeAlt, faBuffer); this.initEventListeners(); this.initAuthenticationRouters(); } diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 3392371de..55eb6c028 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -243,9 +243,8 @@ export class PropertiesButtons extends React.Component<{}, {}> { const scale = targetDoc._viewScale; } return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Pin with this view"}</div></>} placement="top"> - <> + <div> <div className="propertiesButtons-linker" - style={{ backgroundColor: "black", color: "white" }} onClick={e => { if (targetDoc) { DockedFrameRenderer.PinDoc(targetDoc, false); @@ -262,8 +261,9 @@ export class PropertiesButtons extends React.Component<{}, {}> { <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon="map-pin" /> <div style={{ position: 'relative', fontSize: 25, fontWeight: 700, transform: 'translate(0, -20px)', color: 'rgba(250,250,250,0.5)' }}>V</div> </div> - <div className="propertiesButtons-title" style={{ backgroundColor: "black", color: "white" }}>{"View"}</div> - </> + + <div className="propertiesButtons-title">{"View"}</div> + </div> </Tooltip>; } diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index 98babc3d2..4204ef5bb 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -54,6 +54,21 @@ 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%; diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index af701bfdd..7bd79b2ef 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -870,19 +870,25 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> { return currentFrame; } renderMiniPres() { - return <div className="miniPres" style={{ - width: 250, height: 30, background: '#323232' - }}> - <div className="miniPresOverlay" onClick={() => document.addEventListener("keydown", PresBox.Instance.minimizeEvents, false)}> - <div className="miniPres-button" onClick={PresBox.Instance.back}><FontAwesomeIcon icon={"arrow-left"} /></div> - <div className="miniPres-button" onClick={() => PresBox.Instance.startOrResetPres(PresBox.Instance.itemIndex)}><FontAwesomeIcon icon={PresBox.Instance.layoutDoc.presStatus === "auto" ? "pause" : "play"} /></div> - <div className="miniPres-button" onClick={PresBox.Instance.next}><FontAwesomeIcon icon={"arrow-right"} /></div> - <div className="miniPres-divider"></div> - <div className="miniPres-button-text">Slide {PresBox.Instance.itemIndex + 1} / {PresBox.Instance.childDocs.length}</div> - <div className="miniPres-divider"></div> - <div className="miniPres-button-text" onClick={PresBox.Instance.updateMinimize}>EXIT</div> + return ( + <div className="miniPres" + style={{ width: 250, height: 30, background: '#323232' }} + onClick={() => document.addEventListener("keydown", PresBox.Instance.minimizeEvents, false)} + > + {<div className="miniPresOverlay" onClick={() => document.addEventListener("keydown", PresBox.Instance.minimizeEvents, false)}> + <div className="miniPres-button" onClick={PresBox.Instance.back}><FontAwesomeIcon icon={"arrow-left"} /></div> + <div className="miniPres-button" onClick={() => PresBox.Instance.startAutoPres(PresBox.Instance.itemIndex)}><FontAwesomeIcon icon={PresBox.Instance.layoutDoc.presStatus === "auto" ? "pause" : "play"} /></div> + <div className="miniPres-button" onClick={PresBox.Instance.next}><FontAwesomeIcon icon={"arrow-right"} /></div> + <div className="miniPres-divider"></div> + <div className="miniPres-button-text"> + Slide {PresBox.Instance.itemIndex + 1} / {PresBox.Instance.childDocs.length} + {PresBox.Instance.playButtonFrames} + </div> + <div className="miniPres-divider"></div> + <div className="miniPres-button-text" onClick={PresBox.Instance.updateMinimize}>EXIT</div> + </div>} </div> - </div>; + ); } renderMiniMap() { return <div className="miniMap" style={{ diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index d5389da35..77e7924dd 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -161,52 +161,6 @@ $light-background: #ececec; padding-left: 10px; } - // .toolbar-slider { - // position: relative; - // align-self: center; - // justify-self: left; - // -webkit-appearance: none; - // background-color: #5b9ddd; - // overflow: hidden; - // margin-top: 5px; - // width: 100%; - // max-width: 200px; - - // } - - // .toolbar-slider:focus { - // outline: none; - // } - - // .effectDirection { - // justify-self: center; - // align-self: center; - // align-items: center; - // justify-content: center; - // grid-template-columns: 13px 13px 13px; - // display: grid; - // } - - // .toolbar-slider::-webkit-slider-thumb { - // -webkit-appearance: none; - // background-color: #5b9ddd; - // box-shadow: -100 vw 0 0 100vw pink; - // width: 12px; - // height: 12px; - // } - - // .toolbar-slider::-webkit-slider-runnable-track { - // position: relative; - // align-self: center; - // justify-self: left; - // -webkit-appearance: none; - // background-color: #5b9ddd; - // margin-top: 5px; - // border: solid 1px black; - // border-radius: 10px; - // height: 5px; - // left: 0px; - // } .presBox-subheading { font-size: 11; font-weight: 400; @@ -412,7 +366,7 @@ $light-background: #ececec; font-size: 10.5; font-weight: 200; height: 20; - background-color: #dedede; + background-color: $light-background; border: solid 1px black; display: flex; margin-top: 5px; @@ -504,7 +458,7 @@ $light-background: #ececec; grid-template-columns: auto 20%; position: relative; border: solid 1px black; - background-color: #dedede; + background-color: $light-background; border-radius: 5px; font-size: 10; height: 30; @@ -632,7 +586,7 @@ $light-background: #ececec; align-items: center; justify-content: center; transform: translate(0px, -1px); - background-color: #dedede; + background-color: $light-background; width: 40px; height: 15px; align-self: center; @@ -646,7 +600,7 @@ $light-background: #ececec; .layout-container { padding: 5px; display: grid; - background-color: #dedede; + background-color: $light-background; grid-template-columns: repeat(auto-fit, minmax(90px, 100px)); width: 100%; border: solid 1px black; @@ -798,12 +752,14 @@ $light-background: #ececec; border-radius: 5px; grid-template-rows: 100%; height: 25; - width: 200; + width: max-content; + min-width: max-content; justify-content: space-evenly; align-items: center; display: flex; position: absolute; right: 10px; + transition: all 0.2s; .miniPres-button-text { display: flex; @@ -811,6 +767,10 @@ $light-background: #ececec; width: max-content; font-family: Roboto; font-weight: 400; + margin-left: 3px; + margin-right: 3px; + padding-right: 3px; + padding-left: 3px; letter-spacing: normal; border-radius: 5px; align-items: center; @@ -824,10 +784,27 @@ $light-background: #ececec; border-right: solid 1px #5a5a5a; } + .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-button { display: flex; height: 20; min-width: 20; + margin-left: 3px; + margin-right: 3px; border-radius: 100%; align-items: center; justify-content: center; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 5d4cde382..24918098f 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -27,6 +27,7 @@ import { CollectionFreeFormViewChrome } from "../collections/CollectionMenu"; import { actionAsync } from "mobx-utils"; import { SelectionManager } from "../../util/SelectionManager"; import { AudioBox } from "./AudioBox"; +import { white } from "colors"; type PresBoxSchema = makeInterface<[typeof documentSchema]>; const PresBoxDocument = makeInterface(documentSchema); @@ -37,7 +38,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> static Instance: PresBox; @observable _isChildActive = false; - @observable _moveOnFromAudio: boolean = false; + @observable _moveOnFromAudio: boolean = true; @observable _presTimer!: NodeJS.Timeout; @observable _selectedArray: Doc[] = []; @@ -103,7 +104,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> next = () => { this.updateCurrentPresentation(); const activeNext = Cast(this.childDocs[this.itemIndex + 1], Doc, null); - const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null); + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const presTargetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); const childDocs = DocListCast(presTargetDoc[Doc.LayoutFieldKey(presTargetDoc)]); const currentFrame = Cast(presTargetDoc.currentFrame, "number", null); const lastFrame = Cast(presTargetDoc.lastFrame, "number", null); @@ -119,26 +121,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> if (presTargetDoc.presProgressivize) CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0); if (presTargetDoc.zoomProgressivize) this.zoomProgressivizeNext(presTargetDoc); // Case 2: Audio or video therefore wait to play the audio or video before moving on - } else if ((presTargetDoc.type === DocumentType.VID || presTargetDoc.type === DocumentType.AUDIO) && !this._moveOnFromAudio) { - if (presTargetDoc.type === DocumentType.AUDIO) { - AudioBox.Instance.playFrom(0); - this._moveOnFromAudio = true; - } - if (presTargetDoc.type === DocumentType.VID) { - this._moveOnFromAudio = true; - } + } else if ((presTargetDoc.type === DocumentType.AUDIO) && !this._moveOnFromAudio) { + AudioBox.Instance.playFrom(0); + this._moveOnFromAudio = true; // Case 3: No more frames in current doc and next slide is defined, therefore move to next slide - } else if (activeNext !== undefined) { - if (!presTargetDoc.presProgressivize) { - const nextTagDoc = Cast(this.childDocs[this.itemIndex + 1].presentationTargetDoc, Doc, null); - const nextChildDocs = DocListCast(nextTagDoc[Doc.LayoutFieldKey(presTargetDoc)]); - nextChildDocs.forEach((doc, i) => { - doc.opacity = 1; - }); - } + } else if (this.childDocs[this.itemIndex + 1] !== undefined) { const nextSelected = this.itemIndex + 1; this.gotoDocument(nextSelected, this.itemIndex); - this._moveOnFromAudio = false; + const targetNext = Cast(activeNext.presentationTargetDoc, Doc, null); + if (activeNext && targetNext.type === DocumentType.AUDIO && activeNext.playAuto) { + } else { this._moveOnFromAudio = false }; } } @@ -318,7 +310,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> //The function that starts or resets presentaton functionally, depending on presStatus of the layoutDoc @undoBatch @action - startPres = (startSlide: number) => { + startAutoPres = (startSlide: number) => { this.updateCurrentPresentation(); const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); @@ -377,13 +369,13 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> this.turnOffEdit(); if (srcContext) { if (srcContext.miniPres) { - document.removeEventListener("keydown", this.minimizeEvents, false); srcContext.miniPres = false; CollectionDockingView.AddRightSplit(this.rootDoc); + document.removeEventListener("keydown", this.minimizeEvents, false); } else { - document.addEventListener("keydown", this.minimizeEvents, false); srcContext.miniPres = true; this.props.addDocTab?.(this.rootDoc, "close"); + document.addEventListener("keydown", this.minimizeEvents, false); } } } @@ -544,7 +536,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> } if (e.keyCode === 39) { // right (39) / d(68) / down(40) to go to next if (this.layoutDoc.presStatus !== "edit") this.next(); } if (e.keyCode === 32) { // spacebar to 'present' or autoplay - if (this.layoutDoc.presStatus !== "edit") this.startPres(0); + if (this.layoutDoc.presStatus !== "edit") this.startAutoPres(0); else this.layoutDoc.presStatus = "manual"; } if (e.keyCode === 8) { // delete selected items @@ -688,7 +680,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); if (activeItem && targetDoc) { const transitionSpeed = targetDoc.presTransition ? String(Number(targetDoc.presTransition) / 1000) : 0.5; - const duration = targetDoc.presDuration ? String(Number(targetDoc.presDuration) / 1000) : 2; + let duration = targetDoc.presDuration ? String(Number(targetDoc.presDuration) / 1000) : 2; + if (targetDoc.type === DocumentType.AUDIO) duration = NumCast(targetDoc.duration); const effect = targetDoc.presEffect ? targetDoc.presEffect : 'None'; activeItem.presMovement = activeItem.presMovement ? activeItem.presMovement : 'Zoom'; return ( @@ -726,8 +719,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> <div className="presBox-subheading">Slide Duration</div> <div className="ribbon-property"> {duration} s </div> </div> - <input type="range" step="0.1" min="0.1" max="10" value={duration} style={{ transform: 'rotate(0deg)' }} className={"toolbar-slider"} id="duration-slider" onChange={(e: React.ChangeEvent<HTMLInputElement>) => { e.stopPropagation(); this.setDurationTime(e.target.value); }} /> - <div className={"slider-headers"}> + <input type="range" step="0.1" min="0.1" max="10" value={duration} style={{ display: targetDoc.type === DocumentType.AUDIO ? "none" : "block" }} className={"toolbar-slider"} id="duration-slider" onChange={(e: React.ChangeEvent<HTMLInputElement>) => { e.stopPropagation(); this.setDurationTime(e.target.value); }} /> + <div className={"slider-headers"} style={{ display: targetDoc.type === DocumentType.AUDIO ? "none" : "block" }}> <div className="slider-text">Short</div> <div className="slider-text">Medium</div> <div className="slider-text">Long</div> @@ -816,7 +809,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> <div className="ribbon-box"> <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.VID || targetDoc.type === DocumentType.AUDIO ? "inline-flex" : "none" }}> <div className="ribbon-button" style={{ backgroundColor: activeItem.playAuto ? "#aedef8" : "" }} onClick={() => activeItem.playAuto = !activeItem.playAuto}>Play automatically</div> - <div className="ribbon-button" style={{ display: "flex", backgroundColor: targetDoc.playAuto ? "" : "#aedef8" }} onClick={() => activeItem.playAuto = !activeItem.playAuto}>Play on next</div> + <div className="ribbon-button" style={{ display: "flex", backgroundColor: activeItem.playAuto ? "" : "#aedef8" }} onClick={() => activeItem.playAuto = !activeItem.playAuto}>Play on next</div> </div> <div className="ribbon-doubleButton" style={{ display: "flex" }}> <div className="ribbon-button" style={{ backgroundColor: activeItem.openDocument ? "#aedef8" : "" }} onClick={() => activeItem.openDocument = !activeItem.openDocument}>Open document</div> @@ -923,12 +916,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> if (freeform && layout) doc = this.createTemplate(layout, title); if (!freeform && !layout) doc = Docs.Create.TextDocument("", { _nativeWidth: 400, _width: 225, title: title }); const presCollection = Cast(this.layoutDoc.presCollection, Doc, null); - const data = Cast(presCollection.data, listSpec(Doc)); + const data = Cast(presCollection?.data, listSpec(Doc)); const presData = Cast(this.rootDoc.data, listSpec(Doc)); if (data && doc && presData) { data.push(doc); DockedFrameRenderer.PinDoc(doc, false); this.gotoDocument(this.childDocs.length, this.itemIndex); + } else { + this.props.addDocTab(doc as Doc, "onRight"); } } @@ -975,7 +970,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> @computed get presentDropdown() { return ( <div className={`dropdown-play ${this.presentTools ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> - <div className="dropdown-play-button" onClick={(action(() => { this.updateMinimize; this.layoutDoc.presStatus = "manual"; this.turnOffEdit(); }))}> + <div className="dropdown-play-button" onClick={this.updateMinimize}> Minimize </div> <div className="dropdown-play-button" onClick={(action(() => { this.layoutDoc.presStatus = "manual"; this.turnOffEdit(); }))}> @@ -1108,7 +1103,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> } turnOffEdit = () => { - this.childDocs.forEach((doc, index) => { + this.childDocs.forEach((doc) => { + doc.editSnapZoomProgressivize = false; + doc.editZoomProgressivize = false; + doc.editScrollProgressivize = false; const targetDoc = Cast(doc.presentationTargetDoc, Doc, null); targetDoc.editSnapZoomProgressivize = false; targetDoc.editZoomProgressivize = false; @@ -1596,63 +1594,31 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); if (activeItem) { return ( - <div id="toolbarContainer" className={'presBox-toolbar'} style={{ display: this.layoutDoc.presStatus !== 'auto' && this.layoutDoc.presStatus !== 'manual' ? "inline-flex" : "none" }}> - <Tooltip title={<><div className="dash-tooltip">{"Add new slide"}</div></>}><div className={`toolbar-button ${this.newDocumentTools ? "active" : ""}`} onClick={action(() => this.newDocumentTools = !this.newDocumentTools)}><FontAwesomeIcon icon={"plus"} /> + <div id="toolbarContainer" className={'presBox-toolbar'} style={{ display: this.layoutDoc.presStatus === "edit" ? "inline-flex" : "none" }}> + <Tooltip title={<><div className="dash-tooltip">{"Add new slide"}</div></>}><div className={`toolbar-button ${this.newDocumentTools ? "active" : ""}`} onClick={action(() => this.newDocumentTools = !this.newDocumentTools)}> + <FontAwesomeIcon icon={"plus"} /> <FontAwesomeIcon className={`dropdown ${this.newDocumentTools ? "active" : ""}`} icon={"angle-down"} /> </div></Tooltip> <div className="toolbar-divider" /> <Tooltip title={<><div className="dash-tooltip">{"View paths"}</div></>}><div className={`toolbar-button ${this.pathBoolean ? "active" : ""}`}> - <FontAwesomeIcon icon={"exchange-alt"} onClick={this.viewPaths} /> + <FontAwesomeIcon icon={"exchange-alt"} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined} /> </div></Tooltip> <Tooltip title={<><div className="dash-tooltip">{this.expandBoolean ? "Minimize all" : "Expand all"}</div></>}> <div className={`toolbar-button ${this.expandBoolean ? "active" : ""}`} onClick={() => { this.toggleExpand(); this.childDocs.forEach((doc, ind) => { if (this.expandBoolean) doc.presExpandInlineButton = true; else doc.presExpandInlineButton = false; }); }}> <FontAwesomeIcon icon={"eye"} /> </div> </Tooltip> - {/* <div className="toolbar-button"><FontAwesomeIcon title={"Portal"} icon={"eye"} onClick={this.toolbarTest} /></div> */} - <div className="toolbar-divider" /> - {/* <Tooltip title={<><div className="dash-tooltip">{"Transitions"}</div></>}><div className={`toolbar-button ${this.transitionTools ? "active" : ""}`} onClick={this.toggleTransitionTools}> - <FontAwesomeIcon icon={"rocket"} /> - <div style={{ display: this.props.PanelWidth() > 430 ? "block" : "none" }} className="toolbar-buttonText"> Transitions</div> - <FontAwesomeIcon className={`dropdown ${this.transitionTools ? "active" : ""}`} icon={"angle-down"} /> - </div></Tooltip> <div className="toolbar-divider" /> - <Tooltip title={<><div className="dash-tooltip">{"Progressivize"}</div></>}><div className={`toolbar-button ${this.progressivizeTools ? "active" : ""}`} onClick={this.toggleProgressivize}> - <FontAwesomeIcon icon={"tasks"} /> - <div style={{ display: this.props.PanelWidth() > 430 ? "block" : "none" }} className="toolbar-buttonText"> Progressivize</div> - <FontAwesomeIcon className={`dropdown ${this.progressivizeTools ? "active" : ""}`} icon={"angle-down"} /> - </div></Tooltip> - <div className="toolbar-divider" /> */} - {/* <div className="toolbar-button" style={{ position: 'absolute', right: 23, transform: 'rotate(45deg)', fontSize: 16 }}> - <FontAwesomeIcon className={"toolbar-thumbtack"} icon={"thumbtack"} /> - </div> - <div className={`toolbar-button ${this.moreInfoTools ? "active" : ""}`} onClick={this.toggleMoreInfo}> - <div className={`toolbar-moreInfo ${this.moreInfoTools ? "active" : ""}`}> - <div className="toolbar-moreInfoBall" /> - <div className="toolbar-moreInfoBall" /> - <div className="toolbar-moreInfoBall" /> - </div> - </div> */} </div> ); } else { return ( - <> + <div id="toolbarContainer" className={'presBox-toolbar'}> <Tooltip title={<><div className="dash-tooltip">{"Add new slide"}</div></>}><div className={`toolbar-button ${this.newDocumentTools ? "active" : ""}`} onClick={action(() => this.newDocumentTools = !this.newDocumentTools)}> <FontAwesomeIcon icon={"plus"} /> <FontAwesomeIcon className={`dropdown ${this.newDocumentTools ? "active" : ""}`} icon={"angle-down"} /> </div></Tooltip> - {/* <div className="toolbar-button" style={{ position: 'absolute', right: 23, transform: 'rotate(45deg)', fontSize: 16 }}> - <FontAwesomeIcon className={"toolbar-thumbtack"} icon={"thumbtack"} /> - </div> - <div className={`toolbar-button ${this.moreInfoTools ? "active" : ""}`} onClick={this.toggleMoreInfo}> - <div className={`toolbar-moreInfo ${this.moreInfoTools ? "active" : ""}`}> - <div className="toolbar-moreInfoBall" /> - <div className="toolbar-moreInfoBall" /> - <div className="toolbar-moreInfoBall" /> - </div> - </div> */} - </> + </div> ); } } @@ -1674,13 +1640,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Stacking}>List</option> <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Carousel}>Slides</option> </select> - <div className="presBox-presentPanel"> + <div className="presBox-presentPanel" style={{ opacity: this.childDocs.length > 0 ? 1 : 0.3 }}> <span className={`presBox-button ${this.layoutDoc.presStatus === "edit" ? "present" : ""}`}> - <div className="presBox-button-left" onClick={() => this.layoutDoc.presStatus = "manual"}> + <div className="presBox-button-left" onClick={() => { if (this.childDocs.length > 0) this.layoutDoc.presStatus = "manual" }}> <FontAwesomeIcon icon={"play-circle"} /> <div style={{ display: this.props.PanelWidth() > 200 ? "inline-flex" : "none" }}> Present</div> </div> - <div className={`presBox-button-right ${this.presentTools ? "active" : ""}`} onClick={e => { e.stopPropagation; this.presentTools = !this.presentTools; }}> + <div className={`presBox-button-right ${this.presentTools ? "active" : ""}`} + onClick={(action(() => { + if (this.childDocs.length > 0) this.presentTools = !this.presentTools; + }))}> <FontAwesomeIcon className="dropdown" style={{ margin: 0, transform: this.presentTools ? 'rotate(180deg)' : 'rotate(0deg)' }} icon={"angle-down"} /> {this.presentDropdown} </div> @@ -1691,41 +1660,41 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> ); } - @computed get playButtons() { + @computed get playButtonFrames() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + return ( + <> + {targetDoc ? <div className="miniPres-button-frame" style={{ display: targetDoc.lastFrame !== undefined && targetDoc.lastFrame >= 0 ? "inline-flex" : "none" }}> + <div>{targetDoc.currentFrame}</div> + <div className="miniPres-divider" style={{ border: 'solid 0.5px white', height: '60%' }}></div> + <div>{targetDoc.lastFrame}</div> + </div> : null} + </> + ); + } + + @computed get playButtons() { // Case 1: There are still other frames and should go through all frames before going to next slide return (<div className="miniPresOverlay" style={{ display: this.layoutDoc.presStatus !== "edit" ? "inline-flex" : "none" }}> - {/* <span className={`presBox-button ${this.layoutDoc.presStatus !== "edit" ? "active" : ""}`}> - <div className="presBox-button-left" onClick={() => this.startPres(0)}> - <FontAwesomeIcon icon={"clock"} /> - <FontAwesomeIcon icon={this.layoutDoc.presStatus === "auto" ? "pause" : "play"} /> - </div> - <div className={`presBox-button-right ${this.playTools ? "active" : ""}`} onClick={e => { e.stopPropagation; this.togglePlay(); }}> - <FontAwesomeIcon className="dropdown" style={{ margin: 0, transform: this.playTools ? 'rotate(180deg)' : 'rotate(0deg)' }} icon={"angle-down"} /> - {this.playDropdown} - </div> - </span> */} <div className="miniPres-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></div> - <div className="miniPres-button" onClick={() => this.startPres(this.itemIndex)}><FontAwesomeIcon icon={PresBox.Instance.layoutDoc.presStatus === "auto" ? "pause" : "play"} /></div> + <div className="miniPres-button" onClick={() => this.startAutoPres(this.itemIndex)}><FontAwesomeIcon icon={this.layoutDoc.presStatus === "auto" ? "pause" : "play"} /></div> <div className="miniPres-button" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></div> <div className="miniPres-divider"></div> <div className="miniPres-button-text" style={{ display: this.props.PanelWidth() > 250 ? "inline-flex" : "none" }}> Slide {this.itemIndex + 1} / {this.childDocs.length} - {targetDoc ? <div className="miniPres-button-frame" style={{ display: targetDoc.lastFrame !== undefined && targetDoc.lastFrame >= 0 ? "inline-flex" : "none" }}> - <div>{targetDoc.currentFrame}</div> - <div>{targetDoc.lastFrame}</div> - </div> : null} + {this.playButtonFrames} </div> <div className="miniPres-divider"></div> - <div className="miniPres-button" onClick={() => this.layoutDoc.presStatus = "edit"}> - <FontAwesomeIcon icon={"times"} /> - </div> + {this.props.PanelWidth() > 250 ? <div className="miniPres-button-text" onClick={() => this.layoutDoc.presStatus = "edit"}>EXIT</div> + : <div className="miniPres-button" onClick={() => this.layoutDoc.presStatus = "edit"}> + <FontAwesomeIcon icon={"times"} /> + </div>} </div>); } render() { - // needed to insure that the childDocs are loaded for looking up fields + // needed to ensure that the childDocs are loaded for looking up fields this.childDocs.slice(); const mode = StrCast(this.rootDoc._viewType) as CollectionViewType; return <div onPointerOver={this.onPointerOver} onPointerLeave={this.onPointerLeave} className="presBox-cont" style={{ minWidth: this.layoutDoc.inOverlay ? 240 : undefined }} > |