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

shorten description if it is longer than expected

Browse Source
This commit is contained in:
Maren Süwer
2018-12-20 09:48:01 +01:00
parent d559c85b6d
commit 0e924a3176
2 changed files with 131 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

13
scm-ui/styles/scm.scss
View File

@@ -117,6 +117,19 @@ $fa-font-path: "webfonts";
} }
} }
.media {
.media-content{
width: calc(50% - .75rem);
max-height: 120px;
.shorten-text{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
// tables // tables
.table { .table {
width: 100%; width: 100%;