aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/SearchDocBox.tsx2
-rw-r--r--src/client/views/search/IconBar.scss3
-rw-r--r--src/client/views/search/SearchBox.scss14
-rw-r--r--src/client/views/search/SearchBox.tsx109
4 files changed, 118 insertions, 10 deletions
diff --git a/src/client/views/SearchDocBox.tsx b/src/client/views/SearchDocBox.tsx
index 5a76a882f..c57f9e737 100644
--- a/src/client/views/SearchDocBox.tsx
+++ b/src/client/views/SearchDocBox.tsx
@@ -411,7 +411,7 @@ export class SearchDocBox extends React.Component<FieldViewProps> {
<ContentFittingDocumentView {...this.props}
Document={this.content}
getTransform={this.props.ScreenToLocalTransform}>
- s</ContentFittingDocumentView>
+ </ContentFittingDocumentView>
<div
style={{
position: "absolute",
diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss
index c6dc2a6cd..013dcd57e 100644
--- a/src/client/views/search/IconBar.scss
+++ b/src/client/views/search/IconBar.scss
@@ -2,8 +2,9 @@
.icon-bar {
display: flex;
+ flex-wrap: wrap;
justify-content: space-evenly;
- height: 35px;
+ height: auto;
width: 100%;
flex-direction: row-reverse;
} \ No newline at end of file
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 176ed646d..1b36912d1 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -91,9 +91,10 @@
background: black;
flex-direction: column;
transform-origin: top;
- border-bottom: solid grey 1px;
- padding: 5px;
- transition: height 0.5s ease, display 0.5s ease;
+ transition: height 0.3s ease, display 0.6s ease;
+ height:0px;
+ overflow:hidden;
+
.filter-header {
display: flex;
@@ -104,6 +105,9 @@
transform-origin: top;
justify-content: space-evenly;
margin-bottom: 5px;
+ overflow:hidden;
+ transition:height 0.3s ease-out;
+
.filter-item {
@@ -121,6 +125,10 @@
padding-top: 5px;
margin-left: 10px;
margin-right: 10px;
+ overflow:hidden;
+ transition:height 0.3s ease-out;
+ height:0px;
+
}
}
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 4f0ca5709..2e7e95b60 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -1,7 +1,7 @@
import { library } from '@fortawesome/fontawesome-svg-core';
import { faTimes } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, observable, runInAction } from 'mobx';
+import { action, computed, observable, runInAction, IReactionDisposer, reaction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import * as rp from 'request-promise';
@@ -59,17 +59,23 @@ export class SearchBox extends React.Component {
SearchBox.Instance = this;
this.resultsScrolled = this.resultsScrolled.bind(this);
+ //reaction(()=>document.getElementById("node")?.scrollHeight,()=>{console.log("longer")})
+
}
+ private _reactionDisposer?: IReactionDisposer;
+
componentDidMount = () => {
if (this.inputRef.current) {
this.inputRef.current.focus();
runInAction(() => {
this._searchbarOpen = true;
});
+
}
}
+
@action
getViews = async (doc: Doc) => {
const results = await SearchUtil.GetViewsOfDocument(doc);
@@ -369,6 +375,12 @@ export class SearchBox extends React.Component {
@action.bound
handleNodeChange = () => {
this._nodeStatus = !this._nodeStatus;
+ if (this._nodeStatus){
+ this.expandSection("node")
+ }
+ else{
+ this.collapseSection("node")
+ }
}
@action.bound
@@ -376,8 +388,95 @@ export class SearchBox extends React.Component {
this._keyStatus = !this._keyStatus;
}
+ @action.bound
+ handleFilterChange=() =>{
+ this._filterOpen=!this._filterOpen;
+ if (this._filterOpen){
+ this.expandSection("filterhead");
+ document.getElementById("filterhead")!.style.padding="5";
+ }
+ else{
+ this.collapseSection("filterhead");
+
+
+ }
+ }
+ // @observable
+ // private menuHeight= 0;
+
+ @computed
+ get menuHeight(){
+ return document.getElementById("hi")?.clientHeight;
+ }
+
+
+ collapseSection(thing:string) {
+ let element= document.getElementById(thing)!;
+ // get the height of the element's inner content, regardless of its actual size
+ var sectionHeight = element.scrollHeight;
+
+ // temporarily disable all css transitions
+ var elementTransition = element.style.transition;
+ element.style.transition = '';
+
+ // on the next frame (as soon as the previous style change has taken effect),
+ // explicitly set the element's height to its current pixel height, so we
+ // aren't transitioning out of 'auto'
+ requestAnimationFrame(function() {
+ element.style.height = sectionHeight + 'px';
+ element.style.transition = elementTransition;
+
+ // on the next frame (as soon as the previous style change has taken effect),
+ // have the element transition to height: 0
+ requestAnimationFrame(function() {
+ element.style.height = 0 + 'px';
+ thing == "filterhead"? document.getElementById("filterhead")!.style.padding="0" : null;
+ });
+ });
+
+ // mark the section as "currently collapsed"
+ element.setAttribute('data-collapsed', 'true');
+ }
+
+ expandSection(thing:string) {
+ console.log("expand");
+ let element= document.getElementById(thing)!;
+ // get the height of the element's inner content, regardless of its actual size
+ var sectionHeight = element.scrollHeight;
+
+ // have the element transition to the height of its inner content
+ let temp = element.style.height;
+ element.style.height = sectionHeight + 'px';
+
+ // when the next css transition finishes (which should be the one we just triggered)
+ element.addEventListener('transitionend', function handler(e) {
+ // remove this event listener so it only gets triggered once
+ console.log("autoset");
+ element.removeEventListener('transitionend', handler);
+
+ // remove "height" from the element's inline styles, so it can return to its initial value
+ element.style.height="auto";
+ //element.style.height = undefined;
+ });
+
+ // mark the section as "currently not collapsed"
+ element.setAttribute('data-collapsed', 'false');
+
+ }
+
+ autoset(thing: string){
+ let element= document.getElementById(thing)!;
+ console.log("autoset");
+ element.removeEventListener('transitionend', function(e){});
+
+ // remove "height" from the element's inline styles, so it can return to its initial value
+ element.style.height="auto";
+ //element.style.height = undefined;
+
+ }
render() {
+
return (
<div className="searchBox-container" onPointerDown={e => { e.stopPropagation(); e.preventDefault(); }}>
<div className="searchBox-bar">
@@ -387,16 +486,16 @@ export class SearchBox extends React.Component {
<input value={this._searchString} onChange={this.onChange} type="text" placeholder="Search..." id="search-input" ref={this.inputRef}
className="searchBox-barChild searchBox-input" onPointerDown={this.openSearch} onKeyPress={this.enter} onFocus={this.openSearch}
style={{ width: this._searchbarOpen ? "500px" : "100px" }} />
- <button className="searchBox-barChild searchBox-filter" title="Advanced Filtering Options" onClick={() => runInAction(() => this._filterOpen = !this._filterOpen)}><FontAwesomeIcon icon="ellipsis-v" color="white" /></button>
+ <button className="searchBox-barChild searchBox-filter" title="Advanced Filtering Options" onClick={() => this.handleFilterChange()}><FontAwesomeIcon icon="ellipsis-v" color="white" /></button>
</div>
- <div className="filter-form" style={this._filterOpen ? { display: "flex" } : { display: "none" }}>
- <div className="filter-header" style={this._filterOpen ? {} : { display: "none" }}>
+ <div id="filterhead" className="filter-form" >
+ <div id="filterhead2" className="filter-header" style={this._filterOpen ? { } : { }}>
<button className="filter-item" style={this._basicWordStatus ? { background: "#aaaaa3", } : {}} onClick={this.handleWordQueryChange}>Keywords</button>
<button className="filter-item" style={this._keyStatus ? { background: "#aaaaa3" } : {}} onClick={this.handleKeyChange}>Keys</button>
<button className="filter-item" style={this._nodeStatus ? { background: "#aaaaa3" } : {}} onClick={this.handleNodeChange}>Nodes</button>
</div>
- <div className="filter-body" style={this._nodeStatus ? { display: "flex" } : { display: "none" }}>
+ <div id="node" className="filter-body" style={this._nodeStatus ? { } : { }}>
<IconBar />
</div>
<div style={this._keyStatus ? { display: "flex" } : { display: "none" }}>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-16 12:02:40 +0000