Merge pull request #1106 from slumbering/docs-ui-fixes
remove icons overloading + few css changes
This commit is contained in:
Andrea Luzzardi
GitHub
commit
b956ed4d91
@ -61,13 +61,11 @@ $desktop-xl-width: 1160px;
|
|||||||
--ifm-menu-color-active: var(--ifm-color-primary-dark);
|
--ifm-menu-color-active: var(--ifm-color-primary-dark);
|
||||||
--ifm-menu-color-background-hover: #fdf9d7;
|
--ifm-menu-color-background-hover: #fdf9d7;
|
||||||
--ifm-menu-color-background-active: var(--ifm-menu-color-background-hover);
|
--ifm-menu-color-background-active: var(--ifm-menu-color-background-hover);
|
||||||
--ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M3.318 9.128a24.776 24.776 0 004.224-3.993.842.842 0 011.32.026c1.227 1.618 2.107 3.387 3.831 4.556.889.6-.159 1.9-1.044 1.3A14.369 14.369 0 018.14 7a30.457 30.457 0 01-3.829 3.463c-.845.671-1.834-.67-.993-1.335z" fill="%23131226" /></svg>');
|
|
||||||
--ifm-navbar-height: 6rem;
|
--ifm-navbar-height: 6rem;
|
||||||
--ifm-navbar-background-color: var(--ifm-color-primary-dark);
|
--ifm-navbar-background-color: var(--ifm-color-primary-dark);
|
||||||
--ifm-navbar-padding-vertical: 0;
|
--ifm-navbar-padding-vertical: 0;
|
||||||
--ifm-pagination-nav-border-radius: 0;
|
--ifm-pagination-nav-border-radius: 0;
|
||||||
--ifm-pre-padding: 2rem;
|
--ifm-pre-padding: 2rem;
|
||||||
--ifm-toc-border-color: transparent;
|
|
||||||
--ifm-toc-link-color: var(--ifm-color-primary-dark);
|
--ifm-toc-link-color: var(--ifm-color-primary-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -191,7 +189,7 @@ h1[class^="h1Heading"] {
|
|||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-this-page {
|
.theme-edit-this-page {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -341,7 +339,11 @@ a[class^="sidebarLogo"] {
|
|||||||
|
|
||||||
main[class^="docMainContainer"] {
|
main[class^="docMainContainer"] {
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
padding: 2rem;
|
padding: 2rem 2rem 2rem 4rem;
|
||||||
|
|
||||||
|
@include tablet {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
html[data-theme="dark"] & {
|
html[data-theme="dark"] & {
|
||||||
background: var(--ifm-color-primary-dark);
|
background: var(--ifm-color-primary-dark);
|
||||||
@ -566,19 +568,6 @@ button[class^="copyButton"] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* docsearch */
|
/* docsearch */
|
||||||
.DocSearch-Button-Container {
|
|
||||||
.DocSearch-Search-Icon {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
&:before {
|
|
||||||
content: "";
|
|
||||||
background-color: black;
|
|
||||||
mask: url("/img/Dagger_Icons_Search.svg");
|
|
||||||
display: block;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.DocSearch-Button {
|
.DocSearch-Button {
|
||||||
margin-right: 2rem !important;
|
margin-right: 2rem !important;
|
||||||
|
|||||||
@ -1 +0,0 @@
|
|||||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#131226;}</style></defs><path class="cls-1" d="M13,7.149A24.806,24.806,0,0,1,8.433,3.558C7.651,2.824,6.47,4,7.255,4.737a30.365,30.365,0,0,0,3.988,3.278A14.369,14.369,0,0,0,7.79,12.076c-.463.963.974,1.809,1.44.841.9-1.877,2.523-3.007,3.943-4.46A.841.841,0,0,0,13,7.149Z"/><path class="cls-1" d="M8.6,7.683A24.806,24.806,0,0,1,4.025,4.092c-.782-.734-1.962.441-1.178,1.179A30.365,30.365,0,0,0,6.835,8.549,14.369,14.369,0,0,0,3.382,12.61c-.462.964.974,1.809,1.44.841.9-1.877,2.523-3.007,3.943-4.46A.841.841,0,0,0,8.6,7.683Z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 648 B |
@ -1 +0,0 @@
|
|||||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#131226;}</style></defs><path class="cls-1" d="M4.757,7.952A30.365,30.365,0,0,0,8.745,4.674c.785-.737-.4-1.913-1.178-1.179A24.764,24.764,0,0,1,3,7.086.842.842,0,0,0,2.827,8.4c1.42,1.452,3.041,2.582,3.944,4.46.465.968,1.9.122,1.439-.842A14.383,14.383,0,0,0,4.757,7.952Z"/><path class="cls-1" d="M11.975,4.029A24.764,24.764,0,0,1,7.4,7.62a.842.842,0,0,0-.169,1.309c1.42,1.452,3.041,2.583,3.943,4.46.466.968,1.9.122,1.44-.841A14.373,14.373,0,0,0,9.165,8.486a30.365,30.365,0,0,0,3.988-3.278C13.937,4.471,12.757,3.3,11.975,4.029Z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 653 B |
@ -1,61 +0,0 @@
|
|||||||
/**
|
|
||||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
||||||
*
|
|
||||||
* This source code is licensed under the MIT license found in the
|
|
||||||
* LICENSE file in the root directory of this source tree.
|
|
||||||
*/
|
|
||||||
import React from 'react';
|
|
||||||
import Link from '@docusaurus/Link';
|
|
||||||
import Translate, { translate } from '@docusaurus/Translate';
|
|
||||||
import DocPaginatorPrev from "./Dagger_Icons_Arrow-previous.svg"
|
|
||||||
import DocPaginatorNext from "./Dagger_Icons_Arrow-next.svg"
|
|
||||||
|
|
||||||
function DocPaginator(props) {
|
|
||||||
const { metadata } = props;
|
|
||||||
return (
|
|
||||||
<nav
|
|
||||||
className="pagination-nav"
|
|
||||||
aria-label={translate({
|
|
||||||
id: 'theme.docs.paginator.navAriaLabel',
|
|
||||||
message: 'Docs pages navigation',
|
|
||||||
description: 'The ARIA label for the docs pagination',
|
|
||||||
})}>
|
|
||||||
<div className="pagination-nav__item">
|
|
||||||
{metadata.previous && (
|
|
||||||
<Link
|
|
||||||
className="pagination-nav__link"
|
|
||||||
to={metadata.previous.permalink}>
|
|
||||||
<div className="pagination-nav__sublabel">
|
|
||||||
<Translate
|
|
||||||
id="theme.docs.paginator.previous"
|
|
||||||
description="The label used to navigate to the previous doc">
|
|
||||||
Previous
|
|
||||||
</Translate>
|
|
||||||
</div>
|
|
||||||
<div className="pagination-nav__label">
|
|
||||||
<DocPaginatorPrev height={23} style={{ marginRight: '0.5rem' }} />{metadata.previous.title}
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="pagination-nav__item pagination-nav__item--next">
|
|
||||||
{metadata.next && (
|
|
||||||
<Link className="pagination-nav__link" to={metadata.next.permalink}>
|
|
||||||
<div className="pagination-nav__sublabel">
|
|
||||||
<Translate
|
|
||||||
id="theme.docs.paginator.next"
|
|
||||||
description="The label used to navigate to the next doc">
|
|
||||||
Next
|
|
||||||
</Translate>
|
|
||||||
</div>
|
|
||||||
<div className="pagination-nav__label">
|
|
||||||
{metadata.next.title}<DocPaginatorNext height={23} style={{ marginLeft: '0.5rem' }} />
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default DocPaginator;
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
/**
|
|
||||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
||||||
*
|
|
||||||
* This source code is licensed under the MIT license found in the
|
|
||||||
* LICENSE file in the root directory of this source tree.
|
|
||||||
*/
|
|
||||||
import React from 'react';
|
|
||||||
import Translate from '@docusaurus/Translate';
|
|
||||||
import IconEdit from '../../../static/img/Dagger_Icons_Edit.svg';
|
|
||||||
|
|
||||||
export default function EditThisPage({ editUrl }) {
|
|
||||||
return (
|
|
||||||
<a href={editUrl} className='edit-this-page' target="_blank" rel="noreferrer noopener">
|
|
||||||
<IconEdit width='1.2em' height='1.2em' />
|
|
||||||
<Translate
|
|
||||||
id="theme.common.editThisPage"
|
|
||||||
description="The link label to edit the current page">
|
|
||||||
Edit this page
|
|
||||||
</Translate>
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,204 +0,0 @@
|
|||||||
/**
|
|
||||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
||||||
*
|
|
||||||
* This source code is licensed under the MIT license found in the
|
|
||||||
* LICENSE file in the root directory of this source tree.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React, { useState, useRef, useCallback, useMemo } from 'react';
|
|
||||||
import { createPortal } from 'react-dom';
|
|
||||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
|
||||||
import { useHistory } from '@docusaurus/router';
|
|
||||||
import { useBaseUrlUtils } from '@docusaurus/useBaseUrl';
|
|
||||||
import Link from '@docusaurus/Link';
|
|
||||||
import Head from '@docusaurus/Head';
|
|
||||||
import useSearchQuery from '@theme/hooks/useSearchQuery';
|
|
||||||
import { DocSearchButton, useDocSearchKeyboardEvents } from '@docsearch/react';
|
|
||||||
import useAlgoliaContextualFacetFilters from '@theme/hooks/useAlgoliaContextualFacetFilters';
|
|
||||||
import { translate } from '@docusaurus/Translate';
|
|
||||||
|
|
||||||
let DocSearchModal = null;
|
|
||||||
|
|
||||||
function Hit({ hit, children }) {
|
|
||||||
return <Link to={hit.url}>{children}</Link>;
|
|
||||||
}
|
|
||||||
|
|
||||||
function ResultsFooter({ state, onClose }) {
|
|
||||||
const { generateSearchPageLink } = useSearchQuery();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Link to={generateSearchPageLink(state.query)} onClick={onClose}>
|
|
||||||
See all {state.context.nbHits} results
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function DocSearch({ contextualSearch, ...props }) {
|
|
||||||
const { siteMetadata } = useDocusaurusContext();
|
|
||||||
|
|
||||||
const contextualSearchFacetFilters = useAlgoliaContextualFacetFilters();
|
|
||||||
|
|
||||||
const configFacetFilters = props.searchParameters?.facetFilters ?? [];
|
|
||||||
|
|
||||||
const facetFilters = contextualSearch
|
|
||||||
? // Merge contextual search filters with config filters
|
|
||||||
[...contextualSearchFacetFilters, ...configFacetFilters]
|
|
||||||
: // ... or use config facetFilters
|
|
||||||
configFacetFilters;
|
|
||||||
|
|
||||||
// we let user override default searchParameters if he wants to
|
|
||||||
const searchParameters = {
|
|
||||||
...props.searchParameters,
|
|
||||||
facetFilters,
|
|
||||||
};
|
|
||||||
|
|
||||||
const { withBaseUrl } = useBaseUrlUtils();
|
|
||||||
const history = useHistory();
|
|
||||||
const searchContainer = useRef(null);
|
|
||||||
const searchButtonRef = useRef(null);
|
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
|
||||||
const [initialQuery, setInitialQuery] = useState(null);
|
|
||||||
|
|
||||||
const importDocSearchModalIfNeeded = useCallback(() => {
|
|
||||||
if (DocSearchModal) {
|
|
||||||
return Promise.resolve();
|
|
||||||
}
|
|
||||||
|
|
||||||
return Promise.all([
|
|
||||||
import('@docsearch/react/modal'),
|
|
||||||
import('@docsearch/react/style'),
|
|
||||||
import('./styles.css'),
|
|
||||||
]).then(([{ DocSearchModal: Modal }]) => {
|
|
||||||
DocSearchModal = Modal;
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const onOpen = useCallback(() => {
|
|
||||||
importDocSearchModalIfNeeded().then(() => {
|
|
||||||
searchContainer.current = document.createElement('div');
|
|
||||||
document.body.insertBefore(
|
|
||||||
searchContainer.current,
|
|
||||||
document.body.firstChild,
|
|
||||||
);
|
|
||||||
setIsOpen(true);
|
|
||||||
});
|
|
||||||
}, [importDocSearchModalIfNeeded, setIsOpen]);
|
|
||||||
|
|
||||||
const onClose = useCallback(() => {
|
|
||||||
setIsOpen(false);
|
|
||||||
searchContainer.current.remove();
|
|
||||||
}, [setIsOpen]);
|
|
||||||
|
|
||||||
const onInput = useCallback(
|
|
||||||
(event) => {
|
|
||||||
importDocSearchModalIfNeeded().then(() => {
|
|
||||||
setIsOpen(true);
|
|
||||||
setInitialQuery(event.key);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
[importDocSearchModalIfNeeded, setIsOpen, setInitialQuery],
|
|
||||||
);
|
|
||||||
|
|
||||||
const navigator = useRef({
|
|
||||||
navigate({ itemUrl }) {
|
|
||||||
history.push(itemUrl);
|
|
||||||
},
|
|
||||||
}).current;
|
|
||||||
|
|
||||||
const transformItems = useRef((items) => {
|
|
||||||
return items.map((item) => {
|
|
||||||
// We transform the absolute URL into a relative URL.
|
|
||||||
// Alternatively, we can use `new URL(item.url)` but it's not
|
|
||||||
// supported in IE.
|
|
||||||
const a = document.createElement('a');
|
|
||||||
a.href = item.url;
|
|
||||||
|
|
||||||
return {
|
|
||||||
...item,
|
|
||||||
url: withBaseUrl(`${a.pathname}${a.hash}`),
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}).current;
|
|
||||||
|
|
||||||
const resultsFooterComponent = useMemo(
|
|
||||||
() => (footerProps) => <ResultsFooter {...footerProps} onClose={onClose} />,
|
|
||||||
[onClose],
|
|
||||||
);
|
|
||||||
|
|
||||||
const transformSearchClient = useCallback(
|
|
||||||
(searchClient) => {
|
|
||||||
searchClient.addAlgoliaAgent(
|
|
||||||
'docusaurus',
|
|
||||||
siteMetadata.docusaurusVersion,
|
|
||||||
);
|
|
||||||
|
|
||||||
return searchClient;
|
|
||||||
},
|
|
||||||
[siteMetadata.docusaurusVersion],
|
|
||||||
);
|
|
||||||
|
|
||||||
useDocSearchKeyboardEvents({
|
|
||||||
isOpen,
|
|
||||||
onOpen,
|
|
||||||
onClose,
|
|
||||||
onInput,
|
|
||||||
searchButtonRef,
|
|
||||||
});
|
|
||||||
|
|
||||||
const translatedSearchLabel = translate({
|
|
||||||
id: 'theme.SearchBar.label',
|
|
||||||
message: 'Search',
|
|
||||||
description: 'The ARIA label and placeholder for search button',
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Head>
|
|
||||||
{/* This hints the browser that the website will load data from Algolia,
|
|
||||||
and allows it to preconnect to the DocSearch cluster. It makes the first
|
|
||||||
query faster, especially on mobile. */}
|
|
||||||
<link
|
|
||||||
rel="preconnect"
|
|
||||||
href={`https://${props.appId}-dsn.algolia.net`}
|
|
||||||
crossOrigin="anonymous"
|
|
||||||
/>
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<DocSearchButton
|
|
||||||
onTouchStart={importDocSearchModalIfNeeded}
|
|
||||||
onFocus={importDocSearchModalIfNeeded}
|
|
||||||
onMouseOver={importDocSearchModalIfNeeded}
|
|
||||||
onClick={onOpen}
|
|
||||||
ref={searchButtonRef}
|
|
||||||
translations={{
|
|
||||||
buttonText: translatedSearchLabel,
|
|
||||||
buttonAriaLabel: translatedSearchLabel,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{isOpen &&
|
|
||||||
createPortal(
|
|
||||||
<DocSearchModal
|
|
||||||
onClose={onClose}
|
|
||||||
initialScrollY={window.scrollY}
|
|
||||||
initialQuery={initialQuery}
|
|
||||||
navigator={navigator}
|
|
||||||
transformItems={transformItems}
|
|
||||||
hitComponent={Hit}
|
|
||||||
resultsFooterComponent={resultsFooterComponent}
|
|
||||||
transformSearchClient={transformSearchClient}
|
|
||||||
{...props}
|
|
||||||
searchParameters={searchParameters}
|
|
||||||
/>,
|
|
||||||
searchContainer.current,
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function SearchBar() {
|
|
||||||
const { siteConfig } = useDocusaurusContext();
|
|
||||||
return <DocSearch {...siteConfig.themeConfig.algolia} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SearchBar;
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
/**
|
|
||||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
||||||
*
|
|
||||||
* This source code is licensed under the MIT license found in the
|
|
||||||
* LICENSE file in the root directory of this source tree.
|
|
||||||
*/
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--docsearch-primary-color: var(--ifm-color-primary);
|
|
||||||
--docsearch-text-color: var(--ifm-font-color-base);
|
|
||||||
}
|
|
||||||
|
|
||||||
.DocSearch-Button {
|
|
||||||
transition: all var(--ifm-transition-fast)
|
|
||||||
var(--ifm-transition-timing-default);
|
|
||||||
}
|
|
||||||
|
|
||||||
.DocSearch-Container {
|
|
||||||
z-index: calc(var(--ifm-z-index-fixed) + 1);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user