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

More UI changes

Browse Source
This commit is contained in:
Janika Kefel
2018-12-19 13:28:04 +01:00
parent 3a62f81ba0
commit 4d181a574a
17 changed files with 1425 additions and 1358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
scm-ui/src/repos/components/list/RepositoryEntry.js
View File

@@ -1,113 +1,108 @@
//@flow
import React from "react";
import { Link } from "react-router-dom";
import injectSheet from "react-jss";
import type { Repository } from "@scm-manager/ui-types";
import { DateFromNow } from "@scm-manager/ui-components";
import RepositoryEntryLink from "./RepositoryEntryLink";
import classNames from "classnames";
import RepositoryAvatar from "./RepositoryAvatar";
const styles = {
outer: {
position: "relative"
},
overlay: {
position: "absolute",
left: 0,
top: 0,
bottom: 0,
right: 0
},
inner: {
position: "relative",
pointerEvents: "none",
zIndex: 1
},
innerLink: {
pointerEvents: "all"
}
};
type Props = {
repository: Repository,
// context props
classes: any
};
class RepositoryEntry extends React.Component<Props> {
createLink = (repository: Repository) => {
return `/repo/${repository.namespace}/${repository.name}`;
};
renderChangesetsLink = (repository: Repository, repositoryLink: string) => {
if (repository._links["changesets"]) {
return (
<RepositoryEntryLink
iconClass="fa-code-branch"
to={repositoryLink + "/changesets"}
/>
);
}
return null;
};
renderSourcesLink = (repository: Repository, repositoryLink: string) => {
if (repository._links["sources"]) {
return (
<RepositoryEntryLink
iconClass="fa-code"
to={repositoryLink + "/sources"}
/>
);
}
return null;
};
renderModifyLink = (repository: Repository, repositoryLink: string) => {
if (repository._links["update"]) {
return (
<RepositoryEntryLink iconClass="fa-cog" to={repositoryLink + "/edit"} />
);
}
return null;
};
render() {
const { repository, classes } = this.props;
const repositoryLink = this.createLink(repository);
return (
<div className={classNames("box", "box-link-shadow", classes.outer)}>
<Link className={classes.overlay} to={repositoryLink} />
<article className={classNames("media", classes.inner)}>
<figure className="media-left">
<RepositoryAvatar repository={repository} />
</figure>
<div className="media-content">
<div className="content">
<p>
<strong>{repository.name}</strong>
<br />
{repository.description}
</p>
</div>
<nav className="level is-mobile">
<div className="level-left">
{this.renderChangesetsLink(repository, repositoryLink)}
{this.renderSourcesLink(repository, repositoryLink)}
{this.renderModifyLink(repository, repositoryLink)}
</div>
<div className="level-right is-hidden-mobile">
<small className="level-item">
<DateFromNow date={repository.creationDate} />
</small>
</div>
</nav>
</div>
</article>
</div>
);
}
}
export default injectSheet(styles)(RepositoryEntry);
//@flow
import React from "react";
import { Link } from "react-router-dom";
import injectSheet from "react-jss";
import type { Repository } from "@scm-manager/ui-types";
import { DateFromNow } from "@scm-manager/ui-components";
import RepositoryEntryLink from "./RepositoryEntryLink";
import classNames from "classnames";
import RepositoryAvatar from "./RepositoryAvatar";
const styles = {
overlay: {
position: "absolute",
height: "calc(120px - 1.5rem)",
width: "calc(50% - 3rem)"
},
inner: {
position: "relative",
pointerEvents: "none",
zIndex: 1
},
innerLink: {
pointerEvents: "all"
}
};
type Props = {
repository: Repository,
// context props
classes: any
};
class RepositoryEntry extends React.Component<Props> {
createLink = (repository: Repository) => {
return `/repo/${repository.namespace}/${repository.name}`;
};
renderChangesetsLink = (repository: Repository, repositoryLink: string) => {
if (repository._links["changesets"]) {
return (
<RepositoryEntryLink
iconClass="fa-code-branch fa-lg"
to={repositoryLink + "/changesets"}
/>
);
}
return null;
};
renderSourcesLink = (repository: Repository, repositoryLink: string) => {
if (repository._links["sources"]) {
return (
<RepositoryEntryLink
iconClass="fa-code fa-lg"
to={repositoryLink + "/sources"}
/>
);
}
return null;
};
renderModifyLink = (repository: Repository, repositoryLink: string) => {
if (repository._links["update"]) {
return (
<RepositoryEntryLink iconClass="fa-cog fa-lg" to={repositoryLink + "/edit"} />
);
}
return null;
};
render() {
const { repository, classes } = this.props;
const repositoryLink = this.createLink(repository);
return (
<div className={classNames("box", "box-link-shadow", "column", "is-half")}>
<Link className={classNames(classes.overlay)} to={repositoryLink} />
<article className={classNames("media", classes.inner)}>
<figure className="media-left">
<RepositoryAvatar repository={repository} />
</figure>
<div className="media-content">
<div className="content">
<p>
<strong>{repository.name}</strong>
<br />
{repository.description}
</p>
</div>
<nav className="level is-mobile">
<div className="level-left">
{this.renderChangesetsLink(repository, repositoryLink)}
{this.renderSourcesLink(repository, repositoryLink)}
{this.renderModifyLink(repository, repositoryLink)}
</div>
<div className="level-right is-hidden-mobile">
<small className="level-item">
<DateFromNow date={repository.creationDate} />
</small>
</div>
</nav>
</div>
</article>
</div>
);
}
}
export default injectSheet(styles)(RepositoryEntry);