diff --git a/scm-ui/ui-styles/src/scm.scss b/scm-ui/ui-styles/src/scm.scss index adb3c0b774..cca6a484ed 100644 --- a/scm-ui/ui-styles/src/scm.scss +++ b/scm-ui/ui-styles/src/scm.scss @@ -427,6 +427,7 @@ $danger-25: scale-color($danger, $lightness: 75%); @import "~@fortawesome/fontawesome-free/scss/fontawesome"; $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import "~@fortawesome/fontawesome-free/scss/solid"; +@import "~@fortawesome/fontawesome-free/scss/brands"; @import "~react-diff-view/style/index"; diff --git a/scm-ui/ui-webapp/public/locales/de/repos.json b/scm-ui/ui-webapp/public/locales/de/repos.json index b9c26b692e..9539429609 100644 --- a/scm-ui/ui-webapp/public/locales/de/repos.json +++ b/scm-ui/ui-webapp/public/locales/de/repos.json @@ -113,6 +113,10 @@ "historyButton": "History", "sourcesButton": "Sources", "downloadButton": "Download", + "toggleButton": { + "showMarkdown": "Markdown rendern", + "showSources": "Sources anzeigen" + }, "path": "Pfad", "branch": "Branch", "commitDate": "Commitdatum", diff --git a/scm-ui/ui-webapp/public/locales/en/repos.json b/scm-ui/ui-webapp/public/locales/en/repos.json index c493e9605e..0451003879 100644 --- a/scm-ui/ui-webapp/public/locales/en/repos.json +++ b/scm-ui/ui-webapp/public/locales/en/repos.json @@ -113,6 +113,10 @@ "historyButton": "History", "sourcesButton": "Sources", "downloadButton": "Download", + "toggleButton": { + "showMarkdown": "Render markdown", + "showSources": "Show sources" + }, "path": "Path", "branch": "Branch", "commitDate": "Commit date", diff --git a/scm-ui/ui-webapp/public/locales/es/repos.json b/scm-ui/ui-webapp/public/locales/es/repos.json index 71169ae0d2..6c8db3d60c 100644 --- a/scm-ui/ui-webapp/public/locales/es/repos.json +++ b/scm-ui/ui-webapp/public/locales/es/repos.json @@ -113,6 +113,10 @@ "historyButton": "Historia", "sourcesButton": "Fuentes", "downloadButton": "Descargar", + "toggleButton": { + "showMarkdown": "Render markdown", + "showSources": "Show sources" + }, "path": "Ruta", "branch": "Rama", "commitDate": "Fecha de cometer", diff --git a/scm-ui/ui-webapp/src/repos/sources/components/content/MarkdownViewer.tsx b/scm-ui/ui-webapp/src/repos/sources/components/content/MarkdownViewer.tsx new file mode 100644 index 0000000000..fb94747b1e --- /dev/null +++ b/scm-ui/ui-webapp/src/repos/sources/components/content/MarkdownViewer.tsx @@ -0,0 +1,47 @@ +import React, { FC, useEffect, useState } from "react"; +import { getContent } from "./SourcecodeViewer"; +import { Link, File } from "@scm-manager/ui-types"; +import { Loading, ErrorNotification, MarkdownView } from "@scm-manager/ui-components"; +import styled from "styled-components"; + +type Props = { + file: File; +}; + +const MarkdownContent = styled.div` + padding: 0.5rem; +`; + +const MarkdownViewer: FC = ({ file }) => { + const [loading, setLoading] = useState(true); + const [error, setError] = useState(undefined); + const [content, setContent] = useState(""); + + useEffect(() => { + getContent((file._links.self as Link).href) + .then(content => { + setLoading(false); + setContent(content); + }) + .catch(error => { + setLoading(false); + setError(error); + }); + }, [file]); + + if (loading) { + return ; + } + + if (error) { + return ; + } + + return ( + + + + ); +}; + +export default MarkdownViewer; diff --git a/scm-ui/ui-webapp/src/repos/sources/components/content/SwitchableMarkdownViewer.tsx b/scm-ui/ui-webapp/src/repos/sources/components/content/SwitchableMarkdownViewer.tsx new file mode 100644 index 0000000000..f91148c87e --- /dev/null +++ b/scm-ui/ui-webapp/src/repos/sources/components/content/SwitchableMarkdownViewer.tsx @@ -0,0 +1,51 @@ +import React, { FC, useState } from "react"; +import styled from "styled-components"; +import MarkdownViewer from "./MarkdownViewer"; +import SourcecodeViewer from "./SourcecodeViewer"; +import { File } from "@scm-manager/ui-types"; +import { Button } from "@scm-manager/ui-components"; +import { useTranslation } from "react-i18next"; + +const ToggleButton = styled(Button)` + max-width: 1rem; + position: absolute; + top: 0; + right: 0.25rem; + z-index: 999; +`; + +const Container = styled.div` + position: relative; +`; + +type Props = { + file: File; +}; + +const SwitchableMarkdownViewer: FC = ({ file }) => { + const { t } = useTranslation("repos"); + const [renderMarkdown, setRenderMarkdown] = useState(true); + + const toggleMarkdown = () => { + setRenderMarkdown(!renderMarkdown); + }; + + return ( + + + + + {renderMarkdown ? : } + + ); +}; + +export default SwitchableMarkdownViewer; diff --git a/scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx b/scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx index a22c2c8e92..193479d0ec 100644 --- a/scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx +++ b/scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx @@ -1,5 +1,4 @@ import React from "react"; - import SourcecodeViewer from "../components/content/SourcecodeViewer"; import ImageViewer from "../components/content/ImageViewer"; import DownloadViewer from "../components/content/DownloadViewer"; @@ -7,6 +6,7 @@ import { ExtensionPoint } from "@scm-manager/ui-extensions"; import { getContentType } from "./contentType"; import { File, Repository } from "@scm-manager/ui-types"; import { ErrorNotification, Loading } from "@scm-manager/ui-components"; +import SwitchableMarkdownViewer from "../components/content/SwitchableMarkdownViewer"; type Props = { repository: Repository; @@ -58,6 +58,8 @@ class SourcesView extends React.Component { const { contentType, language } = this.state; if (contentType.startsWith("image/")) { return ; + } else if (contentType.includes("markdown")) { + return ; } else if (language) { return ; } else if (contentType.startsWith("text/")) {