Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit fe7fec4

Browse files
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-
<NavpullLeft>
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.
-6.65 KB
Binary file not shown.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /