From 6bd79baf2d9301304194d87667bb5c66c17e5298 Mon Sep 17 00:00:00 2001 From: Monika Date: Mon, 1 Jul 2019 15:39:48 -0400 Subject: changes --- src/client/views/MainView.tsx | 1 + src/client/views/search/FilterBox.scss | 47 ++++++++++---------- src/client/views/search/FilterBox.tsx | 55 ++++++++++++++---------- src/client/views/search/SearchBox.tsx | 3 +- src/client/views/search/SearchItem.tsx | 43 +++++++++++++++++- src/client/views/search/SelectorContextMenu.scss | 1 + src/client/views/search/ToggleBar.tsx | 1 + 7 files changed, 101 insertions(+), 50 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index fb88c284f..087bc904a 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -357,6 +357,7 @@ export class MainView extends React.Component { @observable isSearchVisible = false; @action toggleSearch = () => { + // console.log("search toggling") this.isSearchVisible = !this.isSearchVisible; } diff --git a/src/client/views/search/FilterBox.scss b/src/client/views/search/FilterBox.scss index 4a8632753..1b73916c9 100644 --- a/src/client/views/search/FilterBox.scss +++ b/src/client/views/search/FilterBox.scss @@ -108,36 +108,36 @@ } .active-filters { - position: absolute; - width: 20; - z-index: 1000; display: flex; - flex-direction: column; - // overflow: visible; - // float: right; - // float: right; + flex-direction: row-reverse; + justify-content: flex-end; + width: 100%; + margin-right: 30px; + position: relative; .active-icon { + max-width: 40px; + flex: initial; + + &.icon{ + width: 40px; + text-align: center; + margin-bottom: 5px; + position: absolute; + } + &.container { display: flex; - flex-direction: row-reverse; - height: 50px; - margin-top: 10px; - margin-bottom: 5px; - // position: relative; - width: 100; + flex-direction: column; + width: 40px; } &.description { - display: flex; - font-size: 10; text-align: center; - align-items: center; - justify-content: center; - // position: relative; - height: 50px; - width: 50px; - margin-right: 5px; + top: 40px; + position: absolute; + width: 40px; + font-size: 9px; opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -151,8 +151,9 @@ } .col-icon { - height: 50px; - width: 50px; + height: 35px; + margin-left: 5px; + width: 35px; background-color: black; color: white; border-radius: 50%; diff --git a/src/client/views/search/FilterBox.tsx b/src/client/views/search/FilterBox.tsx index 5d36e650b..6053db595 100644 --- a/src/client/views/search/FilterBox.tsx +++ b/src/client/views/search/FilterBox.tsx @@ -258,7 +258,7 @@ export class FilterBox extends React.Component { getABCicon() { return ( - + @@ -268,7 +268,7 @@ export class FilterBox extends React.Component { getTypeIcon() { return ( - + ); @@ -276,7 +276,7 @@ export class FilterBox extends React.Component { getKeyIcon() { return ( - + ); @@ -285,7 +285,7 @@ export class FilterBox extends React.Component { getColIcon() { return (
- +
); } @@ -301,7 +301,7 @@ export class FilterBox extends React.Component { @action.bound handleWordQueryChange = () => { this._basicWordStatus = !this._basicWordStatus; } - @action + @action.bound getBasicWordStatus() { return this._basicWordStatus; } @action.bound @@ -357,6 +357,31 @@ export class FilterBox extends React.Component { getAuthorStatus() { return this._authorFieldStatus; } getDataStatus() { return this._dataFieldStatus; } + getActiveFilters() { + console.log(this._authorFieldStatus, this._titleFieldStatus, this._dataFieldStatus); + return ( +
+ {!this._basicWordStatus ?
+
{this.getABCicon()}
+
Required Words Applied
+
: undefined} + {!(this._icons.length === 9) ?
+
{this.getTypeIcon()}
+
Type Filters Applied
+
: undefined} + {!(this._authorFieldStatus && this._dataFieldStatus && this._titleFieldStatus) ? +
+
{this.getKeyIcon()}
+
Field Filters Applied
+
: undefined} + {this._collectionStatus ?
+
{this.getColIcon()}
+
Collection Filters Active
+
: undefined} +
+ ) + } + // Useful queries: // Delegates of a document: {!join from=id to=proto_i}id:{protoId} // Documents in a collection: {!join from=data_l to=id}id:{collectionProtoId} //id of collections prototype @@ -365,6 +390,7 @@ export class FilterBox extends React.Component {
+ {this.getActiveFilters()}
{this._filterOpen ? (
@@ -419,24 +445,7 @@ export class FilterBox extends React.Component {
) : -
-
-
{this.getABCicon()}
-
Required Words Applied
-
-
-
{this.getTypeIcon()}
-
Type Filters Applied
-
-
-
{this.getKeyIcon()}
-
Field Filters Applied
-
-
-
{this.getColIcon()}
-
Collection Filters Active
-
-
} + undefined} ); } diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index af0c541f1..dc21e4a3c 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -168,7 +168,6 @@ export class SearchBox extends React.Component { @action.bound closeSearch = () => { - console.log("closing search"); FilterBox.Instance.closeFilter(); this.closeResults(); } @@ -198,7 +197,7 @@ export class SearchBox extends React.Component { this._openNoResults ? (
No Search Results
) : null}
- + {/* */}
); diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index f8a0c7b16..f4ea3ee09 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -82,7 +82,7 @@ export class SelectorContextMenu extends React.Component { SetupDrag(item, () => doc.col, undefined, undefined, undefined, undefined, () => SearchBox.Instance.closeSearch())}> - {doc.col.title} + {doc.col.title} ; })} @@ -90,6 +90,44 @@ export class SelectorContextMenu extends React.Component { } } +export interface LinkMenuProps { + doc1: Doc; + doc2: Doc; +} + +@observer +export class LinkContextMenu extends React.Component { + + highlightDoc = (doc: Doc) => { + return () => { + doc.libraryBrush = true; + }; + } + + unHighlightDoc = (doc: Doc) => { + return () => { + doc.libraryBrush = false; + }; + } + + getOnClick(col: Doc) { + return () => { + CollectionDockingView.Instance.AddRightSplit(col, undefined); + }; + } + + render() { + return ( + + ) + } + +} + @observer export class SearchItem extends React.Component { @@ -244,7 +282,8 @@ export class SearchItem extends React.Component {
- + {this.props.doc.type === DocTypes.LINK ? : + }
); diff --git a/src/client/views/search/SelectorContextMenu.scss b/src/client/views/search/SelectorContextMenu.scss index 49f77b9bf..48cacc608 100644 --- a/src/client/views/search/SelectorContextMenu.scss +++ b/src/client/views/search/SelectorContextMenu.scss @@ -3,6 +3,7 @@ .parents { background: $lighter-alt-accent; padding: 10px; + // width: 300px; .contexts { text-transform: uppercase; diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx index 178578c5c..a30104089 100644 --- a/src/client/views/search/ToggleBar.tsx +++ b/src/client/views/search/ToggleBar.tsx @@ -59,6 +59,7 @@ export class ToggleBar extends React.Component{ this._forwardTimeline.play(); this._forwardTimeline.reverse(); this.props.handleChange(); + console.log(this.props.getStatus()) } @action.bound -- cgit v1.2.3-70-g09d2