Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-18 03:01:05 +01:00
Code Issues Packages Projects Releases Activity

added basePath to markdown components in order to allow navigation between md files

Browse Source
This commit is contained in:
Sebastian Sdorra
2020-05-19 15:52:11 +02:00
parent d1f10ec5a7
commit ffd04eb55b
3 changed files with 22 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
scm-ui/ui-webapp/src/repos/sources/components/content/MarkdownViewer.tsx
View File

@@ -29,13 +29,14 @@ import styled from "styled-components";
type Props = { type Props = {
file: File; file: File;
basePath: string;
}; };
const MarkdownContent = styled.div` const MarkdownContent = styled.div`
padding: 0.5rem; padding: 0.5rem;
`; `;
const MarkdownViewer: FC<Props> = ({ file }) => { const MarkdownViewer: FC<Props> = ({ file, basePath }) => {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<Error | undefined>(undefined); const [error, setError] = useState<Error | undefined>(undefined);
const [content, setContent] = useState(""); const [content, setContent] = useState("");
@@ -62,7 +63,7 @@ const MarkdownViewer: FC<Props> = ({ file }) => {
return ( return (
<MarkdownContent> <MarkdownContent>
<MarkdownView content={content} /> <MarkdownView content={content} basePath={basePath} />
</MarkdownContent> </MarkdownContent>
); );
}; };

18
scm-ui/ui-webapp/src/repos/sources/components/content/SwitchableMarkdownViewer.tsx
View File

@@ -21,13 +21,13 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE. * SOFTWARE.
*/ */
import React, { FC, useState } from "react"; import React, {FC, useState} from "react";
import styled from "styled-components"; import styled from "styled-components";
import MarkdownViewer from "./MarkdownViewer"; import MarkdownViewer from "./MarkdownViewer";
import SourcecodeViewer from "./SourcecodeViewer"; import SourcecodeViewer from "./SourcecodeViewer";
import { File } from "@scm-manager/ui-types"; import {File} from "@scm-manager/ui-types";
import { Button } from "@scm-manager/ui-components"; import {Button} from "@scm-manager/ui-components";
import { useTranslation } from "react-i18next"; import {useTranslation} from "react-i18next";
const ToggleButton = styled(Button)` const ToggleButton = styled(Button)`
max-width: 1rem; max-width: 1rem;
@@ -43,10 +43,11 @@ const Container = styled.div`
type Props = { type Props = {
file: File; file: File;
basePath: string;
}; };
const SwitchableMarkdownViewer: FC<Props> = ({ file }) => { const SwitchableMarkdownViewer: FC<Props> = ({file, basePath}) => {
const { t } = useTranslation("repos"); const {t} = useTranslation("repos");
const [renderMarkdown, setRenderMarkdown] = useState(true); const [renderMarkdown, setRenderMarkdown] = useState(true);
const toggleMarkdown = () => { const toggleMarkdown = () => {
@@ -64,9 +65,10 @@ const SwitchableMarkdownViewer: FC<Props> = ({ file }) => {
: t("sources.content.toggleButton.showMarkdown") : t("sources.content.toggleButton.showMarkdown")
} }
> >
<i className="fab fa-markdown" /> <i className="fab fa-markdown"/>
</ToggleButton> </ToggleButton>
{renderMarkdown ? <MarkdownViewer file={file} /> : <SourcecodeViewer file={file} language={"MARKDOWN"} />} {renderMarkdown ? <MarkdownViewer file={file} basePath={basePath}/> :
<SourcecodeViewer file={file} language={"MARKDOWN"}/>}
</Container> </Container>
); );
}; };

11
scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx
View File

@@ -76,13 +76,19 @@ class SourcesView extends React.Component<Props, State> {
}); });
} }
createBasePath() {
const { repository, revision } = this.props;
return `/repo/${repository.namespace}/${repository.name}/code/sources/${revision}/`;
}
showSources() { showSources() {
const { file, revision } = this.props; const { file, revision } = this.props;
const { contentType, language } = this.state; const { contentType, language } = this.state;
const basePath = this.createBasePath();
if (contentType.startsWith("image/")) { if (contentType.startsWith("image/")) {
return <ImageViewer file={file} />; return <ImageViewer file={file} />;
} else if (contentType.includes("markdown")) { } else if (contentType.includes("markdown")) {
return <SwitchableMarkdownViewer file={file} />; return <SwitchableMarkdownViewer file={file} basePath={basePath} />;
} else if (language) { } else if (language) {
return <SourcecodeViewer file={file} language={language} />; return <SourcecodeViewer file={file} language={language} />;
} else if (contentType.startsWith("text/")) { } else if (contentType.startsWith("text/")) {
@@ -94,7 +100,8 @@ class SourcesView extends React.Component<Props, State> {
props={{ props={{
file, file,
contentType, contentType,
revision revision,
basePath
}} }}
> >
<DownloadViewer file={file} /> <DownloadViewer file={file} />