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/LinkEditor.scss15
-rw-r--r--src/client/views/linking/LinkEditor.tsx3
-rw-r--r--src/client/views/linking/LinkMenu.scss71
-rw-r--r--src/client/views/linking/LinkMenu.tsx18
-rw-r--r--src/client/views/linking/LinkMenuItem.scss29
-rw-r--r--src/client/views/linking/LinkMenuItem.tsx10
6 files changed, 91 insertions, 55 deletions
diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss
index 937427e46..87afc99eb 100644
--- a/src/client/views/linking/LinkEditor.scss
+++ b/src/client/views/linking/LinkEditor.scss
@@ -40,6 +40,10 @@
font-size: 9px;
//font-style: italic;
text-decoration-color: grey;
+
+ .button {
+ color: black;
+ }
}
.linkEditor-description {
@@ -61,7 +65,7 @@
//border-radius: 4px;
padding-left: 2px;
padding-right: 2px;
- margin-right: 4px;
+ //margin-right: 4px;
color: black;
text-decoration-color: grey;
}
@@ -69,14 +73,14 @@
.linkEditor-description-add-button {
display: inline;
/* float: right; */
- border-radius: 9px;
+ border-radius: 7px;
font-size: 9px;
background-color: black;
/* padding: 3px; */
padding-top: 4px;
- padding-left: 3px;
+ padding-left: 7px;
padding-bottom: 4px;
- padding-right: 5px;
+ padding-right: 8px;
height: 80%;
color: white;
}
@@ -102,10 +106,11 @@
padding-left: 2px;
padding-right: 2px;
text-decoration-color: black;
- color: black;
+ color: rgb(94, 94, 94);
.linkEditor-followingDropdown-icon {
float: right;
+ color: black;
}
}
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index 7af11bca1..a26685318 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -339,6 +339,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
<div className="linkEditor-description-input">
<div className="linkEditor-description-editing">
<input
+ style={{ width: "100%" }}
id="input"
value={this.description}
placeholder={"enter link label"}
@@ -420,7 +421,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
destination.proto?.title ?? destination.title ?? "untitled"}</b></p>
{/* <button className="linkEditor-button" onPointerDown={() => this.deleteLink()} title="Delete link">
<FontAwesomeIcon icon="trash" size="sm" /></button> */}
- <FontAwesomeIcon icon={this.infoIcon} size="lg" onPointerDown={this.changeInfo} />
+ <FontAwesomeIcon className="button" icon={this.infoIcon} size="lg" onPointerDown={this.changeInfo} />
</div>
{this.showInfo ? <div className="linkEditor-moreInfo">
<div>{this.props.linkDoc.author ? <div> <b>Author:</b> {this.props.linkDoc.author}</div> : null}</div>
diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index 422ab0430..4f7ac3275 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -1,37 +1,59 @@
@import "../globalCssVariables";
.linkMenu {
- width: 100%;
+ width: auto;
height: auto;
- border: 1px solid black;
- // &:hover {
- // width: calc(auto + 26px);
- // }
-}
+ .linkMenu-list {
-.linkMenu-list {
+ display: inline-block;
- border: 1px solid black;
+ border: 1px solid black;
- box-shadow: 3px 3px 1.5px grey;
+ box-shadow: 3px 3px 1.5px grey;
- 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);
+ max-height: 170px;
+ overflow-y: scroll;
+ position: relative;
+ z-index: 10;
+ background: white;
+ min-width: 170px;
+ //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;
+ white-space: nowrap;
+
+ overflow-x: hidden;
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ &:hover {
+ padding-right: 65px;
+ display: inline-block;
+ }
+ }
+
+ .linkMenu-listEditor {
+
+ display: inline-block;
+
+ border: 1px solid black;
+
+ box-shadow: 3px 3px 1.5px grey;
+
+ max-height: 170px;
+ overflow-y: scroll;
+ position: relative;
+ z-index: 10;
+ background: white;
+ min-width: 170px;
}
}
@@ -39,6 +61,7 @@
border-bottom: 0.5px solid lightgray;
//@extend: 5px 0;
+
&:last-child {
border-bottom: none;
}
@@ -54,7 +77,7 @@
}
p.expand-one {
- width: calc(100% + 26px);
+ width: calc(100% + 20px);
}
.linkEditor-tableButton {
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index 478ac3fe6..234cd5e07 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -90,16 +90,16 @@ export class LinkMenu extends React.Component<Props> {
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],
- //overflowY: "scroll",
- }}>
- {!this._editingLink ?
- this.renderAllGroups(groups) :
+ {!this._editingLink ? <div className="linkMenu-list" style={{
+ left: this.props.location[0], top: this.props.location[1] }}>
+ {this.renderAllGroups(groups)}
+ </div> : <div className="linkMenu-listEditor" style={{
+ left: this.props.location[0], top: this.props.location[1]}}>
<LinkEditor sourceDoc={this.props.docView.props.Document} linkDoc={this._editingLink}
showLinks={action(() => this._editingLink = undefined)} />
- }
- </div> </div>;
+ </div>
+ }
+
+ </div>;
}
} \ No newline at end of file
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index 8578d0b75..9f1f82ce2 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -26,6 +26,8 @@
color: rgb(85, 120, 196);
font-size: 14px;
padding-bottom: 2px;
+ padding-right: 4px;
+ margin-right: 4px;
}
.linkMenu-description {
@@ -36,12 +38,16 @@
}
p {
- //padding: 4px 2px;
+ padding-right: 4px;
line-height: 12px;
border-radius: 5px;
- overflow-wrap: break-word;
+ //overflow-wrap: break-word;
user-select: none;
}
+
+ &:hover {
+ padding-right: 8px;
+ }
}
}
@@ -60,6 +66,7 @@
&:hover {
+ width: calc(100% + 58px);
.linkMenu-item-buttons {
display: flex;
@@ -74,19 +81,13 @@
text-overflow: break;
}
- &.expand-two p {
- width: calc(100% - 52px);
- //text-decoration: underline;
- //color: rgb(15, 57, 148);
- //background-color: lightgray;
- }
+ // &.expand-two p {
+ // width: calc(100% - 63px);
+ // }
- &.expand-three p {
- width: calc(100% - 84px);
- //text-decoration: underline;
- //color: rgb(15, 57, 148);
- //background-color: lightgray;
- }
+ // &.expand-three p {
+ // width: calc(100% - 93px);
+ // }
}
}
}
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 59a88a1d9..57993d240 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -1,5 +1,5 @@
import { library } from '@fortawesome/fontawesome-svg-core';
-import { faArrowRight, faChevronDown, faChevronUp, faEdit, faEye, faTimes, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+import { faArrowRight, faChevronDown, faChevronUp, faEdit, faEye, faTimes, faPencilAlt, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, observable } from 'mobx';
import { observer } from "mobx-react";
@@ -15,7 +15,7 @@ import { setupMoveUpEvents, emptyFunction } from '../../../Utils';
import { DocumentView } from '../nodes/DocumentView';
import { DocumentLinksButton } from '../nodes/DocumentLinksButton';
import { LinkDocPreview } from '../nodes/LinkDocPreview';
-library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp, faPencilAlt);
+library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp, faPencilAlt, faEyeSlash);
interface LinkMenuItemProps {
@@ -179,6 +179,8 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
const keys = LinkManager.Instance.getMetadataKeysInGroup(this.props.groupType);//groupMetadataKeys.get(this.props.groupType);
const canExpand = keys ? keys.length > 0 : false;
+ const eyeIcon = this.props.linkDoc.shown ? "eye-slash" : "eye";
+
return (
<div className="linkMenu-item">
<div className={canExpand ? "linkMenu-item-content expand-three" : "linkMenu-item-content expand-two"}>
@@ -203,6 +205,10 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
{canExpand ? <div title="Show more" className="button" onPointerDown={e => this.toggleShowMore(e)}>
<FontAwesomeIcon className="fa-icon" icon={this._showMore ? "chevron-up" : "chevron-down"} size="sm" /></div> : <></>}
+ <div title="Show link" className="button" ref={this._editRef} onPointerDown={emptyFunction}>
+ <FontAwesomeIcon className="fa-icon" icon={eyeIcon} size="sm" /></div>
+
+
<div title="Edit link" className="button" ref={this._editRef} onPointerDown={this.onEdit}>
<FontAwesomeIcon className="fa-icon" icon="edit" size="sm" /></div>
<div title="Delete link" className="button" onPointerDown={this.deleteLink}>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-28 17:17:59 +0000