github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-25 11:16:31 -05:00
Code Issues Projects Releases Packages Wiki Activity

feat(frontend): if user can't write toolbar is being removed

Browse source 
Signed-off-by: Philip Molares <philip.molares@udo.edu>
This commit is contained in:
Philip Molares 2023-03-27 11:47:25 +02:00 committed by Tilman Vatteroth
parent c2f41118b6
commit 7636480d8a
1 changed files with 40 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
frontend/src/components/editor-page/editor-pane/tool-bar/tool-bar.tsx
View file

@ -1,8 +1,10 @@
/*
* 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 { useMayEdit } from '../../../../hooks/common/use-may-edit'
import { ShowIf } from '../../../common/show-if/show-if'
import { BoldButton } from './buttons/bold-button'
import { CheckListButton } from './buttons/check-list-button'
import { CodeFenceButton } from './buttons/code-fence-button'
@ -33,39 +35,43 @@ const EmojiPickerButton = React.lazy(() => import('./emoji-picker/emoji-picker-b
* Renders the toolbar of the editor with buttons for formatting or inserting text.
*/
export const ToolBar: React.FC = () => {
const mayEdit = useMayEdit()
return (
<ButtonToolbar className={`bg-light ${styles.toolbar}`}>
<ButtonGroup className={'mx-1 flex-wrap'}>
<BoldButton />
<ItalicButton />
<UnderlineButton />
<StrikethroughButton />
<SubscriptButton />
<SuperscriptButton />
<HighlightButton />
</ButtonGroup>
<ButtonGroup className={'mx-1 flex-wrap'}>
<HeaderLevelButton />
<CodeFenceButton />
<QuotesButton />
<UnorderedListButton />
<OrderedListButton />
<CheckListButton />
</ButtonGroup>
<ButtonGroup className={'mx-1 flex-wrap'}>
<LinkButton />
<ImageLinkButton />
<UploadImageButton />
</ButtonGroup>
<ButtonGroup className={'mx-1 flex-wrap'}>
<TablePickerButton />
<HorizontalLineButton />
<CollapsibleBlockButton />
<CommentButton />
<Suspense fallback={<Fragment />}>
<EmojiPickerButton />
</Suspense>
</ButtonGroup>
</ButtonToolbar>
<ShowIf condition={mayEdit}>
<ButtonToolbar className={`bg-light ${styles.toolbar}`}>
<ButtonGroup className={'mx-1 flex-wrap'}>
<BoldButton />
<ItalicButton />
<UnderlineButton />
<StrikethroughButton />
<SubscriptButton />
<SuperscriptButton />
<HighlightButton />
</ButtonGroup>
<ButtonGroup className={'mx-1 flex-wrap'}>
<HeaderLevelButton />
<CodeFenceButton />
<QuotesButton />
<UnorderedListButton />
<OrderedListButton />
<CheckListButton />
</ButtonGroup>
<ButtonGroup className={'mx-1 flex-wrap'}>
<LinkButton />
<ImageLinkButton />
<UploadImageButton />
</ButtonGroup>
<ButtonGroup className={'mx-1 flex-wrap'}>
<TablePickerButton />
<HorizontalLineButton />
<CollapsibleBlockButton />
<CommentButton />
<Suspense fallback={<Fragment />}>
<EmojiPickerButton />
</Suspense>
</ButtonGroup>
</ButtonToolbar>
</ShowIf>
)
}