Skip to content

Commit 9ab312c

Browse files
paivaricpaivaric
authored
Merge pull request #43 from cazetto/homolog
Deploy
2 parents 5e4c2e4 + cb5fbd1 commit 9ab312c

File tree

12 files changed

+173
-57
lines changed

12 files changed

+173
-57
lines changed

‎src/components/back4App/Dropdown/Dropdown.react.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default class Dropdown extends Component {
2424
"aria-haspopup": "true",
2525
"aria-expanded": "false",
2626
}}
27-
>Hello, TBrayner<i className="dropdown-icon zmdi zmdi-caret-down" /></Button>
27+
>{this.props.children}</Button>
2828

2929
<div className={`dropdown-menu ${styles['dropdown-menu']} ${styles.menu}`} aria-labelledby="dropdownMenuButton">
3030
<i className={`${styles['icon-caret']} zmdi zmdi-caret-up`}></i>

‎src/components/back4App/Header/Header.react.js‎

Lines changed: 42 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,48 @@ import styles from 'components/back4App/Header/Header.scss';
1111
import navData from 'components/back4App/Header/headerNavData';
1212

1313
export default class Header extends React.Component {
14+
constructor(props) {
15+
super(props);
16+
17+
this.state = {
18+
username: null
19+
};
20+
}
1421
componentWillMount() {
1522
/*
16-
- Thi-s resource should be implemented following parse-dashboard community standards (using flux).
23+
- This resource should be implemented following parse-dashboard community standards (using flux).
1724
But it was actualy not possible to use the subscribeTo decorator in the Header component
1825
before the App was injected in the router. This is a simple temporary solution.
1926
*/
2027
fetch('https://dashboard.back4app.com/me', {
2128
method: 'GET',
2229
credentials: 'include'
2330
})
31+
.then(response => response.json())
2432
.then(response => {
25-
console.log(response.json());
33+
this.setState({
34+
username: response.username.split('@')[0]
35+
});
36+
})
37+
.catch(error => {
38+
console.log("Error", error);
39+
});
40+
41+
fetch('https://dashboard.back4app.com/listApps', {
42+
method: 'GET',
43+
credentials: 'include'
44+
})
45+
.then(response => response.json())
46+
.then(apps => {
47+
let amountAppsWithExpiredPlans = apps.reduce((accumulator, currentValue, currentIndex, array) => {
48+
return accumulator + ( currentValue.planCloudColor === 'red' ? 1 : 0 );
49+
}, 0);
50+
this.setState({
51+
amountAppsWithExpiredPlans
52+
});
53+
})
54+
.catch(function (error) {
55+
console.log('error', error);
2656
});
2757
}
2858
render() {
@@ -32,33 +62,28 @@ export default class Header extends React.Component {
3262
<Media query="(max-width: 1099px)">
3363
<div className={styles['hamburger-wrapper']}>
3464
<HamburgerButton onClick={() => {
35-
props.sidebarToggle();
65+
this.props.sidebarToggle();
3666
}} />
3767
</div>
3868
</Media>
39-
<Media query="(min-width: 1100px)">
40-
<a className={styles['logo-face']} href="http://www.back4app.com/">
41-
<Icon width={46} height={47} name='back4app-logo-face-blue' fill='#208AEC' />
69+
<a className={styles['logo-face']} href="http://www.back4app.com/">
70+
<Icon width={46} height={47} name='back4app-logo-face-blue' fill='#208AEC' />
71+
</a>
72+
<Media query="(min-width: 680px)">
73+
<a className={styles['logo-text']} href="http://www.back4app.com/">
74+
<Icon width={134} height={53} name='back4app-logo-text-blue' fill='#208AEC' />
4275
</a>
4376
</Media>
44-
<a className={styles['logo-text']} href="http://www.back4app.com/">
45-
<Icon width={134} height={53} name='back4app-logo-text-blue' fill='#208AEC' />
46-
</a>
47-
</div>
4877

78+
</div>
4979
<div className={styles['right-side']}>
50-
51-
<Media query="(min-width: 1100px)">
52-
<Nav items={navData.items} />
53-
</Media>
54-
80+
<Nav items={navData.items} amountAppsWithExpiredPlans={this.state.amountAppsWithExpiredPlans} />
5581
<Media query="(min-width: 1100px)">
5682
<div className="ml-auto">
57-
<Dropdown items={navData.dropdownItems}>Hello, TBrayner!<i className="dropdown-icon zmdi zmdi-caret-down"></i></Dropdown>
83+
<Dropdown items={navData.dropdownItems}>{this.state.username && `Hello, ${this.state.username}`}<i className="dropdown-icon zmdi zmdi-caret-down"></i></Dropdown>
5884
<Button color="green" weight="700" url="https://dashboard.back4app.com/apps/#!/apps/new">NEW APP</Button>
5985
</div>
6086
</Media>
61-
6287
</div>
6388
</header>
6489
);

‎src/components/back4App/Header/Header.scss‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
font-family: 'Raleway';
1313
font-size: 16px;
1414
padding-right: 45px;
15-
15+
1616
.left-side {
1717
display: flex;
1818
min-width: 247px;
@@ -41,4 +41,25 @@
4141
padding: 24px 0 0 10px;
4242
white-space: nowrap;
4343
}
44+
45+
// Responsive
46+
@media(max-width: 1100px) {
47+
padding-right: 14px;
48+
.left-side {
49+
min-width: 44px;
50+
max-width: 44px;
51+
margin-left: 14px;
52+
}
53+
54+
.logo-face {
55+
display: none;
56+
57+
@media(max-width: 680px) {
58+
display: block;
59+
position: absolute;
60+
left: 50%;
61+
margin-left: -70px;
62+
}
63+
}
64+
}
4465
}

‎src/components/back4App/Header/headerNavData.js‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
const headerNavData = {
22
items: [
33
{label: 'My Apps', url: 'https://dashboard.back4app.com/apps/#!/admin'},
4-
{label: 'Dashboard', url: 'https://dashboard.back4app.com/'},
4+
{label: 'Dashboard', url: 'https://parse-dashboard.back4app.com/'},
55
{label: 'Docs', url: 'http://docs.back4app.com/'},
66
{label: 'Community', url: 'https://groups.google.com/forum/#!forum/back4app'},
7-
{label: 'Blog', url: 'http://blog.back4app.com/'},
7+
{label: 'Blog', url: 'http://blog.back4app.com/'}
88
],
99
dropdownItems: [
10-
{label: 'Parse Server', url:'/product/parse-server'},
11-
{label: 'Add-ons', url:'/product/addons'},
12-
{label: 'Hosting', url:'/product/hosting'},
13-
{label: 'Push Notifications', url:'/product/push-notifications'}
10+
{label: 'Account Keys', url:'https://dashboard.back4app.com/classic#/wizard/account-key'},
11+
{label: 'Edit Email', url:'https://dashboard.back4app.com/email/change'},
12+
{label: 'Edit Password', url:'https://dashboard.back4app.com/password/change'}
1413
]
1514
}
1615

17-
export default headerNavData;
16+
headerNavData.sidebarItems = [
17+
...headerNavData.items,
18+
...headerNavData.dropdownItems,
19+
]
20+
21+
export default headerNavData;

‎src/components/back4App/HeaderNav/HeaderNav.react.js‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,29 @@ import HeaderNavItem from 'components/back4App/HeaderNavItem/HeaderNavItem.react
44

55
import styles from 'components/back4App/HeaderNav/HeaderNav.scss';
66

7-
const _renderHeaderMenuItems = items => items.map((item, index) => <HeaderNavItem key={index} index={index} {...item} />);
7+
class HeaderNav extends React.Component {
8+
9+
constructor(props) {
10+
super(props);
11+
}
12+
13+
renderHeaderMenuItems(items) {
14+
return items.map((item, index) => (index == 0) ?
15+
<HeaderNavItem key={index} index={index} {...item} notification={this.props.amountAppsWithExpiredPlans} /> :
16+
<HeaderNavItem key={index} index={index} {...item} />
17+
);
18+
}
819

9-
let HeaderNav = props => (
10-
<nav className={styles.nav}>
11-
<ul className={styles.menu}>
12-
{_renderHeaderMenuItems(props.items)}
13-
</ul>
14-
</nav>
15-
);
20+
render() {
21+
return (
22+
<nav className={styles.nav}>
23+
<ul className={styles.menu}>
24+
{this.renderHeaderMenuItems(this.props.items)}
25+
</ul>
26+
</nav>
27+
);
28+
}
1629

17-
export default HeaderNav;
30+
}
31+
32+
export default HeaderNav;

‎src/components/back4App/HeaderNav/HeaderNav.scss‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
@import 'stylesheets/back4app.scss';
22

33
.nav {
4+
display: flex;
5+
flex-basis: 100%;
6+
47
.menu {
58
display: flex;
69

@@ -9,4 +12,9 @@
912
margin-top: 0px;
1013
}
1114
}
12-
}
15+
16+
// Responsive
17+
@media(max-width: 1100px) {
18+
justify-content: center;
19+
}
20+
}

‎src/components/back4App/HeaderNavItem/HeaderNavItem.react.js‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,13 @@ import React, { Component } from 'react';
22

33
import { Link } from 'react-router';
44

5-
import styles from 'components/back4App/HeaderNavItem/HeaderNavItem.scss';
6-
7-
let NavItem = props => {
5+
import NotificationBullet from 'components/back4App/NotificationBullet/NotificationBullet.react';
86

9-
return (
10-
<li className={`${styles.item} ${props.isCurrent ? styles.active : ''}`}>
11-
{
12-
props.url ? <a className={styles.label} href={props.url}>{props.label}</a> :
13-
props.pathname ? <Link className={styles.label} to={{ pathname:props.pathname }}>{props.label}</Link>:
14-
null
15-
}
16-
<i className={`${styles.icon} zmdi zmdi-caret-up`}></i>
17-
</li>
18-
);
19-
}
7+
import styles from 'components/back4App/HeaderNavItem/HeaderNavItem.scss';
208

219
export default class HeaderNavItem extends Component {
2210
constructor(props) {
2311
super(props);
24-
2512
this.state = {
2613
isCurrent: !!(props.index === 1)
2714
}
@@ -33,6 +20,20 @@ export default class HeaderNavItem extends Component {
3320

3421
render() {
3522
let { isCurrent } = this.state;
36-
return NavItem({...this.props, isCurrent});
23+
let { notification = '', url, pathname, label } = this.props;
24+
25+
return (
26+
<li className={`${styles.item} ${isCurrent ? styles.active : ''}`}>
27+
{
28+
!!notification && <NotificationBullet notification={notification}></NotificationBullet>
29+
}
30+
{
31+
url ? <a className={styles.label} href={url}>{label}</a> :
32+
pathname ? <Link className={styles.label} to={{ pathname }}>{label}</Link> :
33+
null
34+
}
35+
<i className={`${styles.icon} zmdi zmdi-caret-up`}></i>
36+
</li>
37+
);
3738
}
3839
}

‎src/components/back4App/HeaderNavItem/HeaderNavItem.scss‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
@import 'stylesheets/back4app.scss';
22

33
.item {
4-
54
margin-top: 6px;
65

76
&:not(:first-child) {
@@ -22,6 +21,10 @@
2221
color: $dark-gray;
2322
font-weight: 300;
2423
white-space: nowrap;
24+
25+
&:hover {
26+
color: #208ADB;
27+
}
2528
}
2629

2730
.icon {
@@ -30,4 +33,15 @@
3033
color: blue;
3134
}
3235

33-
}
36+
37+
// Responsive
38+
@media(max-width: 1100px) {
39+
&:not(:first-child) {
40+
margin-left: 0;
41+
}
42+
43+
&:not(.active) {
44+
display: none;
45+
}
46+
}
47+
}

‎src/components/back4App/NotificationBullet/NotificationBullet.react.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
3+
import styles from 'components/back4App/NotificationBullet/NotificationBullet.scss';
4+
5+
const NotificationBullet = props => (
6+
<div className={styles['notification-bullet']}>
7+
{ props.notification }
8+
</div>
9+
);
10+
11+
export default NotificationBullet;

‎src/components/back4App/NotificationBullet/NotificationBullet.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.notification-bullet {
2+
$size: 18px;
3+
position: absolute;
4+
display: block;
5+
cursor: default;
6+
background-color: red;
7+
width: $size;
8+
height: $size;
9+
border-radius: $size / 2;
10+
color: #FFF;
11+
font-size: 11px;
12+
font-weight: 600;
13+
text-align: center;
14+
padding-top: 1px;
15+
margin-top: -12px;
16+
margin-left: 64px;
17+
}

0 commit comments

Comments
 (0)