More UI changes

2025-11-15 09:46:16 +01:00 · 2018-12-19 13:28:04 +01:00
parent 3a62f81ba0
commit 4d181a574a
17 changed files with 1425 additions and 1358 deletions
--- a/scm-ui/public/images/blib.jpg
+++ b/scm-ui/public/images/blib.jpg
--- a/scm-ui/src/containers/ProfileInfo.js
+++ b/scm-ui/src/containers/ProfileInfo.js
@@ -33,15 +33,15 @@ class ProfileInfo extends React.Component<Props, State> {
        <table className="table">
          <tbody>
            <tr>
-              <td>{t("profile.username")}</td>
+              <td className="has-text-weight-semibold">{t("profile.username")}</td>
              <td>{me.name}</td>
            </tr>
            <tr>
-              <td>{t("profile.displayName")}</td>
+              <td className="has-text-weight-semibold">{t("profile.displayName")}</td>
              <td>{me.displayName}</td>
            </tr>
            <tr>
-              <td>{t("profile.mail")}</td>
+              <td className="has-text-weight-semibold">{t("profile.mail")}</td>
              <td>
                <MailLink address={me.mail} />
              </td>
--- a/scm-ui/src/groups/components/table/Details.js
+++ b/scm-ui/src/groups/components/table/Details.js
@@ -17,25 +17,25 @@ class Details extends React.Component<Props> {
      <table className="table content">
        <tbody>
          <tr>
-            <td>{t("group.name")}</td>
+            <td className="has-text-weight-semibold">{t("group.name")}</td>
            <td>{group.name}</td>
          </tr>
          <tr>
-            <td>{t("group.description")}</td>
+            <td className="has-text-weight-semibold">{t("group.description")}</td>
            <td>{group.description}</td>
          </tr>
          <tr>
-            <td>{t("group.type")}</td>
+            <td className="has-text-weight-semibold">{t("group.type")}</td>
            <td>{group.type}</td>
          </tr>
          <tr>
-            <td>{t("group.creationDate")}</td>
+            <td className="has-text-weight-semibold">{t("group.creationDate")}</td>
            <td>
              <DateFromNow date={group.creationDate} />
            </td>
          </tr>
          <tr>
-            <td>{t("group.lastModified")}</td>
+            <td className="has-text-weight-semibold">{t("group.lastModified")}</td>
            <td>
              <DateFromNow date={group.lastModified} />
            </td>
@@ -53,7 +53,7 @@ class Details extends React.Component<Props> {
          <td>
            {this.props.t("group.members")}
            <ul>
-              {this.props.group._embedded.members.map((member, index) => {
+               {this.props.group._embedded.members.map((member, index) => {
                return <GroupMember key={index} member={member} />;
              })}
            </ul>
--- a/scm-ui/src/repos/components/RepositoryDetailTable.js
+++ b/scm-ui/src/repos/components/RepositoryDetailTable.js
@@ -17,31 +17,31 @@ class RepositoryDetailTable extends React.Component<Props> {
      <table className="table">
        <tbody>
          <tr>
-            <td>{t("repository.name")}</td>
+            <td className="has-text-weight-semibold">{t("repository.name")}</td>
            <td>{repository.name}</td>
          </tr>
          <tr>
-            <td>{t("repository.type")}</td>
+            <td className="has-text-weight-semibold">{t("repository.type")}</td>
            <td>{repository.type}</td>
          </tr>
          <tr>
-            <td>{t("repository.contact")}</td>
+            <td className="has-text-weight-semibold">{t("repository.contact")}</td>
            <td>
              <MailLink address={repository.contact} />
            </td>
          </tr>
          <tr>
-            <td>{t("repository.description")}</td>
+            <td className="has-text-weight-semibold">{t("repository.description")}</td>
            <td>{repository.description}</td>
          </tr>
          <tr>
-            <td>{t("repository.creationDate")}</td>
+            <td className="has-text-weight-semibold">{t("repository.creationDate")}</td>
            <td>
              <DateFromNow date={repository.creationDate} />
            </td>
          </tr>
          <tr>
-            <td>{t("repository.lastModified")}</td>
+            <td className="has-text-weight-semibold">{t("repository.lastModified")}</td>
            <td>
              <DateFromNow date={repository.lastModified} />
            </td>
--- a/scm-ui/src/repos/components/RepositoryDetails.js
+++ b/scm-ui/src/repos/components/RepositoryDetails.js
@@ -14,6 +14,7 @@ class RepositoryDetails extends React.Component<Props> {
    return (
      <div>
        <RepositoryDetailTable repository={repository} />
+          <hr />
        <div className="content">
          <ExtensionPoint
            name="repos.repository-details.information"
--- 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",
@@ -44,7 +39,7 @@ class RepositoryEntry extends React.Component<Props> {
    if (repository._links["changesets"]) {
      return (
        <RepositoryEntryLink
-          iconClass="fa-code-branch"
+          iconClass="fa-code-branch fa-lg"
          to={repositoryLink + "/changesets"}
        />
      );
@@ -56,7 +51,7 @@ class RepositoryEntry extends React.Component<Props> {
    if (repository._links["sources"]) {
      return (
        <RepositoryEntryLink
-          iconClass="fa-code"
+          iconClass="fa-code fa-lg"
          to={repositoryLink + "/sources"}
        />
      );
@@ -67,7 +62,7 @@ class RepositoryEntry extends React.Component<Props> {
  renderModifyLink = (repository: Repository, repositoryLink: string) => {
    if (repository._links["update"]) {
      return (
-        <RepositoryEntryLink iconClass="fa-cog" to={repositoryLink + "/edit"} />
+        <RepositoryEntryLink iconClass="fa-cog fa-lg" to={repositoryLink + "/edit"} />
      );
    }
    return null;
@@ -77,8 +72,8 @@ class RepositoryEntry extends React.Component<Props> {
    const { repository, classes } = this.props;
    const repositoryLink = this.createLink(repository);
    return (
-      <div className={classNames("box", "box-link-shadow", classes.outer)}>
-        <Link className={classes.overlay} to={repositoryLink} />
+      <div className={classNames("box", "box-link-shadow", "column", "is-half")}>
+        <Link className={classNames(classes.overlay)} to={repositoryLink} />
        <article className={classNames("media", classes.inner)}>
          <figure className="media-left">
            <RepositoryAvatar repository={repository} />
--- a/scm-ui/src/repos/components/list/RepositoryEntryLink.js
+++ b/scm-ui/src/repos/components/list/RepositoryEntryLink.js
@@ -6,7 +6,8 @@ import classNames from "classnames";

 const styles = {
  link: {
-    pointerEvents: "all"
+    pointerEvents: "all",
+    marginRight: "1.25rem !important"
  }
 };

--- a/scm-ui/src/repos/components/list/RepositoryGroupEntry.js
+++ b/scm-ui/src/repos/components/list/RepositoryGroupEntry.js
@@ -12,6 +12,12 @@ const styles = {
  },
  repoGroup: {
    marginBottom: "1em"
+  },
+  wrapper: {
+    padding: "0 0.75rem"
+  },
+  clearfix: {
+    clear: "both"
  }
 };

@@ -59,7 +65,10 @@ class RepositoryGroupEntry extends React.Component<Props, State> {
          </span>
        </h2>
        <hr />
+        <div className={classNames("columns","is-multiline", classes.wrapper)}>
            {content}
+        </div>
+        <div className={classes.clearfix}></div>
      </div>
    );
  }
--- a/scm-ui/src/repos/containers/BranchSelector.js
+++ b/scm-ui/src/repos/containers/BranchSelector.js
@@ -11,6 +11,11 @@ import classNames from "classnames";
 const styles = {
  zeroflex: {
    flexGrow: 0
+  },
+  wrapper: {
+      padding: "1rem 1.5rem 0.25rem 1.5rem",
+      border: "1px solid #eee",
+      borderRadius: "5px 5px 0 0"
  }
 };

@@ -43,10 +48,8 @@ class BranchSelector extends React.Component<Props, State> {

    if (branches) {
      return (
-        <div className="box field is-horizontal">
-          <div
-            className={classNames("field-label", "is-normal", classes.zeroflex)}
-          >
+        <div className={classNames("has-background-light field", "is-horizontal", classes.wrapper)}>
+          <div className={classNames("field-label", "is-normal", classes.zeroflex)}>
            <label className="label">{t("branch-selector.label")}</label>
          </div>
          <div className="field-body">
--- a/scm-ui/src/repos/permissions/components/CreatePermissionForm.js
+++ b/scm-ui/src/repos/permissions/components/CreatePermissionForm.js
@@ -38,35 +38,47 @@ class CreatePermissionForm extends React.Component<Props, State> {

    return (
      <div>
+        <hr />
        <h2 className="subtitle">
          {t("permission.add-permission.add-permission-heading")}
        </h2>
        <form onSubmit={this.submit}>
-          <InputField
-            label={t("permission.name")}
-            value={name ? name : ""}
-            onChange={this.handleNameChange}
-            validationError={!this.state.valid}
-            errorMessage={t("permission.add-permission.name-input-invalid")}
-            helpText={t("permission.help.nameHelpText")}
-          />
-          <Checkbox
-            label={t("permission.group-permission")}
-            checked={groupPermission ? groupPermission : false}
-            onChange={this.handleGroupPermissionChange}
-            helpText={t("permission.help.groupPermissionHelpText")}
-          />
-          <TypeSelector
-            label={t("permission.type")}
-            helpText={t("permission.help.typeHelpText")}
-            handleTypeChange={this.handleTypeChange}
-            type={type ? type : "READ"}
-          />
-          <SubmitButton
-            label={t("permission.add-permission.submit-button")}
-            loading={loading}
-            disabled={!this.state.valid || this.state.name === ""}
-          />
+        <div class="columns">
+            <div class="column is-three-quarters">
+              <InputField
+                label={t("permission.name")}
+                value={name ? name : ""}
+                onChange={this.handleNameChange}
+                validationError={!this.state.valid}
+                errorMessage={t("permission.add-permission.name-input-invalid")}
+                helpText={t("permission.help.nameHelpText")}
+              />
+           
+              <Checkbox
+                label={t("permission.group-permission")}
+                checked={groupPermission ? groupPermission : false}
+                onChange={this.handleGroupPermissionChange}
+                helpText={t("permission.help.groupPermissionHelpText")}
+              />
+            </div>
+            <div class="column is-one-quarter">
+                  <TypeSelector
+                    label={t("permission.type")}
+                    helpText={t("permission.help.typeHelpText")}
+                    handleTypeChange={this.handleTypeChange}
+                    type={type ? type : "READ"}
+                  />
+            </div>
+            </div>
+        <div class="columns">
+            <div class="column">
+              <SubmitButton
+                label={t("permission.add-permission.submit-button")}
+                loading={loading}
+                disabled={!this.state.valid || this.state.name === ""}
+              />
+            </div>
+        </div>
        </form>
      </div>
    );
--- a/scm-ui/src/repos/permissions/containers/Permissions.js
+++ b/scm-ui/src/repos/permissions/containers/Permissions.js
@@ -118,7 +118,7 @@ class Permissions extends React.Component<Props> {

    return (
      <div>
-        <table className="table is-hoverable is-fullwidth">
+        <table  className="has-background-light table is-hoverable is-fullwidth">
          <thead>
            <tr>
              <th>{t("permission.name")}</th>
--- a/scm-ui/src/users/components/UserForm.js
+++ b/scm-ui/src/users/components/UserForm.js
@@ -104,41 +104,55 @@ class UserForm extends React.Component<Props, State> {
    }
    return (
      <form onSubmit={this.submit}>
-        {nameField}
-        <InputField
-          label={t("user.displayName")}
-          onChange={this.handleDisplayNameChange}
-          value={user ? user.displayName : ""}
-          validationError={this.state.displayNameValidationError}
-          errorMessage={t("validation.displayname-invalid")}
-          helpText={t("help.displayNameHelpText")}
-        />
-        <InputField
-          label={t("user.mail")}
-          onChange={this.handleEmailChange}
-          value={user ? user.mail : ""}
-          validationError={this.state.mailValidationError}
-          errorMessage={t("validation.mail-invalid")}
-          helpText={t("help.mailHelpText")}
-        />
-        {passwordChangeField}
-        <Checkbox
-          label={t("user.admin")}
-          onChange={this.handleAdminChange}
-          checked={user ? user.admin : false}
-          helpText={t("help.adminHelpText")}
-        />
-        <Checkbox
-          label={t("user.active")}
-          onChange={this.handleActiveChange}
-          checked={user ? user.active : false}
-          helpText={t("help.activeHelpText")}
-        />
-        <SubmitButton
-          disabled={!this.isValid()}
-          loading={loading}
-          label={t("user-form.submit")}
-        />
+        <div class="columns">
+            <div class="column is-half">
+                {nameField}
+                <InputField
+                  label={t("user.displayName")}
+                  onChange={this.handleDisplayNameChange}
+                  value={user ? user.displayName : ""}
+                  validationError={this.state.displayNameValidationError}
+                  errorMessage={t("validation.displayname-invalid")}
+                  helpText={t("help.displayNameHelpText")}
+                />
+            </div>
+            <div class="column is-half">
+                <InputField
+                  label={t("user.mail")}
+                  onChange={this.handleEmailChange}
+                  value={user ? user.mail : ""}
+                  validationError={this.state.mailValidationError}
+                  errorMessage={t("validation.mail-invalid")}
+                  helpText={t("help.mailHelpText")}
+                />
+            </div>
+        </div>
+        <div class="columns">
+            <div class="column">
+                {passwordChangeField}
+                <Checkbox
+                  label={t("user.admin")}
+                  onChange={this.handleAdminChange}
+                  checked={user ? user.admin : false}
+                  helpText={t("help.adminHelpText")}
+                />
+                <Checkbox
+                  label={t("user.active")}
+                  onChange={this.handleActiveChange}
+                  checked={user ? user.active : false}
+                  helpText={t("help.activeHelpText")}
+                />
+            </div>
+        </div>
+        <div class="columns">
+            <div class="column">
+                <SubmitButton
+                  disabled={!this.isValid()}
+                  loading={loading}
+                  label={t("user-form.submit")}
+                />
+            </div>
+        </div>
      </form>
    );
  }
--- a/scm-ui/src/users/components/table/Details.js
+++ b/scm-ui/src/users/components/table/Details.js
@@ -16,43 +16,43 @@ class Details extends React.Component<Props> {
      <table className="table">
        <tbody>
          <tr>
-            <td>{t("user.name")}</td>
+            <td className="has-text-weight-semibold">{t("user.name")}</td>
            <td>{user.name}</td>
          </tr>
          <tr>
-            <td>{t("user.displayName")}</td>
+            <td className="has-text-weight-semibold">{t("user.displayName")}</td>
            <td>{user.displayName}</td>
          </tr>
          <tr>
-            <td>{t("user.mail")}</td>
+            <td className="has-text-weight-semibold">{t("user.mail")}</td>
            <td>
              <MailLink address={user.mail} />
            </td>
          </tr>
          <tr>
-            <td>{t("user.admin")}</td>
+            <td className="has-text-weight-semibold">{t("user.admin")}</td>
            <td>
              <Checkbox checked={user.admin} />
            </td>
          </tr>
          <tr>
-            <td>{t("user.active")}</td>
+            <td className="has-text-weight-semibold">{t("user.active")}</td>
            <td>
              <Checkbox checked={user.active} />
            </td>
          </tr>
          <tr>
-            <td>{t("user.type")}</td>
+            <td className="has-text-weight-semibold">{t("user.type")}</td>
            <td>{user.type}</td>
          </tr>
          <tr>
-            <td>{t("user.creationDate")}</td>
+            <td className="has-text-weight-semibold">{t("user.creationDate")}</td>
            <td>
              <DateFromNow date={user.creationDate} />
            </td>
          </tr>
          <tr>
-            <td>{t("user.lastModified")}</td>
+            <td className="has-text-weight-semibold">{t("user.lastModified")}</td>
            <td>
              <DateFromNow date={user.lastModified} />
            </td>
--- a/scm-ui/styles/scm.scss
+++ b/scm-ui/styles/scm.scss
@@ -61,6 +61,123 @@ $fa-font-path: "webfonts";

 // 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;
+}
+}
+
+// multiline Columns
+.columns.is-multiline {
+
+    .column.is-half{
+        width: calc(50% - .75rem);
+        
+        &:nth-child(odd){
+            margin-right: 1.5rem;
+        }
+    }
+    @media screen and (max-width:768px) {
+        .column.is-half{
+            width: 100%;
+
+            &:nth-child(odd){
+                margin-right: 0;
+            }
+        }
+        }
+}
+
+// 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;
+}
+/*.input[disabled], .textarea[disabled] {
+
+    background-color: #ddd;
+    border-color: #ccc;
+    box-shadow: none;
+    color: #aaa;
+}*/
+
+// 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;
@@ -77,33 +194,13 @@ $fa-font-path: "webfonts";
    color: #fff;
 }
 }
-// footer colors
+
+
+// footer 
 .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 {

@@ -150,13 +247,13 @@ $fa-font-path: "webfonts";
    border-right: 1px solid #eee;
        
    &.is-active { 
-    color: #33B2E8;
+    color: $blue;
    background-color: #fff;
    
        &:before{
            position: relative;
            content: " ";
-            background: #33B2E8;
+            background: $blue;
            height: 53px;
            width: 2px;
            display: block;
@@ -173,69 +270,4 @@ $fa-font-path: "webfonts";
    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;
-
-}