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

feat(frontend): replace forkawesome with bootstrap icons

Browse source 
These icon replace fork awesome. A linter informs the user about the deprecation.

See https://github.com/hedgedoc/hedgedoc/issues/2929

Co-authored-by: Philip Molares <philip.molares@udo.edu>
Co-authored-by: Tilman Vatteroth <git@tilmanvatteroth.de>
Signed-off-by: Philip Molares <philip.molares@udo.edu>
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Philip Molares 2023-02-05 22:05:02 +01:00 • committed by Tilman Vatteroth
parent e7246f1484
commit 1c16e25e14
179 changed files with 4974 additions and 1943 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/components/editor-page/app-bar/help-button/cheatsheet-tab-content.tsx
View file

@ -34,6 +34,7 @@ export const CheatsheetTabContent: React.FC = () => {
`[${t('editor.editorToolbar.link')}](https://example.com)`,
`![${t('editor.editorToolbar.image')}](/icons/apple-touch-icon.png)`,
':smile:',
':bi-bootstrap:',
`:::info\n${t('editor.help.cheatsheet.exampleAlert')}\n:::`
],
[checked, t]

5
frontend/src/components/editor-page/app-bar/help-button/help-button.tsx
View file

@ -5,10 +5,11 @@
*/
import { useBooleanState } from '../../../../hooks/common/use-boolean-state'
import { cypressId } from '../../../../utils/cypress-attribute'
import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
import { UiIcon } from '../../../common/icons/ui-icon'
import { HelpModal } from './help-modal'
import React, { Fragment } from 'react'
import { Button } from 'react-bootstrap'
import { QuestionCircle as IconQuestionCircle } from 'react-bootstrap-icons'
import { useTranslation } from 'react-i18next'
/**
@ -27,7 +28,7 @@ export const HelpButton: React.FC = () => {
size='sm'
variant='outline-light'
onClick={showModal}>
<ForkAwesomeIcon icon='question-circle' />
<UiIcon icon={IconQuestionCircle} />
</Button>
<HelpModal show={modalVisibility} onHide={closeModal} />
</Fragment>

3
frontend/src/components/editor-page/app-bar/help-button/help-modal.tsx
View file

@ -10,6 +10,7 @@ import { LinksTabContent } from './links-tab-content'
import { ShortcutTabContent } from './shortcuts-tab-content'
import React, { useMemo, useState } from 'react'
import { Button, Modal } from 'react-bootstrap'
import { QuestionCircle as IconQuestionCircle } from 'react-bootstrap-icons'
import { Trans, useTranslation } from 'react-i18next'
export enum HelpTabStatus {
@ -47,7 +48,7 @@ export const HelpModal: React.FC<ModalVisibilityProps> = ({ show, onHide }) => {
const modalTitle = useMemo(() => t('editor.documentBar.help') + ' - ' + t(`editor.help.${tab}`), [t, tab])
return (
<CommonModal modalSize={'lg'} titleIcon={'question-circle'} show={show} onHide={onHide} title={modalTitle}>
<CommonModal modalSize={'lg'} titleIcon={IconQuestionCircle} show={show} onHide={onHide} title={modalTitle}>
<Modal.Body>
<nav className='nav nav-tabs'>
<Button

19
frontend/src/components/editor-page/app-bar/help-button/links-tab-content.tsx
View file

@ -8,6 +8,11 @@ import { TranslatedExternalLink } from '../../../common/links/translated-externa
import { TranslatedInternalLink } from '../../../common/links/translated-internal-link'
import React from 'react'
import { Col, Row } from 'react-bootstrap'
import { Dot as IconDot } from 'react-bootstrap-icons'
import { Flag as IconFlag } from 'react-bootstrap-icons'
import { Hash as IconHash } from 'react-bootstrap-icons'
import { PeopleFill as IconPeopleFill } from 'react-bootstrap-icons'
import { Tag as IconTag } from 'react-bootstrap-icons'
import { Trans, useTranslation } from 'react-i18next'
/**
@ -28,7 +33,7 @@ export const LinksTabContent: React.FC = () => {
<TranslatedExternalLink
i18nKey='editor.help.contacts.community'
href={links.community}
icon='users'
icon={IconPeopleFill}
className='text-primary'
/>
</li>
@ -37,7 +42,7 @@ export const LinksTabContent: React.FC = () => {
i18nKey='editor.help.contacts.meetUsOn'
i18nOption={{ service: 'Matrix' }}
href={links.chat}
icon='hashtag'
icon={IconHash}
className='text-primary'
/>
</li>
@ -45,7 +50,7 @@ export const LinksTabContent: React.FC = () => {
<TranslatedExternalLink
i18nKey='editor.help.contacts.reportIssue'
href={links.backendIssues}
icon='tag'
icon={IconTag}
className='text-primary'
/>
</li>
@ -53,7 +58,7 @@ export const LinksTabContent: React.FC = () => {
<TranslatedExternalLink
i18nKey='editor.help.contacts.helpTranslating'
href={links.translate}
icon='language'
icon={IconFlag}
className='text-primary'
/>
</li>
@ -70,7 +75,7 @@ export const LinksTabContent: React.FC = () => {
<TranslatedInternalLink
i18nKey='editor.help.documents.features'
href='/n/features'
icon='dot-circle-o'
icon={IconDot}
className='text-primary'
/>
</li>
@ -78,7 +83,7 @@ export const LinksTabContent: React.FC = () => {
<TranslatedInternalLink
i18nKey='editor.help.documents.yamlMetadata'
href='/n/yaml-metadata'
icon='dot-circle-o'
icon={IconDot}
className='text-primary'
/>
</li>
@ -86,7 +91,7 @@ export const LinksTabContent: React.FC = () => {
<TranslatedInternalLink
i18nKey='editor.help.documents.slideExample'
href='/n/slide-example'
icon='dot-circle-o'
icon={IconDot}
className='text-primary'
/>
</li>

10
frontend/src/components/editor-page/app-bar/new-note-button.tsx
View file

@ -3,10 +3,10 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
import { IconButton } from '../../common/icon-button/icon-button'
import Link from 'next/link'
import React from 'react'
import { Button } from 'react-bootstrap'
import { Plus as IconPlus } from 'react-bootstrap-icons'
import { Trans, useTranslation } from 'react-i18next'
/**
@ -17,9 +17,9 @@ export const NewNoteButton: React.FC = () => {
return (
<Link href={'/new'} passHref={true}>
<Button className='mx-2' size='sm' variant='primary'>
<ForkAwesomeIcon icon='plus' /> <Trans i18nKey='editor.appBar.new' />
</Button>
<IconButton className='mx-2' iconSize={1.5} icon={IconPlus}>
<Trans i18nKey='editor.appBar.new' />
</IconButton>
</Link>
)
}

5
frontend/src/components/editor-page/app-bar/read-only-mode-button.tsx
View file

@ -4,10 +4,11 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useApplicationState } from '../../../hooks/common/use-application-state'
import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
import { UiIcon } from '../../common/icons/ui-icon'
import Link from 'next/link'
import React from 'react'
import { Button } from 'react-bootstrap'
import { FileEarmarkTextFill as IconFileEarmarkTextFill } from 'react-bootstrap-icons'
import { useTranslation } from 'react-i18next'
/**
@ -24,7 +25,7 @@ export const ReadOnlyModeButton: React.FC = () => {
className='ms-2 text-secondary'
size='sm'
variant='outline-light'>
<ForkAwesomeIcon icon='file-text-o' />
<UiIcon icon={IconFileEarmarkTextFill} />
</Button>
</Link>
)

5
frontend/src/components/editor-page/app-bar/slide-mode-button.tsx
View file

@ -4,10 +4,11 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useApplicationState } from '../../../hooks/common/use-application-state'
import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
import { UiIcon } from '../../common/icons/ui-icon'
import Link from 'next/link'
import React from 'react'
import { Button } from 'react-bootstrap'
import { Tv as IconTv } from 'react-bootstrap-icons'
import { useTranslation } from 'react-i18next'
/**
@ -24,7 +25,7 @@ export const SlideModeButton: React.FC = () => {
className='ms-2 text-secondary'
size='sm'
variant='outline-light'>
<ForkAwesomeIcon icon='television' />
<UiIcon icon={IconTv} />
</Button>
</Link>
)

4
frontend/src/components/editor-page/document-bar/aliases/__snapshots__/aliases-add-form.test.tsx.snap
View file

@ -20,9 +20,7 @@ exports[`AliasesAddForm renders the input form 1`] = `
title="editor.modal.aliases.addAlias"
type="submit"
>
<i
class="fa fa-plus "
/>
BootstrapIconMock_Plus
</button>
</div>
</form>

16
frontend/src/components/editor-page/document-bar/aliases/__snapshots__/aliases-list-entry.test.tsx.snap
View file

@ -13,9 +13,7 @@ exports[`AliasesListEntry renders an AliasesListEntry that is not primary 1`] =
title="editor.modal.aliases.makePrimary"
type="button"
>
<i
class="fa fa-star-o "
/>
BootstrapIconMock_StarFill
</button>
<button
class="text-danger btn btn-light"
@ -23,9 +21,7 @@ exports[`AliasesListEntry renders an AliasesListEntry that is not primary 1`] =
title="editor.modal.aliases.removeAlias"
type="button"
>
<i
class="fa fa-times "
/>
BootstrapIconMock_X
</button>
</div>
</li>
@ -46,9 +42,7 @@ exports[`AliasesListEntry renders an AliasesListEntry that is primary 1`] = `
title="editor.modal.aliases.isPrimary"
type="button"
>
<i
class="fa fa-star "
/>
BootstrapIconMock_Star
</button>
<button
class="text-danger btn btn-light"
@ -56,9 +50,7 @@ exports[`AliasesListEntry renders an AliasesListEntry that is primary 1`] = `
title="editor.modal.aliases.removeAlias"
type="button"
>
<i
class="fa fa-times "
/>
BootstrapIconMock_X
</button>
</div>
</li>

5
frontend/src/components/editor-page/document-bar/aliases/aliases-add-form.tsx
View file

@ -8,11 +8,12 @@ import { useApplicationState } from '../../../../hooks/common/use-application-st
import { useOnInputChange } from '../../../../hooks/common/use-on-input-change'
import { updateMetadata } from '../../../../redux/note-details/methods'
import { testId } from '../../../../utils/test-id'
import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
import { UiIcon } from '../../../common/icons/ui-icon'
import { useUiNotifications } from '../../../notifications/ui-notification-boundary'
import type { FormEvent } from 'react'
import React, { useCallback, useMemo, useState } from 'react'
import { Button, Form, InputGroup } from 'react-bootstrap'
import { Plus as IconPlus } from 'react-bootstrap-icons'
import { useTranslation } from 'react-i18next'
const validAliasRegex = /^[a-z0-9_-]*$/
@ -63,7 +64,7 @@ export const AliasesAddForm: React.FC = () => {
disabled={!newAliasValid || newAlias === ''}
title={t('editor.modal.aliases.addAlias') ?? undefined}
{...testId('addAliasButton')}>
<ForkAwesomeIcon icon={'plus'} />
<UiIcon icon={IconPlus} />
</Button>
</InputGroup>
</form>

11
frontend/src/components/editor-page/document-bar/aliases/aliases-list-entry.tsx
View file

@ -7,11 +7,14 @@ import { deleteAlias, markAliasAsPrimary } from '../../../../api/alias'
import type { Alias } from '../../../../api/alias/types'
import { updateMetadata } from '../../../../redux/note-details/methods'
import { testId } from '../../../../utils/test-id'
import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
import { UiIcon } from '../../../common/icons/ui-icon'
import { ShowIf } from '../../../common/show-if/show-if'
import { useUiNotifications } from '../../../notifications/ui-notification-boundary'
import React, { useCallback } from 'react'
import { Button } from 'react-bootstrap'
import { StarFill as IconStarFill } from 'react-bootstrap-icons'
import { Star as IconStar } from 'react-bootstrap-icons'
import { X as IconX } from 'react-bootstrap-icons'
import { useTranslation } from 'react-i18next'
export interface AliasesListEntryProps {
@ -50,7 +53,7 @@ export const AliasesListEntry: React.FC<AliasesListEntryProps> = ({ alias }) =>
disabled={true}
title={t('editor.modal.aliases.isPrimary') ?? undefined}
{...testId('aliasIsPrimary')}>
<ForkAwesomeIcon icon={'star'} />
<UiIcon icon={IconStar} />
</Button>
</ShowIf>
<ShowIf condition={!alias.primaryAlias}>
@ -60,7 +63,7 @@ export const AliasesListEntry: React.FC<AliasesListEntryProps> = ({ alias }) =>
title={t('editor.modal.aliases.makePrimary') ?? undefined}
onClick={onMakePrimaryClick}
{...testId('aliasButtonMakePrimary')}>
<ForkAwesomeIcon icon={'star-o'} />
<UiIcon icon={IconStarFill} />
</Button>
</ShowIf>
<Button
@ -69,7 +72,7 @@ export const AliasesListEntry: React.FC<AliasesListEntryProps> = ({ alias }) =>
title={t('editor.modal.aliases.removeAlias') ?? undefined}
onClick={onRemoveClick}
{...testId('aliasButtonRemove')}>
<ForkAwesomeIcon icon={'times'} />
<UiIcon icon={IconX} />
</Button>
</div>
</li>

3
frontend/src/components/editor-page/document-bar/note-info/note-info-line-contributors.tsx
View file

@ -7,6 +7,7 @@ import { useApplicationState } from '../../../../hooks/common/use-application-st
import { NoteInfoLine } from './note-info-line'
import { UnitalicBoldContent } from './unitalic-bold-content'
import React from 'react'
import { People as IconPeople } from 'react-bootstrap-icons'
import { Trans } from 'react-i18next'
/**
@ -16,7 +17,7 @@ export const NoteInfoLineContributors: React.FC = () => {
const contributors = useApplicationState((state) => state.noteDetails.editedBy.length)
return (
<NoteInfoLine icon={'users'} size={'2x'}>
<NoteInfoLine icon={IconPeople} size={2}>
<Trans i18nKey={'editor.modal.documentInfo.usersContributed'}>
<UnitalicBoldContent text={contributors} />
</Trans>

3
frontend/src/components/editor-page/document-bar/note-info/note-info-line-created.tsx
View file

@ -9,6 +9,7 @@ import type { NoteInfoTimeLineProps } from './note-info-time-line'
import { UnitalicBoldTimeFromNow } from './utils/unitalic-bold-time-from-now'
import { DateTime } from 'luxon'
import React, { useMemo } from 'react'
import { Plus as IconPlus } from 'react-bootstrap-icons'
import { Trans } from 'react-i18next'
/**
@ -21,7 +22,7 @@ export const NoteInfoLineCreated: React.FC<NoteInfoTimeLineProps> = ({ size }) =
const noteCreateDateTime = useMemo(() => DateTime.fromSeconds(noteCreateTime), [noteCreateTime])
return (
<NoteInfoLine icon={'plus'} size={size}>
<NoteInfoLine icon={IconPlus} size={size}>
<Trans i18nKey={'editor.modal.documentInfo.created'}>
<UnitalicBoldTimeFromNow time={noteCreateDateTime} />
</Trans>

3
frontend/src/components/editor-page/document-bar/note-info/note-info-line-updated.tsx
View file

@ -11,6 +11,7 @@ import { UnitalicBoldTimeFromNow } from './utils/unitalic-bold-time-from-now'
import { UnitalicBoldTrans } from './utils/unitalic-bold-trans'
import { DateTime } from 'luxon'
import React, { useMemo } from 'react'
import { Pencil as IconPencil } from 'react-bootstrap-icons'
import { Trans, useTranslation } from 'react-i18next'
/**
@ -38,7 +39,7 @@ export const NoteInfoLineUpdated: React.FC<NoteInfoTimeLineProps> = ({ size }) =
}, [noteUpdateUser, size])
return (
<NoteInfoLine icon={'pencil'} size={size}>
<NoteInfoLine icon={IconPencil} size={size}>
<Trans i18nKey={'editor.modal.documentInfo.edited'}>
{userBlock}
<UnitalicBoldTimeFromNow time={noteUpdateDateTime} />

3
frontend/src/components/editor-page/document-bar/note-info/note-info-line-word-count.tsx
View file

@ -14,6 +14,7 @@ import { NoteInfoLine } from './note-info-line'
import { UnitalicBoldContent } from './unitalic-bold-content'
import type { PropsWithChildren } from 'react'
import React, { useCallback, useEffect, useState } from 'react'
import { AlignStart as IconAlignStart } from 'react-bootstrap-icons'
import { Trans, useTranslation } from 'react-i18next'
/**
@ -38,7 +39,7 @@ export const NoteInfoLineWordCount: React.FC<PropsWithChildren<unknown>> = () =>
}, [editorToRendererCommunicator, rendererReady])
return (
<NoteInfoLine icon={'align-left'} size={'2x'}>
<NoteInfoLine icon={IconAlignStart} size={2}>
<ShowIf condition={wordCount === null}>
<Trans i18nKey={'common.loading'} />
</ShowIf>

10
frontend/src/components/editor-page/document-bar/note-info/note-info-line.tsx
View file

@ -3,14 +3,14 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
import type { IconName } from '../../../common/fork-awesome/types'
import { UiIcon } from '../../../common/icons/ui-icon'
import type { PropsWithChildren } from 'react'
import React from 'react'
import type { Icon } from 'react-bootstrap-icons'
export interface NoteInfoLineProps {
icon: IconName
size?: '2x' | '3x' | '4x' | '5x' | undefined
icon: Icon
size?: 2 | 3 | 4 | 5 | undefined
}
/**
@ -24,7 +24,7 @@ export interface NoteInfoLineProps {
export const NoteInfoLine: React.FC<PropsWithChildren<NoteInfoLineProps>> = ({ icon, size, children }) => {
return (
<span className={'d-flex align-items-center'}>
<ForkAwesomeIcon icon={icon} size={size} fixedWidth={true} className={'mx-2'} />
<UiIcon icon={icon} size={size} className={'mx-2'} />
<i className={'d-flex align-items-center'}>{children}</i>
</span>
)

4
frontend/src/components/editor-page/document-bar/note-info/note-info-modal.tsx
View file

@ -33,10 +33,10 @@ export const NoteInfoModal: React.FC<ModalVisibilityProps> = ({ show, onHide })
<Modal.Body>
<ListGroup>
<ListGroup.Item>
<NoteInfoLineCreated size={'2x'} />
<NoteInfoLineCreated size={2} />
</ListGroup.Item>
<ListGroup.Item>
<NoteInfoLineUpdated size={'2x'} />
<NoteInfoLineUpdated size={2} />
</ListGroup.Item>
<ListGroup.Item>
<NoteInfoLineContributors />

2
frontend/src/components/editor-page/document-bar/note-info/note-info-time-line.ts
View file

@ -4,5 +4,5 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
export interface NoteInfoTimeLineProps {
size?: '2x' | '3x' | '4x' | '5x'
size?: 2 | 3 | 4 | 5
}

5
frontend/src/components/editor-page/document-bar/permissions/permission-add-entry-field.tsx
View file

@ -4,9 +4,10 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useOnInputChange } from '../../../../hooks/common/use-on-input-change'
import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
import { UiIcon } from '../../../common/icons/ui-icon'
import React, { useCallback, useState } from 'react'
import { Button, FormControl, InputGroup } from 'react-bootstrap'
import { Plus as IconPlus } from 'react-bootstrap-icons'
import { useTranslation } from 'react-i18next'
export interface PermissionAddEntryFieldProps {
@ -35,7 +36,7 @@ export const PermissionAddEntryField: React.FC<PermissionAddEntryFieldProps> = (
<InputGroup className={'me-1 mb-1'}>
<FormControl value={newEntryIdentifier} placeholder={t(i18nKey) ?? undefined} onChange={onChange} />
<Button variant='light' className={'text-secondary ms-2'} title={t(i18nKey) ?? undefined} onClick={onSubmit}>
<ForkAwesomeIcon icon={'plus'} />
<UiIcon icon={IconPlus} />
</Button>
</InputGroup>
</li>

11
frontend/src/components/editor-page/document-bar/permissions/permission-entry-buttons.tsx
View file

@ -3,10 +3,13 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
import { UiIcon } from '../../../common/icons/ui-icon'
import { AccessLevel } from './types'
import React, { useMemo } from 'react'
import { Button, ToggleButtonGroup } from 'react-bootstrap'
import { Eye as IconEye } from 'react-bootstrap-icons'
import { Pencil as IconPencil } from 'react-bootstrap-icons'
import { X as IconX } from 'react-bootstrap-icons'
import { useTranslation } from 'react-i18next'
interface PermissionEntryButtonI18nKeys {
@ -73,20 +76,20 @@ export const PermissionEntryButtons: React.FC<PermissionEntryButtonsProps> = ({
className={'text-danger me-2'}
title={t(i18nKeys.remove, { name }) ?? undefined}
onClick={onRemove}>
<ForkAwesomeIcon icon={'times'} />
<UiIcon icon={IconX} />
</Button>
<ToggleButtonGroup type='radio' name='edit-mode' value={currentSetting}>
<Button
title={t(i18nKeys.setReadOnly, { name }) ?? undefined}
variant={currentSetting === AccessLevel.READ_ONLY ? 'secondary' : 'outline-secondary'}
onClick={onSetReadOnly}>
<ForkAwesomeIcon icon='eye' />
<UiIcon icon={IconEye} />
</Button>
<Button
title={t(i18nKeys.setWriteable, { name }) ?? undefined}
variant={currentSetting === AccessLevel.WRITEABLE ? 'secondary' : 'outline-secondary'}
onClick={onSetWriteable}>
<ForkAwesomeIcon icon='pencil' />
<UiIcon icon={IconPencil} />
</Button>
</ToggleButtonGroup>
</div>

34
frontend/src/components/editor-page/document-bar/permissions/permission-entry-special-group.tsx
View file

@ -6,11 +6,14 @@
import { removeGroupPermission, setGroupPermission } from '../../../../api/permissions'
import { useApplicationState } from '../../../../hooks/common/use-application-state'
import { setNotePermissionsFromServer } from '../../../../redux/note-details/methods'
import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
import { IconButton } from '../../../common/icon-button/icon-button'
import { useUiNotifications } from '../../../notifications/ui-notification-boundary'
import { AccessLevel, SpecialGroup } from './types'
import React, { useCallback, useMemo } from 'react'
import { Button, ToggleButtonGroup } from 'react-bootstrap'
import { ToggleButtonGroup } from 'react-bootstrap'
import { Eye as IconEye } from 'react-bootstrap-icons'
import { Pencil as IconPencil } from 'react-bootstrap-icons'
import { SlashCircle as IconSlashCircle } from 'react-bootstrap-icons'
import { useTranslation } from 'react-i18next'
export interface PermissionEntrySpecialGroupProps {
@ -67,24 +70,27 @@ export const PermissionEntrySpecialGroup: React.FC<PermissionEntrySpecialGroupPr
<span>{name}</span>
<div>
<ToggleButtonGroup type='radio' name='edit-mode'>
<Button
<IconButton
icon={IconSlashCircle}
title={t('editor.modal.permissions.denyGroup', { name }) ?? undefined}
variant={level === AccessLevel.NONE ? 'secondary' : 'outline-secondary'}
onClick={onSetEntryDenied}>
<ForkAwesomeIcon icon={'ban'} />
</Button>
<Button
onClick={onSetEntryDenied}
className={'p-1'}
/>
<IconButton
icon={IconEye}
title={t('editor.modal.permissions.viewOnlyGroup', { name }) ?? undefined}
variant={level === AccessLevel.READ_ONLY ? 'secondary' : 'outline-secondary'}
onClick={onSetEntryReadOnly}>
<ForkAwesomeIcon icon={'eye'} />
</Button>
<Button
onClick={onSetEntryReadOnly}
className={'p-1'}
/>
<IconButton
icon={IconPencil}
title={t('editor.modal.permissions.editGroup', { name }) ?? undefined}
variant={level === AccessLevel.WRITEABLE ? 'secondary' : 'outline-secondary'}
onClick={() => onSetEntryWriteable}>
<ForkAwesomeIcon icon={'pencil'} />
</Button>
onClick={onSetEntryWriteable}
className={'p-1'}
/>
</ToggleButtonGroup>
</div>
</li>

5
frontend/src/components/editor-page/document-bar/permissions/permission-owner-change.tsx
View file

@ -4,9 +4,10 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useOnInputChange } from '../../../../hooks/common/use-on-input-change'
import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
import { UiIcon } from '../../../common/icons/ui-icon'
import React, { useCallback, useMemo, useState } from 'react'
import { Button, FormControl, InputGroup } from 'react-bootstrap'
import { Check as IconCheck } from 'react-bootstrap-icons'
import { useTranslation } from 'react-i18next'
export interface PermissionOwnerChangeProps {
@ -44,7 +45,7 @@ export const PermissionOwnerChange: React.FC<PermissionOwnerChangeProps> = ({ on
onClick={onClickConfirm}
className={'ms-2'}
disabled={confirmButtonDisabled}>
<ForkAwesomeIcon icon={'check'} />
<UiIcon icon={IconCheck} />
</Button>
</InputGroup>
)

5
frontend/src/components/editor-page/document-bar/permissions/permission-owner-info.tsx
View file

@ -4,10 +4,11 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useApplicationState } from '../../../../hooks/common/use-application-state'
import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
import { UiIcon } from '../../../common/icons/ui-icon'
import { UserAvatarForUsername } from '../../../common/user-avatar/user-avatar-for-username'
import React, { Fragment } from 'react'
import { Button } from 'react-bootstrap'
import { Pencil as IconPencil } from 'react-bootstrap-icons'
import { useTranslation } from 'react-i18next'
export interface PermissionOwnerInfoProps {
@ -30,7 +31,7 @@ export const PermissionOwnerInfo: React.FC<PermissionOwnerInfoProps> = ({ onEdit
variant='light'
title={t('editor.modal.permissions.ownerChange.button') ?? undefined}
onClick={onEditOwner}>
<ForkAwesomeIcon icon={'pencil'} />
<UiIcon icon={IconPencil} />
</Button>
</Fragment>
)

11
frontend/src/components/editor-page/document-bar/revisions/revision-list-entry.tsx
View file

@ -4,7 +4,7 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { RevisionMetadata } from '../../../../api/revisions/types'
import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
import { UiIcon } from '../../../common/icons/ui-icon'
import { ShowIf } from '../../../common/show-if/show-if'
import { UserAvatar } from '../../../common/user-avatar/user-avatar'
import { WaitSpinner } from '../../../common/wait-spinner/wait-spinner'
@ -14,6 +14,9 @@ import { getUserDataForRevision } from './utils'
import { DateTime } from 'luxon'
import React, { useMemo } from 'react'
import { ListGroup } from 'react-bootstrap'
import { Clock as IconClock } from 'react-bootstrap-icons'
import { FileText as IconFileText } from 'react-bootstrap-icons'
import { Person as IconPerson } from 'react-bootstrap-icons'
import { Trans, useTranslation } from 'react-i18next'
import { useAsync } from 'react-use'
@ -57,15 +60,15 @@ export const RevisionListEntry: React.FC<RevisionListEntryProps> = ({ active, on
action
className={`${styles['revision-item']} d-flex flex-column`}>
<span>
<ForkAwesomeIcon icon={'clock-o'} className='mx-2' />
<UiIcon icon={IconClock} className='mx-2' />
{revisionCreationTime}
</span>
<span>
<ForkAwesomeIcon icon={'file-text-o'} className='mx-2' />
<UiIcon icon={IconFileText} className='mx-2' />
<Trans i18nKey={'editor.modal.revision.length'} />: {revision.length}
</span>
<span className={'d-flex flex-row my-1 align-items-center'}>
<ForkAwesomeIcon icon={'user-o'} className={'mx-2'} />
<UiIcon icon={IconPerson} className={'mx-2'} />
<ShowIf condition={revisionAuthors.loading}>
<WaitSpinner />
</ShowIf>

3
frontend/src/components/editor-page/document-bar/revisions/revision-modal.tsx
View file

@ -11,6 +11,7 @@ import styles from './revision-modal.module.scss'
import { RevisionViewer } from './revision-viewer'
import React, { useState } from 'react'
import { Col, Modal, Row } from 'react-bootstrap'
import { ClockHistory as IconClockHistory } from 'react-bootstrap-icons'
import { useTranslation } from 'react-i18next'
/**
@ -28,7 +29,7 @@ export const RevisionModal: React.FC<ModalVisibilityProps> = ({ show, onHide })
show={show}
onHide={onHide}
titleI18nKey={'editor.modal.revision.title'}
titleIcon={'history'}
titleIcon={IconClockHistory}
showCloseButton={true}
modalSize={'xl'}
additionalClasses={styles['revision-modal']}>

3
frontend/src/components/editor-page/editor-pane/tool-bar/buttons/bold-button.tsx
View file

@ -7,6 +7,7 @@ import type { ContentFormatter } from '../../../change-content-context/change-co
import { wrapSelection } from '../formatters/wrap-selection'
import { ToolbarButton } from '../toolbar-button'
import React, { useCallback } from 'react'
import { TypeBold as IconTypeBold } from 'react-bootstrap-icons'
/**
* Renders a button to make the selection in the {@link Editor editor} bold.
@ -15,5 +16,5 @@ export const BoldButton: React.FC = () => {
const formatter: ContentFormatter = useCallback(({ currentSelection }) => {
return wrapSelection(currentSelection, '**', '**')
}, [])
return <ToolbarButton i18nKey={'bold'} iconName={'bold'} formatter={formatter}></ToolbarButton>
return <ToolbarButton i18nKey={'bold'} icon={IconTypeBold} formatter={formatter}></ToolbarButton>
}

3
frontend/src/components/editor-page/editor-pane/tool-bar/buttons/check-list-button.tsx
View file

@ -7,6 +7,7 @@ import type { ContentFormatter } from '../../../change-content-context/change-co
import { prependLinesOfSelection } from '../formatters/prepend-lines-of-selection'
import { ToolbarButton } from '../toolbar-button'
import React, { useCallback } from 'react'
import { CheckSquare as IconCheckSquare } from 'react-bootstrap-icons'
/**
* Renders a button to create a checklist in the {@link Editor editor}.
@ -15,5 +16,5 @@ export const CheckListButton: React.FC = () => {
const formatter: ContentFormatter = useCallback(({ currentSelection, markdownContent }) => {
return prependLinesOfSelection(markdownContent, currentSelection, () => `- [ ] `)
}, [])
return <ToolbarButton i18nKey={'checkList'} iconName={'check-square'} formatter={formatter}></ToolbarButton>
return <ToolbarButton i18nKey={'checkList'} icon={IconCheckSquare} formatter={formatter}></ToolbarButton>
}

3
frontend/src/components/editor-page/editor-pane/tool-bar/buttons/code-fence-button.tsx
View file

@ -8,6 +8,7 @@ import { changeCursorsToWholeLineIfNoToCursor } from '../formatters/utils/change
import { wrapSelection } from '../formatters/wrap-selection'
import { ToolbarButton } from '../toolbar-button'
import React, { useCallback } from 'react'
import { Code as IconCode } from 'react-bootstrap-icons'
/**
* Renders a button to create a code fence in the {@link Editor editor}.
@ -16,5 +17,5 @@ export const CodeFenceButton: React.FC = () => {
const formatter: ContentFormatter = useCallback(({ currentSelection, markdownContent }) => {
return wrapSelection(changeCursorsToWholeLineIfNoToCursor(markdownContent, currentSelection), '```\n', '\n```')
}, [])
return <ToolbarButton i18nKey={'code'} iconName={'code'} formatter={formatter}></ToolbarButton>
return <ToolbarButton i18nKey={'code'} icon={IconCode} formatter={formatter}></ToolbarButton>
}

5
frontend/src/components/editor-page/editor-pane/tool-bar/buttons/collapsible-block-button.tsx
View file

@ -8,6 +8,7 @@ import { changeCursorsToWholeLineIfNoToCursor } from '../formatters/utils/change
import { wrapSelection } from '../formatters/wrap-selection'
import { ToolbarButton } from '../toolbar-button'
import React, { useCallback } from 'react'
import { ArrowsCollapse as IconArrowsCollapse } from 'react-bootstrap-icons'
/**
* Renders a button to create a spoiler section in the {@link Editor editor}.
@ -20,7 +21,5 @@ export const CollapsibleBlockButton: React.FC = () => {
'\n:::\n'
)
}, [])
return (
<ToolbarButton i18nKey={'collapsibleBlock'} iconName={'caret-square-o-down'} formatter={formatter}></ToolbarButton>
)
return <ToolbarButton i18nKey={'collapsibleBlock'} icon={IconArrowsCollapse} formatter={formatter}></ToolbarButton>
}

3
frontend/src/components/editor-page/editor-pane/tool-bar/buttons/comment-button.tsx
View file

@ -7,6 +7,7 @@ import type { ContentFormatter } from '../../../change-content-context/change-co
import { replaceSelection } from '../formatters/replace-selection'
import { ToolbarButton } from '../toolbar-button'
import React, { useCallback } from 'react'
import { ChatDots as IconChatDots } from 'react-bootstrap-icons'
/**
* Renders a button to create a comment in the {@link Editor editor}.
@ -15,5 +16,5 @@ export const CommentButton: React.FC = () => {
const formatter: ContentFormatter = useCallback(({ currentSelection }) => {
return replaceSelection({ from: currentSelection.to ?? currentSelection.from }, '> []', true)
}, [])
return <ToolbarButton i18nKey={'comment'} iconName={'comment'} formatter={formatter}></ToolbarButton>
return <ToolbarButton i18nKey={'comment'} icon={IconChatDots} formatter={formatter}></ToolbarButton>
}

3
frontend/src/components/editor-page/editor-pane/tool-bar/buttons/header-level-button.tsx
View file

@ -7,6 +7,7 @@ import type { ContentFormatter } from '../../../change-content-context/change-co
import { prependLinesOfSelection } from '../formatters/prepend-lines-of-selection'
import { ToolbarButton } from '../toolbar-button'
import React, { useCallback } from 'react'
import { TypeH1 as IconTypeH1 } from 'react-bootstrap-icons'
/**
* Renders a button to add a header in the {@link Editor editor}.
@ -15,5 +16,5 @@ export const HeaderLevelButton: React.FC = () => {
const formatter: ContentFormatter = useCallback(({ currentSelection, markdownContent }) => {
return prependLinesOfSelection(markdownContent, currentSelection, (line) => (line.startsWith('#') ? `#` : `# `))
}, [])
return <ToolbarButton i18nKey={'header'} iconName={'header'} formatter={formatter}></ToolbarButton>
return <ToolbarButton i18nKey={'header'} icon={IconTypeH1} formatter={formatter}></ToolbarButton>
}

3
frontend/src/components/editor-page/editor-pane/tool-bar/buttons/highlight-button.tsx
View file

@ -7,6 +7,7 @@ import type { ContentFormatter } from '../../../change-content-context/change-co
import { wrapSelection } from '../formatters/wrap-selection'
import { ToolbarButton } from '../toolbar-button'
import React, { useCallback } from 'react'
import { Eraser as IconEraser } from 'react-bootstrap-icons'
/**
* Renders a button that highlights the selection in the {@link Editor editor}.
@ -15,5 +16,5 @@ export const HighlightButton: React.FC = () => {
const formatter: ContentFormatter = useCallback(({ currentSelection }) => {
return wrapSelection(currentSelection, '==', '==')
}, [])
return <ToolbarButton i18nKey={'highlight'} iconName={'eraser'} formatter={formatter}></ToolbarButton>
return <ToolbarButton i18nKey={'highlight'} icon={IconEraser} formatter={formatter}></ToolbarButton>
}

3
frontend/src/components/editor-page/editor-pane/tool-bar/buttons/horizontal-line-button.tsx
View file

@ -7,6 +7,7 @@ import type { ContentFormatter } from '../../../change-content-context/change-co
import { replaceSelection } from '../formatters/replace-selection'
import { ToolbarButton } from '../toolbar-button'
import React, { useCallback } from 'react'
import { DashLg as IconDashLg } from 'react-bootstrap-icons'
/**
* Renders a button to insert a horizontal line in the {@link Editor editor}.
@ -15,5 +16,5 @@ export const HorizontalLineButton: React.FC = () => {
const formatter: ContentFormatter = useCallback(({ currentSelection }) => {
return replaceSelection({ from: currentSelection.to ?? currentSelection.from }, '----\n', true)
}, [])
return <ToolbarButton i18nKey={'horizontalLine'} iconName={'minus'} formatter={formatter}></ToolbarButton>
return <ToolbarButton i18nKey={'horizontalLine'} icon={IconDashLg} formatter={formatter}></ToolbarButton>
}

3
frontend/src/components/editor-page/editor-pane/tool-bar/buttons/image-link-button.tsx
View file

@ -7,6 +7,7 @@ import type { ContentFormatter } from '../../../change-content-context/change-co
import { addLink } from '../formatters/add-link'
import { ToolbarButton } from '../toolbar-button'
import React, { useCallback } from 'react'
import { Image as IconImage } from 'react-bootstrap-icons'
/**
* Renders a button to insert an image in the {@link Editor editor}.
@ -15,5 +16,5 @@ export const ImageLinkButton: React.FC = () => {
const formatter: ContentFormatter = useCallback(({ currentSelection, markdownContent }) => {
return addLink(markdownContent, currentSelection, '!')
}, [])
return <ToolbarButton i18nKey={'imageLink'} iconName={'picture-o'} formatter={formatter}></ToolbarButton>
return <ToolbarButton i18nKey={'imageLink'} icon={IconImage} formatter={formatter}></ToolbarButton>
}

3
frontend/src/components/editor-page/editor-pane/tool-bar/buttons/italic-button.tsx
View file

@ -7,6 +7,7 @@ import type { ContentFormatter } from '../../../change-content-context/change-co
import { wrapSelection } from '../formatters/wrap-selection'
import { ToolbarButton } from '../toolbar-button'
import React, { useCallback } from 'react'
import { TypeItalic as IconTypeItalic } from 'react-bootstrap-icons'
/**
* Renders a button to make the selection in the {@link Editor editor} italic.
@ -15,5 +16,5 @@ export const ItalicButton: React.FC = () => {
const formatter: ContentFormatter = useCallback(({ currentSelection }) => {
return wrapSelection(currentSelection, '*', '*')
}, [])
return <ToolbarButton i18nKey={'italic'} iconName={'italic'} formatter={formatter}></ToolbarButton>
return <ToolbarButton i18nKey={'italic'} icon={IconTypeItalic} formatter={formatter}></ToolbarButton>
}

3
frontend/src/components/editor-page/editor-pane/tool-bar/buttons/link-button.tsx
View file

@ -7,6 +7,7 @@ import type { ContentFormatter } from '../../../change-content-context/change-co
import { addLink } from '../formatters/add-link'
import { ToolbarButton } from '../toolbar-button'
import React, { useCallback } from 'react'
import { Link as IconLink } from 'react-bootstrap-icons'
/**
* Renders a button to insert a link in the {@link Editor editor}.
@ -15,5 +16,5 @@ export const LinkButton: React.FC = () => {
const formatter: ContentFormatter = useCallback(({ currentSelection, markdownContent }) => {
return addLink(markdownContent, currentSelection)
}, [])
return <ToolbarButton i18nKey={'link'} iconName={'link'} formatter={formatter}></ToolbarButton>
return <ToolbarButton i18nKey={'link'} icon={IconLink} formatter={formatter}></ToolbarButton>
}

3
frontend/src/components/editor-page/editor-pane/tool-bar/buttons/ordered-list-button.tsx
View file

@ -7,6 +7,7 @@ import type { ContentFormatter } from '../../../change-content-context/change-co
import { prependLinesOfSelection } from '../formatters/prepend-lines-of-selection'
import { ToolbarButton } from '../toolbar-button'
import React, { useCallback } from 'react'
import { ListOl as IconListOl } from 'react-bootstrap-icons'
/**
* Renders a button to insert an ordered list in the {@link Editor editor}.
@ -19,5 +20,5 @@ export const OrderedListButton: React.FC = () => {
(line, lineIndexInBlock) => `${lineIndexInBlock + 1}. `
)
}, [])
return <ToolbarButton i18nKey={'orderedList'} iconName={'list-ol'} formatter={formatter}></ToolbarButton>
return <ToolbarButton i18nKey={'orderedList'} icon={IconListOl} formatter={formatter}></ToolbarButton>
}

3
frontend/src/components/editor-page/editor-pane/tool-bar/buttons/quotes-button.tsx
View file

@ -7,6 +7,7 @@ import type { ContentFormatter } from '../../../change-content-context/change-co
import { prependLinesOfSelection } from '../formatters/prepend-lines-of-selection'
import { ToolbarButton } from '../toolbar-button'
import React, { useCallback } from 'react'
import { Quote as IconQuote } from 'react-bootstrap-icons'
/**
* Renders a button to insert a quotation in the {@link Editor editor}.
@ -15,5 +16,5 @@ export const QuotesButton: React.FC = () => {
const formatter: ContentFormatter = useCallback(({ currentSelection, markdownContent }) => {
return prependLinesOfSelection(markdownContent, currentSelection, () => `> `)
}, [])
return <ToolbarButton i18nKey={'blockquote'} iconName={'quote-right'} formatter={formatter}></ToolbarButton>
return <ToolbarButton i18nKey={'blockquote'} icon={IconQuote} formatter={formatter}></ToolbarButton>
}

3
frontend/src/components/editor-page/editor-pane/tool-bar/buttons/strikethrough-button.tsx
View file

@ -7,6 +7,7 @@ import type { ContentFormatter } from '../../../change-content-context/change-co
import { wrapSelection } from '../formatters/wrap-selection'
import { ToolbarButton } from '../toolbar-button'
import React, { useCallback } from 'react'
import { TypeStrikethrough as IconTypeStrikethrough } from 'react-bootstrap-icons'
/**
* Renders a button to strike through the selection in the {@link Editor editor}.
@ -15,5 +16,5 @@ export const StrikethroughButton: React.FC = () => {
const formatter: ContentFormatter = useCallback(({ currentSelection }) => {
return wrapSelection(currentSelection, '~~', '~~')
}, [])
return <ToolbarButton i18nKey={'strikethrough'} iconName={'strikethrough'} formatter={formatter}></ToolbarButton>
return <ToolbarButton i18nKey={'strikethrough'} icon={IconTypeStrikethrough} formatter={formatter}></ToolbarButton>
}

3
frontend/src/components/editor-page/editor-pane/tool-bar/buttons/subscript-button.tsx
View file

@ -7,6 +7,7 @@ import type { ContentFormatter } from '../../../change-content-context/change-co
import { wrapSelection } from '../formatters/wrap-selection'
import { ToolbarButton } from '../toolbar-button'
import React, { useCallback } from 'react'
import { Subscript as IconSubscript } from 'react-bootstrap-icons'
/**
* Renders a button to format the selection in the {@link Editor editor} as subscript.
@ -15,5 +16,5 @@ export const SubscriptButton: React.FC = () => {
const formatter: ContentFormatter = useCallback(({ currentSelection }) => {
return wrapSelection(currentSelection, '~', '~')
}, [])
return <ToolbarButton i18nKey={'subscript'} iconName={'subscript'} formatter={formatter}></ToolbarButton>
return <ToolbarButton i18nKey={'subscript'} icon={IconSubscript} formatter={formatter}></ToolbarButton>
}

3
frontend/src/components/editor-page/editor-pane/tool-bar/buttons/superscript-button.tsx
View file

@ -7,6 +7,7 @@ import type { ContentFormatter } from '../../../change-content-context/change-co
import { wrapSelection } from '../formatters/wrap-selection'
import { ToolbarButton } from '../toolbar-button'
import React, { useCallback } from 'react'
import { Superscript as IconSuperscript } from 'react-bootstrap-icons'
/**
* Renders a button to format the selection in the {@link Editor editor} as superscript.
@ -15,5 +16,5 @@ export const SuperscriptButton: React.FC = () => {
const formatter: ContentFormatter = useCallback(({ currentSelection }) => {
return wrapSelection(currentSelection, '^', '^')
}, [])
return <ToolbarButton i18nKey={'superscript'} iconName={'superscript'} formatter={formatter}></ToolbarButton>
return <ToolbarButton i18nKey={'superscript'} icon={IconSuperscript} formatter={formatter}></ToolbarButton>
}

3
frontend/src/components/editor-page/editor-pane/tool-bar/buttons/underline-button.tsx
View file

@ -7,6 +7,7 @@ import type { ContentFormatter } from '../../../change-content-context/change-co
import { wrapSelection } from '../formatters/wrap-selection'
import { ToolbarButton } from '../toolbar-button'
import React, { useCallback } from 'react'
import { TypeUnderline as IconTypeUnderline } from 'react-bootstrap-icons'
/**
* Renders a button to underline the selection in the {@link Editor editor}.
@ -15,5 +16,5 @@ export const UnderlineButton: React.FC = () => {
const formatter: ContentFormatter = useCallback(({ currentSelection }) => {
return wrapSelection(currentSelection, '++', '++')
}, [])
return <ToolbarButton i18nKey={'underline'} iconName={'underline'} formatter={formatter}></ToolbarButton>
return <ToolbarButton i18nKey={'underline'} icon={IconTypeUnderline} formatter={formatter}></ToolbarButton>
}

3
frontend/src/components/editor-page/editor-pane/tool-bar/buttons/unordered-list-button.tsx
View file

@ -7,6 +7,7 @@ import type { ContentFormatter } from '../../../change-content-context/change-co
import { prependLinesOfSelection } from '../formatters/prepend-lines-of-selection'
import { ToolbarButton } from '../toolbar-button'
import React, { useCallback } from 'react'
import { List as IconList } from 'react-bootstrap-icons'
/**
* Renders a button to insert an unordered list in the {@link Editor editor}.
@ -15,5 +16,5 @@ export const UnorderedListButton: React.FC = () => {
const formatter: ContentFormatter = useCallback(({ currentSelection, markdownContent }) => {
return prependLinesOfSelection(markdownContent, currentSelection, () => `- `)
}, [])
return <ToolbarButton i18nKey={'unorderedList'} iconName={'list'} formatter={formatter}></ToolbarButton>
return <ToolbarButton i18nKey={'unorderedList'} icon={IconList} formatter={formatter}></ToolbarButton>
}

5
frontend/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker-button.tsx
View file

@ -4,7 +4,7 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { cypressId } from '../../../../../utils/cypress-attribute'
import { ForkAwesomeIcon } from '../../../../common/fork-awesome/fork-awesome-icon'
import { UiIcon } from '../../../../common/icons/ui-icon'
import { useChangeEditorContentCallback } from '../../../change-content-context/use-change-editor-content-callback'
import { replaceSelection } from '../formatters/replace-selection'
import { EmojiPickerPopover } from './emoji-picker-popover'
@ -13,6 +13,7 @@ import { extractEmojiShortCode } from './extract-emoji-short-code'
import type { EmojiClickEventDetail } from 'emoji-picker-element/shared'
import React, { Fragment, useCallback, useRef, useState } from 'react'
import { Button, Overlay } from 'react-bootstrap'
import { EmojiSmile as IconEmojiSmile } from 'react-bootstrap-icons'
import type { OverlayInjectedProps } from 'react-bootstrap/Overlay'
import { useTranslation } from 'react-i18next'
@ -63,7 +64,7 @@ export const EmojiPickerButton: React.FC = () => {
title={t('editor.editorToolbar.emoji') ?? undefined}
disabled={!changeEditorContent}
ref={buttonRef}>
<ForkAwesomeIcon icon='smile-o' />
<UiIcon icon={IconEmojiSmile} />
</Button>
</Fragment>
)

17
frontend/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker-popover.tsx
View file

@ -1,30 +1,21 @@
/*
* 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
*/
import fontStyles from '../../../../../../global-styles/variables.module.scss'
import { useDarkModeState } from '../../../../../hooks/common/use-dark-mode-state'
import { ForkAwesomeIcons } from '../../../../common/fork-awesome/fork-awesome-icons'
import styles from './emoji-picker.module.scss'
import forkawesomeIcon from './forkawesome.png'
import { Picker } from 'emoji-picker-element'
import type { CustomEmoji, EmojiClickEvent, EmojiClickEventDetail } from 'emoji-picker-element/shared'
import type { EmojiClickEvent, EmojiClickEventDetail } from 'emoji-picker-element/shared'
import type { PickerConstructorOptions } from 'emoji-picker-element/shared'
import React, { useEffect, useRef } from 'react'
import { Popover } from 'react-bootstrap'
import type { PopoverProps } from 'react-bootstrap/Popover'
const customEmojis: CustomEmoji[] = ForkAwesomeIcons.map((name) => ({
name: `fa-${name}`,
shortcodes: [`fa-${name.toLowerCase()}`],
url: forkawesomeIcon.src,
category: 'ForkAwesome'
}))
const EMOJI_DATA_PATH = '_next/static/js/emoji-data.json'
const emojiPickerConfig = {
customEmoji: customEmojis,
const emojiPickerConfig: PickerConstructorOptions = {
dataSource: EMOJI_DATA_PATH
}

BIN
frontend/src/components/editor-page/editor-pane/tool-bar/emoji-picker/forkawesome.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 32 KiB

3
frontend/src/components/editor-page/editor-pane/tool-bar/emoji-picker/forkawesome.png.license
View file

@ -1,3 +0,0 @@
SPDX-FileCopyrightText: 2018 Dave Gandy & Fork Awesome
SPDX-License-Identifier: OFL-1.1

8
frontend/src/components/editor-page/editor-pane/tool-bar/table-picker/custom-table-size-modal.tsx
View file

@ -4,12 +4,14 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { cypressId } from '../../../../../utils/cypress-attribute'
import { ForkAwesomeIcon } from '../../../../common/fork-awesome/fork-awesome-icon'
import { UiIcon } from '../../../../common/icons/ui-icon'
import { CommonModal } from '../../../../common/modals/common-modal'
import type { TableSize } from './table-size-picker-popover'
import type { ChangeEvent } from 'react'
import React, { useCallback, useEffect, useState } from 'react'
import { Button, Form, ModalFooter } from 'react-bootstrap'
import { Table as IconTable } from 'react-bootstrap-icons'
import { X as IconX } from 'react-bootstrap-icons'
import { Trans, useTranslation } from 'react-i18next'
export interface CustomTableSizeModalProps {
@ -67,7 +69,7 @@ export const CustomTableSizeModal: React.FC<CustomTableSizeModalProps> = ({ show
onHide={onDismiss}
titleI18nKey={'editor.editorToolbar.table.customSize'}
showCloseButton={true}
titleIcon={'table'}
titleIcon={IconTable}
{...cypressId('custom-table-size-modal')}>
<div className={'col-lg-10 d-flex flex-row p-3 align-items-center'}>
<Form.Control
@ -77,7 +79,7 @@ export const CustomTableSizeModal: React.FC<CustomTableSizeModalProps> = ({ show
isInvalid={tableSize.columns <= 0}
onChange={onColChange}
/>
<ForkAwesomeIcon icon='times' className='mx-2' fixedWidth={true} />
<UiIcon icon={IconX} className='mx-2' />
<Form.Control
type={'number'}
min={1}

5
frontend/src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker-button.tsx
View file

@ -4,7 +4,7 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { cypressId } from '../../../../../utils/cypress-attribute'
import { ForkAwesomeIcon } from '../../../../common/fork-awesome/fork-awesome-icon'
import { UiIcon } from '../../../../common/icons/ui-icon'
import { useChangeEditorContentCallback } from '../../../change-content-context/use-change-editor-content-callback'
import { replaceSelection } from '../formatters/replace-selection'
import { createMarkdownTable } from './create-markdown-table'
@ -13,6 +13,7 @@ import './table-picker.module.scss'
import { TableSizePickerPopover } from './table-size-picker-popover'
import React, { Fragment, useCallback, useMemo, useRef, useState } from 'react'
import { Button, Overlay } from 'react-bootstrap'
import { Table as IconTable } from 'react-bootstrap-icons'
import type { OverlayInjectedProps } from 'react-bootstrap/Overlay'
import { useTranslation } from 'react-i18next'
@ -77,7 +78,7 @@ export const TablePickerButton: React.FC = () => {
title={tableTitle}
ref={button}
disabled={!changeEditorContent}>
<ForkAwesomeIcon icon='table' />
<UiIcon icon={IconTable} />
</Button>
<Overlay
target={button.current}

5
frontend/src/components/editor-page/editor-pane/tool-bar/table-picker/table-size-picker-popover.tsx
View file

@ -4,12 +4,13 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { cypressAttribute, cypressId } from '../../../../../utils/cypress-attribute'
import { ForkAwesomeIcon } from '../../../../common/fork-awesome/fork-awesome-icon'
import { UiIcon } from '../../../../common/icons/ui-icon'
import { createNumberRangeArray } from '../../../../common/number-range/number-range'
import styles from './table-picker.module.scss'
import { TableSizeText } from './table-size-text'
import React, { useCallback, useMemo, useState } from 'react'
import { Button, Popover } from 'react-bootstrap'
import { Table as IconTable } from 'react-bootstrap-icons'
import type { PopoverProps } from 'react-bootstrap/Popover'
import { Trans, useTranslation } from 'react-i18next'
@ -79,7 +80,7 @@ export const TableSizePickerPopover = React.forwardRef<HTMLDivElement, TableSize
</div>
<div className='d-flex justify-content-center mt-2'>
<Button {...cypressId('show-custom-table-modal')} className={'text-center'} onClick={onShowCustomSizeModal}>
<ForkAwesomeIcon icon='table' />
<UiIcon icon={IconTable} />
&nbsp;
<Trans i18nKey={'editor.editorToolbar.table.customSize'} />
</Button>

10
frontend/src/components/editor-page/editor-pane/tool-bar/toolbar-button.tsx
View file

@ -4,17 +4,17 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { cypressId } from '../../../../utils/cypress-attribute'
import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
import type { IconName } from '../../../common/fork-awesome/types'
import { UiIcon } from '../../../common/icons/ui-icon'
import type { ContentFormatter } from '../../change-content-context/change-content-context'
import { useChangeEditorContentCallback } from '../../change-content-context/use-change-editor-content-callback'
import React, { useCallback, useMemo } from 'react'
import { Button } from 'react-bootstrap'
import type { Icon } from 'react-bootstrap-icons'
import { useTranslation } from 'react-i18next'
export interface ToolbarButtonProps {
i18nKey: string
iconName: IconName
icon: Icon
formatter: ContentFormatter
}
@ -25,7 +25,7 @@ export interface ToolbarButtonProps {
* @param iconName A fork awesome icon name that is shown in the button
* @param formatter The formatter function changes the editor content on click
*/
export const ToolbarButton: React.FC<ToolbarButtonProps> = ({ i18nKey, iconName, formatter }) => {
export const ToolbarButton: React.FC<ToolbarButtonProps> = ({ i18nKey, icon, formatter }) => {
const { t } = useTranslation('', { keyPrefix: 'editor.editorToolbar' })
const changeEditorContent = useChangeEditorContentCallback()
@ -41,7 +41,7 @@ export const ToolbarButton: React.FC<ToolbarButtonProps> = ({ i18nKey, iconName,
title={title}
disabled={!changeEditorContent}
{...cypressId('toolbar.' + i18nKey)}>
<ForkAwesomeIcon icon={iconName} />
<UiIcon icon={icon} />
</Button>
)
}

5
frontend/src/components/editor-page/editor-pane/tool-bar/upload-image-button/upload-image-button.tsx
View file

@ -5,7 +5,7 @@
*/
import { cypressId } from '../../../../../utils/cypress-attribute'
import { Logger } from '../../../../../utils/logger'
import { ForkAwesomeIcon } from '../../../../common/fork-awesome/fork-awesome-icon'
import { UiIcon } from '../../../../common/icons/ui-icon'
import { ShowIf } from '../../../../common/show-if/show-if'
import { acceptedMimeTypes } from '../../../../common/upload-image-mimetypes'
import { useCodeMirrorReference } from '../../../change-content-context/change-content-context'
@ -15,6 +15,7 @@ import { extractSelectedText } from './extract-selected-text'
import { Optional } from '@mrdrogdrog/optional'
import React, { Fragment, useCallback, useRef } from 'react'
import { Button } from 'react-bootstrap'
import { Upload as IconUpload } from 'react-bootstrap-icons'
import { useTranslation } from 'react-i18next'
const logger = new Logger('Upload image button')
@ -54,7 +55,7 @@ export const UploadImageButton: React.FC = () => {
disabled={!codeMirror}
title={t('editor.editorToolbar.uploadImage') ?? undefined}
{...cypressId('editor-toolbar-upload-image-button')}>
<ForkAwesomeIcon icon={'upload'} />
<UiIcon icon={IconUpload} />
</Button>
<ShowIf condition={!!codeMirror}>
<UploadInput

3
frontend/src/components/editor-page/sidebar/delete-note-sidebar-entry/delete-note-sidebar-entry.tsx
View file

@ -15,6 +15,7 @@ import { DeleteNoteModal } from './delete-note-modal'
import { useRouter } from 'next/router'
import type { PropsWithChildren } from 'react'
import React, { Fragment, useCallback } from 'react'
import { Trash as IconTrash } from 'react-bootstrap-icons'
import { Trans, useTranslation } from 'react-i18next'
const logger = new Logger('note-deletion')
@ -45,7 +46,7 @@ export const DeleteNoteSidebarEntry: React.FC<PropsWithChildren<SpecificSidebarE
<Fragment>
<SidebarButton
{...cypressId('sidebar.deleteNote.button')}
icon={'trash'}
icon={IconTrash}
className={className}
hide={hide}
onClick={showModal}>

5
frontend/src/components/editor-page/sidebar/sidebar-button/sidebar-button.tsx
View file

@ -3,8 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
import type { IconName } from '../../../common/fork-awesome/types'
import { UiIcon } from '../../../common/icons/ui-icon'
import { ShowIf } from '../../../common/show-if/show-if'
import type { SidebarEntryProps } from '../types'
import styles from './sidebar-button.module.scss'
@ -40,7 +39,7 @@ export const SidebarButton: React.FC<PropsWithChildren<SidebarEntryProps>> = ({
{...props}>
<ShowIf condition={!!icon}>
<span className={`sidebar-button-icon ${styles['sidebar-icon']}`}>
<ForkAwesomeIcon icon={icon as IconName} />
<UiIcon icon={icon} />
</span>
</ShowIf>
<span className={styles['sidebar-text']}>{children}</span>

3
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/aliases-sidebar-entry.tsx
View file

@ -8,6 +8,7 @@ import { AliasesModal } from '../../document-bar/aliases/aliases-modal'
import { SidebarButton } from '../sidebar-button/sidebar-button'
import type { SpecificSidebarEntryProps } from '../types'
import React, { Fragment } from 'react'
import { Tags as IconTags } from 'react-bootstrap-icons'
import { Trans, useTranslation } from 'react-i18next'
/**
@ -22,7 +23,7 @@ export const AliasesSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ class
return (
<Fragment>
<SidebarButton hide={hide} className={className} icon={'tags'} onClick={setShowModal}>
<SidebarButton hide={hide} className={className} icon={IconTags} onClick={setShowModal}>
<Trans i18nKey={'editor.modal.aliases.title'} />
</SidebarButton>
<AliasesModal show={showModal} onHide={setHideModal} />

3
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-markdown-sidebar-entry.tsx
View file

@ -9,6 +9,7 @@ import { cypressId } from '../../../../utils/cypress-attribute'
import { download } from '../../../common/download/download'
import { SidebarButton } from '../sidebar-button/sidebar-button'
import React, { useCallback } from 'react'
import { FileText as IconFileText } from 'react-bootstrap-icons'
import { Trans, useTranslation } from 'react-i18next'
import sanitize from 'sanitize-filename'
@ -24,7 +25,7 @@ export const ExportMarkdownSidebarEntry: React.FC = () => {
}, [markdownContent, t])
return (
<SidebarButton {...cypressId('menu-export-markdown')} onClick={onClick} icon={'file-text'}>
<SidebarButton {...cypressId('menu-export-markdown')} onClick={onClick} icon={IconFileText}>
<Trans i18nKey={'editor.export.markdown-file'} />
</SidebarButton>
)

17
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-menu-sidebar-menu.tsx
View file

@ -10,6 +10,11 @@ import type { SpecificSidebarMenuProps } from '../types'
import { DocumentSidebarMenuSelection } from '../types'
import { ExportMarkdownSidebarEntry } from './export-markdown-sidebar-entry'
import React, { Fragment, useCallback } from 'react'
import { ArrowLeft as IconArrowLeft } from 'react-bootstrap-icons'
import { CloudDownload as IconCloudDownload } from 'react-bootstrap-icons'
import { FileCode as IconFileCode } from 'react-bootstrap-icons'
import { Git as IconGit } from 'react-bootstrap-icons'
import { Github as IconGithub } from 'react-bootstrap-icons'
import { Trans, useTranslation } from 'react-i18next'
/**
@ -33,25 +38,25 @@ export const ExportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
const onClickHandler = useCallback(() => {
onClick(menuId)
}, [menuId, onClick])
//todo: replace git with gitlab icon
return (
<Fragment>
<SidebarButton
{...cypressId('menu-export')}
hide={hide}
icon={expand ? 'arrow-left' : 'cloud-download'}
icon={expand ? IconArrowLeft : IconCloudDownload}
className={className}
onClick={onClickHandler}>
<Trans i18nKey={'editor.documentBar.export'} />
</SidebarButton>
<SidebarMenu expand={expand}>
<SidebarButton icon={'github'}>Gist</SidebarButton>
<SidebarButton icon={'gitlab'}>Gitlab Snippet</SidebarButton>
<SidebarButton icon={IconGithub}>Gist</SidebarButton>
<SidebarButton icon={IconGit}>Gitlab Snippet</SidebarButton>
<ExportMarkdownSidebarEntry />
<SidebarButton icon={'file-code-o'}>HTML</SidebarButton>
<SidebarButton icon={'file-code-o'}>
<SidebarButton icon={IconFileCode}>HTML</SidebarButton>
<SidebarButton icon={IconFileCode}>
<Trans i18nKey='editor.export.rawHtml' />
</SidebarButton>
</SidebarMenu>

3
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/import-markdown-sidebar-entry.tsx
View file

@ -10,6 +10,7 @@ import { useChangeEditorContentCallback } from '../../change-content-context/use
import { SidebarButton } from '../sidebar-button/sidebar-button'
import { UploadInput } from '../upload-input'
import React, { Fragment, useCallback, useRef } from 'react'
import { FileText as IconFileText } from 'react-bootstrap-icons'
import { Trans, useTranslation } from 'react-i18next'
/**
@ -48,7 +49,7 @@ export const ImportMarkdownSidebarEntry: React.FC = () => {
<Fragment>
<SidebarButton
{...cypressId('menu-import-markdown-button')}
icon={'file-text-o'}
icon={IconFileText}
onClick={buttonClick}
disabled={!changeEditorContent}>
<Trans i18nKey={'editor.import.file'} />

15
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/import-menu-sidebar-menu.tsx
View file

@ -10,6 +10,11 @@ import type { SpecificSidebarMenuProps } from '../types'
import { DocumentSidebarMenuSelection } from '../types'
import { ImportMarkdownSidebarEntry } from './import-markdown-sidebar-entry'
import React, { Fragment, useCallback } from 'react'
import { ArrowLeft as IconArrowLeft } from 'react-bootstrap-icons'
import { Clipboard as IconClipboard } from 'react-bootstrap-icons'
import { CloudUpload as IconCloudUpload } from 'react-bootstrap-icons'
import { Git as IconGit } from 'react-bootstrap-icons'
import { Github as IconGithub } from 'react-bootstrap-icons'
import { Trans, useTranslation } from 'react-i18next'
/**
@ -33,21 +38,21 @@ export const ImportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
const onClickHandler = useCallback(() => {
onClick(menuId)
}, [menuId, onClick])
//todo: replace git with gitlab
return (
<Fragment>
<SidebarButton
{...cypressId('menu-import')}
hide={hide}
icon={expand ? 'arrow-left' : 'cloud-upload'}
icon={expand ? IconArrowLeft : IconCloudUpload}
className={className}
onClick={onClickHandler}>
<Trans i18nKey={'editor.documentBar.import'} />
</SidebarButton>
<SidebarMenu expand={expand}>
<SidebarButton icon={'github'}>Gist</SidebarButton>
<SidebarButton icon={'gitlab'}>Gitlab Snippet</SidebarButton>
<SidebarButton icon={'clipboard'}>
<SidebarButton icon={IconGithub}>Gist</SidebarButton>
<SidebarButton icon={IconGit}>Gitlab Snippet</SidebarButton>
<SidebarButton icon={IconClipboard}>
<Trans i18nKey={'editor.import.clipboard'} />
</SidebarButton>
<ImportMarkdownSidebarEntry />

3
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-entry.tsx
View file

@ -9,6 +9,7 @@ import { NoteInfoModal } from '../../document-bar/note-info/note-info-modal'
import { SidebarButton } from '../sidebar-button/sidebar-button'
import type { SpecificSidebarEntryProps } from '../types'
import React, { Fragment } from 'react'
import { GraphUp as IconGraphUp } from 'react-bootstrap-icons'
import { Trans, useTranslation } from 'react-i18next'
/**
@ -26,7 +27,7 @@ export const NoteInfoSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ clas
<SidebarButton
hide={hide}
className={className}
icon={'line-chart'}
icon={IconGraphUp}
onClick={showModal}
{...cypressId('sidebar-btn-document-info')}>
<Trans i18nKey={'editor.modal.documentInfo.title'} />

3
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry.tsx
View file

@ -8,6 +8,7 @@ import { PermissionModal } from '../../document-bar/permissions/permission-modal
import { SidebarButton } from '../sidebar-button/sidebar-button'
import type { SpecificSidebarEntryProps } from '../types'
import React, { Fragment } from 'react'
import { Lock as IconLock } from 'react-bootstrap-icons'
import { Trans, useTranslation } from 'react-i18next'
/**
@ -22,7 +23,7 @@ export const PermissionsSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ c
return (
<Fragment>
<SidebarButton hide={hide} className={className} icon={'lock'} onClick={showModal}>
<SidebarButton hide={hide} className={className} icon={IconLock} onClick={showModal}>
<Trans i18nKey={'editor.modal.permissions.title'} />
</SidebarButton>
<PermissionModal show={modalVisibility} onHide={closeModal} />

3
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/pin-note-sidebar-entry.tsx
View file

@ -10,6 +10,7 @@ import { SidebarButton } from '../sidebar-button/sidebar-button'
import type { SpecificSidebarEntryProps } from '../types'
import styles from './pin-note-sidebar-entry.module.css'
import React, { useCallback, useMemo } from 'react'
import { Pin as IconPin } from 'react-bootstrap-icons'
import { Trans, useTranslation } from 'react-i18next'
/**
@ -38,7 +39,7 @@ export const PinNoteSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ class
return (
<SidebarButton
icon={'thumb-tack'}
icon={IconPin}
hide={hide}
onClick={onPinClicked}
className={`${className ?? ''} ${isPinned ? styles['highlighted'] : ''}`}>

3
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/revision-sidebar-entry.tsx
View file

@ -8,6 +8,7 @@ import { RevisionModal } from '../../document-bar/revisions/revision-modal'
import { SidebarButton } from '../sidebar-button/sidebar-button'
import type { SpecificSidebarEntryProps } from '../types'
import React, { Fragment } from 'react'
import { ClockHistory as IconClockHistory } from 'react-bootstrap-icons'
import { Trans } from 'react-i18next'
/**
@ -21,7 +22,7 @@ export const RevisionSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ clas
return (
<Fragment>
<SidebarButton hide={hide} className={className} icon={'history'} onClick={showModal}>
<SidebarButton hide={hide} className={className} icon={IconClockHistory} onClick={showModal}>
<Trans i18nKey={'editor.modal.revision.title'} />
</SidebarButton>
<RevisionModal show={modalVisibility} onHide={closeModal} />

3
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/share-sidebar-entry.tsx
View file

@ -8,6 +8,7 @@ import { ShareModal } from '../../document-bar/share/share-modal'
import { SidebarButton } from '../sidebar-button/sidebar-button'
import type { SpecificSidebarEntryProps } from '../types'
import React, { Fragment } from 'react'
import { Share as IconShare } from 'react-bootstrap-icons'
import { Trans, useTranslation } from 'react-i18next'
/**
@ -22,7 +23,7 @@ export const ShareSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ classNa
return (
<Fragment>
<SidebarButton hide={hide} className={className} icon={'share'} onClick={showModal}>
<SidebarButton hide={hide} className={className} icon={IconShare} onClick={showModal}>
<Trans i18nKey={'editor.modal.shareLink.title'} />
</SidebarButton>
<ShareModal show={modalVisibility} onHide={closeModal} />

4
frontend/src/components/editor-page/sidebar/types.ts
View file

@ -4,8 +4,8 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { PropsWithDataCypressId } from '../../../utils/cypress-attribute'
import type { IconName } from '../../common/fork-awesome/types'
import type { RefObject } from 'react'
import type { Icon } from 'react-bootstrap-icons'
export interface SpecificSidebarEntryProps {
className?: string
@ -14,7 +14,7 @@ export interface SpecificSidebarEntryProps {
}
export interface SidebarEntryProps extends PropsWithDataCypressId {
icon?: IconName
icon?: Icon
buttonRef?: RefObject<HTMLButtonElement>
hide?: boolean
className?: string

4
frontend/src/components/editor-page/sidebar/users-online-sidebar-menu/users-online-sidebar-menu.tsx
View file

@ -11,6 +11,8 @@ import { DocumentSidebarMenuSelection } from '../types'
import { UserLine } from '../user-line/user-line'
import styles from './online-counter.module.scss'
import React, { Fragment, useCallback, useEffect, useMemo, useRef } from 'react'
import { ArrowLeft as IconArrowLeft } from 'react-bootstrap-icons'
import { People as IconPeople } from 'react-bootstrap-icons'
import { Trans, useTranslation } from 'react-i18next'
/**
@ -68,7 +70,7 @@ export const UsersOnlineSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
hide={hide}
buttonRef={buttonRef}
onClick={onClickHandler}
icon={expand ? 'arrow-left' : 'users'}
icon={expand ? IconArrowLeft : IconPeople}
className={`${styles['online-entry']} ${className ?? ''}`}>
<Trans i18nKey={'editor.onlineStatus.online'} />
</SidebarButton>

132
frontend/src/components/editor-page/splitter/__snapshots__/splitter.test.tsx.snap
View file

@ -29,24 +29,18 @@ exports[`Splitter resize can change size with mouse 1`] = `
class="btn btn-light"
type="button"
>
<i
class="fa fa-arrow-left "
/>
BootstrapIconMock_ArrowLeft
</button>
<span
class="grabber"
>
<i
class="fa fa-arrows-h "
/>
BootstrapIconMock_ArrowLeftRight
</span>
<button
class="btn btn-light"
type="button"
>
<i
class="fa fa-arrow-right "
/>
BootstrapIconMock_ArrowRight
</button>
</div>
</div>
@ -94,24 +88,18 @@ exports[`Splitter resize can change size with mouse 2`] = `
class="btn btn-light"
type="button"
>
<i
class="fa fa-arrow-left "
/>
BootstrapIconMock_ArrowLeft
</button>
<span
class="grabber"
>
<i
class="fa fa-arrows-h "
/>
BootstrapIconMock_ArrowLeftRight
</span>
<button
class="btn btn-light"
type="button"
>
<i
class="fa fa-arrow-right "
/>
BootstrapIconMock_ArrowRight
</button>
</div>
</div>
@ -159,24 +147,18 @@ exports[`Splitter resize can change size with mouse 3`] = `
class="btn btn-light"
type="button"
>
<i
class="fa fa-arrow-left "
/>
BootstrapIconMock_ArrowLeft
</button>
<span
class="grabber"
>
<i
class="fa fa-arrows-h "
/>
BootstrapIconMock_ArrowLeftRight
</span>
<button
class="btn btn-light"
type="button"
>
<i
class="fa fa-arrow-right "
/>
BootstrapIconMock_ArrowRight
</button>
</div>
</div>
@ -224,24 +206,18 @@ exports[`Splitter resize can change size with mouse 4`] = `
class="btn btn-light"
type="button"
>
<i
class="fa fa-arrow-left "
/>
BootstrapIconMock_ArrowLeft
</button>
<span
class="grabber"
>
<i
class="fa fa-arrows-h "
/>
BootstrapIconMock_ArrowLeftRight
</span>
<button
class="btn btn-light"
type="button"
>
<i
class="fa fa-arrow-right "
/>
BootstrapIconMock_ArrowRight
</button>
</div>
</div>
@ -289,24 +265,18 @@ exports[`Splitter resize can change size with touch 1`] = `
class="btn btn-light"
type="button"
>
<i
class="fa fa-arrow-left "
/>
BootstrapIconMock_ArrowLeft
</button>
<span
class="grabber"
>
<i
class="fa fa-arrows-h "
/>
BootstrapIconMock_ArrowLeftRight
</span>
<button
class="btn btn-light"
type="button"
>
<i
class="fa fa-arrow-right "
/>
BootstrapIconMock_ArrowRight
</button>
</div>
</div>
@ -354,24 +324,18 @@ exports[`Splitter resize can change size with touch 2`] = `
class="btn btn-light"
type="button"
>
<i
class="fa fa-arrow-left "
/>
BootstrapIconMock_ArrowLeft
</button>
<span
class="grabber"
>
<i
class="fa fa-arrows-h "
/>
BootstrapIconMock_ArrowLeftRight
</span>
<button
class="btn btn-light"
type="button"
>
<i
class="fa fa-arrow-right "
/>
BootstrapIconMock_ArrowRight
</button>
</div>
</div>
@ -419,24 +383,18 @@ exports[`Splitter resize can change size with touch 3`] = `
class="btn btn-light"
type="button"
>
<i
class="fa fa-arrow-left "
/>
BootstrapIconMock_ArrowLeft
</button>
<span
class="grabber"
>
<i
class="fa fa-arrows-h "
/>
BootstrapIconMock_ArrowLeftRight
</span>
<button
class="btn btn-light"
type="button"
>
<i
class="fa fa-arrow-right "
/>
BootstrapIconMock_ArrowRight
</button>
</div>
</div>
@ -484,24 +442,18 @@ exports[`Splitter resize can change size with touch 4`] = `
class="btn btn-light"
type="button"
>
<i
class="fa fa-arrow-left "
/>
BootstrapIconMock_ArrowLeft
</button>
<span
class="grabber"
>
<i
class="fa fa-arrows-h "
/>
BootstrapIconMock_ArrowLeftRight
</span>
<button
class="btn btn-light"
type="button"
>
<i
class="fa fa-arrow-right "
/>
BootstrapIconMock_ArrowRight
</button>
</div>
</div>
@ -549,24 +501,18 @@ exports[`Splitter resize can react to shortcuts 1`] = `
class="btn btn-secondary"
type="button"
>
<i
class="fa fa-arrow-left "
/>
BootstrapIconMock_ArrowLeft
</button>
<span
class="grabber"
>
<i
class="fa fa-arrows-h "
/>
BootstrapIconMock_ArrowLeftRight
</span>
<button
class="btn btn-light"
type="button"
>
<i
class="fa fa-arrow-right "
/>
BootstrapIconMock_ArrowRight
</button>
</div>
</div>
@ -614,24 +560,18 @@ exports[`Splitter resize can react to shortcuts 2`] = `
class="btn btn-light"
type="button"
>
<i
class="fa fa-arrow-left "
/>
BootstrapIconMock_ArrowLeft
</button>
<span
class="grabber"
>
<i
class="fa fa-arrows-h "
/>
BootstrapIconMock_ArrowLeftRight
</span>
<button
class="btn btn-secondary"
type="button"
>
<i
class="fa fa-arrow-right "
/>
BootstrapIconMock_ArrowRight
</button>
</div>
</div>
@ -679,24 +619,18 @@ exports[`Splitter resize can react to shortcuts 3`] = `
class="btn btn-light"
type="button"
>
<i
class="fa fa-arrow-left "
/>
BootstrapIconMock_ArrowLeft
</button>
<span
class="grabber"
>
<i
class="fa fa-arrows-h "
/>
BootstrapIconMock_ArrowLeftRight
</span>
<button
class="btn btn-light"
type="button"
>
<i
class="fa fa-arrow-right "
/>
BootstrapIconMock_ArrowRight
</button>
</div>
</div>

11
frontend/src/components/editor-page/splitter/split-divider/split-divider.tsx
View file

@ -4,10 +4,13 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { testId } from '../../../../utils/test-id'
import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
import { UiIcon } from '../../../common/icons/ui-icon'
import styles from './split-divider.module.scss'
import React from 'react'
import { Button } from 'react-bootstrap'
import { ArrowLeftRight as IconArrowLeftRight } from 'react-bootstrap-icons'
import { ArrowLeft as IconArrowLeft } from 'react-bootstrap-icons'
import { ArrowRight as IconArrowRight } from 'react-bootstrap-icons'
export enum DividerButtonsShift {
SHIFT_TO_LEFT = 'shift-left',
@ -53,13 +56,13 @@ export const SplitDivider: React.FC<SplitDividerProps> = ({
<div className={`bg-light ${styles['middle']} ${forceOpen ? styles['open'] : ''} ${shiftClass}`}>
<div className={styles['buttons']}>
<Button variant={focusLeft ? 'secondary' : 'light'} onClick={onLeftButtonClick}>
<ForkAwesomeIcon icon={'arrow-left'} />
<UiIcon icon={IconArrowLeft} />
</Button>
<span onMouseDown={onGrab} onTouchStart={onGrab} className={styles['grabber']}>
<ForkAwesomeIcon icon={'arrows-h'} />
<UiIcon icon={IconArrowLeftRight} />
</span>
<Button variant={focusRight ? 'secondary' : 'light'} onClick={onRightButtonClick}>
<ForkAwesomeIcon icon={'arrow-right'} />
<UiIcon icon={IconArrowRight} />
</Button>
</div>
</div>