From bff9c34aa8294cd8ec09b968cfea95280b383c77 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Thu, 6 Jun 2019 14:15:32 -0400 Subject: weird thingsS --- src/client/views/SearchBox.tsx | 22 +++++++++++++--------- src/client/views/SearchItem.scss | 14 +++++++++----- src/client/views/SearchItem.tsx | 37 +++++++++++++++++++++++++------------ 3 files changed, 47 insertions(+), 26 deletions(-) (limited to 'src') diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx index 5e1389959..ed8dbbe51 100644 --- a/src/client/views/SearchBox.tsx +++ b/src/client/views/SearchBox.tsx @@ -15,6 +15,8 @@ import { Docs } from '../documents/Documents'; import { RouteStore } from '../../server/RouteStore'; import { NumCast } from '../../new_fields/Types'; import { SearchUtil } from '../util/SearchUtil'; +import * as anime from 'animejs'; +// import anime from 'animejs'; library.add(faSearch); library.add(faObjectGroup); @@ -54,6 +56,7 @@ export class SearchBox extends React.Component { this._resultsOpen = true; this._results = results; }); + } @action @@ -216,15 +219,16 @@ export class SearchBox extends React.Component {
temp for filtering by a type of node
- - - - - - - - - + {/* hoping to ultimately animate a reorder when an icon is chosen */} + + + + + + + + +
diff --git a/src/client/views/SearchItem.scss b/src/client/views/SearchItem.scss index b6ee7deca..a6cd852b1 100644 --- a/src/client/views/SearchItem.scss +++ b/src/client/views/SearchItem.scss @@ -56,14 +56,18 @@ .searchBox-instances { float: left; - opacity: 0; + // opacity: 0; + opacity: 1; width: 150px; transition: all 0.2s ease; color: black; transform-origin: top right; - -webkit-transform: scale(0); - -ms-transform: scale(0); - transform: scale(0); + // -webkit-transform: scale(0); + // -ms-transform: scale(0); + // transform: scale(0); + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); height: 100% } @@ -85,7 +89,7 @@ } .search-item:hover~.searchBox-instances, -.searchBox-instances:hover { +.searchBox-instances:hover, .searchBox-instances:active{ opacity: 1; background: $lighter-alt-accent; -webkit-transform: scale(1); diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx index 40b8cf2bf..16a2aa790 100644 --- a/src/client/views/SearchItem.tsx +++ b/src/client/views/SearchItem.tsx @@ -2,7 +2,7 @@ import React = require("react"); 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 } from "../../new_fields/Types"; +import { Cast, NumCast } from "../../new_fields/Types"; import { observable, runInAction } from "mobx"; import { listSpec } from "../../new_fields/Schema"; import { Doc } from "../../new_fields/Doc"; @@ -13,6 +13,7 @@ import { Id } from "../../new_fields/FieldSymbols"; import { CollectionDockingView } from "./collections/CollectionDockingView"; import { observer } from "mobx-react"; import "./SearchItem.scss"; +import { CollectionViewType } from "./collections/CollectionBaseView"; export interface SearchItemProps { doc: Doc; @@ -54,25 +55,37 @@ export class SelectorContextMenu extends React.Component { } getOnClick({ col, target }: { col: Doc, target: Doc }) { + console.log("hello world") return () => { console.log("returning!") - // col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col; - // if (NumCast(col.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) { - // const newPanX = NumCast(target.x) + NumCast(target.width) / NumCast(target.zoomBasis, 1) / 2; - // const newPanY = NumCast(target.y) + NumCast(target.height) / NumCast(target.zoomBasis, 1) / 2; - // col.panX = newPanX; - // col.panY = newPanY; - // } + col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col; + if (NumCast(col.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) { + const newPanX = NumCast(target.x) + NumCast(target.width) / NumCast(target.zoomBasis, 1) / 2; + const newPanY = NumCast(target.y) + NumCast(target.height) / NumCast(target.zoomBasis, 1) / 2; + col.panX = newPanX; + col.panY = newPanY; + } // this.props.addDocTab(col, "inTab"); + CollectionDockingView.Instance.AddRightSplit(col); }; } render() { return ( - < div className="parents"> + < div className="parents" onClick = {() => {console.log("hello there")}}>

Contexts:

- {this._docs.map(doc =>
{doc.col.title}
)} - {this._otherDocs.map(doc =>
{doc.col.title}
)} + {this._docs.map(doc =>
{ + console.log("pointerdown"); + e.preventDefault(); + e.stopPropagation() + this.getOnClick(doc) + }}>{doc.col.title}
)} + {this._otherDocs.map(doc =>
{ + e.preventDefault(); + e.stopPropagation() + console.log("clicked"); + this.getOnClick(doc) + }}>{doc.col.title}
)}
); } @@ -130,7 +143,7 @@ export class SearchItem extends React.Component {
{this.DocumentIcon()}
-
Where Found: (i.e. title, body, etc)
+
Where Found: (i.e. title, body, etc)
-- cgit v1.2.3-70-g09d2