Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-08 06:25:45 +01:00
Code Issues Packages Projects Releases Activity

added icons to navigation

Browse Source
This commit is contained in:
Florian Scholdei
2018-12-21 13:41:34 +01:00
parent dbf01d6cf3
commit b69c06960e
9 changed files with 27 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
scm-ui-components/packages/ui-components/src/navigation/NavAction.js
View File

@@ -2,16 +2,23 @@
import React from "react"; import React from "react";
type Props = { type Props = {
icon?: string,
label: string, label: string,
action: () => void action: () => void
}; };
class NavAction extends React.Component<Props> { class NavAction extends React.Component<Props> {
render() { render() {
const { label, action } = this.props; const { label, icon, action } = this.props;
let showIcon = null;
if (icon) {
showIcon = (<><i className={icon}></i>{" "}</>);
}
return ( return (
<li> <li>
<a onClick={action}>{label}</a> <a onClick={action}>{showIcon}{label}</a>
</li> </li>
); );
} }

11
scm-ui-components/packages/ui-components/src/navigation/NavLink.js
View File

@@ -6,6 +6,7 @@ import {Link, Route} from "react-router-dom";
type Props = { type Props = {
to: string, to: string,
icon?: string,
label: string, label: string,
activeOnlyWhenExact?: boolean, activeOnlyWhenExact?: boolean,
activeWhenMatch?: (route: any) => boolean activeWhenMatch?: (route: any) => boolean
@@ -23,10 +24,17 @@ class NavLink extends React.Component<Props> {
} }
renderLink = (route: any) => { 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 ( return (
<li> <li>
<Link className={this.isActive(route) ? "is-active" : ""} to={to}> <Link className={this.isActive(route) ? "is-active" : ""} to={to}>
{showIcon}
{label} {label}
</Link> </Link>
</li> </li>
@@ -35,6 +43,7 @@ class NavLink extends React.Component<Props> {
render() { render() {
const { to, activeOnlyWhenExact } = this.props; const { to, activeOnlyWhenExact } = this.props;
return ( return (
<Route path={to} exact={activeOnlyWhenExact} children={this.renderLink} /> <Route path={to} exact={activeOnlyWhenExact} children={this.renderLink} />
); );

2
scm-ui/src/groups/components/navLinks/DeleteGroupNavLink.js
View File

@@ -49,7 +49,7 @@ export class DeleteGroupNavLink extends React.Component<Props> {
if (!this.isDeletable()) { if (!this.isDeletable()) {
return null; 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} />;
} }
} }

2
scm-ui/src/groups/components/navLinks/EditGroupNavLink.js
View File

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

3
scm-ui/src/groups/containers/SingleGroup.js
View File

@@ -109,6 +109,7 @@ class SingleGroup extends React.Component<Props> {
<NavLink <NavLink
to={`${url}`} to={`${url}`}
label={t("single-group.information-label")} label={t("single-group.information-label")}
icon={"fas fa-info-circle"}
/> />
</Section> </Section>
<Section label={t("single-group.actions-label")}> <Section label={t("single-group.actions-label")}>
@@ -117,7 +118,7 @@ class SingleGroup extends React.Component<Props> {
deleteGroup={this.deleteGroup} deleteGroup={this.deleteGroup}
/> />
<EditGroupNavLink group={group} editUrl={`${url}/edit`} /> <EditGroupNavLink group={group} editUrl={`${url}/edit`} />
<NavLink to="/groups" label={t("single-group.back-label")} /> <NavLink to="/groups" label={t("single-group.back-label")} icon={"fas fa-undo-alt"} />
</Section> </Section>
</Navigation> </Navigation>
</div> </div>

2
scm-ui/src/repos/components/DeleteNavAction.js
View File

@@ -51,7 +51,7 @@ class DeleteNavAction extends React.Component<Props> {
if (!this.isDeletable()) { if (!this.isDeletable()) {
return null; return null;
} }
return <NavAction label={t("delete-nav-action.label")} action={action} />; return <NavAction icon="fas fa-times" label={t("delete-nav-action.label")} action={action} />;
} }
} }

2
scm-ui/src/users/components/navLinks/DeleteUserNavLink.js
View File

@@ -49,7 +49,7 @@ class DeleteUserNavLink extends React.Component<Props> {
if (!this.isDeletable()) { if (!this.isDeletable()) {
return null; 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} />;
} }
} }

2
scm-ui/src/users/components/navLinks/EditUserNavLink.js
View File

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

1
scm-ui/src/users/containers/SingleUser.js
View File

@@ -111,6 +111,7 @@ class SingleUser extends React.Component<Props> {
<Navigation> <Navigation>
<Section label={t("single-user.navigation-label")}> <Section label={t("single-user.navigation-label")}>
<NavLink <NavLink
icon="fas fa-info-circle"
to={`${url}`} to={`${url}`}
label={t("single-user.information-label")} label={t("single-user.information-label")}
/> />