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

refactor: change branding delimiter to css

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-04-30 21:35:45 +02:00
parent d75b8d2d3b
commit 6a772d851b
4 changed files with 35 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,13 +4,11 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useFrontendConfig } from '../frontend-config-context/use-frontend-config'
import { ShowIf } from '../show-if/show-if'
import styles from './branding.module.scss'
import React, { useMemo } from 'react'
import React from 'react'
export interface BrandingProps {
inline?: boolean
delimiter?: boolean
}
/**
@ -20,32 +18,22 @@ export interface BrandingProps {
* @param inline If the logo should be using the inline-size or the regular-size css class.
* @param delimiter If the delimiter between the HedgeDoc logo and the branding should be shown.
*/
export const CustomBranding: React.FC<BrandingProps> = ({ inline = false, delimiter = true }) => {
export const CustomBranding: React.FC<BrandingProps> = ({ inline = false }) => {
const branding = useFrontendConfig().branding
const showBranding = !!branding.name || !!branding.logo
const brandingDom = useMemo(() => {
if (branding.logo) {
return (
// eslint-disable-next-line @next/next/no-img-element
<img
src={branding.logo}
alt={branding.name}
title={branding.name}
className={inline ? styles['inline-size'] : styles['regular-size']}
/>
)
} else {
return branding.name
}
}, [branding.logo, branding.name, inline])
return (
<ShowIf condition={showBranding}>
<ShowIf condition={delimiter}>
<strong className={`mx-1 ${inline ? styles['inline-size'] : styles['regular-size']}`}>@</strong>
</ShowIf>
{brandingDom}
</ShowIf>
)
if (!branding.name && !branding.logo) {
return null
} else if (branding.logo) {
return (
/* eslint-disable-next-line @next/next/no-img-element */
<img
src={branding.logo}
alt={branding.name}
title={branding.name}
className={inline ? styles['inline-size'] : styles['regular-size']}
/>
)
} else {
return <span className={inline ? styles['inline-size'] : styles['regular-size']}>{branding.name}</span>
}
}