From 067fe1227d1acedb78dc3a1615c15ae936f3f677 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Tue, 7 Jul 2020 17:54:33 -0500
Subject: adding apply for descriptions, author, creation date

---
 src/client/views/linking/LinkEditor.scss   | 83 +++++++++++++++++++++++-------
 src/client/views/linking/LinkEditor.tsx    | 68 +++++++++++++++++++-----
 src/client/views/linking/LinkMenu.scss     | 13 ++++-
 src/client/views/linking/LinkMenu.tsx      | 17 +++---
 src/client/views/linking/LinkMenuItem.scss |  2 +-
 src/client/views/linking/LinkMenuItem.tsx  |  3 ++
 6 files changed, 143 insertions(+), 43 deletions(-)

(limited to 'src')

diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss
index 406a38c26..937427e46 100644
--- a/src/client/views/linking/LinkEditor.scss
+++ b/src/client/views/linking/LinkEditor.scss
@@ -3,12 +3,12 @@
 .linkEditor {
     width: 100%;
     height: auto;
-    font-size: 12px; // TODO
+    font-size: 13px; // TODO
     user-select: none;
 }
 
 .linkEditor-button-back {
-    margin-bottom: 6px;
+    //margin-bottom: 6px;
     border-radius: 10px;
     width: 18px;
     height: 18px;
@@ -17,12 +17,13 @@
 
 .linkEditor-info {
     //border-bottom: 0.5px solid $light-color-secondary;
-    padding-bottom: 4px;
+    //padding-bottom: 1px;
     padding-top: 5px;
     padding-left: 5px;
     //margin-bottom: 6px;
     display: flex;
     justify-content: space-between;
+    color: black;
 
     .linkEditor-linkedTo {
         width: calc(100% - 26px);
@@ -31,30 +32,65 @@
     }
 }
 
+.linkEditor-moreInfo {
+    margin-left: 12px;
+    padding-left: 13px;
+    padding-right: 6.5px;
+    padding-bottom: 4px;
+    font-size: 9px;
+    //font-style: italic;
+    text-decoration-color: grey;
+}
+
 .linkEditor-description {
     padding-left: 6.5px;
     padding-right: 6.5px;
     padding-bottom: 3.5px;
 
-    .linkEditor-description-text {
-        text-decoration-color: grey;
+    .linkEditor-description-label {
+        text-decoration-color: black;
+        color: black;
     }
 
     .linkEditor-description-input {
-        border: 1px solid grey;
-        border-radius: 4px;
-        background-color: rgb(236, 236, 236);
-        padding-left: 2px;
-        padding-right: 2px;
-        color: grey;
-        text-decoration-color: grey;
+        display: flex;
+
+        .linkEditor-description-editing {
+            min-width: 85%;
+            //border: 1px solid grey;
+            //border-radius: 4px;
+            padding-left: 2px;
+            padding-right: 2px;
+            margin-right: 4px;
+            color: black;
+            text-decoration-color: grey;
+        }
+
+        .linkEditor-description-add-button {
+            display: inline;
+            /* float: right; */
+            border-radius: 9px;
+            font-size: 9px;
+            background-color: black;
+            /* padding: 3px; */
+            padding-top: 4px;
+            padding-left: 3px;
+            padding-bottom: 4px;
+            padding-right: 5px;
+            height: 80%;
+            color: white;
+        }
     }
 }
 
 .linkEditor-followingDropdown {
     padding-left: 6.5px;
     padding-right: 6.5px;
-    padding-bottom: 3.5px;
+    padding-bottom: 6px;
+
+    .linkEditor-followingDropdown-label {
+        color: black;
+    }
 
     .linkEditor-followingDropdown-dropdown {
 
@@ -62,11 +98,11 @@
 
             border: 1px solid grey;
             border-radius: 4px;
-            background-color: rgb(236, 236, 236);
+            //background-color: rgb(236, 236, 236);
             padding-left: 2px;
             padding-right: 2px;
-            color: grey;
-            text-decoration-color: grey;
+            text-decoration-color: black;
+            color: black;
 
             .linkEditor-followingDropdown-icon {
                 float: right;
@@ -77,17 +113,22 @@
             padding-left: 3px;
             padding-right: 3px;
 
+            &:last-child {
+                border-bottom: none;
+            }
+
             .linkEditor-followingDropdown-option {
-                border: 0.25px dotted grey;
-                background-color: rgb(236, 236, 236);
+                border: 0.25px solid grey;
+                //background-color: rgb(236, 236, 236);
                 padding-left: 2px;
                 padding-right: 2px;
                 color: grey;
                 text-decoration-color: grey;
                 font-size: 9px;
+                border-top: none;
 
                 &:hover {
-                    background-color: rgb(211, 210, 210);
+                    background-color: rgb(187, 220, 231);
                 }
             }
 
@@ -98,6 +139,10 @@
 }
 
 
+
+
+
+
 .linkEditor-button,
 .linkEditor-addbutton {
     width: 18px;
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index 014d57ed0..7af11bca1 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -1,10 +1,10 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faArrowLeft, faCog, faEllipsisV, faExchangeAlt, faPlus, faTable, faTimes, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, observable, computed } from "mobx";
+import { action, observable, computed, toJS } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, Opt } from "../../../fields/Doc";
-import { StrCast } from "../../../fields/Types";
+import { StrCast, DateCast } from "../../../fields/Types";
 import { Utils } from "../../../Utils";
 import { LinkManager } from "../../util/LinkManager";
 import './LinkEditor.scss';
@@ -291,6 +291,10 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
 
     @observable followBehavior = this.props.linkDoc.follow ? this.props.linkDoc.follow : "Default";
 
+    @observable showInfo: boolean = false;
+
+    @computed get infoIcon() { if (this.showInfo) { return "chevron-up"; } return "chevron-down"; }
+
 
     //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION";
 
@@ -308,19 +312,44 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
         }
     }
 
+    @action
+    onKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Enter") {
+            this.setDescripValue(this.description);
+            document.getElementById('input')?.blur();
+        }
+    }
+
+    @action
+    onDown = () => {
+        this.setDescripValue(this.description);
+    }
+
+    @action
+    handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this.description = e.target.value;
+    }
+
+
     @computed
     get editDescription() {
         return <div className="linkEditor-description">
             <div className="linkEditor-description-label">
-                Link Description:</div>
+                Link Label:</div>
             <div className="linkEditor-description-input">
-                <EditableView
-                    GetValue={() => StrCast(LinkManager.currentLink?.description)}
-                    SetValue={value => { this.setDescripValue(value); return false; }}
-                    contents={LinkManager.currentLink?.description}
-                    placeholder={"(optional) enter link description"}
-                    color={"rgb(88, 88, 88)"}
-                ></EditableView></div></div>;
+                <div className="linkEditor-description-editing">
+                    <input
+                        id="input"
+                        value={this.description}
+                        placeholder={"enter link label"}
+                        // color={"rgb(88, 88, 88)"}
+                        onKeyDown={this.onKey}
+                        onChange={this.handleChange}
+                    ></input>
+                </div>
+                <div className="linkEditor-description-add-button"
+                    onPointerDown={this.onDown}>Add</div>
+            </div></div>;
     }
 
     @action
@@ -346,7 +375,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                     {this.followBehavior}
                     <FontAwesomeIcon className="linkEditor-followingDropdown-icon"
                         icon={this.openDropdown ? "chevron-up" : "chevron-down"}
-                        size={"lg"} onPointerDown={this.changeDropdown} />
+                        size={"lg"} />
                 </div>
                 <div className="linkEditor-followingDropdown-optionsList"
                     style={{ display: this.openDropdown ? "" : "none" }}>
@@ -367,6 +396,11 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
         </div>;
     }
 
+    @action
+    changeInfo = () => {
+        this.showInfo = !this.showInfo;
+    }
+
     render() {
         const destination = LinkManager.Instance.getOppositeAnchor(this.props.linkDoc, this.props.sourceDoc);
 
@@ -382,11 +416,17 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                         style={{ display: this.props.hideback ? "none" : "" }}
                         onClick={this.props.showLinks}>
                         <FontAwesomeIcon icon="arrow-left" size="sm" /> </button>
-                    <p className="linkEditor-linkedTo">editing link to: <b>{
+                    <p className="linkEditor-linkedTo">Editing Link to: <b>{
                         destination.proto?.title ?? destination.title ?? "untitled"}</b></p>
-                    <button className="linkEditor-button" onPointerDown={() => this.deleteLink()} title="Delete link">
-                        <FontAwesomeIcon icon="trash" size="sm" /></button>
+                    {/* <button className="linkEditor-button" onPointerDown={() => this.deleteLink()} title="Delete link">
+                        <FontAwesomeIcon icon="trash" size="sm" /></button> */}
+                    <FontAwesomeIcon icon={this.infoIcon} size="lg" onPointerDown={this.changeInfo} />
                 </div>
+                {this.showInfo ? <div className="linkEditor-moreInfo">
+                    <div>{this.props.linkDoc.author ? <div> <b>Author:</b> {this.props.linkDoc.author}</div> : null}</div>
+                    <div>{this.props.linkDoc.creationDate ? <div> <b>Creation Date:</b>
+                        {DateCast(this.props.linkDoc.creationDate).toString()}</div> : null}</div>
+                </div> : null}
 
                 <div>{this.editDescription}</div>
                 <div>{this.followingDropdown}</div>
diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index 10a24c5ca..422ab0430 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -3,7 +3,8 @@
 .linkMenu {
     width: 100%;
     height: auto;
-    //border: 1px solid black;
+
+    border: 1px solid black;
 
     // &:hover {
     //     width: calc(auto + 26px);
@@ -11,9 +12,13 @@
 }
 
 .linkMenu-list {
+
     border: 1px solid black;
+
+    box-shadow: 3px 3px 1.5px grey;
+
     max-height: 170px;
-    //overflow-y: scroll;
+    overflow-y: scroll;
     position: absolute;
     z-index: 10;
     background: white;
@@ -34,6 +39,10 @@
     border-bottom: 0.5px solid lightgray;
     //@extend: 5px 0;
 
+    &:last-child {
+        border-bottom: none;
+    }
+
     .linkMenu-group-name {
         display: flex;
 
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index 064c24f7a..478ac3fe6 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -1,4 +1,4 @@
-import { action, observable } from "mobx";
+import { action, observable, computed } from "mobx";
 import { observer } from "mobx-react";
 import { DocumentView } from "../nodes/DocumentView";
 import { LinkEditor } from "./LinkEditor";
@@ -29,7 +29,14 @@ export class LinkMenu extends React.Component<Props> {
     @observable private _linkMenuRef = React.createRef<HTMLDivElement>();
     private _editorRef = React.createRef<HTMLDivElement>();
 
-    @observable private _numLinks: number = 0;
+    //@observable private _numLinks: number = 0;
+
+    // @computed get overflow() {
+    //     if (this._numLinks) {
+    //         return "scroll";
+    //     }
+    //     return "auto";
+    // }
 
     @action
     onClick = (e: PointerEvent) => {
@@ -71,9 +78,6 @@ export class LinkMenu extends React.Component<Props> {
                     showEditor={action((linkDoc: Doc) => this._editingLink = linkDoc)}
                     addDocTab={this.props.addDocTab} />
             );
-            group.forEach((item) => {
-                this._numLinks++;
-            });
         });
 
         // if source doc has no links push message
@@ -82,7 +86,6 @@ export class LinkMenu extends React.Component<Props> {
         return linkItems;
     }
 
-    @action
     render() {
         const sourceDoc = this.props.docView.props.Document;
         const groups: Map<string, Doc[]> = LinkManager.Instance.getRelatedGroupedLinks(sourceDoc);
@@ -90,7 +93,7 @@ export class LinkMenu extends React.Component<Props> {
             <div className="linkMenu-list"
                 style={{
                     left: this.props.location[0], top: this.props.location[1],
-                    overflowY: this._numLinks > 4 ? "scroll" : "auto"
+                    //overflowY: "scroll",
                 }}>
                 {!this._editingLink ?
                     this.renderAllGroups(groups) :
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index df8a3cadb..8578d0b75 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -103,7 +103,7 @@
         width: 20px;
         height: 20px;
         margin: 0;
-        //margin-right: 6px;
+        margin-right: 4px;
         padding-right: 6px;
         border-radius: 50%;
         pointer-events: auto;
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 6af474513..59a88a1d9 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -78,7 +78,10 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
     @action toggleShowMore(e: React.PointerEvent) { e.stopPropagation(); this._showMore = !this._showMore; }
 
     onEdit = (e: React.PointerEvent): void => {
+
+        console.log("Edit");
         LinkManager.currentLink = this.props.linkDoc;
+        console.log(this.props.linkDoc);
         setupMoveUpEvents(this, e, this.editMoved, emptyFunction, () => this.props.showEditor(this.props.linkDoc));
     }
 
-- 
cgit v1.2.3-70-g09d2