Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-07 05:55:44 +01:00
Code Issues Packages Projects Releases Activity

redesigned submenu

Browse Source
This commit is contained in:
Florian Scholdei
2019-01-29 08:58:45 +01:00
parent f06d2d67a3
commit a13a144c21
2 changed files with 48 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
scm-ui-components/packages/ui-components/src/navigation/SubNavigation.js
View File

@@ -1,6 +1,6 @@
//@flow //@flow
import * as React from "react"; import * as React from "react";
import {Link, Route} from "react-router-dom"; import { Link, Route } from "react-router-dom";
type Props = { type Props = {
to: string, to: string,
@@ -30,18 +30,14 @@ class SubNavigation extends React.Component<Props> {
} }
let children = null; let children = null;
if(this.isActive(route)) { if (this.isActive(route)) {
children = ( children = <ul className="sub-menu">{this.props.children}</ul>;
<ul>{this.props.children}</ul>
);
} }
return ( return (
<li> <li>
<Link className={this.isActive(route) ? "is-active" : ""} to={to}> <Link className={this.isActive(route) ? "is-active" : ""} to={to}>
<i className={defaultIcon} /> <i className={defaultIcon} /> {label}
{" "}
{label}
</Link> </Link>
{children} {children}
</li> </li>
@@ -53,11 +49,15 @@ class SubNavigation extends React.Component<Props> {
// removes last part of url // removes last part of url
let parents = to.split("/"); let parents = to.split("/");
parents.splice(-1,1); parents.splice(-1, 1);
let parent = parents.join("/"); let parent = parents.join("/");
return ( return (
<Route path={parent} exact={activeOnlyWhenExact} children={this.renderLink} /> <Route
path={parent}
exact={activeOnlyWhenExact}
children={this.renderLink}
/>
); );
} }
} }

53
scm-ui/styles/scm.scss
View File

@@ -259,21 +259,10 @@ $fa-font-path: "webfonts";
&.is-active { &.is-active {
color: $blue; color: $blue;
background-color: #fff; background-color: #fff;
}
}
&:before { > li {
position: relative;
content: " ";
background: $blue;
height: 53px;
width: 2px;
display: block;
left: -17px;
float: left;
top: -16px;
}
}
}
li {
ul { ul {
margin: 0; margin: 0;
border-top: 1px solid #eee; border-top: 1px solid #eee;
@@ -286,6 +275,18 @@ $fa-font-path: "webfonts";
} }
} }
> a.is-active:before {
position: relative;
content: " ";
background: $blue;
height: 53px;
width: 2px;
display: block;
left: -17px;
float: left;
top: -16px;
}
border-radius: 0; border-radius: 0;
border-top: 1px solid #eee; border-top: 1px solid #eee;
border-left: 1px solid #eee; border-left: 1px solid #eee;
@@ -301,3 +302,27 @@ $fa-font-path: "webfonts";
margin-bottom: 0; margin-bottom: 0;
} }
} }
.sub-menu li {
line-height: 1;
a {
padding: 0.75rem 1rem;
}
a:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
content: "\f105";
padding-right: 5px;
}
i {
display: none;
}
}