diff options
| -rw-r--r-- | src/client/views/SearchBox.scss | 37 | ||||
| -rw-r--r-- | src/client/views/SearchItem.tsx | 17 | ||||
| -rw-r--r-- | src/client/views/globalCssVariables.scss | 1 |
3 files changed, 35 insertions, 20 deletions
diff --git a/src/client/views/SearchBox.scss b/src/client/views/SearchBox.scss index 72a0d4b72..4c60710da 100644 --- a/src/client/views/SearchBox.scss +++ b/src/client/views/SearchBox.scss @@ -73,6 +73,7 @@ margin-right: 72px; .search-item { + float: right; position: relative; z-index: 1000; pointer-events: auto; @@ -103,7 +104,7 @@ } .search-item:hover { - transition: all 0.1s; + transition: all 0.2s; background: $lighter-alt-accent; } @@ -140,26 +141,42 @@ .searchBox-instances { - display: block; - background: $lighter-alt-accent; - opacity: 0; + float: left; + display: inline-block; + opacity: 1; width: 150px; transition: all 0.2s ease; color: black; - transform: translateX(150px); + transform-origin: top right; + -webkit-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + height: 100% } + .collection{ + border-color: $darker-alt-accent; + border-bottom-style: solid; + } .search-overview { display: flex; + flex-direction: row-reverse; justify-content: flex-end; height: 70px; } - .search-overview:hover { - .searchBox-instances { - transform: translateX(0px); - opacity: 1; - } + .parents{ + background: $light-color-secondary; + padding: 10px; } + + .search-item:hover~.searchBox-instances, .searchBox-instances:hover { + opacity: 1; + background: $lighter-alt-accent; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } + }
\ No newline at end of file diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx index ba67363fb..052c14acb 100644 --- a/src/client/views/SearchItem.tsx +++ b/src/client/views/SearchItem.tsx @@ -40,7 +40,6 @@ export class SelectorContextMenu extends React.Component<SearchItemProps> { } async fetchDocuments() { - console.log("fetching"); let aliases = (await SearchUtil.GetViewsOfDocument(this.props.doc)).filter(doc => doc !== this.props.doc); const docs = await SearchUtil.Search(`data_l:"${this.props.doc[Id]}"`, true); const map: Map<Doc, Doc> = new Map; @@ -48,7 +47,6 @@ export class SelectorContextMenu extends React.Component<SearchItemProps> { allDocs.forEach((docs, index) => docs.forEach(doc => map.set(doc, aliases[index]))); docs.forEach(doc => map.delete(doc)); runInAction(() => { - console.log("action running") this._docs = docs.filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance.props.Document)).map(doc => ({ col: doc, target: this.props.doc })); this._otherDocs = Array.from(map.entries()).filter(entry => !Doc.AreProtosEqual(entry[0], CollectionDockingView.Instance.props.Document)).map(([col, target]) => ({ col, target })); }); @@ -70,12 +68,11 @@ export class SelectorContextMenu extends React.Component<SearchItemProps> { render() { return ( - <> + < div className="parents"> <p>Contexts:</p> - {this._docs.map(doc => <p><a onClick={this.getOnClick(doc)}>{doc.col.title}</a></p>)} - {this._otherDocs.length ? <hr></hr> : null} - {this._otherDocs.map(doc => <p><a onClick={this.getOnClick(doc)}>{doc.col.title}</a></p>)} - </> + {this._docs.map(doc => <div className = "collection"><a onClick={this.getOnClick(doc)}>{doc.col.title}</a></div>)} + {this._otherDocs.map(doc =><div className = "collection"><a onClick={this.getOnClick(doc)}>{doc.col.title}</a></div>)} + </div> ); } } @@ -124,9 +121,6 @@ export class SearchItem extends React.Component<SearchItemProps> { render() { return ( <div className="search-overview"> - <div className="searchBox-instances"> - <SelectorContextMenu {...this.props} /> - </div> <div className="search-item" ref={this.collectionRef} id="result" onClick={this.onClick} onPointerDown={SetupDrag(this.collectionRef, this.startDocDrag)} > <div className="main-search-info"> <div className="search-title" id="result" >{this.props.doc.title}</div> @@ -139,6 +133,9 @@ export class SearchItem extends React.Component<SearchItemProps> { <div className="found">Where Found: (i.e. title, body, etc)</div> </div> </div> + <div className="searchBox-instances"> + <SelectorContextMenu {...this.props} /> + </div> </div> ); } diff --git a/src/client/views/globalCssVariables.scss b/src/client/views/globalCssVariables.scss index 838d4d9ac..cfbf4aab8 100644 --- a/src/client/views/globalCssVariables.scss +++ b/src/client/views/globalCssVariables.scss @@ -9,6 +9,7 @@ $main-accent: #aaaaa3; //$alt-accent: #59dff7; $alt-accent: #c2c2c5; $lighter-alt-accent: rgb(207, 220, 240); +$darker-alt-accent: rgb(178, 206, 248); $intermediate-color: #9c9396; $dark-color: #121721; // fonts |