From d220b95099426015c896815d446f41606bc2f66d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Zyba=C5=82a?= Date: Thu, 28 Jan 2021 13:25:10 +0100 Subject: [PATCH 1/2] Add icons to symbols on page --- scaladoc/resources/dotty_res/images/class.svg | 54 ++++ .../resources/dotty_res/images/class_comp.svg | 57 ++++ scaladoc/resources/dotty_res/images/enum.svg | 249 ++++++++++++++++ .../resources/dotty_res/images/enum_comp.svg | 273 ++++++++++++++++++ scaladoc/resources/dotty_res/images/given.svg | 250 ++++++++++++++++ .../resources/dotty_res/images/object.svg | 54 ++++ .../dotty_res/images/object_comp.svg | 57 ++++ scaladoc/resources/dotty_res/images/trait.svg | 54 ++++ .../resources/dotty_res/images/trait_comp.svg | 57 ++++ .../resources/dotty_res/styles/scalastyle.css | 49 ++++ .../scaladoc/renderers/MemberRenderer.scala | 18 +- .../tools/scaladoc/renderers/Resources.scala | 9 + 12 files changed, 1179 insertions(+), 2 deletions(-) create mode 100644 scaladoc/resources/dotty_res/images/class.svg create mode 100644 scaladoc/resources/dotty_res/images/class_comp.svg create mode 100644 scaladoc/resources/dotty_res/images/enum.svg create mode 100644 scaladoc/resources/dotty_res/images/enum_comp.svg create mode 100644 scaladoc/resources/dotty_res/images/given.svg create mode 100644 scaladoc/resources/dotty_res/images/object.svg create mode 100644 scaladoc/resources/dotty_res/images/object_comp.svg create mode 100644 scaladoc/resources/dotty_res/images/trait.svg create mode 100644 scaladoc/resources/dotty_res/images/trait_comp.svg diff --git a/scaladoc/resources/dotty_res/images/class.svg b/scaladoc/resources/dotty_res/images/class.svg new file mode 100644 index 000000000000..128f74d1ce66 --- /dev/null +++ b/scaladoc/resources/dotty_res/images/class.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + C + + + + + + + diff --git a/scaladoc/resources/dotty_res/images/class_comp.svg b/scaladoc/resources/dotty_res/images/class_comp.svg new file mode 100644 index 000000000000..b457207be13c --- /dev/null +++ b/scaladoc/resources/dotty_res/images/class_comp.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + C + + + + + + + + diff --git a/scaladoc/resources/dotty_res/images/enum.svg b/scaladoc/resources/dotty_res/images/enum.svg new file mode 100644 index 000000000000..8d09d1bdc019 --- /dev/null +++ b/scaladoc/resources/dotty_res/images/enum.svg @@ -0,0 +1,249 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + e + + diff --git a/scaladoc/resources/dotty_res/images/enum_comp.svg b/scaladoc/resources/dotty_res/images/enum_comp.svg new file mode 100644 index 000000000000..d601c7692689 --- /dev/null +++ b/scaladoc/resources/dotty_res/images/enum_comp.svg @@ -0,0 +1,273 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + e + + + + + + diff --git a/scaladoc/resources/dotty_res/images/given.svg b/scaladoc/resources/dotty_res/images/given.svg new file mode 100644 index 000000000000..02e882665efc --- /dev/null +++ b/scaladoc/resources/dotty_res/images/given.svg @@ -0,0 +1,250 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + g + + diff --git a/scaladoc/resources/dotty_res/images/object.svg b/scaladoc/resources/dotty_res/images/object.svg new file mode 100644 index 000000000000..6665d73c57a0 --- /dev/null +++ b/scaladoc/resources/dotty_res/images/object.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + O + + + + + + + diff --git a/scaladoc/resources/dotty_res/images/object_comp.svg b/scaladoc/resources/dotty_res/images/object_comp.svg new file mode 100644 index 000000000000..0434243fbd53 --- /dev/null +++ b/scaladoc/resources/dotty_res/images/object_comp.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + O + + + + + + + + diff --git a/scaladoc/resources/dotty_res/images/trait.svg b/scaladoc/resources/dotty_res/images/trait.svg new file mode 100644 index 000000000000..207a89f37f1b --- /dev/null +++ b/scaladoc/resources/dotty_res/images/trait.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + t + + + + + + + diff --git a/scaladoc/resources/dotty_res/images/trait_comp.svg b/scaladoc/resources/dotty_res/images/trait_comp.svg new file mode 100644 index 000000000000..8c83dec1f109 --- /dev/null +++ b/scaladoc/resources/dotty_res/images/trait_comp.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + t + + + + + + + + diff --git a/scaladoc/resources/dotty_res/styles/scalastyle.css b/scaladoc/resources/dotty_res/styles/scalastyle.css index 353784b7a84b..f30367eea6a9 100644 --- a/scaladoc/resources/dotty_res/styles/scalastyle.css +++ b/scaladoc/resources/dotty_res/styles/scalastyle.css @@ -613,6 +613,55 @@ footer .pull-right { position: relative; } +.header { + display: flex; + flex-direction: row; + padding-top: 1em; +} + +.member-icon { + box-sizing: content-box; + height: 5.7em; + width: 5.7em; + color:transparent; +} + +.member-icon.class::before { + content: url("../images/class.svg") +} + +.member-icon.class-with-companion::before { + content: url("../images/class_comp.svg") +} + +.member-icon.object::before { + content: url("../images/object.svg") +} + +.member-icon.object-with-companion::before { + content: url("../images/object_comp.svg") +} + +.member-icon.trait::before { + content: url("../images/trait.svg") +} + +.member-icon.trait-with-companion::before { + content: url("../images/trait_comp.svg") +} + +.member-icon.enum::before { + content: url("../images/enum.svg") +} + +.member-icon.enum-with-companion::before { + content: url("../images/enum_comp.svg") +} + +.member-icon.given::before { + content: url("../images/given.svg") +} + /* Large Screens */ @media(min-width: 1100px) { :root { diff --git a/scaladoc/src/dotty/tools/scaladoc/renderers/MemberRenderer.scala b/scaladoc/src/dotty/tools/scaladoc/renderers/MemberRenderer.scala index 0d09a109ddd6..654fe0a223dc 100644 --- a/scaladoc/src/dotty/tools/scaladoc/renderers/MemberRenderer.scala +++ b/scaladoc/src/dotty/tools/scaladoc/renderers/MemberRenderer.scala @@ -140,6 +140,14 @@ class MemberRenderer(signatureRenderer: SignatureRenderer)(using DocContext) ext span(cls := "signature")(signature.map(renderElement)), ) + def memberIcon(member: Member) = member.kind match { + case Kind.Package => Nil + case _ => + val withCompanion = member.companion.fold("")(_ => "-with-companion") + val iconSpan = span(cls := s"member-icon ${member.kind.name}$withCompanion")() + Seq(member.companion.flatMap(link(_)).fold(iconSpan)(link => a(href := link)(iconSpan))) + } + def annotations(member: Member) = val rawBuilder = InlineSignatureBuilder().annotationsBlock(member) val signatures = rawBuilder.asInstanceOf[InlineSignatureBuilder].names.reverse @@ -345,8 +353,14 @@ class MemberRenderer(signatureRenderer: SignatureRenderer)(using DocContext) ext case Kind.RootPackage =>Seq(h1(summon[DocContext].args.name)) case _ => Seq( - h1(m.name), - div(cls:= "header monospace")(annotations(m), memberSingnature(m)) + div(cls := "header")( + memberIcon(m), + h1(m.name) + ), + div(cls := "signature monospace")( + annotations(m), + memberSingnature(m) + ) ) div( diff --git a/scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala b/scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala index 233c452e8d18..fc7e86102865 100644 --- a/scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala +++ b/scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala @@ -129,6 +129,15 @@ trait Resources(using ctx: DocContext) extends Locations, Writer: dottyRes("fonts/dotty-icons.woff"), dottyRes("fonts/dotty-icons.ttf"), dottyRes("images/scaladoc_logo.svg"), + dottyRes("images/class.svg"), + dottyRes("images/class_comp.svg"), + dottyRes("images/object.svg"), + dottyRes("images/object_comp.svg"), + dottyRes("images/trait.svg"), + dottyRes("images/trait_comp.svg"), + dottyRes("images/enum.svg"), + dottyRes("images/enum_comp.svg"), + dottyRes("images/given.svg"), searchData(pages) ) From 1518b389e2d1a3e804a699027442e340f9d0c509 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Zyba=C5=82a?= Date: Tue, 2 Feb 2021 13:17:31 +0100 Subject: [PATCH 2/2] CRs + add icons to navigation --- .../resources/dotty_res/styles/scalastyle.css | 47 ++++++++++--------- .../scaladoc/renderers/HtmlRenderer.scala | 13 ++++- .../scaladoc/renderers/MemberRenderer.scala | 6 +-- 3 files changed, 38 insertions(+), 28 deletions(-) diff --git a/scaladoc/resources/dotty_res/styles/scalastyle.css b/scaladoc/resources/dotty_res/styles/scalastyle.css index f30367eea6a9..69e3814f55eb 100644 --- a/scaladoc/resources/dotty_res/styles/scalastyle.css +++ b/scaladoc/resources/dotty_res/styles/scalastyle.css @@ -181,14 +181,20 @@ th { #sideMenu2 div.expanded>div { display: block; } - /* always show top level entry*/ #sideMenu2>div{ display: block; } +#sideMenu2 span.micon { + height: 16px; + width: 16px; + margin-right: 8px; +} + /* 'a's in side menu represent text of entry with link */ #sideMenu2 a { + display: flex; align-items: center; flex: 1; overflow-x: hidden; @@ -200,19 +206,12 @@ th { margin-top: 1px; margin-bottom: 1px; width: 100%; - display: block; /* This trick adds selected bachground stratching to the lef side of screen */ margin-left: calc(0px - var(--side-width)); padding-left: var(--side-width); width: calc(2 * var(--side-width)); } -#sideMenu2 a::before { - margin-left: -12em; - width: 12em; - background: red; -} - #sideMenu2 a.selected { background: var(--leftbar-current-bg); font-weight: bold; @@ -224,7 +223,7 @@ th { } /* spans represent a expand button */ -#sideMenu2 span { +#sideMenu2 span.ar { align-items: center; cursor: pointer; position: absolute; @@ -233,7 +232,7 @@ th { padding: 4px; } -#sideMenu2 span::before { +#sideMenu2 span.ar::before { content: "\e903"; /* arrow down */ font-family: "dotty-icons" !important; font-size: 20px; @@ -244,11 +243,11 @@ th { align-items: center; justify-content: center; } -#sideMenu2 .expanded>span::before { +#sideMenu2 .expanded>span.ar::before { content: "\e905"; /* arrow up */ } -#sideMenu2 .div:hover>span::before { +#sideMenu2 .div:hover>span.ar::before { color: var(--leftbar-current-bg); } @@ -613,55 +612,57 @@ footer .pull-right { position: relative; } -.header { +.cover-header { display: flex; flex-direction: row; padding-top: 1em; } -.member-icon { +.micon { box-sizing: content-box; height: 5.7em; width: 5.7em; color:transparent; } -.member-icon.class::before { +.micon.c { content: url("../images/class.svg") } -.member-icon.class-with-companion::before { +.micon.c-wc { content: url("../images/class_comp.svg") } -.member-icon.object::before { +.micon.o { content: url("../images/object.svg") } -.member-icon.object-with-companion::before { +.micon.o-wc { content: url("../images/object_comp.svg") } -.member-icon.trait::before { +.micon.t { content: url("../images/trait.svg") } -.member-icon.trait-with-companion::before { +.micon.t-wc { content: url("../images/trait_comp.svg") } -.member-icon.enum::before { +.micon.e { content: url("../images/enum.svg") } -.member-icon.enum-with-companion::before { +.micon.e-wc { content: url("../images/enum_comp.svg") } -.member-icon.given::before { +.micon.g { content: url("../images/given.svg") } + + /* Large Screens */ @media(min-width: 1100px) { :root { diff --git a/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala b/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala index 764d4f5766ba..307b6d6bb740 100644 --- a/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala +++ b/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala @@ -144,11 +144,20 @@ class HtmlRenderer(rootPackage: Member, val members: Map[DRI, Member])(using ctx ) private def buildNavigation(pageLink: Link): AppliedTag = + def navigationIcon(member: Member) = member.kind match { + case m if m.isInstanceOf[Classlike] => Seq(span(cls := s"micon ${member.kind.name.head}")) + case _ => Nil + } + def renderNested(nav: Page): (Boolean, AppliedTag) = val isSelected = nav.link.dri == pageLink.dri def linkHtml(exapnded: Boolean = false) = val attrs = if (isSelected) Seq(cls := "selected expanded") else Nil - a(href := pathToPage(pageLink.dri, nav.link.dri), attrs)(nav.link.name) + val icon = nav.content match { + case m: Member => navigationIcon(m) + case _ => Nil + } + Seq(a(href := pathToPage(pageLink.dri, nav.link.dri), attrs)(icon, nav.link.name)) nav.children match case Nil => isSelected -> div(linkHtml()) @@ -158,7 +167,7 @@ class HtmlRenderer(rootPackage: Member, val members: Map[DRI, Member])(using ctx val attr = if expanded || isSelected then Seq(cls := "expanded") else Nil (isSelected || expanded) -> div(attr)( linkHtml(expanded), - span(), + span(cls := "ar"), nested.map(_._2) ) renderNested(navigablePage)._2 diff --git a/scaladoc/src/dotty/tools/scaladoc/renderers/MemberRenderer.scala b/scaladoc/src/dotty/tools/scaladoc/renderers/MemberRenderer.scala index 654fe0a223dc..8a41b4e93ca4 100644 --- a/scaladoc/src/dotty/tools/scaladoc/renderers/MemberRenderer.scala +++ b/scaladoc/src/dotty/tools/scaladoc/renderers/MemberRenderer.scala @@ -143,8 +143,8 @@ class MemberRenderer(signatureRenderer: SignatureRenderer)(using DocContext) ext def memberIcon(member: Member) = member.kind match { case Kind.Package => Nil case _ => - val withCompanion = member.companion.fold("")(_ => "-with-companion") - val iconSpan = span(cls := s"member-icon ${member.kind.name}$withCompanion")() + val withCompanion = member.companion.fold("")(_ => "-wc") + val iconSpan = span(cls := s"micon ${member.kind.name.head}$withCompanion")() Seq(member.companion.flatMap(link(_)).fold(iconSpan)(link => a(href := link)(iconSpan))) } @@ -353,7 +353,7 @@ class MemberRenderer(signatureRenderer: SignatureRenderer)(using DocContext) ext case Kind.RootPackage =>Seq(h1(summon[DocContext].args.name)) case _ => Seq( - div(cls := "header")( + div(cls := "cover-header")( memberIcon(m), h1(m.name) ),