Skip to content

Commit a213fc7

Browse files
author
vikasrohit
committed
Merge pull request #46 from appirio-tech/feature/misc-fixes
Feature/misc fixes
2 parents d1e89ac + dbd714d commit a213fc7

File tree

10 files changed

+141
-123
lines changed

10 files changed

+141
-123
lines changed

‎components/Navbar/Navbar.jsx‎

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,33 @@
11
require('./Navbar.scss')
22

33
import MenuBar from '../MenuBar/MenuBar'
4-
import React, { Component } from 'react'
4+
import React from 'react'
55
import SearchBar from '../SearchBar/SearchBar'
66
import QuickLinks from '../QuickLinks/QuickLinks'
77
import UserDropdownMenu from '../UserDropdownMenu/UserDropdownMenu'
88

99
const primaryNavigationItems = [
10-
{img: require('./nav-community.svg'), text: 'Community', link: 'javascript:;'},
11-
{img: require('./nav-compete.svg'), text: 'Compete', link: 'javascript:;', selected: true},
12-
{img: require('./nav-learn.svg'), text: 'Learn', link: 'javascript:;'}
10+
{img: require('./nav-community.svg'), text: 'Community', link: '/community'},
11+
{img: require('./nav-compete.svg'), text: 'Compete', link: '/compete', selected: true},
12+
{img: require('./nav-learn.svg'), text: 'Learn', link: '/learn'}
1313
]
1414

15-
class Navbar extends Component {
16-
render() {
17-
return (
18-
<div className="Navbar flex middle space-between">
19-
<div className="topcoder-logo"></div>
20-
<div className="search-bar-wrap">
21-
<div className="icon-placeholder"></div>
22-
<SearchBar />
23-
</div>
24-
<MenuBar items={primaryNavigationItems} orientation="horizontal" />
25-
<div className="collapse-group">
26-
<div className="icon-placeholder"></div>
27-
<div className="quick-links-wrap"><QuickLinks /></div>
28-
<UserDropdownMenu username="vic-tor" />
29-
</div>
15+
const Navbar = ({username, domain}) => {
16+
return (
17+
<div className="Navbar flex middle space-between">
18+
<div className="topcoder-logo"></div>
19+
<div className="search-bar-wrap">
20+
<div className="icon-placeholder"></div>
21+
<SearchBar />
3022
</div>
31-
)
32-
}
23+
<MenuBar items={primaryNavigationItems} orientation="horizontal" />
24+
<div className="collapse-group">
25+
<div className="icon-placeholder"></div>
26+
<div className="quick-links-wrap"><QuickLinks domain={domain} /></div>
27+
<UserDropdownMenu username={username} />
28+
</div>
29+
</div>
30+
)
3331
}
3432

3533
export default Navbar

‎components/Navbar/NavbarExample.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Navbar from './Navbar'
22
import React from 'react'
33

44
const NavbarExample = () => (
5-
<Navbar />
5+
<Navbar username="vic-tor" />
66
)
77

88
module.exports = NavbarExample

‎components/QuickLinks/QuickLinks.jsx‎

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,32 @@
11
require('./QuickLinks.scss')
22

3-
import React, { Component } from 'react'
3+
import React from 'react'
44
import Dropdown from '../Dropdown/Dropdown'
55

66
import StandardListItem from '../StandardListItem/StandardListItem'
77

8-
class QuickLinks extends Component {
9-
render() {
10-
return (
11-
<div className="QuickLinks">
12-
<Dropdown pointerShadow>
13-
<img src={ require('./grid.svg') } className="dropdown-menu-header" />
14-
<ul className="dropdown-menu-list">
15-
<li className="dropdown-menu-list-item">
16-
<div className="icon-placeholder"></div>
17-
<StandardListItem labelText="Review" showIcon={false} />
18-
</li>
19-
<li className="dropdown-menu-list-item">
20-
<div className="icon-placeholder"></div>
21-
<StandardListItem labelText="Web Arena" showIcon={false} />
22-
</li>
23-
<li className="dropdown-menu-list-item">
24-
<div className="icon-placeholder"></div>
25-
<StandardListItem labelText="Applet Arena" showIcon={false} />
26-
</li>
27-
</ul>
28-
</Dropdown>
29-
</div>
30-
)
31-
}
8+
const QuickLinks = ({domain}) => {
9+
const orLink = '//software.' + domain
10+
const arenaLink = '//arena.' + domain
11+
const arenaAppletLink = '//' + domain + '/contest/arena/ContestAppletProd.jnlp'
12+
return (
13+
<div className="QuickLinks">
14+
<Dropdown pointerShadow>
15+
<img src={ require('./grid.svg') } className="dropdown-menu-header" />
16+
<ul className="dropdown-menu-list">
17+
<li className="dropdown-menu-list-item">
18+
<StandardListItem labelText="Review" imgSrc={require('./placeholder.svg')} linkUrl={orLink} linkTarget="_blank" />
19+
</li>
20+
<li className="dropdown-menu-list-item">
21+
<StandardListItem labelText="Web Arena" imgSrc={require('./placeholder.svg')} linkUrl={arenaLink} linkTarget="_blank" />
22+
</li>
23+
<li className="dropdown-menu-list-item">
24+
<StandardListItem labelText="Applet Arena" imgSrc={require('./placeholder.svg')} linkUrl={arenaAppletLink} linkTarget="_blank" />
25+
</li>
26+
</ul>
27+
</Dropdown>
28+
</div>
29+
)
3230
}
3331

3432
export default QuickLinks

‎components/QuickLinks/QuickLinks.scss‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import "topcoder/tc-includes";
22

3-
$logo-placeholder-bg: #B47DD6;
3+
$link-text-hover-color: #7A7F83;
44

55
.QuickLinks {
66
position: relative;
@@ -22,22 +22,22 @@ $logo-placeholder-bg: #B47DD6;
2222

2323
.dropdown-menu-list-item {
2424
display: inline-block;
25-
cursor: pointer;
26-
27-
.icon-placeholder {
28-
width: 30px;
29-
height: 30px;
30-
background-color: $logo-placeholder-bg;
31-
margin: 0 auto;
32-
margin-bottom: 6px;
33-
}
25+
cursor: pointer;
3426

3527
.StandardListItem {
3628
padding: 0;
3729

30+
&:active,
31+
&:hover {
32+
.label {
33+
color: $link-text-hover-color;
34+
}
35+
}
36+
3837
.label {
3938
font-size: 12px;
4039
line-height: 26px;
40+
color: $accent-gray-dark;
4141
}
4242
}
4343
}

‎components/QuickLinks/QuickLinksExample.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import QuickLinks from './QuickLinks'
55

66
const QuickLinksExample = () => (
77
<div className="example-wrap">
8-
<QuickLinks />
8+
<QuickLinks domain="topcoder-dev.com" />
99
</div>
1010
)
1111

‎components/QuickLinks/placeholder.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎components/StandardListItem/StandardListItem.jsx‎

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {PropTypes, Component } from 'react'
1+
import {PropTypes } from 'react'
22
import React from 'react'
33

44
require('./StandardListItemStyles.scss')
@@ -8,39 +8,45 @@ require('./StandardListItemStyles.scss')
88
// labelText: The text for the label
99
// placeIcon: defines the position of the icon. Either: top | left | right. Default to top
1010

11-
class StandardListItem extends Component {
12-
constructor(props) {
13-
super(props)
14-
}
15-
render() {
16-
const classes = 'StandardListItem transition ' + this.props.placeIcon
17-
let label
18-
let icon
11+
const StandardListItem = ({showIcon, showLabel, imgSrc, labelText, linkUrl, linkTarget='_self', placeIcon='top'}) => {
12+
const classes = 'StandardListItem transition ' + placeIcon
13+
let label
14+
let icon
15+
let item
1916

20-
if (this.props.showLabel){
21-
label = <p className="label">{this.props.labelText}</p>
22-
}
17+
if (showLabel) {
18+
label = <p className="label">{labelText}</p>
19+
}
2320

24-
if (this.props.showIcon){
25-
icon = <img className="icon" src={this.props.imgSrc}/>
26-
}
21+
if (showIcon) {
22+
icon = <img className="icon" src={imgSrc}/>
23+
}
2724

28-
return (<div className={classes}>{label}{icon}</div>)
25+
if (linkUrl) {
26+
item =
27+
<a className={classes} href={linkUrl} target={linkTarget}>{label}{icon}</a>
28+
} else {
29+
item = <div className={classes}>{label}{icon}</div>
2930
}
31+
32+
return item
3033
}
3134

3235
StandardListItem.propTypes = {
33-
showIcon : PropTypes.bool,
34-
showLabel : PropTypes.bool,
35-
imgSrc : PropTypes.string,
36-
labelText : PropTypes.node,
37-
placeIcon : PropTypes.string
36+
showIcon : PropTypes.bool,
37+
showLabel : PropTypes.bool,
38+
imgSrc : PropTypes.string,
39+
labelText : PropTypes.node,
40+
linkUrl : PropTypes.string,
41+
linkTarget : PropTypes.string,
42+
placeIcon : PropTypes.string
3843
}
3944

4045
StandardListItem.defaultProps = {
41-
showIcon: true,
42-
showLabel: true,
43-
placeIcon: 'top'
46+
showIcon : true,
47+
showLabel : true,
48+
linkTarget : '_self',
49+
placeIcon : 'top'
4450
}
4551

4652
export default StandardListItem

‎components/StandardListItem/StandardListItemExamples.jsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,26 @@ const StandardListItemExamples = () => (
1616

1717
<h1>Icon on the Right</h1>
1818

19-
<StandardListItem imgSrc="../components/Avatar/place-holder.svg" labelText="This is a test" placeIcon="right" />
19+
<StandardListItem imgSrc="../components/Avatar/place-holder.svg" labelText="This is a test" placeIcon="right" />
2020

2121
<h1>Icon Hidden</h1>
2222
<StandardListItem labelText="This is a test" showIcon={false} />
2323

2424
<h1>Label Hidden</h1>
2525
<StandardListItem imgSrc="../components/Avatar/place-holder.svg" showLabel={false} />
2626

27+
<h1>With Link In Self</h1>
28+
<StandardListItem imgSrc="../components/Avatar/place-holder.svg" labelText="Click Me" linkUrl="http://google.com" />
29+
30+
<h1>With Link In New Tab</h1>
31+
<StandardListItem imgSrc="../components/Avatar/place-holder.svg" labelText="Click Me" linkUrl="http://google.com" linkTarget="_blank" />
32+
33+
<h1>Link: Icon on the Right</h1>
34+
<StandardListItem imgSrc="../components/Avatar/place-holder.svg" labelText="This is a test" placeIcon="right" linkUrl="http://google.com" />
35+
36+
<h1>Link: Icon on the Left</h1>
37+
<StandardListItem imgSrc="../components/Avatar/place-holder.svg" labelText="This is a test" placeIcon="left" linkUrl="http://google.com" />
38+
2739
</div>
2840
)
2941

‎components/UserDropdownMenu/UserDropdownMenu.jsx‎

Lines changed: 32 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
require('./UserDropdownMenu.scss')
22

3-
import React, { Component } from 'react'
3+
import React from 'react'
44
import Dropdown from '../Dropdown/Dropdown'
55

66
const userDropdownLists = [
@@ -18,45 +18,38 @@ const userDropdownLists = [
1818
]
1919
]
2020

21-
class UserDropdownMenu extends Component {
22-
constructor(props) {
23-
super(props)
24-
25-
this.state = { isLoggedIn: true }
26-
}
27-
28-
render() {
29-
const publicDOM = <div><button>Log in</button><button>Join</button></div>
30-
31-
const loggedInDOM = (
32-
<div className="UserDropdownMenu">
33-
<Dropdown pointerShadow>
34-
<div className="dropdown-menu-header">
35-
<span className="user-image"></span>
36-
<span className="username">{ this.props.username }</span>
37-
<img className="dropdown-arrow" src={ require('./arrow-small-down.svg') } />
38-
</div>
21+
const UserDropdownMenu = ({username}) => {
22+
23+
const publicDOM = <div><button>Log in</button><button>Join</button></div>
3924

40-
<div className="dropdown-menu-list">
41-
{
42-
userDropdownLists.map((list, i) => {
43-
return ( <ul key={ i }>
44-
{
45-
list.map((link, j) => {
46-
return <li className="user-menu-item transition" key={ j }><a href={ link.link }>{ link.label }</a></li>
47-
})
48-
}
49-
</ul> )
50-
})
51-
}
52-
53-
</div>
54-
</Dropdown>
55-
</div>
56-
)
57-
58-
return this.state.isLoggedIn ? loggedInDOM : publicDOM
59-
}
25+
const loggedInDOM = (
26+
<div className="UserDropdownMenu">
27+
<Dropdown pointerShadow>
28+
<div className="dropdown-menu-header">
29+
<span className="user-image"></span>
30+
<span className="username">{ username }</span>
31+
<img className="dropdown-arrow" src={ require('./arrow-small-down.svg') } />
32+
</div>
33+
34+
<div className="dropdown-menu-list">
35+
{
36+
userDropdownLists.map((list, i) => {
37+
return ( <ul key={ i }>
38+
{
39+
list.map((link, j) => {
40+
return <li className="user-menu-item transition" key={ j }><a href={ link.link }>{ link.label }</a></li>
41+
})
42+
}
43+
</ul> )
44+
})
45+
}
46+
47+
</div>
48+
</Dropdown>
49+
</div>
50+
)
51+
52+
return username ? loggedInDOM : publicDOM
6053
}
6154

6255
export default UserDropdownMenu

‎components/UserDropdownMenu/UserDropdownMenuExamples.jsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,14 @@ import React from 'react'
22
import UserDropdownMenu from './UserDropdownMenu'
33

44
const UserDropdownMenuExamples = () => {
5-
return <UserDropdownMenu username="vic-tor" />
5+
return (
6+
<div>
7+
<p>Logged In state</p>
8+
<UserDropdownMenu username="vic-tor" />
9+
<p>Logged Out state</p>
10+
<UserDropdownMenu />
11+
</div>
12+
)
613
}
714

815
module.exports = UserDropdownMenuExamples

0 commit comments

Comments
 (0)