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

+1-1
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

+42-17
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

+22-1
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

+11-7
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

+24-9
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

+9-1
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

+17-16
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

+16-2
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

+11
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

+17
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+
}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const _renderHeaderMenuItems = items => items.map(({label, pathname, url}, index
2323
let SidebarNav = props => {
2424
return (
2525
<nav className={styles.menu} id="accordion" role="tablist" aria-multiselectable="true">
26-
{_renderHeaderMenuItems(navData.items)}
26+
{_renderHeaderMenuItems(navData.sidebarItems)}
2727
</nav>
2828
);
2929
};
@@ -42,7 +42,7 @@ let sidebarContent = (
4242
</header>
4343

4444
<div className={styles['menu-wrapper']}>
45-
{ <SidebarNav items={navData.items} /> }
45+
{ <SidebarNav items={navData.sidebarItems} /> }
4646
</div>
4747

4848
<footer className={styles.footer}>

‎src/components/back4App/Sidebar/Sidebar.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ $sidebar-scroll-color: #e0e5e8;
8181

8282
.menu-item {
8383
padding-left: 30px;
84-
margin-bottom: 11px;
84+
margin-bottom: 9px;
8585

8686
.menu-item-header {
8787
i {

0 commit comments

Comments
 (0)