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

fix: Move content into to frontend directory

Browse source 
Doing this BEFORE the merge prevents a lot of merge conflicts.

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2022-11-11 11:16:18 +01:00
parent 4e18ce38f3
commit 762a0a850e
No known key found for this signature in database
GPG key ID: B97799103358209B
1051 changed files with 0 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

27
frontend/src/components/layout/base-head.tsx Normal file
View file

@ -0,0 +1,27 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React from 'react'
import Head from 'next/head'
import { useAppTitle } from '../../hooks/common/use-app-title'
import { FavIcon } from './fav-icon'
import { useBaseUrl } from '../../hooks/common/use-base-url'
/**
* Sets basic browser meta tags.
*/
export const BaseHead: React.FC = () => {
const appTitle = useAppTitle()
const baseUrl = useBaseUrl()
return (
<Head>
<title>{appTitle}</title>
<FavIcon />
<base href={baseUrl} />
<meta content='width=device-width, initial-scale=1' name='viewport' />
</Head>
)
}

29
frontend/src/components/layout/fav-icon.tsx Normal file
View file

@ -0,0 +1,29 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { Fragment } from 'react'
/**
* Sets meta tags for the favicon.
*/
export const FavIcon: React.FC = () => {
return (
<Fragment>
<link href='icons/apple-touch-icon.png' rel='apple-touch-icon' sizes='180x180' />
<link href='icons/favicon-32x32.png' rel='icon' sizes='32x32' type='image/png' />
<link href='icons/favicon-16x16.png' rel='icon' sizes='16x16' type='image/png' />
<link href='icons/site.webmanifest' rel='manifest' />
<link href='icons/favicon.ico' rel='shortcut icon' />
<link color='#b51f08' href='icons/safari-pinned-tab.svg' rel='mask-icon' />
<meta name='apple-mobile-web-app-title' content='HedgeDoc' />
<meta name='application-name' content='HedgeDoc' />
<meta name='msapplication-TileColor' content='#b51f08' />
<meta name='theme-color' content='#b51f08' />
<meta content='icons/browserconfig.xml' name='msapplication-config' />
<meta content='HedgeDoc - Collaborative markdown notes' name='description' />
</Fragment>
)
}

28
frontend/src/components/layout/note-and-app-title-head.tsx Normal file
View file

@ -0,0 +1,28 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import Head from 'next/head'
import React, { useMemo } from 'react'
import { useNoteTitle } from '../../hooks/common/use-note-title'
import { useAppTitle } from '../../hooks/common/use-app-title'
/**
* Sets the note and app title for the browser window
*/
export const NoteAndAppTitleHead: React.FC = () => {
const noteTitle = useNoteTitle()
const appTitle = useAppTitle()
const noteAndAppTitle = useMemo(() => {
return noteTitle + ' - ' + appTitle
}, [appTitle, noteTitle])
return (
<Head>
<title>{noteAndAppTitle}</title>
</Head>
)
}

34
frontend/src/components/layout/settings-dialog/editor/editor-settings-tab-content.tsx Normal file
View file

@ -0,0 +1,34 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React from 'react'
import { ListGroup } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import { SettingLine } from '../utils/setting-line'
import { LigatureSettingButtonGroup } from './ligature-setting-button-group'
import { SmartPasteSettingButtonGroup } from './smart-paste-setting-button-group'
import { SyncScrollSettingButtonGroup } from './sync-scroll-setting-button-group'
/**
* Shows the editor specific settings.
*/
export const EditorSettingsTabContent: React.FC = () => {
useTranslation()
return (
<ListGroup>
<SettingLine i18nKey={'editor.ligatures'}>
<LigatureSettingButtonGroup />
</SettingLine>
<SettingLine i18nKey={'editor.smartPaste'}>
<SmartPasteSettingButtonGroup />
</SettingLine>
<SettingLine i18nKey={'editor.syncScroll'}>
<SyncScrollSettingButtonGroup />
</SettingLine>
</ListGroup>
)
}

18
frontend/src/components/layout/settings-dialog/editor/ligature-setting-button-group.tsx Normal file
View file

@ -0,0 +1,18 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React from 'react'
import { OnOffButtonGroup } from '../utils/on-off-button-group'
import { useApplicationState } from '../../../../hooks/common/use-application-state'
import { setEditorLigatures } from '../../../../redux/editor/methods'
/**
* Allows to change if ligatures should be used or not in the editor.
*/
export const LigatureSettingButtonGroup: React.FC = () => {
const enabled = useApplicationState((state) => state.editorConfig.ligatures)
return <OnOffButtonGroup value={enabled} onSelect={setEditorLigatures} />
}

18
frontend/src/components/layout/settings-dialog/editor/smart-paste-setting-button-group.tsx Normal file
View file

@ -0,0 +1,18 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React from 'react'
import { OnOffButtonGroup } from '../utils/on-off-button-group'
import { useApplicationState } from '../../../../hooks/common/use-application-state'
import { setEditorSmartPaste } from '../../../../redux/editor/methods'
/**
* Allows to change if smart paste should be used in the editor.
*/
export const SmartPasteSettingButtonGroup: React.FC = () => {
const enabled = useApplicationState((state) => state.editorConfig.smartPaste)
return <OnOffButtonGroup value={enabled} onSelect={setEditorSmartPaste} />
}

18
frontend/src/components/layout/settings-dialog/editor/sync-scroll-setting-button-group.tsx Normal file
View file

@ -0,0 +1,18 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React from 'react'
import { OnOffButtonGroup } from '../utils/on-off-button-group'
import { useApplicationState } from '../../../../hooks/common/use-application-state'
import { setEditorSyncScroll } from '../../../../redux/editor/methods'
/**
* Allows to change if editor and rendering should scroll in sync.
*/
export const SyncScrollSettingButtonGroup: React.FC = () => {
const enabled = useApplicationState((state) => state.editorConfig.syncScroll)
return <OnOffButtonGroup value={enabled} onSelect={setEditorSyncScroll} />
}

49
frontend/src/components/layout/settings-dialog/global/dark-mode-setting-button-group.tsx Normal file
View file

@ -0,0 +1,49 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { useCallback } from 'react'
import { ToggleButtonGroup } from 'react-bootstrap'
import { useApplicationState } from '../../../../hooks/common/use-application-state'
import { SettingsToggleButton } from '../utils/settings-toggle-button'
import { setDarkModePreference } from '../../../../redux/dark-mode/methods'
import { DarkModePreference } from '../../../../redux/dark-mode/types'
/**
* Allows to change if the app should enforce dark mode, light mode or let the browser decide.
*/
const DarkModeSettingButtonGroup: React.FC = () => {
const darkModePreference = useApplicationState((state) => state.darkMode.darkModePreference)
const onSelect = useCallback((value: DarkModePreference) => setDarkModePreference(value), [])
return (
<ToggleButtonGroup type='radio' name='dark-mode'>
<SettingsToggleButton
onSelect={onSelect}
value={DarkModePreference.DARK}
selected={darkModePreference === DarkModePreference.DARK}
i18nKeyLabel={'settings.global.darkMode.dark.label'}
i18nKeyTooltip={'settings.global.darkMode.dark.tooltip'}
/>
<SettingsToggleButton
onSelect={onSelect}
value={DarkModePreference.LIGHT}
selected={darkModePreference === DarkModePreference.LIGHT}
i18nKeyLabel={'settings.global.darkMode.light.label'}
i18nKeyTooltip={'settings.global.darkMode.light.tooltip'}
/>
<SettingsToggleButton
onSelect={onSelect}
value={DarkModePreference.AUTO}
selected={darkModePreference === DarkModePreference.AUTO}
i18nKeyLabel={'settings.global.darkMode.browser.label'}
i18nKeyTooltip={'settings.global.darkMode.browser.tooltip'}
/>
</ToggleButtonGroup>
)
}
export { DarkModeSettingButtonGroup }

27
frontend/src/components/layout/settings-dialog/global/global-settings-tab-content.tsx Normal file
View file

@ -0,0 +1,27 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React from 'react'
import { DarkModeSettingButtonGroup } from './dark-mode-setting-button-group'
import { ListGroup } from 'react-bootstrap'
import { LanguagePicker } from './language-picker'
import { SettingLine } from '../utils/setting-line'
/**
* Contains global settings that influence every page of the app.
*/
export const GlobalSettingsTabContent: React.FC = () => {
return (
<ListGroup>
<SettingLine i18nKey={'global.darkMode'}>
<DarkModeSettingButtonGroup />
</SettingLine>
<SettingLine i18nKey={'global.language'}>
<LanguagePicker />
</SettingLine>
</ListGroup>
)
}

98
frontend/src/components/layout/settings-dialog/global/language-picker.tsx Normal file
View file

@ -0,0 +1,98 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { Settings } from 'luxon'
import React, { useCallback, useMemo } from 'react'
import { Form } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import { Logger } from '../../../../utils/logger'
import { cypressId } from '../../../../utils/cypress-attribute'
const log = new Logger('LanguagePicker')
const languages = {
en: 'English',
'zh-CN': '简体中文',
'zh-TW': '繁體中文',
fr: 'Français',
de: 'Deutsch',
ja: '日本語',
es: 'Español',
ca: 'Català',
el: 'Ελληνικά',
pt: 'Português',
it: 'Italiano',
tr: 'Türkçe',
ru: 'Русский',
nl: 'Nederlands',
hr: 'Hrvatski',
pl: 'Polski',
uk: 'Українська',
hi: 'हिन्दी',
sv: 'Svenska',
eo: 'Esperanto',
da: 'Dansk',
ko: '한국어',
id: 'Bahasa Indonesia',
sr: 'Cрпски',
vi: 'Tiếng Việt',
ar: 'العربية',
cs: 'Česky',
sk: 'Slovensky'
}
/**
* This function checks if the wanted language code is supported by our translations.
* The language code that is provided by the browser can (but don't need to) contain the region.
* Some of our translations are region dependent (e.g. chinese-traditional and chinese-simplified).
* Therefore, we first need to check if the complete wanted language code is supported by our translations.
* If not, then we look if we at least have a region independent translation.
*
* @param wantedLanguage an ISO 639-1 standard language code
* @return The supported language code
*/
const findLanguageCode = (wantedLanguage: string): string =>
Object.keys(languages).find((supportedLanguage) => wantedLanguage === supportedLanguage) ??
Object.keys(languages).find((supportedLanguage) => wantedLanguage.slice(0, 2) === supportedLanguage) ??
''
/**
* Renders the language picker.
*/
export const LanguagePicker: React.FC = () => {
const { i18n } = useTranslation()
const onChangeLang = useCallback(
(event: React.ChangeEvent<HTMLSelectElement>) => {
const language = event.currentTarget.value
Settings.defaultLocale = language
i18n.changeLanguage(language).catch((error: Error) => log.error('Error while switching language', error))
},
[i18n]
)
const languageCode = useMemo(() => findLanguageCode(i18n.language), [i18n.language])
const languageOptions = useMemo(
() =>
Object.entries(languages).map(([language, languageName]) => (
<option key={language} value={language}>
{languageName}
</option>
)),
[]
)
return (
<Form.Select
as='select'
className='w-auto'
value={languageCode}
onChange={onChangeLang}
{...cypressId('language-picker')}>
{languageOptions}
</Form.Select>
)
}

26
frontend/src/components/layout/settings-dialog/settings-button.tsx Normal file
View file

@ -0,0 +1,26 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { Fragment } from 'react'
import { useBooleanState } from '../../../hooks/common/use-boolean-state'
import { IconButton } from '../../common/icon-button/icon-button'
import { SettingsModal } from './settings-modal'
import type { ButtonProps } from 'react-bootstrap'
import { cypressId } from '../../../utils/cypress-attribute'
export type SettingsButtonProps = Omit<ButtonProps, 'onClick'>
/**
* Renders a button that opens a settings modal.
*/
export const SettingsButton: React.FC<SettingsButtonProps> = (props) => {
const [show, showModal, hideModal] = useBooleanState(false)
return (
<Fragment>
<IconButton {...props} {...cypressId('settingsButton')} onClick={showModal} icon={'cog'} />
<SettingsModal show={show} onHide={hideModal} />
</Fragment>
)
}

42
frontend/src/components/layout/settings-dialog/settings-modal.tsx Normal file
View file

@ -0,0 +1,42 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React from 'react'
import type { CommonModalProps } from '../../common/modals/common-modal'
import { CommonModal } from '../../common/modals/common-modal'
import { Modal, Tab, Tabs } from 'react-bootstrap'
import { t } from 'i18next'
import { GlobalSettingsTabContent } from './global/global-settings-tab-content'
import { EditorSettingsTabContent } from './editor/editor-settings-tab-content'
/**
* Shows global and scope specific settings
*
* @param show if the modal should be visible
* @param onHide callback that is executed if the modal should be closed
*/
export const SettingsModal: React.FC<CommonModalProps> = ({ show, onHide }) => {
return (
<CommonModal
show={show}
modalSize={'lg'}
onHide={onHide}
titleIcon={'cog'}
title={'settings.title'}
showCloseButton={true}>
<Modal.Body>
<Tabs navbar={false} variant={'pills'} defaultActiveKey={'global'}>
<Tab title={t('settings.global.label')} eventKey={'global'}>
<GlobalSettingsTabContent />
</Tab>
<Tab title={t('settings.editor.label')} eventKey={'editor'}>
<EditorSettingsTabContent />
</Tab>
</Tabs>
</Modal.Body>
</CommonModal>
)
}

57
frontend/src/components/layout/settings-dialog/utils/__snapshots__/on-off-button-group.test.tsx.snap Normal file
View file

@ -0,0 +1,57 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Settings On-Off Button Group can switch value 1`] = `
<div>
<div
class="btn-group"
role="group"
>
<button
class="btn btn-outline-secondary"
data-testid="onOffButtonGroupOn"
name="dark-mode"
title="common.on"
type="radio"
>
common.on
</button>
<button
class="btn btn-secondary"
data-testid="onOffButtonGroupOff"
name="dark-mode"
title="common.off"
type="radio"
>
common.off
</button>
</div>
</div>
`;
exports[`Settings On-Off Button Group can switch value 2`] = `
<div>
<div
class="btn-group"
role="group"
>
<button
class="btn btn-secondary"
data-testid="onOffButtonGroupOn"
name="dark-mode"
title="common.on"
type="radio"
>
common.on
</button>
<button
class="btn btn-outline-secondary"
data-testid="onOffButtonGroupOff"
name="dark-mode"
title="common.off"
type="radio"
>
common.off
</button>
</div>
</div>
`;

34
frontend/src/components/layout/settings-dialog/utils/on-off-button-group.test.tsx Normal file
View file

@ -0,0 +1,34 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { act, render, screen } from '@testing-library/react'
import { OnOffButtonGroup } from './on-off-button-group'
import { mockI18n } from '../../../markdown-renderer/test-utils/mock-i18n'
describe('Settings On-Off Button Group', () => {
beforeAll(mockI18n)
it('can switch value', async () => {
let value = false
const onSelect = (newValue: boolean) => (value = newValue)
const view = render(<OnOffButtonGroup value={value} onSelect={onSelect} />)
expect(view.container).toMatchSnapshot()
const onButton = await screen.findByTestId('onOffButtonGroupOn')
act(() => {
onButton.click()
})
expect(value).toBeTruthy()
view.rerender(<OnOffButtonGroup value={value} onSelect={onSelect} />)
expect(view.container).toMatchSnapshot()
const offButton = await screen.findByTestId('onOffButtonGroupOff')
act(() => {
offButton.click()
})
expect(value).toBeFalsy()
})
})

57
frontend/src/components/layout/settings-dialog/utils/on-off-button-group.tsx Normal file
View file

@ -0,0 +1,57 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { useCallback, useMemo } from 'react'
import { ToggleButtonGroup } from 'react-bootstrap'
import { SettingsToggleButton } from './settings-toggle-button'
import { testId } from '../../../../utils/test-id'
enum OnOffState {
ON,
OFF
}
export interface OnOffButtonGroupProps {
value: boolean
onSelect: (value: boolean) => void
}
/**
* Shows a button group that is used to toggle a setting on or off.
*
* @param onSelect callback that is executed if the on/off value has changed
* @param value the current on/off value that should be visible
*/
export const OnOffButtonGroup: React.FC<OnOffButtonGroupProps> = ({ onSelect, value }) => {
const buttonGroupValue = useMemo(() => (value ? OnOffState.ON : OnOffState.OFF), [value])
const onButtonSelect = useCallback(
(value: number) => {
onSelect(value === OnOffState.ON)
},
[onSelect]
)
return (
<ToggleButtonGroup type='radio' name='dark-mode' value={buttonGroupValue}>
<SettingsToggleButton
onSelect={onButtonSelect}
selected={buttonGroupValue === OnOffState.ON}
value={OnOffState.ON}
i18nKeyTooltip={'common.on'}
i18nKeyLabel={'common.on'}
{...testId('onOffButtonGroupOn')}
/>
<SettingsToggleButton
onSelect={onButtonSelect}
selected={buttonGroupValue === OnOffState.OFF}
value={OnOffState.OFF}
i18nKeyTooltip={'common.off'}
i18nKeyLabel={'common.off'}
{...testId('onOffButtonGroupOff')}
/>
</ToggleButtonGroup>
)
}

36
frontend/src/components/layout/settings-dialog/utils/setting-line.tsx Normal file
View file

@ -0,0 +1,36 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { PropsWithChildren } from 'react'
import React from 'react'
import { Col, ListGroup, Row } from 'react-bootstrap'
import { Trans } from 'react-i18next'
export interface SettingLineProps {
i18nKey: string
}
/**
* Renders one setting with label and help text
*
* @param i18nKey The i18n key that is used as namespace for label and help
* @param children The setting control that should be placed in this line
*/
export const SettingLine: React.FC<PropsWithChildren<SettingLineProps>> = ({ i18nKey, children }) => {
return (
<ListGroup.Item>
<Row>
<Col md={3}>
<Trans i18nKey={`settings.${i18nKey}.label`} />
</Col>
<Col md={4}>{children}</Col>
<Col md={5}>
<Trans i18nKey={`settings.${i18nKey}.help`} />
</Col>
</Row>
</ListGroup.Item>
)
}

55
frontend/src/components/layout/settings-dialog/utils/settings-toggle-button.tsx Normal file
View file

@ -0,0 +1,55 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { useCallback, useMemo } from 'react'
import type { ButtonProps } from 'react-bootstrap'
import { Button } from 'react-bootstrap'
import { Trans, useTranslation } from 'react-i18next'
import type { PropsWithDataTestId } from '../../../../utils/test-id'
type DarkModeToggleButtonProps = Omit<ButtonProps, 'onSelect'> &
PropsWithDataTestId & {
onSelect: (value: number) => void
selected: boolean
value: number
i18nKeyLabel: string
i18nKeyTooltip: string
}
/**
* A button that is used in a toggle group to change settings.
*
* @param settingI18nKey The partial i18n key in the "settings" namespace for the setting
* @param selected Defines if the button should be rendered as selected
* @param onSelect Callback that is executed when the button is selected
* @param value The value of the button that is sent back through the onSelect callback
* @param props Other button props
* @constructor
*/
export const SettingsToggleButton = ({
i18nKeyLabel,
i18nKeyTooltip,
selected,
onSelect,
value,
...props
}: DarkModeToggleButtonProps) => {
const { t } = useTranslation()
const title = useMemo(() => t(i18nKeyTooltip), [i18nKeyTooltip, t])
const onChange = useCallback(() => {
if (!selected) {
onSelect(value)
}
}, [onSelect, selected, value])
return (
<Button {...props} variant={selected ? 'secondary' : 'outline-secondary'} title={title} onClick={onChange}>
<Trans i18nKey={i18nKeyLabel} />
</Button>
)
}