Skip to content

Commit

Permalink
Implement concise view switch in API members
Browse files Browse the repository at this point in the history
  • Loading branch information
pikinier20 committed Jul 27, 2022
1 parent 26036ba commit 7cb6785
Show file tree
Hide file tree
Showing 7 changed files with 132 additions and 2 deletions.
2 changes: 1 addition & 1 deletion scaladoc-js/common/src/utils/SafeLocalStorage.scala
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
30 changes: 29 additions & 1 deletion scaladoc-js/main/src/ux/Ux.scala
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
package dotty.tools.scaladoc

import scala.scalajs.js
import org.scalajs.dom._
import org.scalajs.dom.ext._

Expand All @@ -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()



10 changes: 10 additions & 0 deletions scaladoc/resources/dotty_res/styles/theme/color-tokens.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
}
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@

.documentableElement .signature {
margin-right: calc(3 * var(--base-spacing));
line-height: 1.5;
}

.documentableElement:hover {
Expand Down
53 changes: 53 additions & 0 deletions scaladoc/resources/dotty_res/styles/theme/components/switch.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
.switch {
position: relative;
display: inline-block;
width: 32px;
height: 18px;
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: 34px;
}

.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
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(14px);
-ms-transform: translateX(14px);
transform: translateX(14px);
}
31 changes: 31 additions & 0 deletions scaladoc/resources/dotty_res/styles/theme/layout/content.css
Original file line number Diff line number Diff line change
Expand Up @@ -424,3 +424,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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -328,6 +328,13 @@ class MemberRenderer(signatureRenderer: SignatureRenderer)(using DocContext) ext

div(cls := "membersList expand")(
h2(cls := "h500")("Members list"),
div(cls := "body-small", id := "concise-view-switch")(
span("Concise view"),
label(cls := "switch")(
input(Attr("type") := "checkbox")(),
span(cls := "slider")()
)
),
renderTabs(
singleSelection = false,
buildGroup("Packages", Seq(
Expand Down

0 comments on commit 7cb6785

Please sign in to comment.