diff options
Diffstat (limited to 'plugins/base/frontend/src')
| -rw-r--r-- | plugins/base/frontend/src/main/components/assets/clear.svg | 3 | ||||
| -rw-r--r-- | plugins/base/frontend/src/main/components/assets/searchIcon.svg (renamed from plugins/base/frontend/src/main/components/search/searchIcon.svg) | 0 | ||||
| -rw-r--r-- | plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss | 70 | ||||
| -rw-r--r-- | plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx | 53 | ||||
| -rw-r--r-- | plugins/base/frontend/src/main/components/root.tsx | 44 | ||||
| -rw-r--r-- | plugins/base/frontend/src/main/components/search/dokkaSearchAnchor.tsx | 2 | ||||
| -rw-r--r-- | plugins/base/frontend/src/main/scss/index.scss | 4 |
7 files changed, 162 insertions, 14 deletions
diff --git a/plugins/base/frontend/src/main/components/assets/clear.svg b/plugins/base/frontend/src/main/components/assets/clear.svg new file mode 100644 index 00000000..ddb8450f --- /dev/null +++ b/plugins/base/frontend/src/main/components/assets/clear.svg @@ -0,0 +1,3 @@ +<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M11.1374 1.80464L6.94205 5.99996L11.1374 10.1953L10.1947 11.138L5.99935 6.94267L1.80403 11.138L0.861328 10.1953L5.05664 5.99996L0.861328 1.80464L1.80403 0.861938L5.99935 5.05725L10.1947 0.861938L11.1374 1.80464Z" fill="#637282"/> +</svg>
\ No newline at end of file diff --git a/plugins/base/frontend/src/main/components/search/searchIcon.svg b/plugins/base/frontend/src/main/components/assets/searchIcon.svg index 391b1cab..391b1cab 100644 --- a/plugins/base/frontend/src/main/components/search/searchIcon.svg +++ b/plugins/base/frontend/src/main/components/assets/searchIcon.svg diff --git a/plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss b/plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss new file mode 100644 index 00000000..400631e6 --- /dev/null +++ b/plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss @@ -0,0 +1,70 @@ +@import "src/main/scss/index.scss"; + +.page-summary { + background: $white; + border: 1px solid $grey-border; + position: fixed; + top: 25%; + max-height: 70vh; + right: -2px; + width: 250px; + z-index: 8; + transition: width .2s; + + &.hidden { + width: 3em; + writing-mode: vertical-rl; + text-orientation: mixed; + + .content-wrapper { + h4 { + margin: 0; + padding: 8px; + } + } + } + + .content-wrapper { + padding: 0.5em 0 1em 0; + letter-spacing: 0.2px; + + h4 { + margin: 0 2em; + font-weight: 600; + } + + ul { + list-style-type: none; + width: 100%; + padding: 0; + margin: 1em 0; + overflow-x: hidden; + overflow-y: auto; + max-height: 60vh; + + li { + width: 100%; + padding: 4px 0; + + &:hover { + background: $list-background-hover; + } + + &>a { + margin: 0 2em; + } + + &.selected { + border-left: 4px solid $hover-link-color; + } + } + } + } +} + +@media screen and (max-width: 759px){ + /* hide it on smaller screens since it looks super weird when displayed with hidden menu */ + .page-summary { + display: none; + } +}
\ No newline at end of file diff --git a/plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx b/plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx new file mode 100644 index 00000000..1aa65d9b --- /dev/null +++ b/plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx @@ -0,0 +1,53 @@ +import React, { useState, useEffect } from "react"; +import './pageSummary.scss' +import _ from "lodash"; +import Scrollspy from 'react-scrollspy' + +type PageSummaryProps = { + entries: PageSummaryEntry[], +} + +type PageSummaryEntry = { + location: string, + label: string, + sourceSets: SourceSetFilterKey[] +} + +type SourceSetFilterKey = string + +export const PageSummary: React.FC<PageSummaryProps> = ({ entries }: PageSummaryProps) => { + const [hidden, setHidden] = useState<Boolean>(true); + const [displayableEntries, setDisplayableEntries] = useState<PageSummaryEntry[]>(entries) + + const handleMouseHover = () => { + setHidden(!hidden) + } + + useEffect(() => { + const handeEvent = (event: CustomEvent<SourceSetFilterKey[]>) => { + const displayable = entries.filter((entry) => entry.sourceSets.some((sourceset) => event.detail.includes(sourceset))) + setDisplayableEntries(displayable) + } + + window.addEventListener('sourceset-filter-change', handeEvent) + return () => window.removeEventListener('sourceset-filter-change', handeEvent) + }, [entries]) + + let classnames = "page-summary" + if (hidden) classnames += " hidden" + + return ( + <div + className={classnames} + onMouseEnter={handleMouseHover} + onMouseLeave={handleMouseHover} + > + <div className={"content-wrapper"}> + <h4>On this page</h4> + {!hidden && <Scrollspy items={displayableEntries.map((e) => e.location)} currentClassName="selected"> + {displayableEntries.map((item) => <li><a href={'#' + item.location}>{item.label}</a></li>)} + </Scrollspy>} + </div> + </div> + ) +}
\ No newline at end of file diff --git a/plugins/base/frontend/src/main/components/root.tsx b/plugins/base/frontend/src/main/components/root.tsx index ad93d731..cb070dfb 100644 --- a/plugins/base/frontend/src/main/components/root.tsx +++ b/plugins/base/frontend/src/main/components/root.tsx @@ -1,30 +1,50 @@ import React from 'react'; -import {render} from 'react-dom'; +import { render } from 'react-dom'; import RedBox from 'redbox-react'; +import _ from "lodash"; import App from "./app"; import './app/index.scss'; import { NavigationPaneSearch } from './navigationPaneSearch/navigationPaneSearch'; +import { PageSummary } from './pageSummary/pageSummary'; const appEl = document.getElementById('searchBar'); const rootEl = document.createElement('div'); const renderNavigationPane = () => { - const element = document.getElementById('paneSearch') - if(element){ - render( - <NavigationPaneSearch />, - document.getElementById('paneSearch') - ) - } + render( + <NavigationPaneSearch />, + document.getElementById('paneSearch') + ) +} + +const renderOnThisPage = () => { + document.addEventListener('DOMContentLoaded', () => { + for (const e of document.querySelectorAll('.tabs-section-body > div[data-togglable]')) { + const entries = Array.from(e.querySelectorAll('a[anchor-label]')).map((element: HTMLElement) => { + return { + location: element.getAttribute('data-name'), + label: element.getAttribute('anchor-label'), + sourceSets: _.sortBy(element.getAttribute('data-filterable-set').split(' ')) + } + }) + const unique = _.uniqBy(entries, ({label}) => label) + if (unique.length) { + const element = document.createElement('div') + render(<PageSummary entries={unique} />, element) + e.appendChild(element) + } + } + }) } let renderApp = () => { render( - <App/>, - rootEl + <App />, + rootEl ); renderNavigationPane(); + renderOnThisPage(); }; // @ts-ignore @@ -32,8 +52,8 @@ if (module.hot) { const renderAppHot = renderApp; const renderError = (error: Error) => { render( - <RedBox error={error}/>, - rootEl + <RedBox error={error} />, + rootEl ); }; diff --git a/plugins/base/frontend/src/main/components/search/dokkaSearchAnchor.tsx b/plugins/base/frontend/src/main/components/search/dokkaSearchAnchor.tsx index ad0b5f8f..a502f589 100644 --- a/plugins/base/frontend/src/main/components/search/dokkaSearchAnchor.tsx +++ b/plugins/base/frontend/src/main/components/search/dokkaSearchAnchor.tsx @@ -1,5 +1,5 @@ import React from "react"; -import SearchIcon from 'react-svg-loader!./searchIcon.svg'; +import SearchIcon from 'react-svg-loader!../assets/searchIcon.svg'; export const DokkaSearchAnchor = ({wrapperProps, buttonProps, popup}: any) => { return ( diff --git a/plugins/base/frontend/src/main/scss/index.scss b/plugins/base/frontend/src/main/scss/index.scss index 18e2861b..4f5a498b 100644 --- a/plugins/base/frontend/src/main/scss/index.scss +++ b/plugins/base/frontend/src/main/scss/index.scss @@ -1,4 +1,6 @@ @import "~@jetbrains/ring-ui/components/global/variables.css"; $white: #FFFFFF; -$grey-border: #A6AFBA +$grey-border: #DADFE6; +$list-background-hover: rgba(91, 93, 239, 0.15); +$hover-link-color: #5B5DEF; |
