diff options
Diffstat (limited to 'plugins/base/frontend/src/main/components')
9 files changed, 77 insertions, 307 deletions
diff --git a/plugins/base/frontend/src/main/components/app/index.scss b/plugins/base/frontend/src/main/components/app/index.scss index 97f91292..e78edf81 100644 --- a/plugins/base/frontend/src/main/components/app/index.scss +++ b/plugins/base/frontend/src/main/components/app/index.scss @@ -18,10 +18,9 @@ html, .search-content { z-index: 8; - background-color: #f4f4f4; } -@media screen and (max-width: 759px){ - .search-content { - } +@media screen and (max-width: 759px) { + .search-content { + } } diff --git a/plugins/base/frontend/src/main/components/assets/searchIcon.svg b/plugins/base/frontend/src/main/components/assets/searchIcon.svg index 391b1cab..159f2578 100644 --- a/plugins/base/frontend/src/main/components/assets/searchIcon.svg +++ b/plugins/base/frontend/src/main/components/assets/searchIcon.svg @@ -1,3 +1,3 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"> +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <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>
\ No newline at end of file diff --git a/plugins/base/frontend/src/main/components/navigationPaneSearch/clear.svg b/plugins/base/frontend/src/main/components/navigationPaneSearch/clear.svg deleted file mode 100644 index ad6a2026..00000000 --- a/plugins/base/frontend/src/main/components/navigationPaneSearch/clear.svg +++ /dev/null @@ -1,3 +0,0 @@ -<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> diff --git a/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.scss b/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.scss deleted file mode 100644 index 1a61e90f..00000000 --- a/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.scss +++ /dev/null @@ -1,37 +0,0 @@ -@import "src/main/scss/index.scss"; - -$defaultHeight: 40px; - -div#paneSearch { - - width: 248px; - margin: 0 auto; - - input#navigation-pane-search { - background: $white; - border: 1px solid $grey-border; - box-sizing: border-box; - border-radius: 4px; - padding: 8px; - height: $defaultHeight; - } - - .navigation-pane-search { - padding-top: 16px; - width: 100%; - } - - div.paneSearchInputWrapper { - position: relative; - span.paneSearchInputClearIcon { - position: absolute; - top: calc(50% + 2px); //Just to include a border - right: 8px; - cursor: pointer; - } - } -} - -.navigation-pane-popup { - margin-top: 1.2em; -}
\ No newline at end of file diff --git a/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.tsx b/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.tsx deleted file mode 100644 index 152e7719..00000000 --- a/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React, { useCallback, useState, useEffect } from 'react'; -import {Select, List } from '@jetbrains/ring-ui'; -import { DokkaFuzzyFilterComponent } from '../search/dokkaFuzzyFilter'; -import { IWindow, Option } from '../search/types'; -import './navigationPaneSearch.scss'; -import ClearIcon from 'react-svg-loader!./clear.svg'; -import { relativizeUrlForRequest } from '../utils/requests'; - -export const NavigationPaneSearch = () => { - const [navigationList, setNavigationList] = useState<Option[]>([]); - const [selected, onSelected] = useState<Option | null>(null); - const [filterValue, setFilterValue] = useState<string>('') - - const onChangeSelected = useCallback( - (element: Option) => { - window.location.replace(`${(window as IWindow).pathToRoot}${element.location}`) - onSelected(element); - }, - [selected] - ); - - const onFilter = (filterValue: string) => { - setFilterValue(filterValue) - } - - const onClearClick = () => { - setFilterValue('') - } - - const shouldShowPopup = (filterState: string): boolean => { - return filterState.trim().length !== 0 - } - - useEffect(() => { - fetch(relativizeUrlForRequest('scripts/navigation-pane.json')) - .then(response => response.json()) - .then((result) => { - setNavigationList(result.map((record: Option, idx: number) => { - return { - ...record, - key: idx, - rgItemType: List.ListProps.Type.CUSTOM - } - })) - }, - (error) => { - console.error('failed to fetch navigationPane data', error) - setNavigationList([]) - }) - }, []) - - - return <div className={"paneSearchInputWrapper"}> - <DokkaFuzzyFilterComponent - id="navigation-pane-search" - className="navigation-pane-search" - inputPlaceholder="Title filter" - clear={true} - type={Select.Type.INPUT_WITHOUT_CONTROLS} - filter={{fuzzy:true, value: filterValue}} - selected={selected} - data={navigationList} - popupClassName={"navigation-pane-popup"} - onSelect={onChangeSelected} - onFilter={onFilter} - shouldShowPopup={shouldShowPopup} - renderOptimization={false} - /> - <span className={"paneSearchInputClearIcon"} onClick={onClearClick}><ClearIcon /></span> - </div> -}
\ 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 deleted file mode 100644 index aaa897a8..00000000 --- a/plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss +++ /dev/null @@ -1,71 +0,0 @@ -@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; - cursor: pointer; - } - - &.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 deleted file mode 100644 index c5a8344f..00000000 --- a/plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React, { useState, useEffect } from "react"; -import './pageSummary.scss' -import _ from "lodash"; -import Scrollspy from 'react-scrollspy' - -type PageSummaryProps = { - entries: PageSummaryEntry[], - containerId: string, //Id of a container that has scroll enabled - offsetComponentId: string, //Id of a top navbar component -} - -type PageSummaryEntry = { - location: string, - label: string, - sourceSets: SourceSetFilterKey[] -} - -type SourceSetFilterKey = string - -const getElementHeightFromDom = (elementId: string): number => document.getElementById(elementId).offsetHeight - -export const PageSummary: React.FC<PageSummaryProps> = ({ entries, containerId, offsetComponentId }: PageSummaryProps) => { - const [hidden, setHidden] = useState<Boolean>(true); - const [displayableEntries, setDisplayableEntries] = useState<PageSummaryEntry[]>(entries) - const topOffset = getElementHeightFromDom(offsetComponentId) - - 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]) - - const handleMouseHover = () => { - setHidden(!hidden) - } - - const handleClick = (entry: PageSummaryEntry) => { - document.getElementById(containerId).scrollTo({ - top: document.getElementById(entry.location).offsetTop - topOffset, - behavior: 'smooth' - }) - } - - 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 onClick={() => handleClick(item)}>{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 4161a4c1..9efbfdd0 100644 --- a/plugins/base/frontend/src/main/components/root.tsx +++ b/plugins/base/frontend/src/main/components/root.tsx @@ -1,47 +1,18 @@ import React from 'react'; -import { render } from 'react-dom'; -import _ from "lodash"; +import {render} from 'react-dom'; import App from "./app"; import './app/index.scss'; -import { NavigationPaneSearch } from './navigationPaneSearch/navigationPaneSearch'; -import { PageSummary } from './pageSummary/pageSummary'; -const renderNavigationPane = () => { - render( - <NavigationPaneSearch />, - document.getElementById('paneSearch') - ) -} - -const renderOnThisPage = () => { - 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} containerId={'main'} offsetComponentId={'navigation-wrapper'}/>, element) - e.appendChild(element) - } - } -} const renderMainSearch = () => { - render(<App />, document.getElementById('searchBar')); + render(<App/>, document.getElementById('searchBar')); } let renderApp = () => { - renderMainSearch(); - renderNavigationPane(); - renderOnThisPage(); + renderMainSearch(); - document.removeEventListener('DOMContentLoaded', renderApp); + document.removeEventListener('DOMContentLoaded', renderApp); }; document.addEventListener('DOMContentLoaded', renderApp);
\ No newline at end of file diff --git a/plugins/base/frontend/src/main/components/search/search.scss b/plugins/base/frontend/src/main/components/search/search.scss index 8965c5ea..b18af04e 100644 --- a/plugins/base/frontend/src/main/components/search/search.scss +++ b/plugins/base/frontend/src/main/components/search/search.scss @@ -1,11 +1,17 @@ +$font-color: hsla(0, 0%, 100%, 0.8); +$secondary-font-color: hsla(0, 0%, 100%, 0.6); + .search { button { - border: none; - fill: #637282; - background: #F4F4F4; - cursor: pointer; margin-top: 3px; + cursor: pointer; + + border: none; + background: var(--color-dark); + fill: #fff; + fill: var(--dark-mode-and-search-icon-color); + &:focus { outline: none; } @@ -13,40 +19,81 @@ } .popup-wrapper { - min-width: calc(100% - 360px) !important; + min-width: calc(100% - 322px) !important; + + border: 1px solid hsla(0, 0%, 100%, 0.2) !important; + + background-color: #27282c !important; + + [class^="filterWrapper"] { + border-bottom: 1px solid hsla(0, 0%, 100%, 0.2); + } + + input { + color: $font-color !important; + + font-weight: normal !important; + } + + span[data-test-custom="ring-select-popup-filter-icon"] { + color: #fff; + } + + button[data-test="ring-input-clear"] { + color: #fff !important; + } } -@media screen and (max-width: 759px){ - .popup-wrapper { - min-width: 100% !important; - } +@media screen and (max-width: 759px) { + .popup-wrapper { + min-width: 100% !important; + } } .template-wrapper { - height: 32px; display: grid; + + height: 32px; grid-template-columns: auto auto; + + strong { + color: $font-color; + } + span { - line-height: 32px; + color: $font-color; + + line-height: 32px; + + &.template-description { + color: $secondary-font-color; + justify-self: end; + } } } -@media screen and (max-width: 759px){ - .template-wrapper { - display: flex; - height: auto; - flex-direction: column; - span { - line-height: unset; - } +@media screen and (max-width: 759px) { + .template-wrapper { + display: flex; + flex-direction: column; + + height: auto; + + span { + line-height: unset; } + } } .template-name { justify-self: start; } -.template-description { - color: gray; - justify-self: end; +/* remove fade at the bottom */ +[class^="fade"] { + display: none; +} + +[class*="hover"] { + background-color: hsla(0, 0%, 100%, 0.1) !important; } |
