add searchbar footer

Author: Filip Łukasik

scaladoc-js/common/css/searchbar.css

@@ -213,32 +213,32 @@ div[selected] > .scaladoc-searchbar-inkuire-package {
   overflow: auto;
 } */
 
-.scaladoc-searchbar-row {
+/* .scaladoc-searchbar-row {
   display: flex;
   background-color: var(--leftbar-bg);
   color: var(--leftbar-fg);
   line-height: 24px;
   padding: 4px 10px 4px 10px;
-}
+} */
 
 .scaladoc-searchbar-row.hidden {
   display: none;
 }
 
-.scaladoc-searchbar-row[divider] {
+/* .scaladoc-searchbar-row[divider] {
   border-top: solid 1px var(--leftbar-border);
-}
+} */
 
 .scaladoc-searchbar-row .micon {
   height: 16px;
   width: 16px;
   margin: 4px 8px 0px 0px;
 }
 
-.scaladoc-searchbar-row[selected] {
+/* .scaladoc-searchbar-row[selected] {
   background-color: var(--leftbar-hover-bg);
   color: var(--leftbar-hover-fg);
-}
+} */
 
 .scaladoc-searchbar-row[result] {
   flex-direction: column;

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

@@ -172,7 +172,7 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
     icon
 
   private val inputElem: html.Input =
-    input(id := "scaladoc-searchbar-input", `type` := "search").tap { element =>
+    input(id := "scaladoc-searchbar-input", `type` := "search", `placeholder`:= "Find anything").tap { element =>
       element.addEventListener("input", { e =>
         val inputValue = e.target.asInstanceOf[html.Input].value
         if inputValue.isEmpty then showHints()
@@ -203,8 +203,22 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
       })
     }
 
+    val searchbarFooter = div(id := "searchbar-footer", cls := "body-small")(
+      span(cls := "searchbar-footer-left-container")(
+        span("Smart search:"),
+        span(b("CC "), "to find CamcelCase phrases"),
+        span(b("A=>B "), "to find CamcelCase signatures"),
+      ),
+      span(cls := "searchbar-footer-right-container")(
+        span(b("Esc "), "to close"),
+        span(b("Arrows "), "to navigate"),
+        span(b("Enter "), "to select"),
+      ),
+    )
+
     val rootParent = div(id := "searchbar-container")(
-      element
+      element,
+      searchbarFooter
     ).tap { rootElem =>
       rootElem.addEventListener("mousedown", (e: Event) => handleEscape())
     }

scaladoc/resources/dotty_res/styles/theme/colors.css

@@ -162,7 +162,7 @@
 }
 
 /*
-    Light theme
+    dakr theme
 */
 :root.theme-dark {
   --grey1: #161618;
@@ -176,7 +176,7 @@
   --grey9: #706f78;
   --grey10: #7e7d86;
   --grey11: #a09fa6;
-  --grey12: #ededef;
+  --grey12: #cccccc;
 
   /* red colors */
   --red1: #1f1315;

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

@@ -5,7 +5,7 @@
   padding: calc(3 * var(--base-spacing)) 0px;
   position: absolute;
   width: calc(39 * var(--base-spacing));
-  height: calc(100% - var(--header-height));
+  height: calc(100% - var(--header-height) - (5 * var(--base-spacing)));
   left: 0px;
   top: calc(8 * var(--base-spacing));
   background: var(--background-default);

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

@@ -11,6 +11,8 @@
 #scaladoc-searchbar {
   z-index: 5;
   width: calc(125 * var(--base-spacing));
+  position: relative;
+  top: calc(3 * var(--base-spacing));
 }
 
 #scaladoc-searchbar-input {
@@ -61,6 +63,9 @@
   background-color: var(--background-default);
   border-radius: 4px;
   margin-top: calc(1.5 * var(--base-spacing));
+  border: 1px solid var(--border-default);
+  max-height: calc(100% - calc(24 * var(--base-spacing)));
+  overflow: scroll;
 }
 
 .searchbar-hints {
@@ -146,3 +151,50 @@
 .searchbar-hints-list .h100:last-of-type {
   margin-top: calc(6 * var(--base-spacing));
 }
+
+.scaladoc-searchbar-row {
+  display: flex;
+  color: var(--text-secondary);
+  padding: calc(2 * var(--base-spacing)) calc(2 * var(--base-spacing));
+}
+
+.scaladoc-searchbar-row[divider] {
+  border-top: solid 1px var(--border-default);
+}
+
+.scaladoc-searchbar-row a {
+  color: var(--text-secondary);
+  text-decoration: none;
+}
+
+/* searchbar footer */
+#searchbar-footer {
+  position: absolute;
+  bottom: 0px;
+  background-color: var(--background-default);
+  color: var(--text-secondary);
+  height: calc(6 * var(--base-spacing));
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+#searchbar-footer b {
+  color: var(--text-primary);
+}
+
+.searchbar-footer-right-container span {
+  margin-right: calc(2 * var(--base-spacing));
+}
+
+.searchbar-footer-left-container span {
+  margin-right: calc(2 * var(--base-spacing));
+}
+
+.searchbar-footer-left-container span:first-of-type {
+  margin-left: calc(2 * var(--base-spacing));
+}
+
+.searchbar-footer-right-container {
+  margin-left: auto;
+}

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

@@ -242,47 +242,8 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
             ),
           button(id := "theme-toggle", cls := "icon-button"),
         ),
-
-
-        //     div(id := "logo")(
-        //   projectLogo,
-        //   span(
-        //     div(cls:="projectName")(args.name)
-        //   ),
-        //   div(id := "version")(
-        //     div(cls := "versions-dropdown")(
-        //       div(onclick := "dropdownHandler()", id := "dropdown-button", cls := "dropdownbtn dropdownbtnactive")(
-        //         args.projectVersion.map(v => div(cls:="projectVersion")(v)).getOrElse(""),
-        //         div(id := "dropdown-content", cls := "dropdown-content")(
-        //           input(`type` := "text", placeholder := "Search...", id := "dropdown-input", onkeyup := "filterFunction()"),
-        //         ),
-        //       ),
-        //     )
-        //   ),
-        //   div(cls := "socials")(
-        //     socialLinks()
-        //   )
-        // ),
-        // div(id := "paneSearch"),
-        //   div(cls := "mode")(
-        //     span(cls :="footer-text")(raw("Mode")),
-        //     label(id := "theme-toggle", cls := "switch")(
-        //       input(`type` := "checkbox"),
-        //       span(cls := "slider")
-        //     )
-        //   ),
       ),
       div(id := "leftColumn", cls := "body-small")(
-        // div(id := "logo")(
-        //   projectLogo,
-        //   span(
-        //     div(cls:="projectName")(args.name)
-        //   ),
-        //   div(cls := "socials")(
-        //     socialLinks()
-        //   )
-        // ),
-        // div(id := "paneSearch"),
         Seq(
           div(cls:= "switcher-container")(
             apiNavOpt match {
@@ -308,45 +269,6 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
           span(cls := "icon-toggler")
         ),
         div(id := "scaladoc-searchBar"),
-        // main(id := "main-content")(
-        //   parentsHtml,
-        //   div(id := "content")(content),
-        // ),
-        footer(
-          // div(id := "generated-by")(
-            // span(cls := "footer-text")(raw("Generated by")),
-            // a(href := "https://github.com/lampepfl/dotty/tree/master/scaladoc")(
-              // img(
-              //   src := resolveRoot(link.dri, "images/scaladoc_logo.svg"),
-              //   alt := "scaladoc",
-              //   cls := "scaladoc_logo"
-              // ),
-              // img(
-              //   src := resolveRoot(link.dri, "images/scaladoc_logo_dark.svg"),
-              //   alt := "scaladoc",
-              //   cls := "scaladoc_logo_dark"
-              // )
-            // )
-          // ),
-          // textFooter,
-          // div(cls := "socials")(
-          //   span(cls := "footer-text")(if hasSocialLinks then Seq(raw("Social links")) else Nil),
-          //   socialLinks(whiteIcon = false)
-          // ),
-          div(cls := "mode")(
-            span(cls :="footer-text")(raw("Mode")),
-            label(id := "theme-toggle", cls := "switch")(
-              input(`type` := "checkbox"),
-              span(cls := "slider")
-            )
-          ),
-          // span(cls := "go-to-top-icon")(
-          //   a(href := "#container")(
-          //     span(cls:="icon-vertical_align_top"),
-          //     span(cls :="footer-text")(raw("Back to top"))
-          //   )
-          // )
-        )
       ),
       renderTableOfContents(content.toc).fold(Nil) { toc =>
         div(id := "toc")(