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

Minor fixes (#911)

Browse source 
* Replace full links

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

* Use dark mode hook

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

* Add overflow for graphviz and abc

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

* Cap max height of toc overlay

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

* Remove extension from css import

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

* Fix hook

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Tilman Vatteroth 2021-01-03 00:19:10 +01:00 • committed by GitHub
parent 528e67e11e
commit bf42b9c460
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 39 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/markdown-renderer/replace-components/abc/abc-frame.tsx
View file

@ -23,5 +23,5 @@ export const AbcFrame: React.FC<AbcFrameProps> = ({ code }) => {
}).catch(() => { console.error('error while loading abcjs') })
}, [code])
return <div ref={container} className={'bg-white text-center'}/>
return <div ref={container} className={'bg-white text-center overflow-x-auto'}/>
}

6
src/components/markdown-renderer/replace-components/flow/flowchart/flowchart.tsx
View file

@ -7,8 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
import React, { useEffect, useRef, useState } from 'react'
import { Alert } from 'react-bootstrap'
import { Trans, useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux'
import { ApplicationState } from '../../../../../redux'
import { useIsDarkModeActivated } from '../../../../../hooks/common/use-is-dark-mode-activated'
export interface FlowChartProps {
code: string
@ -17,8 +16,7 @@ export interface FlowChartProps {
export const FlowChart: React.FC<FlowChartProps> = ({ code }) => {
const diagramRef = useRef<HTMLDivElement>(null)
const [error, setError] = useState(false)
const darkModeActivated = useSelector((state: ApplicationState) => state.darkMode.darkMode)
const darkModeActivated = useIsDarkModeActivated()
useTranslation()

2
src/components/markdown-renderer/replace-components/graphviz/graphviz-frame.tsx
View file

@ -55,7 +55,7 @@ export const GraphvizFrame: React.FC<GraphvizFrameProps> = ({ code }) => {
<ShowIf condition={!!error}>
<Alert variant={'warning'}>{error}</Alert>
</ShowIf>
<div className={'text-center'} ref={container} />
<div className={'text-center overflow-x-auto'} ref={container} />
</Fragment>
}

6
src/components/markdown-renderer/replace-components/image/image-frame.tsx
View file

@ -8,7 +8,7 @@ import React, { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import { getProxiedUrl } from '../../../../api/media'
import { ApplicationState } from '../../../../redux'
import { Frame } from './frame'
import { LightboxedImageFrame } from './lightboxedImageFrame'
export const ImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({ src, title, alt, ...props }) => {
const [imageUrl, setImageUrl] = useState('')
@ -25,11 +25,11 @@ export const ImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = (
if (imageProxyEnabled) {
return (
<Frame src={imageUrl} title={title ?? alt ?? ''} alt={alt} {...props}/>
<LightboxedImageFrame src={imageUrl} title={title ?? alt ?? ''} alt={alt} {...props}/>
)
}
return (
<Frame src={src ?? ''} title={title ?? alt ?? ''} alt={alt} {...props}/>
<LightboxedImageFrame src={src ?? ''} title={title ?? alt ?? ''} alt={alt} {...props}/>
)
}

5
src/components/markdown-renderer/replace-components/image/frame.tsx → src/components/markdown-renderer/replace-components/image/lightboxedImageFrame.tsx
View file

@ -8,7 +8,7 @@ import React, { Fragment, useState } from 'react'
import { Modal } from 'react-bootstrap'
import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
export const Frame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({ alt, ...props }) => {
export const LightboxedImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({ alt, ...props }) => {
const [showFullscreenImage, setShowFullscreenImage] = useState(false)
return (
@ -20,8 +20,7 @@ export const Frame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({ alt
dialogClassName={'text-dark'}
show={showFullscreenImage}
onHide={() => setShowFullscreenImage(false)}
size={'xl'}
>
size={'xl'}>
<Modal.Header closeButton={true}>
<Modal.Title className={'h6'}>
<ForkAwesomeIcon icon={'picture-o'}/>