more with previews

3 files changed, 42 insertions, 8 deletions

diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index 4231a3941..b9be3b64f 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -404,13 +404,37 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell {
             this._preview = false;
         } else {
             if (bool) {
-                this.props.showDoc(this._doc, this.prop.DataDoc, e.screenX, e.screenY);
+                console.log("show doc");
+                this.props.showDoc(this._doc, this.prop.DataDoc, e.screenX - 230, e.screenY - 570);
             } else {
+                console.log("no doc");
                 this.props.showDoc(undefined);
             }
         }
     }
 
+    onDown = (e: any) => {
+        this.props.changeFocusedCellByIndex(this.props.row, this.props.col);
+        this.props.setPreviewDoc(this.props.rowProps.original);
+
+        let url: string;
+        if (url = StrCast(this.props.rowProps.row.href)) {
+            try {
+                new URL(url);
+                const temp = window.open(url)!;
+                temp.blur();
+                window.focus();
+            } catch { }
+        }
+
+        const field = this.props.rowProps.original[this.props.rowProps.column.id!];
+        const doc = FieldValue(Cast(field, Doc));
+        if (typeof field === "object" && doc) this.props.setPreviewDoc(doc);
+
+        this.showPreview(true, e);
+
+    }
+
     render() {
 
         const dragRef: React.RefObject<HTMLDivElement> = React.createRef();
@@ -420,9 +444,12 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell {
 
 
             return (
-                <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}
-                    onPointerEnter={(e) => { this.showPreview(true, e); }}
-                    onPointerLeave={(e) => { this.showPreview(false, e); }}
+                <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1}
+                    //    onPointerDown={(e) => { this.onDown(e); }}
+                    // onFocus={(e) => this.showPreview(true, e)}
+                    onMouseEnter={(e) => { this.showPreview(true, e); }}
+                    // onBlur={(e) => { console.log("Blur"); this.showPreview(false, e) }}
+                    onMouseLeave={(e) => { this.showPreview(false, e); }}
                 >
 
                     <div className="collectionSchemaView-cellContents-document"
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 50971420d..6f076cbb5 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -480,6 +480,10 @@ button.add-column {
 }
 
 .collectionSchemaView-toolbar {
+    z-index: 1000;
+}
+
+.collectionSchemaView-toolbar {
     height: 30px;
     display: flex;
     justify-content: flex-end;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 196ebbdc6..574884e86 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -791,9 +791,14 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
     render() {
         const preview = "";
         return <div className="collectionSchemaView-table" onPointerDown={this.onPointerDown} onWheel={e => this.props.active(true) && e.stopPropagation()} onDrop={e => this.props.onDrop(e, {})} onContextMenu={this.onContextMenu} >
+            {this.reactTable}
+            <div className="collectionSchemaView-addRow" onClick={() => this.createRow()}>+ new</div>
             {!this._showDoc ? (null) :
-                <div onClick={() => { this.onOpenClick(); }}
-                    style={{ position: "absolute", width: 400, height: 300, transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1]}px)` }}
+                <div className="collectionSchemaView-documentPreview" //onClick={() => { this.onOpenClick(); }}
+                    style={{
+                        position: "absolute", width: 400, height: 300,
+                        transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1]}px)`
+                    }}
                     ref="overlay"><ContentFittingDocumentView
                         Document={this._showDoc}
                         DataDoc={this._showDataDoc}
@@ -820,8 +825,6 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                         ContentScaling={returnOne}>
                     </ContentFittingDocumentView>
                 </div>}
-            {this.reactTable}
-            <div className="collectionSchemaView-addRow" onClick={() => this.createRow()}>+ new</div>
         </div>;
     }
 }
\ No newline at end of file