descriptions toggle and UI cleanup

5 files changed, 47 insertions, 9 deletions

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;
         }
     }