diff options
Diffstat (limited to 'src')
11 files changed, 101 insertions, 88 deletions
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 8d931f812..77d86b2fa 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -166,6 +166,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { width={this.previewWidth} height={this.previewHeight} getTransform={this.getPreviewTransform} + CollectionDoc={this.props.CollectionView && this.props.CollectionView.props.Document} CollectionView={this.props.CollectionView} moveDocument={this.props.moveDocument} addDocument={this.props.addDocument} @@ -906,8 +907,10 @@ interface CollectionSchemaPreviewProps { width: () => number; height: () => number; ruleProvider: Doc | undefined; + focus?: (doc: Doc) => void; showOverlays?: (doc: Doc) => { title?: string, caption?: string }; CollectionView?: CollectionView | CollectionPDFView | CollectionVideoView; + CollectionDoc?: Doc; onClick?: ScriptField; getTransform: () => Transform; addDocument: (document: Doc, allowDuplicates?: boolean) => boolean; @@ -994,7 +997,7 @@ export class CollectionSchemaPreview extends React.Component<CollectionSchemaPre height: this.props.height(), width: this.props.width() }}> - <DocumentView + <DocumentView {...this.props} DataDoc={this.props.DataDocument} Document={this.props.Document} fitToBox={this.props.fitToBox} @@ -1006,7 +1009,7 @@ export class CollectionSchemaPreview extends React.Component<CollectionSchemaPre moveDocument={this.props.moveDocument} whenActiveChanged={this.props.whenActiveChanged} ContainingCollectionView={this.props.CollectionView} - ContainingCollectionDoc={this.props.CollectionView && this.props.CollectionView.props.Document} + ContainingCollectionDoc={this.props.CollectionDoc} addDocTab={this.props.addDocTab} pinToPres={this.props.pinToPres} parentActive={this.props.active} @@ -1015,7 +1018,7 @@ export class CollectionSchemaPreview extends React.Component<CollectionSchemaPre ContentScaling={this.contentScaling} PanelWidth={this.PanelWidth} PanelHeight={this.PanelHeight} - focus={emptyFunction} + focus={this.props.focus || emptyFunction} backgroundColor={returnEmptyString} bringToFront={emptyFunction} zoomToScale={emptyFunction} diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index 01d4ea2b6..74da4ef85 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -9,7 +9,7 @@ .collectionStackingView, .collectionMasonryView{ height: 100%; width: 100%; - position: absolute; + position: relative; top: 0; overflow-y: auto; flex-wrap: wrap; diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 1eeb16c4a..6712e8cfe 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -133,7 +133,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { getDisplayDoc(layoutDoc: Doc, dataDoc: Doc | undefined, dxf: () => Transform, width: () => number) { let height = () => this.getDocHeight(layoutDoc); let finalDxf = () => dxf().scale(this.columnWidth / layoutDoc[WidthSym]()); - return <CollectionSchemaPreview + return <CollectionSchemaPreview {...this.props} Document={layoutDoc} DataDocument={dataDoc} showOverlays={this.overlays} @@ -144,6 +144,8 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { width={width} height={height} getTransform={finalDxf} + focus={this.props.focus} + CollectionDoc={this.props.CollectionView && this.props.CollectionView.props.Document} CollectionView={this.props.CollectionView} addDocument={this.props.addDocument} moveDocument={this.props.moveDocument} diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index 197e57808..ab01a1086 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -8,11 +8,11 @@ box-sizing: border-box; height: 100%; width:100%; - position: absolute; + position: relative; top:0; padding-top: 20px; padding-left: 10px; - padding-right: 0px; + padding-right: 10px; background: $light-color-secondary; font-size: 13px; overflow: auto; diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index e5313f68c..a133e2c51 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -1,12 +1,13 @@ import { library } from '@fortawesome/fontawesome-svg-core'; -import { faAngleRight, faCamera, faExpand, faTrash, faBell, faCaretDown, faCaretRight, faArrowsAltH, faCaretSquareDown, faCaretSquareRight, faTrashAlt, faPlus, faMinus } from '@fortawesome/free-solid-svg-icons'; +import { faAngleRight, faArrowsAltH, faBell, faCamera, faCaretDown, faCaretRight, faCaretSquareDown, faCaretSquareRight, faExpand, faMinus, faPlus, faTrash, faTrashAlt } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable, trace, untracked } from "mobx"; +import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; -import { Doc, DocListCast, HeightSym, WidthSym, Opt, Field } from '../../../new_fields/Doc'; +import { Doc, DocListCast, Field, HeightSym, Opt, WidthSym } from '../../../new_fields/Doc'; import { Id } from '../../../new_fields/FieldSymbols'; import { List } from '../../../new_fields/List'; import { Document, listSpec } from '../../../new_fields/Schema'; +import { ComputedField, ScriptField } from '../../../new_fields/ScriptField'; import { BoolCast, Cast, NumCast, StrCast } from '../../../new_fields/Types'; import { emptyFunction, Utils } from '../../../Utils'; import { Docs, DocUtils } from '../../documents/Documents'; @@ -17,18 +18,16 @@ import { SelectionManager } from '../../util/SelectionManager'; import { Transform } from '../../util/Transform'; import { undoBatch } from '../../util/UndoManager'; import { ContextMenu } from '../ContextMenu'; +import { ContextMenuProps } from '../ContextMenuItem'; import { EditableView } from "../EditableView"; import { MainView } from '../MainView'; +import { KeyValueBox } from '../nodes/KeyValueBox'; import { Templates } from '../Templates'; import { CollectionViewType } from './CollectionBaseView'; -import { CollectionDockingView } from './CollectionDockingView'; import { CollectionSchemaPreview } from './CollectionSchemaView'; import { CollectionSubView } from "./CollectionSubView"; import "./CollectionTreeView.scss"; import React = require("react"); -import { ComputedField, ScriptField } from '../../../new_fields/ScriptField'; -import { KeyValueBox } from '../nodes/KeyValueBox'; -import { ContextMenuProps } from '../ContextMenuItem'; export interface TreeViewProps { @@ -250,8 +249,8 @@ class TreeView extends React.Component<TreeViewProps> { } docWidth = () => { let aspect = NumCast(this.props.document.nativeHeight) / NumCast(this.props.document.nativeWidth); - if (aspect) return Math.min(this.props.document[WidthSym](), Math.min(this.MAX_EMBED_HEIGHT / aspect, this.props.panelWidth() - 5)); - return NumCast(this.props.document.nativeWidth) ? Math.min(this.props.document[WidthSym](), this.props.panelWidth() - 5) : this.props.panelWidth() - 5; + if (aspect) return Math.min(this.props.document[WidthSym](), Math.min(this.MAX_EMBED_HEIGHT / aspect, this.props.panelWidth() - 20)); + return NumCast(this.props.document.nativeWidth) ? Math.min(this.props.document[WidthSym](), this.props.panelWidth() - 20) : this.props.panelWidth() - 20; } docHeight = () => { let bounds = this.boundsOfCollectionDocument; @@ -331,6 +330,7 @@ class TreeView extends React.Component<TreeViewProps> { width={this.docWidth} height={this.docHeight} getTransform={this.docTransform} + CollectionDoc={this.props.containingCollection} CollectionView={undefined} addDocument={emptyFunction as any} moveDocument={this.props.moveDocument} diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 90fa00202..6eb444dde 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -1,25 +1,23 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import { faEye } from '@fortawesome/free-regular-svg-icons'; -import { faColumns, faEllipsisV, faFingerprint, faImage, faProjectDiagram, faSignature, faSquare, faTh, faThList, faTree, faCopy } from '@fortawesome/free-solid-svg-icons'; +import { faColumns, faCopy, faEllipsisV, faFingerprint, faImage, faProjectDiagram, faSignature, faSquare, faTh, faThList, faTree } from '@fortawesome/free-solid-svg-icons'; import { action, IReactionDisposer, observable, reaction, runInAction } from 'mobx'; import { observer } from "mobx-react"; import * as React from 'react'; -import { Doc, DocListCastAsync } from '../../../new_fields/Doc'; import { Id } from '../../../new_fields/FieldSymbols'; -import { StrCast, Cast } from '../../../new_fields/Types'; +import { StrCast } from '../../../new_fields/Types'; import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils'; import { ContextMenu } from "../ContextMenu"; import { ContextMenuProps } from '../ContextMenuItem'; import { FieldView, FieldViewProps } from '../nodes/FieldView'; import { CollectionBaseView, CollectionRenderProps, CollectionViewType } from './CollectionBaseView'; import { CollectionDockingView } from "./CollectionDockingView"; +import { AddCustomFreeFormLayout } from './collectionFreeForm/CollectionFreeFormLayoutEngines'; import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; import { CollectionSchemaView } from "./CollectionSchemaView"; import { CollectionStackingView } from './CollectionStackingView'; import { CollectionTreeView } from "./CollectionTreeView"; import { CollectionViewBaseChrome } from './CollectionViewChromes'; -import { ImageField } from '../../../new_fields/URLField'; -import { AddCustomFreeFormLayout } from './collectionFreeForm/CollectionFreeFormLayoutEngines'; export const COLLECTION_BORDER_WIDTH = 2; library.add(faTh, faTree, faSquare, faProjectDiagram, faSignature, faThList, faFingerprint, faColumns, faEllipsisV, faImage, faEye as any, faCopy); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index a9699d17b..6fc809f7f 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -443,11 +443,9 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { getChildDocumentViewProps(childLayout: Doc, childData?: Doc): DocumentViewProps { return { + ...this.props, DataDoc: childData, Document: childLayout, - addDocument: this.props.addDocument, - removeDocument: this.props.removeDocument, - moveDocument: this.props.moveDocument, ruleProvider: this.Document.isRuleProvider && childLayout.type !== DocumentType.TEXT ? this.props.Document : this.props.ruleProvider, //bcz: hack! - currently ruleProviders apply to documents in nested colleciton, not direct children of themselves onClick: undefined, // this.props.onClick, // bcz: check this out -- I don't think we want to inherit click handlers, or we at least need a way to ignore them ScreenToLocalTransform: childLayout.z ? this.getTransformOverlay : this.getTransform, @@ -460,37 +458,23 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { focus: this.focusDocument, backgroundColor: this.getClusterColor, parentActive: this.props.active, - whenActiveChanged: this.props.whenActiveChanged, bringToFront: this.bringToFront, - addDocTab: this.props.addDocTab, - pinToPres: this.props.pinToPres, zoomToScale: this.zoomToScale, getScale: this.getScale }; } getDocumentViewProps(layoutDoc: Doc): DocumentViewProps { return { - DataDoc: this.props.DataDoc, - Document: this.props.Document, - addDocument: this.props.addDocument, - removeDocument: this.props.removeDocument, - moveDocument: this.props.moveDocument, - ruleProvider: this.props.ruleProvider, - onClick: this.props.onClick, + ...this.props, ScreenToLocalTransform: this.getTransform, - renderDepth: this.props.renderDepth, PanelWidth: layoutDoc[WidthSym], PanelHeight: layoutDoc[HeightSym], ContentScaling: returnOne, ContainingCollectionView: this.props.CollectionView, - ContainingCollectionDoc: this.props.ContainingCollectionDoc, focus: this.focusDocument, backgroundColor: returnEmptyString, parentActive: this.props.active, - whenActiveChanged: this.props.whenActiveChanged, bringToFront: this.bringToFront, - addDocTab: this.props.addDocTab, - pinToPres: this.props.pinToPres, zoomToScale: this.zoomToScale, getScale: this.getScale }; diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 2aadd77aa..e5a79ab11 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -15,6 +15,7 @@ pointer-events: all; .presBox-listCont { + position: relative; padding-left: 10px; padding-right: 10px; } @@ -29,5 +30,4 @@ border-radius: 5px; } } -} - +}
\ No newline at end of file diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index d3a24eb7a..ab777d534 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -2,7 +2,7 @@ import React = require("react"); import { library } from '@fortawesome/fontawesome-svg-core'; import { faArrowLeft, faArrowRight, faEdit, faMinus, faPlay, faPlus, faStop, faTimes } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { action, observable, runInAction, computed } from "mobx"; +import { action, computed, reaction, IReactionDisposer } from "mobx"; import { observer } from "mobx-react"; import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc"; import { listSpec } from "../../../new_fields/Schema"; @@ -10,12 +10,15 @@ import { Cast, FieldValue, NumCast } from "../../../new_fields/Types"; import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils"; import { DocumentManager } from "../../util/DocumentManager"; import { undoBatch } from "../../util/UndoManager"; +import { CollectionViewType } from "../collections/CollectionBaseView"; import { CollectionDockingView } from "../collections/CollectionDockingView"; +import { CollectionView } from "../collections/CollectionView"; import { ContextMenu } from "../ContextMenu"; -import "./PresBox.scss"; import { FieldView, FieldViewProps } from './FieldView'; -import { PresElementBox } from "../presentationview/PresElementBox"; -import { Id } from "../../../new_fields/FieldSymbols"; +import "./PresBox.scss"; +import { DocumentType } from "../../documents/DocumentTypes"; +import { Docs } from "../../documents/Documents"; +import { ComputedField } from "../../../new_fields/ScriptField"; library.add(faArrowLeft); library.add(faArrowRight); @@ -29,6 +32,29 @@ library.add(faEdit); @observer export class PresBox extends React.Component<FieldViewProps> { public static LayoutString(fieldKey?: string) { return FieldView.LayoutString(PresBox, fieldKey); } + _docListChangedReaction: IReactionDisposer | undefined; + componentDidMount() { + this._docListChangedReaction = reaction(() => { + const value = FieldValue(Cast(this.props.Document[this.props.fieldKey], listSpec(Doc))); + return value ? value.slice() : value; + }, () => { + const value = FieldValue(Cast(this.props.Document[this.props.fieldKey], listSpec(Doc))); + if (value) { + value.forEach((item, i) => { + if (item instanceof Doc && item.type !== DocumentType.PRESELEMENT) { + let pinDoc = Docs.Create.PresElementBoxDocument(); + Doc.GetProto(pinDoc).target = item; + Doc.GetProto(pinDoc).title = ComputedField.MakeFunction('(this.target instanceof Doc) && this.target.title.toString()'); + value.splice(i, 1, pinDoc); + } + }) + } + }); + } + + componentWillUnmount() { + this._docListChangedReaction && this._docListChangedReaction(); + } @computed get childDocs() { return DocListCast(this.props.Document[this.props.fieldKey]); } @@ -275,20 +301,14 @@ export class PresBox extends React.Component<FieldViewProps> { //directly at start. startPresentation = (startIndex: number) => { this.childDocs.map(doc => { - if (doc.hideTillShownButton) { - if (this.childDocs.indexOf(doc) > startIndex) { - doc.opacity = 0; - } + if (doc.hideTillShownButton && this.childDocs.indexOf(doc) > startIndex) { + doc.opacity = 0; } - if (doc.hideAfterButton) { - if (this.childDocs.indexOf(doc) < startIndex) { - doc.opacity = 0; - } + if (doc.hideAfterButton && this.childDocs.indexOf(doc) < startIndex) { + doc.opacity = 0; } - if (doc.fadeButton) { - if (this.childDocs.indexOf(doc) < startIndex) { - doc.opacity = 0.5; - } + if (doc.fadeButton && this.childDocs.indexOf(doc) < startIndex) { + doc.opacity = 0.5; } }); } @@ -316,8 +336,13 @@ export class PresBox extends React.Component<FieldViewProps> { * that they will be displayed in a canvas with scale 1. */ @action - initializeScaleViews = (docList: Doc[]) => { + initializeScaleViews = (docList: Doc[], viewtype: number) => { + this.props.Document.chromeStatus = "disabled"; + let hgt = (viewtype === CollectionViewType.Tree) ? 50 : 72; docList.forEach((doc: Doc) => { + doc.presBox = this.props.Document; + doc.presBoxKey = this.props.fieldKey; + doc.height = hgt; let curScale = NumCast(doc.viewScale, null); if (curScale === undefined) { doc.viewScale = 1; @@ -325,13 +350,14 @@ export class PresBox extends React.Component<FieldViewProps> { }); } + selectElement = (doc: Doc) => { let index = DocListCast(this.props.Document[this.props.fieldKey]).indexOf(doc); index !== -1 && this.gotoDocument(index, NumCast(this.props.Document.selectedDoc)); } render() { - this.initializeScaleViews(this.childDocs); + this.initializeScaleViews(this.childDocs, NumCast(this.props.Document.viewType)); return ( <div className="presBox-cont" onContextMenu={this.specificContextMenu}> <div className="presBox-buttons"> @@ -344,14 +370,9 @@ export class PresBox extends React.Component<FieldViewProps> { </div> {this.props.Document.minimizedView ? (null) : <div className="presBox-listCont" > - {this.childDocs.map(doc => - <PresElementBox key={doc[Id]} {... this.props} Document={doc} - removeDocument={this.removeDocument} - focus={this.selectElement} - presBox={this} - /> - )} - </div>} + <CollectionView {...this.props} focus={this.selectElement} /> + </div> + } </div> ); } diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index c7d846718..51f2d2ab8 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -1,6 +1,7 @@ .presElementBox-item { padding: 10px; display: inline-block; + pointer-events: all; width: 100%; outline-color: maroon; outline-style: dashed; diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 1b4c841e7..7692800c3 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -12,11 +12,11 @@ import { DocumentType } from "../../documents/DocumentTypes"; import { DragManager, dropActionType, SetupDrag } from "../../util/DragManager"; import { SelectionManager } from "../../util/SelectionManager"; import { Transform } from "../../util/Transform"; +import { CollectionViewType } from '../collections/CollectionBaseView'; import { DocumentView } from "../nodes/DocumentView"; -import React = require("react"); +import { FieldView, FieldViewProps } from '../nodes/FieldView'; import "./PresElementBox.scss"; -import { FieldViewProps, FieldView } from '../nodes/FieldView'; -import { PresBox } from '../nodes/PresBox'; +import React = require("react"); library.add(faArrowUp); @@ -25,26 +25,22 @@ library.add(faLocationArrow); library.add(fileRegular as any); library.add(faSearch); library.add(faArrowDown); - -interface PresElementProps { - presBox: PresBox; -} - /** * This class models the view a document added to presentation will have in the presentation. * It involves some functionality for its buttons and options. */ @observer -export class PresElementBox extends React.Component<PresElementProps & FieldViewProps> { +export class PresElementBox extends React.Component<FieldViewProps> { public static LayoutString() { return FieldView.LayoutString(PresElementBox); } private header?: HTMLDivElement | undefined; private listdropDisposer?: DragManager.DragDropDisposer; private presElRef: React.RefObject<HTMLDivElement> = React.createRef(); + private _embedHeight = 100; - @computed get myIndex() { return DocListCast(this.props.presBox.props.Document[this.props.presBox.props.fieldKey]).indexOf(this.props.Document) } - @computed get presentationDoc() { return this.props.presBox.props.Document; } - @computed get presentationFieldKey() { return this.props.presBox.props.fieldKey; } + @computed get myIndex() { return DocListCast(this.presentationDoc[this.presentationFieldKey]).indexOf(this.props.Document); } + @computed get presentationDoc() { return this.props.Document.presBox as Doc; } + @computed get presentationFieldKey() { return StrCast(this.props.Document.presBoxKey); } @computed get currentIndex() { return NumCast(this.presentationDoc.selectedDoc); } @computed get showButton() { return BoolCast(this.props.Document.showButton); } @computed get navButton() { return BoolCast(this.props.Document.navButton); } @@ -266,12 +262,12 @@ export class PresElementBox extends React.Component<PresElementProps & FieldView let scale = () => 175 / NumCast(this.props.Document.nativeWidth, 175); return ( <div className="presElementBox-embedded" style={{ - height: propDocHeight === 0 ? 100 : propDocHeight * scale(), + height: propDocHeight === 0 ? this._embedHeight : propDocHeight * scale(), width: propDocWidth === 0 ? "auto" : propDocWidth * scale(), }}> <DocumentView fitToBox={StrCast(this.props.Document.type).indexOf(DocumentType.COL) !== -1} - Document={this.props.Document.target as Doc} + Document={this.props.Document.target} addDocument={returnFalse} removeDocument={returnFalse} ruleProvider={undefined} @@ -300,6 +296,7 @@ export class PresElementBox extends React.Component<PresElementProps & FieldView render() { let p = this.props; + let treecontainer = this.props.ContainingCollectionDoc && this.props.ContainingCollectionDoc.viewType === CollectionViewType.Tree; let className = "presElementBox-item" + (this.currentIndex === this.myIndex ? " presElementBox-selected" : ""); let dropAction = StrCast(this.props.Document.dropAction) as dropActionType; let onItemDown = SetupDrag(this.presElRef, () => p.Document, this.move, dropAction, this.presentationDoc[Id], true); @@ -310,18 +307,25 @@ export class PresElementBox extends React.Component<PresElementProps & FieldView onPointerDown={onItemDown} style={{ outlineWidth: Doc.IsBrushed(p.Document) ? `1px` : "0px", }} onClick={e => p.focus(p.Document)}> - <strong className="presElementBox-name"> - {`${this.myIndex + 1}. ${p.Document.title}`} - </strong> - <button className="presElementBox-icon" onPointerDown={e => e.stopPropagation()} onClick={e => this.props.removeDocument && this.props.removeDocument(p.Document)}>X</button> - <br /> + {treecontainer ? (null) : <> + <strong className="presElementBox-name"> + {`${this.myIndex + 1}. ${p.Document.title}`} + </strong> + <button className="presElementBox-icon" onPointerDown={e => e.stopPropagation()} onClick={e => this.props.removeDocument && this.props.removeDocument(p.Document)}>X</button> + <br /> + </> + } <button title="Zoom" className={"presElementBox-interaction" + (this.showButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onZoomDocumentClick}><FontAwesomeIcon icon={"search"} /></button> <button title="Navigate" className={"presElementBox-interaction" + (this.navButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} /></button> <button title="Hide Til Presented" className={"presElementBox-interaction" + (this.hideTillShownButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={fileSolid} /></button> <button title="Fade After Presented" className={"presElementBox-interaction" + (this.fadeButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button> <button title="Hide After Presented" className={"presElementBox-interaction" + (this.hideAfterButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button> - <button title="Group With Up" className={"presElementBox-interaction" + (this.groupButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={action(() => this.groupButton = !this.groupButton)}> <FontAwesomeIcon icon={"arrow-up"} /> </button> - <button title="Expand Inline" className={"presElementBox-interaction" + (this.embedInline ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={action(() => this.embedInline = !this.embedInline)}><FontAwesomeIcon icon={"arrow-down"} /></button> + <button title="Group With Up" className={"presElementBox-interaction" + (this.groupButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={action((e: any) => { e.stopPropagation(); this.groupButton = !this.groupButton; })}> <FontAwesomeIcon icon={"arrow-up"} /> </button> + <button title="Expand Inline" className={"presElementBox-interaction" + (this.embedInline ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={action((e: any) => { + this.embedInline = !this.embedInline; + this.props.Document.height = NumCast(this.props.Document.height) + (this.embedInline ? 1 : -1) * this._embedHeight; + e.stopPropagation(); + })}><FontAwesomeIcon icon={"arrow-down"} /></button> <br /> {this.renderEmbeddedInline()} |