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

Enhance share dialog (#860)

Browse source
This commit is contained in:
Erik Michelson 2020-12-22 21:17:40 +01:00 • committed by GitHub
parent 1c6e6e10fb
commit 721c8c0e5a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 120 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/editor/app-bar/editor-view-mode.tsx
View file

@ -13,9 +13,9 @@ import { setEditorMode } from '../../../redux/editor/methods'
import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
export enum EditorMode {
PREVIEW,
BOTH,
EDITOR,
PREVIEW = 'view',
BOTH = 'both',
EDITOR = 'edit',
}
export const EditorViewMode: React.FC = () => {

41
src/components/editor/document-bar/buttons/share-link-button.tsx
View file

@ -4,27 +4,54 @@ SPDX-FileCopyrightText: 2020 The HedgeDoc developers (see AUTHORS file)
SPDX-License-Identifier: AGPL-3.0-only
*/
import equal from 'fast-deep-equal'
import React, { Fragment, useState } from 'react'
import { Modal } from 'react-bootstrap'
import { Trans } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'
import { useFrontendBaseUrl } from '../../../../hooks/common/use-frontend-base-url'
import { ApplicationState } from '../../../../redux'
import { CopyableField } from '../../../common/copyable/copyable-field/copyable-field'
import { TranslatedIconButton } from '../../../common/icon-button/translated-icon-button'
import { CommonModal } from '../../../common/modals/common-modal'
import { ShowIf } from '../../../common/show-if/show-if'
import { EditorPathParams } from '../../editor'
export const ShareLinkButton: React.FC = () => {
const [showReadOnly, setShowReadOnly] = useState(false)
useTranslation()
const [showShareDialog, setShowShareDialog] = useState(false)
const noteMetadata = useSelector((state: ApplicationState) => state.documentContent.metadata, equal)
const editorMode = useSelector((state: ApplicationState) => state.editorConfig.editorMode)
const baseUrl = useFrontendBaseUrl()
const { id } = useParams<EditorPathParams>()
return (
<Fragment>
<TranslatedIconButton size={'sm'} className={'mx-1'} icon={'share'} variant={'light'} onClick={() => setShowReadOnly(true)} i18nKey={'editor.documentBar.shareLink'}/>
<TranslatedIconButton
size={'sm'}
className={'mx-1'}
icon={'share'}
variant={'light'}
onClick={() => setShowShareDialog(true)}
i18nKey={'editor.documentBar.shareLink'}
/>
<CommonModal
show={showReadOnly}
onHide={() => setShowReadOnly(false)}
show={showShareDialog}
onHide={() => setShowShareDialog(false)}
closeButton={true}
titleI18nKey={'editor.modal.shareLink.title'}>
<Modal.Body>
<span className={'my-4'}><Trans i18nKey={'editor.modal.shareLink.viewOnlyDescription'}/></span>
<CopyableField content={'https://example.com'}/>
<Trans i18nKey={'editor.modal.shareLink.editorDescription'}/>
<CopyableField content={`${baseUrl}/n/${id}?${editorMode}`} nativeShareButton={true} url={`${baseUrl}/n/${id}?${editorMode}`}/>
<ShowIf condition={noteMetadata.type === 'slide'}>
<Trans i18nKey={'editor.modal.shareLink.slidesDescription'}/>
<CopyableField content={`${baseUrl}/p/${id}`} nativeShareButton={true} url={`${baseUrl}/p/${id}`}/>
</ShowIf>
<ShowIf condition={noteMetadata.type === ''}>
<Trans i18nKey={'editor.modal.shareLink.viewOnlyDescription'}/>
<CopyableField content={`${baseUrl}/s/${id}`} nativeShareButton={true} url={`${baseUrl}/s/${id}`}/>
</ShowIf>
</Modal.Body>
</CommonModal>
</Fragment>

3
src/components/editor/editor.tsx
View file

@ -12,7 +12,7 @@ import useMedia from 'use-media'
import { useApplyDarkMode } from '../../hooks/common/use-apply-dark-mode'
import { useDocumentTitle } from '../../hooks/common/use-document-title'
import { ApplicationState } from '../../redux'
import { setDocumentContent, setNoteId } from '../../redux/document-content/methods'
import { setDocumentContent, setDocumentMetadata, setNoteId } from '../../redux/document-content/methods'
import { setEditorMode } from '../../redux/editor/methods'
import { extractNoteTitle } from '../common/document-title/note-title-extractor'
import { MotdBanner } from '../common/motd-banner/motd-banner'
@ -74,6 +74,7 @@ export const Editor: React.FC = () => {
const onMetadataChange = useCallback((metaData: YAMLMetaData | undefined) => {
noteMetadata.current = metaData
setDocumentMetadata(metaData)
updateDocumentTitle()
}, [updateDocumentTitle])