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

refactoring design

Browse Source
This commit is contained in:
Maren Süwer
2018-11-01 09:19:29 +01:00
parent e7f35b41fe
commit 8db96afb8d
1 changed files with 45 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
scm-ui/src/repos/sources/containers/Content.js
View File

@@ -59,7 +59,7 @@ class Content extends React.Component<Props, State> {
error: new Error(),
hasError: false,
loaded: false,
collapsed: false
collapsed: true
};
}
@@ -93,9 +93,32 @@ class Content extends React.Component<Props, State> {
};
showHeader() {
const { file, revision, classes } = this.props;
const { file, classes } = this.props;
const collapsed = this.state.collapsed;
const date = <DateFromNow date={file.lastModified} />;
const icon = collapsed ? "fa-angle-right" : "fa-angle-down";
const fileSize = file.directory ? "" : <FileSize bytes={file.length} />;
return (
<span className={classes.pointer} onClick={this.toggleCollapse}>
<article className="media">
<div className="media-left">
<i className={classNames("fa", icon)} />
</div>
<div className="media-content">
<div className="content">{file.name}</div>
</div>
<p className="media-right">{fileSize}</p>
</article>
</span>
);
}
showMoreInformation() {
const collapsed = this.state.collapsed;
const { classes, file, revision } = this.props;
const date = <DateFromNow date={file.lastModified} />;
const description = file.description ? (
<p>
{file.description.split("\n").map((item, key) => {
@@ -108,31 +131,29 @@ class Content extends React.Component<Props, State> {
})}
</p>
) : null;
const branch = "[" + revision + "]";
const icon = collapsed ? "fa-angle-right" : "fa-angle-down";
return (
<span className={classes.pointer} onClick={this.toggleCollapse}>
<article className="media">
<div className="media-left">
<i className={classNames("fa", icon)} />
</div>
<div className="media-content">
<div className="content">{file.name}</div>
</div>
<div className="media-right">{date} + Size</div>
</article>
</span>
);
}
showMoreInformation() {
const collapsed = this.state.collapsed;
const { classes } = this.props;
if (!collapsed) {
return (
<div className={classNames("panel-block", classes.toCenterContent)}>
"Filename": ... "Path": ... "Branch" ...
<table className="table">
<tbody>
<tr>
<th>Path</th>
<th>{file.path}</th>
</tr>
<tr>
<th>Branch</th>
<th>{revision}</th>
</tr>
<tr>
<th>Last modified</th>
<th>{date}</th>
</tr>
<tr>
<th>Description</th>
<th>{description}</th>
</tr>
</tbody>
</table>
</div>
);
}
@@ -168,7 +189,6 @@ class Content extends React.Component<Props, State> {
const header = this.showHeader();
const content = this.showContent();
const moreInformation = this.showMoreInformation();
const fileSize = file.directory ? "" : <FileSize bytes={file.length} />;
return (
<div>