diff --git a/scm-ui-components/packages/ui-components/src/BranchSelector.js b/scm-ui-components/packages/ui-components/src/BranchSelector.js index aa90dec591..d03011bfdd 100644 --- a/scm-ui-components/packages/ui-components/src/BranchSelector.js +++ b/scm-ui-components/packages/ui-components/src/BranchSelector.js @@ -12,6 +12,11 @@ const styles = { }, minWidthOfLabel: { minWidth: "4.5rem" + }, + wrapper: { + padding: "1rem 1.5rem 0.25rem 1.5rem", + border: "1px solid #eee", + borderRadius: "5px 5px 0 0" } }; @@ -43,7 +48,13 @@ class BranchSelector extends React.Component { if (branches) { return ( -
+
{ render() { - return + const { classes } = this.props; + return ; } } -export default HelpIcon; +export default injectSheet(styles)(HelpIcon); diff --git a/scm-ui-components/packages/ui-components/src/buttons/AddButton.js b/scm-ui-components/packages/ui-components/src/buttons/AddButton.js index de72bdaab9..8f46fb66a4 100644 --- a/scm-ui-components/packages/ui-components/src/buttons/AddButton.js +++ b/scm-ui-components/packages/ui-components/src/buttons/AddButton.js @@ -1,11 +1,11 @@ -//@flow -import React from "react"; -import Button, { type ButtonProps } from "./Button"; - -class AddButton extends React.Component { - render() { - return
); } diff --git a/scm-ui/src/config/components/form/LoginAttempt.js b/scm-ui/src/config/components/form/LoginAttempt.js index ca16761ba7..b0ca580283 100644 --- a/scm-ui/src/config/components/form/LoginAttempt.js +++ b/scm-ui/src/config/components/form/LoginAttempt.js @@ -40,24 +40,30 @@ class LoginAttempt extends React.Component { return (
- - +
+
+ +
+
+ +
+
); } diff --git a/scm-ui/src/config/components/form/ProxySettings.js b/scm-ui/src/config/components/form/ProxySettings.js index 7656bc270c..ed92d74b12 100644 --- a/scm-ui/src/config/components/form/ProxySettings.js +++ b/scm-ui/src/config/components/form/ProxySettings.js @@ -37,56 +37,76 @@ class ProxySettings extends React.Component { return (
- - - - - - - this.props.onChange(isValid, changedValue, name) - } - disabled={!enableProxy || !hasUpdatePermission} - /> - +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ + this.props.onChange(isValid, changedValue, name) + } + disabled={!enableProxy || !hasUpdatePermission} + /> + +
+
); } diff --git a/scm-ui/src/config/containers/Config.js b/scm-ui/src/config/containers/Config.js index 6d935fe33a..60dc9bb75f 100644 --- a/scm-ui/src/config/containers/Config.js +++ b/scm-ui/src/config/containers/Config.js @@ -1,86 +1,86 @@ -// @flow -import React from "react"; -import { translate } from "react-i18next"; -import { Route } from "react-router"; -import { ExtensionPoint } from "@scm-manager/ui-extensions"; - -import type { Links } from "@scm-manager/ui-types"; -import { Page, Navigation, NavLink, Section } from "@scm-manager/ui-components"; -import GlobalConfig from "./GlobalConfig"; -import type { History } from "history"; -import {connect} from "react-redux"; -import {compose} from "redux"; -import { getLinks } from "../../modules/indexResource"; - -type Props = { - links: Links, - - // context objects - t: string => string, - match: any, - history: History -}; - -class Config extends React.Component { - stripEndingSlash = (url: string) => { - if (url.endsWith("/")) { - return url.substring(0, url.length - 2); - } - return url; - }; - - matchedUrl = () => { - return this.stripEndingSlash(this.props.match.url); - }; - - render() { - const { links, t } = this.props; - - const url = this.matchedUrl(); - const extensionProps = { - links, - url - }; - - return ( - -
-
- - -
-
- -
- - -
- -
-
- - ); - } -} - -const mapStateToProps = (state: any) => { - const links = getLinks(state); - return { - links - }; -}; - -export default compose( - connect(mapStateToProps), - translate("config") -)(Config); - +// @flow +import React from "react"; +import { translate } from "react-i18next"; +import { Route } from "react-router"; +import { ExtensionPoint } from "@scm-manager/ui-extensions"; + +import type { Links } from "@scm-manager/ui-types"; +import { Page, Navigation, NavLink, Section } from "@scm-manager/ui-components"; +import GlobalConfig from "./GlobalConfig"; +import type { History } from "history"; +import {connect} from "react-redux"; +import {compose} from "redux"; +import { getLinks } from "../../modules/indexResource"; + +type Props = { + links: Links, + + // context objects + t: string => string, + match: any, + history: History +}; + +class Config extends React.Component { + stripEndingSlash = (url: string) => { + if (url.endsWith("/")) { + return url.substring(0, url.length - 2); + } + return url; + }; + + matchedUrl = () => { + return this.stripEndingSlash(this.props.match.url); + }; + + render() { + const { links, t } = this.props; + + const url = this.matchedUrl(); + const extensionProps = { + links, + url + }; + + return ( + +
+
+ + +
+
+ +
+ + +
+ +
+
+ + ); + } +} + +const mapStateToProps = (state: any) => { + const links = getLinks(state); + return { + links + }; +}; + +export default compose( + connect(mapStateToProps), + translate("config") +)(Config); + diff --git a/scm-ui/src/containers/ProfileInfo.js b/scm-ui/src/containers/ProfileInfo.js index 7adc3065b7..9c4a5a9323 100644 --- a/scm-ui/src/containers/ProfileInfo.js +++ b/scm-ui/src/containers/ProfileInfo.js @@ -1,53 +1,53 @@ -// @flow -import React from "react"; -import type { Me } from "@scm-manager/ui-types"; -import { MailLink, AvatarWrapper, AvatarImage } from "@scm-manager/ui-components"; -import { compose } from "redux"; -import { translate } from "react-i18next"; - -type Props = { - me: Me, - - // Context props - t: string => string -}; -type State = {}; - -class ProfileInfo extends React.Component { - render() { - const { me, t } = this.props; - return ( -
- -
-

- -

-
- -
- - - - - - - - - - - - - - - -
{t("profile.username")}{me.name}
{t("profile.displayName")}{me.displayName}
{t("profile.mail")} - -
-
-
- ); - } -} - -export default compose(translate("commons"))(ProfileInfo); +// @flow +import React from "react"; +import type { Me } from "@scm-manager/ui-types"; +import { MailLink, AvatarWrapper, AvatarImage } from "@scm-manager/ui-components"; +import { compose } from "redux"; +import { translate } from "react-i18next"; + +type Props = { + me: Me, + + // Context props + t: string => string +}; +type State = {}; + +class ProfileInfo extends React.Component { + render() { + const { me, t } = this.props; + return ( +
+ +
+

+ +

+
+ +
+ + + + + + + + + + + + + + + +
{t("profile.username")}{me.name}
{t("profile.displayName")}{me.displayName}
{t("profile.mail")} + +
+
+
+ ); + } +} + +export default compose(translate("commons"))(ProfileInfo); diff --git a/scm-ui/src/groups/components/table/Details.js b/scm-ui/src/groups/components/table/Details.js index 097822a1f3..eb4c3fa0d5 100644 --- a/scm-ui/src/groups/components/table/Details.js +++ b/scm-ui/src/groups/components/table/Details.js @@ -1,69 +1,69 @@ -//@flow -import React from "react"; -import type { Group } from "@scm-manager/ui-types"; -import { translate } from "react-i18next"; -import GroupMember from "./GroupMember"; -import { DateFromNow } from "@scm-manager/ui-components"; - -type Props = { - group: Group, - t: string => string -}; - -class Details extends React.Component { - render() { - const { group, t } = this.props; - return ( - - - - - - - - - - - - - - - - - - - - - - - {this.renderMembers()} - -
{t("group.name")}{group.name}
{t("group.description")}{group.description}
{t("group.type")}{group.type}
{t("group.creationDate")} - -
{t("group.lastModified")} - -
- ); - } - - renderMembers() { - if (this.props.group.members.length > 0) { - return ( - - - {this.props.t("group.members")} -
    - {this.props.group._embedded.members.map((member, index) => { - return ; - })} -
- - - ); - } else { - return; - } - } -} - -export default translate("groups")(Details); +//@flow +import React from "react"; +import type { Group } from "@scm-manager/ui-types"; +import { translate } from "react-i18next"; +import GroupMember from "./GroupMember"; +import { DateFromNow } from "@scm-manager/ui-components"; + +type Props = { + group: Group, + t: string => string +}; + +class Details extends React.Component { + render() { + const { group, t } = this.props; + return ( + + + + + + + + + + + + + + + + + + + + + + + {this.renderMembers()} + +
{t("group.name")}{group.name}
{t("group.description")}{group.description}
{t("group.type")}{group.type}
{t("group.creationDate")} + +
{t("group.lastModified")} + +
+ ); + } + + renderMembers() { + if (this.props.group.members.length > 0) { + return ( + + + {this.props.t("group.members")} +
    + {this.props.group._embedded.members.map((member, index) => { + return ; + })} +
+ + + ); + } else { + return; + } + } +} + +export default translate("groups")(Details); diff --git a/scm-ui/src/groups/components/table/GroupRow.js b/scm-ui/src/groups/components/table/GroupRow.js index 32a8f946df..ccff8bd193 100644 --- a/scm-ui/src/groups/components/table/GroupRow.js +++ b/scm-ui/src/groups/components/table/GroupRow.js @@ -1,25 +1,25 @@ -// @flow -import React from "react"; -import { Link } from "react-router-dom"; -import type { Group } from "@scm-manager/ui-types"; - -type Props = { - group: Group -}; - -export default class GroupRow extends React.Component { - renderLink(to: string, label: string) { - return {label}; - } - - render() { - const { group } = this.props; - const to = `/group/${group.name}`; - return ( - - {this.renderLink(to, group.name)} - {group.description} - - ); - } -} +// @flow +import React from "react"; +import { Link } from "react-router-dom"; +import type { Group } from "@scm-manager/ui-types"; + +type Props = { + group: Group +}; + +export default class GroupRow extends React.Component { + renderLink(to: string, label: string) { + return {label}; + } + + render() { + const { group } = this.props; + const to = `/group/${group.name}`; + return ( + + {this.renderLink(to, group.name)} + {group.description} + + ); + } +} diff --git a/scm-ui/src/groups/components/table/GroupTable.js b/scm-ui/src/groups/components/table/GroupTable.js index 30c8401d7d..cd38180fc4 100644 --- a/scm-ui/src/groups/components/table/GroupTable.js +++ b/scm-ui/src/groups/components/table/GroupTable.js @@ -1,33 +1,33 @@ -// @flow -import React from "react"; -import { translate } from "react-i18next"; -import GroupRow from "./GroupRow"; -import type { Group } from "@scm-manager/ui-types"; - -type Props = { - t: string => string, - groups: Group[] -}; - -class GroupTable extends React.Component { - render() { - const { groups, t } = this.props; - return ( - - - - - - - - - {groups.map((group, index) => { - return ; - })} - -
{t("group.name")}{t("group.description")}
- ); - } -} - -export default translate("groups")(GroupTable); +// @flow +import React from "react"; +import { translate } from "react-i18next"; +import GroupRow from "./GroupRow"; +import type { Group } from "@scm-manager/ui-types"; + +type Props = { + t: string => string, + groups: Group[] +}; + +class GroupTable extends React.Component { + render() { + const { groups, t } = this.props; + return ( + + + + + + + + + {groups.map((group, index) => { + return ; + })} + +
{t("group.name")}{t("group.description")}
+ ); + } +} + +export default translate("groups")(GroupTable); diff --git a/scm-ui/src/repos/components/RepositoryDetailTable.js b/scm-ui/src/repos/components/RepositoryDetailTable.js index db5f9abbc1..ca63398670 100644 --- a/scm-ui/src/repos/components/RepositoryDetailTable.js +++ b/scm-ui/src/repos/components/RepositoryDetailTable.js @@ -1,55 +1,55 @@ -//@flow -import React from "react"; -import type { Repository } from "@scm-manager/ui-types"; -import { MailLink, DateFromNow } from "@scm-manager/ui-components"; -import { translate } from "react-i18next"; - -type Props = { - repository: Repository, - // context props - t: string => string -}; - -class RepositoryDetailTable extends React.Component { - render() { - const { repository, t } = this.props; - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{t("repository.name")}{repository.name}
{t("repository.type")}{repository.type}
{t("repository.contact")} - -
{t("repository.description")}{repository.description}
{t("repository.creationDate")} - -
{t("repository.lastModified")} - -
- ); - } -} - -export default translate("repos")(RepositoryDetailTable); +//@flow +import React from "react"; +import type { Repository } from "@scm-manager/ui-types"; +import { MailLink, DateFromNow } from "@scm-manager/ui-components"; +import { translate } from "react-i18next"; + +type Props = { + repository: Repository, + // context props + t: string => string +}; + +class RepositoryDetailTable extends React.Component { + render() { + const { repository, t } = this.props; + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{t("repository.name")}{repository.name}
{t("repository.type")}{repository.type}
{t("repository.contact")} + +
{t("repository.description")}{repository.description}
{t("repository.creationDate")} + +
{t("repository.lastModified")} + +
+ ); + } +} + +export default translate("repos")(RepositoryDetailTable); diff --git a/scm-ui/src/repos/components/RepositoryDetails.js b/scm-ui/src/repos/components/RepositoryDetails.js index 99c88fec94..02d7f2f5ac 100644 --- a/scm-ui/src/repos/components/RepositoryDetails.js +++ b/scm-ui/src/repos/components/RepositoryDetails.js @@ -1,29 +1,30 @@ -//@flow -import React from "react"; -import type { Repository } from "@scm-manager/ui-types"; -import RepositoryDetailTable from "./RepositoryDetailTable"; -import { ExtensionPoint } from "@scm-manager/ui-extensions"; - -type Props = { - repository: Repository -}; - -class RepositoryDetails extends React.Component { - render() { - const { repository } = this.props; - return ( -
- -
- -
-
- ); - } -} - -export default RepositoryDetails; +//@flow +import React from "react"; +import type { Repository } from "@scm-manager/ui-types"; +import RepositoryDetailTable from "./RepositoryDetailTable"; +import { ExtensionPoint } from "@scm-manager/ui-extensions"; + +type Props = { + repository: Repository +}; + +class RepositoryDetails extends React.Component { + render() { + const { repository } = this.props; + return ( +
+ +
+
+ +
+
+ ); + } +} + +export default RepositoryDetails; diff --git a/scm-ui/src/repos/components/list/RepositoryEntry.js b/scm-ui/src/repos/components/list/RepositoryEntry.js index bc170144aa..b0b70fc861 100644 --- a/scm-ui/src/repos/components/list/RepositoryEntry.js +++ b/scm-ui/src/repos/components/list/RepositoryEntry.js @@ -9,15 +9,10 @@ import classNames from "classnames"; import RepositoryAvatar from "./RepositoryAvatar"; const styles = { - outer: { - position: "relative" - }, overlay: { position: "absolute", - left: 0, - top: 0, - bottom: 0, - right: 0 + height: "calc(120px - 1.5rem)", + width: "calc(50% - 3rem)" }, inner: { position: "relative", @@ -26,11 +21,16 @@ const styles = { }, innerLink: { pointerEvents: "all" + }, + centerImage: { + marginTop: "0.8em", + marginLeft: "1em !important" } }; type Props = { repository: Repository, + fullColumnWidth?: boolean, // context props classes: any }; @@ -44,7 +44,7 @@ class RepositoryEntry extends React.Component { if (repository._links["changesets"]) { return ( ); @@ -56,7 +56,7 @@ class RepositoryEntry extends React.Component { if (repository._links["sources"]) { return ( ); @@ -67,29 +67,40 @@ class RepositoryEntry extends React.Component { renderModifyLink = (repository: Repository, repositoryLink: string) => { if (repository._links["update"]) { return ( - + ); } return null; }; render() { - const { repository, classes } = this.props; + const { repository, classes, fullColumnWidth } = this.props; const repositoryLink = this.createLink(repository); + const halfColumn = fullColumnWidth ? "is-full" : "is-half"; return ( -
- +
+
-
+
-

+

{repository.name} -
- {repository.description}

+

{repository.description}