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.scss33
-rw-r--r--src/client/views/search/FilterBox.tsx44
-rw-r--r--src/client/views/search/IconBar.scss5
-rw-r--r--src/client/views/search/IconButton.scss14
-rw-r--r--src/client/views/search/IconButton.tsx5
-rw-r--r--src/client/views/search/ToggleBar.scss9
9 files changed, 92 insertions, 75 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..b2b452419 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;
@@ -96,6 +100,7 @@
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
+ text-align: center;
}
}
}
@@ -105,4 +110,16 @@
border-top-style: solid;
padding-top: 10px;
}
+
+ .save-filter,
+ .reset-filter,
+ .all-filter {
+ background-color: gray;
+ }
+
+ .save-filter:hover,
+ .reset-filter:hover,
+ .all-filter:hover {
+ background-color: $darker-alt-accent;
+ }
} \ No newline at end of file
diff --git a/src/client/views/search/FilterBox.tsx b/src/client/views/search/FilterBox.tsx
index 706d1eb7f..ba193df5a 100644
--- a/src/client/views/search/FilterBox.tsx
+++ b/src/client/views/search/FilterBox.tsx
@@ -9,13 +9,11 @@ import { Id } from '../../../new_fields/FieldSymbols';
import { DocumentType } from '../../documents/Documents';
import { Cast, StrCast } from '../../../new_fields/Types';
import * as _ from "lodash";
-import { ToggleBar } from './ToggleBar';
import { IconBar } from './IconBar';
import { FieldFilters } from './FieldFilters';
import { SelectionManager } from '../../util/SelectionManager';
import { DocumentView } from '../nodes/DocumentView';
import { CollectionFilters } from './CollectionFilters';
-import { NaviconButton } from './NaviconButton';
import * as $ from 'jquery';
import "./FilterBox.scss";
import { SearchBox } from './SearchBox';
@@ -38,6 +36,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;
@@ -114,10 +114,9 @@ export class FilterBox extends React.Component {
@action.bound
resetFilters = () => {
- ToggleBar.Instance.resetToggle();
+ this._basicWordStatus = true;
IconBar.Instance.selectAll();
FieldFilters.Instance.resetFieldFilters();
- CollectionFilters.Instance.resetCollectionFilters();
}
basicRequireWords(query: string): string {
@@ -268,10 +267,9 @@ export class FilterBox extends React.Component {
//if true, any keywords can be used. if false, all keywords are required.
@action.bound
- handleWordQueryChange = () => { this._basicWordStatus = !this._basicWordStatus; }
-
- @action.bound
- getBasicWordStatus() { return this._basicWordStatus; }
+ handleWordQueryChange = () => {
+ this._basicWordStatus = !this._basicWordStatus;
+ }
@action.bound
updateIcon(newArray: string[]) { this._icons = newArray; }
@@ -290,16 +288,10 @@ export class FilterBox extends React.Component {
}
@action.bound
- toggleFieldOpen() { this._fieldOpen = !this._fieldOpen; }
+ updateAnyKeywordStatus(newStat: boolean) { this._anyKeywordStatus = newStat; }
@action.bound
- toggleColOpen() { this._colOpen = !this._colOpen; }
-
- @action.bound
- toggleTypeOpen() { this._typeOpen = !this._typeOpen; }
-
- @action.bound
- toggleWordStatusOpen() { this._wordStatusOpen = !this._wordStatusOpen; }
+ updateAllKeywordStatus(newStat: boolean) { this._allKeywordStatus = newStat; }
@action.bound
updateTitleStatus(newStat: boolean) { this._titleFieldStatus = newStat; }
@@ -319,6 +311,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 +333,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,33 +342,20 @@ 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>
<div className="filter-panel" >
- <ToggleBar handleChange={this.handleWordQueryChange} getStatus={this.getBasicWordStatus}
- originalStatus={this._basicWordStatus} optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} />
+ <button className="all-filter" onClick={this.handleWordQueryChange}>Include All Keywords</button>
</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>
<div className="filter-panel"><IconBar /></div>
</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>
- </div>
- <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 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>
<div className="filter-panel"><FieldFilters
titleFieldStatus={this._titleFieldStatus} dataFieldStatus={this._deletedDocsStatus} authorFieldStatus={this._authorFieldStatus}
@@ -381,8 +363,6 @@ 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="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..d1853177e 100644
--- a/src/client/views/search/IconButton.scss
+++ b/src/client/views/search/IconButton.scss
@@ -4,13 +4,15 @@
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);
+ background-color: gray;
border-radius: 50%;
display: flex;
justify-content: center;
@@ -22,8 +24,8 @@
font-size: 2em;
.fontawesome-icon {
- height: 24px;
- width: 24px;
+ height: 15px;
+ width: 15px
}
}
@@ -44,7 +46,7 @@
transform: scale(1.1);
background-color: $darker-alt-accent;
opacity: 1;
-
+
+.filter-description {
opacity: 1;
}
diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx
index bfe2c7d0b..5d23f6eeb 100644
--- a/src/client/views/search/IconButton.tsx
+++ b/src/client/views/search/IconButton.tsx
@@ -13,6 +13,7 @@ import { IconBar } from './IconBar';
import { props } from 'bluebird';
import { FilterBox } from './FilterBox';
import { Search } from '../../../server/Search';
+import { gravity } from 'sharp';
library.add(faSearch);
library.add(faObjectGroup);
@@ -123,11 +124,11 @@ export class IconButton extends React.Component<IconButtonProps>{
selected = {
opacity: 1,
- backgroundColor: "#c2c2c5" //$alt-accent
+ backgroundColor: "rgb(128, 128, 128)"
};
notSelected = {
- opacity: 0.6,
+ opacity: 0.2,
};
hoverStyle = {
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-08 11:44:20 +0000