adding open button and slight change to preview in doc

3 files changed, 47 insertions, 37 deletions

diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index cbee848e6..30278db32 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -3,7 +3,7 @@ import { action, observable, trace, computed } from "mobx";
 import { observer } from "mobx-react";
 import { CellInfo } from "react-table";
 import "react-table/react-table.css";
-import { emptyFunction, returnFalse, returnZero, returnOne, returnEmptyFilter, Utils } from "../../../Utils";
+import { emptyFunction, returnFalse, returnZero, returnOne, returnEmptyFilter, Utils, emptyPath } from "../../../Utils";
 import { Doc, DocListCast, Field, Opt } from "../../../fields/Doc";
 import { Id } from "../../../fields/FieldSymbols";
 import { KeyCodes } from "../../util/KeyCodes";
@@ -31,6 +31,7 @@ import { OverlayView } from "../OverlayView";
 import { DocumentIconContainer } from "../nodes/DocumentIcon";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView";
+import ReactDOM from "react-dom";
 const path = require('path');
 
 library.add(faExpand);
@@ -344,7 +345,7 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell {
         addDocTab: this.props.addDocTab,
         pinToPres: this.props.pinToPres,
         ContentScaling: returnOne,
-        docFilters: []
+        docFilters: returnEmptyFilter
     };
     @observable private _field = this.prop.Document[this.prop.fieldKey];
     @observable private _doc = FieldValue(Cast(this._field, Doc));
@@ -388,6 +389,7 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell {
 
     @action
     onOpenClick = () => {
+        this._preview = false;
         if (this._doc) {
             this.prop.addDocTab(this._doc, "onRight");
             return true;
@@ -415,42 +417,45 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell {
 
 
             return (
-                <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}>
-                    {this._preview ? <ContentFittingDocumentView
-                        Document={this._doc}
-                        DataDoc={this.prop.DataDoc}
-                        NativeHeight={returnZero}
-                        NativeWidth={returnZero}
-                        fitToBox={true}
-                        FreezeDimensions={true}
-                        focus={emptyFunction}
-                        LibraryPath={this.prop.LibraryPath}
-                        renderDepth={this.props.renderDepth}
-                        rootSelected={() => { return false; }}
-                        PanelWidth={() => { return 200 }}
-                        PanelHeight={() => { return 200 }}
-                        ScreenToLocalTransform={this.getPreviewTransform}
-                        docFilters={this.docFilters}
-                        ContainingCollectionDoc={this.props.CollectionView?.props.Document}
-                        ContainingCollectionView={this.props.CollectionView}
-                        moveDocument={this.props.moveDocument}
-                        //addDocument={this.props.addDocument}
-                        //removeDocument={this.props.removeDocument}
-                        parentActive={this.prop.active}
-                        whenActiveChanged={this.prop.whenActiveChanged}
-                        addDocTab={this.props.addDocTab}
-                        pinToPres={this.props.pinToPres}
-                        bringToFront={returnFalse}
-                        ContentScaling={returnOne}
+                <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}
+                    onPointerEnter={() => { this.showPreview(true); }}
+                    onPointerLeave={() => { this.showPreview(false); }}>
 
-                    >
-                    </ContentFittingDocumentView> : null}
+                    {this._preview ? <div onClick={this.onOpenClick} style={{
+                        display: 'block', position: 'absolute',
+                        top: '0', bottom: '0', left: '0', right: '0', zIndex: "auto"
+                    }}
+                        ref="overlay"><ContentFittingDocumentView
+                            Document={this._doc}
+                            DataDoc={this.prop.DataDoc}
+                            NativeHeight={returnZero}
+                            NativeWidth={returnZero}
+                            fitToBox={true}
+                            FreezeDimensions={true}
+                            focus={emptyFunction}
+                            LibraryPath={this.prop.LibraryPath}
+                            renderDepth={this.props.renderDepth}
+                            rootSelected={() => false}
+                            PanelWidth={() => 150}
+                            PanelHeight={() => 150}
+                            ScreenToLocalTransform={this.getPreviewTransform}
+                            docFilters={returnEmptyFilter}
+                            ContainingCollectionDoc={this.props.CollectionView?.props.Document}
+                            ContainingCollectionView={this.props.CollectionView}
+                            moveDocument={this.props.moveDocument}
+                            parentActive={this.prop.active}
+                            whenActiveChanged={this.prop.whenActiveChanged}
+                            addDocTab={this.props.addDocTab}
+                            pinToPres={this.props.pinToPres}
+                            bringToFront={returnFalse}
+                            ContentScaling={returnOne}>
+                        </ContentFittingDocumentView></div> : null}
 
                     <div className="collectionSchemaView-cellContents-document"
                         style={{ padding: "5.9px" }}
                         onFocus={this.onFocus} onBlur={() => this._overlayDisposer?.()}
                         ref={this.dropRef}
-                        onClick={() => { this.showPreview(!this._preview) }}>
+                    >
 
                         <EditableView
                             editing={this._isEditing}
@@ -468,8 +473,8 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell {
                             })}
                         />
                     </div >
-                    <button onClick={this.onOpenClick} className="collectionSchemaView-cellContents-docButton">
-                        <FontAwesomeIcon icon="external-link-alt" size="1x" ></FontAwesomeIcon> </button>
+                    <div onClick={this.onOpenClick} className="collectionSchemaView-cellContents-docButton">
+                        <FontAwesomeIcon icon="external-link-alt" size="lg" ></FontAwesomeIcon> </div>
                 </div>
             );
         } else {
@@ -522,7 +527,8 @@ export class CollectionSchemaImageCell extends CollectionSchemaCell {
             NativeWidth: returnZero,
             addDocTab: this.props.addDocTab,
             pinToPres: this.props.pinToPres,
-            ContentScaling: returnOne
+            ContentScaling: returnOne,
+            docFilters: returnEmptyFilter
         };
 
         let image = true;
@@ -600,7 +606,8 @@ export class CollectionSchemaListCell extends CollectionSchemaCell {
         NativeWidth: returnZero,
         addDocTab: this.props.addDocTab,
         pinToPres: this.props.pinToPres,
-        ContentScaling: returnOne
+        ContentScaling: returnOne,
+        docFilters: returnEmptyFilter
     };
     @observable private _field = this.prop.Document[this.prop.fieldKey];
     @observable private _optionsList = this._field as List<any>;
diff --git a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
index b206765e8..b77173b25 100644
--- a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
+++ b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
@@ -137,6 +137,7 @@ export interface MovableRowProps {
     textWrapRow: (doc: Doc) => void;
     rowWrapped: boolean;
     dropAction: string;
+    addDocTab: any;
 }
 
 export class MovableRow extends React.Component<MovableRowProps> {
@@ -232,6 +233,7 @@ export class MovableRow extends React.Component<MovableRowProps> {
                         <div className="row-dragger">
                             <div className="row-option" onClick={undoBatch(() => this.props.removeDoc(this.props.rowInfo.original))}><FontAwesomeIcon icon="trash" size="sm" /></div>
                             <div className="row-option" style={{ cursor: "grab" }} ref={reference} onPointerDown={onItemDown}><FontAwesomeIcon icon="grip-vertical" size="sm" /></div>
+                            <div className="row-option" onClick={() => this.props.addDocTab(this.props.rowInfo.original, "onRight")}><FontAwesomeIcon icon="external-link-alt" size="sm" /></div>
                         </div>
                         {children}
                     </ReactTableDefaults.TrComponent>
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 86034376d..81dfc9c62 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -407,7 +407,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
             rowFocused: !this._headerIsEditing && rowInfo.index === this._focusedCell.row && this.props.isFocused(this.props.Document),
             textWrapRow: this.toggleTextWrapRow,
             rowWrapped: this.textWrappedRows.findIndex(id => rowInfo.original[Id] === id) > -1,
-            dropAction: StrCast(this.props.Document.childDropAction)
+            dropAction: StrCast(this.props.Document.childDropAction),
+            addDocTab: this.props.addDocTab
         };
     }