From 584f65c3492a447c8e30c2056c2a161cb17703db Mon Sep 17 00:00:00 2001 From: Eduard Heimbuch Date: Wed, 15 Jan 2020 20:29:18 +0100 Subject: [PATCH 1/5] render markdown files in sourcesView --- .../components/content/MarkdownViewer.tsx | 38 +++++++++++++++++++ .../repos/sources/containers/SourcesView.tsx | 37 +++++++++++++++--- 2 files changed, 69 insertions(+), 6 deletions(-) create mode 100644 scm-ui/ui-webapp/src/repos/sources/components/content/MarkdownViewer.tsx 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..86731ace1b --- /dev/null +++ b/scm-ui/ui-webapp/src/repos/sources/components/content/MarkdownViewer.tsx @@ -0,0 +1,38 @@ +import React, { FC, useEffect, useState } from "react"; +import { getContent } from "./SourcecodeViewer"; +import { Link, File } from "@scm-manager/ui-types"; +import { Loading, ErrorNotification, MarkdownView, Button, Level } from "@scm-manager/ui-components"; + +type Props = { + file: File; +}; + +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/containers/SourcesView.tsx b/scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx index a22c2c8e92..c0c35c8bb9 100644 --- a/scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx +++ b/scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx @@ -1,14 +1,16 @@ import React from "react"; - +import { WithTranslation, withTranslation } from "react-i18next"; import SourcecodeViewer from "../components/content/SourcecodeViewer"; import ImageViewer from "../components/content/ImageViewer"; +import MarkdownViewer from "../components/content/MarkdownViewer"; import DownloadViewer from "../components/content/DownloadViewer"; 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 { ErrorNotification, Loading, Button, Level } from "@scm-manager/ui-components"; +import { Icon } from "@scm-manager/ui-components/src"; -type Props = { +type Props = WithTranslation & { repository: Repository; file: File; revision: string; @@ -18,6 +20,7 @@ type Props = { type State = { contentType: string; language: string; + renderMarkdown: boolean; loaded: boolean; error?: Error; }; @@ -29,7 +32,8 @@ class SourcesView extends React.Component { this.state = { contentType: "", language: "", - loaded: false + loaded: false, + renderMarkdown: true }; } @@ -53,11 +57,32 @@ class SourcesView extends React.Component { }); } + toggleMarkdown = () => { + this.setState({ renderMarkdown: !this.state.renderMarkdown }); + }; + showSources() { const { file, revision } = this.props; - const { contentType, language } = this.state; + const { contentType, language, renderMarkdown } = this.state; if (contentType.startsWith("image/")) { return ; + } else if (contentType.includes("markdown")) { + return ( + <> + + + } + /> + {renderMarkdown ? : } + + ); } else if (language) { return ; } else if (contentType.startsWith("text/")) { @@ -95,4 +120,4 @@ class SourcesView extends React.Component { } } -export default SourcesView; +export default withTranslation("repos")(SourcesView); From 75a94e25090918262e8e1224b530f5d934c9c763 Mon Sep 17 00:00:00 2001 From: Eduard Heimbuch Date: Wed, 15 Jan 2020 20:55:09 +0100 Subject: [PATCH 2/5] import markdown icon // fix toggle button size and position --- scm-ui/ui-styles/src/scm.scss | 1 + .../src/repos/sources/containers/SourcesView.tsx | 15 ++++++++++----- 2 files changed, 11 insertions(+), 5 deletions(-) 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/src/repos/sources/containers/SourcesView.tsx b/scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx index c0c35c8bb9..a5ba27ce9f 100644 --- a/scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx +++ b/scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx @@ -1,4 +1,5 @@ import React from "react"; +import styled from "styled-components"; import { WithTranslation, withTranslation } from "react-i18next"; import SourcecodeViewer from "../components/content/SourcecodeViewer"; import ImageViewer from "../components/content/ImageViewer"; @@ -7,8 +8,12 @@ import DownloadViewer from "../components/content/DownloadViewer"; import { ExtensionPoint } from "@scm-manager/ui-extensions"; import { getContentType } from "./contentType"; import { File, Repository } from "@scm-manager/ui-types"; -import { ErrorNotification, Loading, Button, Level } from "@scm-manager/ui-components"; -import { Icon } from "@scm-manager/ui-components/src"; +import { Button, ErrorNotification, Level, Loading } from "@scm-manager/ui-components"; + +const ToggleButton = styled(Button)` + max-width: 2em; + margin-right: 0.25em; +`; type Props = WithTranslation & { repository: Repository; @@ -71,13 +76,13 @@ class SourcesView extends React.Component { <> - + + } /> {renderMarkdown ? : } From b5e78f46be29c18b55ebf7f0a0c379c6d562d4b9 Mon Sep 17 00:00:00 2001 From: Eduard Heimbuch Date: Wed, 15 Jan 2020 21:11:47 +0100 Subject: [PATCH 3/5] add title translation --- scm-ui/ui-webapp/public/locales/de/repos.json | 4 ++++ scm-ui/ui-webapp/public/locales/en/repos.json | 4 ++++ scm-ui/ui-webapp/public/locales/es/repos.json | 4 ++++ .../ui-webapp/src/repos/sources/containers/SourcesView.tsx | 6 +++--- 4 files changed, 15 insertions(+), 3 deletions(-) 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/containers/SourcesView.tsx b/scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx index a5ba27ce9f..94bea1c206 100644 --- a/scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx +++ b/scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx @@ -67,7 +67,7 @@ class SourcesView extends React.Component { }; showSources() { - const { file, revision } = this.props; + const { file, revision, t } = this.props; const { contentType, language, renderMarkdown } = this.state; if (contentType.startsWith("image/")) { return ; @@ -77,9 +77,9 @@ class SourcesView extends React.Component { From db1d89792e312e092f5298543de8febe1ab0341f Mon Sep 17 00:00:00 2001 From: Eduard Heimbuch Date: Thu, 16 Jan 2020 10:00:44 +0100 Subject: [PATCH 4/5] refactor markdownviewer // fix padding --- .../components/content/MarkdownViewer.tsx | 17 +++++-- .../content/SwitchableMarkdownViewer.tsx | 51 +++++++++++++++++++ .../repos/sources/containers/SourcesView.tsx | 44 +++------------- 3 files changed, 72 insertions(+), 40 deletions(-) create mode 100644 scm-ui/ui-webapp/src/repos/sources/components/content/SwitchableMarkdownViewer.tsx 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 index 86731ace1b..fb94747b1e 100644 --- a/scm-ui/ui-webapp/src/repos/sources/components/content/MarkdownViewer.tsx +++ b/scm-ui/ui-webapp/src/repos/sources/components/content/MarkdownViewer.tsx @@ -1,16 +1,21 @@ import React, { FC, useEffect, useState } from "react"; import { getContent } from "./SourcecodeViewer"; import { Link, File } from "@scm-manager/ui-types"; -import { Loading, ErrorNotification, MarkdownView, Button, Level } from "@scm-manager/ui-components"; +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 [loading, setLoading] = useState(true); const [error, setError] = useState(undefined); - const [content, setContent] = useState(""); + const [content, setContent] = useState(""); useEffect(() => { getContent((file._links.self as Link).href) @@ -32,7 +37,11 @@ const MarkdownViewer: FC = ({ file }) => { return ; } - 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 94bea1c206..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,21 +1,14 @@ import React from "react"; -import styled from "styled-components"; -import { WithTranslation, withTranslation } from "react-i18next"; import SourcecodeViewer from "../components/content/SourcecodeViewer"; import ImageViewer from "../components/content/ImageViewer"; -import MarkdownViewer from "../components/content/MarkdownViewer"; import DownloadViewer from "../components/content/DownloadViewer"; import { ExtensionPoint } from "@scm-manager/ui-extensions"; import { getContentType } from "./contentType"; import { File, Repository } from "@scm-manager/ui-types"; -import { Button, ErrorNotification, Level, Loading } from "@scm-manager/ui-components"; +import { ErrorNotification, Loading } from "@scm-manager/ui-components"; +import SwitchableMarkdownViewer from "../components/content/SwitchableMarkdownViewer"; -const ToggleButton = styled(Button)` - max-width: 2em; - margin-right: 0.25em; -`; - -type Props = WithTranslation & { +type Props = { repository: Repository; file: File; revision: string; @@ -25,7 +18,6 @@ type Props = WithTranslation & { type State = { contentType: string; language: string; - renderMarkdown: boolean; loaded: boolean; error?: Error; }; @@ -37,8 +29,7 @@ class SourcesView extends React.Component { this.state = { contentType: "", language: "", - loaded: false, - renderMarkdown: true + loaded: false }; } @@ -62,32 +53,13 @@ class SourcesView extends React.Component { }); } - toggleMarkdown = () => { - this.setState({ renderMarkdown: !this.state.renderMarkdown }); - }; - showSources() { - const { file, revision, t } = this.props; - const { contentType, language, renderMarkdown } = this.state; + const { file, revision } = this.props; + const { contentType, language } = this.state; if (contentType.startsWith("image/")) { return ; } else if (contentType.includes("markdown")) { - return ( - <> - - - - } - /> - {renderMarkdown ? : } - - ); + return ; } else if (language) { return ; } else if (contentType.startsWith("text/")) { @@ -125,4 +97,4 @@ class SourcesView extends React.Component { } } -export default withTranslation("repos")(SourcesView); +export default SourcesView; From 534c2beb4f35d45ee78c9582311f9254dc6ec11a Mon Sep 17 00:00:00 2001 From: Eduard Heimbuch Date: Thu, 16 Jan 2020 09:02:05 +0000 Subject: [PATCH 5/5] Close branch feature/markdown_source_viewer