Merged in feature/prettier_tables (pull request #269)

feature/prettier_tables

scm-ui-components/packages/ui-components/src/Icon.js

@@ -0,0 +1,25 @@
+//@flow
+import React from "react";
+import classNames from "classnames";
+
+type Props = {
+  title?: string,
+  name: string
+}
+
+export default class Icon extends React.Component<Props> {
+
+  render() {
+    const { title, name } = this.props;
+    if(title) {
+      return (
+        <i title={title} className={classNames("is-icon", "fas", "fa-fw", "fa-" + name)}/>
+      );
+    }
+    return (
+      <i className={classNames("is-icon", "fas", "fa-" + name)}/>
+    );
+  }
+
+}
+

scm-ui-components/packages/ui-components/src/forms/Radio.js

@@ -22,19 +22,18 @@ class Radio extends React.Component<Props> {
 
   render() {
     return (
-
-          <label className="radio" disabled={this.props.disabled}>
-            <input
-              type="radio"
-              name={this.props.name}
-              value={this.props.value}
-              checked={this.props.checked}
-              onChange={this.props.onChange}
-              disabled={this.props.disabled}
-            />{" "}
-            {this.props.label}
-            {this.renderHelp()}
-          </label>
+      <label className="radio" disabled={this.props.disabled}>
+        <input
+          type="radio"
+          name={this.props.name}
+          value={this.props.value}
+          checked={this.props.checked}
+          onChange={this.props.onChange}
+          disabled={this.props.disabled}
+        />{" "}
+        {this.props.label}
+        {this.renderHelp()}
+      </label>
     );
   }
 }

scm-ui-components/packages/ui-components/src/index.js

@@ -9,6 +9,7 @@ export { validation, urls, repositories };
 export { default as DateFromNow } from "./DateFromNow.js";
 export { default as ErrorNotification } from "./ErrorNotification.js";
 export { default as ErrorPage } from "./ErrorPage.js";
+export { default as Icon } from "./Icon.js";
 export { default as Image } from "./Image.js";
 export { default as Loading } from "./Loading.js";
 export { default as Logo } from "./Logo.js";

scm-ui-components/packages/ui-components/src/navigation/NavLink.js

@@ -1,5 +1,6 @@
 //@flow
 import * as React from "react";
+import classNames from "classnames";
 import {Link, Route} from "react-router-dom";
 
 // TODO mostly copy of PrimaryNavigationLink
@@ -28,7 +29,7 @@ class NavLink extends React.Component<Props> {
 
     let showIcon = null;
     if (icon) {
-      showIcon = (<><i className={icon} />{" "}</>);
+      showIcon = (<><i className={classNames(icon, "fa-fw")} />{" "}</>);
     }
 
     return (

scm-ui-components/packages/ui-components/src/navigation/SubNavigation.js

@@ -1,6 +1,7 @@
 //@flow
 import * as React from "react";
 import { Link, Route } from "react-router-dom";
+import classNames from "classnames";
 
 type Props = {
   to: string,
@@ -37,7 +38,7 @@ class SubNavigation extends React.Component<Props> {
     return (
       <li>
         <Link className={this.isActive(route) ? "is-active" : ""} to={to}>
-          <i className={defaultIcon} /> {label}
+          <i className={classNames(defaultIcon, "fa-fw")} /> {label}
         </Link>
         {children}
       </li>

scm-ui/public/locales/de/groups.json

@@ -6,6 +6,7 @@
     "lastModified": "Zuletzt bearbeitet",
     "type": "Typ",
     "external": "Extern",
+    "internal": "Intern",
     "members": "Mitglieder"
   },
   "groups": {

scm-ui/public/locales/de/users.json

@@ -5,6 +5,7 @@
     "mail": "E-Mail",
     "password": "Passwort",
     "active": "Aktiv",
+    "inactive": "Inaktiv",
     "type": "Typ",
     "creationDate": "Erstellt",
     "lastModified": "Zuletzt bearbeitet"

scm-ui/public/locales/en/groups.json

@@ -6,6 +6,7 @@
     "lastModified": "Last Modified",
     "type": "Type",
     "external": "External",
+    "internal": "Internal",
     "members": "Members"
   },
   "groups": {

scm-ui/public/locales/en/users.json

@@ -5,6 +5,7 @@
     "mail": "E-Mail",
     "password": "Password",
     "active": "Active",
+    "inactive": "Inactive",
     "type": "Type",
     "creationDate": "Creation Date",
     "lastModified": "Last Modified"

scm-ui/src/groups/components/GroupForm.js

@@ -123,7 +123,7 @@ class GroupForm extends React.Component<Props, State> {
     );
   };
 
-  isExistingGroup = () => !! this.props.group;
+  isExistingGroup = () => !!this.props.group;
 
   render() {
     const { loading, t } = this.props;

scm-ui/src/groups/components/table/GroupRow.js

@@ -1,29 +1,38 @@
 // @flow
 import React from "react";
+import { translate } from "react-i18next";
 import { Link } from "react-router-dom";
 import type { Group } from "@scm-manager/ui-types";
-import { Checkbox } from "@scm-manager/ui-components";
+import { Icon } from "@scm-manager/ui-components";
 
 type Props = {
-  group: Group
+  group: Group,
+
+  // context props
+  t: string => string
 };
 
-export default class GroupRow extends React.Component<Props> {
+class GroupRow extends React.Component<Props> {
   renderLink(to: string, label: string) {
     return <Link to={to}>{label}</Link>;
   }
 
   render() {
-    const { group } = this.props;
+    const { group, t } = this.props;
     const to = `/group/${group.name}`;
+    const iconType = group.external ? (
+      <Icon title={t("group.external")} name="sign-out-alt fa-rotate-270" />
+    ) : (
+      <Icon title={t("group.internal")} name="sign-in-alt fa-rotate-90" />
+    );
+
     return (
       <tr>
-        <td>{this.renderLink(to, group.name)}</td>
+        <td>{iconType} {this.renderLink(to, group.name)}</td>
         <td className="is-hidden-mobile">{group.description}</td>
-        <td>
-          <Checkbox checked={group.external} />
-        </td>
       </tr>
     );
   }
 }
+
+export default translate("groups")(GroupRow);

scm-ui/src/groups/components/table/GroupTable.js

@@ -18,7 +18,6 @@ class GroupTable extends React.Component<Props> {
           <tr>
             <th>{t("group.name")}</th>
             <th className="is-hidden-mobile">{t("group.description")}</th>
-            <th>{t("group.external")}</th>
           </tr>
         </thead>
         <tbody>

scm-ui/src/repos/permissions/containers/SinglePermission.js

@@ -11,7 +11,7 @@ import {
 } from "../modules/permissions";
 import { connect } from "react-redux";
 import type { History } from "history";
-import { Button } from "@scm-manager/ui-components";
+import { Button, Icon } from "@scm-manager/ui-components";
 import DeletePermissionButton from "../components/buttons/DeletePermissionButton";
 import RoleSelector from "../components/RoleSelector";
 import AdvancedPermissionsDialog from "./AdvancedPermissionsDialog";
@@ -49,9 +49,6 @@ type State = {
 };
 
 const styles = {
-  iconColor: {
-    color: "#9a9a9a"
-  },
   centerMiddle: {
     display: "table-cell",
     verticalAlign: "middle !important"
@@ -148,15 +145,9 @@ class SinglePermission extends React.Component<Props, State> {
 
     const iconType =
       permission && permission.groupPermission ? (
-        <i
-          title={t("permission.group")}
-          className={classNames("fas fa-user-friends", classes.iconColor)}
-        />
+        <Icon title={t("permission.group")} name="user-friends" />
       ) : (
-        <i
-          title={t("permission.user")}
-          className={classNames("fas fa-user", classes.iconColor)}
-        />
+        <Icon title={t("permission.user")} name="user" />
       );
 
     return (
@@ -171,7 +162,7 @@ class SinglePermission extends React.Component<Props, State> {
             action={this.handleDetailedPermissionsPressed}
           />
         </td>
-        <td className={classes.centerMiddle}>
+        <td className={classNames("is-darker", classes.centerMiddle)}>
           <DeletePermissionButton
             permission={permission}
             namespace={namespace}

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

@@ -80,7 +80,6 @@ class UserForm extends React.Component<Props, State> {
       return (
         this.props.user.displayName === user.displayName &&
         this.props.user.mail === user.mail &&
-        this.props.user.admin === user.admin &&
         this.props.user.active === user.active
       );
     } else {

scm-ui/src/users/components/table/UserRow.js

@@ -1,31 +1,43 @@
 // @flow
 import React from "react";
+import { translate } from "react-i18next";
 import { Link } from "react-router-dom";
 import type { User } from "@scm-manager/ui-types";
+import { Icon } from "@scm-manager/ui-components";
 
 type Props = {
-  user: User
+  user: User,
+
+  // context props
+  t: string => string
 };
 
-export default class UserRow extends React.Component<Props> {
+class UserRow extends React.Component<Props> {
   renderLink(to: string, label: string) {
     return <Link to={to}>{label}</Link>;
   }
 
   render() {
-    const { user } = this.props;
+    const { user, t } = this.props;
     const to = `/user/${user.name}`;
+    const iconType = user.active ? (
+      <Icon title={t("user.active")} name="user" />
+    ) : (
+      <Icon title={t("user.inactive")} name="user-slash" />
+    );
+
     return (
-      <tr>
-        <td className="is-hidden-mobile">{this.renderLink(to, user.name)}</td>
-        <td>{this.renderLink(to, user.displayName)}</td>
+      <tr className={user.active ? "border-is-green" : "border-is-yellow"}>
+        <td>{iconType} {this.renderLink(to, user.name)}</td>
+        <td className="is-hidden-mobile">
+          {this.renderLink(to, user.displayName)}
+        </td>
         <td>
           <a href={`mailto:${user.mail}`}>{user.mail}</a>
         </td>
-        <td className="is-hidden-mobile">
-          <input type="checkbox" id="active" checked={user.active} readOnly />
-        </td>
       </tr>
     );
   }
 }
+
+export default translate("users")(UserRow);

scm-ui/src/users/components/table/UserTable.js

@@ -19,7 +19,6 @@ class UserTable extends React.Component<Props> {
             <th className="is-hidden-mobile">{t("user.name")}</th>
             <th>{t("user.displayName")}</th>
             <th>{t("user.mail")}</th>
-            <th className="is-hidden-mobile">{t("user.active")}</th>
           </tr>
         </thead>
         <tbody>

scm-ui/styles/scm.scss

@@ -219,16 +219,23 @@ ul.is-separated {
 // card tables
 .card-table {
   border-collapse: separate;
-  border-spacing: 0px 5px;
+  border-spacing: 0 5px;
 
   tr {
     a {
       color: #363636;
     }
+    &.border-is-green td:first-child {
+      border-left-color: $green;
+    }
+    &.border-is-yellow td:first-child {
+      border-left-color: $yellow;
+    }
     &:hover {
       td {
         background-color: whitesmoke;
-        &:nth-child(4) {
+
+        &.is-darker {
           background-color: #e1e1e1;
         }
       }
@@ -238,13 +245,14 @@ ul.is-separated {
     }
   }
   td {
-    border-bottom: 1px solid whitesmoke;
-    background-color: #fafafa;
     padding: 1em 1.25em;
+    background-color: #fafafa;
+    border-bottom: 1px solid whitesmoke;
+
     &:first-child {
-      border-left: 3px solid $mint;
+      border-left: 3px solid $grey;
     }
-    &:nth-child(4) {
+    &.is-darker {
       background-color: whitesmoke;
     }
   }
@@ -318,6 +326,10 @@ form .field:not(.is-grouped) {
   }
 }
 
+.is-icon {
+  color: $grey-light;
+}
+
 // label with help-icon compensation
 .label-icon-spacing {
   margin-top: 30px;