From da498f50eabfad8969eb7795a535e97f7e25ca58 Mon Sep 17 00:00:00 2001 From: Marcin Aman Date: Wed, 21 Oct 2020 09:01:07 +0200 Subject: Remove hard coded svg-s from renderer --- .../src/main/kotlin/renderers/html/HtmlRenderer.kt | 55 ++-------------------- .../kotlin/renderers/html/htmlPreprocessors.kt | 7 ++- .../resources/dokka/images/anchor-copy-button.svg | 4 ++ .../src/main/resources/dokka/images/copy-icon.svg | 3 ++ .../dokka/images/copy-successful-icon.svg | 3 ++ .../resources/dokka/images/footer-go-to-link.svg | 3 ++ .../main/resources/dokka/images/go-to-top-icon.svg | 4 ++ .../base/src/main/resources/dokka/styles/style.css | 47 +++++++++++------- 8 files changed, 58 insertions(+), 68 deletions(-) create mode 100644 plugins/base/src/main/resources/dokka/images/anchor-copy-button.svg create mode 100644 plugins/base/src/main/resources/dokka/images/copy-icon.svg create mode 100644 plugins/base/src/main/resources/dokka/images/copy-successful-icon.svg create mode 100644 plugins/base/src/main/resources/dokka/images/footer-go-to-link.svg create mode 100644 plugins/base/src/main/resources/dokka/images/go-to-top-icon.svg diff --git a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt index 2a10bdd5..05eda494 100644 --- a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt +++ b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt @@ -132,29 +132,13 @@ open class HtmlRenderer( } private fun FlowContent.copyButton() = span(classes = "top-right-position") { - span("copy-icon") { - unsafe { - raw( - """ - - """.trimIndent() - ) - } - } + span("copy-icon") copiedPopup("Content copied to clipboard", "popup-to-left") } private fun FlowContent.copiedPopup(notificationContent: String, additionalClasses: String = "") = div("copy-popup-wrapper $additionalClasses") { - unsafe { - raw( - """ - - - - """.trimIndent() - ) - } + span("copy-popup-icon") span { text(notificationContent) } @@ -629,16 +613,6 @@ open class HtmlRenderer( span(classes = "anchor-wrapper") { span(classes = "anchor-icon") { attributes["pointing-to"] = pointingTo - unsafe { - raw( - """ - - - - - """.trimIndent() - ) - } } copiedPopup("Link copied to clipboard") } @@ -796,34 +770,13 @@ open class HtmlRenderer( content() div(classes = "footer") { span("go-to-top-icon") { - a(href = "#container") { - unsafe { - raw( - """ - - - - - """.trimIndent() - ) - } - } + a(href = "#container") } span { text("© 2020 Copyright") } span("pull-right") { span { text("Sponsored and developed by dokka") } a(href = "https://github.com/Kotlin/dokka") { - span(classes = "padded-icon") { - unsafe { - raw( - """ - - - - """.trimIndent() - ) - } - } + span(classes = "padded-icon") } } } diff --git a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt index fdb5be3c..93fe8221 100644 --- a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt +++ b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt @@ -121,7 +121,12 @@ object AssetsInstaller : PageTransformer { private val imagesPages = listOf( "images/arrow_down.svg", "images/docs_logo.svg", - "images/logo-icon.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", ) override fun invoke(input: RootPageNode) = input.modified( diff --git a/plugins/base/src/main/resources/dokka/images/anchor-copy-button.svg b/plugins/base/src/main/resources/dokka/images/anchor-copy-button.svg new file mode 100644 index 00000000..bab9d747 --- /dev/null +++ b/plugins/base/src/main/resources/dokka/images/anchor-copy-button.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/plugins/base/src/main/resources/dokka/images/copy-icon.svg b/plugins/base/src/main/resources/dokka/images/copy-icon.svg new file mode 100644 index 00000000..61440f0a --- /dev/null +++ b/plugins/base/src/main/resources/dokka/images/copy-icon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/plugins/base/src/main/resources/dokka/images/copy-successful-icon.svg b/plugins/base/src/main/resources/dokka/images/copy-successful-icon.svg new file mode 100644 index 00000000..1865f739 --- /dev/null +++ b/plugins/base/src/main/resources/dokka/images/copy-successful-icon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/plugins/base/src/main/resources/dokka/images/footer-go-to-link.svg b/plugins/base/src/main/resources/dokka/images/footer-go-to-link.svg new file mode 100644 index 00000000..0137e223 --- /dev/null +++ b/plugins/base/src/main/resources/dokka/images/footer-go-to-link.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/plugins/base/src/main/resources/dokka/images/go-to-top-icon.svg b/plugins/base/src/main/resources/dokka/images/go-to-top-icon.svg new file mode 100644 index 00000000..d987f3ea --- /dev/null +++ b/plugins/base/src/main/resources/dokka/images/go-to-top-icon.svg @@ -0,0 +1,4 @@ + + + + \ 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 97ac19f7..5e505f33 100644 --- a/plugins/base/src/main/resources/dokka/styles/style.css +++ b/plugins/base/src/main/resources/dokka/styles/style.css @@ -220,7 +220,8 @@ code.paragraph { align-items: center; display: flex; justify-content: flex-end; - padding-right: 24px; + padding: 10px; + margin-right: 14px; cursor: pointer; } @@ -255,12 +256,21 @@ code.paragraph { cursor: pointer; } -.symbol span.copy-icon path { - fill: var(--average-color); +.symbol span.copy-icon::before { + width: 24px; + height: 24px; + display: inline-block; + content: ''; + /* masks are required if you want to change color of the icon dynamically instead of using those provided with the SVG */ + -webkit-mask: url("../images/copy-icon.svg") no-repeat 50% 50%; + mask: url("../images/copy-icon.svg") no-repeat 50% 50%; + -webkit-mask-size: cover; + mask-size: cover; + background-color: var(--average-color); } -.symbol span.copy-icon:hover path { - fill: black; +.symbol span.copy-icon:hover::before { + background-color: black; } .copy-popup-wrapper { @@ -280,6 +290,16 @@ code.paragraph { border-radius: 3px; } +.copy-popup-wrapper > .copy-popup-icon::before { + content: url("../images/copy-successful-icon.svg"); + padding: 8px; +} + +.copy-popup-wrapper > .copy-popup-icon { + position: relative; + top: 3px; +} + .copy-popup-wrapper.popup-to-left { /* since it is in position absolute we can just move it to the left to make it always appear on the left side of the icon */ left: -15em; @@ -293,10 +313,6 @@ code.paragraph { font-weight: normal; } -.copy-popup-wrapper svg { - padding: 8px; -} - .copy-popup-wrapper > span:last-child { padding-right: 14px; } @@ -768,8 +784,8 @@ td.content { transition: 0.2s 0.5s; } -.main-subrow .anchor-icon > svg path { - fill: var(--average-color); +.main-subrow .anchor-icon::before { + content: url("../images/anchor-copy-button.svg"); } .main-subrow .anchor-icon:hover { @@ -1038,8 +1054,8 @@ td.content { background-color: white; } -.footer span.go-to-top-icon path { - fill: var(--average-color); +.footer span.go-to-top-icon > a::before { + content: url("../images/go-to-top-icon.svg"); } .footer > span:first-child { @@ -1060,9 +1076,8 @@ td.content { padding-left: 0.5em; } -/*For svg*/ -.footer path { - fill: var(--breadcrumb-font-color); +.footer .padded-icon::before { + content: url("../images/footer-go-to-link.svg"); } .pull-right { -- cgit