From 0fe8352ab057dfbbf690a723b2ccfc15b9977f4a Mon Sep 17 00:00:00 2001 From: Marcin Aman Date: Wed, 4 Aug 2021 17:02:31 +0200 Subject: Webhelp-like frontend --- .../src/main/kotlin/renderers/html/HtmlRenderer.kt | 66 +-- .../main/kotlin/renderers/html/NavigationPage.kt | 4 +- .../kotlin/renderers/html/htmlFormatingUtils.kt | 39 +- .../kotlin/renderers/html/htmlPreprocessors.kt | 1 + .../kotlin/signatures/KotlinSignatureProvider.kt | 2 +- .../templating/ProjectNameSubstitutionCommand.kt | 3 + .../src/main/resources/dokka/images/arrow_down.svg | 6 +- .../resources/dokka/images/arrow_down_white.svg | 3 + .../dokka/scripts/platform-content-handler.js | 4 - .../base/src/main/resources/dokka/styles/style.css | 449 +++++++++------------ .../kotlin/renderers/html/FormattingUtilsTest.kt | 46 +++ 11 files changed, 315 insertions(+), 308 deletions(-) create mode 100644 plugins/base/src/main/kotlin/templating/ProjectNameSubstitutionCommand.kt create mode 100644 plugins/base/src/main/resources/dokka/images/arrow_down_white.svg create mode 100644 plugins/base/src/test/kotlin/renderers/html/FormattingUtilsTest.kt (limited to 'plugins/base/src') diff --git a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt index d63e8da6..77086695 100644 --- a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt +++ b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt @@ -15,6 +15,7 @@ import org.jetbrains.dokka.base.resolvers.anchors.SymbolAnchorHint import org.jetbrains.dokka.base.resolvers.local.DokkaBaseLocationProvider import org.jetbrains.dokka.base.templating.InsertTemplateExtra import org.jetbrains.dokka.base.templating.PathToRootSubstitutionCommand +import org.jetbrains.dokka.base.templating.ProjectNameSubstitutionCommand import org.jetbrains.dokka.base.templating.ResolveLinkCommand import org.jetbrains.dokka.links.DRI import org.jetbrains.dokka.model.DisplaySourceSet @@ -603,22 +604,13 @@ open class HtmlRenderer( override fun FlowContent.buildNavigation(page: PageNode) = - div("navigation-wrapper") { - id = "navigation-wrapper" - div(classes = "breadcrumbs") { - val path = locationProvider.ancestors(page).filterNot { it is RendererSpecificPage }.asReversed() - if (path.isNotEmpty()) { - buildNavigationElement(path.first(), page) - path.drop(1).forEach { node -> - text("/") - buildNavigationElement(node, page) - } - } - } - div("pull-right d-flex") { - filterButtons(page) - div { - id = "searchBar" + div(classes = "breadcrumbs") { + val path = locationProvider.ancestors(page).filterNot { it is RendererSpecificPage }.asReversed() + if (path.size > 1) { + buildNavigationElement(path.first(), page) + path.drop(1).forEach { node -> + text("/") + buildNavigationElement(node, page) } } } @@ -685,7 +677,8 @@ open class HtmlRenderer( pageContext: ContentPage ) { div("sample-container") { - code(code.style.joinToString(" ") { it.toString().toLowerCase() }) { + val stylesWithBlock = code.style + TextStyle.Block + code(stylesWithBlock.joinToString(" ") { it.toString().toLowerCase() }) { attributes["theme"] = "idea" pre { code.children.forEach { buildContentNode(it, pageContext) } @@ -716,7 +709,7 @@ open class HtmlRenderer( } unappliedStyles.isNotEmpty() -> { val styleToApply = unappliedStyles.first() - applyStyle(styleToApply){ + applyStyle(styleToApply) { buildText(textNode, unappliedStyles - styleToApply) } } @@ -726,8 +719,8 @@ open class HtmlRenderer( } } - private inline fun FlowContent.applyStyle(styleToApply: Style, crossinline body: FlowContent.() -> Unit){ - when(styleToApply){ + private inline fun FlowContent.applyStyle(styleToApply: Style, crossinline body: FlowContent.() -> Unit) { + when (styleToApply) { TextStyle.Bold -> b { body() } TextStyle.Italic -> i { body() } TextStyle.Strikethrough -> strike { body() } @@ -803,14 +796,25 @@ open class HtmlRenderer( } } body { + div("navigation-wrapper") { + id = "navigation-wrapper" + div("library-name") { + clickableLogo(page, pathToRoot) + } + context.configuration.moduleVersion?.let { moduleVersion -> + div { text(moduleVersion) } + } + div("pull-right d-flex") { + filterButtons(page) + div { + id = "searchBar" + } + } + } div { id = "container" div { id = "leftColumn" - clickableLogo(page, pathToRoot) - div { - id = "paneSearch" - } div { id = "sideMenu" } @@ -857,15 +861,17 @@ open class HtmlRenderer( templateCommand(PathToRootSubstitutionCommand(pattern = "###", default = pathToRoot)) { a { href = "###index.html" - div { - id = "logo" + templateCommand(ProjectNameSubstitutionCommand(pattern = "@@@", default = context.configuration.moduleName)) { + span { + text("@@@") + } } } } - } else a { - href = pathToRoot + "index.html" - div { - id = "logo" + } else { + a { + href = pathToRoot + "index.html" + text(context.configuration.moduleName) } } } diff --git a/plugins/base/src/main/kotlin/renderers/html/NavigationPage.kt b/plugins/base/src/main/kotlin/renderers/html/NavigationPage.kt index e2953d46..e0b20f01 100644 --- a/plugins/base/src/main/kotlin/renderers/html/NavigationPage.kt +++ b/plugins/base/src/main/kotlin/renderers/html/NavigationPage.kt @@ -40,13 +40,13 @@ class NavigationPage(val root: NavigationNode, val moduleName: String, val conte id = navId attributes["pageId"] = "${moduleName}::${node.pageId}" div("overview") { - buildLink(node.dri, node.sourceSets.toList()) { buildBreakableText(node.name) } if (node.children.isNotEmpty()) { - span("navButton pull-right") { + span("navButton") { onClick = """document.getElementById("$navId").classList.toggle("hidden");""" span("navButtonContent") } } + buildLink(node.dri, node.sourceSets.toList()) { buildBreakableText(node.name) } } node.children.withIndex().forEach { (n, p) -> visit(p, "$navId-$n", renderer) } } diff --git a/plugins/base/src/main/kotlin/renderers/html/htmlFormatingUtils.kt b/plugins/base/src/main/kotlin/renderers/html/htmlFormatingUtils.kt index b9eab293..19079241 100644 --- a/plugins/base/src/main/kotlin/renderers/html/htmlFormatingUtils.kt +++ b/plugins/base/src/main/kotlin/renderers/html/htmlFormatingUtils.kt @@ -3,7 +3,7 @@ package org.jetbrains.dokka.base.renderers.html import kotlinx.html.FlowContent import kotlinx.html.span -fun FlowContent.buildTextBreakableAfterCapitalLetters(name: String) { +fun FlowContent.buildTextBreakableAfterCapitalLetters(name: String, hasLastElement: Boolean = false) { if (name.contains(" ")) { val withOutSpaces = name.split(" ") withOutSpaces.dropLast(1).forEach { @@ -13,7 +13,7 @@ fun FlowContent.buildTextBreakableAfterCapitalLetters(name: String) { buildBreakableText(withOutSpaces.last()) } else { val content = name.replace(Regex("(?!^)([A-Z])"), " $1").split(" ") - joinToHtml(content) { + joinToHtml(content, hasLastElement) { it } } @@ -22,32 +22,41 @@ fun FlowContent.buildTextBreakableAfterCapitalLetters(name: String) { fun FlowContent.buildBreakableDotSeparatedHtml(name: String) { val phrases = name.split(".") phrases.forEachIndexed { i, e -> + val elementWithOptionalDot = + if (i != phrases.lastIndex) { + "$e." + } else { + e + } + if (e.length > 10) { - buildBreakableText(e) + buildTextBreakableAfterCapitalLetters(elementWithOptionalDot, hasLastElement = i == phrases.lastIndex) } else { - val elementWithOptionalDot = - if (i != phrases.lastIndex) { - "$e." - } else { - e - } - buildBreakableHtmlElement(elementWithOptionalDot) + buildBreakableHtmlElement(elementWithOptionalDot, i == phrases.lastIndex) } } } -private fun FlowContent.joinToHtml(elements: List, onEach: (String) -> String) { +private fun FlowContent.joinToHtml(elements: List, hasLastElement: Boolean = true, onEach: (String) -> String) { elements.dropLast(1).forEach { buildBreakableHtmlElement(onEach(it)) } - span { - buildBreakableHtmlElement(elements.last(), last = true) + elements.last().takeIf { it.isNotBlank() }?.let { + if (hasLastElement) { + span { + buildBreakableHtmlElement(it, last = true) + } + } else { + buildBreakableHtmlElement(it, last = false) + } } } private fun FlowContent.buildBreakableHtmlElement(element: String, last: Boolean = false) { - span { - +element + element.takeIf { it.isNotBlank() }?.let { + span { + +it + } } if (!last) { wbr { } diff --git a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt index b6099e21..70f1c1d6 100644 --- a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt +++ b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt @@ -153,6 +153,7 @@ class StylesInstaller(private val dokkaContext: DokkaContext) : PageTransformer object AssetsInstaller : PageTransformer { private val imagesPages = listOf( "images/arrow_down.svg", + "images/arrow_down_white.svg", "images/docs_logo.svg", "images/logo-icon.svg", "images/go-to-top-icon.svg", diff --git a/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt b/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt index e5f0ae97..a3770ca2 100644 --- a/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt +++ b/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt @@ -176,7 +176,7 @@ class KotlinSignatureProvider(ctcc: CommentsToContentConverter, logger: DokkaLog pConstructor.sourceSets.toSet() ) { annotationsInline(it) - text(it.name ?: "", styles = mainStyles.plus(TextStyle.Bold)) + text(it.name ?: "") text(": ") signatureForProjection(it.type) } diff --git a/plugins/base/src/main/kotlin/templating/ProjectNameSubstitutionCommand.kt b/plugins/base/src/main/kotlin/templating/ProjectNameSubstitutionCommand.kt new file mode 100644 index 00000000..fa4ffd7b --- /dev/null +++ b/plugins/base/src/main/kotlin/templating/ProjectNameSubstitutionCommand.kt @@ -0,0 +1,3 @@ +package org.jetbrains.dokka.base.templating + +data class ProjectNameSubstitutionCommand(override val pattern: String, val default: String): SubstitutionCommand() \ No newline at end of file diff --git a/plugins/base/src/main/resources/dokka/images/arrow_down.svg b/plugins/base/src/main/resources/dokka/images/arrow_down.svg index 89e7df47..0d8eb3b4 100755 --- a/plugins/base/src/main/resources/dokka/images/arrow_down.svg +++ b/plugins/base/src/main/resources/dokka/images/arrow_down.svg @@ -1,3 +1,3 @@ - - - + + + \ No newline at end of file diff --git a/plugins/base/src/main/resources/dokka/images/arrow_down_white.svg b/plugins/base/src/main/resources/dokka/images/arrow_down_white.svg new file mode 100644 index 00000000..41bda9bf --- /dev/null +++ b/plugins/base/src/main/resources/dokka/images/arrow_down_white.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js b/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js index 4595fdec..05ec7377 100644 --- a/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js +++ b/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js @@ -19,10 +19,6 @@ window.addEventListener('load', () => { initTabs() handleAnchor() initHidingLeftNavigation() - - document.getElementById('main').addEventListener("scroll", (e) => { - document.getElementsByClassName("navigation-wrapper")[0].classList.toggle("sticky-navigation", e.target.scrollTop > 0) - }) topNavbarOffset = document.getElementById('navigation-wrapper') }) diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css index 81e1012d..24d950b4 100644 --- a/plugins/base/src/main/resources/dokka/styles/style.css +++ b/plugins/base/src/main/resources/dokka/styles/style.css @@ -3,16 +3,30 @@ @import url('jetbrains-mono.css'); :root { + --default-gray: #f4f4f4; --breadcrumb-font-color: #637282; + --breadcrumb-margin: 24px; --hover-link-color: #5B5DEF; - --average-color: #637282; + /*--average-color: #637282;*/ --footer-height: 64px; --footer-padding-top: 48px; - --horizontal-spacing-for-content: 42px; + --footer-background: var(--default-gray); + --horizontal-spacing-for-content: 16px; --mobile-horizontal-spacing-for-content: 8px; --bottom-spacing: 16px; --color-scrollbar: rgba(39, 40, 44, 0.40); - --color-scrollbar-track: #f4f4f4; + --color-scrollbar-track: var(--default-gray); + --default-white: #fff; + --background-color: var(--default-white); + --color-dark: #27282c; + --default-font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Arial, sans-serif; + --default-monospace-font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace; + --default-font-size: 15px; + --average-color: var(--color-dark); + --secondary-text-color: rgba(39, 40, 44, .7); + --code-background: rgba(39, 40, 44, .05); + --border-color: rgba(39, 40, 44, .2); + --top-navigation-height: 67px; } html { @@ -20,6 +34,8 @@ html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); scrollbar-color: rgba(39, 40, 44, 0.40) #F4F4F4; scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-track); + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; } html ::-webkit-scrollbar { @@ -37,67 +53,76 @@ html ::-webkit-scrollbar-thumb { background: rgba(39, 40, 44, 0.40); background: var(--color-scrollbar); } - + .main-content { padding-bottom: var(--bottom-spacing); z-index: 0; } -.main-content>* { +.main-content > * { margin-left: var(--horizontal-spacing-for-content); margin-right: var(--horizontal-spacing-for-content); } .navigation-wrapper { display: flex; - padding: 24px 0; flex-wrap: wrap; position: sticky; top: 0; - background-color: #f4f4f4; - padding-top: 19px; - padding-bottom: 18px; - z-index: 8; + background-color: var(--color-dark); + z-index: 4; + color: #fff; + font-family: var(--default-font-family); + letter-spacing: -0.1px; /* Reset margin and use padding for border */ margin-left: 0; margin-right: 0; - padding-left: var(--horizontal-spacing-for-content); - padding-right: var(--horizontal-spacing-for-content); + padding: 19px var(--horizontal-spacing-for-content) 18px; } -.navigation-wrapper.sticky-navigation { - border-bottom: 1px solid #DADFE6; +.navigation-wrapper > .library-name { + font-weight: 700; + margin-right: 12px; } -.breadcrumbs { - color: var(--breadcrumb-font-color); - overflow-wrap: break-word; +.navigation-wrapper a { + color: #fff; } -.breadcrumbs a { - color: var(--breadcrumb-font-color) +#searchBar { + margin-left: 16px; } -.breadcrumbs a:hover { - color: var(--hover-link-color) +.breadcrumbs, .breadcrumbs a, .breadcrumbs a:hover { + margin-top: var(--breadcrumb-margin); + color: var(--breadcrumb-font-color); + overflow-wrap: break-word; } -.tabs-section > .section-tab:first-child { +.tabs-section > .section-tab:first-child, +.platform-hinted > .platform-bookmarks-row > .platform-bookmark:first-child { margin-left: 0; } .section-tab { border: 0; - cursor: pointer; background-color: transparent; border-bottom: 1px solid #DADFE6; +} + +.platform-hinted > .platform-bookmarks-row { + margin-bottom: 16px; +} + +.section-tab, .platform-hinted > .platform-bookmarks-row > .platform-bookmark { + margin: 0 8px; padding: 11px 3px; - font-size: 14px; - color: var(--average-color); + cursor: pointer; outline: none; - margin: 0 8px; + font-size: var(--default-font-size); + color: var(--average-color); } .section-tab:hover { @@ -118,24 +143,11 @@ html ::-webkit-scrollbar-thumb { margin-top: 12px; } -.tabs-section-body .with-platform-tabs > div { - margin: 0 12px; -} - -.tabs-section-body .table .with-platform-tabs > div { - margin: 0; -} - .tabs-section-body .with-platform-tabs { padding-top: 12px; padding-bottom: 12px; } -.tabs-section-body .with-platform-tabs .sourceset-depenent-content .table-row { - background-color: #f4f4f4; - border-bottom: 2px solid white; -} - .cover > .platform-hinted { padding-top: 12px; margin-top: 12px; @@ -147,14 +159,14 @@ html ::-webkit-scrollbar-thumb { flex-direction: column; } -.cover .platform-hinted .sourceset-depenent-content > .symbol, -.cover > .symbol { - background-color: white; -} +/*.cover .platform-hinted .sourceset-depenent-content > .symbol,*/ +/*.cover > .symbol {*/ +/* background-color: white;*/ +/*}*/ -.cover .platform-hinted.with-platform-tabs .sourceset-depenent-content > .symbol { - background-color: #f4f4f4; -} +/*.cover .platform-hinted.with-platform-tabs .sourceset-depenent-content > .symbol {*/ +/* background-color: var(--background-color);*/ +/*}*/ .cover .platform-hinted.with-platform-tabs .sourceset-depenent-content > .block ~ .symbol { padding-top: 16px; @@ -169,7 +181,7 @@ html ::-webkit-scrollbar-thumb { .cover .platform-hinted.with-platform-tabs .sourceset-depenent-content > .block { padding: 0; - font-size: 14px; + font-size: var(--default-font-size); } .cover ~ .divergent-group { @@ -182,18 +194,21 @@ html ::-webkit-scrollbar-thumb { } .cover p.paragraph { - margin-top: 4px; + margin-top: 8px; } .divergent-group { - background-color: white; - padding: 8px 0px 8px 0; + background-color: var(--background-color); + padding: 8px 0 8px 0; margin-bottom: 2px; } -.divergent-group .table-row { - background-color: #F4F4F4; - border-bottom: 2px solid white; +.divergent-group .table-row, tbody > tr { + border-bottom: 1px solid var(--border-color); +} + +.divergent-group .table-row:last-of-type, tbody > tr:last-of-type { + border-bottom: none; } .title > .divergent-group:first-of-type { @@ -203,8 +218,13 @@ html ::-webkit-scrollbar-thumb { #container { display: flex; flex-direction: row; - min-height: 100%; + height: calc(100% - var(--top-navigation-height)); +} + +#container > div { height: 100%; + max-height: calc(100vh - var(--top-navigation-height)); + overflow: auto; } #main { @@ -212,47 +232,22 @@ html ::-webkit-scrollbar-thumb { max-width: calc(100% - 280px); display: flex; flex-direction: column; - height: auto; - overflow: auto; } #leftColumn { width: 280px; - border-right: 1px solid #DADFE6; + border-right: 1px solid var(--border-color); display: flex; flex-direction: column; } #sideMenu { - padding-top: 16px; - position: relative; - max-height: calc(100% - 140px); - height: 100%; + padding-top: 22px; overflow-y: auto; -} - -#sideMenu img { - margin: 1em 0.25em; -} - -#sideMenu hr { - background: #DADFE6; -} - -#logo { - background-size: 125px 26px; - border-bottom: 1px solid #DADFE6; - background-repeat: no-repeat; - background-origin: content-box; - padding-left: 24px; - padding-top: 24px; - height: 48px; - cursor: pointer; -} - -.monospace, -.code { - font-family: monospace; + font-size: 12px; + font-weight: 400; + line-height: 16px; + height: 100%; } .sample-container, div.CodeMirror { @@ -268,8 +263,8 @@ code.paragraph { align-items: center; display: flex; justify-content: flex-end; - padding: 10px; - margin-right: 14px; + padding: 2px 2px 2px 0; + margin-right: 5px; cursor: pointer; } @@ -281,19 +276,20 @@ code.paragraph { padding: 0; } -.symbol { - background-color: #F4F4F4; +.symbol, code { + background-color: var(--code-background); align-items: center; - display: block; - padding: 8px 32px 8px 8px; box-sizing: border-box; white-space: pre-wrap; - font-weight: bold; - position: relative; + font-family: var(--default-monospace-font-family); + font-size: var(--default-font-size); +} + +.symbol, code.block { + display: block; + padding: 12px 32px 12px 12px; + border-radius: 8px; line-height: 24px; - font-family: JetBrains Mono, Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal; - font-size: 14px; - min-height: 43px; } .symbol > a { @@ -304,6 +300,14 @@ code.paragraph { cursor: pointer; } +.symbol span.copy-icon { + display: none; +} + +.symbol:hover span.copy-icon { + display: inline-block; +} + .symbol span.copy-icon::before { width: 24px; height: 24px; @@ -314,11 +318,11 @@ code.paragraph { mask: url("../images/copy-icon.svg") no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; - background-color: var(--average-color); + background-color: var(--secondary-text-color); } .symbol span.copy-icon:hover::before { - background-color: black; + background-color: var(--color-dark); } .copy-popup-wrapper { @@ -330,7 +334,7 @@ code.paragraph { font-weight: normal; font-family: 'Inter', "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; width: max-content; - font-size: 14px; + font-size: var(--default-font-size); cursor: default; border: 1px solid #D8DCE1; box-sizing: border-box; @@ -405,7 +409,7 @@ code.paragraph { } .overview:hover:before { - background-color: #DADFE5; + background-color: rgba(39, 40, 44, 0.05); } #nav-submenu { @@ -427,7 +431,13 @@ code.paragraph { flex-direction: row; align-items: center; justify-content: center; - transform: rotate(180deg); + transform: rotate(90deg); + width: 12px; + height: 12px; +} + +.sideMenuPart[data-active] > .overview .navButtonContent::before { + content: url("../images/arrow_down_white.svg");; } .sideMenuPart.hidden > .navButton .navButtonContent::after { @@ -445,10 +455,10 @@ code.paragraph { body, table { font-family: 'Inter', "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; - background: #F4F4F4; + background: var(--background-color); font-style: normal; font-weight: normal; - font-size: 14px; + font-size: var(--default-font-size); line-height: 24px; margin: 0; } @@ -461,7 +471,6 @@ table { } tbody > tr { - border-bottom: 2px solid #F4F4F4; min-height: 56px; } @@ -471,14 +480,14 @@ td:first-child { .keyword { color: black; - font-family: JetBrains Mono, Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal; + font-family: var(--default-monospace-font-family); font-size: 12px; } .identifier { color: darkblue; font-size: 12px; - font-family: JetBrains Mono, Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal; + font-family: var(--default-monospace-font-family); } .brief { @@ -507,9 +516,6 @@ h1.cover { font-size: 60px; line-height: 64px; letter-spacing: -1.5px; - - border-bottom: 1px solid #DADFE6; - margin-bottom: 0; padding-bottom: 32px; display: block; @@ -552,14 +558,23 @@ h3, h4, h5, h6 { a { - color: #5B5DEF; - font-weight: 400; text-decoration: none; } -a:hover { - color: #5B5DEF; - text-decoration: underline; +#main a:not([data-name]) { + padding-bottom: 2px; + border-bottom: 1px solid var(--border-color); + cursor: pointer; + text-decoration: none; + color: inherit; + font-size: inherit; + line-height: inherit; + transition: color .1s, border-color .1s; +} + +#main a:hover { + border-bottom-color: unset; + color: inherit } a small { @@ -583,7 +598,7 @@ blockquote { code, pre { color: #333; - font-size: 14px; + font-size: var(--default-font-size); } pre { @@ -594,7 +609,7 @@ pre { th, td { text-align: left; vertical-align: top; - padding: 5px 10px; + padding: 12px 10px 11px; } dt { @@ -614,94 +629,15 @@ img { max-width: 100%; } -header { - width: 270px; - float: left; - position: fixed; -} - -header ul { - list-style: none; - height: 40px; - - padding: 0; - - background: #eee; - background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8f8f8), color-stop(100%, #dddddd)); - background: -webkit-linear-gradient(top, #f8f8f8 0%, #dddddd 100%); - background: -o-linear-gradient(top, #f8f8f8 0%, #dddddd 100%); - background: -ms-linear-gradient(top, #f8f8f8 0%, #dddddd 100%); - background: linear-gradient(top, #f8f8f8 0%, #dddddd 100%); - - border-radius: 5px; - border: 1px solid #d2d2d2; - box-shadow: inset #fff 0 1px 0, inset rgba(0, 0, 0, 0.03) 0 -1px 0; - width: 270px; -} - -header li { - width: 89px; - float: left; - border-right: 1px solid #d2d2d2; - height: 40px; -} - -header ul a { - line-height: 1; - font-size: 11px; - color: #999; - display: block; - text-align: center; - padding-top: 6px; - height: 40px; -} - strong { color: #222; font-weight: 700; } -header ul li + li { - width: 88px; - border-left: 1px solid #fff; -} - -header ul li + li + li { - border-right: none; - width: 89px; -} - -header ul a strong { - font-size: 14px; - display: block; - color: #222; -} - -section { - width: 500px; - float: right; - padding-bottom: 50px; -} - small { font-size: 11px; } -hr { - border: 0; - background: #e5e5e5; - height: 1px; - margin: 0 0 20px; -} - -footer { - width: 270px; - float: left; - position: fixed; - bottom: 50px; -} - .platform-tag { display: flex; flex-direction: row; @@ -779,6 +715,10 @@ footer { color: var(--average-color); } +.navigation-wrapper .platform-selector:not([data-active]) { + color: #FFFFFF; +} + td.content { padding-left: 24px; padding-top: 16px; @@ -798,19 +738,6 @@ td.content { position: relative; } -.main-subrow > div > span > a, -.main-subrow > div > span > span[data-unresolved-link] { - text-decoration: none; - font-style: normal; - font-weight: 600; - font-size: 14px; - color: #282E34; -} - -.main-subrow > div > span > a:hover { - color: var(--hover-link-color); -} - .main-subrow:hover .anchor-icon { opacity: 1; transition: 0.2s; @@ -836,6 +763,8 @@ td.content { .main-subrow .anchor-wrapper { position: relative; + width: 16px; + height: 16px; } .inline-flex { @@ -850,58 +779,60 @@ td.content { .platform-hinted > .platform-bookmarks-row > .platform-bookmark { min-width: 64px; - height: 36px; - border: 2px solid white; - background: white; + border: 2px solid var(--background-color); + background: inherit; outline: none; flex: none; order: 5; align-self: flex-start; - margin: 0; } -.platform-hinted > .platform-bookmarks-row > .platform-bookmark.jvm-like:hover { - border-top: 2px solid rgba(77, 187, 95, 0.3); +.platform-hinted > .platform-bookmarks-row > .platform-bookmark.jvm-like { + border-bottom: 2px solid rgba(77, 187, 95, 0.3); } -.platform-hinted > .platform-bookmarks-row > .platform-bookmark.js-like:hover { - border-top: 2px solid rgba(254, 175, 54, 0.3); +.platform-hinted > .platform-bookmarks-row > .platform-bookmark.js-like { + border-bottom: 2px solid rgba(254, 175, 54, 0.3); } -.platform-hinted > .platform-bookmarks-row > .platform-bookmark.native-like:hover { - border-top: 2px solid rgba(105, 118, 249, 0.3); +.platform-hinted > .platform-bookmarks-row > .platform-bookmark.native-like { + border-bottom: 2px solid rgba(105, 118, 249, 0.3); } -.platform-hinted > .platform-bookmarks-row > .platform-bookmark.common-like:hover { - border-top: 2px solid rgba(161, 170, 180, 0.3); +.platform-hinted > .platform-bookmarks-row > .platform-bookmark.common-like { + border-bottom: 2px solid rgba(161, 170, 180, 0.3); } -.platform-hinted > .platform-bookmarks-row > .platform-bookmark.jvm-like[data-active=''] { - border: 2px solid #F4F4F4; - border-top: 2px solid #4DBB5F; +.platform-hinted > .platform-bookmarks-row > .platform-bookmark.jvm-like[data-active=''], +.platform-hinted > .platform-bookmarks-row > .platform-bookmark.jvm-like:hover { + border: 2px solid var(--background-color); + border-bottom: 2px solid #4DBB5F; - background: #F4F4F4; + background: var(--background-color); } -.platform-hinted > .platform-bookmarks-row > .platform-bookmark.js-like[data-active=''] { - border: 2px solid #F4F4F4; - border-top: 2px solid #FED236; +.platform-hinted > .platform-bookmarks-row > .platform-bookmark.js-like[data-active=''], +.platform-hinted > .platform-bookmarks-row > .platform-bookmark.js-like:hover { + border: 2px solid var(--background-color); + border-bottom: 2px solid #FED236; - background: #F4F4F4; + background: var(--background-color); } -.platform-hinted > .platform-bookmarks-row > .platform-bookmark.native-like[data-active=''] { - border: 2px solid #F4F4F4; - border-top: 2px solid #CD74F6; +.platform-hinted > .platform-bookmarks-row > .platform-bookmark.native-like[data-active=''], +.platform-hinted > .platform-bookmarks-row > .platform-bookmark.native-like:hover { + border: 2px solid var(--background-color); + border-bottom: 2px solid #CD74F6; - background: #F4F4F4; + background: var(--background-color); } -.platform-hinted > .platform-bookmarks-row > .platform-bookmark.common-like[data-active=''] { - border: 2px solid #F4F4F4; - border-top: 2px solid #A6AFBA; +.platform-hinted > .platform-bookmarks-row > .platform-bookmark.common-like[data-active=''], +.platform-hinted > .platform-bookmarks-row > .platform-bookmark.common-like:hover { + border: 2px solid var(--background-color); + border-bottom: 2px solid #A6AFBA; - background: #F4F4F4; + background: var(--background-color); } .platform-hinted > .content:not([data-active]), @@ -929,17 +860,13 @@ td.content { .cover .with-platform-tabs { background-color: white; - font-size: 14px; -} - -.cover > .with-platform-tabs .platform-bookmarks-row { - margin: 0 16px; + font-size: var(--default-font-size); } .cover > .with-platform-tabs > .content { - margin: 0 16px; - background-color: #f4f4f4; + background-color: var(--background-color); padding: 8px 16px; + border: 1px solid rgba(39, 40, 44, 0.20); } .cover > .block { @@ -955,12 +882,15 @@ td.content { .table-row .with-platform-tabs .sourceset-depenent-content .brief { padding: 8px; - background-color: #f4f4f4; + background-color: var(--background-color); } .sideMenuPart[data-active] > .overview:before { - border-left: 4px solid var(--hover-link-color); - background: rgba(91, 93, 239, 0.15); + background: var(--color-dark); +} + +.sideMenuPart[data-active] > .overview > a { + color: var(--default-white); } .table { @@ -971,9 +901,12 @@ td.content { .table-row { display: flex; flex-direction: column; - background: white; - border-bottom: 2px solid #f4f4f4; - padding: 16px 24px 16px 24px; + border-bottom: 1px solid var(--border-color); + padding: 11px 0 12px 0; +} + +.table-row:last-of-type { + border-bottom: none; } .table-row .brief-comment { @@ -1078,12 +1011,12 @@ td.content { align-items: center; position: relative; min-height: var(--footer-height); - border-top: 1px solid #DADFE6; font-size: 12px; line-height: 16px; letter-spacing: 0.2px; - color: var(--breadcrumb-font-color); - margin-top:auto; + color: var(--average-color); + margin-top: auto; + background-color: var(--footer-background); } .footer span.go-to-top-icon { @@ -1119,7 +1052,7 @@ td.content { } .footer .padded-icon::before { - content: url("../images/footer-go-to-link.svg"); + content: url("../images/footer-go-to-link.svg"); } .pull-right { @@ -1163,6 +1096,7 @@ div.runnablesample { #main { max-width: 100%; } + #leftColumn { position: fixed; margin-left: -280px; @@ -1171,12 +1105,15 @@ div.runnablesample { background: white; height: 100%; } + #leftColumn.open { margin-left: 0; } + #leftColumn.open ~ #main #searchBar { display: none; } + #leftToggler { display: unset; position: fixed; @@ -1194,20 +1131,25 @@ div.runnablesample { padding: 8px 4px 8px 8px; background-color: white; } + #leftToggler .icon-toggler:hover { cursor: pointer; } + #leftColumn.open ~ #main #leftToggler { margin-left: 280px; } + .icon-toggler::before { content: "\232A"; } + #leftColumn.open ~ #main .icon-toggler::before { content: "\2329"; padding-right: 0.5em; margin-left: -0.5em; } + .main-content > * { margin-left: var(--mobile-horizontal-spacing-for-content); margin-right: var(--mobile-horizontal-spacing-for-content); @@ -1222,6 +1164,7 @@ div.runnablesample { padding-bottom: 16px; overflow: auto; } + h1.cover { font-size: 32px; line-height: 32px; diff --git a/plugins/base/src/test/kotlin/renderers/html/FormattingUtilsTest.kt b/plugins/base/src/test/kotlin/renderers/html/FormattingUtilsTest.kt new file mode 100644 index 00000000..fa1e30f6 --- /dev/null +++ b/plugins/base/src/test/kotlin/renderers/html/FormattingUtilsTest.kt @@ -0,0 +1,46 @@ +package renderers.html + +import junit.framework.Assert.assertEquals +import kotlinx.html.body +import kotlinx.html.html +import kotlinx.html.stream.createHTML +import org.jetbrains.dokka.base.renderers.html.buildBreakableText +import org.junit.jupiter.api.Test + +class FormattingUtilsTest { + @Test + fun `should build breakable text`(){ + val testedText = "kotlinx.collections.immutable" + val expectedHtml = """ + + kotlinx.collections.immutable + + """.trimIndent() + + val html = createHTML(prettyPrint = true).html { + body { + buildBreakableText(testedText) + } + } + + assertEquals(expectedHtml.trim(), html.trim()) + } + + @Test + fun `should build breakable text without empty spans`(){ + val testedText = "Package org.jetbrains.dokka.it.moduleC" + val expectedHtml = """ + + Package org.jetbrains.dokka.it.moduleC + + """.trimIndent() + + val html = createHTML(prettyPrint = true).html { + body { + buildBreakableText(testedText) + } + } + + assertEquals(expectedHtml.trim(), html.trim()) + } +} \ No newline at end of file -- cgit From 7cd0164426a6527b9bbb39d441f9bbdf28db45f3 Mon Sep 17 00:00:00 2001 From: Marcin Aman Date: Thu, 12 Aug 2021 13:48:22 +0200 Subject: Limit width --- plugins/base/src/main/resources/dokka/styles/style.css | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) (limited to 'plugins/base/src') diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css index 24d950b4..248bb531 100644 --- a/plugins/base/src/main/resources/dokka/styles/style.css +++ b/plugins/base/src/main/resources/dokka/styles/style.css @@ -7,7 +7,6 @@ --breadcrumb-font-color: #637282; --breadcrumb-margin: 24px; --hover-link-color: #5B5DEF; - /*--average-color: #637282;*/ --footer-height: 64px; --footer-padding-top: 48px; --footer-background: var(--default-gray); @@ -27,6 +26,7 @@ --code-background: rgba(39, 40, 44, .05); --border-color: rgba(39, 40, 44, .2); --top-navigation-height: 67px; + --max-width: 1160px; } html { @@ -58,6 +58,10 @@ html ::-webkit-scrollbar-thumb { .main-content { padding-bottom: var(--bottom-spacing); z-index: 0; + max-width: var(--max-width); + width: 100%; + margin-left: auto; + margin-right: auto; } .main-content > * { @@ -159,15 +163,6 @@ html ::-webkit-scrollbar-thumb { flex-direction: column; } -/*.cover .platform-hinted .sourceset-depenent-content > .symbol,*/ -/*.cover > .symbol {*/ -/* background-color: white;*/ -/*}*/ - -/*.cover .platform-hinted.with-platform-tabs .sourceset-depenent-content > .symbol {*/ -/* background-color: var(--background-color);*/ -/*}*/ - .cover .platform-hinted.with-platform-tabs .sourceset-depenent-content > .block ~ .symbol { padding-top: 16px; padding-left: 0; -- cgit From 79463f06a953de2f2c2ec877f34deaed658b3471 Mon Sep 17 00:00:00 2001 From: Marcin Aman Date: Thu, 12 Aug 2021 14:49:26 +0200 Subject: Remove unused components, docs, change icon to new kotlin logo and add hamburger for mobile --- .../src/main/kotlin/renderers/html/HtmlRenderer.kt | 8 ++++---- .../main/kotlin/renderers/html/htmlPreprocessors.kt | 2 -- .../base/src/main/resources/dokka/images/docs_logo.svg | 7 ------- .../base/src/main/resources/dokka/images/logo-icon.svg | 13 ++++++++++--- .../src/main/resources/dokka/styles/logo-styles.css | 3 --- plugins/base/src/main/resources/dokka/styles/style.css | 18 +++++------------- 6 files changed, 19 insertions(+), 32 deletions(-) delete mode 100644 plugins/base/src/main/resources/dokka/images/docs_logo.svg delete mode 100644 plugins/base/src/main/resources/dokka/styles/logo-styles.css (limited to 'plugins/base/src') diff --git a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt index 77086695..362447d1 100644 --- a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt +++ b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt @@ -798,6 +798,10 @@ open class HtmlRenderer( body { div("navigation-wrapper") { id = "navigation-wrapper" + div { + id = "leftToggler" + span("icon-toggler") + } div("library-name") { clickableLogo(page, pathToRoot) } @@ -821,10 +825,6 @@ open class HtmlRenderer( } div { id = "main" - div { - id = "leftToggler" - span("icon-toggler") - } templateCommand(PathToRootSubstitutionCommand("###", default = pathToRoot)) { script(type = ScriptType.textJavaScript, src = "###scripts/main.js") {} } diff --git a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt index 70f1c1d6..992c5eba 100644 --- a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt +++ b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt @@ -134,7 +134,6 @@ class ScriptsInstaller(private val dokkaContext: DokkaContext) : PageTransformer class StylesInstaller(private val dokkaContext: DokkaContext) : PageTransformer { private val stylesPages = listOf( "styles/style.css", - "styles/logo-styles.css", "styles/jetbrains-mono.css", "styles/main.css" ) @@ -154,7 +153,6 @@ object AssetsInstaller : PageTransformer { private val imagesPages = listOf( "images/arrow_down.svg", "images/arrow_down_white.svg", - "images/docs_logo.svg", "images/logo-icon.svg", "images/go-to-top-icon.svg", "images/footer-go-to-link.svg", diff --git a/plugins/base/src/main/resources/dokka/images/docs_logo.svg b/plugins/base/src/main/resources/dokka/images/docs_logo.svg deleted file mode 100644 index 7c1e3ae8..00000000 --- a/plugins/base/src/main/resources/dokka/images/docs_logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/plugins/base/src/main/resources/dokka/images/logo-icon.svg b/plugins/base/src/main/resources/dokka/images/logo-icon.svg index 1b3b3670..1fea0877 100755 --- a/plugins/base/src/main/resources/dokka/images/logo-icon.svg +++ b/plugins/base/src/main/resources/dokka/images/logo-icon.svg @@ -1,3 +1,10 @@ - - - + + + + + + + + + + \ No newline at end of file diff --git a/plugins/base/src/main/resources/dokka/styles/logo-styles.css b/plugins/base/src/main/resources/dokka/styles/logo-styles.css deleted file mode 100644 index a3a07d75..00000000 --- a/plugins/base/src/main/resources/dokka/styles/logo-styles.css +++ /dev/null @@ -1,3 +0,0 @@ -#logo { - background-image: url(../images/docs_logo.svg); -} \ No newline at end of file diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css index 248bb531..d16b420d 100644 --- a/plugins/base/src/main/resources/dokka/styles/style.css +++ b/plugins/base/src/main/resources/dokka/styles/style.css @@ -694,6 +694,7 @@ small { align-self: flex-end; min-height: 30px; z-index: 0; + flex-wrap: wrap; } .platform-selector:hover { @@ -1110,21 +1111,12 @@ div.runnablesample { } #leftToggler { - display: unset; - position: fixed; - top: 50%; - transform: translateY(-50%); z-index: 5; font-size: 20px; transition: margin .2s ease-out; + margin-right: 16px; - color: var(--average-color); - border: 1px solid var(--average-color); - border-left: 0; - border-top-right-radius: 1em; - border-bottom-right-radius: 1em; - padding: 8px 4px 8px 8px; - background-color: white; + color: var(--background-color); } #leftToggler .icon-toggler:hover { @@ -1136,11 +1128,11 @@ div.runnablesample { } .icon-toggler::before { - content: "\232A"; + content: "\2630"; } #leftColumn.open ~ #main .icon-toggler::before { - content: "\2329"; + content: "\2630"; padding-right: 0.5em; margin-left: -0.5em; } -- cgit From 9044761979d08b3b116c9f8416dfb42ae216898c Mon Sep 17 00:00:00 2001 From: Marcin Aman Date: Sat, 21 Aug 2021 15:57:01 +0200 Subject: Review comments + "unspecified" version fix --- plugins/base/src/main/kotlin/renderers/html/htmlFormatingUtils.kt | 8 +------- .../base/src/main/kotlin/signatures/KotlinSignatureProvider.kt | 2 +- 2 files changed, 2 insertions(+), 8 deletions(-) (limited to 'plugins/base/src') diff --git a/plugins/base/src/main/kotlin/renderers/html/htmlFormatingUtils.kt b/plugins/base/src/main/kotlin/renderers/html/htmlFormatingUtils.kt index 19079241..d77426da 100644 --- a/plugins/base/src/main/kotlin/renderers/html/htmlFormatingUtils.kt +++ b/plugins/base/src/main/kotlin/renderers/html/htmlFormatingUtils.kt @@ -22,13 +22,7 @@ fun FlowContent.buildTextBreakableAfterCapitalLetters(name: String, hasLastEleme fun FlowContent.buildBreakableDotSeparatedHtml(name: String) { val phrases = name.split(".") phrases.forEachIndexed { i, e -> - val elementWithOptionalDot = - if (i != phrases.lastIndex) { - "$e." - } else { - e - } - + val elementWithOptionalDot = e.takeIf { i == phrases.lastIndex } ?: "$e." if (e.length > 10) { buildTextBreakableAfterCapitalLetters(elementWithOptionalDot, hasLastElement = i == phrases.lastIndex) } else { diff --git a/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt b/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt index a3770ca2..bd967518 100644 --- a/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt +++ b/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt @@ -176,7 +176,7 @@ class KotlinSignatureProvider(ctcc: CommentsToContentConverter, logger: DokkaLog pConstructor.sourceSets.toSet() ) { annotationsInline(it) - text(it.name ?: "") + text(it.name.orEmpty()) text(": ") signatureForProjection(it.type) } -- cgit From 3d416fec95e741289b02bf4a4b2e0fdf06de0aea Mon Sep 17 00:00:00 2001 From: Marcin Aman Date: Wed, 25 Aug 2021 09:41:01 +0200 Subject: Fix breakable labels and icon on single module project --- .../src/main/kotlin/renderers/html/HtmlRenderer.kt | 4 +-- .../kotlin/renderers/html/htmlFormatingUtils.kt | 10 +++--- .../kotlin/renderers/html/FormattingUtilsTest.kt | 38 +++++++++++++++++++++- 3 files changed, 43 insertions(+), 9 deletions(-) (limited to 'plugins/base/src') diff --git a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt index 362447d1..3086b82d 100644 --- a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt +++ b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt @@ -734,8 +734,6 @@ open class HtmlRenderer( super.render(root) } - private fun PageNode.root(path: String) = locationProvider.pathToRoot(this) + path - override fun buildPage(page: ContentPage, content: (FlowContent, ContentPage) -> Unit): String = buildHtml(page, page.embeddedResources) { div("main-content") { @@ -755,7 +753,7 @@ open class HtmlRenderer( meta(name = "viewport", content = "width=device-width, initial-scale=1", charset = "UTF-8") title(page.name) templateCommand(PathToRootSubstitutionCommand("###", default = pathToRoot)) { - link(href = page.root("###images/logo-icon.svg"), rel = "icon", type = "image/svg") + link(href = "###images/logo-icon.svg", rel = "icon", type = "image/svg") } templateCommand(PathToRootSubstitutionCommand("###", default = pathToRoot)) { script { unsafe { +"""var pathToRoot = "###";""" } } diff --git a/plugins/base/src/main/kotlin/renderers/html/htmlFormatingUtils.kt b/plugins/base/src/main/kotlin/renderers/html/htmlFormatingUtils.kt index d77426da..c77a6e94 100644 --- a/plugins/base/src/main/kotlin/renderers/html/htmlFormatingUtils.kt +++ b/plugins/base/src/main/kotlin/renderers/html/htmlFormatingUtils.kt @@ -12,7 +12,7 @@ fun FlowContent.buildTextBreakableAfterCapitalLetters(name: String, hasLastEleme } buildBreakableText(withOutSpaces.last()) } else { - val content = name.replace(Regex("(?!^)([A-Z])"), " $1").split(" ") + val content = name.replace(Regex("(?<=[a-z])([A-Z])"), " $1").split(" ") joinToHtml(content, hasLastElement) { it } @@ -35,13 +35,13 @@ private fun FlowContent.joinToHtml(elements: List, hasLastElement: Boole elements.dropLast(1).forEach { buildBreakableHtmlElement(onEach(it)) } - elements.last().takeIf { it.isNotBlank() }?.let { + elements.takeIf { it.isNotEmpty() && it.last().isNotEmpty() }?.let { if (hasLastElement) { span { - buildBreakableHtmlElement(it, last = true) + buildBreakableHtmlElement(it.last(), last = true) } } else { - buildBreakableHtmlElement(it, last = false) + buildBreakableHtmlElement(it.last(), last = false) } } } @@ -59,4 +59,4 @@ private fun FlowContent.buildBreakableHtmlElement(element: String, last: Boolean fun FlowContent.buildBreakableText(name: String) = if (name.contains(".")) buildBreakableDotSeparatedHtml(name) - else buildTextBreakableAfterCapitalLetters(name) \ No newline at end of file + else buildTextBreakableAfterCapitalLetters(name, hasLastElement = true) \ No newline at end of file diff --git a/plugins/base/src/test/kotlin/renderers/html/FormattingUtilsTest.kt b/plugins/base/src/test/kotlin/renderers/html/FormattingUtilsTest.kt index fa1e30f6..c77a78fb 100644 --- a/plugins/base/src/test/kotlin/renderers/html/FormattingUtilsTest.kt +++ b/plugins/base/src/test/kotlin/renderers/html/FormattingUtilsTest.kt @@ -31,7 +31,43 @@ class FormattingUtilsTest { val testedText = "Package org.jetbrains.dokka.it.moduleC" val expectedHtml = """ - Package org.jetbrains.dokka.it.moduleC + Package org.jetbrains.dokka.it.moduleC + + """.trimIndent() + + val html = createHTML(prettyPrint = true).html { + body { + buildBreakableText(testedText) + } + } + + assertEquals(expectedHtml.trim(), html.trim()) + } + + @Test + fun `should build breakable text for text with braces`(){ + val testedText = "[Common]kotlinx.collections.immutable" + val expectedHtml = """ + + [Common]kotlinx.collections.immutable + + """.trimIndent() + + val html = createHTML(prettyPrint = true).html { + body { + buildBreakableText(testedText) + } + } + + assertEquals(expectedHtml.trim(), html.trim()) + } + + @Test + fun `should build breakable text for camel case notation`(){ + val testedText = "DokkkkkkkaIsTheBest" + val expectedHtml = """ + + DokkkkkkkaIsTheBest """.trimIndent() -- cgit From 06650909dbce632bd92d3a10c2887b69555edbfc Mon Sep 17 00:00:00 2001 From: Marcin Aman Date: Wed, 25 Aug 2021 14:46:57 +0200 Subject: Fix issue with excessive scroll --- plugins/base/src/main/resources/dokka/styles/style.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'plugins/base/src') diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css index d16b420d..8530b514 100644 --- a/plugins/base/src/main/resources/dokka/styles/style.css +++ b/plugins/base/src/main/resources/dokka/styles/style.css @@ -440,8 +440,7 @@ code.paragraph { } .sideMenuPart.hidden > .sideMenuPart { - height: 0; - visibility: hidden; + display: none; } .filtered > a, .filtered > .navButton { -- cgit From 742f96bdf5c0b842e68dfaf43f4ab3446e87e3df Mon Sep 17 00:00:00 2001 From: Marcin Aman Date: Wed, 25 Aug 2021 14:54:34 +0200 Subject: Dark mode (#2081) --- plugins/base/src/main/kotlin/DokkaBase.kt | 4 - .../src/main/kotlin/renderers/html/HtmlRenderer.kt | 14 ++ .../kotlin/renderers/html/htmlPreprocessors.kt | 33 +--- .../src/main/resources/dokka/images/arrow_down.svg | 2 +- .../resources/dokka/images/arrow_down_white.svg | 3 - .../main/resources/dokka/images/theme-toggle.svg | 4 + .../dokka/scripts/platform-content-handler.js | 13 ++ .../base/src/main/resources/dokka/styles/style.css | 192 ++++++++++----------- 8 files changed, 120 insertions(+), 145 deletions(-) delete mode 100644 plugins/base/src/main/resources/dokka/images/arrow_down_white.svg create mode 100644 plugins/base/src/main/resources/dokka/images/theme-toggle.svg (limited to 'plugins/base/src') diff --git a/plugins/base/src/main/kotlin/DokkaBase.kt b/plugins/base/src/main/kotlin/DokkaBase.kt index c0e512c5..7bc2912c 100644 --- a/plugins/base/src/main/kotlin/DokkaBase.kt +++ b/plugins/base/src/main/kotlin/DokkaBase.kt @@ -205,10 +205,6 @@ class DokkaBase : DokkaPlugin() { htmlPreprocessors providing ::NavigationPageInstaller order { after(rootCreator) } } - val navigationSearchInstaller by extending { - htmlPreprocessors providing ::NavigationSearchInstaller order { after(rootCreator) } - } - val scriptsInstaller by extending { htmlPreprocessors providing ::ScriptsInstaller order { after(rootCreator) } } diff --git a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt index 3086b82d..3cf914ce 100644 --- a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt +++ b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt @@ -758,6 +758,14 @@ open class HtmlRenderer( templateCommand(PathToRootSubstitutionCommand("###", default = pathToRoot)) { script { unsafe { +"""var pathToRoot = "###";""" } } } + // This script doesn't need to be there but it is nice to have since app in dark mode doesn't 'blink' (class is added before it is rendered) + script { unsafe { +""" + const storage = localStorage.getItem("dokka-dark-mode") + const savedDarkMode = storage ? JSON.parse(storage) : false + if(savedDarkMode === true){ + document.getElementsByTagName("html")[0].classList.add("theme-dark") + } + """.trimIndent() } } resources.forEach { when { it.substringBefore('?').substringAfterLast('.') == "css" -> @@ -808,6 +816,12 @@ open class HtmlRenderer( } div("pull-right d-flex") { filterButtons(page) + button { + id = "theme-toggle-button" + span { + id = "theme-toggle" + } + } div { id = "searchBar" } diff --git a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt index 992c5eba..9faf4d17 100644 --- a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt +++ b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt @@ -49,37 +49,6 @@ abstract class NavigationDataProvider { } } -open class NavigationSearchInstaller(val context: DokkaContext) : NavigationDataProvider(), PageTransformer { - private val mapper = jacksonObjectMapper() - - open fun createSearchRecordFromNode(node: NavigationNode, location: String): SearchRecord = - SearchRecord(name = node.name, location = location) - - override fun invoke(input: RootPageNode): RootPageNode { - val page = RendererSpecificResourcePage( - name = "scripts/navigation-pane.json", - children = emptyList(), - strategy = RenderingStrategy.DriLocationResolvableWrite { resolver -> - val content = navigableChildren(input).withDescendants().map { - createSearchRecordFromNode(it, resolveLocation(resolver, it.dri, it.sourceSets).orEmpty()) - } - if (context.configuration.delayTemplateSubstitution) { - mapper.writeValueAsString(AddToSearch(context.configuration.moduleName, content.toList())) - } else { - mapper.writeValueAsString(content) - } - }) - - return input.modified(children = input.children + page) - } - - private fun resolveLocation(locationResolver: DriResolver, dri: DRI, sourceSets: Set): String? = - locationResolver(dri, sourceSets).also { location -> - if (location.isNullOrBlank()) context.logger.warn("Cannot resolve path for $dri and sourceSets: ${sourceSets.joinToString { it.name }}") - } - -} - open class NavigationPageInstaller(val context: DokkaContext) : NavigationDataProvider(), PageTransformer { override fun invoke(input: RootPageNode): RootPageNode = @@ -152,13 +121,13 @@ class StylesInstaller(private val dokkaContext: DokkaContext) : PageTransformer object AssetsInstaller : PageTransformer { private val imagesPages = listOf( "images/arrow_down.svg", - "images/arrow_down_white.svg", "images/logo-icon.svg", "images/go-to-top-icon.svg", "images/footer-go-to-link.svg", "images/anchor-copy-button.svg", "images/copy-icon.svg", "images/copy-successful-icon.svg", + "images/theme-toggle.svg", ) override fun invoke(input: RootPageNode) = input.modified( diff --git a/plugins/base/src/main/resources/dokka/images/arrow_down.svg b/plugins/base/src/main/resources/dokka/images/arrow_down.svg index 0d8eb3b4..c0388dee 100755 --- a/plugins/base/src/main/resources/dokka/images/arrow_down.svg +++ b/plugins/base/src/main/resources/dokka/images/arrow_down.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/plugins/base/src/main/resources/dokka/images/arrow_down_white.svg b/plugins/base/src/main/resources/dokka/images/arrow_down_white.svg deleted file mode 100644 index 41bda9bf..00000000 --- a/plugins/base/src/main/resources/dokka/images/arrow_down_white.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/plugins/base/src/main/resources/dokka/images/theme-toggle.svg b/plugins/base/src/main/resources/dokka/images/theme-toggle.svg new file mode 100644 index 00000000..2a8d750e --- /dev/null +++ b/plugins/base/src/main/resources/dokka/images/theme-toggle.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js b/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js index 05ec7377..ae838d6f 100644 --- a/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js +++ b/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js @@ -20,8 +20,21 @@ window.addEventListener('load', () => { handleAnchor() initHidingLeftNavigation() topNavbarOffset = document.getElementById('navigation-wrapper') + darkModeSwitch() }) +const darkModeSwitch = () => { + const localStorageKey = "dokka-dark-mode" + const storage = localSto