aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/MainView.tsx2
-rw-r--r--src/client/views/nodes/FilterBox.scss128
-rw-r--r--src/client/views/nodes/FilterBox.tsx97
3 files changed, 206 insertions, 21 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 5eb8429f0..b05346d4c 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -163,7 +163,7 @@ export class MainView extends React.Component {
fa.faWindowMinimize, fa.faWindowRestore, fa.faTextWidth, fa.faTextHeight, fa.faClosedCaptioning, fa.faInfoCircle, fa.faTag, fa.faSyncAlt, fa.faPhotoVideo,
fa.faArrowAltCircleDown, fa.faArrowAltCircleUp, fa.faArrowAltCircleLeft, fa.faArrowAltCircleRight, fa.faStopCircle, fa.faCheckCircle, fa.faGripVertical,
fa.faSortUp, fa.faSortDown, fa.faTable, fa.faTh, fa.faThList, fa.faProjectDiagram, fa.faSignature, fa.faColumns, fa.faChevronCircleUp, fa.faUpload, fa.faBorderAll,
- fa.faBraille, fa.faChalkboard, fa.faPencilAlt, fa.faEyeSlash, fa.faSmile, fa.faIndent, fa.faOutdent, fa.faChartBar, fa.faBan, fa.faPhoneSlash, fa.faGripLines);
+ fa.faBraille, fa.faChalkboard, fa.faPencilAlt, fa.faEyeSlash, fa.faSmile, fa.faIndent, fa.faOutdent, fa.faChartBar, fa.faBan, fa.faPhoneSlash, fa.faGripLines, fa.faBookmark);
this.initAuthenticationRouters();
}
diff --git a/src/client/views/nodes/FilterBox.scss b/src/client/views/nodes/FilterBox.scss
index d32cc0d2b..9843c4b1c 100644
--- a/src/client/views/nodes/FilterBox.scss
+++ b/src/client/views/nodes/FilterBox.scss
@@ -1,17 +1,124 @@
-
-
.filterBox-flyout {
- width: 400px;
display: block;
text-align: left;
+
.filterBox-flyout-facet {
- background-color: lightgray;
- text-align: left;
- display: inline-block;
- position: relative;
- width: 100%;
+ background-color: lightgray;
+ text-align: left;
+ display: inline-block;
+ position: relative;
+ width: 100%;
+ }
+}
+
+
+.filter-bookmark {
+ //display: flex;
+
+ .filter-bookmark-icon {
+ float: right;
+ margin-right: 10px;
+ margin-top: 7px;
+ }
+}
+
+
+.filterBox-saveBookmark {
+ width: 105px;
+ background-color: rgb(216, 214, 214);
+ border-radius: 6px;
+ padding: 5px;
+ margin: 5px;
+ display: flex;
+ font-size: 17px;
+
+ &:hover {
+ background-color: white;
+ }
+
+ .filterBox-saveBookmark-icon {
+ margin-right: 10px;
+ margin-top: 4px;
+ margin-left: 10px;
}
+
}
+
+.filterBox-title {
+
+ justify-content: center;
+ text-align: center;
+ padding-bottom: 13px;
+ font-size: 20px;
+ font-weight: bold;
+
+ .filterBox-span {
+ margin-right: 15px;
+ }
+
+}
+
+.filterBox-select-scope,
+.filterBox-select-bool,
+.filterBox-addWrapper,
+.filterBox-select-matched,
+.filterBox-saveWrapper {
+ font-size: 12px;
+ justify-content: center;
+ justify-items: center;
+ padding-bottom: 10px;
+ display: flex;
+}
+
+.filterBox-addWrapper {
+ font-size: 15px;
+ width: 100%;
+}
+
+.filterBox-saveWrapper {
+ width: 100%;
+}
+
+.filterBox-select-scope {
+ margin-bottom: 5px;
+ // border-bottom: 1px solid black;
+}
+
+.filterBox-select-text {
+ margin-right: 8px;
+ margin-left: 8px;
+}
+
+.filterBox-select-box {
+ margin-right: 2px;
+ font-size: 30px;
+ border: none;
+}
+
+.filterBox-selection {
+ border-radius: 6px;
+ border: none;
+ background-color: rgb(216, 214, 214);
+ padding: 2px;
+
+ &:hover {
+ background-color: white;
+ }
+}
+
+.filterBox-addFilter {
+ width: 100px;
+ background-color: rgb(216, 214, 214);
+ border-radius: 6px;
+ padding: 5px;
+ margin: 5px;
+ display: flex;
+
+ &:hover {
+ background-color: white;
+ }
+}
+
.filterBox-treeView {
display: flex;
flex-direction: column;
@@ -22,6 +129,7 @@
top: 0;
border-left: solid 1px;
z-index: 1;
+ background-color: darkGray;
.filterBox-addfacet {
display: inline-block;
@@ -34,10 +142,6 @@
display: flex;
margin: auto;
cursor: pointer;
-
- .filterBox-span {
- margin-right: 15px;
- }
}
>div,
diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx
index 730ae8f10..7c03b0835 100644
--- a/src/client/views/nodes/FilterBox.tsx
+++ b/src/client/views/nodes/FilterBox.tsx
@@ -1,6 +1,6 @@
import React = require("react");
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { computed } from "mobx";
+import { action, computed } from "mobx";
import { observer } from "mobx-react";
import { DataSym, Doc, DocListCast, Field, Opt } from "../../../fields/Doc";
import { documentSchema } from "../../../fields/documentSchemas";
@@ -20,6 +20,7 @@ import { FieldView, FieldViewProps } from './FieldView';
import './FilterBox.scss';
import { Scripting } from "../../util/Scripting";
import { values } from "lodash";
+import { tokenToString } from "typescript";
const higflyout = require("@hig/flyout");
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
@@ -31,6 +32,11 @@ const FilterBoxDocument = makeInterface(documentSchema);
export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDocument>(FilterBoxDocument) {
public static LayoutString(fieldKey: string) { return FieldView.LayoutString(FilterBox, fieldKey); }
+ public _filterBoolean = "AND";
+ public _filterScope = "Current Dashboard";
+ public _filterSelected = false;
+ public _filterMatch = "matched";
+
@computed get allDocs() {
const allDocs = new Set<Doc>();
if (CollectionDockingView.Instance) {
@@ -159,6 +165,37 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
return script ? () => script : undefined;
}
+ @action
+ changeBool = (e: any) => {
+ this._filterBoolean = e.currentTarget.value;
+ console.log(this._filterBoolean);
+ }
+
+ @action
+ changeScope = (e: any) => {
+ this._filterScope = e.currentTarget.value;
+ console.log(this._filterScope);
+ }
+
+ @action
+ changeMatch = (e: any) => {
+ this._filterMatch = e.currentTarget.value;
+ console.log(this._filterMatch);
+ }
+
+
+ @action
+ changeSelected = (e: any) => {
+ if (this._filterSelected) {
+ this._filterSelected = false;
+ // helper method to deselect all documents
+ } else {
+ this._filterSelected = true;
+ // helper method to select specified docs
+ }
+ console.log(this._filterSelected);
+ }
+
render() {
const facetCollection = this.props.Document;
const flyout = <div className="filterBox-flyout" style={{ width: `100%`, height: this.props.PanelHeight() - 30 }} onWheel={e => e.stopPropagation()}>
@@ -170,14 +207,35 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
</div>;
return this.props.dontRegisterView ? (null) : <div className="filterBox-treeView" style={{ width: "100%" }}>
- <div className="filterBox-addFacet" style={{ width: "100%" }} onPointerDown={e => e.stopPropagation()}>
- <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={flyout}>
- <div className="filterBox-addFacetButton">
- <FontAwesomeIcon icon={"edit"} size={"lg"} />
- <span className="filterBox-span">Choose Facets</span>
- </div>
- </Flyout>
+ <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)}>
+ <option value="AND" key="AND">AND</option>
+ <option value="OR" key="OR">OR</option>
+ </select>
+ <div className="filterBox-select-text">specified filters</div>
+ </div>
+
+ <div className="filterBox-select-scope">
+ <div className="filterBox-select-text">Scope: </div>
+ <select className="filterBox-selection" onChange={e => this.changeScope(e)}>
+ <option value="Current Dashboard" key="Current Dashboard">Current Dashboard</option>
+ <option value="Current Tab" key="Current Tab">Current Tab</option>
+ <option value="Current Collection" key="Current Collection">Current Collection</option>
+ </select>
+ </div>
+
<div className="filterBox-tree" key="tree">
<CollectionTreeView
Document={facetCollection}
@@ -213,6 +271,29 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
removeDocument={returnFalse}
addDocument={returnFalse} />
</div>
+ <Flyout className="filterBox-flyout" anchorPoint={anchorPoints.LEFT_TOP} content={flyout}>
+ <div className="filterBox-addWrapper">
+ <div className="filterBox-addFilter"> + add a filter</div>
+ </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-saveWrapper">
+ <div className="filterBox-saveBookmark">
+ <FontAwesomeIcon className="filterBox-saveBookmark-icon" icon={"bookmark"} size={"sm"} />
+ <div>SAVE</div>
+ </div>
+ </div>
</div>;
}
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 19:31:01 +0000