1
0
mirror of https://github.com/ascribe/onion.git synced 2025-02-14 21:10:27 +01:00

Small stylistic changes to Header and NavRoutes

This commit is contained in:
Brett Sun 2016-01-21 15:11:19 +01:00
parent 41c9a10c84
commit 9b1e6cc8a1
3 changed files with 33 additions and 26 deletions

View File

@ -93,16 +93,16 @@ let Header = React.createClass({
<img className="img-brand" src={whitelabel.logo} alt="Whitelabel brand"/> <img className="img-brand" src={whitelabel.logo} alt="Whitelabel brand"/>
</Link> </Link>
); );
} else {
return (
<span>
<Link className="icon-ascribe-logo" to="/collection"/>
</span>
);
} }
return (
<span>
<Link className="icon-ascribe-logo" to="/collection"/>
</span>
);
}, },
getPoweredBy(){ getPoweredBy() {
return ( return (
<AclProxy <AclProxy
aclObject={this.state.whitelabel} aclObject={this.state.whitelabel}
@ -159,7 +159,8 @@ let Header = React.createClass({
let account; let account;
let signup; let signup;
let navRoutesLinks; let navRoutesLinks;
if (this.state.currentUser.username){
if (this.state.currentUser.username) {
account = ( account = (
<DropdownButton <DropdownButton
ref='dropdownbutton' ref='dropdownbutton'
@ -195,9 +196,15 @@ let Header = React.createClass({
</LinkContainer> </LinkContainer>
</DropdownButton> </DropdownButton>
); );
navRoutesLinks = <NavRoutesLinks routes={this.props.routes} userAcl={this.state.currentUser.acl} navbar right/>;
} navRoutesLinks = (
else { <NavRoutesLinks
navbar
right
routes={this.props.routes}
userAcl={this.state.currentUser.acl} />
);
} else {
account = ( account = (
<LinkContainer <LinkContainer
to="/login"> to="/login">

View File

@ -29,28 +29,28 @@ let NavRoutesLinks = React.createClass({
* @return {Array} Array of ReactElements that can be displayed to the user * @return {Array} Array of ReactElements that can be displayed to the user
*/ */
extractLinksFromRoutes(node, userAcl, i) { extractLinksFromRoutes(node, userAcl, i) {
if(!node) { if (!node) {
return; return;
} }
let links = node.childRoutes.map((child, j) => { const links = node.childRoutes.map((child, j) => {
const { aclName, headerTitle, path, childRoutes } = child;
let childrenFn = null; let childrenFn = null;
let { aclName, headerTitle, path, childRoutes } = child;
// If the node has children that could be rendered, then we want // If the node has children that could be rendered, then we want
// to execute this function again with the child as the root // to execute this function again with the child as the root
// //
// Otherwise we'll just pass childrenFn as false // Otherwise we'll just pass childrenFn as false
if(child.childRoutes && child.childRoutes.length > 0) { if (child.childRoutes && child.childRoutes.length) {
childrenFn = this.extractLinksFromRoutes(child, userAcl, i++); childrenFn = this.extractLinksFromRoutes(child, userAcl, i++);
} }
// We validate if the user has set the title correctly, // We validate if the user has set the title correctly,
// otherwise we're not going to render his route // otherwise we're not going to render his route
if(headerTitle && typeof headerTitle === 'string') { if (headerTitle && typeof headerTitle === 'string') {
// if there is an aclName present on the route definition, // if there is an aclName present on the route definition,
// we evaluate it against the user's acl // we evaluate it against the user's acl
if(aclName && typeof aclName !== 'undefined') { if (aclName && typeof aclName !== 'undefined') {
return ( return (
<AclProxy <AclProxy
key={j} key={j}
@ -60,7 +60,7 @@ let NavRoutesLinks = React.createClass({
headerTitle={headerTitle} headerTitle={headerTitle}
routePath={'/' + path} routePath={'/' + path}
depth={i} depth={i}
children={childrenFn}/> children={childrenFn} />
</AclProxy> </AclProxy>
); );
} else { } else {
@ -70,7 +70,7 @@ let NavRoutesLinks = React.createClass({
headerTitle={headerTitle} headerTitle={headerTitle}
routePath={'/' + path} routePath={'/' + path}
depth={i} depth={i}
children={childrenFn}/> children={childrenFn} />
); );
} }
} else { } else {
@ -84,7 +84,7 @@ let NavRoutesLinks = React.createClass({
}, },
render() { render() {
let {routes, userAcl} = this.props; const {routes, userAcl} = this.props;
return ( return (
<Nav {...this.props}> <Nav {...this.props}>
@ -94,4 +94,4 @@ let NavRoutesLinks = React.createClass({
} }
}); });
export default NavRoutesLinks; export default NavRoutesLinks;

View File

@ -23,18 +23,18 @@ let NavRoutesLinksLink = React.createClass({
}, },
render() { render() {
let { children, headerTitle, depth, routePath } = this.props; const { children, headerTitle, depth, routePath } = this.props;
// if the route has children, we're returning a DropdownButton that will get filled // if the route has children, we're returning a DropdownButton that will get filled
// with MenuItems // with MenuItems
if(children) { if (children) {
return ( return (
<DropdownButton title={headerTitle}> <DropdownButton title={headerTitle}>
{children} {children}
</DropdownButton> </DropdownButton>
); );
} else { } else {
if(depth === 1) { if (depth === 1) {
// if the node's child is actually a node of level one (a child of a node), we're // if the node's child is actually a node of level one (a child of a node), we're
// returning a DropdownButton matching MenuItem // returning a DropdownButton matching MenuItem
return ( return (
@ -42,7 +42,7 @@ let NavRoutesLinksLink = React.createClass({
<MenuItem>{headerTitle}</MenuItem> <MenuItem>{headerTitle}</MenuItem>
</LinkContainer> </LinkContainer>
); );
} else if(depth === 0) { } else if (depth === 0) {
return ( return (
<LinkContainer to={routePath}> <LinkContainer to={routePath}>
<NavItem>{headerTitle}</NavItem> <NavItem>{headerTitle}</NavItem>
@ -55,4 +55,4 @@ let NavRoutesLinksLink = React.createClass({
} }
}); });
export default NavRoutesLinksLink; export default NavRoutesLinksLink;