diff options
Diffstat (limited to 'src/client/views/collections')
| -rw-r--r-- | src/client/views/collections/CollectionMenu.tsx | 34 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionTreeView.tsx | 68 | ||||
| -rw-r--r-- | src/client/views/collections/TreeView.tsx | 2 |
3 files changed, 54 insertions, 50 deletions
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 6ffa6c279..8e03b2db2 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -42,8 +42,13 @@ import { CollectionViewType, COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { TabDocView } from "./TabDocView"; import { Colors } from "../global/globalEnums"; +interface CollectionMenuProps { + panelHeight: () => number; + panelWidth: () => number; +} + @observer -export class CollectionMenu extends AntimodeMenu<AntimodeMenuProps> { +export class CollectionMenu extends AntimodeMenu<CollectionMenuProps>{ @observable static Instance: CollectionMenu; @observable SelectedCollection: DocumentView | undefined; @@ -93,13 +98,10 @@ export class CollectionMenu extends AntimodeMenu<AntimodeMenuProps> { return new Transform(-translateX, -translateY, 1 / scale); } - panelWidth100 = () => 100; - panelHeight35 = () => 35; - @computed get contMenuButtons() { trace(); const selDoc = Doc.UserDoc().contextMenuBtns; - return !(selDoc instanceof Doc) ? (null) : <div className="collectionMenu-contMenuButtons" ref={this._docBtnRef} style={{ height: "35px" }} > + return !(selDoc instanceof Doc) ? (null) : <div className="collectionMenu-contMenuButtons" ref={this._docBtnRef} style={{ height: this.props.panelHeight() }} > <CollectionLinearView Document={selDoc} DataDoc={undefined} @@ -122,8 +124,8 @@ export class CollectionMenu extends AntimodeMenu<AntimodeMenuProps> { pinToPres={emptyFunction} removeDocument={returnFalse} ScreenToLocalTransform={this.buttonBarXf} - PanelWidth={this.panelWidth100} - PanelHeight={this.panelHeight35} + PanelWidth={this.props.panelWidth} + PanelHeight={this.props.panelHeight} renderDepth={0} focus={emptyFunction} whenChildContentsActiveChanged={emptyFunction} @@ -176,7 +178,7 @@ export class CollectionMenu extends AntimodeMenu<AntimodeMenuProps> { } } -interface CollectionMenuProps { +interface CollectionViewMenuProps { type: CollectionViewType; fieldKey: string; docView: DocumentView; @@ -185,7 +187,7 @@ interface CollectionMenuProps { const stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation(); @observer -export class CollectionViewBaseChrome extends React.Component<CollectionMenuProps> { +export class CollectionViewBaseChrome extends React.Component<CollectionViewMenuProps> { //(!)?\(\(\(doc.(\w+) && \(doc.\w+ as \w+\).includes\(\"(\w+)\"\) get document() { return this.props.docView?.props.Document; } @@ -628,14 +630,14 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp } @observer -export class CollectionDockingChrome extends React.Component<CollectionMenuProps> { +export class CollectionDockingChrome extends React.Component<CollectionViewMenuProps> { render() { return (null); } } @observer -export class CollectionFreeFormViewChrome extends React.Component<CollectionMenuProps & { isOverlay: boolean, isDoc?: boolean }> { +export class CollectionFreeFormViewChrome extends React.Component<CollectionViewMenuProps & { isOverlay: boolean, isDoc?: boolean }> { public static Instance: CollectionFreeFormViewChrome; constructor(props: any) { super(props); @@ -866,7 +868,7 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu } } @observer -export class CollectionStackingViewChrome extends React.Component<CollectionMenuProps> { +export class CollectionStackingViewChrome extends React.Component<CollectionViewMenuProps> { @observable private _currentKey: string = ""; @observable private suggestions: string[] = []; @@ -987,7 +989,7 @@ export class CollectionStackingViewChrome extends React.Component<CollectionMenu @observer -export class CollectionSchemaViewChrome extends React.Component<CollectionMenuProps> { +export class CollectionSchemaViewChrome extends React.Component<CollectionViewMenuProps> { // private _textwrapAllRows: boolean = Cast(this.document.textwrappedSchemaRows, listSpec("string"), []).length > 0; get document() { return this.props.docView.props.Document; } @@ -1035,7 +1037,7 @@ export class CollectionSchemaViewChrome extends React.Component<CollectionMenuPr } @observer -export class CollectionTreeViewChrome extends React.Component<CollectionMenuProps> { +export class CollectionTreeViewChrome extends React.Component<CollectionViewMenuProps> { get document() { return this.props.docView.props.Document; } get sortAscending() { @@ -1072,7 +1074,7 @@ export class CollectionTreeViewChrome extends React.Component<CollectionMenuProp // Enter scroll speed for 3D Carousel @observer -export class Collection3DCarouselViewChrome extends React.Component<CollectionMenuProps> { +export class Collection3DCarouselViewChrome extends React.Component<CollectionViewMenuProps> { get document() { return this.props.docView.props.Document; } @computed get scrollSpeed() { return this.document._autoScrollSpeed; @@ -1113,7 +1115,7 @@ export class Collection3DCarouselViewChrome extends React.Component<CollectionMe * Chrome for grid view. */ @observer -export class CollectionGridViewChrome extends React.Component<CollectionMenuProps> { +export class CollectionGridViewChrome extends React.Component<CollectionViewMenuProps> { private clicked: boolean = false; private entered: boolean = false; diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 4d62a1af4..624a0bf4a 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -267,16 +267,17 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll return hideTitle ? (null) : (this.outlineMode ? this.documentTitle : this.editableTitle)(this.treeChildren); } + return35 = () => 35; @computed get buttonMenu() { - const menuDoc:Doc = Cast(this.rootDoc.buttonMenuDoc, Doc, null); + const menuDoc: Doc = Cast(this.rootDoc.buttonMenuDoc, Doc, null); // To create a multibutton menu add a CollectionLinearView - if (menuDoc){ - + if (menuDoc) { + const width: number = NumCast(menuDoc._width, 30); const height: number = NumCast(menuDoc._height, 30); console.log(menuDoc.title, width, height); return (<div className="buttonMenu-docBtn" - style = {{width: width, height: height}}> + style={{ width: width, height: height }}> <DocumentView Document={menuDoc} DataDoc={menuDoc} @@ -289,8 +290,8 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll rootSelected={this.props.isSelected} removeDocument={this.props.removeDocument} ScreenToLocalTransform={Transform.Identity} - PanelWidth={() => 35} - PanelHeight={() => 35} + PanelWidth={this.return35} + PanelHeight={this.return35} renderDepth={this.props.renderDepth + 1} focus={emptyFunction} styleProvider={this.props.styleProvider} @@ -302,13 +303,14 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll docRangeFilters={this.props.docRangeFilters} searchFilterDocs={this.props.searchFilterDocs} ContainingCollectionView={undefined} - ContainingCollectionDoc={undefined} + ContainingCollectionDoc={undefined} /> </div>); } } - + @observable _explainerHeight: number = 0; + @computed get nativeWidth() { return Doc.NativeWidth(this.Document, undefined, true); } @computed get nativeHeight() { return Doc.NativeHeight(this.Document, undefined, true); } @@ -336,30 +338,30 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll const noviceExplainer = this.rootDoc.explainer; return !(this.doc instanceof Doc) || !this.treeChildren ? (null) : - <> - {this.titleBar} - <div className="collectionTreeView-container" - style={this.outlineMode ? { transform: `scale(${this.contentScaling})`, width: `calc(${100 / this.contentScaling}%)` } : {}} - onContextMenu={this.onContextMenu}> - {buttonMenu || noviceExplainer ? <div className="documentButtonMenu"> - {buttonMenu ? this.buttonMenu : null} - {Doc.UserDoc().noviceMode && noviceExplainer ? - <div className="documentExplanation"> - {noviceExplainer} - </div> - : null - } - </div> : null} - <div className="collectionTreeView-dropTarget" - style={{ background: background(), paddingLeft: `${this.paddingX()}px`, paddingRight: `${this.paddingX()}px`, paddingBottom: `${this.paddingBot()}px`, paddingTop: `${this.paddingTop()}px`, pointerEvents: pointerEvents() }} - onWheel={e => e.stopPropagation()} - onDrop={this.onTreeDrop} - ref={this.createTreeDropTarget}> - <ul className={`no-indent${this.outlineMode ? "-outline" : ""}`} > - {this.treeViewElements} - </ul> - </div > - </div> - </>; + <> + {this.titleBar} + <div className="collectionTreeView-container" + style={this.outlineMode ? { transform: `scale(${this.contentScaling})`, width: `calc(${100 / this.contentScaling}%)` } : {}} + onContextMenu={this.onContextMenu}> + {buttonMenu || noviceExplainer ? <div className="documentButtonMenu" ref={action((r: HTMLDivElement) => r && (this._explainerHeight = r.getBoundingClientRect().height))}> + {buttonMenu ? this.buttonMenu : null} + {Doc.UserDoc().noviceMode && noviceExplainer ? + <div className="documentExplanation"> + {noviceExplainer} + </div> + : null + } + </div> : null} + <div className="collectionTreeView-dropTarget" + style={{ background: background(), height: `calc(100% - ${this._explainerHeight}px)`, paddingLeft: `${this.paddingX()}px`, paddingRight: `${this.paddingX()}px`, paddingBottom: `${this.paddingBot()}px`, paddingTop: `${this.paddingTop()}px`, pointerEvents: pointerEvents() }} + onWheel={e => e.stopPropagation()} + onDrop={this.onTreeDrop} + ref={this.createTreeDropTarget}> + <ul className={`no-indent${this.outlineMode ? "-outline" : ""}`} > + {this.treeViewElements} + </ul> + </div > + </div> + </>; } }
\ No newline at end of file diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index aa7b164b0..4fc25752f 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -869,7 +869,7 @@ export class TreeView extends React.Component<TreeViewProps> { const childLayout = Doc.Layout(pair.layout); const rowHeight = () => { const aspect = Doc.NativeAspect(childLayout); - return aspect ? Math.min(childLayout[WidthSym](), rowWidth()) / aspect : childLayout[HeightSym](); + return (aspect ? Math.min(childLayout[WidthSym](), rowWidth()) / aspect : childLayout[HeightSym]()); }; return <TreeView key={child[Id]} ref={r => treeViewRefs.set(child, r ? r : undefined)} document={pair.layout} |