Merge branch 'master' into sophie-report-manager

6 files changed, 28 insertions, 36 deletions

diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index 80cf93ed8..0b9f32eee 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -12,7 +12,6 @@
         position: relative;
         border: 1px solid #e4e4e4;
         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-        background: white;
         max-height: 230px;
         overflow-y: scroll;
         z-index: 10;
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index 65d13a6c3..9dc133e28 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -7,6 +7,7 @@ import { LinkDocPreview } from '../nodes/LinkDocPreview';
 import './LinkMenu.scss';
 import { LinkMenuGroup } from './LinkMenuGroup';
 import React = require('react');
+import { SettingsManager } from '../../util/SettingsManager';
 
 interface Props {
     docView: DocumentView;
@@ -58,7 +59,7 @@ export class LinkMenu extends React.Component<Props> {
         const style = this.props.style ?? (dv => ({ left: dv?.left || 0, top: this.props.docView.topMost ? undefined : (dv?.bottom || 0) + 15, bottom: this.props.docView.topMost ? 20 : undefined, maxWidth: 200 }))(this.props.docView.getBounds());
 
         return (
-            <div className="linkMenu" ref={this._linkMenuRef} style={{ ...style }}>
+            <div className="linkMenu" ref={this._linkMenuRef} style={{ ...style, background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}>
                 <div className="linkMenu-list">{this.renderAllGroups(LinkManager.Instance.getRelatedGroupedLinks(sourceAnchor))}</div>
             </div>
         );
diff --git a/src/client/views/linking/LinkMenuGroup.tsx b/src/client/views/linking/LinkMenuGroup.tsx
index 8324a97d9..c1a5a634c 100644
--- a/src/client/views/linking/LinkMenuGroup.tsx
+++ b/src/client/views/linking/LinkMenuGroup.tsx
@@ -23,10 +23,10 @@ interface LinkMenuGroupProps {
 export class LinkMenuGroup extends React.Component<LinkMenuGroupProps> {
     private _menuRef = React.createRef<HTMLDivElement>();
 
-    getBackgroundColor = (): string => {
+    getBackgroundColor = (): string | undefined => {
         const link_relationshipList = StrListCast(Doc.UserDoc().link_relationshipList);
         const linkColorList = StrListCast(Doc.UserDoc().link_ColorList);
-        let color = 'white';
+        let color: string | undefined;
         // if this link's relationship property is not default "link", set its color
         if (link_relationshipList) {
             const relationshipIndex = link_relationshipList.indexOf(this.props.groupType);
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index 806a2c381..e83f631a1 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -12,8 +12,6 @@
     padding-top: 1px;
     padding-bottom: 1px;
 
-    background-color: white;
-
     .linkMenu-name {
         position: relative;
         width: auto;
@@ -25,7 +23,7 @@
 
             .linkMenu-source-title {
                 text-decoration: none;
-                color: rgb(43, 43, 43);
+                //color: rgb(43, 43, 43);
                 font-size: 7px;
                 padding-bottom: 0.75px;
 
@@ -48,13 +46,12 @@
                         height: 12px;
                         padding: 1px;
                         margin-right: 3px;
-                        color: rgb(161, 161, 161);
+                        // color: rgb(161, 161, 161);
                     }
                 }
 
                 .linkMenu-destination-title {
                     text-decoration: none;
-                    color: #4476f7;
                     font-size: 13px;
                     line-height: 0.9;
                     padding-bottom: 2px;
@@ -64,7 +61,6 @@
 
                     &:hover {
                         text-decoration: underline;
-                        color: rgb(60, 90, 156);
                         //display: inline;
                         text-overflow: break;
                         cursor: pointer;
@@ -75,7 +71,6 @@
             .linkMenu-description {
                 text-decoration: none;
                 font-style: italic;
-                color: rgb(95, 97, 102);
                 font-size: 9px;
                 line-height: 0.9;
                 margin-left: 20px;
@@ -97,17 +92,7 @@
         width: 100%;
     }
 
-    .link-metadata {
-        padding: 0 10px 0 16px;
-        margin-bottom: 4px;
-        color: $medium-gray;
-        font-style: italic;
-        font-size: 10.5px;
-    }
-
     &:hover {
-        background-color: rgb(201, 239, 252);
-
         .linkMenu-item-buttons {
             opacity: 1;
         }
@@ -115,7 +100,6 @@
         .linkMenu-item-content {
             .linkMenu-destination-title {
                 text-decoration: underline;
-                color: rgb(60, 90, 156);
                 //display: inline;
                 text-overflow: break;
             }
@@ -129,7 +113,7 @@
     display: flex;
     opacity: 0;
 
-    .button {
+    .linkMenu-deleteButton {
         width: 20px;
         height: 20px;
         margin: 0;
@@ -137,7 +121,7 @@
         padding-right: 6px;
         border-radius: 50%;
         pointer-events: auto;
-        background-color: $dark-gray;
+        background-color: red;
         color: $white;
         font-size: 65%;
         transition: transform 0.2s;
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 737d675aa..bf2a4e1a9 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -69,10 +69,8 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
         }
         return this.props.sourceDoc;
     }
-    @action
+
     onEdit = (e: React.PointerEvent) => {
-        LinkManager.currentLink = this.props.linkDoc === LinkManager.currentLink ? undefined : this.props.linkDoc;
-        LinkManager.currentLinkAnchor = this.sourceAnchor;
         setupMoveUpEvents(
             this,
             e,
@@ -84,14 +82,17 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
             },
             emptyFunction,
             action(() => {
-                const trail = DocCast(this.props.docView.rootDoc.presTrail);
+                const trail = DocCast(this.props.docView.rootDoc.presentationTrail);
                 if (trail) {
                     Doc.ActivePresentation = trail;
                     DocumentViewInternal.addDocTabFunc(trail, OpenWhere.replaceRight);
                 } else {
                     SelectionManager.SelectView(this.props.docView, false);
+                    LinkManager.currentLink = this.props.linkDoc === LinkManager.currentLink ? undefined : this.props.linkDoc;
+                    LinkManager.currentLinkAnchor = LinkManager.currentLink ? this.sourceAnchor : undefined;
+
                     if ((SettingsManager.propertiesWidth ?? 0) < 100) {
-                        SettingsManager.propertiesWidth = 250;
+                        setTimeout(action(() => (SettingsManager.propertiesWidth = 250)));
                     }
                 }
             })
@@ -130,7 +131,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
     };
 
     deleteLink = (e: React.PointerEvent): void => setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => LinkManager.Instance.deleteLink(this.props.linkDoc))));
-
+    @observable _hover = false;
     render() {
         const destinationIcon = Doc.toIcon(this.props.destinationDoc) as any as IconProp;
 
@@ -146,7 +147,15 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
                 : undefined;
 
         return (
-            <div className="linkMenu-item" style={{ background: LinkManager.currentLink === this.props.linkDoc ? 'lightBlue' : undefined }}>
+            <div
+                className="linkMenu-item"
+                onPointerEnter={action(e => (this._hover = true))}
+                onPointerLeave={action(e => (this._hover = false))}
+                style={{
+                    fontSize: this._hover ? 'larger' : undefined,
+                    fontWeight: this._hover ? 'bold' : undefined,
+                    background: LinkManager.currentLink === this.props.linkDoc ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor,
+                }}>
                 <div className="linkMenu-item-content expand-two">
                     <div
                         ref={this._drag}
@@ -154,7 +163,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
                         onPointerDown={this.onLinkButtonDown}>
                         <div className="linkMenu-item-buttons">
                             <Tooltip title={<div className="dash-tooltip">Edit Link</div>}>
-                                <div className="button" style={{ background: LinkManager.currentLink === this.props.linkDoc ? 'black' : 'gray' }} ref={this._editRef} onPointerDown={this.onEdit} onClick={e => e.stopPropagation()}>
+                                <div className="button" ref={this._editRef} onPointerDown={this.onEdit} onClick={e => e.stopPropagation()}>
                                     <FontAwesomeIcon className="fa-icon" icon="edit" size="sm" />
                                 </div>
                             </Tooltip>
@@ -188,12 +197,12 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
                                     {this.props.linkDoc.linksToAnnotation && Cast(this.props.destinationDoc.data, WebField)?.url.href === this.props.linkDoc.annotationUri ? 'Annotation in' : ''} {StrCast(title)}
                                 </p>
                             </div>
-                            {!this.props.linkDoc.link_description ? null : <p className="linkMenu-description">{StrCast(this.props.linkDoc.link_description)}</p>}
+                            {!this.props.linkDoc.link_description ? null : <p className="linkMenu-description">{StrCast(this.props.linkDoc.link_description).split('\n')[0].substring(0, 50)}</p>}
                         </div>
 
                         <div className="linkMenu-item-buttons">
                             <Tooltip title={<div className="dash-tooltip">Delete Link</div>}>
-                                <div className="button" style={{ background: 'red' }} onPointerDown={this.deleteLink} onClick={e => e.stopPropagation()}>
+                                <div className="linkMenu-deleteButton" onPointerDown={this.deleteLink} onClick={e => e.stopPropagation()}>
                                     <FontAwesomeIcon className="fa-icon" icon="trash" size="sm" />
                                 </div>
                             </Tooltip>
diff --git a/src/client/views/linking/LinkPopup.tsx b/src/client/views/linking/LinkPopup.tsx
index 6895c0746..9a9a89732 100644
--- a/src/client/views/linking/LinkPopup.tsx
+++ b/src/client/views/linking/LinkPopup.tsx
@@ -3,15 +3,14 @@ import { observer } from 'mobx-react';
 import { EditorView } from 'prosemirror-view';
 import { Doc } from '../../../fields/Doc';
 import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../../Utils';
-import { DocUtils } from '../../documents/Documents';
 import { Transform } from '../../util/Transform';
 import { undoBatch } from '../../util/UndoManager';
+import { OpenWhere } from '../nodes/DocumentView';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import { SearchBox } from '../search/SearchBox';
 import { DefaultStyleProvider } from '../StyleProvider';
 import './LinkPopup.scss';
 import React = require('react');
-import { OpenWhere } from '../nodes/DocumentView';
 
 interface LinkPopupProps {
     linkFrom?: () => Doc | undefined;