More UI changes

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>

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>

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>

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"

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,
+    height: "calc(120px - 1.5rem)",
-    top: 0,
+    width: "calc(50% - 3rem)"
-    bottom: 0,
-    right: 0
   },
   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)}>
+      <div className={classNames("box", "box-link-shadow", "column", "is-half")}>
-        <Link className={classes.overlay} to={repositoryLink} />
+        <Link className={classNames(classes.overlay)} to={repositoryLink} />
         <article className={classNames("media", classes.inner)}>
           <figure className="media-left">
             <RepositoryAvatar repository={repository} />

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"
   }
 };
 

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>
     );
   }

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("has-background-light field", "is-horizontal", classes.wrapper)}>
-          <div
+          <div className={classNames("field-label", "is-normal", classes.zeroflex)}>
-            className={classNames("field-label", "is-normal", classes.zeroflex)}
-          >
             <label className="label">{t("branch-selector.label")}</label>
           </div>
           <div className="field-body">

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
+        <div class="columns">
-            label={t("permission.name")}
+            <div class="column is-three-quarters">
-            value={name ? name : ""}
+              <InputField
-            onChange={this.handleNameChange}
+                label={t("permission.name")}
-            validationError={!this.state.valid}
+                value={name ? name : ""}
-            errorMessage={t("permission.add-permission.name-input-invalid")}
+                onChange={this.handleNameChange}
-            helpText={t("permission.help.nameHelpText")}
+                validationError={!this.state.valid}
-          />
+                errorMessage={t("permission.add-permission.name-input-invalid")}
-          <Checkbox
+                helpText={t("permission.help.nameHelpText")}
-            label={t("permission.group-permission")}
+              />
-            checked={groupPermission ? groupPermission : false}
+           
-            onChange={this.handleGroupPermissionChange}
+              <Checkbox
-            helpText={t("permission.help.groupPermissionHelpText")}
+                label={t("permission.group-permission")}
-          />
+                checked={groupPermission ? groupPermission : false}
-          <TypeSelector
+                onChange={this.handleGroupPermissionChange}
-            label={t("permission.type")}
+                helpText={t("permission.help.groupPermissionHelpText")}
-            helpText={t("permission.help.typeHelpText")}
+              />
-            handleTypeChange={this.handleTypeChange}
+            </div>
-            type={type ? type : "READ"}
+            <div class="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 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>
     );

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>

scm-ui/src/users/components/UserForm.js

@@ -104,41 +104,55 @@ class UserForm extends React.Component<Props, State> {
     }
     return (
       <form onSubmit={this.submit}>
-        {nameField}
+        <div class="columns">
-        <InputField
+            <div class="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 class="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 class="columns">
-        <Checkbox
+            <div class="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 class="columns">
+            <div class="column">
+                <SubmitButton
+                  disabled={!this.isValid()}
+                  loading={loading}
+                  label={t("user-form.submit")}
+                />
+            </div>
+        </div>
       </form>
     );
   }

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>

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;
-
-}