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

Merged in feature/ux (pull request #139)

Browse Source 
Feature/ux
This commit is contained in:
Maren Süwer
2018-12-20 10:32:46 +00:00
parent f6ca260b55 dbf01d6cf3
commit 0f64e7edeb
35 changed files with 1863 additions and 11644 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,6 +12,11 @@ const styles = {
}, },
minWidthOfLabel: { minWidthOfLabel: {
minWidth: "4.5rem" 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<Props, State> {
if (branches) { if (branches) {
return ( return (
<div className="box field is-horizontal"> <div
className={classNames(
"has-background-light field",
"is-horizontal",
classes.wrapper
)}
>
<div <div
className={classNames( className={classNames(
"field-label", "field-label",

13
scm-ui-components/packages/ui-components/src/HelpIcon.js
View File

@@ -1,14 +1,23 @@
//@flow //@flow
import React from "react"; import React from "react";
import injectSheet from "react-jss";
import classNames from "classnames"; import classNames from "classnames";
type Props = { type Props = {
classes: any
};
const styles = {
textinfo: {
color: "#98d8f3 !important"
}
}; };
class HelpIcon extends React.Component<Props> { class HelpIcon extends React.Component<Props> {
render() { render() {
return <i className={classNames("fa fa-question has-text-info")} /> const { classes } = this.props;
return <i className={classNames("fa fa-question-circle has-text-info", classes.textinfo)}></i>;
} }
} }
export default HelpIcon; export default injectSheet(styles)(HelpIcon);

11
scm-ui-components/packages/ui-components/src/buttons/CreateButton.js
View File

@@ -1,21 +1,24 @@
//@flow //@flow
import React from "react"; import React from "react";
import injectSheet from "react-jss"; import injectSheet from "react-jss";
import AddButton, { type ButtonProps } from "./Button"; import SubmitButton, { type ButtonProps } from "./SubmitButton";
import classNames from "classnames"; import classNames from "classnames";
const styles = { const styles = {
spacing: { spacing: {
margin: "1em 0 0 1em" marginTop: "2em",
border: "2px solid #e9f7fd",
padding: "1em 1em"
} }
}; };
class CreateButton extends React.Component<ButtonProps> { class CreateButton extends React.Component<ButtonProps> {
render() { render() {
const { classes } = this.props; const { classes } = this.props;
return ( return (
<div className={classNames("is-pulled-right", classes.spacing)}> <div className={classNames("has-text-centered", classes.spacing)}>
<AddButton {...this.props} /> <SubmitButton {...this.props} />
</div> </div>
); );
} }

BIN
scm-ui/public/images/blib.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 48 KiB

BIN
scm-ui/public/images/scmManagerHero.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 KiB

63
scm-ui/src/config/components/form/AdminSettings.js
View File

@@ -20,34 +20,41 @@ class AdminSettings extends React.Component<Props> {
return ( return (
<div> <div>
<Subtitle subtitle={t("admin-settings.name")} /> <Subtitle subtitle={t("admin-settings.name")} />
<AdminGroupTable <div className="columns">
adminGroups={adminGroups} <div className="column is-half">
onChange={(isValid, changedValue, name) => <AdminGroupTable
this.props.onChange(isValid, changedValue, name) adminGroups={adminGroups}
} onChange={(isValid, changedValue, name) =>
disabled={!hasUpdatePermission} this.props.onChange(isValid, changedValue, name)
/> }
<AddEntryToTableField disabled={!hasUpdatePermission}
addEntry={this.addGroup} />
disabled={!hasUpdatePermission}
buttonLabel={t("admin-settings.add-group-button")} <AddEntryToTableField
fieldLabel={t("admin-settings.add-group-textfield")} addEntry={this.addGroup}
errorMessage={t("admin-settings.add-group-error")} disabled={!hasUpdatePermission}
/> buttonLabel={t("admin-settings.add-group-button")}
<AdminUserTable fieldLabel={t("admin-settings.add-group-textfield")}
adminUsers={adminUsers} errorMessage={t("admin-settings.add-group-error")}
onChange={(isValid, changedValue, name) => />
this.props.onChange(isValid, changedValue, name) </div>
} <div className="column is-half">
disabled={!hasUpdatePermission} <AdminUserTable
/> adminUsers={adminUsers}
<AddEntryToTableField onChange={(isValid, changedValue, name) =>
addEntry={this.addUser} this.props.onChange(isValid, changedValue, name)
disabled={!hasUpdatePermission} }
buttonLabel={t("admin-settings.add-user-button")} disabled={!hasUpdatePermission}
fieldLabel={t("admin-settings.add-user-textfield")} />
errorMessage={t("admin-settings.add-user-error")} <AddEntryToTableField
/> addEntry={this.addUser}
disabled={!hasUpdatePermission}
buttonLabel={t("admin-settings.add-user-button")}
fieldLabel={t("admin-settings.add-user-textfield")}
errorMessage={t("admin-settings.add-user-error")}
/>
</div>
</div>
</div> </div>
); );
} }

34
scm-ui/src/config/components/form/BaseUrlSettings.js
View File

@@ -18,20 +18,26 @@ class BaseUrlSettings extends React.Component<Props> {
return ( return (
<div> <div>
<Subtitle subtitle={t("base-url-settings.name")} /> <Subtitle subtitle={t("base-url-settings.name")} />
<Checkbox <div className="columns">
checked={forceBaseUrl} <div className="column is-half">
label={t("base-url-settings.force-base-url")} <Checkbox
onChange={this.handleForceBaseUrlChange} checked={forceBaseUrl}
disabled={!hasUpdatePermission} label={t("base-url-settings.force-base-url")}
helpText={t("help.forceBaseUrlHelpText")} onChange={this.handleForceBaseUrlChange}
/> disabled={!hasUpdatePermission}
<InputField helpText={t("help.forceBaseUrlHelpText")}
label={t("base-url-settings.base-url")} />
onChange={this.handleBaseUrlChange} </div>
value={baseUrl} <div className="column is-half">
disabled={!hasUpdatePermission} <InputField
helpText={t("help.baseUrlHelpText")} label={t("base-url-settings.base-url")}
/> onChange={this.handleBaseUrlChange}
value={baseUrl}
disabled={!hasUpdatePermission}
helpText={t("help.baseUrlHelpText")}
/>
</div>
</div>
</div> </div>
); );
} }

156
scm-ui/src/config/components/form/GeneralSettings.js
View File

@@ -36,70 +36,98 @@ class GeneralSettings extends React.Component<Props> {
return ( return (
<div> <div>
<InputField <div className="columns">
label={t("general-settings.realm-description")} <div className="column is-half">
onChange={this.handleRealmDescriptionChange} <InputField
value={realmDescription} label={t("general-settings.realm-description")}
disabled={!hasUpdatePermission} onChange={this.handleRealmDescriptionChange}
helpText={t("help.realmDescriptionHelpText")} value={realmDescription}
/> disabled={!hasUpdatePermission}
<InputField helpText={t("help.realmDescriptionHelpText")}
label={t("general-settings.date-format")} />
onChange={this.handleDateFormatChange} </div>
value={dateFormat} <div className="column is-half">
disabled={!hasUpdatePermission} <InputField
helpText={t("help.dateFormatHelpText")} label={t("general-settings.date-format")}
/> onChange={this.handleDateFormatChange}
<InputField value={dateFormat}
label={t("general-settings.plugin-url")} disabled={!hasUpdatePermission}
onChange={this.handlePluginUrlChange} helpText={t("help.dateFormatHelpText")}
value={pluginUrl} />
disabled={!hasUpdatePermission} </div>
helpText={t("help.pluginRepositoryHelpText")} </div>
/> <div className="columns">
<InputField <div className="column is-half">
label={t("general-settings.default-namespace-strategy")} <InputField
onChange={this.handleDefaultNamespaceStrategyChange} label={t("general-settings.plugin-url")}
value={defaultNamespaceStrategy} onChange={this.handlePluginUrlChange}
disabled={!hasUpdatePermission} value={pluginUrl}
helpText={t("help.defaultNameSpaceStrategyHelpText")} disabled={!hasUpdatePermission}
/> helpText={t("help.pluginRepositoryHelpText")}
<Checkbox />
checked={enabledXsrfProtection} </div>
label={t("general-settings.enabled-xsrf-protection")} <div className="column is-half">
onChange={this.handleEnabledXsrfProtectionChange} <InputField
disabled={!hasUpdatePermission} label={t("general-settings.default-namespace-strategy")}
helpText={t("help.enableXsrfProtectionHelpText")} onChange={this.handleDefaultNamespaceStrategyChange}
/> value={defaultNamespaceStrategy}
<Checkbox disabled={!hasUpdatePermission}
checked={enableRepositoryArchive} helpText={t("help.defaultNameSpaceStrategyHelpText")}
label={t("general-settings.enable-repository-archive")} />
onChange={this.handleEnableRepositoryArchiveChange} </div>
disabled={!hasUpdatePermission} </div>
helpText={t("help.enableRepositoryArchiveHelpText")} <div className="columns">
/> <div className="column is-half">
<Checkbox <Checkbox
checked={disableGroupingGrid} checked={enabledXsrfProtection}
label={t("general-settings.disable-grouping-grid")} label={t("general-settings.enabled-xsrf-protection")}
onChange={this.handleDisableGroupingGridChange} onChange={this.handleEnabledXsrfProtectionChange}
disabled={!hasUpdatePermission} disabled={!hasUpdatePermission}
helpText={t("help.disableGroupingGridHelpText")} helpText={t("help.enableXsrfProtectionHelpText")}
/> />
<Checkbox </div>
checked={anonymousAccessEnabled} <div className="column is-half">
label={t("general-settings.anonymous-access-enabled")} <Checkbox
onChange={this.handleAnonymousAccessEnabledChange} checked={enableRepositoryArchive}
disabled={!hasUpdatePermission} label={t("general-settings.enable-repository-archive")}
helpText={t("help.allowAnonymousAccessHelpText")} onChange={this.handleEnableRepositoryArchiveChange}
/> disabled={!hasUpdatePermission}
<Checkbox helpText={t("help.enableRepositoryArchiveHelpText")}
checked={skipFailedAuthenticators} />
label={t("general-settings.skip-failed-authenticators")} </div>
onChange={this.handleSkipFailedAuthenticatorsChange} </div>
disabled={!hasUpdatePermission} <div className="columns">
helpText={t("help.skipFailedAuthenticatorsHelpText")} <div className="column is-half">
/> <Checkbox
</div> checked={disableGroupingGrid}
label={t("general-settings.disable-grouping-grid")}
onChange={this.handleDisableGroupingGridChange}
disabled={!hasUpdatePermission}
helpText={t("help.disableGroupingGridHelpText")}
/>
</div>
<div className="column is-half">
<Checkbox
checked={anonymousAccessEnabled}
label={t("general-settings.anonymous-access-enabled")}
onChange={this.handleAnonymousAccessEnabledChange}
disabled={!hasUpdatePermission}
helpText={t("help.allowAnonymousAccessHelpText")}
/>
</div>
</div>
<div className="columns">
<div className="column is-half">
<Checkbox
checked={skipFailedAuthenticators}
label={t("general-settings.skip-failed-authenticators")}
onChange={this.handleSkipFailedAuthenticatorsChange}
disabled={!hasUpdatePermission}
helpText={t("help.skipFailedAuthenticatorsHelpText")}
/>
</div>
</div>
</div>
); );
} }

42
scm-ui/src/config/components/form/LoginAttempt.js
View File

@@ -40,24 +40,30 @@ class LoginAttempt extends React.Component<Props, State> {
return ( return (
<div> <div>
<Subtitle subtitle={t("login-attempt.name")} /> <Subtitle subtitle={t("login-attempt.name")} />
<InputField <div className="columns">
label={t("login-attempt.login-attempt-limit")} <div className="column is-half">
onChange={this.handleLoginAttemptLimitChange} <InputField
value={loginAttemptLimit} label={t("login-attempt.login-attempt-limit")}
disabled={!hasUpdatePermission} onChange={this.handleLoginAttemptLimitChange}
validationError={this.state.loginAttemptLimitError} value={loginAttemptLimit}
errorMessage={t("validation.login-attempt-limit-invalid")} disabled={!hasUpdatePermission}
helpText={t("help.loginAttemptLimitHelpText")} validationError={this.state.loginAttemptLimitError}
/> errorMessage={t("validation.login-attempt-limit-invalid")}
<InputField helpText={t("help.loginAttemptLimitHelpText")}
label={t("login-attempt.login-attempt-limit-timeout")} />
onChange={this.handleLoginAttemptLimitTimeoutChange} </div>
value={loginAttemptLimitTimeout} <div className="column is-half">
disabled={!hasUpdatePermission} <InputField
validationError={this.state.loginAttemptLimitTimeoutError} label={t("login-attempt.login-attempt-limit-timeout")}
errorMessage={t("validation.login-attempt-limit-timeout-invalid")} onChange={this.handleLoginAttemptLimitTimeoutChange}
helpText={t("help.loginAttemptLimitTimeoutHelpText")} value={loginAttemptLimitTimeout}
/> disabled={!hasUpdatePermission}
validationError={this.state.loginAttemptLimitTimeoutError}
errorMessage={t("validation.login-attempt-limit-timeout-invalid")}
helpText={t("help.loginAttemptLimitTimeoutHelpText")}
/>
</div>
</div>
</div> </div>
); );
} }

120
scm-ui/src/config/components/form/ProxySettings.js
View File

@@ -37,56 +37,76 @@ class ProxySettings extends React.Component<Props> {
return ( return (
<div> <div>
<Subtitle subtitle={t("proxy-settings.name")} /> <Subtitle subtitle={t("proxy-settings.name")} />
<Checkbox <div className="columns">
checked={enableProxy} <div className="column is-full">
label={t("proxy-settings.enable-proxy")} <Checkbox
onChange={this.handleEnableProxyChange} checked={enableProxy}
disabled={!hasUpdatePermission} label={t("proxy-settings.enable-proxy")}
helpText={t("help.enableProxyHelpText")} onChange={this.handleEnableProxyChange}
/> disabled={!hasUpdatePermission}
<InputField helpText={t("help.enableProxyHelpText")}
label={t("proxy-settings.proxy-password")} />
onChange={this.handleProxyPasswordChange} </div>
value={proxyPassword} </div>
type="password" <div className="columns">
disabled={!enableProxy || !hasUpdatePermission} <div className="column is-half">
helpText={t("help.proxyPasswordHelpText")} <InputField
/> label={t("proxy-settings.proxy-password")}
<InputField onChange={this.handleProxyPasswordChange}
label={t("proxy-settings.proxy-port")} value={proxyPassword}
value={proxyPort} type="password"
onChange={this.handleProxyPortChange} disabled={!enableProxy || !hasUpdatePermission}
disabled={!enableProxy || !hasUpdatePermission} helpText={t("help.proxyPasswordHelpText")}
helpText={t("help.proxyPortHelpText")} />
/> </div>
<InputField <div className="column is-half">
label={t("proxy-settings.proxy-server")} <InputField
value={proxyServer} label={t("proxy-settings.proxy-port")}
onChange={this.handleProxyServerChange} value={proxyPort}
disabled={!enableProxy || !hasUpdatePermission} onChange={this.handleProxyPortChange}
helpText={t("help.proxyServerHelpText")} disabled={!enableProxy || !hasUpdatePermission}
/> helpText={t("help.proxyPortHelpText")}
<InputField />
label={t("proxy-settings.proxy-user")} </div>
value={proxyUser} </div>
onChange={this.handleProxyUserChange} <div className="columns">
disabled={!enableProxy || !hasUpdatePermission} <div className="column is-half">
helpText={t("help.proxyUserHelpText")} <InputField
/> label={t("proxy-settings.proxy-server")}
<ProxyExcludesTable value={proxyServer}
proxyExcludes={proxyExcludes} onChange={this.handleProxyServerChange}
onChange={(isValid, changedValue, name) => disabled={!enableProxy || !hasUpdatePermission}
this.props.onChange(isValid, changedValue, name) helpText={t("help.proxyServerHelpText")}
} />
disabled={!enableProxy || !hasUpdatePermission} </div>
/> <div className="column is-half">
<AddEntryToTableField <InputField
addEntry={this.addProxyExclude} label={t("proxy-settings.proxy-user")}
disabled={!enableProxy || !hasUpdatePermission} value={proxyUser}
buttonLabel={t("proxy-settings.add-proxy-exclude-button")} onChange={this.handleProxyUserChange}
fieldLabel={t("proxy-settings.add-proxy-exclude-textfield")} disabled={!enableProxy || !hasUpdatePermission}
errorMessage={t("proxy-settings.add-proxy-exclude-error")} helpText={t("help.proxyUserHelpText")}
/> />
</div>
</div>
<div className="columns">
<div className="column is-full">
<ProxyExcludesTable
proxyExcludes={proxyExcludes}
onChange={(isValid, changedValue, name) =>
this.props.onChange(isValid, changedValue, name)
}
disabled={!enableProxy || !hasUpdatePermission}
/>
<AddEntryToTableField
addEntry={this.addProxyExclude}
disabled={!enableProxy || !hasUpdatePermission}
buttonLabel={t("proxy-settings.add-proxy-exclude-button")}
fieldLabel={t("proxy-settings.add-proxy-exclude-textfield")}
errorMessage={t("proxy-settings.add-proxy-exclude-error")}
/>
</div>
</div>
</div> </div>
); );
} }

2
scm-ui/src/config/containers/Config.js
View File

@@ -52,7 +52,7 @@ class Config extends React.Component<Props> {
renderAll={true} renderAll={true}
/> />
</div> </div>
<div className="column"> <div className="column is-one-quarter">
<Navigation> <Navigation>
<Section label={t("config.navigation-title")}> <Section label={t("config.navigation-title")}>
<NavLink <NavLink

6
scm-ui/src/containers/ProfileInfo.js
View File

@@ -29,15 +29,15 @@ class ProfileInfo extends React.Component<Props, State> {
<table className="table"> <table className="table">
<tbody> <tbody>
<tr> <tr>
<td>{t("profile.username")}</td> <td className="has-text-weight-semibold">{t("profile.username")}</td>
<td>{me.name}</td> <td>{me.name}</td>
</tr> </tr>
<tr> <tr>
<td>{t("profile.displayName")}</td> <td className="has-text-weight-semibold">{t("profile.displayName")}</td>
<td>{me.displayName}</td> <td>{me.displayName}</td>
</tr> </tr>
<tr> <tr>
<td>{t("profile.mail")}</td> <td className="has-text-weight-semibold">{t("profile.mail")}</td>
<td> <td>
<MailLink address={me.mail} /> <MailLink address={me.mail} />
</td> </td>

12
scm-ui/src/groups/components/table/Details.js
View File

@@ -17,25 +17,25 @@ class Details extends React.Component<Props> {
<table className="table content"> <table className="table content">
<tbody> <tbody>
<tr> <tr>
<td>{t("group.name")}</td> <td className="has-text-weight-semibold">{t("group.name")}</td>
<td>{group.name}</td> <td>{group.name}</td>
</tr> </tr>
<tr> <tr>
<td>{t("group.description")}</td> <td className="has-text-weight-semibold">{t("group.description")}</td>
<td>{group.description}</td> <td>{group.description}</td>
</tr> </tr>
<tr> <tr>
<td>{t("group.type")}</td> <td className="has-text-weight-semibold">{t("group.type")}</td>
<td>{group.type}</td> <td>{group.type}</td>
</tr> </tr>
<tr> <tr>
<td>{t("group.creationDate")}</td> <td className="has-text-weight-semibold">{t("group.creationDate")}</td>
<td> <td>
<DateFromNow date={group.creationDate} /> <DateFromNow date={group.creationDate} />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{t("group.lastModified")}</td> <td className="has-text-weight-semibold">{t("group.lastModified")}</td>
<td> <td>
<DateFromNow date={group.lastModified} /> <DateFromNow date={group.lastModified} />
</td> </td>
@@ -53,7 +53,7 @@ class Details extends React.Component<Props> {
<td> <td>
{this.props.t("group.members")} {this.props.t("group.members")}
<ul> <ul>
{this.props.group._embedded.members.map((member, index) => { {this.props.group._embedded.members.map((member, index) => {
return <GroupMember key={index} member={member} />; return <GroupMember key={index} member={member} />;
})} })}
</ul> </ul>

2
scm-ui/src/groups/components/table/GroupTable.js
View File

@@ -13,7 +13,7 @@ class GroupTable extends React.Component<Props> {
render() { render() {
const { groups, t } = this.props; const { groups, t } = this.props;
return ( return (
<table className="table is-hoverable is-fullwidth"> <table className="card-table table is-hoverable is-fullwidth">
<thead> <thead>
<tr> <tr>
<th>{t("group.name")}</th> <th>{t("group.name")}</th>

12
scm-ui/src/repos/components/RepositoryDetailTable.js
View File

@@ -17,31 +17,31 @@ class RepositoryDetailTable extends React.Component<Props> {
<table className="table"> <table className="table">
<tbody> <tbody>
<tr> <tr>
<td>{t("repository.name")}</td> <td className="has-text-weight-semibold">{t("repository.name")}</td>
<td>{repository.name}</td> <td>{repository.name}</td>
</tr> </tr>
<tr> <tr>
<td>{t("repository.type")}</td> <td className="has-text-weight-semibold">{t("repository.type")}</td>
<td>{repository.type}</td> <td>{repository.type}</td>
</tr> </tr>
<tr> <tr>
<td>{t("repository.contact")}</td> <td className="has-text-weight-semibold">{t("repository.contact")}</td>
<td> <td>
<MailLink address={repository.contact} /> <MailLink address={repository.contact} />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{t("repository.description")}</td> <td className="has-text-weight-semibold">{t("repository.description")}</td>
<td>{repository.description}</td> <td>{repository.description}</td>
</tr> </tr>
<tr> <tr>
<td>{t("repository.creationDate")}</td> <td className="has-text-weight-semibold">{t("repository.creationDate")}</td>
<td> <td>
<DateFromNow date={repository.creationDate} /> <DateFromNow date={repository.creationDate} />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{t("repository.lastModified")}</td> <td className="has-text-weight-semibold">{t("repository.lastModified")}</td>
<td> <td>
<DateFromNow date={repository.lastModified} /> <DateFromNow date={repository.lastModified} />
</td> </td>

1
scm-ui/src/repos/components/RepositoryDetails.js
View File

@@ -14,6 +14,7 @@ class RepositoryDetails extends React.Component<Props> {
return ( return (
<div> <div>
<RepositoryDetailTable repository={repository} /> <RepositoryDetailTable repository={repository} />
<hr />
<div className="content"> <div className="content">
<ExtensionPoint <ExtensionPoint
name="repos.repository-details.information" name="repos.repository-details.information"

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

@@ -9,15 +9,10 @@ import classNames from "classnames";
import RepositoryAvatar from "./RepositoryAvatar"; import RepositoryAvatar from "./RepositoryAvatar";
const styles = { const styles = {
outer: {
position: "relative"
},
overlay: { overlay: {
position: "absolute", position: "absolute",
left: 0, height: "calc(120px - 1.5rem)",
top: 0, width: "calc(50% - 3rem)"
bottom: 0,
right: 0
}, },
inner: { inner: {
position: "relative", position: "relative",
@@ -26,11 +21,16 @@ const styles = {
}, },
innerLink: { innerLink: {
pointerEvents: "all" pointerEvents: "all"
},
centerImage: {
marginTop: "0.8em",
marginLeft: "1em !important"
} }
}; };
type Props = { type Props = {
repository: Repository, repository: Repository,
fullColumnWidth?: boolean,
// context props // context props
classes: any classes: any
}; };
@@ -44,7 +44,7 @@ class RepositoryEntry extends React.Component<Props> {
if (repository._links["changesets"]) { if (repository._links["changesets"]) {
return ( return (
<RepositoryEntryLink <RepositoryEntryLink
iconClass="fa-code-branch" iconClass="fa-code-branch fa-lg"
to={repositoryLink + "/changesets"} to={repositoryLink + "/changesets"}
/> />
); );
@@ -56,7 +56,7 @@ class RepositoryEntry extends React.Component<Props> {
if (repository._links["sources"]) { if (repository._links["sources"]) {
return ( return (
<RepositoryEntryLink <RepositoryEntryLink
iconClass="fa-code" iconClass="fa-code fa-lg"
to={repositoryLink + "/sources"} to={repositoryLink + "/sources"}
/> />
); );
@@ -67,29 +67,40 @@ class RepositoryEntry extends React.Component<Props> {
renderModifyLink = (repository: Repository, repositoryLink: string) => { renderModifyLink = (repository: Repository, repositoryLink: string) => {
if (repository._links["update"]) { if (repository._links["update"]) {
return ( return (
<RepositoryEntryLink iconClass="fa-cog" to={repositoryLink + "/edit"} /> <RepositoryEntryLink
iconClass="fa-cog fa-lg"
to={repositoryLink + "/edit"}
/>
); );
} }
return null; return null;
}; };
render() { render() {
const { repository, classes } = this.props; const { repository, classes, fullColumnWidth } = this.props;
const repositoryLink = this.createLink(repository); const repositoryLink = this.createLink(repository);
const halfColumn = fullColumnWidth ? "is-full" : "is-half";
return ( return (
<div className={classNames("box", "box-link-shadow", classes.outer)}> <div
<Link className={classes.overlay} to={repositoryLink} /> className={classNames(
"box",
"box-link-shadow",
"column",
"is-clipped",
halfColumn
)}
>
<Link className={classNames(classes.overlay)} to={repositoryLink} />
<article className={classNames("media", classes.inner)}> <article className={classNames("media", classes.inner)}>
<figure className="media-left"> <figure className={classNames(classes.centerImage, "media-left")}>
<RepositoryAvatar repository={repository} /> <RepositoryAvatar repository={repository} />
</figure> </figure>
<div className="media-content"> <div className="media-content">
<div className="content"> <div className="content">
<p> <p className="is-marginless">
<strong>{repository.name}</strong> <strong>{repository.name}</strong>
<br />
{repository.description}
</p> </p>
<p className={"shorten-text"}>{repository.description}</p>
</div> </div>
<nav className="level is-mobile"> <nav className="level is-mobile">
<div className="level-left"> <div className="level-left">

3
scm-ui/src/repos/components/list/RepositoryEntryLink.js
View File

@@ -6,7 +6,8 @@ import classNames from "classnames";
const styles = { const styles = {
link: { link: {
pointerEvents: "all" pointerEvents: "all",
marginRight: "1.25rem !important"
} }
}; };

33
scm-ui/src/repos/components/list/RepositoryGroupEntry.js
View File

@@ -1,16 +1,23 @@
//@flow //@flow
import React from "react"; import React from "react";
import type { RepositoryGroup } from "@scm-manager/ui-types"; import type { RepositoryGroup, Repository } from "@scm-manager/ui-types";
import injectSheet from "react-jss"; import injectSheet from "react-jss";
import classNames from "classnames"; import classNames from "classnames";
import RepositoryEntry from "./RepositoryEntry"; import RepositoryEntry from "./RepositoryEntry";
const styles = { const styles = {
pointer: { pointer: {
cursor: "pointer" cursor: "pointer",
fontSize: "1.5rem"
}, },
repoGroup: { repoGroup: {
marginBottom: "1em" marginBottom: "1em"
},
wrapper: {
padding: "0 0.75rem"
},
clearfix: {
clear: "both"
} }
}; };
@@ -39,6 +46,18 @@ class RepositoryGroupEntry extends React.Component<Props, State> {
})); }));
}; };
isLastEntry = (array: Repository[], index: number) => {
return index === array.length - 1;
};
isLengthOdd = (array: Repository[]) => {
return array.length % 2 !== 0;
};
isFullSize = (array: Repository[], index: number) => {
return this.isLastEntry(array, index) && this.isLengthOdd(array);
};
render() { render() {
const { group, classes } = this.props; const { group, classes } = this.props;
const { collapsed } = this.state; const { collapsed } = this.state;
@@ -47,7 +66,10 @@ class RepositoryGroupEntry extends React.Component<Props, State> {
let content = null; let content = null;
if (!collapsed) { if (!collapsed) {
content = group.repositories.map((repository, index) => { content = group.repositories.map((repository, index) => {
return <RepositoryEntry repository={repository} key={index} />; const fullColumnWidth = this.isFullSize(group.repositories, index);
return (
<RepositoryEntry repository={repository} fullColumnWidth={fullColumnWidth} key={index} />
);
}); });
} }
return ( return (
@@ -58,7 +80,10 @@ class RepositoryGroupEntry extends React.Component<Props, State> {
</span> </span>
</h2> </h2>
<hr /> <hr />
{content} <div className={classNames("columns", "is-multiline", classes.wrapper)}>
{content}
</div>
<div className={classes.clearfix} />
</div> </div>
); );
} }

35
scm-ui/src/repos/permissions/components/CreatePermissionForm.js
View File

@@ -127,6 +127,7 @@ class CreatePermissionForm extends React.Component<Props, State> {
return ( return (
<div> <div>
<hr />
<h2 className="subtitle"> <h2 className="subtitle">
{t("permission.add-permission.add-permission-heading")} {t("permission.add-permission.add-permission-heading")}
</h2> </h2>
@@ -153,19 +154,29 @@ class CreatePermissionForm extends React.Component<Props, State> {
{t("permission.group-permission")} {t("permission.group-permission")}
</label> </label>
</div> </div>
{this.renderAutocompletionField()}
<TypeSelector <div className="columns">
label={t("permission.type")} <div className="column is-three-quarters">
helpText={t("permission.help.typeHelpText")} {this.renderAutocompletionField()}
handleTypeChange={this.handleTypeChange} </div>
type={type ? type : "READ"} <div className="column is-one-quarter">
/> <TypeSelector
<SubmitButton label={t("permission.type")}
label={t("permission.add-permission.submit-button")} helpText={t("permission.help.typeHelpText")}
loading={loading} handleTypeChange={this.handleTypeChange}
disabled={!this.state.valid || this.state.name === ""} type={type ? type : "READ"}
/> />
</div>
</div>
<div className="columns">
<div className="column">
<SubmitButton
label={t("permission.add-permission.submit-button")}
loading={loading}
disabled={!this.state.valid || this.state.name === ""}
/>
</div>
</div>
</form> </form>
</div> </div>
); );

2
scm-ui/src/repos/permissions/containers/Permissions.js
View File

@@ -128,7 +128,7 @@ class Permissions extends React.Component<Props> {
return ( return (
<div> <div>
<table className="table is-hoverable is-fullwidth"> <table className="has-background-light table is-hoverable is-fullwidth">
<thead> <thead>
<tr> <tr>
<th>{t("permission.name")}</th> <th>{t("permission.name")}</th>

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

@@ -41,6 +41,9 @@ const styles = {
isVerticalCenter: { isVerticalCenter: {
display: "flex", display: "flex",
alignItems: "center" alignItems: "center"
},
hasBackground: {
backgroundColor: "#FBFBFB"
} }
}; };
@@ -120,8 +123,14 @@ class Content extends React.Component<Props, State> {
const fileSize = file.directory ? "" : <FileSize bytes={file.length} />; const fileSize = file.directory ? "" : <FileSize bytes={file.length} />;
if (!collapsed) { if (!collapsed) {
return ( return (
<div className={classNames("panel-block", classes.toCenterContent)}> <div
<table className="table"> className={classNames(
"panel-block",
classes.toCenterContent,
classes.hasBackground
)}
>
<table className={classNames("table", classes.hasBackground)}>
<tbody> <tbody>
<tr> <tr>
<td>{t("sources.content.path")}</td> <td>{t("sources.content.path")}</td>

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

@@ -93,7 +93,7 @@ class Sources extends React.Component<Props> {
if (currentFileIsDirectory) { if (currentFileIsDirectory) {
return ( return (
<> <div className={"has-border-around"}>
{this.renderBranchSelector()} {this.renderBranchSelector()}
<FileTree <FileTree
repository={repository} repository={repository}
@@ -101,7 +101,7 @@ class Sources extends React.Component<Props> {
path={path} path={path}
baseUrl={baseUrl} baseUrl={baseUrl}
/> />
</> </div>
); );
} else { } else {
return ( return (

84
scm-ui/src/users/components/UserForm.js
View File

@@ -105,41 +105,55 @@ class UserForm extends React.Component<Props, State> {
} }
return ( return (
<form onSubmit={this.submit}> <form onSubmit={this.submit}>
{nameField} <div className="columns">
<InputField <div className="column is-half">
label={t("user.displayName")} {nameField}
onChange={this.handleDisplayNameChange} <InputField
value={user ? user.displayName : ""} label={t("user.displayName")}
validationError={this.state.displayNameValidationError} onChange={this.handleDisplayNameChange}
errorMessage={t("validation.displayname-invalid")} value={user ? user.displayName : ""}
helpText={t("help.displayNameHelpText")} validationError={this.state.displayNameValidationError}
/> errorMessage={t("validation.displayname-invalid")}
<InputField helpText={t("help.displayNameHelpText")}
label={t("user.mail")} />
onChange={this.handleEmailChange} </div>
value={user ? user.mail : ""} <div className="column is-half">
validationError={this.state.mailValidationError} <InputField
errorMessage={t("validation.mail-invalid")} label={t("user.mail")}
helpText={t("help.mailHelpText")} onChange={this.handleEmailChange}
/> value={user ? user.mail : ""}
{passwordChangeField} validationError={this.state.mailValidationError}
<Checkbox errorMessage={t("validation.mail-invalid")}
label={t("user.admin")} helpText={t("help.mailHelpText")}
onChange={this.handleAdminChange} />
checked={user ? user.admin : false} </div>
helpText={t("help.adminHelpText")} </div>
/> <div className="columns">
<Checkbox <div className="column">
label={t("user.active")} {passwordChangeField}
onChange={this.handleActiveChange} <Checkbox
checked={user ? user.active : false} label={t("user.admin")}
helpText={t("help.activeHelpText")} onChange={this.handleAdminChange}
/> checked={user ? user.admin : false}
<SubmitButton helpText={t("help.adminHelpText")}
disabled={!this.isValid()} />
loading={loading} <Checkbox
label={t("user-form.submit")} label={t("user.active")}
/> onChange={this.handleActiveChange}
checked={user ? user.active : false}
helpText={t("help.activeHelpText")}
/>
</div>
</div>
<div className="columns">
<div className="column">
<SubmitButton
disabled={!this.isValid()}
loading={loading}
label={t("user-form.submit")}
/>
</div>
</div>
</form> </form>
); );
} }

16
scm-ui/src/users/components/table/Details.js
View File

@@ -16,43 +16,43 @@ class Details extends React.Component<Props> {
<table className="table"> <table className="table">
<tbody> <tbody>
<tr> <tr>
<td>{t("user.name")}</td> <td className="has-text-weight-semibold">{t("user.name")}</td>
<td>{user.name}</td> <td>{user.name}</td>
</tr> </tr>
<tr> <tr>
<td>{t("user.displayName")}</td> <td className="has-text-weight-semibold">{t("user.displayName")}</td>
<td>{user.displayName}</td> <td>{user.displayName}</td>
</tr> </tr>
<tr> <tr>
<td>{t("user.mail")}</td> <td className="has-text-weight-semibold">{t("user.mail")}</td>
<td> <td>
<MailLink address={user.mail} /> <MailLink address={user.mail} />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{t("user.admin")}</td> <td className="has-text-weight-semibold">{t("user.admin")}</td>
<td> <td>
<Checkbox checked={user.admin} /> <Checkbox checked={user.admin} />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{t("user.active")}</td> <td className="has-text-weight-semibold">{t("user.active")}</td>
<td> <td>
<Checkbox checked={user.active} /> <Checkbox checked={user.active} />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{t("user.type")}</td> <td className="has-text-weight-semibold">{t("user.type")}</td>
<td>{user.type}</td> <td>{user.type}</td>
</tr> </tr>
<tr> <tr>
<td>{t("user.creationDate")}</td> <td className="has-text-weight-semibold">{t("user.creationDate")}</td>
<td> <td>
<DateFromNow date={user.creationDate} /> <DateFromNow date={user.creationDate} />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>{t("user.lastModified")}</td> <td className="has-text-weight-semibold">{t("user.lastModified")}</td>
<td> <td>
<DateFromNow date={user.lastModified} /> <DateFromNow date={user.lastModified} />
</td> </td>

4
scm-ui/src/users/components/table/UserTable.js
View File

@@ -9,11 +9,13 @@ type Props = {
users: User[] users: User[]
}; };
;
class UserTable extends React.Component<Props> { class UserTable extends React.Component<Props> {
render() { render() {
const { users, t } = this.props; const { users, t } = this.props;
return ( return (
<table className="table is-hoverable is-fullwidth"> <table className="card-table table is-hoverable is-fullwidth">
<thead> <thead>
<tr> <tr>
<th className="is-hidden-mobile">{t("user.name")}</th> <th className="is-hidden-mobile">{t("user.name")}</th>

10271
scm-ui/styles/scm.css
View File

File diff suppressed because it is too large Load Diff

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

@@ -1,8 +1,8 @@
@import "bulma/sass/utilities/initial-variables"; @import "bulma/sass/utilities/initial-variables";
@import "bulma/sass/utilities/functions"; @import "bulma/sass/utilities/functions";
$blue: #33b2e8;
$blue: #33B2E8; $mint: #11dfd0;
// $footer-background-color // $footer-background-color
@@ -57,9 +57,233 @@ $blue: #33B2E8;
} }
} }
@import "@fortawesome/fontawesome-free/scss/fontawesome.scss"; @import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
$fa-font-path: "webfonts"; $fa-font-path: "webfonts";
@import "@fortawesome/fontawesome-free/scss/solid.scss"; @import "@fortawesome/fontawesome-free/scss/solid.scss";
@import "diff2html/dist/diff2html"; @import "diff2html/dist/diff2html";
// NEW STYLES
//typography
.subtitle {
color: #666;
}
.has-border-white {
border-color: #fff !important;
}
// buttons
.button {
padding-left: 1.5em;
padding-right: 1.5em;
height: 2.5rem;
&.is-primary {
background-color: $mint;
}
}
//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
.columns.is-multiline {
.column.is-half {
width: calc(50% - 0.75rem);
max-height: 120px;
&:nth-child(odd) {
margin-right: 1.5rem;
}
}
@media screen and (max-width: 768px) {
.column.is-half {
width: 100%;
&:nth-child(odd) {
margin-right: 0;
}
}
}
}
.media {
.media-content {
width: calc(50% - 0.75rem);
max-height: 120px;
.shorten-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
// tables
.table {
width: 100%;
td {
border-color: #eee;
padding: 1rem;
}
}
// card tables
.card-table {
border-collapse: separate;
border-spacing: 0px 5px;
tr {
a {
color: #363636;
}
&:hover {
td {
background-color: whitesmoke;
&:nth-child(4) {
background-color: #e1e1e1;
}
}
a {
color: $blue;
}
}
}
td {
border-bottom: 1px solid whitesmoke;
background-color: #fafafa;
padding: 1em 1.25em;
&:first-child {
border-left: 3px solid $mint;
}
&:nth-child(4) {
background-color: whitesmoke;
}
}
&.is-hoverable tbody tr:not(.is-selected):hover {
background-color: whitesmoke;
}
thead th {
background-color: transparent;
border: none;
}
}
// forms
.field:not(.is-grouped) {
margin-bottom: 1rem;
}
.input,
.textarea {
/*background-color: whitesmoke;*/
border-color: #98d8f3;
box-shadow: none;
}
// pagination
.pagination-next,
.pagination-link,
.pagination-ellipsis {
padding-left: 1.5em;
padding-right: 1.5em;
height: 2.5rem;
}
.pagination-previous,
.pagination-next {
min-width: 6.75em;
}
// dark hero colors
.hero.is-dark {
background-color: #002e4b;
background-image: url(../images/scmManagerHero.jpg);
background-size: cover;
background-position: top center;
.tabs.is-boxed li.is-active a,
.tabs.is-boxed li.is-active a:hover,
.tabs.is-toggle li.is-active a,
.tabs.is-toggle li.is-active a:hover {
background-color: #28b1e8;
border-color: #28b1e8;
color: #fff;
}
}
// footer
.footer {
background-color: whitesmoke;
}
// sidebar menu
.aside-background {
bottom: 0;
left: 50%;
position: absolute;
right: 0;
top: 0;
background-color: whitesmoke;
}
.menu {
div {
height: 100%;
/*border: 1px solid #eee;*/
margin-bottom: 1rem;
}
}
.menu-label {
color: #fff;
font-size: 1em;
font-weight: 600;
background-color: #bbb;
border-radius: 5px 5px 0 0;
padding: 0.5rem 1rem;
text-transform: none;
&:last-child,
&:not(:last-child) {
margin-bottom: 0;
}
}
.menu div:first-child .menu-label {
background-color: $blue;
}
.menu-list {
a {
border-radius: 0;
color: #333;
padding: 1rem;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
&.is-active {
color: $blue;
background-color: #fff;
&:before {
position: relative;
content: " ";
background: $blue;
height: 53px;
width: 2px;
display: block;
left: -17px;
float: left;
top: -16px;
}
}
}
> li:first-child > a {
border-top: none;
}
li:last-child > a {
border-bottom: 1px solid #eee;
}
}