From b7296dc3bfb9ad0842a4c0298152f2023d47e1b3 Mon Sep 17 00:00:00 2001 From: anika Date: Sun, 27 Dec 2020 14:19:01 -0600 Subject: rough UI restructure --- src/client/views/MainView.tsx | 2 +- src/client/views/nodes/FilterBox.scss | 128 ++++++++++++++++++++++++++++++---- src/client/views/nodes/FilterBox.tsx | 97 +++++++++++++++++++++++--- 3 files changed, 206 insertions(+), 21 deletions(-) (limited to 'src') 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(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(); if (CollectionDockingView.Instance) { @@ -159,6 +165,37 @@ export class FilterBox extends ViewBoxBaseComponent 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 =
e.stopPropagation()}> @@ -170,14 +207,35 @@ export class FilterBox extends ViewBoxBaseComponent; return this.props.dontRegisterView ? (null) :
-
e.stopPropagation()}> - -
- - Choose Facets -
- +
+
+ + {/*
e.stopPropagation()}> +
*/} +
+ Choose Filters +
+ {/*
+
*/} + +
+ +
specified filters
+
+ +
+
Scope:
+ +
+
+ +
+
+ add a filter
+
+ + +
+ this.changeSelected(e)} /> +
select
+ +
documents
+
+ +
+
+ +
SAVE
+
+
; } } -- cgit v1.2.3-70-g09d2