Merged in bugfix/diff_view (pull request #294)

bugfix/diff_view
This commit is contained in:
Eduard Heimbuch
2019-08-21 07:41:14 +00:00
3 changed files with 74 additions and 72 deletions

View File

@@ -1,9 +1,9 @@
//@flow //@flow
import React from "react"; import React from "react";
import type {Changeset, Repository} from "@scm-manager/ui-types"; import type { Changeset, Repository } from "@scm-manager/ui-types";
import {Button, ButtonAddons} from "../../buttons"; import { ButtonAddons, Button } from "../../buttons";
import {createChangesetLink, createSourcesLink} from "./changesets"; import { createChangesetLink, createSourcesLink } from "./changesets";
import {translate} from "react-i18next"; import { translate } from "react-i18next";
type Props = { type Props = {
repository: Repository, repository: Repository,
@@ -21,7 +21,7 @@ class ChangesetButtonGroup extends React.Component<Props> {
const sourcesLink = createSourcesLink(repository, changeset); const sourcesLink = createSourcesLink(repository, changeset);
return ( return (
<ButtonAddons className="level-item"> <ButtonAddons className="is-marginless">
<Button link={changesetLink} className="reduced-mobile"> <Button link={changesetLink} className="reduced-mobile">
<span className="icon"> <span className="icon">
<i className="fas fa-exchange-alt" /> <i className="fas fa-exchange-alt" />

View File

@@ -1,16 +1,16 @@
//@flow //@flow
import React from "react"; import React from "react";
import type {Changeset, Repository} from "@scm-manager/ui-types"; import type { Changeset, Repository } from "@scm-manager/ui-types";
import classNames from "classnames"; import classNames from "classnames";
import {Interpolate, translate} from "react-i18next"; import { Interpolate, translate } from "react-i18next";
import ChangesetId from "./ChangesetId"; import ChangesetId from "./ChangesetId";
import injectSheet from "react-jss"; import injectSheet from "react-jss";
import {DateFromNow} from "../.."; import { DateFromNow } from "../..";
import ChangesetAuthor from "./ChangesetAuthor"; import ChangesetAuthor from "./ChangesetAuthor";
import {parseDescription} from "./changesets"; import { parseDescription } from "./changesets";
import {AvatarImage, AvatarWrapper} from "../../avatar"; import { AvatarWrapper, AvatarImage } from "../../avatar";
import {ExtensionPoint} from "@scm-manager/ui-extensions"; import { ExtensionPoint } from "@scm-manager/ui-extensions";
import ChangesetTags from "./ChangesetTags"; import ChangesetTags from "./ChangesetTags";
import ChangesetButtonGroup from "./ChangesetButtonGroup"; import ChangesetButtonGroup from "./ChangesetButtonGroup";
@@ -26,21 +26,22 @@ const styles = {
}, },
avatarFigure: { avatarFigure: {
marginTop: ".25rem", marginTop: ".25rem",
marginRight: ".5rem", marginRight: ".5rem"
}, },
avatarImage: { avatarImage: {
height: "35px", height: "35px",
width: "35px" width: "35px"
}, },
isVcentered: {
marginTop: "auto",
marginBottom: "auto"
},
metadata: { metadata: {
marginLeft: 0 marginLeft: 0
}, },
tag: { isVcentered: {
marginTop: ".5rem" alignSelf: "center"
},
flexVcenter: {
display: "flex",
alignItems: "center",
justifyContent: "flex-end"
} }
}; };
@@ -65,61 +66,65 @@ class ChangesetRow extends React.Component<Props> {
return ( return (
<div className={classes.changeset}> <div className={classes.changeset}>
<div className="columns"> <div className="columns is-gapless is-mobile">
<div className="column is-three-fifths"> <div className="column is-three-fifths">
<div className="columns is-gapless">
<h4 className="has-text-weight-bold is-ellipsis-overflow"> <div className="column is-four-fifths">
<ExtensionPoint <h4 className="has-text-weight-bold is-ellipsis-overflow">
name="changeset.description" <ExtensionPoint
props={{ changeset, value: description.title }} name="changeset.description"
renderAll={false} props={{ changeset, value: description.title }}
> renderAll={false}
{description.title} >
</ExtensionPoint> {description.title}
</h4> </ExtensionPoint>
</h4>
<div className="media"> <div className="media">
<AvatarWrapper> <AvatarWrapper>
<figure className={classNames(classes.avatarFigure, "media-left")}> <figure
<div className={classNames("image", classes.avatarImage)}> className={classNames(classes.avatarFigure, "media-left")}
<AvatarImage person={changeset.author} /> >
<div className={classNames("image", classes.avatarImage)}>
<AvatarImage person={changeset.author} />
</div>
</figure>
</AvatarWrapper>
<div className={classNames(classes.metadata, "media-right")}>
<p className="is-hidden-touch">
<Interpolate
i18nKey="changeset.summary"
id={changesetId}
time={dateFromNow}
/>
</p>
<p className="is-hidden-desktop">
<Interpolate
i18nKey="changeset.shortSummary"
id={changesetId}
time={dateFromNow}
/>
</p>
<p className="is-size-7">
<ChangesetAuthor changeset={changeset} />
</p>
</div> </div>
</figure> </div>
</AvatarWrapper> </div>
<div className={classNames(classes.metadata, "media-right")}> <div className={classNames("column", classes.isVcentered)}>
<p className="is-hidden-mobile is-hidden-tablet-only"> <ChangesetTags changeset={changeset} />
<Interpolate
i18nKey="changeset.summary"
id={changesetId}
time={dateFromNow}
/>
</p>
<p className="is-hidden-desktop">
<Interpolate
i18nKey="changeset.shortSummary"
id={changesetId}
time={dateFromNow}
/>
</p>
<p className="is-size-7">
<ChangesetAuthor changeset={changeset} />
</p>
</div> </div>
</div> </div>
</div> </div>
<div className={classNames("column", classes.isVcentered)}> <div className={classNames("column", classes.flexVcenter)}>
<ChangesetTags changeset={changeset} /> <ChangesetButtonGroup
<div className="is-pulled-right level"> repository={repository}
<ChangesetButtonGroup repository={repository} changeset={changeset} /> changeset={changeset}
<div className={classes.isVcentered}> />
<ExtensionPoint <ExtensionPoint
name="changeset.right" name="changeset.right"
props={{ repository, changeset }} props={{ repository, changeset }}
renderAll={true} renderAll={true}
/> />
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -4,9 +4,6 @@ import injectSheet from "react-jss";
import classNames from "classnames"; import classNames from "classnames";
const styles = { const styles = {
tag: {
marginTop: ".5rem"
},
spacing: { spacing: {
marginRight: ".25rem" marginRight: ".25rem"
} }
@@ -24,7 +21,7 @@ class ChangesetTagBase extends React.Component<Props> {
render() { render() {
const { icon, label, classes } = this.props; const { icon, label, classes } = this.props;
return ( return (
<span className={classNames(classes.tag, "tag", "is-info")}> <span className={classNames("tag", "is-info")}>
<span className={classNames("fa", icon, classes.spacing)} /> {label} <span className={classNames("fa", icon, classes.spacing)} /> {label}
</span> </span>
); );