aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/linking
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/linking')
-rw-r--r--src/client/views/linking/LinkMenu.scss1
-rw-r--r--src/client/views/linking/LinkMenu.tsx3
-rw-r--r--src/client/views/linking/LinkMenuGroup.tsx4
-rw-r--r--src/client/views/linking/LinkMenuItem.scss24
-rw-r--r--src/client/views/linking/LinkMenuItem.tsx12
5 files changed, 16 insertions, 28 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 a81707ea4..9bc8f5e8b 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -130,7 +130,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 +146,11 @@ 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={{ background: /*LinkManager.currentLink !== this.props.linkDoc*/ this._hover ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor }}>
<div className="linkMenu-item-content expand-two">
<div
ref={this._drag}
@@ -154,7 +158,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>
@@ -193,7 +197,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
<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>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-16 09:53:08 +0000