From 3a5dfac12cf61d82b244026990b4d0f86d3b24b9 Mon Sep 17 00:00:00 2001 From: Marcin Aman Date: Fri, 9 Oct 2020 14:38:13 +0200 Subject: On this page component (#1504) --- .../frontend/src/main/components/assets/clear.svg | 3 + .../src/main/components/assets/searchIcon.svg | 3 + .../main/components/pageSummary/pageSummary.scss | 70 ++++++++++++++++++++++ .../main/components/pageSummary/pageSummary.tsx | 53 ++++++++++++++++ plugins/base/frontend/src/main/components/root.tsx | 44 ++++++++++---- .../main/components/search/dokkaSearchAnchor.tsx | 2 +- .../src/main/components/search/searchIcon.svg | 3 - plugins/base/frontend/src/main/scss/index.scss | 4 +- 8 files changed, 165 insertions(+), 17 deletions(-) create mode 100644 plugins/base/frontend/src/main/components/assets/clear.svg create mode 100644 plugins/base/frontend/src/main/components/assets/searchIcon.svg create mode 100644 plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss create mode 100644 plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx delete mode 100644 plugins/base/frontend/src/main/components/search/searchIcon.svg (limited to 'plugins/base/frontend/src/main') 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 @@ + + + \ No newline at end of file diff --git a/plugins/base/frontend/src/main/components/assets/searchIcon.svg b/plugins/base/frontend/src/main/components/assets/searchIcon.svg new file mode 100644 index 00000000..391b1cab --- /dev/null +++ b/plugins/base/frontend/src/main/components/assets/searchIcon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file 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 = ({ entries }: PageSummaryProps) => { + const [hidden, setHidden] = useState(true); + const [displayableEntries, setDisplayableEntries] = useState(entries) + + const handleMouseHover = () => { + setHidden(!hidden) + } + + useEffect(() => { + const handeEvent = (event: CustomEvent) => { + 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 ( +
+
+

On this page

+ {!hidden && e.location)} currentClassName="selected"> + {displayableEntries.map((item) =>
  • {item.label}
    • )} +     } +
    +
    + ) +} \ 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( - , - document.getElementById('paneSearch') - ) - } + render( + , + 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(, element) + e.appendChild(element) + } + } + }) } let renderApp = () => { render( - , - rootEl + , + rootEl ); renderNavigationPane(); + renderOnThisPage(); }; // @ts-ignore @@ -32,8 +52,8 @@ if (module.hot) { const renderAppHot = renderApp; const renderError = (error: Error) => { render( - , - rootEl + , + 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/components/search/searchIcon.svg b/plugins/base/frontend/src/main/components/search/searchIcon.svg deleted file mode 100644 index 391b1cab..00000000 --- a/plugins/base/frontend/src/main/components/search/searchIcon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file 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; -- cgit