Merge pull request #30 from pikinier20/scaladoc/concise-view

Scaladoc/concise view

Author: pikinier20

scaladoc-js/common/src/utils/SafeLocalStorage.scala

@@ -20,7 +20,7 @@ class SafeLocalStorage[T <: js.Any](key: String, defaultValue: T) {
   def checkSupport[U](defaultValue: U)(callback: () => U): U =
     if isLocalStorageSupported then callback() else defaultValue
 
-  def parseData(data: String): T =
+  private def parseData(data: String): T =
     try {
       Option(JSON.parse(data).asInstanceOf[T]).getOrElse(defaultValue)
     } catch {

scaladoc-js/main/src/ux/Ux.scala

@@ -1,5 +1,6 @@
 package dotty.tools.scaladoc
 
+import scala.scalajs.js
 import org.scalajs.dom._
 import org.scalajs.dom.ext._
 
@@ -20,4 +21,31 @@ class Ux():
         case e: html.Span => e
       }.foreach(modifySpan)
 
-  sideMenuItemsWordBreaking()
+  def loadConciseView(): Unit =
+    val localStorageValue = SafeLocalStorage("__CONCISE_VIEW__", js.Array(false)) // One-element js.Array is a hack for having type extending js.Any
+    val conciseViewSwitchInput = Option(document.getElementById("concise-view-switch"))
+      .map(_.querySelector("input").asInstanceOf[html.Input])
+
+    def modifyContent(concise: Boolean) =
+      if (concise) {
+        document.querySelector(".membersList").classList.add("concise")
+      } else {
+        document.querySelector(".membersList").classList.remove("concise")
+      }
+
+    conciseViewSwitchInput.foreach { input =>
+      val storedValue = localStorageValue.getData.head
+      modifyContent(storedValue)
+      input.checked = storedValue
+      input.addEventListener("change", e => {
+        val target = e.target.asInstanceOf[html.Input]
+        localStorageValue.setData(js.Array(target.checked))
+        modifyContent(target.checked)
+      })
+    }
+
+  sideMenuItemsWordBreaking()
+  loadConciseView()
+
+
+

scaladoc/resources/dotty_res/scripts/components/DocumentableList.js

@@ -177,8 +177,6 @@ class List {
         .every(([filterKey, value]) => {
           const filterGroup = filter.filters[filterKey]
 
-          console.log(Object.entries(filterGroup).filter(arr => arr[1].selected))
-
           return Object.entries(filterGroup).filter(arr => arr[1].selected).length == 0 || value.split(",").some(v => (filterGroup && filterGroup[v].selected))
         })
 

scaladoc/resources/dotty_res/scripts/ux.js

@@ -34,9 +34,11 @@ window.addEventListener("DOMContentLoaded", () => {
   var memberLists = document.getElementsByClassName("tab")
   if (memberLists) {
     for (i = 0; i < memberLists.length; i++) {
-      memberLists[i].children[0].onclick = function(e) {
-        this.classList.toggle("expand");
-        this.parentElement.classList.toggle("expand");
+      if ($(memberLists[i].children[0]).is("button")) {
+        memberLists[i].children[0].onclick = function(e) {
+          this.classList.toggle("expand");
+          this.parentElement.classList.toggle("expand");
+        }
       }
     }
   }

scaladoc/resources/dotty_res/styles/theme/color-tokens.css

@@ -92,6 +92,11 @@
   --shadow-first: var(--shadow1);
   --shadow-second: var(--shadow2);
   --shadow-inset: var(--grey7);
+
+  /* switch */
+  --switch-button: var(--grey1);
+  --switch-background-default: var(--grey9);
+  --switch-background-selected: var(--indigo8);
 }
 
 :root.theme-dark {
@@ -187,4 +192,9 @@
   --shadow-first: var(--shadow1);
   --shadow-second: var(--shadow2);
   --shadow-inset: var(--grey7);
+
+  /* switch */
+  --switch-button: var(--grey12);
+  --switch-background-default: var(--grey9);
+  --switch-background-selected: var(--indigo11);
 }

scaladoc/resources/dotty_res/styles/theme/components/api-member.css

@@ -13,12 +13,17 @@
 
 .documentableElement .signature {
   margin-right: calc(3 * var(--base-spacing));
+  line-height: 1.5;
 }
 
 .documentableElement:hover {
   cursor: pointer;
 }
 
+.documentableElement .documentableBrief {
+  color: var(--text-secondary);
+}
+
 .documentableElement .annotations {
   display: none;
 }
@@ -50,10 +55,6 @@
   display: block;
 }
 
-#content .documentableElement p {
-  color: var(--text-primary);
-}
-
 [t="k"] {
   color: var(--code-method-highlighting-keyword);
 }

scaladoc/resources/dotty_res/styles/theme/components/switch.css

@@ -0,0 +1,53 @@
+.switch {
+  position: relative;
+  display: inline-block;
+  width: calc(4 * var(--base-spacing));
+  height: calc(calc(2 * var(--base-spacing)) + 2px);
+  margin: var(--base-spacing);
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--switch-background-default);
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: calc(calc(4 * var(--base-spacing)) + 2px);
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: calc(2 * var(--base-spacing));
+  width: calc(2 * var(--base-spacing));
+  left: 1px;
+  bottom: 1px;
+  background-color: var(--switch-button);
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: var(--switch-background-selected);
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px var(--switch-background-selected);
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(calc(calc(2 * var(--base-spacing)) - 2px));
+  -ms-transform: translateX(calc(calc(2 * var(--base-spacing)) - 2px));
+  transform: translateX(calc(calc(2 * var(--base-spacing)) - 2px));
+}

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

@@ -6,6 +6,10 @@ body {
   overflow: hidden;
 }
 
+[id] {
+  scroll-margin-top: calc(10 * var(--base-spacing));
+}
+
 #container {
   --header-height: calc(8 * var(--base-spacing));
 }

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

@@ -145,18 +145,17 @@
 
 /* content headers */
 
+#content h1:first-of-type {
+  line-height: normal;
+}
+
 #content h1,
 #content h2 {
   color: var(--text-primary);
   margin-block-end: 0;
   margin-block-start: 0;
 }
 
-/* content paragraph */
-#content p {
-  color: var(--text-primary);
-}
-
 /* content first paragraph */
 #content .first-p {
   color: var(--text-secondary);
@@ -185,7 +184,6 @@
 #content :not(pre) > code {
   color: var(--code-props-content);
   font-family: "FiraCode-Regular";
-  background-color: var(--red3);
 }
 
 .breadcrumbs {
@@ -424,3 +422,34 @@
 #content section:last-child {
   margin-bottom: calc(6 * var(--base-spacing));
 }
+
+.membersList {
+  position: relative;
+}
+
+#concise-view-switch {
+  position: absolute;
+  right: 0;
+  top: var(--base-spacing);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.membersList.concise .documentableElement {
+  padding-top: var(--base-spacing);
+  padding-bottom: var(--base-spacing);
+  margin: var(--base-spacing);
+}
+
+.membersList.concise .documentableBrief p {
+  margin-block-start: 0.5em;
+}
+
+.membersList.concise .documentableElement .modifiers {
+  display: none;
+}
+
+.membersList.concise .documentableElement.expand .modifiers {
+  display: unset;
+}