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

refactor: move help entries into new global app bar

Browse source 
Co-authored-by: Tilman Vatteroth <git@tilmanvatteroth.de>
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
Signed-off-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
Erik Michelson 2023-06-29 22:17:03 +02:00
parent 74b92f2bbb
commit d10c6d3290
43 changed files with 749 additions and 397 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -35,7 +35,7 @@ exports[`custom branding with inline=false will prefer the logo over the text 1`
exports[`custom branding with inline=true shows an image if branding logo is defined 1`] = `
<div>
<img
class="inline-size"
class="inline-logo"
src="mockBrandingUrl"
/>
</div>
@ -44,7 +44,7 @@ exports[`custom branding with inline=true shows an image if branding logo is def
exports[`custom branding with inline=true shows an text if branding text is defined 1`] = `
<div>
<span
class="inline-size"
class="inline-text"
>
mockedBranding
</span>
@ -55,7 +55,7 @@ exports[`custom branding with inline=true will prefer the logo over the text 1`]
<div>
<img
alt="mockedBranding"
class="inline-size"
class="inline-logo"
src="mockBrandingUrl"
title="mockedBranding"
/>

16
frontend/src/components/common/custom-branding/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 './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>
}

11
frontend/src/components/common/custom-branding/branding.module.scss
View file

@ -1,4 +1,4 @@
/*
/*!
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
@ -8,6 +8,11 @@
height: 50px;
}
.inline-size {
height: 30px;
.inline-logo {
height: 32px;
}
.inline-text {
font-size: 18px;
line-height: 1.0;
}

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

@ -3,9 +3,10 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { concatCssClasses } from '../../../utils/concat-css-classes'
import styles from './branding.module.scss'
import { useBrandingDetails } from './use-branding-details'
import React from 'react'
import React, { useMemo } from 'react'
export interface BrandingProps {
inline?: boolean
@ -16,12 +17,19 @@ export interface BrandingProps {
* This branding can either be a text, a logo or both (in that case the text is used as the title and alt of the image).
*
* @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 }) => {
const branding = useBrandingDetails()
const className = inline ? styles['inline-size'] : styles['regular-size']
const className = useMemo(
() =>
concatCssClasses({
[styles['regular-size']]: !inline,
[styles['inline-logo']]: inline && branding && !!branding.logo,
[styles['inline-text']]: inline && branding && !branding.logo
}),
[inline, branding]
)
if (!branding) {
return null