mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-22 03:05:19 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Extract toc button (#1302)

Browse source 
* Extract toc button

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2021-06-07 22:09:13 +02:00 • committed by GitHub
parent 4e9b059d2e
commit 4720f2d36b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 99 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/render-page/markdown-toc-button/markdown-toc-button.scss Normal file
View file

@ -0,0 +1,17 @@
/*!
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
.markdown-toc-sidebar-button {
position: fixed;
right: 70px;
bottom: 30px;
& > .dropup {
position: sticky;
bottom: 20px;
right: 0;
}
}

41
src/components/render-page/markdown-toc-button/table-of-contents-hovering-button.tsx Normal file
View file

@ -0,0 +1,41 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React from 'react'
import { Dropdown } from 'react-bootstrap'
import { TocAst } from 'markdown-it-toc-done-right'
import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
import { TableOfContents } from '../../editor-page/table-of-contents/table-of-contents'
import './markdown-toc-button.scss'
export interface MarkdownTocButtonProps {
tocAst: TocAst
baseUrl: string
}
/**
* Renders a button that is hovering over the parent and shows a {@link TableOfContents table of contents list} as overlay if clicked.
*
* @param tocAst the {@link TocAst AST} that should be rendered.
* @param baseUrl the base url that will be used to generate the links
* @return the created component
*/
export const TableOfContentsHoveringButton: React.FC<MarkdownTocButtonProps> = ({ tocAst, baseUrl }) => {
return (
<div className={'markdown-toc-sidebar-button'}>
<Dropdown drop={'up'}>
<Dropdown.Toggle id='toc-overlay-button' variant={'secondary'} className={'no-arrow'}>
<ForkAwesomeIcon icon={'list-ol'} />
</Dropdown.Toggle>
<Dropdown.Menu>
<div className={'p-2'}>
<TableOfContents ast={tocAst} baseUrl={baseUrl} />
</div>
</Dropdown.Menu>
</Dropdown>
</div>
)
}