mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-09-19 15:38:48 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

fix: use html entity for branding separation dash

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-05-10 16:31:03 +02:00
parent 3feaa8d6a5
commit 40e9478c67
5 changed files with 43 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/components/common/custom-branding/custom-branding.tsx
View file

@ -3,8 +3,8 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useFrontendConfig } from '../frontend-config-context/use-frontend-config'
import styles from './branding.module.scss'
import { useBrandingDetails } from './use-branding-details'
import React from 'react'
export interface BrandingProps {
@ -19,9 +19,9 @@ export interface BrandingProps {
* @param delimiter If the delimiter between the HedgeDoc logo and the branding should be shown.
*/
export const CustomBranding: React.FC<BrandingProps> = ({ inline = false }) => {
const branding = useFrontendConfig().branding
const branding = useBrandingDetails()
if (!branding.name && !branding.logo) {
if (!branding) {
return null
} else if (branding.logo) {
return (

21
frontend/src/components/common/custom-branding/use-branding-details.ts Normal file
View file

@ -0,0 +1,21 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { BrandingConfig } from '../../../api/config/types'
import { useFrontendConfig } from '../frontend-config-context/use-frontend-config'
import { useMemo } from 'react'
/**
* Extracts the branding from the config.
*
* @return the branding configuration or null if no branding has been configured
*/
export const useBrandingDetails = (): null | BrandingConfig => {
const branding = useFrontendConfig().branding
return useMemo(() => {
return !branding.name && !branding.logo ? null : branding
}, [branding])
}

16
frontend/src/components/editor-page/app-bar/branding-separator-dash.tsx Normal file
View file

@ -0,0 +1,16 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useBrandingDetails } from '../../common/custom-branding/use-branding-details'
import React from 'react'
/**
* Renders a long dash if branding is configured.
*/
export const BrandingSeparatorDash: React.FC = () => {
const branding = useBrandingDetails()
return !branding ? null : <span className={'mx-1'}>&mdash;</span>
}

13
frontend/src/components/editor-page/app-bar/branding.module.scss
View file

@ -1,13 +0,0 @@
/*!
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
.branding-separator:has(*) {
&::before {
content: '\2014';
margin-left: 0.25em;
margin-right: 0.25em;
}
}

7
frontend/src/components/editor-page/app-bar/navbar-branding.tsx
View file

@ -10,7 +10,7 @@ import {
HedgeDocLogoType,
HedgeDocLogoWithText
} from '../../common/hedge-doc-logo/hedge-doc-logo-with-text'
import styles from './branding.module.scss'
import { BrandingSeparatorDash } from './branding-separator-dash'
import Link from 'next/link'
import React from 'react'
import { Navbar } from 'react-bootstrap'
@ -28,9 +28,8 @@ export const NavbarBranding: React.FC = () => {
logoType={darkModeActivated ? HedgeDocLogoType.WB_HORIZONTAL : HedgeDocLogoType.BW_HORIZONTAL}
size={HedgeDocLogoSize.SMALL}
/>
<span className={styles['branding-separator']}>
<CustomBranding inline={true} />
</span>
<BrandingSeparatorDash />
<CustomBranding inline={true} />
</Link>
</Navbar.Brand>
)