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) --- plugins/base/frontend/package-lock.json | 18 ++++++ plugins/base/frontend/package.json | 2 + .../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 +- 10 files changed, 185 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') diff --git a/plugins/base/frontend/package-lock.json b/plugins/base/frontend/package-lock.json index ed81a875..ef4bd987 100644 --- a/plugins/base/frontend/package-lock.json +++ b/plugins/base/frontend/package-lock.json @@ -1582,6 +1582,14 @@ "@types/react": "*" } }, + "@types/react-scrollspy": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/@types/react-scrollspy/-/react-scrollspy-3.3.3.tgz", + "integrity": "sha512-HLaQStNl141NngJoczBNAK71GRmmbO25p+JiJyEI0bUvH9MKO8B52SI3kVb1PU48S/n1SiNbabDn3D1p37/1bA==", + "requires": { + "@types/react": "*" + } + }, "@types/unist": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz", @@ -10570,6 +10578,16 @@ "xtend": "^4.0.1" } }, + "react-scrollspy": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/react-scrollspy/-/react-scrollspy-3.4.3.tgz", + "integrity": "sha512-c2QZpMPWxm1HF71h1EqaxBldx2zLYO0aZ24Bcuo2mUWF79T+F6qOtr7XJCzUDm99NOwhVKQD01a7A8VC6c90CQ==", + "requires": { + "babel-runtime": "^6.26.0", + "classnames": "^2.2.5", + "prop-types": "^15.5.10" + } + }, "react-sortable-hoc": { "version": "1.11.0", "resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-1.11.0.tgz", diff --git a/plugins/base/frontend/package.json b/plugins/base/frontend/package.json index c86d324d..90e9d49c 100644 --- a/plugins/base/frontend/package.json +++ b/plugins/base/frontend/package.json @@ -30,12 +30,14 @@ "@types/node": "^12.12.36", "@types/react": "^16.9.0", "@types/react-dom": "^16.9.0", + "@types/react-scrollspy": "^3.3.3", "babel-loader": "^8.0.6", "lodash": "^4.17.19", "postcss-import": "^12.0.1", "postcss-preset-env": "^6.7.0", "react": "^16.12.0", "react-dom": "^16.12.0", + "react-scrollspy": "^3.4.3", "redbox-react": "^1.6.0", "ts-loader": "^7.0.0", "typescript": "^3.8.3", 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