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

refactor(frontend): title for common modal via titleI18nKey or title prop

Browse source 
This is mainly needed because we use the common modal to show image light boxes and the title is then the title or alt text of the image

Signed-off-by: Philip Molares <philip.molares@udo.edu>
This commit is contained in:
Philip Molares 2023-02-19 20:29:05 +01:00
parent f24c46101b
commit 7fb02c96e6
22 changed files with 73 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

21
frontend/src/components/common/modals/__snapshots__/common-modal.test.tsx.snap
View file

@ -15,7 +15,9 @@ exports[`CommonModal render correctly in size lg 1`] = `
>
<div
class="modal-title h4"
/>
>
<span />
</div>
</div>
testText
</div>
@ -35,7 +37,9 @@ exports[`CommonModal render correctly in size sm 1`] = `
>
<div
class="modal-title h4"
/>
>
<span />
</div>
</div>
testText
</div>
@ -55,7 +59,9 @@ exports[`CommonModal render correctly in size xl 1`] = `
>
<div
class="modal-title h4"
/>
>
<span />
</div>
</div>
testText
</div>
@ -75,7 +81,9 @@ exports[`CommonModal render correctly with additionalClasses 1`] = `
>
<div
class="modal-title h4"
/>
>
<span />
</div>
</div>
testText
</div>
@ -144,6 +152,7 @@ exports[`CommonModal render correctly with title icon 1`] = `
class="fa fa-heart "
/>
 
<span />
</div>
</div>
testText
@ -164,7 +173,9 @@ exports[`CommonModal renders correctly and calls onHide, when close button is cl
>
<div
class="modal-title h4"
/>
>
<span />
</div>
<button
aria-label="Close"
class="btn-close"

4
frontend/src/components/common/modals/__snapshots__/deletion-moadal.test.tsx.snap
View file

@ -13,7 +13,9 @@ exports[`DeletionModal renders correctly with deletionButtonI18nKey 1`] = `
>
<div
class="modal-title h4"
/>
>
<span />
</div>
<button
aria-label="Close"
class="btn-close"

6
frontend/src/components/common/modals/common-modal.test.tsx
View file

@ -1,5 +1,5 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
@ -45,7 +45,7 @@ describe('CommonModal', () => {
it('render correctly with title', async () => {
render(
<CommonModal show={true} title={'testTitle'}>
<CommonModal show={true} titleI18nKey={'testTitle'}>
testText
</CommonModal>
)
@ -55,7 +55,7 @@ describe('CommonModal', () => {
it('render correctly with i18nTitle', async () => {
render(
<CommonModal show={true} title={'testTitle'} titleIsI18nKey={true}>
<CommonModal show={true} titleI18nKey={'testTitle'}>
testText
</CommonModal>
)

10
frontend/src/components/common/modals/common-modal.tsx
View file

@ -1,5 +1,5 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
@ -20,8 +20,8 @@ export interface ModalVisibilityProps {
}
export interface ModalContentProps {
titleI18nKey?: string
title?: string
titleIsI18nKey?: boolean
showCloseButton?: boolean
titleIcon?: IconName
modalSize?: 'lg' | 'sm' | 'xl'
@ -47,20 +47,20 @@ export type CommonModalProps = PropsWithDataCypressId & ModalVisibilityProps & M
export const CommonModal: React.FC<PropsWithChildren<CommonModalProps>> = ({
show,
onHide,
titleI18nKey,
title,
showCloseButton,
titleIcon,
additionalClasses,
modalSize,
children,
titleIsI18nKey = true,
...props
}) => {
useTranslation()
const titleElement = useMemo(() => {
return titleIsI18nKey ? <Trans i18nKey={title} /> : <span>{title}</span>
}, [title, titleIsI18nKey])
return titleI18nKey !== undefined ? <Trans i18nKey={titleI18nKey} /> : <span>{title}</span>
}, [titleI18nKey, title])
return (
<ShowIf condition={show}>

12
frontend/src/components/common/modals/deletion-modal.tsx
View file

@ -1,5 +1,5 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
@ -32,7 +32,7 @@ export interface DeletionModalProps extends CommonModalProps {
export const DeletionModal: React.FC<PropsWithChildren<DeletionModalProps>> = ({
show,
onHide,
title,
titleI18nKey,
onConfirm,
deletionButtonI18nKey,
titleIcon,
@ -42,7 +42,13 @@ export const DeletionModal: React.FC<PropsWithChildren<DeletionModalProps>> = ({
useTranslation()
return (
<CommonModal show={show} onHide={onHide} title={title} titleIcon={titleIcon} showCloseButton={true} {...props}>
<CommonModal
show={show}
onHide={onHide}
titleI18nKey={titleI18nKey}
titleIcon={titleIcon}
showCloseButton={true}
{...props}>
<Modal.Body className='text-dark'>{children}</Modal.Body>
<Modal.Footer>
<Button {...cypressId('deletionModal.confirmButton')} variant='danger' onClick={onConfirm}>

7
frontend/src/components/common/motd-modal/motd-modal.tsx
View file

@ -1,5 +1,5 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
@ -49,7 +49,10 @@ export const MotdModal: React.FC = () => {
}
return (
<CommonModal show={!!lines && !loading && !error && !dismissed} title={'motd.title'} {...cypressId('motd-modal')}>
<CommonModal
show={!!lines && !loading && !error && !dismissed}
titleI18nKey={'motd.title'}
{...cypressId('motd-modal')}>
<Modal.Body className={'bg-light'}>
<EditorToRendererCommunicatorContextProvider>
<RenderIframe