diff --git a/scm-ui/src/repos/components/list/RepositoryEntry.js b/scm-ui/src/repos/components/list/RepositoryEntry.js index 71cdf92223..96022c7c7e 100644 --- a/scm-ui/src/repos/components/list/RepositoryEntry.js +++ b/scm-ui/src/repos/components/list/RepositoryEntry.js @@ -30,6 +30,7 @@ const styles = { type Props = { repository: Repository, + full?: boolean, // context props classes: any }; @@ -76,16 +77,17 @@ class RepositoryEntry extends React.Component { }; render() { - const { repository, classes } = this.props; + const { repository, classes, full } = this.props; const repositoryLink = this.createLink(repository); - + const halfColumn = full ? "is-full" : "is-half"; return (
diff --git a/scm-ui/src/repos/components/list/RepositoryGroupEntry.js b/scm-ui/src/repos/components/list/RepositoryGroupEntry.js index aa38fd8501..4ad82c0fe0 100644 --- a/scm-ui/src/repos/components/list/RepositoryGroupEntry.js +++ b/scm-ui/src/repos/components/list/RepositoryGroupEntry.js @@ -1,77 +1,92 @@ -//@flow -import React from "react"; -import type { RepositoryGroup } from "@scm-manager/ui-types"; -import injectSheet from "react-jss"; -import classNames from "classnames"; -import RepositoryEntry from "./RepositoryEntry"; - -const styles = { - pointer: { - cursor: "pointer", - fontSize: "1.5rem" - }, - repoGroup: { - marginBottom: "1em" - }, - wrapper: { - padding: "0 0.75rem" - }, - clearfix: { - clear: "both" - } -}; - -type Props = { - group: RepositoryGroup, - - // context props - classes: any -}; - -type State = { - collapsed: boolean -}; - -class RepositoryGroupEntry extends React.Component { - constructor(props: Props) { - super(props); - this.state = { - collapsed: false - }; - } - - toggleCollapse = () => { - this.setState(prevState => ({ - collapsed: !prevState.collapsed - })); - }; - - render() { - const { group, classes } = this.props; - const { collapsed } = this.state; - - const icon = collapsed ? "fa-angle-right" : "fa-angle-down"; - let content = null; - if (!collapsed) { - content = group.repositories.map((repository, index) => { - return ; - }); - } - return ( -
-

- - {group.name} - -

-
-
- {content} -
-
-
- ); - } -} - -export default injectSheet(styles)(RepositoryGroupEntry); +//@flow +import React from "react"; +import type { RepositoryGroup, Repository } from "@scm-manager/ui-types"; +import injectSheet from "react-jss"; +import classNames from "classnames"; +import RepositoryEntry from "./RepositoryEntry"; + +const styles = { + pointer: { + cursor: "pointer", + fontSize: "1.5rem" + }, + repoGroup: { + marginBottom: "1em" + }, + wrapper: { + padding: "0 0.75rem" + }, + clearfix: { + clear: "both" + } +}; + +type Props = { + group: RepositoryGroup, + + // context props + classes: any +}; + +type State = { + collapsed: boolean +}; + +class RepositoryGroupEntry extends React.Component { + constructor(props: Props) { + super(props); + this.state = { + collapsed: false + }; + } + + toggleCollapse = () => { + this.setState(prevState => ({ + collapsed: !prevState.collapsed + })); + }; + + isLastEntry = (array: Repository[], index: number) => { + return index === array.length - 1; + }; + + isLengthOdd = (array: Repository[]) => { + return array.length % 2 !== 0; + }; + + isFullSize = (array: Repository[], index: number) => { + return this.isLastEntry(array, index) && this.isLengthOdd(array); + }; + + render() { + const { group, classes } = this.props; + const { collapsed } = this.state; + + const icon = collapsed ? "fa-angle-right" : "fa-angle-down"; + let content = null; + if (!collapsed) { + content = group.repositories.map((repository, index) => { + const full = this.isFullSize(group.repositories, index); + return ( + + ); + }); + } + return ( +
+

+ + {group.name} + +

+
+
+ {content} +
+
+
+ ); + } +} + +export default injectSheet(styles)(RepositoryGroupEntry);