mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-20 10:15:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: deduplicate different buttons

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-03-08 20:21:19 +01:00
parent 160f0f8297
commit aa6bd2a884
12 changed files with 44 additions and 194 deletions
Download patch file Download diff file Expand all files Collapse all files

26
frontend/src/components/landing-layout/navigation/header-bar/header-bar.tsx
View file

@ -5,13 +5,12 @@
*/
import { useApplicationState } from '../../../../hooks/common/use-application-state'
import { cypressId } from '../../../../utils/cypress-attribute'
import { NewNoteButton } from '../../../common/new-note-button/new-note-button'
import { SettingsButton } from '../../../layout/settings-dialog/settings-button'
import { NewGuestNoteButton } from '../new-guest-note-button'
import { NewUserNoteButton } from '../new-user-note-button'
import { SignInButton } from '../sign-in-button'
import { UserDropdown } from '../user-dropdown'
import { HeaderNavLink } from './header-nav-link'
import React, { Fragment } from 'react'
import React from 'react'
import { Navbar } from 'react-bootstrap'
import { Trans, useTranslation } from 'react-i18next'
@ -32,23 +31,10 @@ const HeaderBar: React.FC = () => {
<Trans i18nKey='landing.navigation.history' />
</HeaderNavLink>
</div>
<div className='d-inline-flex'>
<SettingsButton className={'p-1 mx-2'} variant={'outline-light'} />
{!userExists ? (
<Fragment>
<span className={'mx-1 d-flex'}>
<NewGuestNoteButton />
</span>
<SignInButton size='sm' />
</Fragment>
) : (
<Fragment>
<span className={'mx-1 d-flex'}>
<NewUserNoteButton />
</span>
<UserDropdown />
</Fragment>
)}
<div className='d-inline-flex gap-2'>
<SettingsButton variant={'outline-light'} />
<NewNoteButton />
{!userExists ? <SignInButton size='sm' /> : <UserDropdown />}
</div>
</Navbar>
)

34
frontend/src/components/landing-layout/navigation/new-guest-note-button.tsx
View file

@ -1,34 +0,0 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { cypressId } from '../../../utils/cypress-attribute'
import { UiIcon } from '../../common/icons/ui-icon'
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'
/**
* Renders a button to create a new note as a guest.
*/
export const NewGuestNoteButton: React.FC = () => {
const { t } = useTranslation()
return (
<Link href={'/new'} passHref={true}>
<Button
title={t('landing.navigation.newGuestNote') ?? undefined}
variant='primary'
size='sm'
className='d-inline-flex align-items-center'
{...cypressId('new-guest-note-button')}>
<UiIcon icon={IconPlus} className='mx-1' size={2} />
<span>
<Trans i18nKey='landing.navigation.newGuestNote' />
</span>
</Button>
</Link>
)
}

34
frontend/src/components/landing-layout/navigation/new-user-note-button.tsx
View file

@ -1,34 +0,0 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { cypressId } from '../../../utils/cypress-attribute'
import { UiIcon } from '../../common/icons/ui-icon'
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'
/**
* Renders a button to create a new note as a logged in user.
*/
export const NewUserNoteButton: React.FC = () => {
const { t } = useTranslation()
return (
<Link href={'/new'} passHref={true}>
<Button
title={t('landing.navigation.newNote') ?? undefined}
variant='primary'
size='sm'
className='d-inline-flex align-items-center'
{...cypressId('new-note-button')}>
<UiIcon icon={IconPlus} className='mx-1' size={2} />
<span>
<Trans i18nKey='landing.navigation.newNote' />
</span>
</Button>
</Link>
)
}