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(editor): re-add editor mode buttons (edit/both/view)

Browse source 
Signed-off-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
Erik Michelson 2024-08-09 16:59:27 +02:00 • committed by Philip Molares
parent f30f0d8e51
commit f9b6f6851b
11 changed files with 139 additions and 393 deletions
Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/app/(editor)/@appBar/n/[noteId]/editor-app-bar.tsx
View file

@ -10,6 +10,7 @@ import { NoteTitleElement } from '../../../../../components/layout/app-bar/app-b
import { BaseAppBar } from '../../../../../components/layout/app-bar/base-app-bar'
import { useApplicationState } from '../../../../../hooks/common/use-application-state'
import React from 'react'
import { EditorModeExtendedAppBar } from './editor-mode-extended-app-bar'
/**
* Renders the EditorAppBar that extends the {@link BaseAppBar} with the note title or realtime connection alert.
@ -22,15 +23,15 @@ export const EditorAppBar: React.FC = () => {
return <BaseAppBar />
} else if (isSynced) {
return (
<BaseAppBar>
<EditorModeExtendedAppBar>
<NoteTitleElement />
</BaseAppBar>
</EditorModeExtendedAppBar>
)
} else {
return (
<BaseAppBar>
<EditorModeExtendedAppBar>
<RealtimeConnectionAlert />
</BaseAppBar>
</EditorModeExtendedAppBar>
)
}
}

68
frontend/src/app/(editor)/@appBar/n/[noteId]/editor-mode-extended-app-bar.tsx Normal file
View file

@ -0,0 +1,68 @@
/*
* SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { PropsWithChildren } from 'react'
import { useCallback } from 'react'
import React, { Fragment } from 'react'
import { BaseAppBar } from '../../../../../components/layout/app-bar/base-app-bar'
import { ButtonGroup } from 'react-bootstrap'
import { Eye as IconEye, FileText as IconFileText, WindowSplit as IconWindowSplit } from 'react-bootstrap-icons'
import { IconButton } from '../../../../../components/common/icon-button/icon-button'
import { setEditorSplitPosition } from '../../../../../redux/editor-config/methods'
import { useApplicationState } from '../../../../../hooks/common/use-application-state'
import { useTranslatedText } from '../../../../../hooks/common/use-translated-text'
/**
* Extended AppBar for the editor mode that includes buttons to switch between the different editor modes
*/
export const EditorModeExtendedAppBar: React.FC<PropsWithChildren> = ({ children }) => {
const splitValue = useApplicationState((state) => state.editorConfig.splitPosition)
const onClickEditorOnly = useCallback(() => {
setEditorSplitPosition(100)
}, [])
const onClickBothViews = useCallback(() => {
setEditorSplitPosition(50)
}, [])
const onClickViewOnly = useCallback(() => {
setEditorSplitPosition(0)
}, [])
const titleEditorOnly = useTranslatedText('editor.viewMode.edit')
const titleBothViews = useTranslatedText('editor.viewMode.both')
const titleViewOnly = useTranslatedText('editor.viewMode.view')
return (
<BaseAppBar
additionalContentLeft={
<Fragment>
<ButtonGroup>
<IconButton
icon={IconFileText}
title={titleEditorOnly}
onClick={onClickEditorOnly}
variant={splitValue === 100 ? 'secondary' : 'outline-secondary'}
/>
<IconButton
icon={IconWindowSplit}
title={titleBothViews}
onClick={onClickBothViews}
variant={splitValue > 0 && splitValue < 100 ? 'secondary' : 'outline-secondary'}
/>
<IconButton
icon={IconEye}
title={titleViewOnly}
onClick={onClickViewOnly}
variant={splitValue === 0 ? 'secondary' : 'outline-secondary'}
/>
</ButtonGroup>
</Fragment>
}>
{children}
</BaseAppBar>
)
}