diff options
| -rw-r--r-- | src/client/views/nodes/FilterBox.scss | 29 | ||||
| -rw-r--r-- | src/client/views/nodes/FilterBox.tsx | 50 |
2 files changed, 51 insertions, 28 deletions
diff --git a/src/client/views/nodes/FilterBox.scss b/src/client/views/nodes/FilterBox.scss index 9843c4b1c..62f972218 100644 --- a/src/client/views/nodes/FilterBox.scss +++ b/src/client/views/nodes/FilterBox.scss @@ -22,10 +22,16 @@ } } +.filterBox-bottom { + position: fixed; + bottom: 0; + width: 100%; +} + .filterBox-saveBookmark { width: 105px; - background-color: rgb(216, 214, 214); + background-color: #f5f5f5; border-radius: 6px; padding: 5px; margin: 5px; @@ -79,9 +85,17 @@ width: 100%; } +// .filterBox-top { +// padding-bottom: 20px; +// border-bottom: 2px solid black; +// position: fixed; +// top: 0; +// width: 100%; +// } + .filterBox-select-scope { - margin-bottom: 5px; - // border-bottom: 1px solid black; + padding-bottom: 20px; + border-bottom: 2px solid black; } .filterBox-select-text { @@ -98,7 +112,7 @@ .filterBox-selection { border-radius: 6px; border: none; - background-color: rgb(216, 214, 214); + background-color: #f5f5f5; padding: 2px; &:hover { @@ -108,7 +122,7 @@ .filterBox-addFilter { width: 100px; - background-color: rgb(216, 214, 214); + background-color: #f5f5f5; border-radius: 6px; padding: 5px; margin: 5px; @@ -129,13 +143,12 @@ top: 0; border-left: solid 1px; z-index: 1; - background-color: darkGray; + background-color: #D3D3D3; .filterBox-addfacet { display: inline-block; width: 200px; height: 30px; - background: darkGray; text-align: left; .filterBox-addFacetButton { @@ -154,6 +167,6 @@ .filterBox-tree { display: inline-block; width: 100%; - height: calc(100% - 30px); + //height: calc(100% - 30px); } }
\ No newline at end of file diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx index 7c03b0835..95ffc6f8c 100644 --- a/src/client/views/nodes/FilterBox.tsx +++ b/src/client/views/nodes/FilterBox.tsx @@ -21,6 +21,7 @@ import './FilterBox.scss'; import { Scripting } from "../../util/Scripting"; import { values } from "lodash"; import { tokenToString } from "typescript"; +import { SelectionManager } from "../../util/SelectionManager"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -158,7 +159,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc newFacet && Doc.AddDocToList(this.dataDoc, this.props.fieldKey, newFacet); } } - filterBackground = () => "rgba(105, 105, 105, 0.432)"; + filterBackground = () => "#d3d3d3"; @computed get scriptField() { const scriptText = "setDocFilter(this?.target, heading, this.title, checked)"; const script = ScriptField.MakeScript(scriptText, { this: Doc.name, heading: "string", checked: "string", containingTreeView: Doc.name }); @@ -188,7 +189,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc changeSelected = (e: any) => { if (this._filterSelected) { this._filterSelected = false; - // helper method to deselect all documents + SelectionManager.DeselectAll(); } else { this._filterSelected = true; // helper method to select specified docs @@ -206,18 +207,24 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc </label>)} </div>; + const newFlyout = <div className="filterBox-flyout" style={{ width: `100%`, height: this.props.PanelHeight() - 30 }} onWheel={e => e.stopPropagation()}> + {this._allFacets.map(facet => <label className="filterBox-flyout-facet" key={`${facet}`} onClick={e => this.facetClick(facet)}> + <input type="checkbox" onChange={e => { }} checked={DocListCast(this.props.Document[this.props.fieldKey]).some(d => d.title === facet)} /> + <span className="checkmark" /> + {facet} + </label>)} + </div> + return this.props.dontRegisterView ? (null) : <div className="filterBox-treeView" style={{ width: "100%" }}> + + {/* <div className="filterBox-top"> */} <div className="filter-bookmark"> <FontAwesomeIcon className="filter-bookmark-icon" icon={"bookmark"} size={"lg"} /> </div> - {/* <div className="filterBox-addFacet" style={{ width: "100%" }} onPointerDown={e => e.stopPropagation()}> - <div className="filterBox-addFacetButton"> */} <div className="filterBox-title"> <span className="filterBox-span">Choose Filters</span> </div> - {/* </div> - </div> */} <div className="filterBox-select-bool"> <select className="filterBox-selection" onChange={e => this.changeBool(e)}> @@ -235,6 +242,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc <option value="Current Collection" key="Current Collection">Current Collection</option> </select> </div> + {/* </div> */} <div className="filterBox-tree" key="tree"> <CollectionTreeView @@ -277,21 +285,23 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc </div> </Flyout> - <div className="filterBox-select-matched"> - <input className="filterBox-select-box" type="checkbox" - onChange={e => this.changeSelected(e)} /> - <div className="filterBox-select-text">select</div> - <select className="filterBox-selection" onChange={e => this.changeMatch(e)}> - <option value="matched" key="matched">matched</option> - <option value="unmatched" key="unmatched">unmatched</option> - </select> - <div className="filterBox-select-text">documents</div> - </div> + <div className="filterBox-bottom"> + <div className="filterBox-select-matched"> + <input className="filterBox-select-box" type="checkbox" + onChange={e => this.changeSelected(e)} /> + <div className="filterBox-select-text">select</div> + <select className="filterBox-selection" onChange={e => this.changeMatch(e)}> + <option value="matched" key="matched">matched</option> + <option value="unmatched" key="unmatched">unmatched</option> + </select> + <div className="filterBox-select-text">documents</div> + </div> - <div className="filterBox-saveWrapper"> - <div className="filterBox-saveBookmark"> - <FontAwesomeIcon className="filterBox-saveBookmark-icon" icon={"bookmark"} size={"sm"} /> - <div>SAVE</div> + <div className="filterBox-saveWrapper"> + <div className="filterBox-saveBookmark"> + <FontAwesomeIcon className="filterBox-saveBookmark-icon" icon={"bookmark"} size={"sm"} /> + <div>SAVE</div> + </div> </div> </div> </div>; |