linking updates and tab updates

author: geireann <geireann.lindfield@gmail.com> 2021-07-31 15:32:37 -0400
committer: geireann <geireann.lindfield@gmail.com> 2021-07-31 15:32:37 -0400
commit: 41ccf50f2b551edd6827c9fd6296b9ff87a65915 (patch)
tree: ce080de6978c3a91594feb3473bbd5f21097992b
parent: fcc75a92643f35955a1e0bbe829e96b0e76c8a4e (diff)
9 files changed, 182 insertions, 57 deletions
diff --git a/deploy/index.html b/deploy/index.html
index d96215391..c32aff638 100644
--- a/deploy/index.html
+++ b/deploy/index.html
@@ -11,8 +11,109 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
         integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/3.3.1/typescript.min.js"></script>
-    <script src="loader.js"></script>
-    <link rel="stylesheet" href="./loader.css" />
+    <script>
+        function getCookie(cname) {
+            var name = cname + "=";
+            var ca = document.cookie.split(';');
+            for (var i = 0; i < ca.length; i++) {
+                var c = ca[i];
+                while (c.charAt(0) == ' ') {
+                    c = c.substring(1);
+                }
+                if (c.indexOf(name) == 0) {
+                    return Number(c.substring(name.length, c.length));
+                }
+            }
+            return 3000;
+        }
+    </script>
+    <style>
+        .dash-loader {
+            display: flex;
+            align-content: center;
+            justify-content: center;
+            background-color: #BDDDF5;
+            transition: 3s;
+            z-index: 10;
+            z-index: 10;
+            width: 100%;
+            height: 100%;
+        }
+
+        .dash-loader-container {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            align-content: center;
+        }
+
+        .dash-progress-bar {
+            width: 200px;
+            height: 5px;
+            align-self: center;
+            margin-top: 20px;
+            background-color: #ececec;
+            border-radius: 5px;
+            overflow: hidden;
+        }
+
+        .dash-progress {
+            width: 0%;
+            height: 20px;
+            background-color: #4476F7;
+            transition: 0.1s;
+        }
+
+        .dash-animation-container {
+            width: 10vw;
+            height: 10vw;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 100%;
+            background-color: #4476F7;
+            justify-self: center;
+        }
+
+        .dash-loader-text {
+            font-size: 15px;
+            font-family: "Roboto";
+            font-weight: 400;
+            text-align: center;
+            color: #4476F7;
+            user-select: none;
+            -webkit-user-select: none;
+        }
+
+        .dash-d-path {
+            stroke-dasharray: 1000;
+            stroke-dashoffset: 1000;
+            animation: dash-d-path 3s linear infinite;
+        }
+
+        @keyframes dash-d-path {
+            0% {
+                stroke-dashoffset: 1000;
+            }
+
+            20% {
+                stroke-dashoffset: 0;
+            }
+
+            70% {
+                stroke-dashoffset: 0;
+            }
+
+            90% {
+                stroke-dashoffset: 1000;
+            }
+
+            100% {
+                stroke-dashoffset: 1000;
+            }
+        }
+    </style>
 </head>
 
 <body style="display:flex" id="dash-body">
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" >
author	geireann <geireann.lindfield@gmail.com>	2021-07-31 15:32:37 -0400
committer	geireann <geireann.lindfield@gmail.com>	2021-07-31 15:32:37 -0400
commit	41ccf50f2b551edd6827c9fd6296b9ff87a65915 (patch)
tree	ce080de6978c3a91594feb3473bbd5f21097992b
parent	fcc75a92643f35955a1e0bbe829e96b0e76c8a4e (diff)