From 6de23b772d7d40d75d60abd3343c1f6fd684b06f Mon Sep 17 00:00:00 2001 From: eperelm2 Date: Mon, 12 Jun 2023 14:05:37 -0400 Subject: fixing options --- src/client/views/PropertiesButtons.scss | 98 +++++++++++++++++++++------------ 1 file changed, 63 insertions(+), 35 deletions(-) (limited to 'src/client/views/PropertiesButtons.scss') diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss index 36b2df73e..f571dcf25 100644 --- a/src/client/views/PropertiesButtons.scss +++ b/src/client/views/PropertiesButtons.scss @@ -20,22 +20,31 @@ $linkGap : 3px; .propertiesButtons-linkButton-empty, .propertiesButtons-linkButton-nonempty { - height: 25px; - width: 29px; - border-radius: 6px; - pointer-events: auto; - background-color: $dark-gray; - color: #fcfbf7; - text-transform: uppercase; - letter-spacing: 2px; - font-size: 75%; - transition: transform 0.2s; - text-align: center; + // margin-right: 7px; + // margin-left: 8px; + height: 28px; + width: 226px;//29px; display: flex; - justify-content: center; align-items: center; - margin-right: 10px; - margin-left: 4px; + // height: 25px; + // width: 230px;//29px; + // display: flex; + // align-items: center; + // border-radius: 6px; + pointer-events: auto; + // background-color: $dark-gray; + // color: #fcfbf7; + // text-transform: uppercase; + // letter-spacing: 2px; + // font-size: 75%; + transition: transform 0.2s; + // text-align: center; + + + // justify-content: center; + + // margin-right: 10px; + // margin-left: 4px; &:hover { background: $medium-gray; @@ -52,19 +61,24 @@ $linkGap : 3px; color: $black; } .propertiesButtons-linkButton-empty.toggle-off { - background-color: $dark-gray; - color: white; + background-color: white;//$dark-gray; + color: black; //white; +} + +.propertiesButtons-icon { + margin-left:8px; } .propertiesButtons { - margin-top: 3px; - grid-column: 1/4; - width: 100%; - height: auto; - display: flex; - flex-direction: row; - flex-wrap: wrap; - padding-bottom: 5.5px; + position:relative; + // margin-top: 3px; +// // grid-column: 1/4; +// width: 100%; +// height: auto; +// display: flex; +// // flex-direction: row; +// // flex-wrap: wrap; +// padding-bottom: 5.5px; } .onClickFlyout-editScript { @@ -110,18 +124,32 @@ $linkGap : 3px; } } -.propertiesButtons-title { - background: $dark-gray; - color: $white; - font-size: 6px; - width: 37px; - padding: 3px; - height: 12px; - border-radius: 7px; +// .propertiesButtons-iconAndText{ +// height: 28px; +// width: 220px;//29px; +// display: flex; +// align-items: center; +// background-color: white; +// } + +.propertiesButtons-label { text-transform: uppercase; - text-align: center; - margin-top: -4px; -} + margin-left: 8px; + // margin-right: 50 px; +} + +// .propertiesButtons-title { +// background: pink; //$dark-gray; +// color: $white; +// font-size: 6px; +// width: 37px; +// padding: 3px; +// height: 12px; +// border-radius: 7px; +// text-transform: uppercase; +// text-align: center; +// margin-top: -4px; +// } .propertiesButtons-linker { height: 25px; -- cgit v1.2.3-70-g09d2 From 1a8abf3991fccd5ee5d2bd66b28a6d5562e8ef36 Mon Sep 17 00:00:00 2001 From: eperelm2 Date: Tue, 27 Jun 2023 12:33:50 -0400 Subject: options in properties menu fit better --- src/client/views/PropertiesButtons.scss | 10 +++++++--- src/client/views/PropertiesButtons.tsx | 2 +- 2 files changed, 8 insertions(+), 4 deletions(-) (limited to 'src/client/views/PropertiesButtons.scss') diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss index f571dcf25..dd4f67106 100644 --- a/src/client/views/PropertiesButtons.scss +++ b/src/client/views/PropertiesButtons.scss @@ -23,7 +23,7 @@ $linkGap : 3px; // margin-right: 7px; // margin-left: 8px; height: 28px; - width: 226px;//29px; + // width: 226px;//29px; display: flex; align-items: center; // height: 25px; @@ -55,14 +55,17 @@ $linkGap : 3px; .propertiesButtons-linkButton-empty.toggle-on { background-color: $medium-blue; color: $white; + width:100% } .propertiesButtons-linkButton-empty.toggle-hover { background-color: $light-blue; color: $black; + width:100% } .propertiesButtons-linkButton-empty.toggle-off { background-color: white;//$dark-gray; color: black; //white; + width:100% } .propertiesButtons-icon { @@ -71,6 +74,7 @@ $linkGap : 3px; .propertiesButtons { position:relative; + width: 100%; // margin-top: 3px; // // grid-column: 1/4; // width: 100%; @@ -94,8 +98,8 @@ $linkGap : 3px; .propertiesButtons-button { pointer-events: auto; - padding-right: 5px; - width: 25px; + padding-right: 8px;//5px; + width: 100%;//width: 25px; border-radius: 5px; margin-right: 20px; margin-bottom: 8px; diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 2a31f0f2c..ba25e6697 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -126,7 +126,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { @computed get clustersButton() { return this.propertyToggleBtn( - on => 'Clusters', + on => (on ?'DISABLE CLUSTERS' : 'HIGHLIGHT CLUSTERS'), '_freeform_useClusters', on => `${on ? 'Hide' : 'Show'} clusters`, on => -- cgit v1.2.3-70-g09d2 From c9779f31d9ce2363e61c3c9fa7e3446203622dde Mon Sep 17 00:00:00 2001 From: eperelm2 Date: Mon, 17 Jul 2023 16:02:35 -0400 Subject: starting remodel for filter --- src/client/views/FilterPanel.scss | 23 ++++++++++++++++++++++- src/client/views/FilterPanel.tsx | 21 ++++++++++++++++++--- src/client/views/PropertiesButtons.scss | 8 -------- src/client/views/PropertiesButtons.tsx | 4 ++-- 4 files changed, 42 insertions(+), 14 deletions(-) (limited to 'src/client/views/PropertiesButtons.scss') diff --git a/src/client/views/FilterPanel.scss b/src/client/views/FilterPanel.scss index c903f29ee..34d06ea23 100644 --- a/src/client/views/FilterPanel.scss +++ b/src/client/views/FilterPanel.scss @@ -156,7 +156,7 @@ right: 0; top: 0; z-index: 1; - background-color: #9f9f9f; + // background-color: #9f9f9f; .filterBox-tree { z-index: 0; @@ -182,6 +182,7 @@ } .filterBox-tree { + padding-top: 8px; display: inline-block; width: 100%; margin-bottom: 10px; @@ -189,3 +190,23 @@ overflow: auto; } } + + + +.filterBox-facetHeader{ + display: flex; + align-items: center; + // float:right; + + .filterBox-facetHeader-collapse{ + float: right; + justify-items: right; + align-items: flex-end; + margin-left: auto; + margin-right: 9px; + } + +} + + + diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx index a5c18cd8b..b10fafb57 100644 --- a/src/client/views/FilterPanel.tsx +++ b/src/client/views/FilterPanel.tsx @@ -11,6 +11,8 @@ import './FilterPanel.scss'; import { FieldView } from './nodes/FieldView'; import { SearchBox } from './search/SearchBox'; import { undoable } from '../util/UndoManager'; +import { AiOutlineMinusSquare } from 'react-icons/ai'; +import { CiCircleRemove } from 'react-icons/ci'; interface filterProps { rootDoc: Doc; @@ -167,13 +169,15 @@ export class FilterPanel extends React.Component { render() { const options = this._allFacets.filter(facet => this.currentFacets.indexOf(facet) === -1).map(facet => ({ value: facet, label: facet })); + console.log("this is option " + options) + console.log("this is alll facets " + this._allFacets) return (
this.targetDoc && (this.targetDoc._childFilters_boolean = (e.target as any).value))} defaultValue={StrCast(this.targetDoc?.childFilters_boolean)}> {['AND', 'OR'].map(bool => ( ))} -
{' '} +
{' '} */}
{Array.from(this.activeFacets.keys()).map(facetHeader => (
- {facetHeader} +
+
+ {facetHeader.charAt(0).toUpperCase() + facetHeader.slice(1)} + +
+ + +
+ +
+ + {this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader)}
))} diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss index dd4f67106..b801b3abf 100644 --- a/src/client/views/PropertiesButtons.scss +++ b/src/client/views/PropertiesButtons.scss @@ -128,14 +128,6 @@ $linkGap : 3px; } } -// .propertiesButtons-iconAndText{ -// height: 28px; -// width: 220px;//29px; -// display: flex; -// align-items: center; -// background-color: white; -// } - .propertiesButtons-label { text-transform: uppercase; margin-left: 8px; diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 387397e9d..7a9820a35 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -60,7 +60,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { return !targetDoc ? null : ( {tooltip(targetDoc?.[property])}
} placement="top"> -
+
e.stopPropagation()} @@ -74,7 +74,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{label(targetDoc?.[property])}
{/* */}
-
+ ); }; -- cgit v1.2.3-70-g09d2