Merge pull request #12595 from lampepfl/scaladoc/searchbar-improvement

Scaladoc: Icons for searchbar results

Author: romanowski

scaladoc-js/resources/scaladoc-searchbar.css

@@ -73,9 +73,15 @@
 
 .scaladoc-searchbar-result {
     background: white;
-    line-height: 32px;
-    padding-left: 10px;
-    padding-right: 10px;
+    line-height: 24px;
+    display: flex;
+    padding: 4px 10px 4px 10px;
+}
+
+.scaladoc-searchbar-result .micon {
+    height: 16px;
+    width: 16px;
+    margin: 4px 8px 0px 0px;
 }
 
 .scaladoc-searchbar-result:first-of-type {
@@ -88,6 +94,8 @@
 
 .scaladoc-searchbar-result a {
     color: #1f2326;
+    text-indent: -20px;
+    padding-left: 20px;
 }
 
 .scaladoc-searchbar-result .scaladoc-searchbar-location {

scaladoc-js/src/searchbar/PageEntry.scala

@@ -8,13 +8,15 @@ trait PageEntryJS extends js.Object {
   val t: String = js.native
   val d: String = js.native
   val l: String = js.native
+  val k: String = js.native
 }
 
 case class PageEntry(
   fullName: String,
   description: String,
   location: String,
   shortName: String,
+  kind: String,
   tokens: List[String]
 )
 
@@ -24,6 +26,7 @@ object PageEntry {
       jsObj.d,
       jsObj.l,
       jsObj.n.toLowerCase,
+      jsObj.k,
       StringUtils.createCamelCaseTokens(jsObj.n)
     )
 }

scaladoc-js/src/searchbar/SearchbarComponent.scala

@@ -11,6 +11,10 @@ class SearchbarComponent(val callback: (String) => List[PageEntry]):
       wrapper.classList.add("scaladoc-searchbar-result")
       wrapper.classList.add("monospace")
 
+      val icon = document.createElement("span").asInstanceOf[html.Span]
+      icon.classList.add("micon")
+      icon.classList.add(p.kind.take(2))
+
       val resultA = document.createElement("a").asInstanceOf[html.Anchor]
       resultA.href = Globals.pathToRoot + p.location
       resultA.text = s"${p.fullName}"
@@ -20,6 +24,7 @@ class SearchbarComponent(val callback: (String) => List[PageEntry]):
       location.classList.add("scaladoc-searchbar-location")
       location.textContent = p.description
 
+      wrapper.appendChild(icon)
       wrapper.appendChild(resultA)
       wrapper.appendChild(location)
       wrapper.addEventListener("mouseover", {

scaladoc-js/test/dotty/dokka/MatchersTest.scala

@@ -35,6 +35,7 @@ class MatchersTest:
     "",
     "",
     s"$name",
+    kind,
     StringUtils.createCamelCaseTokens(name)
   )