Merge pull request #13566 from pikinier20/scaladoc/change-dark-theme

Scaladoc: UI/UX Changes

Author: pikinier20

scaladoc-js/resources/versions-dropdown.css

@@ -1,14 +1,23 @@
 /* The container <div> - needed to position the dropdown content */
+
 .versions-dropdown {
+  margin-left: 10px;
+  margin-right: 10px;
   position: relative;
 }
 
 /* Dropdown Button */
 .dropdownbtn {
-  background-color: var(--leftbar-bg);
-  color: white;
   padding: 4px 12px;
   border: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-radius: 3px;
+}
+
+.dropdownbtnactive {
+  background-color: var(--leftbar-dropdown-bg);
 }
 
 /* Dropdown button on hover & focus */
@@ -17,43 +26,75 @@
   cursor: pointer;
 }
 
+.dropdownbtn span.ar {
+  display: none;
+}
+
+.dropdownbtnactive span.ar {
+  display: unset;
+  position:absolute;
+  right: 10px;
+  z-index: 100;
+}
+
+.dropdownbtnactive span.ar:before {
+  content: '\e903';
+}
+
+.dropdownbtnactive.expanded span.ar:before {
+  content: '\e905';
+}
+
 /* The search field */
 #dropdown-input {
   box-sizing: border-box;
-  background-image: url('searchicon.png');
-  background-position: 14px 12px;
-  background-repeat: no-repeat;
-  font-size: 16px;
-  padding: 14px 20px 12px 45px;
-  border: none;
-  border-bottom: 1px solid #ddd;
+  background-color: var(--leftbar-dropdown-bg);
+  color: var(--leftbar-fg);
+  width: 100%;
+  font-size: var(--leftbar-font-size);
+  border-radius: 3px;
+  padding: 4px 12px;
 }
 
+#dropdown-input::placeholder{
+  color: var(--inactive-fg);
+}
 
-/* The search field when it gets focus/clicked on */
-#dropdown-input:focus {outline: 3px solid #ddd;}
+#dropdown-input, #dropdown-input:focus {
+  outline: none;
+  border: none;
+  border-bottom: 1px solid var(--border-medium);
+}
 
 
 /* Dropdown Content (Hidden by Default) */
 .dropdown-content {
   display: none;
   position: absolute;
-  background-color: #f6f6f6;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  background-color: var(--leftbar-dropdown-bg);
+  font-size: var(--leftbar-font-size);
   min-width: 230px;
-  border: 1px solid #ddd;
+  border-radius: 3px;
   z-index: 1;
 }
 
 /* Links inside the dropdown */
 .dropdown-content a {
-  color: black;
-  padding: 12px 16px;
+  color: var(--leftbar-fg);
   text-decoration: none;
+  padding: 4px 12px;
   display: block;
+  border-radius: 3px;
 }
 
 /* Change color of dropdown links on hover */
-.dropdown-content a:hover {background-color: #f1f1f1}
+.dropdown-content a:hover {
+  background-color: var(--leftbar-hover-bg);
+  color: var(--leftbar-fg);
+}
 
 /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
 .show {

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

@@ -60,14 +60,11 @@ class DropdownHandler:
         addVersionsList(json)
 
   document.addEventListener("click", (e: Event) => {
-    if e.target.asInstanceOf[html.Element].id != "dropdown-button" then
-      document.getElementById("dropdown-content").classList.remove("show")
-      document.getElementById("dropdown-button").classList.remove("expanded")
+    document.getElementById("dropdown-content").classList.remove("show")
+    document.getElementById("dropdown-button").classList.remove("expanded")
   })
 
-  document.getElementById("version").asInstanceOf[html.Span].onclick = (e: Event) => {
-    e.stopPropagation
-  }
+  document.getElementById("version").asInstanceOf[html.Span].addEventListener("click", (e: Event) => e.stopPropagation())
 end DropdownHandler
 
 @JSExportTopLevel("dropdownHandler")
@@ -76,6 +73,7 @@ def dropdownHandler() =
      window.getSelection.toString.length == 0 then
     document.getElementById("dropdown-content").classList.toggle("show")
     document.getElementById("dropdown-button").classList.toggle("expanded")
+    document.getElementById("dropdown-input").asInstanceOf[html.Input].focus()
 
 @JSExportTopLevel("filterFunction")
 def filterFunction() =

scaladoc-testcases/src/example/level2/Documentation.scala

@@ -134,6 +134,21 @@ abstract class Documentation[T, A <: Int, B >: String, -X, +Y](c1: String, val c
   def useOfOutsideTypeInsideObject(): ReturnObjectWithType.returnType = ???
   def useOfSameLevelOutsideType(): SameLevelTypeLinking = ???
 
+  /** Lorem ipsum
+    *
+    *
+    *
+    * Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur scelerisque facilisis sapien a lobortis. Fusce ultricies erat ante, sit amet bibendum orci commodo in. Sed elementum tempus ipsum id sodales. Ut quis nisi vitae turpis lacinia mattis id nec orci. Nullam tincidunt accumsan nisl, ac maximus quam eleifend tincidunt. Nunc ipsum nulla, mattis vitae auctor blandit, euismod sit amet elit. Proin sed porttitor nisi. Curabitur tristique pretium nisi. Vestibulum sagittis condimentum blandit. In ac consequat odio, in fermentum turpis. In hac habitasse platea dictumst.
+    * Proin scelerisque est sed magna fermentum, at ullamcorper purus porta. Aliquam posuere arcu elit, molestie fermentum justo malesuada non. In eget massa risus. Proin rutrum maximus arcu, et lacinia est suscipit nec. Morbi varius odio pretium turpis ornare, ut sollicitudin nunc egestas. Aliquam pulvinar massa odio, id tempor purus suscipit id. Nunc imperdiet sapien ligula, ut pretium lacus efficitur sit amet. Sed sed urna sed erat tempus sagittis quis eget elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis accumsan hendrerit nunc, in sagittis tellus. Vivamus mattis ligula sed dolor lacinia iaculis. Pellentesque vel turpis est. Nam pellentesque diam id arcu pharetra, et consectetur eros facilisis. Aliquam erat volutpat.
+    *
+    * Phasellus ac quam pretium, convallis dui id, vestibulum nibh. Fusce vulputate interdum ullamcorper. Sed nec erat varius, sagittis ipsum eget, interdum ex. Ut sed leo sit amet ligula ullamcorper facilisis et convallis tellus. Nullam consectetur vitae lorem vel mattis. Suspendisse ultrices ornare leo, ut porttitor est finibus vel. Ut faucibus arcu eget sapien lobortis, a luctus arcu posuere. Vivamus faucibus mauris facilisis enim ornare dapibus.
+    *
+    * Quisque pharetra et orci non aliquet. Sed urna ipsum, commodo et ultricies sed, volutpat at nunc. Cras non lectus ac mauris lobortis efficitur vel ac ante. Mauris vestibulum risus at mauris pretium, vel iaculis dolor pretium. Nam fringilla fermentum lacus et varius. Nulla pulvinar maximus tortor, et venenatis ipsum luctus id. Integer hendrerit tellus felis, eget hendrerit dolor aliquam sit amet.
+    *
+    * Aenean elementum risus sed enim egestas, vitae imperdiet urna eleifend. Donec elementum leo neque, eu consequat eros placerat vel. Integer pulvinar sem feugiat, tincidunt erat a, porta nulla. Mauris eu urna egestas, facilisis ex sodales, sollicitudin quam. Integer porta metus et nunc blandit lacinia. Integer posuere mauris et dui ornare, a finibus neque tristique. Cras sit amet lectus nunc. Nam facilisis tincidunt efficitur.
+    */
+  def loremIpsum[T](a: T): Map[T, T] = ???
+
   protected[example] val valWithScopeModifier = ???
   protected[this] val valWithScopeModifierThis = ???
 

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')
@@ -56,6 +58,19 @@ window.addEventListener("DOMContentLoaded", () => {
       window.location = pathToRoot; // global variable pathToRoot is created by the html renderer
     };
   }
+
+  document.querySelectorAll('.documentableAnchor').forEach(elem => {
+    elem.addEventListener('click', event => {
+      var $temp = $("<input>")
+      $("body").append($temp)
+      var a = document.createElement('a')
+      a.href = $(elem).attr("link")
+      $temp.val(a.href).select();
+      document.execCommand("copy")
+      $temp.remove();
+    })
+  })
+
   hljs.registerLanguage("scala", highlightDotty);
   hljs.registerAliases(["dotty", "scala3"], "scala");
   hljs.initHighlighting();

scaladoc/resources/dotty_res/styles/colors.css

@@ -14,7 +14,9 @@
   --grey600: hsl(193, 14%, 52%);
   --grey700: hsl(193, 14%, 42%);
   --grey800: hsl(193, 12%, 28%);
+  --grey850: hsl(193, 12%, 22%);
   --grey900: hsl(193, 12%, 16%);
+  --grey930: hsl(193, 11%, 14%);
 
   /* Blue */
   --blue100: hsl(200, 64%, 92%);
@@ -73,6 +75,9 @@
   --leftbar-current-fg: var(--blue500);
   --leftbar-hover-bg: var(--blue100);
   --leftbar-hover-fg: var(--grey900);
+  --leftbar-border: var(--grey300);
+
+  --leftbar-dropdown-bg: var(--grey200);
 
   --footer-bg: var(--white);
   --footer-fg: var(--grey700);
@@ -90,43 +95,46 @@
 :root.theme-dark {
   color-scheme: dark;
 
-  --border-light: var(--blue800);
-  --border-medium: var(--blue700);
+  --border-light: var(--grey800);
+  --border-medium: var(--grey600);
 
-  --body-bg: var(--blue900);
+  --body-bg: var(--grey930);
   --body-fg: var(--grey300);
-  --title-fg: var(--blue200);
+  --title-fg: var(--grey200);
 
   --active-bg: var(--blue500);
   --active-bg-shadow: var(--blue400);
   --active-fg: var(--grey300);
 
-  --inactive-bg: var(--grey800);
-  --inactive-bg-shadow: var(--grey600);
-  --inactive-fg: var(--grey600);
+  --inactive-bg: var(--grey700);
+  --inactive-bg-shadow: var(--grey500);
+  --inactive-fg: var(--grey500);
 
-  --code-bg: var(--blue800);
+  --code-bg: var(--grey850);
   --code-fg: var(--grey400);
   --symbol-fg: var(--grey300);
-  --documentable-bg: var(--blue800);
+  --documentable-bg: var(--grey850);
 
   --link-fg: var(--blue400);
   --link-hover-fg: var(--blue300);
   --link-sig-fg: var(--blue400);
 
-  --leftbar-bg: var(--black);
+  --leftbar-bg: var(--grey930);
   --leftbar-fg: var(--grey300);
-  --leftbar-current-bg: var(--blue700);
+  --leftbar-current-bg: var(--grey700);
   --leftbar-current-fg: var(--white);
-  --leftbar-hover-bg: var(--blue800);
+  --leftbar-hover-bg: var(--grey800);
   --leftbar-hover-fg: var(--grey300);
+  --leftbar-border: var(--grey800);
+
+  --leftbar-dropdown-bg: var(--grey850);
 
-  --footer-bg: var(--blue900);
+  --footer-bg: var(--grey930);
   --footer-fg: var(--grey400);
 
   --icon-color: var(--grey600);
-  --selected-fg: var(--blue800);
-  --selected-bg: var(--blue200);
+  --selected-fg: var(--grey800);
+  --selected-bg: var(--grey200);
 
   --tab-selected: var(--white);
   --tab-default: var(--grey300);

scaladoc/resources/dotty_res/styles/filter-bar.css

@@ -1,6 +1,6 @@
 .documentableFilter {
   padding: 24px 24px 24px 12px;
-  background-color: var(--code-bg);
+  background-color: var(--documentable-bg);
 }
 
 .documentableFilter.active .filterToggleButton svg {