github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-25 19:26: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 * 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 { BoldButton } from './buttons/bold-button'
import { CheckListButton } from './buttons/check-list-button' import { CheckListButton } from './buttons/check-list-button'
import { CodeFenceButton } from './buttons/code-fence-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. * Renders the toolbar of the editor with buttons for formatting or inserting text.
*/ */
export const ToolBar: React.FC = () => { export const ToolBar: React.FC = () => {
const mayEdit = useMayEdit()
return ( return (
<ButtonToolbar className={`bg-light ${styles.toolbar}`}> <ShowIf condition={mayEdit}>
<ButtonGroup className={'mx-1 flex-wrap'}> <ButtonToolbar className={`bg-light ${styles.toolbar}`}>
<BoldButton /> <ButtonGroup className={'mx-1 flex-wrap'}>
<ItalicButton /> <BoldButton />
<UnderlineButton /> <ItalicButton />
<StrikethroughButton /> <UnderlineButton />
<SubscriptButton /> <StrikethroughButton />
<SuperscriptButton /> <SubscriptButton />
<HighlightButton /> <SuperscriptButton />
</ButtonGroup> <HighlightButton />
<ButtonGroup className={'mx-1 flex-wrap'}> </ButtonGroup>
<HeaderLevelButton /> <ButtonGroup className={'mx-1 flex-wrap'}>
<CodeFenceButton /> <HeaderLevelButton />
<QuotesButton /> <CodeFenceButton />
<UnorderedListButton /> <QuotesButton />
<OrderedListButton /> <UnorderedListButton />
<CheckListButton /> <OrderedListButton />
</ButtonGroup> <CheckListButton />
<ButtonGroup className={'mx-1 flex-wrap'}> </ButtonGroup>
<LinkButton /> <ButtonGroup className={'mx-1 flex-wrap'}>
<ImageLinkButton /> <LinkButton />
<UploadImageButton /> <ImageLinkButton />
</ButtonGroup> <UploadImageButton />
<ButtonGroup className={'mx-1 flex-wrap'}> </ButtonGroup>
<TablePickerButton /> <ButtonGroup className={'mx-1 flex-wrap'}>
<HorizontalLineButton /> <TablePickerButton />
<CollapsibleBlockButton /> <HorizontalLineButton />
<CommentButton /> <CollapsibleBlockButton />
<Suspense fallback={<Fragment />}> <CommentButton />
<EmojiPickerButton /> <Suspense fallback={<Fragment />}>
</Suspense> <EmojiPickerButton />
</ButtonGroup> </Suspense>
</ButtonToolbar> </ButtonGroup>
</ButtonToolbar>
</ShowIf>
) )
} }