Sidebar refactor

Author: pikinier20

scaladoc-js/resources/versions-dropdown.css

@@ -5,8 +5,6 @@
 
 /* Dropdown Button */
 .dropdownbtn {
-  background-color: var(--leftbar-bg);
-  color: white;
   padding: 4px 12px;
   border: none;
 }

scaladoc/resources/dotty_res/scripts/ux.js

@@ -20,6 +20,8 @@ window.addEventListener("DOMContentLoaded", () => {
     $(this).parent().toggleClass("expanded")
   });
 
+  document.querySelectorAll("#sideMenu2 a").forEach(elem => elem.addEventListener('click', e => e.stopPropagation()))
+
   $('.names .tab').on('click', function() {
     parent = $(this).parents(".tabs").first()
     shown = $(this).hasClass('selected')

scaladoc/resources/dotty_res/styles/scalastyle.css

@@ -34,19 +34,25 @@ body, button, input {
   width: var(--side-width);
   height: 100%;
   border-right: none;
-  background: var(--leftbar-bg);
+  background: var(--body-bg);
   display: flex;
   flex-direction: column;
   z-index: 5;
-  border-right: solid var(--leftbar-border);
+  border-right: solid 1px var(--leftbar-border);
 }
 main {
   min-height: calc(100vh - var(--footer-height) - 24px);
-}
-#content {
   margin-left: var(--side-width);
   padding: var(--content-padding);
   padding-bottom: calc(24px + var(--footer-height));
+
+  display:flex;
+  flex-direction: column;
+  align-items: center;
+}
+#content {
+  max-width: 1100px;
+  width: 100%;
 }
 
 /* Text */
@@ -97,7 +103,6 @@ a, a:visited, span[data-unresolved-link] {
 }
 a:hover, a:active {
   color: var(--link-hover-fg);
-  text-decoration: underline;
 }
 
 /* Tables */
@@ -144,7 +149,6 @@ th {
 }
 
 #logo .projectVersion {
-  color: var(--grey600);
   font-size: 12px;
   display: flex;
   padding-left: 2px;
@@ -186,21 +190,37 @@ th {
 }
 
 /* divs in sidebar represent entry and its children */
-#sideMenu2 div {
-  position: relative;
-  display: none;
+#sideMenu2 .content {
   padding-left: 0.8em;
 }
 
-#sideMenu2 div.expanded {
-  display: block;
+#sideMenu2 > div {
+  padding-left: 0em;
 }
 
-/* hide children of hidden entries even if are expanded */
-#sideMenu2 div>div.expanded {
+#sideMenu2 .nav-item {
   display: none;
 }
 
+#sideMenu2 > .nav-item {
+  display: block;
+}
+
+#sideMenu2 .nav-header a:only-child {
+  padding-left: 20px;
+}
+
+#sideMenu2 .nav-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-radius: 3px;
+}
+
+#sideMenu2 .nav-item.expanded > .content > .nav-item {
+  display: block;
+}
+
 /* show direct children of currently exmanded node*/
 #sideMenu2 div.expanded>div {
   display: block;
@@ -220,18 +240,11 @@ th {
 #sideMenu2 a {
   display: flex;
   align-items: center;
-  flex: 1;
   overflow-wrap: anywhere;
   color: var(--leftbar-fg);
-  width: calc(2 * var(--side-width));
-  margin-right: .5rem;
-  margin-left: calc(0px - var(--side-width));
   padding-top: 2%;
   padding-bottom: 2%;
-  padding-left: calc(1.015 * var(--side-width));
-  padding-right: calc(0.15 * var(--side-width));
   box-sizing: border-box;
-  text-decoration: none;
 }
 
 #sideMenu2 a span:not(.micon) {
@@ -244,24 +257,20 @@ th {
   margin-right: 0.5ex;
 }
 
-#sideMenu2 a.selected {
+#sideMenu2 .nav-header.selected {
   background: var(--leftbar-current-bg);
   color: var(--leftbar-current-fg);
   font-weight: bold;
 }
 
-#sideMenu2 a:hover {
+#sideMenu2 .nav-header:hover {
   color: var(--leftbar-hover-fg);
   background: var(--leftbar-hover-bg);
+  cursor: pointer;
 }
-
 /* spans represent a expand button */
 span.ar {
-  align-items: center;
   cursor: pointer;
-  position: absolute;
-  right: 0.6em;
-  top: calc(0.01 * var(--side-width));
 }
 
 span.ar::before {
@@ -597,6 +606,7 @@ footer .mode {
 .signature.monospace {
   padding: 8px;
   display: flex;
+  flex-direction: column;
   border-radius: 3px;
 }
 
@@ -608,6 +618,10 @@ footer .mode {
   color: var(--link-sig-fg);
 }
 
+.signature a:hover {
+  color: var(--link-hover-fg);
+}
+
 .expand .signature {
   display: table-cell;
 }
@@ -928,4 +942,8 @@ footer .socials {
   margin: 0 8px 0 0;
 }
 
+.breadcrumbs {
+  align-self: flex-start;
+}
+
 

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

@@ -198,7 +198,8 @@ class HtmlRenderer(rootPackage: Member, val members: Map[DRI, Member])(using ctx
 
     def renderNested(nav: Page, toplevel: Boolean = false): (Boolean, AppliedTag) =
       val isSelected = nav.link.dri == pageLink.dri
-      def linkHtml(expanded: Boolean = false) =
+
+      def linkHtml(expanded: Boolean = false, withArrow: Boolean = false) =
         val attrs: Seq[String] = Seq(
           Option.when(isSelected)("selected"),
           Option.when(expanded)("expanded")
@@ -207,19 +208,23 @@ class HtmlRenderer(rootPackage: Member, val members: Map[DRI, Member])(using ctx
           case m: Member => navigationIcon(m)
           case _ => Nil
         }
-        Seq(a(href := pathToPage(pageLink.dri, nav.link.dri), cls := attrs.mkString(" "))(icon, span(nav.link.name)))
+        Seq(
+          span(cls := "nav-header " + attrs.mkString(" "))(
+            if withArrow then Seq(span(cls := "ar")) else Nil,
+            a(href := pathToPage(pageLink.dri, nav.link.dri))(icon, span(nav.link.name))
+          )
+        )
 
       nav.children match
-        case Nil => isSelected -> div(linkHtml())
+        case Nil => isSelected -> div(cls := s"nav-item ${if isSelected then "expanded" else ""}")(linkHtml())
         case children =>
           val nested = children.map(renderNested(_))
-          val expanded = nested.exists(_._1) || nav.link == pageLink
+          val expanded = nested.exists(_._1) || isSelected
           val attr =
-            if expanded || isSelected || toplevel then Seq(cls := "expanded") else Nil
+            if expanded || isSelected || toplevel then Seq(cls := "nav-item expanded") else Seq(cls := "nav-item")
           (isSelected || expanded) -> div(attr)(
-            linkHtml(expanded),
-            if toplevel then Nil else span(cls := "ar"),
-            nested.map(_._2)
+            linkHtml(expanded, true),
+            div(cls := "content")(nested.map(_._2))
           )
 
     renderNested(navigablePage, toplevel = true)._2
@@ -295,10 +300,8 @@ class HtmlRenderer(rootPackage: Member, val members: Map[DRI, Member])(using ctx
         ),
         div(id := "scaladoc-searchBar"),
         main(
-          div(id := "content")(
-            parentsHtml,
-            div(content),
-          )
+          parentsHtml,
+          div(id := "content")(content),
         ),
         footer(
           div(id := "generated-by")(

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

@@ -137,10 +137,8 @@ class MemberRenderer(signatureRenderer: SignatureRenderer)(using DocContext) ext
     val kind :: modifiersRevered = inlineBuilder.preName
     val signature = inlineBuilder.names.reverse
     Seq(
-      span(cls := "modifiers")(
-        span(cls := "other-modifiers")(modifiersRevered.reverse.map(renderElement)),
-      ),
       div(cls := "signature")(
+        span(cls := "modifiers")(modifiersRevered.reverse.map(renderElement)),
         span(cls := "kind")(renderElement(kind)),
         renderLink(member.name, member.dri, nameClasses),
         span(signature.map(renderElement))

scaladoc/src/dotty/tools/scaladoc/translators/ScalaSignatureUtils.scala

@@ -75,8 +75,9 @@ trait SignatureBuilder extends ScalaSignatureUtils {
   def modifiersAndVisibility(t: Member, kind: String) =
     val (prefixMods, suffixMods) = t.modifiers.partition(_.prefix)
     val all = prefixMods.map(_.name) ++ Seq(t.visibility.asSignature) ++ suffixMods.map(_.name)
-
-    text(all.toSignatureString()).text(kind + " ")
+    val filtered = all.filter(_.trim.nonEmpty)
+    val intermediate = if filtered.nonEmpty then text(filtered.toSignatureString()) else this
+    intermediate.text(kind + " ")
 
   def generics(on: Seq[TypeParameter]) = list(on.toList, "[", "]"){ (bdr, e) =>
     bdr.annotationsInline(e).text(e.variance).memberName(e.name, e.dri).signature(e.signature)