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; width: 0;
} }
.disabled {
text-decoration: line-through;
}
&.sidebar-button-primary { &.sidebar-button-primary {
color: var(--bs-light); color: var(--bs-light);
background: var(--bs-primary); 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 * 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 type { SidebarEntryProps } from '../types'
import styles from './sidebar-button.module.scss' import styles from './sidebar-button.module.scss'
import type { PropsWithChildren } from 'react' 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. * A button that should be rendered in the sidebar.
@ -32,18 +34,30 @@ export const SidebarButton: React.FC<PropsWithChildren<SidebarEntryProps>> = ({
disabled, disabled,
...props ...props
}) => { }) => {
const tooltip = useCallback(
(overlayInjectedProps: OverlayInjectedProps) => {
if (!disabled) {
return <></>
}
return <Tooltip {...overlayInjectedProps}>This feature is not yet supported.</Tooltip>
},
[disabled]
)
return ( return (
<button <OverlayTrigger overlay={tooltip}>
ref={buttonRef} <button
className={concatCssClasses(styles.button, className, { [styles.hide]: hide })} ref={buttonRef}
disabled={disabled} className={concatCssClasses(styles.button, className, { [styles.hide]: hide })}
{...props}> disabled={disabled}
<ShowIf condition={!!icon}> {...props}>
<span className={`sidebar-button-icon ${styles.icon}`}> <ShowIf condition={!!icon}>
<UiIcon icon={icon} /> <span className={`sidebar-button-icon ${styles.icon}`}>
</span> <UiIcon icon={icon} />
</ShowIf> </span>
<span className={styles.text}>{children}</span> </ShowIf>
</button> <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 * SPDX-License-Identifier: AGPL-3.0-only
*/ */
@ -52,13 +52,19 @@ export const ExportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
<Trans i18nKey={'editor.documentBar.export'} /> <Trans i18nKey={'editor.documentBar.export'} />
</SidebarButton> </SidebarButton>
<SidebarMenu expand={expand}> <SidebarMenu expand={expand}>
<SidebarButton icon={IconGithub}>Gist</SidebarButton> <SidebarButton icon={IconGithub} disabled={true}>
<SidebarButton icon={IconGitlab}>Gitlab Snippet</SidebarButton> Gist
</SidebarButton>
<SidebarButton icon={IconGitlab} disabled={true}>
Gitlab Snippet
</SidebarButton>
<ExportMarkdownSidebarEntry /> <ExportMarkdownSidebarEntry />
<SidebarButton icon={IconFileCode}>HTML</SidebarButton> <SidebarButton icon={IconFileCode} disabled={true}>
<SidebarButton icon={IconFileCode}> HTML
</SidebarButton>
<SidebarButton icon={IconFileCode} disabled={true}>
<Trans i18nKey='editor.export.rawHtml' /> <Trans i18nKey='editor.export.rawHtml' />
</SidebarButton> </SidebarButton>
</SidebarMenu> </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 * SPDX-License-Identifier: AGPL-3.0-only
*/ */
@ -52,9 +52,13 @@ export const ImportMenuSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
<Trans i18nKey={'editor.documentBar.import'} /> <Trans i18nKey={'editor.documentBar.import'} />
</SidebarButton> </SidebarButton>
<SidebarMenu expand={expand}> <SidebarMenu expand={expand}>
<SidebarButton icon={IconGithub}>Gist</SidebarButton> <SidebarButton icon={IconGithub} disabled={true}>
<SidebarButton icon={IconGitlab}>Gitlab Snippet</SidebarButton> Gist
<SidebarButton icon={IconClipboard}> </SidebarButton>
<SidebarButton icon={IconGitlab} disabled={true}>
Gitlab Snippet
</SidebarButton>
<SidebarButton icon={IconClipboard} disabled={true}>
<Trans i18nKey={'editor.import.clipboard'} /> <Trans i18nKey={'editor.import.clipboard'} />
</SidebarButton> </SidebarButton>
<ImportMarkdownSidebarEntry /> <ImportMarkdownSidebarEntry />