diff options
9 files changed, 128 insertions, 102 deletions
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 55eb6c028..5c584d270 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -221,8 +221,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { <div className="propertiesButtons-linker" style={{ backgroundColor: isPinned ? "white" : "", color: isPinned ? "black" : "white" }} onClick={e => DockedFrameRenderer.PinDoc(targetDoc, isPinned)}> - <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon="map-pin" - /> + <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon="map-pin" /> </div> <div className="propertiesButtons-title" style={{ diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 7bd79b2ef..7e096fa37 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -873,9 +873,8 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> { 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="miniPresOverlay"> <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> diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 5b41db90e..3ae94efb7 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -405,6 +405,43 @@ } } + + .propertiesView-presTrails { + border-bottom: 1px solid black; + //padding: 8.5px; + + .propertiesView-presTrails-title { + font-weight: bold; + font-size: 12.5px; + padding: 4px; + display: flex; + color: white; + padding-left: 8px; + background-color: rgb(51, 51, 51); + + &:hover { + cursor: pointer; + } + + .propertiesView-presTrails-title-icon { + float: right; + right: 0; + position: absolute; + margin-left: 2px; + margin-right: 9px; + + &:hover { + cursor: pointer; + } + } + } + + .propertiesView-presTrails-content { + font-size: 10px; + padding: 10px; + margin-left: 5px; + } + } } .inking-button { diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 89f48fc65..cef2241c9 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -71,11 +71,10 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { @observable openAppearance: boolean = true; @observable openTransform: boolean = true; //Pres Trails booleans: - @observable openAddSlide: boolean = true; - @observable openPresentationTools: boolean = true; - @observable openPresTransitions: boolean = true; - @observable openPresProgressivize: boolean = true; - @observable openSlideOptions: boolean = true; + @observable openPresTransitions: boolean = false; + @observable openPresProgressivize: boolean = false; + @observable openAddSlide: boolean = false; + @observable openSlideOptions: boolean = false; @observable inActions: boolean = false; @observable _controlBtn: boolean = false; @@ -874,6 +873,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { </div>; } if (this.isPres) { + const selectedItem: boolean = PresBox.Instance._selectedArray.length > 0; return <div className="propertiesView" style={{ width: this.props.width }} > <div className="propertiesView-title" style={{ width: this.props.width }}> Presentation @@ -890,57 +890,57 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { </div> </div> </div> - <div className="propertiesView-settings"> - <div className="propertiesView-settings-title" - onPointerDown={() => runInAction(() => { this.openAddSlide = !this.openAddSlide; })} - style={{ backgroundColor: this.openAddSlide ? "black" : "" }}> - <FontAwesomeIcon icon={"plus"} /> Add new slide - <div className="propertiesView-settings-title-icon"> - <FontAwesomeIcon icon={this.openAddSlide ? "caret-down" : "caret-right"} size="lg" color="white" /> - </div> - </div> - {this.openAddSlide ? <div className="propertiesView-settings-content"> - {PresBox.Instance.newDocumentDropdown} - </div> : null} - </div> - <div className="propertiesView-sharing"> - <div className="propertiesView-sharing-title" + {!selectedItem ? (null) : <div className="propertiesView-presTrails"> + <div className="propertiesView-presTrails-title" onPointerDown={() => runInAction(() => { this.openPresTransitions = !this.openPresTransitions; })} style={{ backgroundColor: this.openPresTransitions ? "black" : "" }}> <FontAwesomeIcon icon={"rocket"} /> Transitions - <div className="propertiesView-sharing-title-icon"> + <div className="propertiesView-presTrails-title-icon"> <FontAwesomeIcon icon={this.openPresTransitions ? "caret-down" : "caret-right"} size="lg" color="white" /> </div> </div> - {this.openPresTransitions ? <div className="propertiesView-sharing-content"> + {this.openPresTransitions ? <div className="propertiesView-presTrails-content"> {PresBox.Instance.transitionDropdown} </div> : null} - </div> - <div className="propertiesView-sharing"> - <div className="propertiesView-sharing-title" + </div>} + {!selectedItem ? (null) : <div className="propertiesView-presTrails"> + <div className="propertiesView-presTrails-title" onPointerDown={() => runInAction(() => { this.openPresProgressivize = !this.openPresProgressivize; })} style={{ backgroundColor: this.openPresProgressivize ? "black" : "" }}> <FontAwesomeIcon icon={"tasks"} /> Progressivize - <div className="propertiesView-sharing-title-icon"> + <div className="propertiesView-presTrails-title-icon"> <FontAwesomeIcon icon={this.openPresProgressivize ? "caret-down" : "caret-right"} size="lg" color="white" /> </div> </div> - {this.openPresProgressivize ? <div className="propertiesView-sharing-content"> + {this.openPresProgressivize ? <div className="propertiesView-presTrails-content"> {PresBox.Instance.progressivizeDropdown} </div> : null} - </div> - <div className="propertiesView-sharing"> - <div className="propertiesView-sharing-title" + </div>} + {!selectedItem ? (null) : <div className="propertiesView-presTrails"> + <div className="propertiesView-presTrails-title" onPointerDown={() => runInAction(() => { this.openSlideOptions = !this.openSlideOptions; })} style={{ backgroundColor: this.openSlideOptions ? "black" : "" }}> <FontAwesomeIcon icon={"cog"} /> {PresBox.Instance.stringType} options - <div className="propertiesView-sharing-title-icon"> + <div className="propertiesView-presTrails-title-icon"> <FontAwesomeIcon icon={this.openSlideOptions ? "caret-down" : "caret-right"} size="lg" color="white" /> </div> </div> - {this.openSlideOptions ? <div className="propertiesView-sharing-content"> + {this.openSlideOptions ? <div className="propertiesView-presTrails-content"> {PresBox.Instance.optionsDropdown} </div> : null} + </div>} + <div className="propertiesView-presTrails"> + <div className="propertiesView-presTrails-title" + onPointerDown={() => runInAction(() => { this.openAddSlide = !this.openAddSlide; })} + style={{ backgroundColor: this.openAddSlide ? "black" : "" }}> + <FontAwesomeIcon icon={"plus"} /> Add new slide + <div className="propertiesView-presTrails-title-icon"> + <FontAwesomeIcon icon={this.openAddSlide ? "caret-down" : "caret-right"} size="lg" color="white" /> + </div> + </div> + {this.openAddSlide ? <div className="propertiesView-presTrails-content"> + {PresBox.Instance.newDocumentDropdown} + </div> : null} </div> <div className="propertiesView-sharing"> <div className="propertiesView-sharing-title" diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 77e7924dd..a87b0e466 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -247,7 +247,7 @@ $light-background: #ececec; justify-self: left; margin-top: 5px; padding-left: 10px; - background-color: rgb(222, 222, 222); + background-color: $light-background; border: solid 1px black; min-width: 80px; max-width: 200px; @@ -272,7 +272,7 @@ $light-background: #ececec; cursor: pointer; position: relative; height: 100%; - background: #d5dce2; + background: $light-background; display: flex; align-items: center; justify-content: center; @@ -436,7 +436,7 @@ $light-background: #ececec; .presBox-dropdownOptions { position: absolute; - top: 29px; + top: 24px; left: -1px; z-index: 200; width: 85%; @@ -461,7 +461,7 @@ $light-background: #ececec; background-color: $light-background; border-radius: 5px; font-size: 10; - height: 30; + height: 25; padding-left: 5px; align-items: center; margin-top: 5px; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index efcea832d..a9daba675 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -371,11 +371,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> if (srcContext.miniPres) { srcContext.miniPres = false; CollectionDockingView.AddRightSplit(this.rootDoc); - document.removeEventListener("keydown", this.minimizeEvents, false); } else { srcContext.miniPres = true; this.props.addDocTab?.(this.rootDoc, "close"); - document.addEventListener("keydown", this.minimizeEvents, false); } } } @@ -506,20 +504,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> } } - // Key events when the minimized player is active - @action - minimizeEvents = (e: KeyboardEvent) => { - e.stopPropagation(); - e.preventDefault(); - if (e.keyCode === 27) { // Escape key - this.layoutDoc.presStatus = "edit"; - } if (e.keyCode === 37) { // left(37) / a(65) / up(38) to go back - this.back(); - } if (e.keyCode === 39) { // right (39) / d(68) / down(40) to go to next - this.next(); - } - } - // Key for when the presentaiton is active (according to Selection Manager) @action keyEvents = (e: KeyboardEvent) => { @@ -531,10 +515,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> else this.layoutDoc.presStatus = "edit"; } if ((e.metaKey || e.altKey) && e.keyCode === 65) { // Ctrl-A to select all if (this.layoutDoc.presStatus === "edit") this._selectedArray = this.childDocs; - } if (e.keyCode === 37) { // left(37) / a(65) / up(38) to go back - if (this.layoutDoc.presStatus !== "edit") this.back(); - } if (e.keyCode === 39) { // right (39) / d(68) / down(40) to go to next - if (this.layoutDoc.presStatus !== "edit") this.next(); + } if (e.keyCode === 37 || e.keyCode === 38) { // left(37) / a(65) / up(38) to go back + this.back(); + } if (e.keyCode === 39 || e.keyCode === 40) { // right (39) / d(68) / down(40) to go to next + this.next(); } if (e.keyCode === 32) { // spacebar to 'present' or autoplay if (this.layoutDoc.presStatus !== "edit") this.startAutoPres(0); else this.layoutDoc.presStatus = "manual"; @@ -720,7 +704,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> <div className="ribbon-property"> {duration} s </div> </div> <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-headers"} style={{ display: targetDoc.type === DocumentType.AUDIO ? "none" : "grid" }}> <div className="slider-text">Short</div> <div className="slider-text">Medium</div> <div className="slider-text">Long</div> @@ -814,6 +798,20 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> <div className="ribbon-doubleButton" style={{ display: "flex" }}> <div className="ribbon-button" style={{ backgroundColor: activeItem.openDocument ? "#aedef8" : "" }} onClick={() => activeItem.openDocument = !activeItem.openDocument}>Open document</div> </div> + <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.COL ? "inline-flex" : "none" }}> + <div className="ribbon-button" style={{ backgroundColor: activeItem.presPinView ? "#aedef8" : "" }} + onClick={() => { + activeItem.presPinView = !activeItem.presPinView; + if (activeItem.presPinView) { + const x = targetDoc._panX; + const y = targetDoc._panY; + const scale = targetDoc._viewScale; + activeItem.presPinViewX = x; + activeItem.presPinViewY = y; + activeItem.presPinViewScale = scale; + } + }}>Presentation pin view</div> + </div> <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.WEB ? "inline-flex" : "none" }}> <div className="ribbon-button" onClick={this.progressivizeText}>Store original website</div> </div> @@ -1592,35 +1590,26 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> @computed get toolbar() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - if (activeItem) { - return ( - <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.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-divider" /> - </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> - ); - } + return ( + <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 style={{ opacity: this.childDocs.length > 1 ? 1 : 0.3 }} className={`toolbar-button ${this.pathBoolean ? "active" : ""}`} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined}> + <FontAwesomeIcon icon={"exchange-alt"} /> + </div> + </Tooltip> + <Tooltip title={<><div className="dash-tooltip">{this.expandBoolean ? "Minimize all" : "Expand all"}</div></>}> + <div style={{ opacity: this.childDocs.length > 0 ? 1 : 0.3 }} className={`toolbar-button ${this.expandBoolean ? "active" : ""}`} onClick={() => { if (this.childDocs.length > 0) 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-divider" /> + </div> + ); } /** diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index af4bd77c7..cc37cf586 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -577,7 +577,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp const mainBulletText: string[] = []; const mainBulletList: Doc[] = []; if (list) { - const newBullets: Doc[] = this.recursiveProgressivize(1, list); + const newBullets: Doc[] = this.recursiveProgressivize(1, list)[0]; mainBulletList.push.apply(mainBulletList, newBullets); } console.log(mainBulletList.length); @@ -591,7 +591,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this.props.addDocument?.(doc); } - recursiveProgressivize = (nestDepth: number, list: HTMLCollectionOf<HTMLLIElement>, d?: number, y?: number, before?: string): Doc[] => { + recursiveProgressivize = (nestDepth: number, list: HTMLCollectionOf<HTMLLIElement>, d?: number, y?: number, before?: string): [Doc[], number] => { const mainBulletList: Doc[] = []; let b = d ? d : 0; let yLoc = y ? y : 0; @@ -607,29 +607,30 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp if (listItem.childElementCount > 1) { b++; nestCount++; - count = before ? count + nestCount + "." : nestCount + "."; yLoc += height; + count = before ? count + nestCount + "." : nestCount + "."; const text = listItem.getElementsByTagName("p")[0].innerText; const length = text.length; - const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _height: height, x: xLoc, y: 10 + (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b }); + const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _autoHeight: true, x: xLoc, y: (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b }); + // yLoc += NumCast(bullet1._height); mainBulletList.push(bullet1); const newList = this.recursiveProgressivize(nestDepth + 1, listItem.getElementsByTagName("li"), b, yLoc, count); - mainBulletList.push.apply(mainBulletList, newList); - b += newList.length; + mainBulletList.push.apply(mainBulletList, newList[0]); yLoc += newList.length * (55 - ((nestDepth + 1) * 5)); } else { b++; nestCount++; - count = before ? count + nestCount + "." : nestCount + "."; yLoc += height; + count = before ? count + nestCount + "." : nestCount + "."; const text = listItem.innerText; const length = text.length; - const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _height: height, x: xLoc, y: 10 + (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b }); + const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _autoHeight: true, x: xLoc, y: (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b }); + // yLoc += NumCast(bullet1._height); mainBulletList.push(bullet1); } } }); - return mainBulletList; + return [mainBulletList, yLoc]; } recordDictation = () => { diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 3d730d7ac..1e776384a 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -4,7 +4,7 @@ $light-background: #ececec; .presElementBox-item { display: grid; - grid-template-columns: max-content max-content max-content; + grid-template-columns: max-content max-content max-content max-content; background-color: #d5dce2; font-family: Roboto; letter-spacing: normal; @@ -122,7 +122,7 @@ $light-background: #ececec; padding-left: 10px; padding-right: 10px; letter-spacing: normal; - max-width: max-content; + width: max-content; text-overflow: ellipsis; overflow: hidden; white-space: pre; diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 816577847..a6dbb76ef 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -326,11 +326,12 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc <div className="presElementBox-number"> {`${this.indexInPres + 1}.`} </div> - <div ref={this._dragRef} className="presElementBox-name"> + <div ref={this._dragRef} className="presElementBox-name" style={{ maxWidth: (PresBox.Instance.toolbarWidth - 70) }}> {`${this.targetDoc?.title}`} </div> <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.transition}</div></Tooltip> <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.duration}</div></Tooltip> + <Tooltip title={<><div className="dash-tooltip">{"Presentation pin view"}</div></>}><div className="presElementBox-time" style={{ fontWeight: 700, display: this.rootDoc.presPinView && PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>V</div></Tooltip> <Tooltip title={<><div className="dash-tooltip">{"Remove from presentation"}</div></>}><div className="presElementBox-closeIcon" onClick={e => { |