aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/nodes/LinkMenu.tsx3
-rw-r--r--src/client/views/search/SearchItem.scss54
-rw-r--r--src/client/views/search/SearchItem.tsx31
-rw-r--r--src/client/views/search/ToggleBar.scss6
4 files changed, 75 insertions, 19 deletions
diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx
index 3f09d6214..c34ccdccb 100644
--- a/src/client/views/nodes/LinkMenu.tsx
+++ b/src/client/views/nodes/LinkMenu.tsx
@@ -8,6 +8,7 @@ import React = require("react");
import { Doc, DocListCast } from "../../../new_fields/Doc";
import { Cast, FieldValue, StrCast } from "../../../new_fields/Types";
import { Id } from "../../../new_fields/FieldSymbols";
+import { DocTypes } from "../../documents/Documents";
interface Props {
docView: DocumentView;
@@ -23,7 +24,7 @@ export class LinkMenu extends React.Component<Props> {
return links.map(link => {
let doc = FieldValue(Cast(link[key], Doc));
if (doc) {
- return <LinkBox key={doc[Id]} linkDoc={link} linkName={StrCast(link.title)} pairedDoc={doc} showEditor={action(() => this._editingLink = link)} type={type} />;
+ return <LinkBox key={doc[Id]} linkDoc={link} linkName={StrCast(link.title)} pairedDoc={doc} showEditor={action(() => this._editingLink = link)} type={DocTypes.LINK} />;
}
});
}
diff --git a/src/client/views/search/SearchItem.scss b/src/client/views/search/SearchItem.scss
index 2d4c06a5c..5afb69164 100644
--- a/src/client/views/search/SearchItem.scss
+++ b/src/client/views/search/SearchItem.scss
@@ -12,7 +12,7 @@
.search-info {
display: flex;
justify-content: flex-end;
- width: 100%;
+ width: 40%;
}
.main-search-info {
@@ -29,20 +29,59 @@
.search-title {
text-transform: uppercase;
text-align: left;
- width: 8vw;
+ width: 80%;
font-weight: bold;
}
-.link-count {
- height: 25px;
- width: 25px;
- border-radius: 50%;
+.link-container.item {
+ height: 26px;
+ width: 26px;
+ border-radius: 13px;
background: $dark-color;
color: $light-color-secondary;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
+ -webkit-transition: all 0.2s ease-in-out;
+ -moz-transition: all 0.2s ease-in-out;
+ -o-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
+ transform-origin: top right;
+ overflow: hidden;
+
+ .link-count {
+ opacity: 1;
+ position: absolute;
+ z-index: 1000;
+ -webkit-transition: opacity 0.2s ease-in-out;
+ -moz-transition: opacity 0.2s ease-in-out;
+ -o-transition: opacity 0.2s ease-in-out;
+ transition: opacity 0.2s ease-in-out;
+ }
+
+ .link-extended {
+ opacity: 0;
+ position: absolute;
+ z-index: 500;
+ overflow: hidden;
+ -webkit-transition: opacity 0.2s ease-in-out;
+ -moz-transition: opacity 0.2s ease-in-out;
+ -o-transition: opacity 0.2s ease-in-out;
+ transition: opacity 0.2s ease-in-out;
+ }
+}
+
+.link-container.item:hover{
+ width: 70px;
+}
+
+.link-container.item:hover .link-count{
+ opacity: 0;
+}
+
+.link-container.item:hover .link-extended{
+ opacity: 1;
}
.search-type {
@@ -85,7 +124,8 @@
}
.search-item:hover~.searchBox-instances,
-.searchBox-instances:hover, .searchBox-instances:active{
+.searchBox-instances:hover,
+.searchBox-instances:active {
opacity: 1;
background: $lighter-alt-accent;
-webkit-transform: scale(1);
diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx
index 9b4170f4c..d470090f8 100644
--- a/src/client/views/search/SearchItem.tsx
+++ b/src/client/views/search/SearchItem.tsx
@@ -3,7 +3,7 @@ import { library } from '@fortawesome/fontawesome-svg-core';
import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Cast, NumCast } from "../../../new_fields/Types";
-import { observable, runInAction } from "mobx";
+import { observable, runInAction, computed } from "mobx";
import { listSpec } from "../../../new_fields/Schema";
import { Doc } from "../../../new_fields/Doc";
import { DocumentManager } from "../../util/DocumentManager";
@@ -71,9 +71,9 @@ export class SelectorContextMenu extends React.Component<SearchItemProps> {
render() {
return (
< div className="parents">
- <p className = "contexts">Contexts:</p>
- {this._docs.map(doc => <div className="collection"><a className= "title" onClick={this.getOnClick(doc)}>{doc.col.title}</a></div>)}
- {this._otherDocs.map(doc => <div className="collection"><a className= "title" onClick={this.getOnClick(doc)}>{doc.col.title}</a></div>)}
+ <p className="contexts">Contexts:</p>
+ {this._docs.map(doc => <div className="collection"><a className="title" onClick={this.getOnClick(doc)}>{doc.col.title}</a></div>)}
+ {this._otherDocs.map(doc => <div className="collection"><a className="title" onClick={this.getOnClick(doc)}>{doc.col.title}</a></div>)}
</div>
);
}
@@ -87,10 +87,12 @@ export class SearchItem extends React.Component<SearchItemProps> {
onClick = () => {
// DocumentManager.Instance.jumpToDocument(this.props.doc);
+ console.log(Cast(this.props.doc.type, "string", ""))
CollectionDockingView.Instance.AddRightSplit(this.props.doc);
}
- public DocumentIcon() {
+ @computed
+ public get DocumentIcon() {
let layoutresult = Cast(this.props.doc.type, "string", "");
let button = layoutresult.indexOf(DocTypes.PDF) !== -1 ? faFilePdf :
@@ -117,10 +119,20 @@ export class SearchItem extends React.Component<SearchItemProps> {
}
}
- linkCount = () => {
+ @computed
+ get linkCount() {
return Cast(this.props.doc.linkedToDocs, listSpec(Doc), []).length + Cast(this.props.doc.linkedFromDocs, listSpec(Doc), []).length;
}
+ @computed
+ get linkString(): string {
+ let num = this.linkCount;
+ if (num === 1) {
+ return num.toString() + " link";
+ }
+ return num.toString() + " links";
+ }
+
render() {
return (
<div className="search-overview">
@@ -128,8 +140,11 @@ export class SearchItem extends React.Component<SearchItemProps> {
<div className="main-search-info">
<div className="search-title" id="result" >{this.props.doc.title}</div>
<div className="search-info">
- <div className="link-count">{this.linkCount()}</div>
- <div className="search-type" >{this.DocumentIcon()}</div>
+ <div className="link-container item">
+ <div className="link-count">{this.linkCount}</div>
+ <div className = "link-extended">{this.linkString}</div>
+ </div>
+ <div className="search-type" >{this.DocumentIcon}</div>
</div>
</div>
<div className="found">Where Found: (i.e. title, body, etc)</div>
diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss
index caae354ee..353db792d 100644
--- a/src/client/views/search/ToggleBar.scss
+++ b/src/client/views/search/ToggleBar.scss
@@ -13,9 +13,9 @@
width: 100px;
text-align: center;
-webkit-transition: all 0.2s ease-in-out;
- -moz-transition: all 0.2s ease-in-out;
- -o-transition: all 0.2s ease-in-out;
- transition: all 0.2s ease-in-out;
+ -moz-transition: all 0.2s ease-in-out;
+ -o-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
}
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-11 10:02:26 +0000