diff options
-rw-r--r-- | src/client/views/search/CheckBox.scss | 77 | ||||
-rw-r--r-- | src/client/views/search/CollectionFilters.scss | 24 | ||||
-rw-r--r-- | src/client/views/search/CollectionFilters.tsx | 11 | ||||
-rw-r--r-- | src/client/views/search/FieldFilters.scss | 5 | ||||
-rw-r--r-- | src/client/views/search/FieldFilters.tsx | 6 | ||||
-rw-r--r-- | src/client/views/search/IconBar.scss | 1 | ||||
-rw-r--r-- | src/client/views/search/IconBar.tsx | 42 | ||||
-rw-r--r-- | src/client/views/search/SearchBox.scss | 6 |
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 |