connect search icon to searchbar, add basic styles

Author: Filip Łukasik

scaladoc-js/common/css/searchbar.css

@@ -24,7 +24,8 @@
   color: var(--inactive-fg) !important;
   font-weight: 500 !important;
 }
-.action_def:hover, .action_def.hover_a79 {
+.action_def:hover,
+.action_def.hover_a79 {
   color: var(--selected-fg);
   background: var(--selected-bg) !important;
   font-weight: 500;
@@ -35,15 +36,15 @@
 }
 
 /* Landscape phones, portait tablets */
-@media(max-width: 768px) {
+@media (max-width: 768px) {
   .popup-wrapper {
     width: calc(100% - 48px);
     left: 24px !important;
   }
 }
 
 /* Portrait phones */
-@media(max-width: 576px) {
+@media (max-width: 576px) {
   .search-content {
     margin: 0 !important;
     top: 9px !important;
@@ -70,8 +71,10 @@
   padding: 4px;
 }
 
-.loading, .loading::before, .loading::after {
-  content: '';
+.loading,
+.loading::before,
+.loading::after {
+  content: "";
   width: 10px;
   height: 10px;
   border-radius: 5px;
@@ -89,7 +92,7 @@
 
 .loading {
   position: relative;
-  animation-delay: .2s;
+  animation-delay: 0.2s;
 }
 
 .loading::before {
@@ -99,7 +102,7 @@
 
 .loading::after {
   left: 15px;
-  animation-delay: .4s;
+  animation-delay: 0.4s;
 }
 
 @keyframes dotFlashing {
@@ -116,7 +119,7 @@
 
 .scaladoc-searchbar-inkuire-package {
   display: none;
-  color: var(--symbol-fg)
+  color: var(--symbol-fg);
 }
 
 div[selected] > .scaladoc-searchbar-inkuire-package {
@@ -142,19 +145,19 @@ div[selected] > .scaladoc-searchbar-inkuire-package {
   background: var(--red600);
 }
 
-@media(max-width: 576px) {
+@media (max-width: 576px) {
   .search span {
-      background: none;
-      fill: var(--icon-color);
-      cursor: pointer;
-      border: none;
-      padding: 0;
-      box-shadow: none;
-      margin-top: 2px;
+    background: none;
+    fill: var(--icon-color);
+    cursor: pointer;
+    border: none;
+    padding: 0;
+    box-shadow: none;
+    margin-top: 2px;
   }
 
   .search span:hover {
-      fill: var(--link-hover-fg);
+    fill: var(--link-hover-fg);
   }
 
   #scaladoc-searchbar span.pull-right {
@@ -175,32 +178,34 @@ div[selected] > .scaladoc-searchbar-inkuire-package {
   display: none;
 }
 
-#scaladoc-searchbar {
+/* #scaladoc-searchbar {
   position: fixed;
   top: 50px;
   left: calc(5% + var(--side-width));
   z-index: 5;
   width: calc(90% - var(--side-width));
   box-shadow: 2px 2px 8px 0 var(--shadow);
   font-size: 13px;
-  font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, sans-serif;
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu,
+    Cantarell, Helvetica Neue, Arial, sans-serif;
   background-color: var(--leftbar-bg);
   color: var(--leftbar-fg);
-}
+  box-shadow: 0 0 2px var(--shadow);
+} */
 
-#scaladoc-searchbar-input {
-  width: 100%;
+/* #scaladoc-searchbar-input { */
+/* width: 100%;
   min-height: 32px;
   border: none;
   border-bottom: 1px solid #bbb;
   padding: 10px;
   background-color: var(--leftbar-bg);
-  color: var(--leftbar-fg);
-}
+  color: var(--leftbar-fg); */
+/* } */
 
-#scaladoc-searchbar-input:focus {
+/* #scaladoc-searchbar-input:focus {
   outline: none;
-}
+} */
 
 #scaladoc-searchbar-results {
   display: flex;

scaladoc-js/main/src/searchbar/SearchbarComponent.scala

@@ -156,29 +156,20 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
         }
     }
 
-  private val searchIcon: html.Div =
-    val element = div(cls := "search-content")(
-      div(cls := "search-container")(
-        div(cls := "search")(
-          span(id := "scaladoc-search")().tap { span =>
-            span.innerHTML = """<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M19.64 18.36l-6.24-6.24a7.52 7.52 0 10-1.28 1.28l6.24 6.24zM7.5 13.4a5.9 5.9 0 115.9-5.9 5.91 5.91 0 01-5.9 5.9z"></path></svg>"""
-            span.onclick = (event: Event) =>
-              if (document.body.contains(rootDiv)) {
-                document.body.removeChild(rootDiv)
-              }
-              else {
-                document.body.appendChild(rootDiv)
-                inputElem.focus()
-              }
-          }
-        )
-      )
-    )
+  private val searchIcon: html.Button =
+    val icon = document.getElementById("search-toggle").asInstanceOf[html.Button]
+    icon.onclick = (event: Event) =>
+      if (document.body.contains(rootDiv)) {
+        document.body.removeChild(rootDiv)
+      }
+      else {
+        document.body.appendChild(rootDiv)
+        input.focus()
+      }
     // open the search if the user hits the `s` key when not focused on a text input
     document.body.addEventListener("keydown", (e: KeyboardEvent) => handleGlobalKeyDown(e))
 
-    document.getElementById("scaladoc-searchBar").appendChild(element)
-    element
+    icon
 
   private val inputElem: html.Input =
     input(id := "scaladoc-searchbar-input").tap { element =>
@@ -198,11 +189,8 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
   private val rootShowClasses   = ""
 
   private val rootDiv: html.Div =
-    val element = div(id := "scaladoc-searchbar")(
-      inputElem,
-      resultsDiv
-    )
-
+    val rootParent = document.createElement("div").asInstanceOf[html.Div]
+    val element = document.createElement("div").asInstanceOf[html.Div]
     element.addEventListener("mousedown", (e: Event) => e.stopPropagation())
     searchIcon.addEventListener("mousedown", (e: Event) => e.stopPropagation())
     document.body.addEventListener("mousedown", (e: Event) =>
@@ -217,8 +205,14 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
         else if e.keyCode == 13 then handleEnter()
         else if e.keyCode == 27 then handleEscape()
     })
-
-    element
+    element.id = "scaladoc-searchbar"
+    element.appendChild(input)
+    element.appendChild(resultsDiv)
+    // element
+    rootParent.id = "searchbar-container"
+    rootParent.appendChild(element)
+    rootParent.addEventListener("mousedown", (e: Event) => handleEscape())
+    rootParent
 
   private def handleArrowUp() = {
     val selectedElement = resultsDiv.querySelector("[selected]")

scaladoc/resources/dotty_res/styles/theme/layout/searchBar.css

@@ -0,0 +1,25 @@
+#searchbar-container {
+  width: 100%;
+  height: 100%;
+  z-index: 4;
+  background-color: rgba(0, 0, 0, 0.569);
+  display: flex;
+  justify-content: center;
+  position: absolute;
+}
+
+#scaladoc-searchbar {
+  z-index: 5;
+}
+
+#scaladoc-searchbar-input {
+  width: 100%;
+  background-color: var(--action-primary-background-default-solid);
+  background-image: url("../../../images/icon-buttons/search/dark/default.svg");
+  background-repeat: no-repeat;
+  padding: calc(2 * var(--base-spacing)) calc(2 * var(--base-spacing))
+    calc(2 * var(--base-spacing)) calc(5 * var(--base-spacing));
+  border-radius: 4px;
+  background-size: 16px;
+  background-position: 10px 15px;
+}

scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala

@@ -319,7 +319,7 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
         div (id := "leftToggler")(
           span(cls := "icon-toggler")
         ),
-        // div(id := "scaladoc-searchBar"),
+        div(id := "scaladoc-searchBar"),
         // main(id := "main-content")(
         //   parentsHtml,
         //   div(id := "content")(content),

scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala

@@ -92,6 +92,7 @@ trait Resources(using ctx: DocContext) extends Locations, Writer:
       "styles/theme/layout/header.css",
       "styles/theme/layout/leftMenu.css",
       "styles/theme/layout/sideMenu.css",
+      "styles/theme/layout/searchBar.css",
 
       // components
       "styles/theme/components/switcher.css",