From 2f9d0f279304c7dc2a20051dbd240807febae480 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maren=20S=C3=BCwer?= Date: Mon, 26 Nov 2018 15:20:44 +0100 Subject: [PATCH] add history and sources button to chose between view --- scm-ui/public/locales/en/repos.json | 3 +- .../sources/components/content/ButtonGroup.js | 72 ++++++++++ .../src/repos/sources/containers/Content.js | 136 ++++++------------ .../repos/sources/containers/HistoryView.js | 75 ++++++++++ .../repos/sources/containers/SourcesView.js | 100 +++++++++++++ 5 files changed, 296 insertions(+), 90 deletions(-) create mode 100644 scm-ui/src/repos/sources/components/content/ButtonGroup.js create mode 100644 scm-ui/src/repos/sources/containers/HistoryView.js create mode 100644 scm-ui/src/repos/sources/containers/SourcesView.js diff --git a/scm-ui/public/locales/en/repos.json b/scm-ui/public/locales/en/repos.json index 509c0f5565..7e421e7b99 100644 --- a/scm-ui/public/locales/en/repos.json +++ b/scm-ui/public/locales/en/repos.json @@ -55,7 +55,8 @@ "branch": "Branch" }, "content": { - "historyLink": "History", + "historyButton": "History", + "sourcesButton": "Sources", "downloadButton": "Download", "path": "Path", "branch": "Branch", diff --git a/scm-ui/src/repos/sources/components/content/ButtonGroup.js b/scm-ui/src/repos/sources/components/content/ButtonGroup.js new file mode 100644 index 0000000000..5befbd94d5 --- /dev/null +++ b/scm-ui/src/repos/sources/components/content/ButtonGroup.js @@ -0,0 +1,72 @@ +// @flow +import React from "react"; +import { translate } from "react-i18next"; +import { Button } from "@scm-manager/ui-components"; + +type Props = { + t: string => string, + historyIsSelected: boolean, + showHistory: boolean => void +}; + +class ButtonGroup extends React.Component { + showHistory = () => { + this.props.showHistory(true); + }; + + showSources = () => { + this.props.showHistory(false); + }; + + render() { + const { t, historyIsSelected } = this.props; + + let sourcesColor = ""; + let historyColor = ""; + + if (historyIsSelected) { + historyColor = "info is-selected"; + } else { + sourcesColor = "info is-selected"; + } + + const sourcesLabel = ( + <> + + + + + {t("sources.content.sourcesButton")} + + + ); + + const historyLabel = ( + <> + + + + + {t("sources.content.historyButton")} + + + ); + + return ( +
+
+ ); + } +} + +export default translate("repos")(ButtonGroup); diff --git a/scm-ui/src/repos/sources/containers/Content.js b/scm-ui/src/repos/sources/containers/Content.js index e474c111f0..7202dbe928 100644 --- a/scm-ui/src/repos/sources/containers/Content.js +++ b/scm-ui/src/repos/sources/containers/Content.js @@ -1,22 +1,16 @@ // @flow import React from "react"; import { translate } from "react-i18next"; -import { getSources } from "../modules/sources"; import type { File, Repository } from "@scm-manager/ui-types"; -import { - DateFromNow, - ErrorNotification, - Loading -} from "@scm-manager/ui-components"; -import { connect } from "react-redux"; -import ImageViewer from "../components/content/ImageViewer"; -import SourcecodeViewer from "../components/content/SourcecodeViewer"; -import DownloadViewer from "../components/content/DownloadViewer"; +import { DateFromNow } from "@scm-manager/ui-components"; import FileSize from "../components/FileSize"; import injectSheet from "react-jss"; import classNames from "classnames"; -import { ExtensionPoint } from "@scm-manager/ui-extensions"; -import { getContentType } from "./contentType"; +import ButtonGroup from "../components/content/ButtonGroup"; +import SourcesView from "./SourcesView"; +import HistoryView from "./HistoryView"; +import { getSources } from "../modules/sources"; +import { connect } from "react-redux"; type Props = { loading: boolean, @@ -30,11 +24,8 @@ type Props = { }; type State = { - contentType: string, - language: string, - loaded: boolean, collapsed: boolean, - error?: Error + showHistory: boolean }; const styles = { @@ -43,6 +34,9 @@ const styles = { }, pointer: { cursor: "pointer" + }, + marginInHeader: { + marginRight: "0.5em" } }; @@ -51,65 +45,50 @@ class Content extends React.Component { super(props); this.state = { - contentType: "", - language: "", - loaded: false, - collapsed: true + collapsed: true, + showHistory: false }; } - componentDidMount() { - const { file } = this.props; - getContentType(file._links.self.href) - .then(result => { - if (result.error) { - this.setState({ - ...this.state, - error: result.error, - loaded: true - }); - } else { - this.setState({ - ...this.state, - contentType: result.type, - language: result.language, - loaded: true - }); - } - }) - .catch(err => {}); - } - toggleCollapse = () => { this.setState(prevState => ({ collapsed: !prevState.collapsed })); }; + setShowHistoryState(showHistory: boolean) { + this.setState({ + ...this.state, + showHistory + }); + } + showHeader() { const { file, classes, t } = this.props; - const collapsed = this.state.collapsed; + const { showHistory, collapsed } = this.state; const icon = collapsed ? "fa-angle-right" : "fa-angle-down"; return ( - + ); @@ -165,40 +144,19 @@ class Content extends React.Component { return null; } - showContent() { - const { file, revision } = this.props; - const { contentType, language } = this.state; - if (contentType.startsWith("image/")) { - return ; - } else if (language) { - return ; - } else if (contentType.startsWith("text/")) { - return ; - } else { - return ( - - - - ); - } - } - render() { - const { file, classes } = this.props; - const { loaded, error } = this.state; - - if (!file || !loaded) { - return ; - } - if (error) { - return ; - } + const { file, revision, repository, path, classes } = this.props; + const {showHistory} = this.state; const header = this.showHeader(); - const content = this.showContent(); + const content = showHistory ? : ( + + ); const moreInformation = this.showMoreInformation(); return ( diff --git a/scm-ui/src/repos/sources/containers/HistoryView.js b/scm-ui/src/repos/sources/containers/HistoryView.js new file mode 100644 index 0000000000..75c5ab3b78 --- /dev/null +++ b/scm-ui/src/repos/sources/containers/HistoryView.js @@ -0,0 +1,75 @@ +// @flow +import React from "react"; +import { translate } from "react-i18next"; + +import { getContentType } from "./contentType"; +import type { File, Repository } from "@scm-manager/ui-types"; +import { ErrorNotification, Loading } from "@scm-manager/ui-components"; + +type Props = { + repository: Repository, + file: File, + revision: string, + path: string, + classes: any, + t: string => string +}; + +type State = { + loaded: boolean, + error?: Error +}; + +class HistoryView extends React.Component { + constructor(props: Props) { + super(props); + + this.state = { + loaded: false + }; + } + + componentDidMount() { + const { file } = this.props; + /* getContentType(file._links.self.href) + .then(result => { + if (result.error) { + this.setState({ + ...this.state, + error: result.error, + loaded: true + }); + } else { + this.setState({ + ...this.state, + contentType: result.type, + language: result.language, + loaded: true + }); + } + }) + .catch(err => {});*/ + } + + showHistory() { + return "Hallo"; + } + + render() { + const { classes, file } = this.props; + const { loaded, error } = this.state; + + if (!file || !loaded) { + return ; + } + if (error) { + return ; + } + + const history = this.showHistory(); + + return <>{history}; + } +} + +export default translate("repos")(HistoryView); diff --git a/scm-ui/src/repos/sources/containers/SourcesView.js b/scm-ui/src/repos/sources/containers/SourcesView.js new file mode 100644 index 0000000000..533d4bd2eb --- /dev/null +++ b/scm-ui/src/repos/sources/containers/SourcesView.js @@ -0,0 +1,100 @@ +// @flow +import React from "react"; +import { translate } from "react-i18next"; + +import SourcecodeViewer from "../components/content/SourcecodeViewer"; +import ImageViewer from "../components/content/ImageViewer"; +import DownloadViewer from "../components/content/DownloadViewer"; +import { ExtensionPoint } from "@scm-manager/ui-extensions"; +import { getContentType } from "./contentType"; +import type { File, Repository } from "@scm-manager/ui-types"; +import { ErrorNotification, Loading } from "@scm-manager/ui-components"; + +type Props = { + repository: Repository, + file: File, + revision: string, + path: string, + classes: any, + t: string => string +}; + +type State = { + contentType: string, + language: string, + loaded: boolean, + error?: Error +}; + +class SourcesView extends React.Component { + constructor(props: Props) { + super(props); + + this.state = { + contentType: "", + language: "", + loaded: false + }; + } + + componentDidMount() { + const { file } = this.props; + getContentType(file._links.self.href) + .then(result => { + if (result.error) { + this.setState({ + ...this.state, + error: result.error, + loaded: true + }); + } else { + this.setState({ + ...this.state, + contentType: result.type, + language: result.language, + loaded: true + }); + } + }) + .catch(err => {}); + } + + showSources() { + const { file, revision } = this.props; + const { contentType, language } = this.state; + if (contentType.startsWith("image/")) { + return ; + } else if (language) { + return ; + } else if (contentType.startsWith("text/")) { + return ; + } else { + return ( + + + + ); + } + } + + render() { + const { classes, file } = this.props; + const { loaded, error } = this.state; + + if (!file || !loaded) { + return ; + } + if (error) { + return ; + } + + const sources = this.showSources(); + + return <>{sources}; + } +} + +export default translate("repos")(SourcesView);