mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-22 11:15:23 -04:00
Adds an info banner to the app (#190)
* added info-banner component to show the banner.text, we got from the backend config. This banner is shown on top of the landing page (intro, history, login/signup and profile) and also on top of the editor and links to `/n/banner` * added banner to backendConfig Redux state * added BannerState to the ApplicationState with that the showing of the banner is globally controlled, the banner text is given to the banner component and the timestamp to acknowledge a banner was read by the user * the timestamp of a dismissed note is saved in the browsers localStorage to determine in the future if the banner should be shown Signed-off-by: Philip Molares <philip.molares@udo.edu> Co-authored-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
parent
75aa8b38af
commit
e014eb36b5
13 changed files with 144 additions and 15 deletions
34
src/components/landing/layout/info-banner.tsx
Normal file
34
src/components/landing/layout/info-banner.tsx
Normal file
|
@ -0,0 +1,34 @@
|
|||
import React from 'react'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { ApplicationState } from '../../../redux'
|
||||
import { Alert, Button } from 'react-bootstrap'
|
||||
import { setBanner } from '../../../redux/banner/methods'
|
||||
import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
|
||||
import { ShowIf } from '../../common/show-if/show-if'
|
||||
|
||||
export const InfoBanner: React.FC = () => {
|
||||
const bannerState = useSelector((state: ApplicationState) => state.banner)
|
||||
|
||||
const dismissBanner = () => {
|
||||
setBanner({ ...bannerState, show: false })
|
||||
window.localStorage.setItem('bannerTimeStamp', bannerState.timestamp)
|
||||
}
|
||||
|
||||
return (
|
||||
<ShowIf condition={bannerState.show}>
|
||||
<Alert variant='primary' dir='auto' className='mb-0 text-center d-flex flex-row justify-content-center'>
|
||||
<Link to='/s/banner' className='flex-grow-1 align-self-center'>
|
||||
{bannerState.text}
|
||||
</Link>
|
||||
<Button
|
||||
variant='outline-primary'
|
||||
size='sm'
|
||||
className='mx-2'
|
||||
onClick={dismissBanner}>
|
||||
<ForkAwesomeIcon icon='times'/>
|
||||
</Button>
|
||||
</Alert>
|
||||
</ShowIf>
|
||||
)
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue