From 41ccf50f2b551edd6827c9fd6296b9ff87a65915 Mon Sep 17 00:00:00 2001
From: geireann <geireann.lindfield@gmail.com>
Date: Sat, 31 Jul 2021 15:32:37 -0400
Subject: linking updates and tab updates

---
 src/client/views/DocumentButtonBar.scss         | 11 ++--
 src/client/views/DocumentDecorations.scss       |  4 +-
 src/client/views/collections/TabDocView.tsx     |  7 ++-
 src/client/views/nodes/DocumentLinksButton.scss | 15 ++++-
 src/client/views/nodes/DocumentLinksButton.tsx  | 83 +++++++++++++------------
 src/client/views/nodes/DocumentView.scss        |  2 +-
 src/client/views/topbar/TopBar.scss             | 10 ++-
 src/client/views/topbar/TopBar.tsx              |  2 +-
 8 files changed, 79 insertions(+), 55 deletions(-)

(limited to 'src')

diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss
index 621c2bf1b..157f3a4f2 100644
--- a/src/client/views/DocumentButtonBar.scss
+++ b/src/client/views/DocumentButtonBar.scss
@@ -50,10 +50,13 @@ $linkGap : 3px;
 }
 
 .documentButtonBar-button {
-    pointer-events: auto;
-    padding-right: 5px;
-    width: 25px;
-    height: 25px;
+    cursor: pointer;
+    display: flex;
+    width: 30px;
+    height: 30px;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
 }
 
 .documentButtonBar-linker {
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 1715f35e7..952d8d150 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -263,7 +263,6 @@ $linkGap : 3px;
 }
 
 .link-button-container {
-    padding: $linkGap;
     border-radius: 10px;
     width: max-content;
     height: auto;
@@ -271,6 +270,9 @@ $linkGap : 3px;
     flex-direction: row;
     z-index: 998;
     position: absolute;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
     background: $medium-gray;
 }
 
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index d82810652..a24f1eb7a 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -169,7 +169,12 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                 }));
 
             //attach the selection doc buttons menu to the drag handle
-            const stack = tab.contentItem.parent;
+            const stack: HTMLDivElement = tab.contentItem.parent;
+            const header: HTMLDivElement = tab;
+            console.log("Stack: " + stack.id, stack.className)
+            stack.onscroll = action((e: any) => {
+                console.log('scrolling...')
+            })
             const moreInfoDrag = document.createElement("div");
             moreInfoDrag.className = "lm_iconWrap";
             tab._disposers.buttonDisposer = reaction(() => this.view, view =>
diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss
index 3809319d7..9bab72d55 100644
--- a/src/client/views/nodes/DocumentLinksButton.scss
+++ b/src/client/views/nodes/DocumentLinksButton.scss
@@ -1,6 +1,16 @@
 @import "../global/globalCssVariables.scss";
 
 
+.documentLinksButton-menu {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+}
+
 .documentLinksButton-cont {
     min-width: 20;
     min-height: 20;
@@ -10,8 +20,8 @@
 .documentLinksButton,
 .documentLinksButton-endLink,
 .documentLinksButton-startLink {
-    height: 20px;
-    width: 20px;
+    height: 25px;
+    width: 25px;
     position: absolute;
     border-radius: 50%;
     opacity: 0.9;
@@ -38,7 +48,6 @@
     font-weight: bold;
 
     &:hover {
-        background: $medium-gray;
         transform: scale(1.05);
         cursor: pointer;
     }
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index ed0e2d1ad..cec06d2d4 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -252,49 +252,50 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
         const btnDim = this.props.InMenu ? "20px" : "30px";
         const link = <img style={{ width: "22px", height: "16px" }} src={`/assets/${"link.png"}`} />;
 
-        return <div className="documentLinksButton-cont" ref={this._linkButton}
-            style={{ left: this.props.Offset?.[0], top: this.props.Offset?.[1], right: this.props.Offset?.[2], bottom: this.props.Offset?.[3] }}
-        >
-            <div className={"documentLinksButton"}
-                onPointerDown={this.onLinkButtonDown} onClick={this.onLinkClick}
-                style={{
-                    backgroundColor: this.props.InMenu ? "" : Colors.LIGHT_BLUE,
-                    color: this.props.InMenu ? Colors.WHITE : "black",
-                    width: btnDim,
-                    height: btnDim,
-                }} >
-                {this.props.InMenu ?
-                    this.props.StartLink ?
-                        <FontAwesomeIcon className="documentdecorations-icon" icon="link" size="sm" />
-                        : link
-                    : Array.from(this.filteredLinks).length}
-            </div>
-            {this.props.InMenu && !this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View.props.Document ? //if the origin node is not this node
-                <div className={"documentLinksButton-endLink"}
+        return (!this.props.InMenu ?
+            <div className="documentLinksButton-cont" ref={this._linkButton}
+                style={{ left: this.props.Offset?.[0], top: this.props.Offset?.[1], right: this.props.Offset?.[2], bottom: this.props.Offset?.[3] }}
+            >
+                <div className={"documentLinksButton"}
+                    onPointerDown={this.onLinkButtonDown} onClick={this.onLinkClick}
                     style={{
-                        width: btnDim, height: btnDim,
-                        backgroundColor: DocumentLinksButton.StartLink ? "" : Colors.LIGHT_GRAY,
-                        opacity: DocumentLinksButton.StartLink ? "" : "50%",
-                        border: DocumentLinksButton.StartLink ? "" : "none",
-                        cursor: DocumentLinksButton.StartLink ? "pointer" : "default"
-                    }}
-                    onPointerDown={DocumentLinksButton.StartLink && this.completeLink}
-                    onClick={e => DocumentLinksButton.StartLink && DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.props.View.props.Document, true, this.props.View)}>
-                    {this.props.StartLink ?
-                        <FontAwesomeIcon className="documentdecorations-icon" icon="link" size="sm" />
-                        : link}
-                </div>
-                : (null)
-            }
-            {DocumentLinksButton.StartLink === this.props.View.props.Document && this.props.InMenu && this.props.StartLink ? //if link has been started from current node, then set behavior of link button to deactivate linking when clicked again
-                <div className={"documentLinksButton-startLink"} onPointerDown={this.clearLinks} onClick={this.clearLinks} style={{ width: btnDim, height: btnDim }}>
-                    {this.props.StartLink ?
-                        <FontAwesomeIcon className="documentdecorations-icon" icon="link" size="sm" />
-                        : link}
+                        backgroundColor: Colors.LIGHT_BLUE,
+                        color: Colors.BLACK,
+                        width: btnDim,
+                        height: btnDim,
+                    }}>
+                    {Array.from(this.filteredLinks).length}
                 </div>
-                : (null)
-            }
-        </div >;
+            </div>
+            :
+            <div className="documentLinksButton-menu">
+                {this.props.InMenu && !this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View.props.Document ? //if the origin node is not this node
+                    <div className={"documentLinksButton-endLink"}
+                        style={{
+                            width: btnDim, height: btnDim,
+                            backgroundColor: DocumentLinksButton.StartLink ? "" : Colors.LIGHT_GRAY,
+                            opacity: DocumentLinksButton.StartLink ? "" : "50%",
+                            border: DocumentLinksButton.StartLink ? "" : "none",
+                            cursor: DocumentLinksButton.StartLink ? "pointer" : "default"
+                        }}
+                        onPointerDown={DocumentLinksButton.StartLink && this.completeLink}
+                        onClick={e => DocumentLinksButton.StartLink && DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.props.View.props.Document, true, this.props.View)}>
+                        {this.props.StartLink ?
+                            <FontAwesomeIcon className="documentdecorations-icon" icon="link" size="sm" />
+                            : link}
+                    </div>
+                    : (null)
+                }
+                {
+                    this.props.InMenu ? //if link has been started from current node, then set behavior of link button to deactivate linking when clicked again
+                        <div className={'documentLinksButton' + (DocumentLinksButton.StartLink === this.props.View.props.Document && this.props.StartLink) ? '-startLink' : ''} onPointerDown={this.clearLinks} onClick={this.clearLinks} style={{ width: btnDim, height: btnDim }}>
+                            {this.props.StartLink ?
+                                <FontAwesomeIcon className="documentdecorations-icon" icon="link" size="sm" />
+                                : link}
+                        </div>
+                        : (null)}
+            </div>
+        )
     }
 
     render() {
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 281f25fb3..7f164ca48 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -147,7 +147,7 @@
         .documentView-titleWrapper,
         .documentView-titleWrapper-hover {
             overflow: hidden;
-            color: gray;
+            color: $black;
             transform-origin: top left;
             top: 0;
             width: 100%;
diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index adb968948..ebdf030e7 100644
--- a/src/client/views/topbar/TopBar.scss
+++ b/src/client/views/topbar/TopBar.scss
@@ -58,8 +58,8 @@
 
                 .topbar-dashSelect {
                     border: none;
-                    background-color: transparent;
-                    color: black;
+                    background-color: $dark-gray;
+                    color: $white;
                     font-family: 'Roboto';
                     font-size: 17;
                     font-weight: 500;
@@ -78,6 +78,7 @@
             display: flex;
             justify-content: flex-end;
             gap: 5px;
+            margin-right: 5px;
         }
 
         .topbar-left {
@@ -89,6 +90,10 @@
             width: 450;
             gap: 5px;
 
+            .topBar-icon:hover {
+                background-color: $logout-red;
+            }
+
             .topbar-lozenge-user,
             .topbar-lozenge {
                 height: 23;
@@ -99,7 +104,6 @@
                 padding: 4px;
                 align-self: center;
                 margin-left: 7px;
-                margin-right: 7px;
                 display: flex;
                 align-items: center;
 
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 6e4d4fe15..bd9935333 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -29,7 +29,7 @@ export class TopBar extends React.Component {
                             {`${Doc.CurrentUserEmail}`}
                         </div>
                         <div className="topbar-icon" onClick={() => window.location.assign(Utils.prepend("/logout"))}>
-                            {"Logoff"}<FontAwesomeIcon icon="sign-out"></FontAwesomeIcon>
+                            {"Sign out"}
                         </div>
                     </div>
                     <div className="topbar-center" >
-- 
cgit v1.2.3-70-g09d2