diff --git a/src/display/components/searchbar.css b/src/display/components/searchbar.css index ebfee1b446cac5b2db0c7450955097019e9f6e9f..cfef99df855ae5df573dbf619737fae908d34a8f 100644 --- a/src/display/components/searchbar.css +++ b/src/display/components/searchbar.css @@ -32,12 +32,34 @@ .searchbar-results { overflow: hidden; + display: flex; + flex-direction: column; + position: absolute; + left: 10px; + top: 65px; + border-radius: 10px; +} + +.searchbar-results-circle { + width: 15px; + height: 15px; + margin: 10px; + border-radius: 50%; + flex-shrink: 0; } .searchbar-result { cursor: pointer; z-index: 99; pointer-events: all; + background: white; + border: 1px solid gray; + display: flex; + flex-direction: row; + margin-top: -1px ; + padding-left: 10px; + padding-right: 10px; + align-items: center; } .searchbar-result:hover { @@ -53,4 +75,5 @@ border-radius: 30px; padding-left: 10px; padding-right: 5px; + position: relative; } \ No newline at end of file diff --git a/src/display/components/searchbar.tsx b/src/display/components/searchbar.tsx index 4016a54d31950856711ec66a49c06c1de72159ee..13d5a6bd58656c52c98246fcaea414361d4e6389 100644 --- a/src/display/components/searchbar.tsx +++ b/src/display/components/searchbar.tsx @@ -23,10 +23,10 @@ function SearchBar({ minified, nodeSet, onSearch }: SearchBarProps) { if (isMinified) { setWidth(0); setInputText(""); - inputField.current.value = ""; + // inputField.current.value = ""; } else { setWidth(100); - inputField.current.focus(); + //inputField.current.focus(); } }, [isMinified]); @@ -61,40 +61,40 @@ function SearchBar({ minified, nodeSet, onSearch }: SearchBarProps) { <div className={"searchbar-icon"} onClick={toggleMinified}> 🔍 </div> + <div></div> <div className={"searchbar-text"} style={{ width: width + "%" }} > - <form className={"searchbar-form"} action={"#"}> - <input - ref={inputField} - className={"searchbar-input"} - type={"search"} - placeholder={"Knoten suchen..."} - onInput={handleInput} - onBlur={toggleMinified} - ></input> - </form> + {width > 0 && ( + <form className={"searchbar-form"} action={"#"}> + <input + ref={inputField} + className={"searchbar-input"} + type={"search"} + placeholder={"Knoten suchen..."} + onInput={handleInput} + autoFocus={true} + // onBlur={() => setMinified(true)} + ></input> + </form> + )} </div> </div> - <div - className={"searchbar-results"} - style={{ - height: inputText.length > 0 ? filtered.length * 30 : 0, - marginBottom: filtered.length > 0 ? 10 : 0, - }} - > - <ul> - {filtered.map((el) => ( - <li - key={el} - className={"searchbar-result"} - onMouseDown={() => handleNodeClick(el)} - > - {el} - </li> - ))} - </ul> + <div className={"searchbar-results"}> + {filtered.map((el) => ( + <div + key={el} + className={"searchbar-result"} + onMouseDown={() => handleNodeClick(el)} + > + <div + className={"searchbar-results-circle"} + style={{ backgroundColor: "red" }} + ></div> + <div>{el}</div> + </div> + ))} </div> </div> ); diff --git a/src/display/display.css b/src/display/display.css index 586c8756b34558e5e6826e0b2ca1f1c99f7b8911..c147a87396a42477d72261c50125738ab59be308 100644 --- a/src/display/display.css +++ b/src/display/display.css @@ -32,5 +32,5 @@ cursor: pointer; font-size: 30px; transform: rotate(-45deg); - margin-top: -4px; + margin-top: -13px; } \ No newline at end of file diff --git a/src/display/display.tsx b/src/display/display.tsx index 71449a48ff9a651d37fc30b83f30d646d6402a2e..65b8587be9d84dbcd00fa2ca8761379784377462 100644 --- a/src/display/display.tsx +++ b/src/display/display.tsx @@ -115,6 +115,7 @@ class Display extends React.Component< ref={this.fullscreenRef} > <div className={"display-icons"}> + {" "} <div className={"display-fullscreen-button no-select"} title={"Vollbild"}