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

Merged in feature/unify_table (pull request #175)

Browse Source 
Feature/unify table
This commit is contained in:
Florian Scholdei
2019-02-06 14:11:24 +00:00
parent ddbe1512e4 37b6e986bc
commit 324f6b55c4
10 changed files with 119 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
scm-ui-components/packages/ui-components/src/BranchSelector.js
View File

@@ -13,10 +13,11 @@ const styles = {
minWidthOfLabel: { minWidthOfLabel: {
minWidth: "4.5rem" minWidth: "4.5rem"
}, },
wrapper: { labelSizing: {
padding: "1rem 1.5rem 0.25rem 1.5rem", fontSize: "1rem !important"
border: "1px solid #eee", },
borderRadius: "5px 5px 0 0" noBottomMargin: {
marginBottom: "0 !important"
} }
}; };
@@ -52,9 +53,9 @@ class BranchSelector extends React.Component<Props, State> {
return ( return (
<div <div
className={classNames( className={classNames(
"has-background-light field", "field",
"is-horizontal", "is-horizontal",
classes.wrapper classes.noBottomMargin
)} )}
> >
<div <div
@@ -65,10 +66,14 @@ class BranchSelector extends React.Component<Props, State> {
classes.minWidthOfLabel classes.minWidthOfLabel
)} )}
> >
<label className="label">{label}</label> <label className={classNames("label", classes.labelSizing)}>
{label}
</label>
</div> </div>
<div className="field-body"> <div className="field-body">
<div className="field is-narrow"> <div
className={classNames("field is-narrow", classes.noBottomMargin)}
>
<div className="control"> <div className="control">
<DropDown <DropDown
className="is-fullwidth" className="is-fullwidth"

2
scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetList.js
View File

@@ -21,7 +21,7 @@ class ChangesetList extends React.Component<Props> {
/> />
); );
}); });
return <div className="box">{content}</div>; return <>{content}</>;
} }
} }

33
scm-ui/src/repos/containers/Changesets.js
View File

@@ -1,8 +1,13 @@
// @flow // @flow
import React from "react"; import React from "react";
import {withRouter} from "react-router-dom"; import { withRouter } from "react-router-dom";
import type {Branch, Changeset, PagedCollection, Repository} from "@scm-manager/ui-types"; import type {
Branch,
Changeset,
PagedCollection,
Repository
} from "@scm-manager/ui-types";
import { import {
fetchChangesets, fetchChangesets,
getChangesets, getChangesets,
@@ -11,9 +16,15 @@ import {
selectListAsCollection selectListAsCollection
} from "../modules/changesets"; } from "../modules/changesets";
import {connect} from "react-redux"; import { connect } from "react-redux";
import {ErrorNotification, getPageFromMatch, LinkPaginator, ChangesetList, Loading} from "@scm-manager/ui-components"; import {
import {compose} from "redux"; ErrorNotification,
getPageFromMatch,
LinkPaginator,
ChangesetList,
Loading
} from "@scm-manager/ui-components";
import { compose } from "redux";
type Props = { type Props = {
repository: Repository, repository: Repository,
@@ -64,13 +75,21 @@ class Changesets extends React.Component<Props> {
renderList = () => { renderList = () => {
const { repository, changesets } = this.props; const { repository, changesets } = this.props;
return <ChangesetList repository={repository} changesets={changesets} />; return (
<div className="panel-block">
<ChangesetList repository={repository} changesets={changesets} />
</div>
);
}; };
renderPaginator = () => { renderPaginator = () => {
const { page, list } = this.props; const { page, list } = this.props;
if (list) { if (list) {
return <LinkPaginator page={page} collection={list} />; return (
<div className="panel-footer">
<LinkPaginator page={page} collection={list} />
</div>
);
} }
return null; return null;
}; };

6
scm-ui/src/repos/containers/ChangesetsRoot.js
View File

@@ -89,10 +89,12 @@ class BranchRoot extends React.Component<Props> {
const changesets = <Changesets repository={repository} branch={branch} />; const changesets = <Changesets repository={repository} branch={branch} />;
return ( return (
<> <div className="panel">
<div className="panel-heading">
{this.renderBranchSelector()} {this.renderBranchSelector()}
</div>
<Route path={`${url}/:page?`} component={() => changesets} /> <Route path={`${url}/:page?`} component={() => changesets} />
</> </div>
); );
} }

54
scm-ui/src/repos/sources/components/FileTree.js
View File

@@ -108,32 +108,34 @@ class FileTree extends React.Component<Props> {
} }
return ( return (
<table className="table table-hover table-sm is-fullwidth"> <div className="panel-block">
<thead> <table className="table table-hover table-sm is-fullwidth">
<tr> <thead>
<th className={classes.iconColumn} /> <tr>
<th>{t("sources.file-tree.name")}</th> <th className={classes.iconColumn} />
<th className="is-hidden-mobile"> <th>{t("sources.file-tree.name")}</th>
{t("sources.file-tree.length")} <th className="is-hidden-mobile">
</th> {t("sources.file-tree.length")}
<th className="is-hidden-mobile"> </th>
{t("sources.file-tree.lastModified")} <th className="is-hidden-mobile">
</th> {t("sources.file-tree.lastModified")}
<th className="is-hidden-mobile"> </th>
{t("sources.file-tree.description")} <th className="is-hidden-mobile">
</th> {t("sources.file-tree.description")}
</tr> </th>
</thead> </tr>
<tbody> </thead>
{files.map(file => ( <tbody>
<FileTreeLeaf {files.map(file => (
key={file.name} <FileTreeLeaf
file={file} key={file.name}
baseUrl={baseUrlWithRevision} file={file}
/> baseUrl={baseUrlWithRevision}
))} />
</tbody> ))}
</table> </tbody>
</table>
</div>
); );
} }
} }

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

@@ -29,9 +29,6 @@ type State = {
}; };
const styles = { const styles = {
toCenterContent: {
display: "block"
},
pointer: { pointer: {
cursor: "pointer" cursor: "pointer"
}, },
@@ -126,7 +123,6 @@ class Content extends React.Component<Props, State> {
<div <div
className={classNames( className={classNames(
"panel-block", "panel-block",
classes.toCenterContent,
classes.hasBackground classes.hasBackground
)} )}
> >
@@ -161,7 +157,7 @@ class Content extends React.Component<Props, State> {
} }
render() { render() {
const { file, revision, repository, path, classes } = this.props; const { file, revision, repository, path } = this.props;
const { showHistory } = this.state; const { showHistory } = this.state;
const header = this.showHeader(); const header = this.showHeader();
@@ -180,13 +176,11 @@ class Content extends React.Component<Props, State> {
return ( return (
<div> <div>
<nav className="panel"> <div className="panel">
<article className="panel-heading">{header}</article> <div className="panel-heading">{header}</div>
{moreInformation} {moreInformation}
<div className={classNames("panel-block", classes.toCenterContent)}> {content}
{content} </div>
</div>
</nav>
</div> </div>
); );
} }

16
scm-ui/src/repos/sources/containers/HistoryView.js
View File

@@ -79,12 +79,16 @@ class HistoryView extends React.Component<Props, State> {
const currentPage = page + 1; const currentPage = page + 1;
return ( return (
<> <>
<ChangesetList repository={repository} changesets={changesets} /> <div className="panel-block">
<StatePaginator <ChangesetList repository={repository} changesets={changesets} />
page={currentPage} </div>
collection={pageCollection} <div className="panel-footer">
updatePage={(newPage: number) => this.updatePage(newPage)} <StatePaginator
/> page={currentPage}
collection={pageCollection}
updatePage={(newPage: number) => this.updatePage(newPage)}
/>
</div>
</> </>
); );
} }

6
scm-ui/src/repos/sources/containers/Sources.js
View File

@@ -93,8 +93,10 @@ class Sources extends React.Component<Props> {
if (currentFileIsDirectory) { if (currentFileIsDirectory) {
return ( return (
<div className={"has-border-around"}> <div className="panel">
{this.renderBranchSelector()} <div className="panel-heading">
{this.renderBranchSelector()}
</div>
<FileTree <FileTree
repository={repository} repository={repository}
revision={revision} revision={revision}

2
scm-ui/src/repos/sources/containers/SourcesView.js
View File

@@ -90,7 +90,7 @@ class SourcesView extends React.Component<Props, State> {
const sources = this.showSources(); const sources = this.showSources();
return <>{sources}</>; return <div className="panel-block">{sources}</div>;
} }
} }

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

@@ -94,14 +94,6 @@ $fa-font-path: "webfonts";
} }
} }
//border around options
.has-border-around {
border-top: 1px solid #eee;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
// multiline Columns // multiline Columns
.columns.is-multiline { .columns.is-multiline {
.column.is-half { .column.is-half {
@@ -201,6 +193,33 @@ $fa-font-path: "webfonts";
} }
} }
// panels
.panel {
.panel-heading > .field {
margin-bottom: 0; // replace selector margin
}
.panel-block {
display: block;
}
.panel-footer {
background-color: whitesmoke;
border-radius: 0 0 4px 4px;
color: #363636;
font-size: 1.25em;
font-weight: 300;
line-height: 1.25;
padding: 0.5em 0.75em;
border-left: 1px solid #dbdbdb;
border-right: 1px solid #dbdbdb;
&:last-child {
border-bottom: 1px solid #dbdbdb;
}
}
}
// forms // forms
.field:not(.is-grouped) { .field:not(.is-grouped) {
margin-bottom: 1rem; margin-bottom: 1rem;