diff options
Diffstat (limited to 'core')
-rw-r--r-- | core/.gitignore | 3 | ||||
-rw-r--r-- | core/search-component/src/main/js/search/app-root.js | 52 | ||||
-rw-r--r-- | core/search-component/src/main/js/search/app.css | 2 | ||||
-rw-r--r-- | core/search-component/src/main/js/search/app.js | 2 | ||||
-rw-r--r-- | core/src/main/kotlin/pages/ContentNodes.kt | 2 | ||||
-rw-r--r-- | core/src/main/kotlin/pages/contentNodeProperties.kt | 4 | ||||
-rw-r--r-- | core/src/main/resources/dokka/scripts/navigationLoader.js | 1 | ||||
-rw-r--r-- | core/src/main/resources/dokka/scripts/platformContentHandler.js | 25 | ||||
-rw-r--r-- | core/src/main/resources/dokka/styles/style.css | 92 |
9 files changed, 162 insertions, 21 deletions
diff --git a/core/.gitignore b/core/.gitignore index a259cd26..afd3caa6 100644 --- a/core/.gitignore +++ b/core/.gitignore @@ -1,2 +1,3 @@ src/main/resources/dokka/scripts/main.js -src/main/resources/dokka/scripts/main.js.map
\ No newline at end of file +src/main/resources/dokka/scripts/main.js.map +src/main/resources/dokka/scripts/*.svg
\ No newline at end of file diff --git a/core/search-component/src/main/js/search/app-root.js b/core/search-component/src/main/js/search/app-root.js index 25a374a5..5d650581 100644 --- a/core/search-component/src/main/js/search/app-root.js +++ b/core/search-component/src/main/js/search/app-root.js @@ -1,13 +1,47 @@ -import React, {Component} from 'react'; +import React, {useRef, useState, useEffect} from 'react'; import {WithFuzzySearchFilter} from './search'; import './app.css'; -export default class AppRoot extends Component { - render() { - return ( - <div className="search-content"> - <WithFuzzySearchFilter/> - </div> - ); - } +function useComponentVisible(initialIsVisible) { + const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible); + const ref = useRef(null); + + const handleHideDropdown = (event) => { + if (event.key === "Escape") { + setIsComponentVisible(false); + } + }; + + const handleClickOutside = event => { + if (ref.current && !ref.current.contains(event.target)) { + setIsComponentVisible(false); + } + }; + + useEffect(() => { + document.addEventListener("keydown", handleHideDropdown, true); + document.addEventListener("click", handleClickOutside, true); + return () => { + document.removeEventListener("keydown", handleHideDropdown, true); + document.removeEventListener("click", handleClickOutside, true); + }; + }); + + return { ref, isComponentVisible, setIsComponentVisible }; +} + +export const AppRoot = () => { + const { + ref, + isComponentVisible, + setIsComponentVisible + } = useComponentVisible(false); + + return <div ref={ref} className="search-content"> + {isComponentVisible && (<WithFuzzySearchFilter/>)} + {!isComponentVisible && ( + <span onClick={() => setIsComponentVisible(true)}> + <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M19.64 18.36l-6.24-6.24a7.52 7.52 0 1 0-1.28 1.28l6.24 6.24zM7.5 13.4a5.9 5.9 0 1 1 5.9-5.9 5.91 5.91 0 0 1-5.9 5.9z"/></svg> + </span>)} + </div> }
\ No newline at end of file diff --git a/core/search-component/src/main/js/search/app.css b/core/search-component/src/main/js/search/app.css index 933237e0..c51d3fe1 100644 --- a/core/search-component/src/main/js/search/app.css +++ b/core/search-component/src/main/js/search/app.css @@ -17,5 +17,5 @@ html, } .search-content { - margin: calc(var(--ring-unit) * 4); + padding: 24px 41px; } diff --git a/core/search-component/src/main/js/search/app.js b/core/search-component/src/main/js/search/app.js index 64091607..bceffa48 100644 --- a/core/search-component/src/main/js/search/app.js +++ b/core/search-component/src/main/js/search/app.js @@ -2,7 +2,7 @@ import React from 'react'; import {render} from 'react-dom'; import RedBox from 'redbox-react'; -import AppRoot from './app-root'; +import {AppRoot} from './app-root'; import './app.css'; const appEl = document.getElementById('searchBar'); diff --git a/core/src/main/kotlin/pages/ContentNodes.kt b/core/src/main/kotlin/pages/ContentNodes.kt index 8e1d01a7..2a668e09 100644 --- a/core/src/main/kotlin/pages/ContentNodes.kt +++ b/core/src/main/kotlin/pages/ContentNodes.kt @@ -221,7 +221,7 @@ enum class TextStyle : Style { } enum class ContentStyle : Style { - RowTitle + RowTitle, TabbedContent, TabbedContentBody, WithExtraAttributes } object CommentTable: Style diff --git a/core/src/main/kotlin/pages/contentNodeProperties.kt b/core/src/main/kotlin/pages/contentNodeProperties.kt index 9eabcd12..67acef6d 100644 --- a/core/src/main/kotlin/pages/contentNodeProperties.kt +++ b/core/src/main/kotlin/pages/contentNodeProperties.kt @@ -5,4 +5,8 @@ import org.jetbrains.dokka.model.properties.ExtraProperty class SimpleAttr(val extraKey: String, val extraValue: String) : ExtraProperty<ContentNode> { data class SimpleAttrKey(val key: String) : ExtraProperty.Key<ContentNode, SimpleAttr> override val key: ExtraProperty.Key<ContentNode, SimpleAttr> = SimpleAttrKey(extraKey) + + companion object { + fun header(value: String) = SimpleAttr("data-togglable", value) + } } diff --git a/core/src/main/resources/dokka/scripts/navigationLoader.js b/core/src/main/resources/dokka/scripts/navigationLoader.js index b30a866d..cac46d2a 100644 --- a/core/src/main/resources/dokka/scripts/navigationLoader.js +++ b/core/src/main/resources/dokka/scripts/navigationLoader.js @@ -6,7 +6,6 @@ window.addEventListener('load', () => { }).then(() => { document.querySelectorAll(".overview > a").forEach(link => { link.setAttribute("href", pathToRoot + link.getAttribute("href")); - console.log(link.attributes["href"]) }) }).then(() => { document.querySelectorAll(".sideMenuPart").forEach(nav => { diff --git a/core/src/main/resources/dokka/scripts/platformContentHandler.js b/core/src/main/resources/dokka/scripts/platformContentHandler.js index b4a9e7c9..72c8daae 100644 --- a/core/src/main/resources/dokka/scripts/platformContentHandler.js +++ b/core/src/main/resources/dokka/scripts/platformContentHandler.js @@ -1,8 +1,31 @@ window.addEventListener('load', () => { document.querySelectorAll("div[data-platform-hinted]") .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem))) + document.querySelectorAll("div[tabs-section]") + .forEach(elem => elem.addEventListener('click', (event) => toggleSections(event))) + document.querySelector(".tabs-section-body") + .querySelector("div[data-togglable]") + .setAttribute("data-active", "") +}) + +function toggleSections(evt){ + if(!evt.target.getAttribute("data-togglable")) return + + const activateTabs = (containerClass) => { + for(const element of document.getElementsByClassName(containerClass)){ + for(const child of element.children){ + if(child.getAttribute("data-togglable") === evt.target.getAttribute("data-togglable")){ + child.setAttribute("data-active", "") + } else { + child.removeAttribute("data-active") + } + } + } } -) + + activateTabs("tabs-section") + activateTabs("tabs-section-body") +} function togglePlatformDependent(e, container) { let target = e.target diff --git a/core/src/main/resources/dokka/styles/style.css b/core/src/main/resources/dokka/styles/style.css index ef936fcf..f2e10811 100644 --- a/core/src/main/resources/dokka/styles/style.css +++ b/core/src/main/resources/dokka/styles/style.css @@ -2,6 +2,84 @@ @import url('https://rsms.me/inter/inter.css'); @import url('jetbrains-mono.css'); +:root { + --breadcrumb-font-color: #A6AFBA; + --hover-link-color: #5B5DEF +} + +#content { + padding: 0 41px; +} + +.breadcrumbs { + padding: 24px 0; + color: var(--breadcrumb-font-color); +} + +.breadcrumbs a { + color: var(--breadcrumb-font-color) +} + +.breadcrumbs a:hover { + color: var(--hover-link-color) +} + +.tabs-section-body > *:not([data-active]){ + display: none; +} + +.tabs-section > .section-tab:first-child { + margin-left: 0; +} + +.section-tab { + border: 0; + cursor: pointer; + background-color: transparent; + border-bottom: 1px solid #DADFE6; + padding: 11px 3px; + font-size: 14px; + color: #637282; + outline:none; + margin: 0 8px; +} + +.section-tab:hover { + color: #282E34; + border-bottom: 2px solid var(--hover-link-color); +} + +.section-tab[data-active=''] { + color: #282E34; + border-bottom: 2px solid var(--hover-link-color); +} + +.tabs-section-body { + padding: 24px 0 +} + +.cover > .platform-hinted { + padding: 24px 0 +} + +.tabbedcontent { + padding: 24px 0; +} + +.cover .platform-hinted .single-content > .symbol { + background-color: white; +} + +.divergent-group { + background-color: white; + padding: 12px 8px; + margin-bottom: 2px; +} + +.divergent-group .table-row { + background-color: #F4F4F4; +} + #container { display: flex; flex-direction: row; @@ -204,7 +282,7 @@ td:first-child { } .symbol > a { - color: #5B5DEF; + color: var(--hover-link-color); text-decoration: underline; } @@ -217,7 +295,7 @@ td:first-child { .brief { white-space: pre-wrap; overflow: hidden; - padding-top: 24px; + padding-top: 8px; } h1, h2, h3, h4, h5, h6 { @@ -233,7 +311,9 @@ h1, h2, h3 { } h1 { - font-size: 28px; + font-size: 60px; + line-height: 64px; + letter-spacing: -1.5px; } h2 { @@ -470,7 +550,7 @@ td.content { } .main-subrow > a:hover { - color: #5B5DEF; + color: var(--hover-link-color); } .platform-hinted { @@ -541,7 +621,7 @@ td.content { .sideMenuPart[data-active] > .overview { background: rgba(91, 93, 239, 0.15); - border-left: 4px solid #5B5DEF; + border-left: 4px solid var(--hover-link-color); } .table { @@ -553,7 +633,7 @@ td.content { display: flex; flex-direction: column; background: white; - margin: 10px; + margin-bottom: 2px; padding: 16px 24px 16px 24px; } |