From 7cb6785f623ffceed6e1471963d844a002536c14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Zyba=C5=82a?= Date: Wed, 27 Jul 2022 12:39:40 +0200 Subject: [PATCH] Implement concise view switch in API members --- .../common/src/utils/SafeLocalStorage.scala | 2 +- scaladoc-js/main/src/ux/Ux.scala | 30 ++++++++++- .../dotty_res/styles/theme/color-tokens.css | 10 ++++ .../styles/theme/components/api-member.css | 1 + .../styles/theme/components/switch.css | 53 +++++++++++++++++++ .../dotty_res/styles/theme/layout/content.css | 31 +++++++++++ .../scaladoc/renderers/MemberRenderer.scala | 7 +++ 7 files changed, 132 insertions(+), 2 deletions(-) create mode 100644 scaladoc/resources/dotty_res/styles/theme/components/switch.css diff --git a/scaladoc-js/common/src/utils/SafeLocalStorage.scala b/scaladoc-js/common/src/utils/SafeLocalStorage.scala index 788fe72881ac..59d40743b5b0 100644 --- a/scaladoc-js/common/src/utils/SafeLocalStorage.scala +++ b/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 { diff --git a/scaladoc-js/main/src/ux/Ux.scala b/scaladoc-js/main/src/ux/Ux.scala index 414d26322911..fc8867508777 100644 --- a/scaladoc-js/main/src/ux/Ux.scala +++ b/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() \ No newline at end of file + 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() + + + diff --git a/scaladoc/resources/dotty_res/styles/theme/color-tokens.css b/scaladoc/resources/dotty_res/styles/theme/color-tokens.css index 3078ad97e86b..7acfe1fe624b 100644 --- a/scaladoc/resources/dotty_res/styles/theme/color-tokens.css +++ b/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); } diff --git a/scaladoc/resources/dotty_res/styles/theme/components/api-member.css b/scaladoc/resources/dotty_res/styles/theme/components/api-member.css index ad91e5812c28..59de76b498c4 100644 --- a/scaladoc/resources/dotty_res/styles/theme/components/api-member.css +++ b/scaladoc/resources/dotty_res/styles/theme/components/api-member.css @@ -13,6 +13,7 @@ .documentableElement .signature { margin-right: calc(3 * var(--base-spacing)); + line-height: 1.5; } .documentableElement:hover { diff --git a/scaladoc/resources/dotty_res/styles/theme/components/switch.css b/scaladoc/resources/dotty_res/styles/theme/components/switch.css new file mode 100644 index 000000000000..fe7de1299b74 --- /dev/null +++ b/scaladoc/resources/dotty_res/styles/theme/components/switch.css @@ -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); +} diff --git a/scaladoc/resources/dotty_res/styles/theme/layout/content.css b/scaladoc/resources/dotty_res/styles/theme/layout/content.css index 68334e05aec6..6f91bf84c054 100644 --- a/scaladoc/resources/dotty_res/styles/theme/layout/content.css +++ b/scaladoc/resources/dotty_res/styles/theme/layout/content.css @@ -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; +} diff --git a/scaladoc/src/dotty/tools/scaladoc/renderers/MemberRenderer.scala b/scaladoc/src/dotty/tools/scaladoc/renderers/MemberRenderer.scala index 172732aa754d..ad6eb8ff0c8b 100644 --- a/scaladoc/src/dotty/tools/scaladoc/renderers/MemberRenderer.scala +++ b/scaladoc/src/dotty/tools/scaladoc/renderers/MemberRenderer.scala @@ -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(