From 76e424a7efd966e77ae04909de6b9d512001ee85 Mon Sep 17 00:00:00 2001
From: Matthias Konitzny <konitzny@ibr.cs.tu-bs.de>
Date: Wed, 27 Jul 2022 16:42:03 +0200
Subject: [PATCH] Improved search-bar styling

---
 src/display/components/searchbar.css | 23 +++++++++++
 src/display/components/searchbar.tsx | 60 ++++++++++++++--------------
 src/display/display.css              |  2 +-
 src/display/display.tsx              |  1 +
 4 files changed, 55 insertions(+), 31 deletions(-)

diff --git a/src/display/components/searchbar.css b/src/display/components/searchbar.css
index ebfee1b..cfef99d 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 4016a54..13d5a6b 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}>
                     &#128269;
                 </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 586c875..c147a87 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 71449a4..65b8587 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"}
-- 
GitLab