UI change to menu

3 files changed, 36 insertions, 20 deletions

diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index 4b1a3f425..10a24c5ca 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -5,35 +5,34 @@
     height: auto;
     //border: 1px solid black;
 
-    &:hover {
-        width: calc(auto + 26px);
-    }
+    // &:hover {
+    //     width: calc(auto + 26px);
+    // }
 }
 
 .linkMenu-list {
     border: 1px solid black;
-    max-height: 200px;
-    overflow-y: scroll;
+    max-height: 170px;
+    //overflow-y: scroll;
     position: absolute;
     z-index: 10;
     background: white;
     min-width: 150px;
-    border-radius: 5px;
-    padding-top: 6.5px;
-    padding-bottom: 6.5px;
-    padding-left: 6.5px;
-    padding-right: 2px;
-    //width: calc(auto + 50px);
-}
-
-.linkMenu-group {
-    //border-bottom: 0.5px solid lightgray;
-    //@extend: 5px 0;
-
+    //border-radius: 5px;
+    //padding-top: 6.5px;
+    //padding-bottom: 6.5px;
+    //padding-left: 6.5px;
+    //padding-right: 2px;
+    width: calc(auto + 50px);
 
     &:last-child {
         border-bottom: none;
     }
+}
+
+.linkMenu-group {
+    border-bottom: 0.5px solid lightgray;
+    //@extend: 5px 0;
 
     .linkMenu-group-name {
         display: flex;
@@ -56,7 +55,7 @@
 
         p {
             width: 100%;
-            padding: 4px 6px;
+            //padding: 4px 6px;
             line-height: 12px;
             border-radius: 5px;
             font-weight: bold;
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index 8a7b12f48..064c24f7a 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -29,6 +29,8 @@ export class LinkMenu extends React.Component<Props> {
     @observable private _linkMenuRef = React.createRef<HTMLDivElement>();
     private _editorRef = React.createRef<HTMLDivElement>();
 
+    @observable private _numLinks: number = 0;
+
     @action
     onClick = (e: PointerEvent) => {
 
@@ -69,6 +71,9 @@ 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
@@ -77,12 +82,16 @@ 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);
         return <div className="linkMenu" ref={this._linkMenuRef} >
             <div className="linkMenu-list"
-                style={{ left: this.props.location[0], top: this.props.location[1] }}>
+                style={{
+                    left: this.props.location[0], top: this.props.location[1],
+                    overflowY: this._numLinks > 4 ? "scroll" : "auto"
+                }}>
                 {!this._editingLink ?
                     this.renderAllGroups(groups) :
                     <LinkEditor sourceDoc={this.props.docView.props.Document} linkDoc={this._editingLink}
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index 67bf71fb9..df8a3cadb 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -4,6 +4,13 @@
     // border-top: 0.5px solid $main-accent; 
     position: relative;
     display: flex;
+    border-bottom: 0.5px solid black;
+
+    padding-left: 6.5px;
+    padding-right: 2px;
+
+    padding-top: 6.5px;
+    padding-bottom: 6.5px;
 
 
     .linkMenu-name {
@@ -96,7 +103,8 @@
         width: 20px;
         height: 20px;
         margin: 0;
-        margin-right: 6px;
+        //margin-right: 6px;
+        padding-right: 6px;
         border-radius: 50%;
         pointer-events: auto;
         background-color: $dark-color;