aboutsummaryrefslogtreecommitdiff
path: root/core
diff options
context:
space:
mode:
Diffstat (limited to 'core')
-rw-r--r--core/.gitignore3
-rw-r--r--core/search-component/src/main/js/search/app-root.js52
-rw-r--r--core/search-component/src/main/js/search/app.css2
-rw-r--r--core/search-component/src/main/js/search/app.js2
-rw-r--r--core/src/main/kotlin/pages/ContentNodes.kt2
-rw-r--r--core/src/main/kotlin/pages/contentNodeProperties.kt4
-rw-r--r--core/src/main/resources/dokka/scripts/navigationLoader.js1
-rw-r--r--core/src/main/resources/dokka/scripts/platformContentHandler.js25
-rw-r--r--core/src/main/resources/dokka/styles/style.css92
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;
}