diff options
| -rw-r--r-- | src/client/documents/Documents.ts | 1 | ||||
| -rw-r--r-- | src/client/util/DocumentManager.ts | 2 | ||||
| -rw-r--r-- | src/client/views/MainView.tsx | 5 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionStackingView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 3 | ||||
| -rw-r--r-- | src/client/views/nodes/PresBox.scss | 75 | ||||
| -rw-r--r-- | src/client/views/nodes/PresBox.tsx | 148 | ||||
| -rw-r--r-- | src/client/views/presentationview/PresElementBox.scss | 118 | ||||
| -rw-r--r-- | src/client/views/presentationview/PresElementBox.tsx | 39 |
9 files changed, 311 insertions, 82 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index f81c25bab..0e44a46d9 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -130,6 +130,7 @@ export interface DocumentOptions { currentFrame?: number; // the current frame of a frame-based collection (e.g., progressive slide) lastFrame?: number; // the last frame of a frame-based collection (e.g., progressive slide) activeFrame?: number; // the active frame of a document in a frame base collection + presTransition?: number; //the time taken for the transition TO a document borderRounding?: string; boxShadow?: string; dontRegisterChildViews?: boolean; diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index 1fa5faeb3..e43c3acb9 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -174,7 +174,7 @@ export class DocumentManager { const targetDocContextView = getFirstDocView(targetDocContext); targetDocContext._scrollY = 0; // this will force PDFs to activate and load their annotations / allow scrolling if (targetDocContextView) { // we found a context view and aren't forced to create a new one ... focus on the context first.. - targetDocContext._viewTransition = "transform 500ms"; + targetDocContext._viewTransition = "transform 10000ms"; targetDocContextView.props.focus(targetDocContextView.props.Document, willZoom); // now find the target document within the context diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 15f818d1f..e961e2e5c 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -5,7 +5,8 @@ import { faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTimesCircle, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight, + faAngleDown, faAngleUp, faSearchPlus } from '@fortawesome/free-solid-svg-icons'; import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -143,7 +144,7 @@ export class MainView extends React.Component { faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTrashAlt, faAngleRight, faBell, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight); + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight, faAngleDown, faAngleUp, faSearchPlus); this.initEventListeners(); this.initAuthenticationRouters(); } diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 9d8790dda..ced234850 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -184,7 +184,7 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) if (found) { const top = found.getBoundingClientRect().top; const localTop = this.props.ScreenToLocalTransform().transformPoint(0, top); - smoothScroll(500, this._mainCont!, localTop[1] + this._mainCont!.scrollTop); + smoothScroll(doc.presTransition ? Number(doc.presTransition) : 500, this._mainCont!, localTop[1] + this._mainCont!.scrollTop); } afterFocus && setTimeout(() => { if (afterFocus?.()) { } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index b81e400b3..9069097e6 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -907,7 +907,8 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P // !doc.z && NumCast(this.layoutDoc.scale) < 1 && this.scaleAtPt(DocumentView._focusHack, 1); // [NumCast(doc.x), NumCast(doc.y)], 1); // } else { if (DocListCast(this.dataDoc[this.props.fieldKey]).includes(doc)) { - if (!doc.z) this.setPan(newPanX, newPanY, "transform 500ms", true); // docs that are floating in their collection can't be panned to from their collection -- need to propagate the pan to a parent freeform somehow + // glr: freeform transform speed can be set through user by adjusting for presentation transform + if (!doc.z) this.setPan(newPanX, newPanY, doc.presTransition ? `transform ${doc.presTransition}ms` : "transform 500ms", true); // docs that are floating in their collection can't be panned to from their collection -- need to propagate the pan to a parent freeform somehow } Doc.BrushDoc(this.props.Document); this.props.focus(this.props.Document); diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 9f6af1bde..9c2daf5d3 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -1,5 +1,6 @@ .presBox-cont { position: absolute; + display: block; pointer-events: inherit; z-index: 2; box-shadow: #AAAAAA .2vw .2vw .4vw; @@ -12,12 +13,82 @@ transition: 0.7s opacity ease; .presBox-listCont { - position: absolute; + position: relative; height: calc(100% - 25px); width: 100%; + margin-top: 10px; + } + + .presBox-highlight { + position: absolute; + top: 0; + height: 0; + width: 100%; + margin-top: 10px; + background-color: #ffe4b3; + } + + .presBox-toolbar { + position: relative; + display: inline-flex; + align-items: center; + height: 30px; + width: 100%; + color: white; + background-color: #323232; + + .toolbar-button { + margin-left: 10px; + margin-right: 10px; + letter-spacing: 0; + display: flex; + align-items: center; + + .toolbar-dropdown { + margin-left: 5px; + } + + .toolbar-transitionTools { + display: none; + } + + .toolbar-transitionTools.active { + position: absolute; + display: block; + top: 30px; + transform: translate(-10px, 0px); + border-top: solid 3px grey; + background-color: #323232; + width: 105px; + height: max-content; + z-index: 100; + + .toolbar-transitionButtons { + display: block; + + .toolbar-transition { + display: flex; + font-size: 10; + width: 100; + background-color: rgba(0, 0, 0, 0); + min-width: max-content; + + .toolbar-icon { + margin-right: 5px; + } + } + } + } + } + + .toolbar-divider { + border-left: 1px solid white; + height: 80%; + } } .presBox-buttons { + position: relative; width: 100%; background: gray; padding-top: 5px; @@ -126,4 +197,4 @@ .select { font-size: 100%; } -}
\ No newline at end of file +} diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 8818d375e..736551443 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -9,7 +9,7 @@ import { returnFalse, returnOne } from "../../../Utils"; import { documentSchema } from "../../../fields/documentSchemas"; import { DocumentManager } from "../../util/DocumentManager"; import { undoBatch } from "../../util/UndoManager"; -import { CollectionDockingView } from "../collections/CollectionDockingView"; +import { CollectionDockingView, DockedFrameRenderer } from "../collections/CollectionDockingView"; import { CollectionView, CollectionViewType } from "../collections/CollectionView"; import { FieldView, FieldViewProps } from './FieldView'; import "./PresBox.scss"; @@ -20,6 +20,8 @@ import { PrefetchProxy } from "../../../fields/Proxy"; import { ScriptField } from "../../../fields/ScriptField"; import { Scripting } from "../../util/Scripting"; import { InkingStroke } from "../InkingStroke"; +import { HighlightSpanKind } from "typescript"; +import { SearchUtil } from "../../util/SearchUtil"; type PresBoxSchema = makeInterface<[typeof documentSchema]>; const PresBoxDocument = makeInterface(documentSchema); @@ -35,7 +37,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> super(props); if (!this.presElement) { // create exactly one presElmentBox template to use by any and all presentations. Doc.UserDoc().presElement = new PrefetchProxy(Docs.Create.PresElementBoxDocument({ - title: "pres element template", backgroundColor: "transparent", _xMargin: 5, _height: 46, isTemplateDoc: true, isTemplateForField: "data" + title: "pres element template", backgroundColor: "transparent", _xMargin: 0, _height: 20, isTemplateDoc: true, isTemplateForField: "data" })); // this script will be called by each presElement to get rendering-specific info that the PresBox knows about but which isn't written to the PresElement // this is a design choice -- we could write this data to the presElements which would require a reaction to keep it up to date, and it would prevent @@ -209,7 +211,23 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> this.layoutDoc.presStatus = true; this.startPresentation(index); } - + const heights: number[] = []; + this.childDocs.forEach(doc => { + if (doc.presExpandInlineButton) heights.push(155); + else heights.push(58); + }); + let sum: number = 65; + for (let i = 0; i < this.itemIndex; i++) { + sum += heights[i]; + } + const highlight = document.getElementById("presBox-hightlight"); + if (this.itemIndex === 0 && highlight) highlight.style.top = "65"; + else if (highlight) highlight.style.top = sum.toString(); + if (this.childDocs[this.itemIndex].presExpandInlineButton && highlight) highlight.style.height = "156"; + else if (highlight) highlight.style.height = "58"; + console.log(highlight?.style.top); + console.log(highlight?.className); + console.log(sum); this.navigateToElement(this.childDocs[index], fromDoc); this.hideIfNotPresented(index); this.showAfterPresented(index); @@ -296,9 +314,106 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> active = (outsideReaction?: boolean) => ((Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground) && (this.layoutDoc.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false) + + @observable private transitionTools: boolean = false; + // For toggling transition toolbar + @action + toggleTransitionTools = () => this.transitionTools = !this.transitionTools + + @undoBatch + @action + toolbarTest = () => { + const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null); + console.log("title: " + presTargetDoc.title); + console.log("index: " + this.itemIndex); + } + + @undoBatch + @action + viewLinks = () => { + const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null); + console.log(SearchUtil.GetContextsOfDocument(presTargetDoc)); + console.log(DocListCast(presTargetDoc.context)); + console.log(DocumentManager.Instance.getAllDocumentViews(presTargetDoc)); + + // if (!DocumentManager.Instance.getDocumentView(curPres)) { + // CollectionDockingView.AddRightSplit(curPres); + // } + } + + @observable private activeItem = this.itemIndex ? this.childDocs[this.itemIndex] : null; + + + /** + * The function that is called on click to turn zoom option of docs on/off. + */ + @action + onZoomDocumentClick = (e: React.MouseEvent) => { + e.stopPropagation(); + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + activeItem.presZoomButton = !activeItem.presZoomButton; + if (activeItem.presZoomButton) { + activeItem.presNavButton = false; + } + } + + /** + * The function that is called on click to turn navigation option of docs on/off. + */ + @action + onNavigateDocumentClick = (e: React.MouseEvent) => { + e.stopPropagation(); + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + activeItem.presNavButton = !activeItem.presNavButton; + if (activeItem.presNavButton) { + activeItem.presZoomButton = false; + } + } + + /** + * The function that is called on click to turn fading document after presented option on/off. + * It also makes sure that the option swithches from hide-after to this one, since both + * can't coexist. + */ + @action + onFadeDocumentAfterPresentedClick = (e: React.MouseEvent) => { + e.stopPropagation(); + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + activeItem.presFadeButton = !activeItem.presFadeButton; + if (!activeItem.presFadeButton) { + if (targetDoc) { + targetDoc.opacity = 1; + } + } else { + activeItem.presHideAfterButton = false; + if (this.rootDoc.presStatus && targetDoc) { + targetDoc.opacity = 0.5; + } + } + } + + // @computed + // transitionTimer = (doc: Doc) => { + // const slider: HTMLInputElement = document.getElementById("toolbar-slider"); + // // let output = document.getElementById("demo"); + // // if (output && slider) output.innerHTML = slider.value; // Display the default slider value + // const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + // const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + // targetDoc.presTransition = slider ? (Number(slider.value) * 1000) : 0.5; + // } + + setTransitionTime = (number: String) => { + const timeInMS = Number(number) * 1000; + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + if (targetDoc) targetDoc.presTransition = timeInMS; + } + + render() { // console.log("render = " + this.layoutDoc.title + " " + this.layoutDoc.presStatus); - // const presOrderedDocs = DocListCast(this.rootDoc.presOrderedDocs); + // const presOrderedDocs = DocListCast(activeItem.presOrderedDocs); // if (presOrderedDocs.length != this.childDocs.length || presOrderedDocs.some((pd, i) => pd !== this.childDocs[i])) { // this.rootDoc.presOrderedDocs = new List<Doc>(this.childDocs.slice()); // } @@ -325,6 +440,31 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> <FontAwesomeIcon icon={"arrow-right"} /> </div> </div> + <div className="presBox-highlight" id="presBox-hightlight" /> + <div className="presBox-toolbar"> + <div className="toolbar-button"><FontAwesomeIcon icon={"plus"} onClick={this.toolbarTest} /></div> + <div className="toolbar-divider" /> + <div className="toolbar-button"><FontAwesomeIcon icon={"plus"} onClick={this.viewLinks} /></div> + <div className="toolbar-button"><FontAwesomeIcon icon={"object-group"} onClick={this.toolbarTest} /></div> + <div className="toolbar-button"><FontAwesomeIcon icon={"eye"} onClick={this.toolbarTest} /></div> + <div className="toolbar-divider" /> + <div className="toolbar-button" onClick={this.toggleTransitionTools}> + Transitions <FontAwesomeIcon className="toolbar-dropdown" icon={"angle-down"} /> + <div className={`toolbar-transitionTools ${this.transitionTools ? "active" : ""}`} onPointerDown={e => e.stopPropagation()}> + <div className="toolbar-transitionButtons"> + <button title="Zoom" className={`toolbar-transition ${this.activeItem?.presZoomButton ? "active" : ""}`} onClick={this.onZoomDocumentClick}><FontAwesomeIcon className="toolbar-icon" icon={"search-plus"} onPointerDown={e => e.stopPropagation()} />Zoom</button> + <button title="Navigate" className={`toolbar-transition ${this.activeItem?.presNavButton ? "active" : ""}`} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon className="toolbar-icon" icon={"location-arrow"} onPointerDown={e => e.stopPropagation()} />Navigate</button> + <button title="Fade After" className={`toolbar-transition ${this.activeItem?.presFadeButton ? "active" : ""}`} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon className="toolbar-icon" icon={"file-download"} onPointerDown={e => e.stopPropagation()} /> Fade After</button> + <input type="range" min="0.1" max="10" defaultValue="0.5" className="toolbar-slider" id="toolbar-slider" onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.setTransitionTime(e.target.value)} /> + {/* <button title="Hide After" className={pbi + (this.rootDoc.presHideAfterButton ? "-selected" : "")} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={"file-download"} onPointerDown={e => e.stopPropagation()} /></button> */} + {/* <button title="Hide Before" className={pbi + (this.rootDoc.presHideTillShownButton ? "-selected" : "")} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={"file"} onPointerDown={e => e.stopPropagation()} /></button> + <button title="Group With Up" className={pbi + (this.rootDoc.presGroupButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.rootDoc.presGroupButton = !this.rootDoc.presGroupButton; }}><FontAwesomeIcon icon={"arrow-up"} onPointerDown={e => e.stopPropagation()} /></button> + <button title="Progressivize" className={pbi + (this.rootDoc.pres ? "-selected" : "")} onClick={this.progressivize}><FontAwesomeIcon icon={"tasks"} onPointerDown={e => e.stopPropagation()} /></button> */} + </div> + </div> + </div> + <div className="toolbar-divider" /> + </div> <div className="presBox-listCont" > {mode !== CollectionViewType.Invalid ? <CollectionView {...this.props} diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index dbe6b0d4f..6d37ede8a 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -44,45 +44,45 @@ box-shadow: black 2px 2px 5px; } -.presElementBox-closeIcon { - border-radius: 20px; - transform: scale(0.7); - position: absolute; - right: 0; - top: 0; - padding: 8px; -} - - .presElementBox-buttons { - display: flow-root; - position: relative; + display: grid; + grid-template-rows: 15px; + top: 15px; + left: -20; + position: absolute; width: 100%; height: auto; .presElementBox-interaction { - color: gray; - float: left; - padding: 0px; - width: 20px; - height: 20px; + display: none; } .presElementBox-interaction-selected { - color: white; + color: grey; + background-color: rgba(0, 0, 0, 0); float: left; padding: 0px; width: 20px; height: 20px; - border: solid 1px darkgray; } } -.presElementBox-name { +.presElementBox-number { font-size: 12px; + font-weight: 700; + left: -15; position: absolute; display: inline-block; - width: calc(100% - 45px); + overflow: hidden; +} + +.presElementBox-name { + font-size: 13px; + position: relative; + left: 10px; + top: 4px; + letter-spacing: normal; + width: calc(100% - 60px); text-overflow: ellipsis; overflow: hidden; white-space: pre; @@ -106,45 +106,41 @@ z-index: 2; } -@media only screen and (max-device-width: 480px) { - .presElementBox-buttons { - display: inline-flex; - position: absolute; - top: 0; - right: 0; - z-index: 3; - width: 50%; - - .presElementBox-interaction { - width: 50; - height: 50; - } - - .presElementBox-interaction-selected { - width: 50; - height: 50; - } - } - - .presElementBox-item { - display: inline-flex; - overflow: hidden; - } - - .presElementBox-closeIcon { - transform: scale(1.5); - right: 10; - top: 10; - } +.presElementBox-closeIcon { + position: absolute; + border-radius: 100%; + z-index: 300; + right: 3px; + top: 3px; + width: 20px; + height: 20px; + display: flex; + justify-content: center; + align-items: center; +} - .presElementBox-name { - font-size: 30px; - top: 10px; - z-index: 3; - width: 50%; - } +.presElementBox-expand { + position: absolute; + border-radius: 100%; + z-index: 300; + right: 26px; + top: 3px; + width: 20px; + height: 20px; + display: flex; + justify-content: center; + align-items: center; +} - .presElementBox-embedded { - transform: translate(0, 90px) scale(1.5); - } -}
\ No newline at end of file +.presElementBox-expand-selected { + position: absolute; + border-radius: 100%; + right: 3px; + bottom: 3px; + width: 20px; + height: 20px; + z-index: 200; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 6fd3455b6..bca63e94d 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -164,10 +164,18 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc */ ScreenToLocalListTransform = (xCord: number, yCord: number) => [xCord, yCord]; + @action + presExpandDocumentClick = () => { + const highlight = document.getElementById("presBox-hightlight"); + this.rootDoc.presExpandInlineButton = !this.rootDoc.presExpandInlineButton; + if (highlight && this.rootDoc.presExpandInlineButton) highlight.style.height = "156"; + else if (highlight && !this.rootDoc.presExpandInlineButton) highlight.style.height = "58"; + } + embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight); embedWidth = () => this.props.PanelWidth() - 20; /** - * The function that is responsible for rendering the a preview or not for this + * The function that is responsible for rendering a preview or not for this * presentation element. */ @computed get renderEmbeddedInline() { @@ -214,13 +222,25 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc style={{ outlineWidth: Doc.IsBrushed(this.targetDoc) ? `1px` : "0px", }} onClick={e => { this.props.focus(this.rootDoc); e.stopPropagation(); }}> {treecontainer ? (null) : <> - <strong className="presElementBox-name"> - {`${this.indexInPres + 1}. ${this.targetDoc?.title}`} - </strong> - <button className="presElementBox-closeIcon" onPointerDown={e => e.stopPropagation()} onClick={e => { - this.props.removeDocument?.(this.rootDoc); - e.stopPropagation(); - }}>X</button> + <div className="presElementBox-number"> + {`${this.indexInPres + 1}.`} + </div> + <div className="presElementBox-name"> + {`${this.targetDoc?.title}`} + </div> + <button + title="Close" + className="presElementBox-closeIcon" + onPointerDown={e => e.stopPropagation()} + onClick={e => { + this.props.removeDocument?.(this.rootDoc); + e.stopPropagation(); + }}> + <FontAwesomeIcon icon={"times"} onPointerDown={e => e.stopPropagation()} /> + </button> + <button title="Expand Inline" className={"presElementBox-expand" + (this.rootDoc.presExpandInlineButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); }}> + <FontAwesomeIcon icon={(this.rootDoc.presExpandInlineButton ? "angle-up" : "angle-down")} onPointerDown={e => e.stopPropagation()} /> + </button> <br /> </>} <div className="presElementBox-buttons"> @@ -229,9 +249,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc <button title="Hide Before" className={pbi + (this.rootDoc.presHideTillShownButton ? "-selected" : "")} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={"file"} onPointerDown={e => e.stopPropagation()} /></button> <button title="Fade After" className={pbi + (this.rootDoc.presFadeButton ? "-selected" : "")} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={"file-download"} onPointerDown={e => e.stopPropagation()} /></button> <button title="Hide After" className={pbi + (this.rootDoc.presHideAfterButton ? "-selected" : "")} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={"file-download"} onPointerDown={e => e.stopPropagation()} /></button> - <button title="Group With Up" className={pbi + (this.rootDoc.presGroupButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.rootDoc.presGroupButton = !this.rootDoc.presGroupButton; }}><FontAwesomeIcon icon={"arrow-up"} onPointerDown={e => e.stopPropagation()} /></button> + {/* <button title="Group With Up" className={pbi + (this.rootDoc.presGroupButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.rootDoc.presGroupButton = !this.rootDoc.presGroupButton; }}><FontAwesomeIcon icon={"arrow-up"} onPointerDown={e => e.stopPropagation()} /></button> */} <button title="Progressivize" className={pbi + (this.rootDoc.pres ? "-selected" : "")} onClick={this.progressivize}><FontAwesomeIcon icon={"tasks"} onPointerDown={e => e.stopPropagation()} /></button> - <button title="Expand Inline" className={pbi + (this.rootDoc.presExpandInlineButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.rootDoc.presExpandInlineButton = !this.rootDoc.presExpandInlineButton; }}><FontAwesomeIcon icon={"arrow-down"} onPointerDown={e => e.stopPropagation()} /></button> </div> {this.renderEmbeddedInline} </div> |