From 13e6b075154001ce33845a72454e3cd039a92670 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Tue, 24 Mar 2020 19:03:19 -0700 Subject: reaally pretty drop down menu functionality : ) --- src/client/views/search/IconBar.scss | 3 +- src/client/views/search/SearchBox.scss | 14 ++++- src/client/views/search/SearchBox.tsx | 109 +++++++++++++++++++++++++++++++-- 3 files changed, 117 insertions(+), 9 deletions(-) (limited to 'src/client/views/search') 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 (
{ e.stopPropagation(); e.preventDefault(); }}>
@@ -387,16 +486,16 @@ export class SearchBox extends React.Component { - +
-
-
+
+
-
+
-- cgit v1.2.3-70-g09d2