From 9f37f932586dc213e0640e1186e5d43d9d73d734 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sat, 29 Jun 2019 15:37:13 -0400
Subject: added document previews to search results.  enbled by click now, but
 probably better activated as an option.

---
 src/client/views/pdf/PDFViewer.scss     |  3 ++
 src/client/views/pdf/PDFViewer.tsx      |  2 +-
 src/client/views/search/SearchItem.scss | 50 ++++++++++++++++++++++++++-----
 src/client/views/search/SearchItem.tsx  | 53 +++++++++++++++++++++++++++------
 4 files changed, 90 insertions(+), 18 deletions(-)

(limited to 'src')

diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss
index 11d3d7e27..0fde764d0 100644
--- a/src/client/views/pdf/PDFViewer.scss
+++ b/src/client/views/pdf/PDFViewer.scss
@@ -41,6 +41,9 @@
         }
     }
 }
+.pdfViewer-viewerCont {
+    width:100%;
+}
 
 .page-cont {
     .textLayer {
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 9e9ddbd2d..6fab390d4 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -49,7 +49,7 @@ export class PDFViewer extends React.Component<IPDFViewerProps> {
 
     render() {
         return (
-            <div ref={this._mainDiv}>
+            <div className="pdfViewer-viewerCont" ref={this._mainDiv}>
                 {!this._pdf ? (null) :
                     <Viewer pdf={this._pdf} loaded={this.props.loaded} scrollY={this.props.scrollY} parent={this.props.parent} mainCont={this._mainDiv} url={this.props.url} />}
             </div>
diff --git a/src/client/views/search/SearchItem.scss b/src/client/views/search/SearchItem.scss
index 946680f0e..b3472ddec 100644
--- a/src/client/views/search/SearchItem.scss
+++ b/src/client/views/search/SearchItem.scss
@@ -5,6 +5,7 @@
     flex-direction: row-reverse;
     justify-content: flex-end;
     height: 70px;
+    z-index: 0;
 
     .search-item {
         width: 500px;
@@ -13,6 +14,7 @@
         border-bottom-style: solid;
         padding: 10px;
         height: 70px;
+        z-index: 0;
         display: inline-block;
 
         .main-search-info {
@@ -23,16 +25,17 @@
             .search-title {
                 text-transform: uppercase;
                 text-align: left;
-                width: 80%;
+                width: 100%;
                 font-weight: bold;
             }
 
             .search-info {
                 display: flex;
                 justify-content: flex-end;
-                width: 40%;
 
                 .link-container.item {
+                    margin-left: auto;
+                    margin-right: auto;
                     height: 26px;
                     width: 26px;
                     border-radius: 13px;
@@ -41,7 +44,6 @@
                     display: flex;
                     justify-content: center;
                     align-items: center;
-                    right: 15px;
                     -webkit-transition: all 0.2s ease-in-out;
                     -moz-transition: all 0.2s ease-in-out;
                     -o-transition: all 0.2s ease-in-out;
@@ -84,19 +86,36 @@
                 .link-container.item:hover .link-extended {
                     opacity: 1;
                 }
+                
+                .icon-icons {
+                    width:50px
+                }
+                .icon-live {
+                    width:175px;
+                }
 
-                .icon {
-
+                .icon-icons, .icon-live {
+                    height:50px;
+                    margin:auto;
+                    overflow: hidden;
                     .search-type {
-                        width: 25PX;
-                        height: 25PX;
-                        display: flex;
+                        display: inline-block;
+                        width:100%;
+                        position: absolute;
                         justify-content: center;
                         align-items: center;
                         position: relative;
                         margin-right: 5px;
                     }
 
+                    .pdfBox-cont {
+                        overflow: hidden;
+
+                        img {
+                            width:100% !important;
+                            height:auto !important;
+                        }
+                    }
                     .search-type:hover+.search-label {
                         opacity: 1;
                     }
@@ -114,6 +133,18 @@
                         transition: opacity 0.2s ease-in-out;
                     }
                 }
+
+                .icon-live:hover {
+                    height:175px;
+                    .pdfBox-cont {
+                        img {
+                            width:100% !important;
+                        }
+                    }
+                }
+            }
+            .search-info:hover {
+                width:60%; 
             }
         }
     }
@@ -146,4 +177,7 @@
         // height: 100%
     }
 
+}
+.search-overview:hover {
+    z-index: 1;
 }
\ No newline at end of file
diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx
index b495975cb..d992d0fd1 100644
--- a/src/client/views/search/SearchItem.tsx
+++ b/src/client/views/search/SearchItem.tsx
@@ -2,10 +2,10 @@ import React = require("react");
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Cast, NumCast } from "../../../new_fields/Types";
+import { Cast, NumCast, StrCast } from "../../../new_fields/Types";
 import { observable, runInAction, computed, action } from "mobx";
 import { listSpec } from "../../../new_fields/Schema";
-import { Doc } from "../../../new_fields/Doc";
+import { Doc, WidthSym } from "../../../new_fields/Doc";
 import { DocumentManager } from "../../util/DocumentManager";
 import { SetupDrag } from "../../util/DragManager";
 import { SearchUtil } from "../../util/SearchUtil";
@@ -20,6 +20,10 @@ import { DocumentView } from "../nodes/DocumentView";
 import "./SelectorContextMenu.scss";
 import { SearchBox } from "./SearchBox";
 import { LinkManager } from "../../util/LinkManager";
+import { DocumentContentsView } from "../nodes/DocumentContentsView";
+import { ImageBox } from "../nodes/ImageBox";
+import { emptyFunction, returnFalse, returnOne } from "../../../Utils";
+import { Transform } from "../../util/Transform";
 
 export interface SearchItemProps {
     doc: Doc;
@@ -90,10 +94,40 @@ export class SearchItem extends React.Component<SearchItemProps> {
     onClick = () => {
         DocumentManager.Instance.jumpToDocument(this.props.doc, false);
     }
+    @observable _useIcons = true;
+    @observable _displayDim = 50;
 
     @computed
     public get DocumentIcon() {
-        let layoutresult = Cast(this.props.doc.type, "string", "");
+        let layoutresult = StrCast(this.props.doc.type);
+        if (!this._useIcons) {
+            let returnXDimension = () => this._useIcons ? 50 : 250;
+            let returnYDimension = () => this._displayDim;
+            let scale = () => returnXDimension() / NumCast(this.props.doc.nativeWidth, returnXDimension());
+            return <div
+                onPointerEnter={action(() => this._displayDim = this._useIcons ? 50 : 250)}
+                onPointerLeave={action(() => this._displayDim = this._useIcons ? 50 : 250)} >
+                <DocumentView
+                    Document={this.props.doc}
+                    addDocument={returnFalse}
+                    removeDocument={returnFalse}
+                    ScreenToLocalTransform={Transform.Identity}
+                    addDocTab={returnFalse}
+                    renderDepth={1}
+                    PanelWidth={returnXDimension}
+                    PanelHeight={returnYDimension}
+                    focus={emptyFunction}
+                    selectOnLoad={false}
+                    parentActive={returnFalse}
+                    whenActiveChanged={returnFalse}
+                    bringToFront={emptyFunction}
+                    zoomToScale={emptyFunction}
+                    getScale={returnOne}
+                    ContainingCollectionView={undefined}
+                    ContentScaling={scale}
+                />
+            </div>
+        }
 
         let button = layoutresult.indexOf(DocTypes.PDF) !== -1 ? faFilePdf :
             layoutresult.indexOf(DocTypes.IMG) !== -1 ? faImage :
@@ -131,7 +165,8 @@ export class SearchItem extends React.Component<SearchItemProps> {
         return num.toString() + " links";
     }
 
-    pointerDown = (e: React.PointerEvent) => { SearchBox.Instance.openSearch(e); };
+    @action
+    pointerDown = (e: React.PointerEvent) => { this._useIcons = !this._useIcons; SearchBox.Instance.openSearch(e); };
 
     highlightDoc = (e: React.PointerEvent) => {
         if (this.props.doc.type === DocTypes.LINK) {
@@ -176,15 +211,15 @@ export class SearchItem extends React.Component<SearchItemProps> {
                 }} >
                     <div className="main-search-info">
                         <div className="search-title" id="result" >{this.props.doc.title}</div>
-                        <div className="search-info">
+                        <div className="search-info" style={{ width: this._useIcons ? "15%" : "400px" }}>
+                            <div className={`icon-${this._useIcons ? "icons" : "live"}`}>
+                                <div className="search-type" >{this.DocumentIcon}</div>
+                                <div className="search-label">{this.props.doc.type}</div>
+                            </div>
                             <div className="link-container item">
                                 <div className="link-count">{this.linkCount}</div>
                                 <div className="link-extended">{this.linkString}</div>
                             </div>
-                            <div className="icon">
-                                <div className="search-type" >{this.DocumentIcon}</div>
-                                <div className="search-label">{this.props.doc.type}</div>
-                            </div>
                         </div>
                     </div>
                 </div>
-- 
cgit v1.2.3-70-g09d2