Added first UI changes

This commit is contained in:
Janika Kefel
2018-12-13 14:49:59 +01:00
parent 16eb433618
commit 3a62f81ba0
18 changed files with 1339 additions and 11242 deletions

View File

@@ -1,67 +1,68 @@
//@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"
},
repoGroup: {
marginBottom: "1em"
}
};
type Props = {
group: RepositoryGroup,
// context props
classes: any
};
type State = {
collapsed: boolean
};
class RepositoryGroupEntry extends React.Component<Props, State> {
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 <RepositoryEntry repository={repository} key={index} />;
});
}
return (
<div className={classes.repoGroup}>
<h2>
<span className={classes.pointer} onClick={this.toggleCollapse}>
<i className={classNames("fa", icon)} /> {group.name}
</span>
</h2>
<hr />
{content}
</div>
);
}
}
export default injectSheet(styles)(RepositoryGroupEntry);
//@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"
}
};
type Props = {
group: RepositoryGroup,
// context props
classes: any
};
type State = {
collapsed: boolean
};
class RepositoryGroupEntry extends React.Component<Props, State> {
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 <RepositoryEntry repository={repository} key={index} />;
});
}
return (
<div className={classes.repoGroup}>
<h2>
<span className={classes.pointer} onClick={this.toggleCollapse}>
<i className={classNames("fa", icon)} /> {group.name}
</span>
</h2>
<hr />
{content}
</div>
);
}
}
export default injectSheet(styles)(RepositoryGroupEntry);