change doc preiew layout

4 files changed, 15 insertions, 25 deletions

diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index a3cce8e3c..f759aef5e 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -12,6 +12,8 @@
     padding-top: 6.5px;
     padding-bottom: 6.5px;
 
+    background-color: white;
+
 
     .linkMenu-name {
         position: relative;
@@ -103,6 +105,8 @@
 
     &:hover {
 
+        background-color: rgb(201, 239, 252);
+
         .linkMenu-item-buttons {
             display: flex;
         }
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index a07266023..05ec10f71 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -213,10 +213,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
 
                         <div className="linkMenu-text">
                             {this.props.linkDoc.linkedText ? <p className="linkMenu-source-title">
-                                Source: <b>{StrCast(this.props.linkDoc.linkedText)}</b></p> : null}
-
-                            <p className="linkMenu-source-title">
-                                Source: <b>sample text</b></p>
+                                <b>Source: {StrCast(this.props.linkDoc.linkedText)}</b></p> : null}
                             <div className="linkMenu-title-wrapper">
                                 <div className="destination-icon-wrapper" >
                                     <FontAwesomeIcon className="destination-icon" icon={destinationIcon} size="sm" /></div>
diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx
index ba075886b..be72bf60c 100644
--- a/src/client/views/nodes/ContentFittingDocumentView.tsx
+++ b/src/client/views/nodes/ContentFittingDocumentView.tsx
@@ -2,7 +2,7 @@ import React = require("react");
 import { computed } from "mobx";
 import { observer } from "mobx-react";
 import { Transform } from "nodemailer/lib/xoauth2";
-import "react-table/react-table.css";
+//import "react-table/react-table.css";
 import { Doc, HeightSym, Opt, WidthSym } from "../../../fields/Doc";
 import { ScriptField } from "../../../fields/ScriptField";
 import { Cast, NumCast, StrCast } from "../../../fields/Types";
@@ -10,7 +10,7 @@ import { TraceMobx } from "../../../fields/util";
 import { emptyFunction } from "../../../Utils";
 import { dropActionType } from "../../util/DragManager";
 import { CollectionView } from "../collections/CollectionView";
-import '../DocumentDecorations.scss';
+
 import { DocumentView, DocumentViewProps } from "../nodes/DocumentView";
 import "./ContentFittingDocumentView.scss";
 
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index 197dc8df4..079920f56 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -98,23 +98,11 @@ export class LinkDocPreview extends React.Component<Props> {
                     {this._toolTipText}
                 </div>
             </div> :
-            // <div style={{
-            //     border: "6px solid white",
-            // }}>
-            //     <div style={{ backgroundColor: "white" }}> {this._targetDoc.title}
-            //         <div className="wrapper" style={{ float: "right" }}>
-            //             <div title="Delete link" className="button" style={{ display: "inline" }} ref={this._editRef} onPointerDown={this.deleteLink}>
-            //                 <FontAwesomeIcon className="fa-icon" icon="trash" size="sm" /></div>
-            //             <div title="Follow link" className="button" style={{ display: "inline" }} onClick={this.followDefault} onContextMenu={this.onContextMenu}>
-            //                 <FontAwesomeIcon className="fa-icon" icon="arrow-right" size="sm" />
-            //             </div>
-            //         </div>
-            //     </div>
+
             <ContentFittingDocumentView
                 Document={this._targetDoc}
                 LibraryPath={emptyPath}
                 fitToBox={true}
-                backgroundColor={this.props.backgroundColor}
                 moveDocument={returnFalse}
                 rootSelected={returnFalse}
                 ScreenToLocalTransform={Transform.Identity}
@@ -128,16 +116,14 @@ export class LinkDocPreview extends React.Component<Props> {
                 ContainingCollectionDoc={undefined}
                 ContainingCollectionView={undefined}
                 renderDepth={0}
-                PanelWidth={this.width}
-                PanelHeight={this.height}
+                PanelWidth={() => this.width() - 16} //Math.min(350, NumCast(target._width, 350))}
+                PanelHeight={() => this.height() - 16} //Math.min(250, NumCast(target._height, 250))}
                 focus={emptyFunction}
                 whenActiveChanged={returnFalse}
                 bringToFront={returnFalse}
                 ContentScaling={returnOne}
                 NativeWidth={returnZero}
-                NativeHeight={returnZero}
-            />;
-        //</div>;
+                NativeHeight={returnZero} />;
     }
 
     render() {
@@ -145,7 +131,10 @@ export class LinkDocPreview extends React.Component<Props> {
             style={{
                 position: "absolute", left: this.props.location[0],
                 top: this.props.location[1], width: this.width(), height: this.height(),
-                boxShadow: "black 2px 2px 1em", zIndex: 1000
+                zIndex: 1000,
+                border: "8px solid white", borderRadius: "7px",
+                boxShadow: "3px 3px 1.5px grey",
+                borderBottom: "8px solid white", borderRight: "8px solid white"
             }}>
             {this.targetDocView}
         </div>;