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

Adds an info banner to the app (#190)

Browse source 
* 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:
Philip Molares 2020-06-15 21:54:20 +02:00 • committed by GitHub
parent 75aa8b38af
commit e014eb36b5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 144 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/components/editor/editor.tsx
View file

@ -1,18 +1,15 @@
import React, { useEffect, useState } from 'react'
import React, { Fragment, useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import useMedia from 'use-media'
import { ApplicationState } from '../../redux'
import { setEditorModeConfig } from '../../redux/editor/methods'
import { Splitter } from '../common/splitter/splitter'
import { InfoBanner } from '../landing/layout/info-banner'
import { EditorWindow } from './editor-window/editor-window'
import { MarkdownPreview } from './markdown-preview/markdown-preview'
import { EditorMode } from './task-bar/editor-view-mode'
import { TaskBar } from './task-bar/task-bar'
interface RouteParameters {
id: string
}
const Editor: React.FC = () => {
const editorMode: EditorMode = useSelector((state: ApplicationState) => state.editorConfig.editorMode)
const isWide = useMedia({ minWidth: 576 })
@ -29,15 +26,18 @@ const Editor: React.FC = () => {
}, [editorMode, firstDraw, isWide])
return (
<div className={'d-flex flex-column vh-100'}>
<TaskBar/>
<Splitter
showLeft={editorMode === EditorMode.EDITOR || editorMode === EditorMode.BOTH}
left={<EditorWindow/>}
showRight={editorMode === EditorMode.PREVIEW || (editorMode === EditorMode.BOTH)}
right={<MarkdownPreview/>}
containerClassName={'overflow-hidden'}/>
</div>
<Fragment>
<InfoBanner/>
<div className={'d-flex flex-column vh-100'}>
<TaskBar/>
<Splitter
showLeft={editorMode === EditorMode.EDITOR || editorMode === EditorMode.BOTH}
left={<EditorWindow/>}
showRight={editorMode === EditorMode.PREVIEW || (editorMode === EditorMode.BOTH)}
right={<MarkdownPreview/>}
containerClassName={'overflow-hidden'}/>
</div>
</Fragment>
)
}