Change top slide mode button dynamically to read-only-mode (#1056)

public/locales/en.json

@@ -306,6 +306,7 @@
             "export": "Export",
             "extra": "Extra",
             "slideMode": "Slide Mode",
+            "readOnlyMode": "Read-only mode",
             "download": "Download",
             "help": "Help",
             "deleteNote": "Delete note",

src/components/editor-page/app-bar/app-bar.tsx

@@ -5,22 +5,22 @@
  */
 
 import React from 'react'
-import { Button, Nav, Navbar } from 'react-bootstrap'
-import { Trans, useTranslation } from 'react-i18next'
+import equal from 'fast-deep-equal'
+import { Nav, Navbar } from 'react-bootstrap'
 import { useSelector } from 'react-redux'
-import { useParams } from 'react-router'
-import { Link } from 'react-router-dom'
 import { ApplicationState } from '../../../redux'
-import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 import { ShowIf } from '../../common/show-if/show-if'
 import { SignInButton } from '../../landing-layout/navigation/sign-in-button'
 import { UserDropdown } from '../../landing-layout/navigation/user-dropdown'
-import { EditorPagePathParams } from '../editor-page'
 import { DarkModeButton } from './dark-mode-button'
 import { EditorViewMode } from './editor-view-mode'
 import { HelpButton } from './help-button/help-button'
 import { NavbarBranding } from './navbar-branding'
 import { SyncScrollButtons } from './sync-scroll-buttons/sync-scroll-buttons'
+import { NoteType } from '../note-frontmatter/note-frontmatter'
+import { SlideModeButton } from './slide-mode-button'
+import { ReadOnlyModeButton } from './read-only-mode-button'
+import { NewNoteButton } from './new-note-button'
 
 export enum AppBarMode {
   BASIC,
@@ -32,9 +32,8 @@ export interface AppBarProps {
 }
 
 export const AppBar: React.FC<AppBarProps> = ({ mode }) => {
-  const { t } = useTranslation()
-  const { id } = useParams<EditorPagePathParams>()
   const userExists = useSelector((state: ApplicationState) => !!state.user)
+  const noteFrontmatter = useSelector((state: ApplicationState) => state.noteDetails.frontmatter, equal)
 
   return (
     <Navbar bg={ 'light' }>
@@ -45,20 +44,18 @@ export const AppBar: React.FC<AppBarProps> = ({ mode }) => {
           <SyncScrollButtons/>
         </ShowIf>
         <DarkModeButton/>
-        <Link to={ `/p/${ id }` } target='_blank'>
-          <Button title={ t('editor.documentBar.slideMode') } className="ml-2 text-secondary" size="sm"
-                  variant="outline-light">
-            <ForkAwesomeIcon icon="television"/>
-          </Button>
-        </Link>
         <ShowIf condition={ mode === AppBarMode.EDITOR }>
+          <ShowIf condition={noteFrontmatter.type === NoteType.SLIDE}>
+            <SlideModeButton/>
+          </ShowIf>
+          <ShowIf condition={noteFrontmatter.type !== NoteType.SLIDE}>
+            <ReadOnlyModeButton/>
+          </ShowIf>
           <HelpButton/>
         </ShowIf>
       </Nav>
       <Nav className="d-flex align-items-center text-secondary">
-        <Button className="mx-2" size="sm" variant="primary">
-          <ForkAwesomeIcon icon="plus"/> <Trans i18nKey="editor.appBar.new"/>
-        </Button>
+        <NewNoteButton/>
         <ShowIf condition={ !userExists }>
           <SignInButton size={ 'sm' }/>
         </ShowIf>

src/components/editor-page/app-bar/new-note-button.tsx

@@ -0,0 +1,20 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React from 'react'
+import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+import { Trans, useTranslation } from 'react-i18next'
+import { Button } from 'react-bootstrap'
+
+export const NewNoteButton: React.FC = () => {
+  useTranslation()
+
+  return (
+    <Button className="mx-2" size="sm" variant="primary">
+      <ForkAwesomeIcon icon="plus"/> <Trans i18nKey="editor.appBar.new"/>
+    </Button>
+  )
+}

src/components/editor-page/app-bar/read-only-mode-button.tsx

@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React from 'react'
+import { Button } from 'react-bootstrap'
+import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+import { Link } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { useParams } from 'react-router'
+import { EditorPagePathParams } from '../editor-page'
+
+export const ReadOnlyModeButton: React.FC = () => {
+  const { t } = useTranslation()
+  const { id } = useParams<EditorPagePathParams>()
+
+  return (
+    <Link to={ `/s/${ id }` } target='_blank'>
+      <Button title={ t('editor.documentBar.readOnlyMode') } className="ml-2 text-secondary" size="sm"
+              variant="outline-light">
+        <ForkAwesomeIcon icon="file-text-o"/>
+      </Button>
+    </Link>
+  )
+}

src/components/editor-page/app-bar/slide-mode-button.tsx

@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React from 'react'
+import { Button } from 'react-bootstrap'
+import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+import { Link } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { useParams } from 'react-router'
+import { EditorPagePathParams } from '../editor-page'
+
+export const SlideModeButton: React.FC = () => {
+  const { t } = useTranslation()
+  const { id } = useParams<EditorPagePathParams>()
+
+  return (
+    <Link to={ `/p/${ id }` } target='_blank'>
+      <Button title={ t('editor.documentBar.slideMode') } className="ml-2 text-secondary" size="sm"
+              variant="outline-light">
+        <ForkAwesomeIcon icon="television"/>
+      </Button>
+    </Link>
+  )
+}