comunes/todos-contra-el-fuego-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

BT4 + header migration (wip)

Browse source
This commit is contained in:
vjrj 2017-11-24 09:58:57 +01:00
parent 8847ab989b
commit e51e08f72a
5 changed files with 130 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

6
client/main.js
View file

@ -1,3 +1,3 @@
import '../imports/startup/client';/*
import '../node_modules/daemonite-material/js/material.min.js';
import '../node_modules/daemonite-material/css/material.css';*/
import '../imports/startup/client';
/* import '../node_modules/daemonite-material/js/material.min.js';
* import '../node_modules/daemonite-material/css/material.css';*/

31
imports/ui/components/AuthenticatedNavigation/AuthenticatedNavigation.js
View file

@ -2,22 +2,35 @@ import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import { LinkContainer } from 'react-router-bootstrap';
import { Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
import { Nav, NavDropdown, MenuItem } from 'react-bootstrap';
/*
FIXME:
navitem needs a nav-link class but does not works
https://github.com/react-bootstrap/react-bootstrap/issues/2644
className="nav-link"
so we did a custom NavLink
*/
import NavItem from '../NavItem/NavItem';
import { Meteor } from 'meteor/meteor';
const AuthenticatedNavigation = ({ name, history }) => (
<div>
{/*
https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Nav.js
https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Nav.js */}
<Nav>
<LinkContainer to="/documents">
<NavItem href="/documents">Documents</NavItem>
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/documents">
<NavItem eventKey={1} href="/documents">Documents</NavItem>
</LinkContainer>
</Nav> */}
<div title={name} className="dropdown-menu dropdown-menu-right">
<a className="dropdown-item" href="/profile">Profile</a>
<a className="dropdown-item" onClick={() => history.push('/logout')} >Logout</a>
</div>
</Nav>
<Nav pullRight>
<NavDropdown eventKey={2} title={name} id="user-nav-dropdown">
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/profile">
<NavItem eventKey={2.1} href="/profile">Profile</NavItem>
</LinkContainer>
<MenuItem divider />x
<MenuItem eventKey={2.2} onClick={() => history.push('/logout')}>Logout</MenuItem>
</NavDropdown>
</Nav>
</div>
);

79
imports/ui/components/NavItem/NavItem.js Normal file
View file

@ -0,0 +1,79 @@
import classNames from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';
import { SafeAnchor } from 'react-bootstrap';
import createChainedFunction from 'react-bootstrap/lib/utils/createChainedFunction';
const propTypes = {
active: PropTypes.bool,
disabled: PropTypes.bool,
role: PropTypes.string,
href: PropTypes.string,
onClick: PropTypes.func,
onSelect: PropTypes.func,
eventKey: PropTypes.any,
};
const defaultProps = {
active: false,
disabled: false,
};
class NavItem extends React.Component {
constructor(props, context) {
super(props, context);
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
if (this.props.onSelect) {
e.preventDefault();
if (!this.props.disabled) {
this.props.onSelect(this.props.eventKey, e);
}
}
}
render() {
const { active, disabled, onClick, className, anchorClassName, style, ...props } =
this.props;
delete props.onSelect;
delete props.eventKey;
// These are injected down by `<Nav>` for building `<SubNav>`s.
delete props.activeKey;
delete props.activeHref;
if (!props.role) {
if (props.href === '#') {
props.role = 'button';
}
} else if (props.role === 'tab') {
props['aria-selected'] = active;
}
return (
<li
role="presentation"
className={classNames(className, { active, disabled })}
style={style}
>
<SafeAnchor
{...props}
disabled={disabled}
className={anchorClassName}
onClick={createChainedFunction(onClick, this.handleClick)}
/>
</li>
);
}
}
NavItem.propTypes = propTypes;
NavItem.defaultProps = defaultProps;
export default NavItem;

16
imports/ui/components/Navigation/Navigation.js
View file

@ -9,21 +9,23 @@ import { translate } from 'react-i18next';
import './Navigation.scss';
const Navigation = props => (
<Navbar>
<Navbar bsClass="navbar navbar-light">
{/* https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Navbar.js */}
<Navbar.Header>
<Navbar.Brand>
<Link to="/">{props.t('AppName')}</Link>
<Link to="/">{props.t('Inicio')}</Link>
</Navbar.Brand>
<Navbar.Toggle />
{/* <Navbar.Toggle/> */}
<button className="sr-only navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
</Navbar.Header>
<Navbar.Collapse>
{!props.authenticated ? <PublicNavigation /> : <AuthenticatedNavigation {...props} />}
</Navbar.Collapse>
</Navbar>
</Navbar.Collapse>
</Navbar>
);
Navigation.defaultProps = {
name: '',
};

22
imports/ui/components/PublicNavigation/PublicNavigation.js
View file

@ -1,12 +1,24 @@
import React from 'react';
import { LinkContainer } from 'react-router-bootstrap';
import { Nav, NavItem } from 'react-bootstrap';
import { Nav } from 'react-bootstrap';
/*
FIXME:
navitem needs a nav-link class but does not works
https://github.com/react-bootstrap/react-bootstrap/issues/2644
className="nav-link"
so we did a custom NavLink
*/
import NavItem from '../NavItem/NavItem';
const PublicNavigation = () => (
<div className="dropdown-menu dropdown-menu-right">
<a className="dropdown-item" href="/signup">Sign Up</a>
<a className="dropdown-item" href="/login">Log In</a>
</div>
<Nav pullRight>
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/signup">
<NavItem eventKey={1} href="/signup">Sign Up</NavItem>
</LinkContainer>
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/login">
<NavItem eventKey={2} href="/login">Log In</NavItem>
</LinkContainer>
</Nav>
);
export default PublicNavigation;