Merged in feature/ux_icons (pull request #143)

Feature/ux icons
2026-01-05 23:29:53 +01:00 · 2019-01-23 15:44:29 +00:00
parent 9ad1ad4d65 f68a59e5d1
commit 924139da7c
18 changed files with 45 additions and 21 deletions
--- a/scm-ui-components/packages/ui-components/src/navigation/NavAction.js
+++ b/scm-ui-components/packages/ui-components/src/navigation/NavAction.js
@@ -2,16 +2,23 @@
 import React from "react";

 type Props = {
+  icon?: string,
  label: string,
  action: () => void
 };

 class NavAction extends React.Component<Props> {
  render() {
-    const { label, action } = this.props;
+    const { label, icon, action } = this.props;
+
+    let showIcon = null;
+    if (icon) {
+      showIcon = (<><i className={icon}></i>{" "}</>);
+    }
+
    return (
      <li>
-        <a onClick={action}>{label}</a>
+        <a onClick={action}>{showIcon}{label}</a>
      </li>
    );
  }
--- a/scm-ui-components/packages/ui-components/src/navigation/NavLink.js
+++ b/scm-ui-components/packages/ui-components/src/navigation/NavLink.js
@@ -6,6 +6,7 @@ import {Link, Route} from "react-router-dom";

 type Props = {
  to: string,
+  icon?: string,
  label: string,
  activeOnlyWhenExact?: boolean,
  activeWhenMatch?: (route: any) => boolean
@@ -23,10 +24,17 @@ class NavLink extends React.Component<Props> {
  }

  renderLink = (route: any) => {
-    const { to, label } = this.props;
+    const { to, icon, label } = this.props;
+
+    let showIcon = null;
+    if (icon) {
+      showIcon = (<><i className={icon}></i>{" "}</>);
+    }
+
    return (
      <li>
        <Link className={this.isActive(route) ? "is-active" : ""} to={to}>
+          {showIcon}
          {label}
        </Link>
      </li>
@@ -35,6 +43,7 @@ class NavLink extends React.Component<Props> {

  render() {
    const { to, activeOnlyWhenExact } = this.props;
+
    return (
      <Route path={to} exact={activeOnlyWhenExact} children={this.renderLink} />
    );
--- a/scm-ui/src/containers/Profile.js
+++ b/scm-ui/src/containers/Profile.js
@@ -70,7 +70,7 @@ class Profile extends React.Component<Props, State> {
          <div className="column">
            <Navigation>
              <Section label={t("profile.navigation-label")}>
-                <NavLink to={`${url}`} label={t("profile.information")} />
+                <NavLink to={`${url}`} icon="fas fa-info-circle" label={t("profile.information")} />
              </Section>
              <Section label={t("profile.actions-label")}>
                <NavLink
--- a/scm-ui/src/groups/components/navLinks/DeleteGroupNavLink.js
+++ b/scm-ui/src/groups/components/navLinks/DeleteGroupNavLink.js
@@ -49,7 +49,7 @@ export class DeleteGroupNavLink extends React.Component<Props> {
    if (!this.isDeletable()) {
      return null;
    }
-    return <NavAction label={t("delete-group-button.label")} action={action} />;
+    return <NavAction icon="fas fa-times" label={t("delete-group-button.label")} action={action} />;
  }
 }

--- a/scm-ui/src/groups/components/navLinks/EditGroupNavLink.js
+++ b/scm-ui/src/groups/components/navLinks/EditGroupNavLink.js
@@ -18,7 +18,7 @@ class EditGroupNavLink extends React.Component<Props, State> {
    if (!this.isEditable()) {
      return null;
    }
-    return <NavLink label={t("edit-group-button.label")} to={editUrl} />;
+    return <NavLink to={editUrl} icon="fas fa-cog" label={t("edit-group-button.label")} />;
  }

  isEditable = () => {
--- a/scm-ui/src/groups/components/navLinks/SetPermissionsNavLink.js
+++ b/scm-ui/src/groups/components/navLinks/SetPermissionsNavLink.js
@@ -17,7 +17,7 @@ class ChangePermissionNavLink extends React.Component<Props> {
    if (!this.hasPermissionToSetPermission()) {
      return null;
    }
-    return <NavLink label={t("set-permissions-button.label")} to={permissionsUrl} />;
+    return <NavLink to={permissionsUrl} label={t("set-permissions-button.label")} />;
  }

  hasPermissionToSetPermission = () => {
--- a/scm-ui/src/groups/containers/SingleGroup.js
+++ b/scm-ui/src/groups/containers/SingleGroup.js
@@ -131,6 +131,7 @@ class SingleGroup extends React.Component<Props> {
              <Section label={t("single-group.navigation-label")}>
                <NavLink
                  to={`${url}`}
+                  icon="fas fa-info-circle"
                  label={t("single-group.information-label")}
                />
                <SetPermissionsNavLink
@@ -149,7 +150,11 @@ class SingleGroup extends React.Component<Props> {
                  deleteGroup={this.deleteGroup}
                />
                <EditGroupNavLink group={group} editUrl={`${url}/edit`} />
-                <NavLink to="/groups" label={t("single-group.back-label")} />
+                <NavLink
+                  to="/groups"
+                  icon="fas fa-undo-alt"
+                  label={t("single-group.back-label")}
+                />
              </Section>
            </Navigation>
          </div>
--- a/scm-ui/src/repos/components/DeleteNavAction.js
+++ b/scm-ui/src/repos/components/DeleteNavAction.js
@@ -51,7 +51,7 @@ class DeleteNavAction extends React.Component<Props> {
    if (!this.isDeletable()) {
      return null;
    }
-    return <NavAction label={t("delete-nav-action.label")} action={action} />;
+    return <NavAction action={action} icon="fas fa-times" label={t("delete-nav-action.label")} />;
  }
 }

--- a/scm-ui/src/repos/components/EditNavLink.js
+++ b/scm-ui/src/repos/components/EditNavLink.js
@@ -15,7 +15,7 @@ class EditNavLink extends React.Component<Props> {
      return null;
    }
    const { editUrl, t } = this.props;
-    return <NavLink to={editUrl} label={t("edit-nav-link.label")} />;
+    return <NavLink to={editUrl} icon="fas fa-cog" label={t("edit-nav-link.label")} />;
  }
 }

--- a/scm-ui/src/repos/components/EditNavLink.test.js
+++ b/scm-ui/src/repos/components/EditNavLink.test.js
@@ -33,6 +33,6 @@ describe("EditNavLink", () => {
      <EditNavLink repository={repository} editUrl="" />,
      options.get()
    );
-    expect(navLink.text()).toBe("edit-nav-link.label");
+    expect(navLink.text()).toBe(" edit-nav-link.label");
  });
 });
--- a/scm-ui/src/repos/components/PermissionsNavLink.js
+++ b/scm-ui/src/repos/components/PermissionsNavLink.js
@@ -20,7 +20,7 @@ class PermissionsNavLink extends React.Component<Props> {
    }
    const { permissionUrl, t } = this.props;
    return (
-      <NavLink to={permissionUrl} label={t("repository-root.permissions")} />
+      <NavLink to={permissionUrl} icon="fas fa-lock" label={t("repository-root.permissions")} />
    );
  }
 }
--- a/scm-ui/src/repos/components/PermissionsNavLink.test.js
+++ b/scm-ui/src/repos/components/PermissionsNavLink.test.js
@@ -33,6 +33,6 @@ describe("PermissionsNavLink", () => {
      <PermissionsNavLink repository={repository} permissionUrl="" />,
      options.get()
    );
-    expect(navLink.text()).toBe("repository-root.permissions");
+    expect(navLink.text()).toBe(" repository-root.permissions");
  });
 });
--- a/scm-ui/src/repos/containers/RepositoryRoot.js
+++ b/scm-ui/src/repos/containers/RepositoryRoot.js
@@ -169,11 +169,12 @@ class RepositoryRoot extends React.Component<Props> {
          <div className="column">
            <Navigation>
              <Section label={t("repository-root.navigation-label")}>
-                <NavLink to={url} label={t("repository-root.information")} />
+                <NavLink to={url} icon="fas fa-info-circle" label={t("repository-root.information")} />
                <RepositoryNavLink
                  repository={repository}
                  linkName="changesets"
                  to={`${url}/changesets/`}
+                  icon="fas fa-code-branch"
                  label={t("repository-root.history")}
                  activeWhenMatch={this.matches}
                  activeOnlyWhenExact={false}
@@ -182,6 +183,7 @@ class RepositoryRoot extends React.Component<Props> {
                  repository={repository}
                  linkName="sources"
                  to={`${url}/sources`}
+                  icon="fas fa-code"
                  label={t("repository-root.sources")}
                  activeOnlyWhenExact={false}
                />
@@ -189,7 +191,6 @@ class RepositoryRoot extends React.Component<Props> {
                  permissionUrl={`${url}/permissions`}
                  repository={repository}
                />
-                <EditNavLink repository={repository} editUrl={`${url}/edit`} />
                <ExtensionPoint
                  name="repository.navigation"
                  props={extensionProps}
@@ -198,7 +199,8 @@ class RepositoryRoot extends React.Component<Props> {
              </Section>
              <Section label={t("repository-root.actions-label")}>
                <DeleteNavAction repository={repository} delete={this.delete} />
-                <NavLink to="/repos" label={t("repository-root.back-label")} />
+                <EditNavLink repository={repository} editUrl={`${url}/edit`} />
+                <NavLink to="/repos" icon="fas fa-undo" label={t("repository-root.back-label")} />
              </Section>
            </Navigation>
          </div>
--- a/scm-ui/src/users/components/navLinks/DeleteUserNavLink.js
+++ b/scm-ui/src/users/components/navLinks/DeleteUserNavLink.js
@@ -49,7 +49,7 @@ class DeleteUserNavLink extends React.Component<Props> {
    if (!this.isDeletable()) {
      return null;
    }
-    return <NavAction label={t("delete-user-button.label")} action={action} />;
+    return <NavAction icon="fas fa-times" label={t("delete-user-button.label")} action={action} />;
  }
 }

--- a/scm-ui/src/users/components/navLinks/EditUserNavLink.js
+++ b/scm-ui/src/users/components/navLinks/EditUserNavLink.js
@@ -17,7 +17,7 @@ class EditUserNavLink extends React.Component<Props> {
    if (!this.isEditable()) {
      return null;
    }
-    return <NavLink label={t("edit-user-button.label")} to={editUrl} />;
+    return <NavLink to={editUrl} icon="fas fa-cog" label={t("edit-user-button.label")} />;
  }

  isEditable = () => {
--- a/scm-ui/src/users/components/navLinks/SetPasswordNavLink.js
+++ b/scm-ui/src/users/components/navLinks/SetPasswordNavLink.js
@@ -17,7 +17,7 @@ class ChangePasswordNavLink extends React.Component<Props> {
    if (!this.hasPermissionToSetPassword()) {
      return null;
    }
-    return <NavLink label={t("set-password-button.label")} to={passwordUrl} />;
+    return <NavLink to={passwordUrl} label={t("set-password-button.label")} />;
  }

  hasPermissionToSetPassword = () => {
--- a/scm-ui/src/users/components/navLinks/SetPermissionsNavLink.js
+++ b/scm-ui/src/users/components/navLinks/SetPermissionsNavLink.js
@@ -17,7 +17,7 @@ class ChangePermissionNavLink extends React.Component<Props> {
    if (!this.hasPermissionToSetPermission()) {
      return null;
    }
-    return <NavLink label={t("set-permissions-button.label")} to={permissionsUrl} />;
+    return <NavLink to={permissionsUrl} label={t("set-permissions-button.label")} />;
  }

  hasPermissionToSetPermission = () => {
--- a/scm-ui/src/users/containers/SingleUser.js
+++ b/scm-ui/src/users/containers/SingleUser.js
@@ -122,6 +122,7 @@ class SingleUser extends React.Component<Props> {
              <Section label={t("single-user.navigation-label")}>
                <NavLink
                  to={`${url}`}
+                  icon="fas fa-info-circle"
                  label={t("single-user.information-label")}
                />
                <EditUserNavLink user={user} editUrl={`${url}/edit`} />
@@ -136,7 +137,7 @@ class SingleUser extends React.Component<Props> {
              </Section>
              <Section label={t("single-user.actions-label")}>
                <DeleteUserNavLink user={user} deleteUser={this.deleteUser} />
-                <NavLink to="/users" label={t("single-user.back-label")} />
+                <NavLink to="/users" icon="fas fa-undo" label={t("single-user.back-label")} />
              </Section>
            </Navigation>
          </div>