From 8264ac5484c0c7b5d47cb78ce60f5d6568e736d9 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Sat, 4 Jul 2020 17:25:10 -0500
Subject: redesigned editing menu, added link descriptions and popup on created

---
 src/client/views/nodes/DocumentLinksButton.tsx | 52 +++++++++++++++++---------
 1 file changed, 34 insertions(+), 18 deletions(-)

(limited to 'src/client/views/nodes/DocumentLinksButton.tsx')

diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index bfd860f65..5d1a68af5 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -11,6 +11,8 @@ import { DocUtils } from "../../documents/Documents";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { LinkDocPreview } from "./LinkDocPreview";
 import { LinkCreatedBox } from "./LinkCreatedBox";
+import { LinkDescriptionPopup } from "./LinkDescriptionPopup";
+import { LinkManager } from "../../util/LinkManager";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -54,6 +56,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
         return false;
     }
 
+
     onLinkButtonDown = (e: React.PointerEvent): void => {
         setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => {
             if (doubleTap && this.props.InMenu) {
@@ -87,15 +90,22 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
                     //     Doc.UnBrushDoc(this.props.View.Document);
                     // });
                 } else {
-                    DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View &&
-                        DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
-
-                    runInAction(() => {
-                        LinkCreatedBox.popupX = e.screenX;
-                        LinkCreatedBox.popupY = e.screenY - 120;
-                        LinkCreatedBox.linkCreated = true;
-                        setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
-                    });
+
+                    if (DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) {
+                        const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
+                        LinkManager.currentLink = linkDoc;
+                        runInAction(() => {
+                            LinkCreatedBox.popupX = e.screenX;
+                            LinkCreatedBox.popupY = e.screenY - 33;
+                            LinkCreatedBox.linkCreated = true;
+
+                            LinkDescriptionPopup.popupX = e.screenX;
+                            LinkDescriptionPopup.popupY = e.screenY;
+                            LinkDescriptionPopup.descriptionPopup = true;
+
+                            setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
+                        });
+                    }
                 }
             }
         }));
@@ -109,15 +119,21 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
             //     Doc.UnBrushDoc(this.props.View.Document);
             // });
         } else {
-            DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View &&
-                DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
-
-            runInAction(() => {
-                LinkCreatedBox.popupX = e.screenX;
-                LinkCreatedBox.popupY = e.screenY - 120;
-                LinkCreatedBox.linkCreated = true;
-                setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
-            });
+            if (DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) {
+                const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
+                LinkManager.currentLink = linkDoc;
+                runInAction(() => {
+                    LinkCreatedBox.popupX = e.screenX;
+                    LinkCreatedBox.popupY = e.screenY - 33;
+                    LinkCreatedBox.linkCreated = true;
+
+                    LinkDescriptionPopup.popupX = e.screenX;
+                    LinkDescriptionPopup.popupY = e.screenY;
+                    LinkDescriptionPopup.descriptionPopup = true;
+
+                    setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
+                });
+            }
         }
     }
 
-- 
cgit v1.2.3-70-g09d2


From 45fb8ba4be961f8b0b28cda05ceb5023f84cdb03 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Sat, 4 Jul 2020 23:51:30 -0500
Subject: descriptions toggle and UI cleanup

---
 src/client/views/collections/CollectionLinearView.scss | 12 ++++++++++++
 src/client/views/collections/CollectionLinearView.tsx  | 14 ++++++++++++++
 src/client/views/nodes/DocumentLinksButton.tsx         | 14 ++++++++------
 src/client/views/nodes/LinkDescriptionPopup.scss       | 13 ++++++++++---
 src/client/views/nodes/LinkDescriptionPopup.tsx        |  3 +++
 5 files changed, 47 insertions(+), 9 deletions(-)

(limited to 'src/client/views/nodes/DocumentLinksButton.tsx')

diff --git a/src/client/views/collections/CollectionLinearView.scss b/src/client/views/collections/CollectionLinearView.scss
index 5ada79a28..b8b72e756 100644
--- a/src/client/views/collections/CollectionLinearView.scss
+++ b/src/client/views/collections/CollectionLinearView.scss
@@ -35,6 +35,18 @@
             font-size: 12.5px;
         }
 
+        .bottomPopup-descriptions {
+            display: inline;
+            white-space: nowrap;
+            padding-left: 8px;
+            padding-right: 8px;
+            vertical-align: middle;
+            background-color: lightgrey;
+            border-radius: 5.5px;
+            color: black;
+            margin-right: 5px;
+        }
+
         .bottomPopup-exit {
             display: inline;
             white-space: nowrap;
diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx
index 7cbe5c19d..35c28406a 100644
--- a/src/client/views/collections/CollectionLinearView.tsx
+++ b/src/client/views/collections/CollectionLinearView.tsx
@@ -15,6 +15,7 @@ import { documentSchema } from '../../../fields/documentSchemas';
 import { Id } from '../../../fields/FieldSymbols';
 import { DocumentLinksButton } from '../nodes/DocumentLinksButton';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { LinkDescriptionPopup } from '../nodes/LinkDescriptionPopup';
 
 
 type LinearDocument = makeInterface<[typeof documentSchema,]>;
@@ -89,6 +90,16 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
         DocumentLinksButton.StartLink = undefined;
     }
 
+    @action
+    changeDescriptionSetting = () => {
+        if (LinkDescriptionPopup.showDescriptions === "ON") {
+            LinkDescriptionPopup.showDescriptions = "OFF";
+            LinkDescriptionPopup.descriptionPopup = false;
+        } else {
+            LinkDescriptionPopup.showDescriptions = "ON";
+        }
+    }
+
     render() {
         const guid = Utils.GenerateGuid();
         const flexDir: any = StrCast(this.Document.flexDirection);
@@ -155,6 +166,9 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
                     onPointerDown={e => e.stopPropagation()} >
                     <span className="bottomPopup-text" >
                         Creating link from: {DocumentLinksButton.StartLink.title} </span>
+                    <span className="bottomPopup-descriptions" onClick={this.changeDescriptionSetting}
+                    > Labels: {LinkDescriptionPopup.showDescriptions ? LinkDescriptionPopup.showDescriptions : "ON"}
+                    </span>
                     <span className="bottomPopup-exit" onClick={this.exitLongLinks}
                     >Exit</span>
 
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 5d1a68af5..544f5fd7f 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -96,11 +96,11 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
                         LinkManager.currentLink = linkDoc;
                         runInAction(() => {
                             LinkCreatedBox.popupX = e.screenX;
-                            LinkCreatedBox.popupY = e.screenY - 33;
+                            LinkCreatedBox.popupY = e.screenY - 133;
                             LinkCreatedBox.linkCreated = true;
 
                             LinkDescriptionPopup.popupX = e.screenX;
-                            LinkDescriptionPopup.popupY = e.screenY;
+                            LinkDescriptionPopup.popupY = e.screenY - 100;
                             LinkDescriptionPopup.descriptionPopup = true;
 
                             setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
@@ -124,12 +124,14 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
                 LinkManager.currentLink = linkDoc;
                 runInAction(() => {
                     LinkCreatedBox.popupX = e.screenX;
-                    LinkCreatedBox.popupY = e.screenY - 33;
+                    LinkCreatedBox.popupY = e.screenY - 133;
                     LinkCreatedBox.linkCreated = true;
 
-                    LinkDescriptionPopup.popupX = e.screenX;
-                    LinkDescriptionPopup.popupY = e.screenY;
-                    LinkDescriptionPopup.descriptionPopup = true;
+                    if (LinkDescriptionPopup.showDescriptions === "ON" || !LinkDescriptionPopup.showDescriptions) {
+                        LinkDescriptionPopup.popupX = e.screenX;
+                        LinkDescriptionPopup.popupY = e.screenY - 100;
+                        LinkDescriptionPopup.descriptionPopup = true;
+                    }
 
                     setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
                 });
diff --git a/src/client/views/nodes/LinkDescriptionPopup.scss b/src/client/views/nodes/LinkDescriptionPopup.scss
index 474bd919b..54002fd1b 100644
--- a/src/client/views/nodes/LinkDescriptionPopup.scss
+++ b/src/client/views/nodes/LinkDescriptionPopup.scss
@@ -2,7 +2,7 @@
 
     display: flex;
 
-    border: 1px solid rgb(100, 100, 100);
+    border: 1px solid rgb(170, 26, 26);
 
     width: auto;
     position: absolute;
@@ -21,13 +21,19 @@
 
     .linkDescriptionPopup-input {
         float: left;
+        background-color: rgba(250, 250, 250, 0.95);
         color: rgb(100, 100, 100);
+        border: none;
+        min-width: 160px;
     }
 
     .linkDescriptionPopup-btn {
 
         float: right;
 
+        justify-content: center;
+        vertical-align: middle;
+
 
         .linkDescriptionPopup-btn-dismiss {
             background-color: white;
@@ -40,7 +46,8 @@
             font-size: 9px;
             text-align: center;
             position: relative;
-            transform: translateY(5px);
+            margin-right: 4px;
+            justify-content: center;
         }
 
         .linkDescriptionPopup-btn-add {
@@ -54,7 +61,7 @@
             font-size: 9px;
             text-align: center;
             position: relative;
-            transform: translateY(5px);
+            justify-content: center;
         }
     }
 
diff --git a/src/client/views/nodes/LinkDescriptionPopup.tsx b/src/client/views/nodes/LinkDescriptionPopup.tsx
index 078a738e7..3bb52d9fb 100644
--- a/src/client/views/nodes/LinkDescriptionPopup.tsx
+++ b/src/client/views/nodes/LinkDescriptionPopup.tsx
@@ -4,12 +4,14 @@ import "./LinkDescriptionPopup.scss";
 import { observable, action } from "mobx";
 import { EditableView } from "../EditableView";
 import { LinkManager } from "../../util/LinkManager";
+import { LinkCreatedBox } from "./LinkCreatedBox";
 
 
 @observer
 export class LinkDescriptionPopup extends React.Component<{}> {
 
     @observable public static descriptionPopup: boolean = false;
+    @observable public static showDescriptions: string = "ON";
     @observable public static popupX: number = 700;
     @observable public static popupY: number = 350;
     @observable description: string = "";
@@ -37,6 +39,7 @@ export class LinkDescriptionPopup extends React.Component<{}> {
     onClick = (e: PointerEvent) => {
         if (this.popupRef && !!!this.popupRef.current?.contains(e.target as any)) {
             LinkDescriptionPopup.descriptionPopup = false;
+            LinkCreatedBox.linkCreated = false;
         }
     }
 
-- 
cgit v1.2.3-70-g09d2


From e7326c10d2f94c11dedec1d0a280579ba8fa7af0 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Mon, 6 Jul 2020 23:48:44 -0500
Subject: andy's UI changes

---
 src/client/views/linking/LinkMenu.scss         | 4 +++-
 src/client/views/linking/LinkMenuItem.scss     | 7 ++++---
 src/client/views/linking/LinkMenuItem.tsx      | 2 +-
 src/client/views/nodes/DocumentLinksButton.tsx | 8 ++++++--
 4 files changed, 14 insertions(+), 7 deletions(-)

(limited to 'src/client/views/nodes/DocumentLinksButton.tsx')

diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index 4b9f5641a..b0c729cda 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -3,6 +3,7 @@
 .linkMenu {
     width: 100%;
     height: auto;
+    border: 1px solid black;
 
     &:hover {
         width: calc(auto + 26px);
@@ -10,11 +11,12 @@
 }
 
 .linkMenu-list {
+    border: 1px solid black;
     max-height: 200px;
     overflow-y: scroll;
     position: absolute;
     z-index: 10;
-    background: $link-color;
+    background: white;
     min-width: 150px;
     border-radius: 5px;
     padding-top: 6.5px;
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index 7fecc2820..67bf71fb9 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -16,7 +16,7 @@
 
             .linkMenu-destination-title {
                 text-decoration: none;
-                color: rgb(46, 82, 160);
+                color: rgb(85, 120, 196);
                 font-size: 14px;
                 padding-bottom: 2px;
             }
@@ -62,8 +62,9 @@
 
             .linkMenu-destination-title {
                 text-decoration: underline;
-                color: rgb(15, 57, 148);
-                display: inline;
+                color: rgb(60, 90, 156);
+                //display: inline;
+                text-overflow: break;
             }
 
             &.expand-two p {
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 9f6b47375..bd4024902 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -201,7 +201,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
                                 <FontAwesomeIcon className="fa-icon" icon={this._showMore ? "chevron-up" : "chevron-down"} size="sm" /></div> : <></>}
 
                             <div title="Edit link" className="button" ref={this._editRef} onPointerDown={this.onEdit}>
-                                <FontAwesomeIcon className="fa-icon" icon="pencil-alt" size="sm" /></div>
+                                <FontAwesomeIcon className="fa-icon" icon="edit" size="sm" /></div>
                             <div title="Delete link" className="button" onPointerDown={this.deleteLink}>
                                 <FontAwesomeIcon className="fa-icon" icon="trash" size="sm" /></div>
                             {/* <div title="Follow link" className="button" onPointerDown={this.followDefault} onContextMenu={this.onContextMenu}>
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 544f5fd7f..7fb447cab 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -146,10 +146,14 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
     @computed
     get linkButton() {
         const links = DocListCast(this.props.View.props.Document.links);
+
+        const title = this.props.InMenu ? "Drag or tap to create links" : "Tap to view links";
+
         return (!links.length || links[0].hidden) && !this.props.AlwaysOn ? (null) :
-            <div title="Drag(create link) Tap(view links)" ref={this._linkButton} style={{ minWidth: 20, minHeight: 20, position: "absolute", left: this.props.Offset?.[0] }}>
+            <div title={title} ref={this._linkButton} style={{ minWidth: 20, minHeight: 20, position: "absolute", left: this.props.Offset?.[0] }}>
                 <div className={"documentLinksButton"} style={{
-                    backgroundColor: DocumentLinksButton.StartLink ? "transparent" : "",
+                    backgroundColor: DocumentLinksButton.StartLink ? "transparent" : this.props.InMenu ? "black" : "",
+                    color: this.props.InMenu ? "white" : "black",
                     width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px", fontWeight: "bold"
                 }}
                     onPointerDown={this.onLinkButtonDown} onClick={this.onLinkClick}
-- 
cgit v1.2.3-70-g09d2

