From 9aa0e5e812dfbc67b0542c6740d43209313a37d6 Mon Sep 17 00:00:00 2001
From: geireann <geireann.lindfield@gmail.com>
Date: Tue, 17 Aug 2021 23:50:00 -0400
Subject: more updates

---
 src/client/views/linking/LinkPopup.scss |  2 +-
 src/client/views/linking/LinkPopup.tsx  |  6 ++++--
 src/client/views/nodes/FieldView.tsx    |  5 ++---
 src/client/views/pdf/AnchorMenu.tsx     | 25 ++++++++++++++++---------
 src/client/views/search/SearchBox.tsx   | 28 ++++++++++++++++++++--------
 5 files changed, 43 insertions(+), 23 deletions(-)

(limited to 'src/client/views')

diff --git a/src/client/views/linking/LinkPopup.scss b/src/client/views/linking/LinkPopup.scss
index 8ae65158d..60c9ebfcd 100644
--- a/src/client/views/linking/LinkPopup.scss
+++ b/src/client/views/linking/LinkPopup.scss
@@ -5,7 +5,7 @@
     height: 200px;
     width: 200px;
     position: absolute;
-    padding: 15px;
+    // padding: 15px;
     border-radius: 3px;
 
     input {
diff --git a/src/client/views/linking/LinkPopup.tsx b/src/client/views/linking/LinkPopup.tsx
index b5a29415f..85fd91d9f 100644
--- a/src/client/views/linking/LinkPopup.tsx
+++ b/src/client/views/linking/LinkPopup.tsx
@@ -50,7 +50,7 @@ export class LinkPopup extends React.Component<LinkPopupProps> {
         const popupVisibility = this.props.showPopup ? "block" : "none";
         return (
             <div className="linkPopup-container" style={{ display: popupVisibility }}>
-                <div className="linkPopup-url-container">
+                {/* <div className="linkPopup-url-container">
                     <input autoComplete="off" type="text" value={this.linkURL} placeholder="Enter URL..." onChange={this.onLinkChange} />
                     <button onPointerDown={e => this.makeLinkToURL(this.linkURL, "add:right")}
                         style={{ display: "block", margin: "10px auto", }}>Apply hyperlink</button>
@@ -58,7 +58,7 @@ export class LinkPopup extends React.Component<LinkPopupProps> {
                 <div className="divider">
                     <div className="line"></div>
                     <p className="divider-text">or</p>
-                </div>
+                </div> */}
                 <div className="linkPopup-document-search-container">
                     {/* <i></i>
                     <input defaultValue={""} autoComplete="off" type="text" placeholder="Search for Document..." id="search-input"
@@ -67,6 +67,8 @@ export class LinkPopup extends React.Component<LinkPopupProps> {
                     <SearchBox 
                         Document={CurrentUserUtils.MySearchPanelDoc}
                         DataDoc={CurrentUserUtils.MySearchPanelDoc}
+                        // linkFrom={}
+                        linkSearch={true}
                         fieldKey="data"
                         dropAction="move"
                         isSelected={returnTrue}
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index ebbc1138a..ee81e106a 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -2,11 +2,10 @@ import React = require("react");
 import { computed } from "mobx";
 import { observer } from "mobx-react";
 import { DateField } from "../../../fields/DateField";
-import { Doc, Field, FieldResult, Opt } from "../../../fields/Doc";
+import { Doc, Field, FieldResult } from "../../../fields/Doc";
 import { List } from "../../../fields/List";
-import { VideoField, WebField } from "../../../fields/URLField";
+import { WebField } from "../../../fields/URLField";
 import { DocumentViewSharedProps } from "./DocumentView";
-import { VideoBox } from "./VideoBox";
 
 //
 // these properties get assigned through the render() method of the DocumentView when it creates this node.
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index 55816ed52..d098791e5 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -46,6 +46,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     @observable public Status: "marquee" | "annotation" | "" = "";
 
     public OnClick: (e: PointerEvent) => void = unimplementedFunction;
+    public OnLink: (e: PointerEvent) => void = unimplementedFunction;
     public StartDrag: (e: PointerEvent, ele: HTMLElement) => void = unimplementedFunction;
     public Highlight: (color: string, isPushpin: boolean) => Opt<Doc> = (color: string, isPushpin: boolean) => undefined;
     public GetAnchor: (savedAnnotations?: ObservableMap<number, HTMLDivElement[]>) => Opt<Doc> = () => undefined;
@@ -65,7 +66,14 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
 
     componentDidMount() {
         this._disposer = reaction(() => SelectionManager.Views(),
-            selected => AnchorMenu.Instance.fadeOut(true));
+            selected => {
+                AnchorMenu.Instance.fadeOut(true)
+                this._showLinkPopup = false;
+            });
+    }
+
+    componentWillUnmount() {
+        console.log("unmount");
     }
 
     pointerDown = (e: React.PointerEvent) => {
@@ -145,14 +153,13 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                         <FontAwesomeIcon icon="comment-alt" size="lg" />
                     </button>
                 </Tooltip>,
-
-                //NOTE: link popup is currently incomplete
-                // <Tooltip key="link" title={<div className="dash-tooltip">{"Link selected text to document or URL"}</div>}>
-                //     <button className="antimodeMenu-button link" onPointerDown={this.toggleLinkPopup} style={{}}>
-                //         <FontAwesomeIcon icon="link" size="lg" />
-                //     </button>
-                // </Tooltip>,
-                // <LinkPopup showPopup={this._showLinkPopup} />
+                //NOTE: link popup is currently in progress
+                <Tooltip key="link" title={<div className="dash-tooltip">{"Link selected text to document or URL"}</div>}>
+                    <button className="antimodeMenu-button link" onPointerDown={this.toggleLinkPopup} style={{}}>
+                        <FontAwesomeIcon icon="link" size="lg" />
+                    </button>
+                </Tooltip>,
+                <LinkPopup showPopup={this._showLinkPopup}/>
             ] : [
                 <Tooltip key="trash" title={<div className="dash-tooltip">{"Remove Link Anchor"}</div>}>
                     <button className="antimodeMenu-button" onPointerDown={this.Delete}>
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 680982685..67c7fc845 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -12,21 +12,26 @@ import { ViewBoxBaseComponent } from "../DocComponent";
 import { FieldView, FieldViewProps } from '../nodes/FieldView';
 import "./SearchBox.scss";
 import { DocumentManager } from '../../util/DocumentManager';
+import { DocUtils } from '../../documents/Documents';
 
 export const searchSchema = createSchema({ 
-    Document: Doc,
-    linkSearch: Boolean 
+    Document: Doc
 });
 
 type SearchBoxDocument = makeInterface<[typeof documentSchema, typeof searchSchema]>;
 const SearchBoxDocument = makeInterface(documentSchema, searchSchema);
 
+export interface SearchBoxProps extends FieldViewProps {
+    linkSearch: boolean;
+    // linkFrom: Doc;
+}
+
 /**
  * This is the SearchBox component. It represents the search box input and results in
  * the search panel on the left side of the screen.
  */
 @observer
-export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDocument>(SearchBoxDocument) {
+export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps, SearchBoxDocument>(SearchBoxDocument) {
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(SearchBox, fieldKey); }
     public static Instance: SearchBox;
 
@@ -103,6 +108,10 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         this._selectedResult = doc;
     });
 
+    makeLink = action((doc: Doc) => {
+        DocUtils.MakeLink({doc: doc}, {doc:doc});
+    });
+
     /**
      * @param {Doc[]} docs - docs to be searched through recursively
      * @param {number, Doc => void} func - function to be called on each doc
@@ -278,6 +287,9 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     render() {
         var validResults = 0;
 
+        const isLinkSearch:boolean = this.props.linkSearch;
+
+
         const results = this._results.map(result => {
             var className = "searchBox-results-scroll-view-result";
 
@@ -288,7 +300,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
             if (this._docTypeString == "all" || this._docTypeString == result[0].type) {
                 validResults++;
                 return (
-                    <div key={result[0][Id]} onClick={() => this.onResultClick(result[0])} className={className}>
+                    <div key={result[0][Id]} onClick={isLinkSearch ? () => this.makeLink(result[0]) : () => this.onResultClick(result[0])} className={className}>
                         <div className="searchBox-result-title">
                             {result[0].title}
                         </div>
@@ -309,11 +321,11 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
         return (
             <div style={{ pointerEvents: "all" }} className="searchBox-container">
-                <div className="searchBox-bar">
-                    <select name="type" id="searchBox-type" className="searchBox-type" onChange={this.onSelectChange}>
+                 <div className="searchBox-bar" >
+                 {isLinkSearch ? (null) : <select name="type" id="searchBox-type" className="searchBox-type" onChange={this.onSelectChange}>
                         {this.selectOptions}
-                    </select>
-                    <input defaultValue={""} autoComplete="off" onChange={this.onInputChange} type="text" placeholder="Search..." id="search-input" className="searchBox-input" ref={this._inputRef} />
+                    </select>}
+                    <input defaultValue={""} autoComplete="off" onChange={this.onInputChange} type="text" placeholder="Search..." id="search-input" className="searchBox-input" style={{width: isLinkSearch ? "100%" : undefined, borderRadius: isLinkSearch ? "5px" : undefined}} ref={this._inputRef} />
                 </div >
                 <div className="searchBox-results-container">
                     <div className="searchBox-results-count">
-- 
cgit v1.2.3-70-g09d2