aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/Main.scss38
-rw-r--r--src/client/views/search/CheckBox.scss10
-rw-r--r--src/client/views/search/FieldFilters.scss9
-rw-r--r--src/client/views/search/FilterBox.scss20
-rw-r--r--src/client/views/search/FilterBox.tsx52
-rw-r--r--src/client/views/search/IconBar.scss5
-rw-r--r--src/client/views/search/IconButton.scss13
-rw-r--r--src/client/views/search/RequiredWordsFilters.tsx37
-rw-r--r--src/client/views/search/ToggleBar.scss9
9 files changed, 136 insertions, 57 deletions
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index a16123476..eed2ae4fa 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -24,7 +24,7 @@ div {
.jsx-parser {
width: 100%;
- height:100%;
+ height: 100%;
pointer-events: none;
border-radius: inherit;
}
@@ -119,6 +119,7 @@ button:hover {
margin-bottom: 10px;
}
}
+
.toolbar-color-picker {
background-color: $light-color;
border-radius: 5px;
@@ -128,6 +129,7 @@ button:hover {
left: -3px;
box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw;
}
+
.toolbar-color-button {
border-radius: 11px;
width: 22px;
@@ -146,7 +148,7 @@ button:hover {
bottom: 22px;
left: 250px;
- > label {
+ >label {
background: $dark-color;
color: $light-color;
display: inline-block;
@@ -168,15 +170,15 @@ button:hover {
transform: scale(1.15);
}
- > input {
+ >input {
display: none;
}
- > input:not(:checked)~#add-options-content {
+ >input:not(:checked)~#add-options-content {
display: none;
}
- > input:checked~label {
+ >input:checked~label {
transform: rotate(45deg);
transition: transform 0.5s;
cursor: pointer;
@@ -221,7 +223,7 @@ ul#add-options-list {
list-style: none;
padding: 5 0 0 0;
- > li {
+ >li {
display: inline-block;
padding: 0;
}
@@ -231,7 +233,7 @@ ul#add-options-list {
height: 100%;
position: absolute;
display: flex;
- flex-direction:column;
+ flex-direction: column;
}
.mainView-libraryHandle {
@@ -243,21 +245,25 @@ ul#add-options-list {
position: absolute;
z-index: 1;
}
+
.svg-inline--fa {
vertical-align: unset;
}
+
.mainView-workspace {
- height:200px;
- position:relative;
- display:flex;
+ height: 200px;
+ position: relative;
+ display: flex;
}
+
.mainView-library {
- height:75%;
- position:relative;
- display:flex;
+ height: 75%;
+ position: relative;
+ display: flex;
}
+
.mainView-recentlyClosed {
- height:25%;
- position:relative;
- display:flex;
+ height: 25%;
+ position: relative;
+ display: flex;
} \ No newline at end of file
diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss
index af59d5fbf..cc858bec6 100644
--- a/src/client/views/search/CheckBox.scss
+++ b/src/client/views/search/CheckBox.scss
@@ -13,9 +13,9 @@
margin-top: 0px;
.check-container:hover~.check-box {
- background-color: $intermediate-color;
+ background-color: $darker-alt-accent;
}
-
+
.check-container {
width: 40px;
height: 40px;
@@ -27,7 +27,8 @@
position: absolute;
fill-opacity: 0;
stroke-width: 4px;
- stroke: white;
+ // stroke: white;
+ stroke: gray;
}
}
@@ -55,5 +56,4 @@
margin-left: 15px;
}
-}
-
+} \ No newline at end of file
diff --git a/src/client/views/search/FieldFilters.scss b/src/client/views/search/FieldFilters.scss
index ba0926140..e1d0d8df5 100644
--- a/src/client/views/search/FieldFilters.scss
+++ b/src/client/views/search/FieldFilters.scss
@@ -1,5 +1,12 @@
.field-filters {
width: 100%;
display: grid;
- grid-template-columns: 18% 20% 60%;
+ // grid-template-columns: 18% 20% 60%;
+ grid-template-columns: 20% 25% 60%;
+}
+
+.field-filters-required {
+ width: 100%;
+ display: grid;
+ grid-template-columns: 50% 50%;
} \ No newline at end of file
diff --git a/src/client/views/search/FilterBox.scss b/src/client/views/search/FilterBox.scss
index 1eb8963d7..81a2c68e7 100644
--- a/src/client/views/search/FilterBox.scss
+++ b/src/client/views/search/FilterBox.scss
@@ -3,22 +3,25 @@
.filter-form {
padding: 25px;
- width: 600px;
- background: $dark-color;
+ width: 440px;
+ background: whitesmoke;
position: relative;
right: 1px;
- color: $light-color;
+ color: grey;
flex-direction: column;
display: inline-block;
transform-origin: top;
overflow: auto;
+ border-radius: 15px;
+ box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw;
+ border: solid #BBBBBBBB 1px;
.top-filter-header {
#header {
text-transform: uppercase;
letter-spacing: 2px;
- font-size: 25;
+ font-size: 13;
width: 80%;
}
@@ -26,13 +29,13 @@
width: 20%;
opacity: .6;
position: relative;
- display: inline-block;
+ display: block;
.line {
display: block;
background: $alt-accent;
- width: $width-line;
- height: $height-line;
+ width: 20;
+ height: 3;
position: absolute;
right: 0;
border-radius: ($height-line / 2);
@@ -69,9 +72,10 @@
display: flex;
align-items: center;
margin-bottom: 10px;
+ letter-spacing: 2px;
.filter-title {
- font-size: 18;
+ font-size: 13;
text-transform: uppercase;
margin-top: 10px;
margin-bottom: 10px;
diff --git a/src/client/views/search/FilterBox.tsx b/src/client/views/search/FilterBox.tsx
index 706d1eb7f..91d305e24 100644
--- a/src/client/views/search/FilterBox.tsx
+++ b/src/client/views/search/FilterBox.tsx
@@ -15,10 +15,11 @@ import { FieldFilters } from './FieldFilters';
import { SelectionManager } from '../../util/SelectionManager';
import { DocumentView } from '../nodes/DocumentView';
import { CollectionFilters } from './CollectionFilters';
-import { NaviconButton } from './NaviconButton';
+// import { NaviconButton } from './NaviconButton';
import * as $ from 'jquery';
import "./FilterBox.scss";
import { SearchBox } from './SearchBox';
+import { RequiredWordsFilter } from './RequiredWordsFilters';
library.add(faTimes);
@@ -38,6 +39,8 @@ export class FilterBox extends React.Component {
@observable private _basicWordStatus: boolean = true;
@observable private _filterOpen: boolean = false;
@observable private _icons: string[] = this._allIcons;
+ @observable private _anyKeywordStatus: boolean = true;
+ @observable private _allKeywordStatus: boolean = true;
@observable private _titleFieldStatus: boolean = true;
@observable private _authorFieldStatus: boolean = true;
@observable public _deletedDocsStatus: boolean = false;
@@ -115,6 +118,7 @@ export class FilterBox extends React.Component {
@action.bound
resetFilters = () => {
ToggleBar.Instance.resetToggle();
+ // RequiredWordsFilter.Instance.resetRequiredFieldFilters();
IconBar.Instance.selectAll();
FieldFilters.Instance.resetFieldFilters();
CollectionFilters.Instance.resetCollectionFilters();
@@ -289,17 +293,23 @@ export class FilterBox extends React.Component {
this._filterOpen = false;
}
- @action.bound
- toggleFieldOpen() { this._fieldOpen = !this._fieldOpen; }
+ // @action.bound
+ // toggleFieldOpen() { this._fieldOpen = !this._fieldOpen; }
- @action.bound
- toggleColOpen() { this._colOpen = !this._colOpen; }
+ // @action.bound
+ // toggleColOpen() { this._colOpen = !this._colOpen; }
+
+ // @action.bound
+ // toggleTypeOpen() { this._typeOpen = !this._typeOpen; }
+
+ // @action.bound
+ // toggleWordStatusOpen() { this._wordStatusOpen = !this._wordStatusOpen; }
@action.bound
- toggleTypeOpen() { this._typeOpen = !this._typeOpen; }
+ updateAnyKeywordStatus(newStat: boolean) { this._anyKeywordStatus = newStat; }
@action.bound
- toggleWordStatusOpen() { this._wordStatusOpen = !this._wordStatusOpen; }
+ updateAllKeywordStatus(newStat: boolean) { this._allKeywordStatus = newStat; }
@action.bound
updateTitleStatus(newStat: boolean) { this._titleFieldStatus = newStat; }
@@ -319,6 +329,8 @@ export class FilterBox extends React.Component {
@action.bound
updateParentCollectionStatus(newStat: boolean) { this._collectionParentStatus = newStat; }
+ getAnyKeywordStatus() { return this._anyKeywordStatus; }
+ getAllKeywordStatus() { return this._allKeywordStatus; }
getCollectionStatus() { return this._collectionStatus; }
getSelfCollectionStatus() { return this._collectionSelfStatus; }
getParentCollectionStatus() { return this._collectionParentStatus; }
@@ -339,6 +351,7 @@ export class FilterBox extends React.Component {
<div className="filter-form" onPointerDown={this.stopProp} id="filter-form" style={this._filterOpen ? { display: "flex" } : { display: "none" }}>
<div className="top-filter-header" style={{ display: "flex", width: "100%" }}>
<div id="header">Filter Search Results</div>
+ <div style={{ marginLeft: "auto" }}></div>
<div className="close-icon" onClick={this.closeFilter}>
<span className="line line-1"></span>
<span className="line line-2"></span></div>
@@ -347,21 +360,28 @@ export class FilterBox extends React.Component {
<div className="filter-div">
<div className="filter-header">
<div className='filter-title words'>Required words</div>
- <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleWordStatusOpen} /></div>
+ {/* <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleWordStatusOpen} /></div> */}
</div>
<div className="filter-panel" >
- <ToggleBar handleChange={this.handleWordQueryChange} getStatus={this.getBasicWordStatus}
- originalStatus={this._basicWordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} />
+ <button className="save-filter" onClick={this.getBasicWordStatus}>Include Any Keywords</button>
+ <button className="reset-filter" onClick={this.handleWordQueryChange}>Include All Keywords</button>
+ {/* <ToggleBar handleChange={this.handleWordQueryChange} getStatus={this.getBasicWordStatus}
+ originalStatus={this._basicWordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} /> */}
</div>
+ {/* <div className="filter-panel" >
+ <RequiredWordsFilter
+ anyKeywordStatus={this._anyKeywordStatus} allKeywordStatus={this._allKeywordStatus}
+ updateAnyKeywordStatus={this.updateAnyKeywordStatus} updateAllKeywordStatus={this.updateAllKeywordStatus} />
+ </div> */}
</div>
<div className="filter-div">
<div className="filter-header">
<div className="filter-title icon">Filter by type of node</div>
- <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleTypeOpen} /></div>
+ {/* <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleTypeOpen} /></div> */}
</div>
<div className="filter-panel"><IconBar /></div>
</div>
- <div className="filter-div">
+ {/* <div className="filter-div">
<div className="filter-header">
<div className='filter-title collection'>Search in current collections</div>
<div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleColOpen} /></div>
@@ -369,11 +389,11 @@ export class FilterBox extends React.Component {
<div className="filter-panel"><CollectionFilters
updateCollectionStatus={this.updateCollectionStatus} updateParentCollectionStatus={this.updateParentCollectionStatus} updateSelfCollectionStatus={this.updateSelfCollectionStatus}
collectionStatus={this._collectionStatus} collectionParentStatus={this._collectionParentStatus} collectionSelfStatus={this._collectionSelfStatus} /></div>
- </div>
+ </div> */}
<div className="filter-div">
<div className="filter-header">
<div className="filter-title field">Filter by Basic Keys</div>
- <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleFieldOpen} /></div>
+ {/* <div style={{ marginLeft: "auto" }}><NaviconButton onClick={this.toggleFieldOpen} /></div> */}
</div>
<div className="filter-panel"><FieldFilters
titleFieldStatus={this._titleFieldStatus} dataFieldStatus={this._deletedDocsStatus} authorFieldStatus={this._authorFieldStatus}
@@ -381,8 +401,8 @@ export class FilterBox extends React.Component {
</div>
</div>
<div className="filter-buttons" style={{ display: "flex", justifyContent: "space-around" }}>
- <button className="minimize-filter" onClick={this.minimizeAll}>Minimize All</button>
- <button className="advanced-filter" >Advanced Filters</button>
+ {/* <button className="minimize-filter" onClick={this.minimizeAll}>Minimize All</button>
+ <button className="advanced-filter" >Advanced Filters</button> */}
<button className="save-filter" >Save Filters</button>
<button className="reset-filter" onClick={this.resetFilters}>Reset Filters</button>
</div>
diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss
index e384722ce..2555ad271 100644
--- a/src/client/views/search/IconBar.scss
+++ b/src/client/views/search/IconBar.scss
@@ -4,9 +4,8 @@
display: flex;
justify-content: space-evenly;
align-items: center;
- height: 40px;
+ height: 35px;
width: 100%;
flex-wrap: wrap;
margin-bottom: 10px;
-}
-
+} \ No newline at end of file
diff --git a/src/client/views/search/IconButton.scss b/src/client/views/search/IconButton.scss
index 94b294ba5..1abf7e6d9 100644
--- a/src/client/views/search/IconButton.scss
+++ b/src/client/views/search/IconButton.scss
@@ -4,13 +4,14 @@
display: flex;
flex-direction: column;
align-items: center;
- width: 45px;
+ width: 30px;
height: 60px;
.type-icon {
- height: 45px;
- width: 45px;
+ height: 30px;
+ width: 30px;
color: $light-color;
+ background-color: rgb(194, 194, 197);
border-radius: 50%;
display: flex;
justify-content: center;
@@ -22,8 +23,8 @@
font-size: 2em;
.fontawesome-icon {
- height: 24px;
- width: 24px;
+ height: 15px;
+ width: 15px
}
}
@@ -44,7 +45,7 @@
transform: scale(1.1);
background-color: $darker-alt-accent;
opacity: 1;
-
+
+.filter-description {
opacity: 1;
}
diff --git a/src/client/views/search/RequiredWordsFilters.tsx b/src/client/views/search/RequiredWordsFilters.tsx
new file mode 100644
index 000000000..23ac6a9aa
--- /dev/null
+++ b/src/client/views/search/RequiredWordsFilters.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { observable } from 'mobx';
+import { CheckBox } from './CheckBox';
+import "./FieldFilters.scss";
+
+export interface RequiredWordsFilterProps {
+ anyKeywordStatus: boolean;
+ allKeywordStatus: boolean;
+ updateAnyKeywordStatus(stat: boolean): void;
+ updateAllKeywordStatus(stat: boolean): void;
+}
+
+export class RequiredWordsFilter extends React.Component<RequiredWordsFilterProps> {
+
+ static Instance: RequiredWordsFilter;
+
+ @observable public _resetBoolean = false;
+ @observable public _resetCounter: number = 0;
+
+ constructor(props: RequiredWordsFilterProps) {
+ super(props);
+ RequiredWordsFilter.Instance = this;
+ }
+
+ resetRequiredFieldFilters() {
+ this._resetBoolean = true;
+ }
+
+ render() {
+ return (
+ <div className="field-filters-required">
+ <CheckBox default={true} numCount={2} parent={this} originalStatus={this.props.anyKeywordStatus} updateStatus={this.props.updateAnyKeywordStatus} title={"Include Any Keywords"} />
+ <CheckBox default={true} numCount={2} parent={this} originalStatus={this.props.allKeywordStatus} updateStatus={this.props.updateAllKeywordStatus} title={"Include All Keywords"} />
+ </div>
+ );
+ }
+} \ No newline at end of file
diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss
index 633a194fe..79f866acb 100644
--- a/src/client/views/search/ToggleBar.scss
+++ b/src/client/views/search/ToggleBar.scss
@@ -16,11 +16,15 @@
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
+ color: gray;
+ font-size: 13;
}
}
.toggle-bar {
- height: 50px;
+ // height: 50px;
+ height: 30px;
+ width: 100px;
background-color: $alt-accent;
border-radius: 10px;
padding: 5px;
@@ -28,7 +32,8 @@
align-items: center;
.toggle-button {
- width: 275px;
+ // width: 275px;
+ width: 40px;
height: 100%;
border-radius: 10px;
background-color: $light-color;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-17 17:07:28 +0000