diff options
Diffstat (limited to 'src/client/views')
| -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 | 
