add search icon

Filip Łukasik · pikinier20 · commit 3ddfecab9bee · 2022-04-12T12:09:09.000+02:00
diff --git a/scaladoc-js/main/src/versions-dropdown/DropdownHandler.scala b/scaladoc-js/main/src/versions-dropdown/DropdownHandler.scala
@@ -68,6 +68,7 @@ end DropdownHandler
 
 @JSExportTopLevel("dropdownHandler")
 def dropdownHandler() =
+  console.log("ddc", document.getElementById("version-dropdown"))
   if document.getElementById("version-dropdown").getElementsByTagName("a").size > 0 &&
      window.getSelection.toString.length == 0 then
     document.getElementById("version-dropdown").classList.toggle("show")
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/search/dark/active.svg b/scaladoc/resources/dotty_res/images/icon-buttons/search/dark/active.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7C13 8.38653 12.5297 9.66322 11.7399 10.6792L14.5303 13.4697C14.8232 13.7626 14.8232 14.2374 14.5303 14.5303C14.2374 14.8232 13.7626 14.8232 13.4697 14.5303L10.6792 11.7399C9.66322 12.5297 8.38653 13 7 13C3.68629 13 1 10.3137 1 7ZM7 11.5C4.51472 11.5 2.5 9.48528 2.5 7C2.5 4.51472 4.51472 2.5 7 2.5C9.48528 2.5 11.5 4.51472 11.5 7C11.5 9.48528 9.48528 11.5 7 11.5Z" fill="#1A1523"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/search/dark/default.svg b/scaladoc/resources/dotty_res/images/icon-buttons/search/dark/default.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7C13 8.38653 12.5297 9.66322 11.7399 10.6792L14.5303 13.4697C14.8232 13.7626 14.8232 14.2374 14.5303 14.5303C14.2374 14.8232 13.7626 14.8232 13.4697 14.5303L10.6792 11.7399C9.66322 12.5297 8.38653 13 7 13C3.68629 13 1 10.3137 1 7ZM7 11.5C4.51472 11.5 2.5 9.48528 2.5 7C2.5 4.51472 4.51472 2.5 7 2.5C9.48528 2.5 11.5 4.51472 11.5 7C11.5 9.48528 9.48528 11.5 7 11.5Z" fill="#A09FA6"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/search/dark/disabled.svg b/scaladoc/resources/dotty_res/images/icon-buttons/search/dark/disabled.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7C13 8.38653 12.5297 9.66322 11.7399 10.6792L14.5303 13.4697C14.8232 13.7626 14.8232 14.2374 14.5303 14.5303C14.2374 14.8232 13.7626 14.8232 13.4697 14.5303L10.6792 11.7399C9.66322 12.5297 8.38653 13 7 13C3.68629 13 1 10.3137 1 7ZM7 11.5C4.51472 11.5 2.5 9.48528 2.5 7C2.5 4.51472 4.51472 2.5 7 2.5C9.48528 2.5 11.5 4.51472 11.5 7C11.5 9.48528 9.48528 11.5 7 11.5Z" fill="#A09FA6"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/search/dark/focus.svg b/scaladoc/resources/dotty_res/images/icon-buttons/search/dark/focus.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7C13 8.38653 12.5297 9.66322 11.7399 10.6792L14.5303 13.4697C14.8232 13.7626 14.8232 14.2374 14.5303 14.5303C14.2374 14.8232 13.7626 14.8232 13.4697 14.5303L10.6792 11.7399C9.66322 12.5297 8.38653 13 7 13C3.68629 13 1 10.3137 1 7ZM7 11.5C4.51472 11.5 2.5 9.48528 2.5 7C2.5 4.51472 4.51472 2.5 7 2.5C9.48528 2.5 11.5 4.51472 11.5 7C11.5 9.48528 9.48528 11.5 7 11.5Z" fill="#CCCCCC"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/search/dark/hover.svg b/scaladoc/resources/dotty_res/images/icon-buttons/search/dark/hover.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7C13 8.38653 12.5297 9.66322 11.7399 10.6792L14.5303 13.4697C14.8232 13.7626 14.8232 14.2374 14.5303 14.5303C14.2374 14.8232 13.7626 14.8232 13.4697 14.5303L10.6792 11.7399C9.66322 12.5297 8.38653 13 7 13C3.68629 13 1 10.3137 1 7ZM7 11.5C4.51472 11.5 2.5 9.48528 2.5 7C2.5 4.51472 4.51472 2.5 7 2.5C9.48528 2.5 11.5 4.51472 11.5 7C11.5 9.48528 9.48528 11.5 7 11.5Z" fill="#6F6E77"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/search/dark/selected.svg b/scaladoc/resources/dotty_res/images/icon-buttons/search/dark/selected.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7C13 8.38653 12.5297 9.66322 11.7399 10.6792L14.5303 13.4697C14.8232 13.7626 14.8232 14.2374 14.5303 14.5303C14.2374 14.8232 13.7626 14.8232 13.4697 14.5303L10.6792 11.7399C9.66322 12.5297 8.38653 13 7 13C3.68629 13 1 10.3137 1 7ZM7 11.5C4.51472 11.5 2.5 9.48528 2.5 7C2.5 4.51472 4.51472 2.5 7 2.5C9.48528 2.5 11.5 4.51472 11.5 7C11.5 9.48528 9.48528 11.5 7 11.5Z" fill="#EDEDEF"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/search/light/active.svg b/scaladoc/resources/dotty_res/images/icon-buttons/search/light/active.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7C13 8.38653 12.5297 9.66322 11.7399 10.6792L14.5303 13.4697C14.8232 13.7626 14.8232 14.2374 14.5303 14.5303C14.2374 14.8232 13.7626 14.8232 13.4697 14.5303L10.6792 11.7399C9.66322 12.5297 8.38653 13 7 13C3.68629 13 1 10.3137 1 7ZM7 11.5C4.51472 11.5 2.5 9.48528 2.5 7C2.5 4.51472 4.51472 2.5 7 2.5C9.48528 2.5 11.5 4.51472 11.5 7C11.5 9.48528 9.48528 11.5 7 11.5Z" fill="#1A1523"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/search/light/default.svg b/scaladoc/resources/dotty_res/images/icon-buttons/search/light/default.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7C13 8.38653 12.5297 9.66322 11.7399 10.6792L14.5303 13.4697C14.8232 13.7626 14.8232 14.2374 14.5303 14.5303C14.2374 14.8232 13.7626 14.8232 13.4697 14.5303L10.6792 11.7399C9.66322 12.5297 8.38653 13 7 13C3.68629 13 1 10.3137 1 7ZM7 11.5C4.51472 11.5 2.5 9.48528 2.5 7C2.5 4.51472 4.51472 2.5 7 2.5C9.48528 2.5 11.5 4.51472 11.5 7C11.5 9.48528 9.48528 11.5 7 11.5Z" fill="#6F6E77"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/search/light/disabled.svg b/scaladoc/resources/dotty_res/images/icon-buttons/search/light/disabled.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7C13 8.38653 12.5297 9.66322 11.7399 10.6792L14.5303 13.4697C14.8232 13.7626 14.8232 14.2374 14.5303 14.5303C14.2374 14.8232 13.7626 14.8232 13.4697 14.5303L10.6792 11.7399C9.66322 12.5297 8.38653 13 7 13C3.68629 13 1 10.3137 1 7ZM7 11.5C4.51472 11.5 2.5 9.48528 2.5 7C2.5 4.51472 4.51472 2.5 7 2.5C9.48528 2.5 11.5 4.51472 11.5 7C11.5 9.48528 9.48528 11.5 7 11.5Z" fill="#6F6E77"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/search/light/focus.svg b/scaladoc/resources/dotty_res/images/icon-buttons/search/light/focus.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7C13 8.38653 12.5297 9.66322 11.7399 10.6792L14.5303 13.4697C14.8232 13.7626 14.8232 14.2374 14.5303 14.5303C14.2374 14.8232 13.7626 14.8232 13.4697 14.5303L10.6792 11.7399C9.66322 12.5297 8.38653 13 7 13C3.68629 13 1 10.3137 1 7ZM7 11.5C4.51472 11.5 2.5 9.48528 2.5 7C2.5 4.51472 4.51472 2.5 7 2.5C9.48528 2.5 11.5 4.51472 11.5 7C11.5 9.48528 9.48528 11.5 7 11.5Z" fill="#6F6E77"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/search/light/hover.svg b/scaladoc/resources/dotty_res/images/icon-buttons/search/light/hover.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7C13 8.38653 12.5297 9.66322 11.7399 10.6792L14.5303 13.4697C14.8232 13.7626 14.8232 14.2374 14.5303 14.5303C14.2374 14.8232 13.7626 14.8232 13.4697 14.5303L10.6792 11.7399C9.66322 12.5297 8.38653 13 7 13C3.68629 13 1 10.3137 1 7ZM7 11.5C4.51472 11.5 2.5 9.48528 2.5 7C2.5 4.51472 4.51472 2.5 7 2.5C9.48528 2.5 11.5 4.51472 11.5 7C11.5 9.48528 9.48528 11.5 7 11.5Z" fill="#1A1523"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/search/light/selected.svg b/scaladoc/resources/dotty_res/images/icon-buttons/search/light/selected.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7C13 8.38653 12.5297 9.66322 11.7399 10.6792L14.5303 13.4697C14.8232 13.7626 14.8232 14.2374 14.5303 14.5303C14.2374 14.8232 13.7626 14.8232 13.4697 14.5303L10.6792 11.7399C9.66322 12.5297 8.38653 13 7 13C3.68629 13 1 10.3137 1 7ZM7 11.5C4.51472 11.5 2.5 9.48528 2.5 7C2.5 4.51472 4.51472 2.5 7 2.5C9.48528 2.5 11.5 4.51472 11.5 7C11.5 9.48528 9.48528 11.5 7 11.5Z" fill="#1A1523"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/styles/theme/components/button/icon-button.css b/scaladoc/resources/dotty_res/styles/theme/components/button/icon-button.css
@@ -66,6 +66,56 @@
   content: url("../../../../images/icon-buttons/sun/dark/selected.svg");
 }
 
+/* search-toggle button */
+
+#search-toggle.icon-button::after {
+  content: url("../../../../images/icon-buttons/search/light/default.svg");
+}
+
+#search-toggle.icon-button:hover::after {
+  content: url("../../../../images/icon-buttons/search/light/hover.svg");
+}
+
+#search-toggle.icon-button:active::after {
+  content: url("../../../../images/icon-buttons/search/light/active.svg");
+}
+
+#search-toggle.icon-button:disabled::after {
+  content: url("../../../../images/icon-buttons/search/light/disabled.svg");
+}
+
+#search-toggle.icon-button:focus::after {
+  content: url("../../../../images/icon-buttons/search/light/focus.svg");
+}
+
+#search-toggle.icon-button.selected::after {
+  content: url("../../../../images/icon-buttons/search/light/selected.svg");
+}
+
+.theme-dark #search-toggle.icon-button::after {
+  content: url("../../../../images/icon-buttons/search/dark/default.svg");
+}
+
+.theme-dark #search-toggle.icon-button:hover::after {
+  content: url("../../../../images/icon-buttons/search/dark/hover.svg");
+}
+
+.theme-dark #search-toggle.icon-button:active::after {
+  content: url("../../../../images/icon-buttons/search/dark/active.svg");
+}
+
+.theme-dark #search-toggle.icon-button:disabled::after {
+  content: url("../../../../images/icon-buttons/search/dark/disabled.svg");
+}
+
+.theme-dark #search-toggle.icon-button:focus::after {
+  content: url("../../../../images/icon-buttons/search/dark/focus.svg");
+}
+
+.theme-dark #search-toggle.icon-button.selected::after {
+  content: url("../../../../images/icon-buttons/search/dark/selected.svg");
+}
+
 /* hamburger button */
 .icon-button.hamburger::after {
   content: url("../../../../images/icon-buttons/hamburger/light/default.svg");
diff --git a/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala b/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala
@@ -220,12 +220,8 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
             )
           ),
         ),
-
-        div(cls:="header-container-center")(
-          input(`type` := "text", placeholder := "Search...", id := "dropdown-input", onkeyup := "filterFunction()"),
-        ),
-
          div(cls:="header-container-right")(
+          button(id := "search-toggle", cls := "icon-button"),
           span(cls := "text-button")(
             a(href := "https://www.scala-lang.org/download/") (
               "Download",
@@ -257,7 +253,6 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
             )
           ),
           button(id := "theme-toggle", cls := "icon-button"),
-
         ),
 
 
diff --git a/scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala b/scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala
@@ -293,6 +293,18 @@ trait Resources(using ctx: DocContext) extends Locations, Writer:
       dottyRes("images/icon-buttons/moon/light/hover.svg"),
       dottyRes("images/icon-buttons/moon/light/selected.svg"),
       dottyRes("images/icon-buttons/moon/light/default.svg"),
+      dottyRes("images/icon-buttons/search/dark/active.svg"),
+      dottyRes("images/icon-buttons/search/dark/disabled.svg"),
+      dottyRes("images/icon-buttons/search/dark/focus.svg"),
+      dottyRes("images/icon-buttons/search/dark/hover.svg"),
+      dottyRes("images/icon-buttons/search/dark/selected.svg"),
+      dottyRes("images/icon-buttons/search/dark/default.svg"),
+      dottyRes("images/icon-buttons/search/light/active.svg"),
+      dottyRes("images/icon-buttons/search/light/disabled.svg"),
+      dottyRes("images/icon-buttons/search/light/focus.svg"),
+      dottyRes("images/icon-buttons/search/light/hover.svg"),
+      dottyRes("images/icon-buttons/search/light/selected.svg"),
+      dottyRes("images/icon-buttons/search/light/default.svg"),
       searchData(pages),
       scastieConfiguration()
     )
