replace checkboxes with icons with hover

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

@@ -9,6 +9,7 @@ import {
   InputField,
   SubmitButton,
   Textarea,
+  Icon,
   Checkbox
 } from "@scm-manager/ui-components";
 import type { Group, SelectValue } from "@scm-manager/ui-types";
@@ -113,9 +114,16 @@ class GroupForm extends React.Component<Props, State> {
     if (this.isExistingGroup()) {
       return null;
     }
+
+    const iconType = group && 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 (
       <Checkbox
-        label={t("group.external")}
+        label={<>{iconType} {t("group.external")}</>}
         checked={group.external}
         helpText={t("groupForm.help.externalHelpText")}
         onChange={this.handleExternalChange}

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
+        <Icon title={t("permission.group")} name="user-friends" />
-          title={t("permission.group")}
-          className={classNames("fas fa-user-friends", classes.iconColor)}
-        />
       ) : (
-        <i
+        <Icon title={t("permission.user")} name="user" />
-          title={t("permission.user")}
-          className={classNames("fas fa-user", classes.iconColor)}
-        />
       );
 
     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

@@ -5,6 +5,7 @@ import type { User } from "@scm-manager/ui-types";
 import {
   Subtitle,
   Checkbox,
+  Icon,
   InputField,
   PasswordConfirmation,
   SubmitButton,
@@ -136,6 +137,13 @@ class UserForm extends React.Component<Props, State> {
       // edit existing user
       subtitle = <Subtitle subtitle={t("userForm.subtitle")} />;
     }
+
+    const iconType = user && user.active ? (
+      <Icon title={t("user.active")} name="user" />
+    ) : (
+      <Icon title={t("user.inactive")} name="user-slash" />
+    );
+
     return (
       <>
         {subtitle}
@@ -167,7 +175,7 @@ class UserForm extends React.Component<Props, State> {
             <div className="column">
               {passwordChangeField}
               <Checkbox
-                label={t("user.active")}
+                label={<>{iconType} {t("user.active")}</>}
                 onChange={this.handleActiveChange}
                 checked={user ? user.active : false}
                 helpText={t("help.activeHelpText")}

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>
+      <tr className={user.active ? "border-is-green" : "border-is-yellow"}>
-        <td className="is-hidden-mobile">{this.renderLink(to, user.name)}</td>
+        <td>{iconType} {this.renderLink(to, user.name)}</td>
-        <td>{this.renderLink(to, user.displayName)}</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>