handle dropdownHandler function properly

Author: Filip Łukasik

scaladoc-js/main/src/versions-dropdown/DropdownHandler.scala

@@ -27,11 +27,9 @@ class DropdownHandler:
     for (k, v) <- ver.versions do
       val child = a(cls := "text-button", href := v)(k)
       ddc.appendChild(child)
-    val arrow = span(cls := "ar")()
-    document.getElementById("dropdown-button").appendChild(arrow)
 
   private def disableButton() =
-    val btn = document.getElementById("dropdown-button").asInstanceOf[html.Button]
+    val btn = document.getElementById("version-dropdown").asInstanceOf[html.Button]
     btn.disabled = true
     btn.classList.remove("dropdownbtnactive")
 
@@ -59,21 +57,18 @@ class DropdownHandler:
         addVersionsList(json)
 
   document.addEventListener("click", (e: Event) => {
-    document.getElementById("version-dropdown").classList.remove("show")
-    document.getElementById("dropdown-button").classList.remove("expanded")
+    document.getElementById("version-dropdown").classList.remove("expanded")
   })
 
-  document.getElementById("version").asInstanceOf[html.Span].addEventListener("click", (e: Event) => e.stopPropagation())
+  document.getElementById("version-dropdown").asInstanceOf[html.Span].addEventListener("click", (e: Event) => e.stopPropagation())
 end DropdownHandler
 
 @JSExportTopLevel("dropdownHandler")
-def dropdownHandler() =
-  console.log("ddc", document.getElementById("version-dropdown"))
+def dropdownHandler(e: Event) =
+  e.stopPropagation()
   if document.getElementById("version-dropdown").getElementsByTagName("a").size > 0 &&
      window.getSelection.toString.length == 0 then
-    document.getElementById("version-dropdown").classList.toggle("show")
-    document.getElementById("dropdown-button").classList.toggle("expanded")
-    document.getElementById("dropdown-input").asInstanceOf[html.Input].focus()
+    document.getElementById("version-dropdown").classList.toggle("expanded")
 
 @JSExportTopLevel("filterFunction")
 def filterFunction() =

scaladoc/resources/dotty_res/styles/theme/components/button/icon-button.css

@@ -11,7 +11,7 @@
   height: calc(2 * var(--base-spacing));
 }
 
-.icon-button:focus {
+.icon-button:focus-visible {
   box-shadow: 0px 0px 0px 2px var(--focus-default);
   border-radius: 4px;
 }

scaladoc/resources/dotty_res/styles/theme/components/button/text-button.css

@@ -1,3 +1,7 @@
+.text-button {
+  display: flex;
+}
+
 .text-button a {
   color: var(--action-primary-content-default);
   text-decoration: none;
@@ -16,10 +20,23 @@
   color: var(--action-primary-content-selected);
 }
 
-.text-button:focus a {
+.text-button:focus-visible a {
   box-shadow: 0px 0px 0px 2px var(--focus-default);
 }
 
 .text-button:disabled a {
   opacity: 0.5;
 }
+
+.text-button::after {
+  margin-left: calc(1 * var(--base-spacing));
+}
+
+/* button with arrow */
+.text-button.with-arrow::after {
+  content: url("../../../../images/icon-buttons/hamburger/dark/default.svg");
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}

scaladoc/resources/dotty_res/styles/theme/components/dropdown-menu.css

@@ -10,11 +10,12 @@
   position: absolute;
   padding: calc(3 * var(--base-spacing));
   z-index: 2;
+  top: calc(6 * var(--base-spacing));
 }
 
-.dropdown-menu > *:not(:last-child) {
+/* .dropdown-menu > *:not(:last-child) {
   margin-bottom: calc(2 * var(--base-spacing));
-}
+} */
 
 .dropdown-menu.expanded {
   display: flex;

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

@@ -7,3 +7,8 @@ body {
 #container {
   --header-height: calc(8 * var(--base-spacing));
 }
+
+::-webkit-scrollbar {
+  width: 0;
+  background: transparent;
+}

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

@@ -207,16 +207,12 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
       div(id := "header")(
         div(cls := "header-container-left")(
           projectLogo,
-          span(onclick := "dropdownHandler()", cls := "text-button")(
+          span(onclick := "dropdownHandler(event)", cls := "text-button with-arrow")(
             a()(
               args.projectVersion.map(v => div(cls:="projectVersion")(v)).getOrElse("")
             ),
             div(id := "version-dropdown", cls := "dropdown-menu") (
-              span(cls := "text-button")(
-                a() (
-                "Download",
-                )
-              ),
+              span(cls := "text-button")()
             )
           ),
         ),