Skip to content

Commit fe7fec4

Browse files
okendokenokendoken
authored
Merge pull request #7 from flatlogic/pr/master/update
Pr/master/update
2 parents 4f135c5 + 5989f3b commit fe7fec4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

84 files changed

+5809
-547
lines changed

‎package.json

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,37 +9,45 @@
99
"browserslist": [">1%", "last 4 versions", "Firefox ESR", "not ie < 9"],
1010
"dependencies": {
1111
"@babel/polyfill": "7.0.0-beta.32",
12+
"awesome-bootstrap-checkbox": "^1.0.1",
1213
"bluebird": "^3.5.1",
1314
"body-parser": "^1.18.2",
14-
"bootstrap-sass": "^3.3.6",
1515
"bundle-loader": "^0.5.5",
1616
"classnames": "^2.2.5",
1717
"cookie-parser": "^1.4.3",
1818
"core-js": "^2.5.1",
1919
"express": "^4.16.2",
2020
"express-graphql": "^0.6.11",
2121
"express-jwt": "^5.3.0",
22+
"font-awesome": "^4.7.0",
23+
"glyphicons-halflings": "^1.9.1",
2224
"graphql": "^0.11.7",
2325
"graphql-relay": "^0.5.1",
2426
"graphql-sequelize": "^5.3.2",
2527
"history": "^4.7.2",
28+
"imports-loader": "0.7.1",
2629
"isomorphic-fetch": "^2.2.1",
2730
"isomorphic-style-loader": "^4.0.0",
31+
"jquery": "^3.3.1",
2832
"jsonwebtoken": "^8.1.0",
33+
"messenger": "git+https://github.com/HubSpot/messenger.git#v1.4.2",
2934
"node-fetch": "^1.7.3",
3035
"normalize.css": "^7.0.0",
3136
"passport": "^0.4.0",
3237
"passport-facebook": "^2.1.1",
3338
"pretty-error": "^2.1.1",
34-
"prop-types": "^15.6.0",
39+
"prop-types": "^15.6.1",
3540
"query-string": "^5.0.1",
3641
"react": "^16.1.1",
37-
"react-bootstrap": "^0.31.5",
3842
"react-cookie": "^1.0.5",
3943
"react-dom": "^16.1.1",
44+
"react-google-maps": "^9.4.5",
4045
"react-redux": "^5.0.4",
4146
"react-router": "^4.0.0",
4247
"react-router-dom": "^4.0.0",
48+
"react-sparklines": "^1.7.0",
49+
"reactstrap": "^6.0.1",
50+
"recharts": "^1.0.0-beta.10",
4351
"redux": "^3.6.0",
4452
"redux-logger": "^3.0.1",
4553
"redux-thunk": "^2.2.0",
@@ -133,6 +141,9 @@
133141
"webpack-hot-middleware": "^2.20.0",
134142
"webpack-node-externals": "^1.6.0"
135143
},
144+
"resolutions": {
145+
"jquery": "3.3.1"
146+
},
136147
"lint-staged": {
137148
"*.{js,jsx}": ["eslint --fix", "git add --force"],
138149
"*.{json,graphql}": ["prettier --write", "git add --force"],

‎src/components/Footer/Footer.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@
99

1010
import React from 'react';
1111
import PropTypes from 'prop-types';
12+
import cx from 'classnames';
1213
import withStyles from 'isomorphic-style-loader/lib/withStyles';
1314
import { Link } from 'react-router-dom';
15+
1416
import s from './Footer.scss';
1517

1618
class Footer extends React.Component {
@@ -24,7 +26,7 @@ class Footer extends React.Component {
2426

2527
render() {
2628
return (
27-
<footer className={[s.root, this.props.className].join(' ')}>
29+
<footer className={cx(s.root, this.props.className)}>
2830
<div className={s.container}>
2931
<span>© 2017 &nbsp;Flatlogic LLC </span>
3032
<span className={s.spacer}>·</span>

‎src/components/Header/Header.js

Lines changed: 73 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,29 @@
88
*/
99

1010
import { connect } from 'react-redux';
11+
import cx from 'classnames';
1112
import React from 'react';
1213
import PropTypes from 'prop-types';
1314
import withStyles from 'isomorphic-style-loader/lib/withStyles';
1415
import {
1516
Navbar,
16-
MenuItem,
1717
Nav,
18-
NavDropdown,
1918
NavItem,
20-
Glyphicon,
21-
Badge,
22-
} from 'react-bootstrap';
23-
import { logoutUser } from '../../actions/user';
19+
Button,
20+
Dropdown,
21+
DropdownToggle,
22+
DropdownMenu,
23+
DropdownItem,
24+
Input,
25+
InputGroup,
26+
InputGroupAddon,
27+
} from 'reactstrap';
28+
import { NavLink } from 'react-router-dom';
29+
30+
import Icon from '../Icon';
2431

32+
import photo from '../../images/photo.jpg';
33+
import { logoutUser } from '../../actions/user';
2534
import s from './Header.scss';
2635

2736
class Header extends React.Component {
@@ -34,50 +43,74 @@ class Header extends React.Component {
3443
sidebarToggle: () => {},
3544
};
3645

37-
doLogout() {
46+
state = { isOpen: false };
47+
48+
toggleDropdown = () => {
49+
this.setState(prevState => ({
50+
isOpen: !prevState.isOpen,
51+
}));
52+
}
53+
54+
doLogout = () => {
3855
this.props.dispatch(logoutUser());
3956
}
4057

4158
render() {
59+
const {isOpen} = this.state;
4260
return (
43-
<Navbar fluid>
44-
<Nav pullLeft>
61+
<Navbar className={s.root}>
62+
<Nav>
4563
<NavItem
46-
className={['visible-xs', s.menuButton].join(' ')}
47-
eventKey={1}
64+
className={cx('visible-xs', s.headerIcon)}
4865
href="#"
4966
onClick={this.props.sidebarToggle}
5067
>
51-
<Glyphicon glyph="menu-hamburger" />
68+
<i className="fa fa-bars fa-2x text-muted" />
69+
</NavItem>
70+
<NavItem>
71+
<InputGroup>
72+
<Input placeholder="Search for..." />
73+
<InputGroupAddon addonType="append" className="px-2">
74+
<i className="fa fa-search text-muted" />
75+
</InputGroupAddon>
76+
</InputGroup>
5277
</NavItem>
5378
</Nav>
54-
<Nav pullRight>
55-
<NavDropdown
56-
eventKey={1}
57-
title={
58-
<span>
59-
<Glyphicon glyph="user" className="mr-sm" />
60-
John <span className="fw-semi-bold">Willington</span>
61-
<Badge className="ml-sm badge-warning">4</Badge>
62-
</span>
63-
}
64-
noCaret
65-
id="basic-nav-dropdown"
66-
>
67-
<MenuItem eventKey={3.1}>Notifications</MenuItem>
68-
<MenuItem eventKey={3.2}>Action</MenuItem>
69-
<MenuItem eventKey={3.3}>Something else here</MenuItem>
70-
<MenuItem divider />
71-
<MenuItem eventKey={3.4}>Separated link</MenuItem>
72-
</NavDropdown>
73-
{/* eslint-disable */}
74-
<NavItem
75-
className="hidden-xs"
76-
eventKey={2}
77-
onClick={this.doLogout.bind(this)}
78-
>
79-
{/* eslint-enable */}
80-
Logout
79+
<Nav className="ml-auto">
80+
<Dropdown isOpen={isOpen} toggle={this.toggleDropdown}>
81+
<DropdownToggle nav>
82+
<img className={cx('rounded-circle mr-sm', s.adminPhoto)} src={photo} alt="administrator" />
83+
<span className="text-body">Administrator</span>
84+
<i className={cx('fa fa-angle-down ml-sm', s.arrow, {[s.arrowActive]: isOpen})} />
85+
</DropdownToggle>
86+
<DropdownMenu style={{width: '100%'}}>
87+
<DropdownItem>
88+
<NavLink to="/app/posts">Posts</NavLink>
89+
</DropdownItem>
90+
<DropdownItem>
91+
<NavLink to="/app/profile">Profile</NavLink>
92+
</DropdownItem>
93+
<DropdownItem onClick={this.doLogout}>
94+
Logout
95+
</DropdownItem>
96+
</DropdownMenu>
97+
</Dropdown>
98+
<NavItem className={cx('', s.headerIcon)}>
99+
<Button>
100+
<Icon glyph="mail"/>
101+
<span>8</span>
102+
</Button>
103+
</NavItem>
104+
<NavItem className={cx('', s.headerIcon)}>
105+
<Button>
106+
<Icon glyph="notification"/>
107+
<span>13</span>
108+
</Button>
109+
</NavItem>
110+
<NavItem className={cx('', s.headerIcon)}>
111+
<Button>
112+
<Icon glyph="settings"/>
113+
</Button>
81114
</NavItem>
82115
</Nav>
83116
</Navbar>
@@ -90,4 +123,4 @@ function mapStateToProps(state) {
90123
init: state.runtime.initialNow,
91124
};
92125
}
93-
export default connect(mapStateToProps)(withStyles(s)(Header));
126+
export default connect(mapStateToProps)(withStyles(s)(Header));

‎src/components/Header/Header.scss

Lines changed: 145 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,150 @@
11
/**
2-
* React Starter Kit (https://www.reactstarterkit.com/)
3-
*
4-
* Copyright © 2014-present Kriasoft, LLC. All rights reserved.
5-
*
6-
* This source code is licensed under the MIT license found in the
7-
* LICENSE.txt file in the root directory of this source tree.
8-
*/
2+
* React Starter Kit (https://www.reactstarterkit.com/)
3+
*
4+
* Copyright © 2014-present Kriasoft, LLC. All rights reserved.
5+
*
6+
* This source code is licensed under the MIT license found in the
7+
* LICENSE.txt file in the root directory of this source tree.
8+
*/
99

1010
@import '../../styles/app';
1111

12-
.menuButton {
13-
font-size: $font-size-large;
14-
margin-left: -$navbar-padding-horizontal + 5;
15-
margin-top: -1px;
16-
margin-bottom: -2px;
12+
.root {
13+
background: $navbar-bg-color;
14+
15+
:global {
16+
.input-group {
17+
background-color: $gray-100;
18+
19+
@include media-breakpoint-down(xs) {
20+
display: none;
21+
}
22+
23+
input {
24+
background: transparent;
25+
border: none;
26+
width: 250px;
27+
28+
@include media-breakpoint-down(md) {
29+
width: 100px;
30+
}
31+
32+
@include media-breakpoint-down(sm) {
33+
width: 175px;
34+
}
35+
36+
&:hover,
37+
&:active,
38+
&:focus {
39+
border: none;
40+
outline: none;
41+
box-shadow: none;
42+
}
43+
}
44+
45+
.input-group-append {
46+
display: flex;
47+
align-items: center;
48+
justify-content: center;
49+
50+
i {
51+
font-size: 1.25rem;
52+
}
53+
}
54+
}
55+
56+
.dropdown-menu {
57+
border: none;
58+
margin-top: 0.7rem;
59+
}
60+
61+
.dropdown-item {
62+
&:active {
63+
background-color: $gray-200;
64+
color: $text-color;
65+
}
66+
67+
&:focus {
68+
outline: none;
69+
}
70+
71+
a {
72+
display: block;
73+
color: $text-color;
74+
75+
&:hover {
76+
color: $text-color;
77+
text-decoration: none;
78+
cursor: default;
79+
}
80+
}
81+
}
82+
}
83+
}
84+
85+
.arrow {
86+
color: $gray-400;
87+
transition: 0.3s;
88+
right: 0;
89+
}
90+
91+
.arrowActive {
92+
transform: rotate(180deg);
93+
}
94+
95+
.adminPhoto {
96+
width: 40px;
97+
height: 40px;
98+
}
99+
100+
.headerIcon {
101+
display: flex;
102+
align-items: center;
103+
position: relative;
104+
105+
:global .btn {
106+
background: $white;
107+
border: none;
108+
109+
&:hover,
110+
&:active,
111+
&:focus,
112+
&:focus:active {
113+
background: $white;
114+
box-shadow: none !important;
115+
outline: none;
116+
}
117+
}
118+
119+
&:nth-child(n + 2) {
120+
margin-left: 0.5rem;
121+
122+
@include media-breakpoint-down(sm) {
123+
display: none;
124+
}
125+
}
126+
127+
&:first-child {
128+
margin-right: 1.25rem;
129+
}
130+
131+
img {
132+
max-height: 1.65rem;
133+
width: 1.65rem;
134+
}
135+
136+
span {
137+
position: absolute;
138+
display: flex;
139+
justify-content: center;
140+
align-items: center;
141+
top: 12px;
142+
right: -6px;
143+
color: $white;
144+
font-size: 0.55rem;
145+
width: 12px;
146+
height: 12px;
147+
border-radius: 50%;
148+
background-color: theme-color('danger');
149+
}
17150
}

‎src/components/Header/logo-small.png

-2.77 KB
Binary file not shown.

‎src/components/Header/[email protected]

-6.65 KB
Binary file not shown.

0 commit comments

Comments
 (0)