aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/client/views/search/CheckBox.scss77
-rw-r--r--src/client/views/search/CollectionFilters.scss24
-rw-r--r--src/client/views/search/CollectionFilters.tsx11
-rw-r--r--src/client/views/search/FieldFilters.scss5
-rw-r--r--src/client/views/search/FieldFilters.tsx6
-rw-r--r--src/client/views/search/IconBar.scss1
-rw-r--r--src/client/views/search/IconBar.tsx42
-rw-r--r--src/client/views/search/SearchBox.scss6
8 files changed, 78 insertions, 94 deletions
diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss
index e8e7708f4..af59d5fbf 100644
--- a/src/client/views/search/CheckBox.scss
+++ b/src/client/views/search/CheckBox.scss
@@ -11,48 +11,49 @@
justify-content: center;
align-items: center;
margin-top: 0px;
- }
- .check-box {
- z-index: 900;
- position: relative;
- height: 20px;
- width: 20px;
- overflow: visible;
- background-color: transparent;
- border-style: solid;
- border-color: $alt-accent;
- border-width: 2px;
- -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;
+ .check-container:hover~.check-box {
+ background-color: $intermediate-color;
+ }
+
+ .check-container {
+ width: 40px;
+ height: 40px;
+ position: absolute;
+ z-index: 1000;
+
+ .checkmark {
+ z-index: 1000;
+ position: absolute;
+ fill-opacity: 0;
+ stroke-width: 4px;
+ stroke: white;
+ }
+ }
+
+ .check-box {
+ z-index: 900;
+ position: relative;
+ height: 20px;
+ width: 20px;
+ overflow: visible;
+ background-color: transparent;
+ border-style: solid;
+ border-color: $alt-accent;
+ border-width: 2px;
+ -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;
+ }
}
- .check-container:hover~.check-box {
- background-color: $intermediate-color;
- }
-
- .check-container {
- width: 40px;
- height: 40px;
- position: absolute;
- z-index: 1000;
- }
-
- .checkmark {
- z-index: 1000;
- position: absolute;
- fill-opacity: 0;
- stroke-width: 4px;
- stroke: white;
+ .checkbox-title {
+ display: flex;
+ align-items: center;
+ text-transform: capitalize;
+ margin-left: 15px;
}
}
-.checkbox-title {
- display: flex;
- align-items: center;
- text-transform: capitalize;
- margin-left: 15px;
-} \ No newline at end of file
diff --git a/src/client/views/search/CollectionFilters.scss b/src/client/views/search/CollectionFilters.scss
index 8d5ab96e7..b54cdcbd1 100644
--- a/src/client/views/search/CollectionFilters.scss
+++ b/src/client/views/search/CollectionFilters.scss
@@ -1,20 +1,20 @@
@import "../globalCssVariables";
-.collection-filters{
+.collection-filters {
display: flex;
flex-direction: row;
width: 100%;
-}
-.collection-filters.main{
- width: 47%;
- float: left;
-}
+ &.main {
+ width: 47%;
+ float: left;
+ }
-.collection-filters.optional{
- width: 60%;
- display: grid;
- grid-template-columns: 50% 50%;
- float: right;
- opacity: 0;
+ &.optional {
+ width: 60%;
+ display: grid;
+ grid-template-columns: 50% 50%;
+ float: right;
+ opacity: 0;
+ }
} \ No newline at end of file
diff --git a/src/client/views/search/CollectionFilters.tsx b/src/client/views/search/CollectionFilters.tsx
index 58b46ca29..3dd87157d 100644
--- a/src/client/views/search/CollectionFilters.tsx
+++ b/src/client/views/search/CollectionFilters.tsx
@@ -1,15 +1,8 @@
import * as React from 'react';
-import { observer } from 'mobx-react';
-import { observable, action, runInAction } from 'mobx';
-import "./SearchBox.scss";
+import { observable, action } from 'mobx';
import { CheckBox } from './CheckBox';
-import { Keys } from './SearchBox';
-import "./SearchBox.scss";
import "./CollectionFilters.scss";
-import { FieldFilters } from './FieldFilters';
import * as anime from 'animejs';
-import { DocumentView } from '../nodes/DocumentView';
-import { SelectionManager } from '../../util/SelectionManager';
interface CollectionFilterProps {
collectionStatus: boolean;
@@ -77,7 +70,7 @@ export class CollectionFilters extends React.Component<CollectionFilterProps> {
<div className="collection-filters">
<div className="collection-filters main">
<CheckBox default={false} title={"limit to current collection"} parent={this} numCount={3} updateStatus={this.updateColStat} originalStatus={this.props.collectionStatus} />
- </div>
+ </div>
<div className="collection-filters optional" ref={this.ref}>
<CheckBox default={true} title={"Search in self"} parent={this} numCount={3} updateStatus={this.props.updateSelfCollectionStatus} originalStatus={this.props.collectionSelfStatus} />
<CheckBox default={true} title={"Search in parent"} parent={this} numCount={3} updateStatus={this.props.updateParentCollectionStatus} originalStatus={this.props.collectionParentStatus} />
diff --git a/src/client/views/search/FieldFilters.scss b/src/client/views/search/FieldFilters.scss
new file mode 100644
index 000000000..ba0926140
--- /dev/null
+++ b/src/client/views/search/FieldFilters.scss
@@ -0,0 +1,5 @@
+.field-filters {
+ width: 100%;
+ display: grid;
+ grid-template-columns: 18% 20% 60%;
+} \ No newline at end of file
diff --git a/src/client/views/search/FieldFilters.tsx b/src/client/views/search/FieldFilters.tsx
index f87755478..eb12e654f 100644
--- a/src/client/views/search/FieldFilters.tsx
+++ b/src/client/views/search/FieldFilters.tsx
@@ -1,10 +1,8 @@
import * as React from 'react';
-import { observer } from 'mobx-react';
-import { observable, action, runInAction, } from 'mobx';
-import "./SearchBox.scss";
+import { observable } from 'mobx';
import { CheckBox } from './CheckBox';
import { Keys } from './SearchBox';
-import "./SearchBox.scss";
+import "./FieldFilters.scss";
export interface FieldFilterProps {
titleFieldStatus: boolean;
diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss
index db4e49fe9..cb7de15a0 100644
--- a/src/client/views/search/IconBar.scss
+++ b/src/client/views/search/IconBar.scss
@@ -1,6 +1,5 @@
@import "../globalCssVariables";
-
.icon-bar {
display: flex;
justify-content: space-evenly;
diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
index f361429f7..a446159fe 100644
--- a/src/client/views/search/IconBar.tsx
+++ b/src/client/views/search/IconBar.tsx
@@ -1,18 +1,14 @@
import * as React from 'react';
import { observer } from 'mobx-react';
-import { observable, action, runInAction } from 'mobx';
+import { observable, action } from 'mobx';
import "./SearchBox.scss";
import "./IconBar.scss";
-import * as anime from 'animejs';
import { DocTypes } from '../../documents/Documents';
import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faTimesCircle, faCheckCircle } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { library, icon } from '@fortawesome/fontawesome-svg-core';
+import { library } from '@fortawesome/fontawesome-svg-core';
import * as _ from "lodash";
-import $ from 'jquery';
-import { array } from 'prop-types';
import { IconButton } from './IconButton';
-import { list } from 'serializr';
import { SearchBox } from './SearchBox';
library.add(faSearch);
@@ -31,7 +27,7 @@ library.add(faBan);
export class IconBar extends React.Component {
static Instance: IconBar;
-
+
allIcons: string[] = [DocTypes.AUDIO, DocTypes.COL, DocTypes.HIST, DocTypes.IMG, DocTypes.LINK, DocTypes.PDF, DocTypes.TEXT, DocTypes.VID, DocTypes.WEB];
@observable public ResetClicked: boolean = false;
@observable public SelectAllClicked: boolean = false;
@@ -63,25 +59,23 @@ export class IconBar extends React.Component {
render() {
return (
- <div>
- <div className="filter icon-bar">
- <div className="filter type-outer">
- <div className={"type-icon none not-selected"}
- onClick={this.selectAll}>
- <FontAwesomeIcon className="fontawesome-icon" icon={faCheckCircle} />
- </div>
- <div className="filter-description">Select All</div>
+ <div className="icon-bar">
+ <div className="type-outer">
+ <div className={"type-icon all"}
+ onClick={this.selectAll}>
+ <FontAwesomeIcon className="fontawesome-icon" icon={faCheckCircle} />
</div>
- {this.allIcons.map((type: string) =>
- <IconButton type={type}/>
- )}
- <div className="filter type-outer">
- <div className={"type-icon none not-selected"}
- onClick={this.resetSelf}>
- <FontAwesomeIcon className="fontawesome-icon" icon={faTimesCircle} />
- </div>
- <div className="filter-description">Clear</div>
+ <div className="filter-description">Select All</div>
+ </div>
+ {this.allIcons.map((type: string) =>
+ <IconButton type={type} />
+ )}
+ <div className="type-outer">
+ <div className={"type-icon none"}
+ onClick={this.resetSelf}>
+ <FontAwesomeIcon className="fontawesome-icon" icon={faTimesCircle} />
</div>
+ <div className="filter-description">Clear</div>
</div>
</div>
);
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index b8791318e..d94edba79 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -174,10 +174,4 @@
text-transform: uppercase;
text-align: left;
font-weight: bold;
-}
-
-.field-filters {
- width: 100%;
- display: grid;
- grid-template-columns: 18% 20% 60%;
} \ No newline at end of file