mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-20 10:15:17 -04:00
Move and rename files (2/4) (#987)
Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Tilman Vatteroth
GitHub
parent
1b7abf9f27
commit
123f959fb3
145 changed files with 586 additions and 301 deletions
|
|
@ -0,0 +1,9 @@
|
|||
/*!
|
||||
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
.table-cheatsheet > tr > td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
/*
|
||||
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import React, { useMemo } from 'react'
|
||||
import { Table } from 'react-bootstrap'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { BasicMarkdownRenderer } from '../../../markdown-renderer/basic-markdown-renderer'
|
||||
import { BasicMarkdownItConfigurator } from '../../../markdown-renderer/markdown-it-configurator/BasicMarkdownItConfigurator'
|
||||
import { HighlightedCode } from '../../../markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code'
|
||||
import './cheatsheet.scss'
|
||||
|
||||
export const Cheatsheet: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
const codes = [
|
||||
`**${t('editor.editorToolbar.bold')}**`,
|
||||
`*${t('editor.editorToolbar.italic')}*`,
|
||||
`++${t('editor.editorToolbar.underline')}++`,
|
||||
`~~${t('editor.editorToolbar.strikethrough')}~~`,
|
||||
'H~2~O',
|
||||
'19^th^',
|
||||
`==${t('editor.help.cheatsheet.highlightedText')}==`,
|
||||
`# ${t('editor.editorToolbar.header')}`,
|
||||
`\`${t('editor.editorToolbar.code')}\``,
|
||||
'```javascript=\nvar x = 5;\n```',
|
||||
`> ${t('editor.editorToolbar.blockquote')}`,
|
||||
`- ${t('editor.editorToolbar.unorderedList')}`,
|
||||
`1. ${t('editor.editorToolbar.orderedList')}`,
|
||||
`- [ ] ${t('editor.editorToolbar.checkList')}`,
|
||||
`[${t('editor.editorToolbar.link')}](https://example.com)`,
|
||||
``,
|
||||
':smile:',
|
||||
`:::info\n${t('editor.help.cheatsheet.exampleAlert')}\n:::`
|
||||
]
|
||||
|
||||
const markdownIt = useMemo(() => {
|
||||
return new BasicMarkdownItConfigurator()
|
||||
.buildConfiguredMarkdownIt()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Table className="table-condensed table-cheatsheet">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><Trans i18nKey='editor.help.cheatsheet.example'/></th>
|
||||
<th><Trans i18nKey='editor.help.cheatsheet.syntax'/></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{codes.map((code, key) => {
|
||||
return (
|
||||
<tr key={key}>
|
||||
<td>
|
||||
<BasicMarkdownRenderer
|
||||
content={code}
|
||||
wide={false}
|
||||
markdownIt={markdownIt}
|
||||
/>
|
||||
</td>
|
||||
<td className={'markdown-body'}>
|
||||
<HighlightedCode code={code} wrapLines={true} startLineNumber={1} language={'markdown'}/>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</Table>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
/*
|
||||
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import React, { Fragment, useState } from 'react'
|
||||
import { Button, Modal } from 'react-bootstrap'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
|
||||
import { Cheatsheet } from './cheatsheet'
|
||||
import { Links } from './links'
|
||||
import { Shortcut } from './shortcuts'
|
||||
|
||||
export enum HelpTabStatus {
|
||||
Cheatsheet='cheatsheet.title',
|
||||
Shortcuts='shortcuts.title',
|
||||
Links='links.title'
|
||||
}
|
||||
|
||||
export const HelpButton: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
const [show, setShow] = useState(false)
|
||||
const [tab, setTab] = useState<HelpTabStatus>(HelpTabStatus.Cheatsheet)
|
||||
|
||||
const tabContent = (): React.ReactElement => {
|
||||
switch (tab) {
|
||||
case HelpTabStatus.Cheatsheet:
|
||||
return (<Cheatsheet/>)
|
||||
case HelpTabStatus.Shortcuts:
|
||||
return (<Shortcut/>)
|
||||
case HelpTabStatus.Links:
|
||||
return (<Links/>)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<Button title={t('editor.documentBar.help')} className='ml-2 text-secondary' size='sm' variant='outline-light'
|
||||
onClick={() => setShow(true)}>
|
||||
<ForkAwesomeIcon icon="question-circle"/>
|
||||
</Button>
|
||||
<Modal show={show} onHide={() => setShow(false)} animation={true} className='text-dark' size='lg'>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>
|
||||
<ForkAwesomeIcon icon='question-circle'/> <Trans i18nKey={'editor.documentBar.help'}/> – <Trans i18nKey={`editor.help.${tab}`}/>
|
||||
</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<nav className='nav nav-tabs'>
|
||||
<Button variant={'light'} className={`nav-link nav-item ${tab === HelpTabStatus.Cheatsheet ? 'active' : ''}`}
|
||||
onClick={() => setTab(HelpTabStatus.Cheatsheet)}
|
||||
>
|
||||
<Trans i18nKey={'editor.help.cheatsheet.title'}/>
|
||||
</Button>
|
||||
<Button variant={'light'} className={`nav-link nav-item ${tab === HelpTabStatus.Shortcuts ? 'active' : ''}`}
|
||||
onClick={() => setTab(HelpTabStatus.Shortcuts)}
|
||||
>
|
||||
<Trans i18nKey={'editor.help.shortcuts.title'}/>
|
||||
</Button>
|
||||
<Button variant={'light'} className={`nav-link nav-item ${tab === HelpTabStatus.Links ? 'active' : ''}`}
|
||||
onClick={() => setTab(HelpTabStatus.Links)}
|
||||
>
|
||||
<Trans i18nKey={'editor.help.links.title'}/>
|
||||
</Button>
|
||||
</nav>
|
||||
{tabContent()}
|
||||
</Modal.Body>
|
||||
</Modal>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
95
src/components/editor-page/app-bar/help-button/links.tsx
Normal file
95
src/components/editor-page/app-bar/help-button/links.tsx
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
/*
|
||||
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import React from 'react'
|
||||
import { Col, Row } from 'react-bootstrap'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import { useSelector } from 'react-redux'
|
||||
import links from '../../../../links.json'
|
||||
import { ApplicationState } from '../../../../redux'
|
||||
import { TranslatedExternalLink } from '../../../common/links/translated-external-link'
|
||||
import { TranslatedInternalLink } from '../../../common/links/translated-internal-link'
|
||||
|
||||
export const Links: React.FC = () => {
|
||||
useTranslation()
|
||||
|
||||
const backendIssueTracker = useSelector((state: ApplicationState) => state.config.version.issueTrackerUrl)
|
||||
return (
|
||||
<Row className={'justify-content-center pt-4'}>
|
||||
<Col lg={4}>
|
||||
<h3><Trans i18nKey='editor.help.contacts.title'/></h3>
|
||||
<div>
|
||||
<ul className="list-unstyled">
|
||||
<li>
|
||||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.contacts.community'
|
||||
href={links.community}
|
||||
icon='users'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.contacts.meetUsOn'
|
||||
i18nOption={{ service: 'Matrix' }}
|
||||
href={links.chat}
|
||||
icon='hashtag'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.contacts.reportIssue'
|
||||
href={backendIssueTracker}
|
||||
icon='tag'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<TranslatedExternalLink
|
||||
i18nKey='editor.help.contacts.helpTranslating'
|
||||
href={links.translate}
|
||||
icon='language'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Col>
|
||||
<Col lg={4}>
|
||||
<h3><Trans i18nKey='editor.help.documents.title'/></h3>
|
||||
<div>
|
||||
<ul className="list-unstyled">
|
||||
<li>
|
||||
<TranslatedInternalLink
|
||||
i18nKey='editor.help.documents.features'
|
||||
href='/n/features'
|
||||
icon='dot-circle-o'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<TranslatedInternalLink
|
||||
i18nKey='editor.help.documents.yamlMetadata'
|
||||
href='/n/yaml-metadata'
|
||||
icon='dot-circle-o'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<TranslatedInternalLink
|
||||
i18nKey='editor.help.documents.slideExample'
|
||||
href='/n/slide-example'
|
||||
icon='dot-circle-o'
|
||||
className='text-primary'
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
57
src/components/editor-page/app-bar/help-button/shortcuts.tsx
Normal file
57
src/components/editor-page/app-bar/help-button/shortcuts.tsx
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
/*
|
||||
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import React, { Fragment } from 'react'
|
||||
import { Card, ListGroup, Row } from 'react-bootstrap'
|
||||
import { Trans } from 'react-i18next'
|
||||
import { isMac } from '../../utils'
|
||||
|
||||
export const Shortcut: React.FC = () => {
|
||||
const modifierKey = isMac ? <kbd>⌘</kbd> : <kbd>Ctrl</kbd>
|
||||
const altKey = isMac ? <kbd>⌥</kbd> : <kbd>Alt</kbd>
|
||||
|
||||
const shortcutMap: {[category: string]: { [functionName: string]: JSX.Element[] }} = {
|
||||
'View Mode': {
|
||||
'editor.help.shortcuts.view': [<kbd>Ctrl</kbd>, <> + </>, altKey, <> + </>, <kbd>V</kbd>],
|
||||
'editor.help.shortcuts.both': [<kbd>Ctrl</kbd>, <> + </>, altKey, <> + </>, <kbd>B</kbd>],
|
||||
'editor.help.shortcuts.edit': [<kbd>Ctrl</kbd>, <> + </>, altKey, <> + </>, <kbd>E</kbd>]
|
||||
},
|
||||
Editor: {
|
||||
'editor.help.shortcuts.bold': [modifierKey, <> + </>, <kbd>B</kbd>],
|
||||
'editor.help.shortcuts.italic': [modifierKey, <> + </>, <kbd>I</kbd>],
|
||||
'editor.help.shortcuts.underline': [modifierKey, <> + </>, <kbd>U</kbd>],
|
||||
'editor.help.shortcuts.strikethrough': [modifierKey, <> + </>, <kbd>D</kbd>],
|
||||
'editor.help.shortcuts.mark': [modifierKey, <> + </>, <kbd>M</kbd>],
|
||||
'editor.help.shortcuts.link': [modifierKey, <> + </>, <kbd>K</kbd>]
|
||||
}
|
||||
}
|
||||
return (
|
||||
<Row className={'justify-content-center pt-4'}>
|
||||
{Object.keys(shortcutMap).map(category => {
|
||||
return (
|
||||
<Card key={category} className={'m-2 w-50'}>
|
||||
<Card.Header>{category}</Card.Header>
|
||||
<ListGroup variant="flush">
|
||||
{Object.entries(shortcutMap[category]).map(([functionName, shortcuts]) => {
|
||||
return (
|
||||
<ListGroup.Item key={functionName} className={'d-flex justify-content-between'}>
|
||||
<span><Trans i18nKey={functionName}/></span>
|
||||
<span>
|
||||
{
|
||||
shortcuts.map((shortcut, shortcutIndex) =>
|
||||
<Fragment key={shortcutIndex}>{shortcut}</Fragment>)
|
||||
}
|
||||
</span>
|
||||
</ListGroup.Item>
|
||||
)
|
||||
})}
|
||||
</ListGroup>
|
||||
</Card>)
|
||||
})
|
||||
}
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue