github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-25 03:06:31 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix(sidebar): indicate that some feature are not yet supported

Browse source 
Signed-off-by: Philip Molares <philip.molares@udo.edu>
This commit is contained in:
Philip Molares 2023-10-07 15:30:30 +02:00 committed by Erik Michelson
parent 5d396eb99c
commit 5435dd54ee
4 changed files with 51 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/components/editor-page/sidebar/sidebar-button/sidebar-button.module.scss
View file

@ -57,6 +57,10 @@
width: 0;
}
.disabled {
text-decoration: line-through;
}
&.sidebar-button-primary {
color: var(--bs-light);
background: var(--bs-primary);

42
frontend/src/components/editor-page/sidebar/sidebar-button/sidebar-button.tsx
View file

@ -1,5 +1,5 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
@ -9,7 +9,9 @@ import { ShowIf } from '../../../common/show-if/show-if'
import type { SidebarEntryProps } from '../types'
import styles from './sidebar-button.module.scss'
import type { PropsWithChildren } from 'react'
import React from 'react'
import React, { useCallback } from 'react'
import { OverlayTrigger, Tooltip } from 'react-bootstrap'
import type { OverlayInjectedProps } from 'react-bootstrap/Overlay'
/**
* A button that should be rendered in the sidebar.
@ -32,18 +34,30 @@ export const SidebarButton: React.FC<PropsWithChildren<SidebarEntryProps>> = ({
disabled,
...props
}) => {
const tooltip = useCallback(
(overlayInjectedProps: OverlayInjectedProps) => {
if (!disabled) {
return <></>
}
return <Tooltip {...overlayInjectedProps}>This feature is not yet supported.</Tooltip>
},
[disabled]
)
return (
<button
ref={buttonRef}
className={concatCssClasses(styles.button, className, { [styles.hide]: hide })}
disabled={disabled}
{...props}>
<ShowIf condition={!!icon}>
<span className={`sidebar-button-icon ${styles.icon}`}>
<UiIcon icon={icon} />
</span>
</ShowIf>
<span className={styles.text}>{children}</span>
</button>
<OverlayTrigger overlay={tooltip}>
<button
ref={buttonRef}
className={concatCssClasses(styles.button, className, { [styles.hide]: hide })}
disabled={disabled}
{...props}>
<ShowIf condition={!!icon}>
<span className={`sidebar-button-icon ${styles.icon}`}>
<UiIcon icon={icon} />
</span>
</ShowIf>
<span className={concatCssClasses(styles.text, { [styles.disabled]: disabled })}>{children}</span>
</button>
</OverlayTrigger>
)
}

16
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-menu-sidebar-menu.tsx
View file

@ -1,5 +1,5 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
@ -52,13 +52,19 @@ export const ExportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
<Trans i18nKey={'editor.documentBar.export'} />
</SidebarButton>
<SidebarMenu expand={expand}>
<SidebarButton icon={IconGithub}>Gist</SidebarButton>
<SidebarButton icon={IconGitlab}>Gitlab Snippet</SidebarButton>
<SidebarButton icon={IconGithub} disabled={true}>
Gist
</SidebarButton>
<SidebarButton icon={IconGitlab} disabled={true}>
Gitlab Snippet
</SidebarButton>
<ExportMarkdownSidebarEntry />
<SidebarButton icon={IconFileCode}>HTML</SidebarButton>
<SidebarButton icon={IconFileCode}>
<SidebarButton icon={IconFileCode} disabled={true}>
HTML
</SidebarButton>
<SidebarButton icon={IconFileCode} disabled={true}>
<Trans i18nKey='editor.export.rawHtml' />
</SidebarButton>
</SidebarMenu>

12
frontend/src/components/editor-page/sidebar/specific-sidebar-entries/import-menu-sidebar-menu.tsx
View file

@ -1,5 +1,5 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
@ -52,9 +52,13 @@ export const ImportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
<Trans i18nKey={'editor.documentBar.import'} />
</SidebarButton>
<SidebarMenu expand={expand}>
<SidebarButton icon={IconGithub}>Gist</SidebarButton>
<SidebarButton icon={IconGitlab}>Gitlab Snippet</SidebarButton>
<SidebarButton icon={IconClipboard}>
<SidebarButton icon={IconGithub} disabled={true}>
Gist
</SidebarButton>
<SidebarButton icon={IconGitlab} disabled={true}>
Gitlab Snippet
</SidebarButton>
<SidebarButton icon={IconClipboard} disabled={true}>
<Trans i18nKey={'editor.import.clipboard'} />
</SidebarButton>
<ImportMarkdownSidebarEntry />