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

Added first UI changes

Browse Source
This commit is contained in:
Janika Kefel
2018-12-13 14:49:59 +01:00
parent 16eb433618
commit 3a62f81ba0
18 changed files with 1339 additions and 11242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,14 +1,22 @@
//@flow
import React from "react";
import injectSheet from "react-jss";
import classNames from "classnames";
type Props = {
};
const styles = {
textinfo: {
color: "#98d8f3 !important"
}
};
class HelpIcon extends React.Component<Props> {
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
import React from "react";
import injectSheet from "react-jss";
import AddButton, { type ButtonProps } from "./Button";
import SubmitButton, { type ButtonProps } from "./SubmitButton";
import classNames from "classnames";
const styles = {
spacing: {
margin: "1em 0 0 1em"
marginTop: "2em",
border: "2px solid #e9f7fd",
padding: "1em 1em"
}
};
class CreateButton extends React.Component<ButtonProps> {
render() {
const { classes } = this.props;
return (
<div className={classNames("is-pulled-right", classes.spacing)}>
<AddButton {...this.props} />
<div className={classNames("has-text-centered", classes.spacing)}>
<SubmitButton {...this.props} />
</div>
);
}

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 KiB

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

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

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

@@ -18,6 +18,9 @@ class BaseUrlSettings extends React.Component<Props> {
return (
<div>
<Subtitle subtitle={t("base-url-settings.name")} />
<div class="columns">
<div class="column is-half">
<Checkbox
checked={forceBaseUrl}
label={t("base-url-settings.force-base-url")}
@@ -25,6 +28,8 @@ class BaseUrlSettings extends React.Component<Props> {
disabled={!hasUpdatePermission}
helpText={t("help.forceBaseUrlHelpText")}
/>
</div>
<div class="column is-half">
<InputField
label={t("base-url-settings.base-url")}
onChange={this.handleBaseUrlChange}
@@ -33,6 +38,8 @@ class BaseUrlSettings extends React.Component<Props> {
helpText={t("help.baseUrlHelpText")}
/>
</div>
</div>
</div>
);
}

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

@@ -36,6 +36,8 @@ class GeneralSettings extends React.Component<Props> {
return (
<div>
<div class="columns">
<div class="column is-half">
<InputField
label={t("general-settings.realm-description")}
onChange={this.handleRealmDescriptionChange}
@@ -43,6 +45,8 @@ class GeneralSettings extends React.Component<Props> {
disabled={!hasUpdatePermission}
helpText={t("help.realmDescriptionHelpText")}
/>
</div>
<div class="column is-half">
<InputField
label={t("general-settings.date-format")}
onChange={this.handleDateFormatChange}
@@ -50,6 +54,10 @@ class GeneralSettings extends React.Component<Props> {
disabled={!hasUpdatePermission}
helpText={t("help.dateFormatHelpText")}
/>
</div>
</div>
<div class="columns">
<div class="column is-half">
<InputField
label={t("general-settings.plugin-url")}
onChange={this.handlePluginUrlChange}
@@ -57,6 +65,8 @@ class GeneralSettings extends React.Component<Props> {
disabled={!hasUpdatePermission}
helpText={t("help.pluginRepositoryHelpText")}
/>
</div>
<div class="column is-half">
<InputField
label={t("general-settings.default-namespace-strategy")}
onChange={this.handleDefaultNamespaceStrategyChange}
@@ -64,6 +74,10 @@ class GeneralSettings extends React.Component<Props> {
disabled={!hasUpdatePermission}
helpText={t("help.defaultNameSpaceStrategyHelpText")}
/>
</div>
</div>
<div class="columns">
<div class="column is-half">
<Checkbox
checked={enabledXsrfProtection}
label={t("general-settings.enabled-xsrf-protection")}
@@ -71,6 +85,8 @@ class GeneralSettings extends React.Component<Props> {
disabled={!hasUpdatePermission}
helpText={t("help.enableXsrfProtectionHelpText")}
/>
</div>
<div class="column is-half">
<Checkbox
checked={enableRepositoryArchive}
label={t("general-settings.enable-repository-archive")}
@@ -78,6 +94,10 @@ class GeneralSettings extends React.Component<Props> {
disabled={!hasUpdatePermission}
helpText={t("help.enableRepositoryArchiveHelpText")}
/>
</div>
</div>
<div class="columns">
<div class="column is-half">
<Checkbox
checked={disableGroupingGrid}
label={t("general-settings.disable-grouping-grid")}
@@ -85,6 +105,8 @@ class GeneralSettings extends React.Component<Props> {
disabled={!hasUpdatePermission}
helpText={t("help.disableGroupingGridHelpText")}
/>
</div>
<div class="column is-half">
<Checkbox
checked={anonymousAccessEnabled}
label={t("general-settings.anonymous-access-enabled")}
@@ -92,6 +114,10 @@ class GeneralSettings extends React.Component<Props> {
disabled={!hasUpdatePermission}
helpText={t("help.allowAnonymousAccessHelpText")}
/>
</div>
</div>
<div class="columns">
<div class="column is-half">
<Checkbox
checked={skipFailedAuthenticators}
label={t("general-settings.skip-failed-authenticators")}
@@ -100,6 +126,8 @@ class GeneralSettings extends React.Component<Props> {
helpText={t("help.skipFailedAuthenticatorsHelpText")}
/>
</div>
</div>
</div>
);
}

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

@@ -40,6 +40,8 @@ class LoginAttempt extends React.Component<Props, State> {
return (
<div>
<Subtitle subtitle={t("login-attempt.name")} />
<div class="columns">
<div class="column is-half">
<InputField
label={t("login-attempt.login-attempt-limit")}
onChange={this.handleLoginAttemptLimitChange}
@@ -49,6 +51,8 @@ class LoginAttempt extends React.Component<Props, State> {
errorMessage={t("validation.login-attempt-limit-invalid")}
helpText={t("help.loginAttemptLimitHelpText")}
/>
</div>
<div class="column is-half">
<InputField
label={t("login-attempt.login-attempt-limit-timeout")}
onChange={this.handleLoginAttemptLimitTimeoutChange}
@@ -59,6 +63,8 @@ class LoginAttempt extends React.Component<Props, State> {
helpText={t("help.loginAttemptLimitTimeoutHelpText")}
/>
</div>
</div>
</div>
);
}

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

@@ -37,6 +37,8 @@ class ProxySettings extends React.Component<Props> {
return (
<div>
<Subtitle subtitle={t("proxy-settings.name")} />
<div class="columns">
<div class="column is-full">
<Checkbox
checked={enableProxy}
label={t("proxy-settings.enable-proxy")}
@@ -44,6 +46,10 @@ class ProxySettings extends React.Component<Props> {
disabled={!hasUpdatePermission}
helpText={t("help.enableProxyHelpText")}
/>
</div>
</div>
<div class="columns">
<div class="column is-half">
<InputField
label={t("proxy-settings.proxy-password")}
onChange={this.handleProxyPasswordChange}
@@ -52,6 +58,8 @@ class ProxySettings extends React.Component<Props> {
disabled={!enableProxy || !hasUpdatePermission}
helpText={t("help.proxyPasswordHelpText")}
/>
</div>
<div class="column is-half">
<InputField
label={t("proxy-settings.proxy-port")}
value={proxyPort}
@@ -59,6 +67,10 @@ class ProxySettings extends React.Component<Props> {
disabled={!enableProxy || !hasUpdatePermission}
helpText={t("help.proxyPortHelpText")}
/>
</div>
</div>
<div class="columns">
<div class="column is-half">
<InputField
label={t("proxy-settings.proxy-server")}
value={proxyServer}
@@ -66,6 +78,8 @@ class ProxySettings extends React.Component<Props> {
disabled={!enableProxy || !hasUpdatePermission}
helpText={t("help.proxyServerHelpText")}
/>
</div>
<div class="column is-half">
<InputField
label={t("proxy-settings.proxy-user")}
value={proxyUser}
@@ -73,6 +87,10 @@ class ProxySettings extends React.Component<Props> {
disabled={!enableProxy || !hasUpdatePermission}
helpText={t("help.proxyUserHelpText")}
/>
</div>
</div>
<div class="columns">
<div class="column is-full">
<ProxyExcludesTable
proxyExcludes={proxyExcludes}
onChange={(isValid, changedValue, name) =>
@@ -88,6 +106,8 @@ class ProxySettings extends React.Component<Props> {
errorMessage={t("proxy-settings.add-proxy-exclude-error")}
/>
</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}
/>
</div>
<div className="column">
<div className="column is-one-quarter">
<Navigation>
<Section label={t("config.navigation-title")}>
<NavLink

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

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

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

@@ -7,7 +7,8 @@ import RepositoryEntry from "./RepositoryEntry";
const styles = {
pointer: {
cursor: "pointer"
cursor: "pointer",
fontSize: "1.5rem"
},
repoGroup: {
marginBottom: "1em"

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

@@ -9,11 +9,13 @@ type Props = {
users: User[]
};
;
class UserTable extends React.Component<Props> {
render() {
const { users, t } = this.props;
return (
<table className="table is-hoverable is-fullwidth">
<table className="card-table table is-hoverable is-fullwidth">
<thead>
<tr>
<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

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

@@ -3,6 +3,9 @@
$blue: #33B2E8;
$mint: #11dfd0;
// $footer-background-color
@@ -55,3 +58,184 @@ $fa-font-path: "webfonts";
@import "@fortawesome/fontawesome-free/scss/solid.scss";
@import "diff2html/dist/diff2html";
// NEW STYLES
// 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 colors
.footer {
background-color: whitesmoke;
}
//typography
.subtitle {
color: #666;
}
// buttons
.button{
padding-left: 1.5em;
padding-right: 1.5em;
height:2.5rem;
&.is-primary {
background-color: $mint;
}
}
// 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;
}
// 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: .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: #33B2E8;
background-color: #fff;
&:before{
position: relative;
content: " ";
background: #33B2E8;
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;
}
}
// 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: #efefef;
box-shadow: none;
}
.input[disabled], .textarea[disabled] {
background-color: #ddd;
border-color: #ccc;
box-shadow: none;
color: #aaa;
}