Skip to content

Commit 92bdefe

Browse files
lcxfs1991lcxfs1991
authored
Merge pull request #1171 from webpack/patch-language-dropdown
Touch Up Language Dropdown
2 parents 371a6be + 554f3b3 commit 92bdefe

File tree

5 files changed

+132
-131
lines changed

5 files changed

+132
-131
lines changed

‎.eslintrc

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
{
2-
"root": true,
3-
4-
"extends": "eslint:recommended",
2+
"root": true,
53

6-
"parser": "babel-eslint",
4+
"extends": "eslint:recommended",
75

8-
"env": {
9-
"browser": true,
10-
"es6": true,
11-
"node": true
12-
},
6+
"parser": "babel-eslint",
137

14-
"plugins": [
15-
"markdown"
16-
],
8+
"env": {
9+
"browser": true,
10+
"es6": true,
11+
"node": true
12+
},
1713

18-
"globals": {
19-
"__DEV__": true
20-
},
14+
"plugins": [
15+
"markdown"
16+
],
2117

22-
"rules": {
23-
"no-undef": 2,
24-
"no-unreachable": 2,
25-
"no-unused-vars": 0,
26-
"no-console": 0,
27-
"semi": ["error", "always"]
28-
}
18+
"globals": {
19+
"__DEV__": true
20+
},
21+
22+
"rules": {
23+
"no-undef": 2,
24+
"no-unreachable": 2,
25+
"no-unused-vars": 0,
26+
"no-console": 0,
27+
"semi": ["error", "always"]
28+
}
2929
}

‎components/dropdown/dropdown-style.scss

Lines changed: 55 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,66 @@
1+
@import 'functions';
12

23
.dropdown {
3-
position: relative;
4-
color: #fff;
5-
cursor: pointer;
6-
4+
position: relative;
5+
color: #fff;
6+
cursor: pointer;
77
}
88

9-
.dropdown-language {
10-
width: 20px;
11-
height: 20px;
12-
vertical-align: middle;
9+
.dropdown__language {
10+
width: 20px;
11+
height: 20px;
12+
vertical-align: middle;
1313
}
1414

15-
.dropdown-arrow {
16-
vertical-align: middle;
15+
.dropdown__arrow {
16+
margin-left: 5px;
1717

18-
&:before {
19-
display: inline-block;
20-
margin-left: 5px;
21-
content: "\25be";
22-
}
18+
&:before {
19+
content: "\25be";
20+
}
2321
}
2422

25-
.dropdown-list {
26-
display: none;
27-
position: absolute;
28-
width: 100%;
29-
top: 45px;
30-
left: -12px;
31-
right: 0;
32-
margin: auto;
33-
background-color: #2B3A42;
34-
z-index: 1;
35-
text-align: center;
36-
37-
ul li {
38-
list-style: none;
39-
color: #fff;
40-
41-
a:link, a:visited, a:hover {
42-
color: #fff;
43-
}
44-
45-
img {
46-
width: 20px;
47-
height: 20px;
48-
// margin: 2px 0;
49-
}
50-
}
23+
.dropdown__list {
24+
display: none;
25+
position: absolute;
26+
top: 100%;
27+
right: 100%;
28+
right: 0;
29+
margin: auto;
30+
background-color: #2B3A42;
31+
z-index: 1;
32+
text-align: center;
33+
34+
ul {
35+
padding-top: 0.25em;
36+
}
37+
38+
ul li {
39+
padding: 0.25em 0.5em 0 0.5em;
40+
list-style: none;
41+
color: #fff;
42+
transition: all 250ms;
43+
44+
a:link, a:visited, a:hover {
45+
color: #fff;
46+
}
47+
48+
&:hover {
49+
background: getColor(denim);
50+
}
51+
52+
span {
53+
vertical-align: top;
54+
margin-right: 0.5em;
55+
}
56+
57+
img {
58+
width: 20px;
59+
height: 20px;
60+
}
61+
}
5162
}
5263

53-
.dropdown-list-show {
54-
display: inline-block;
55-
}
64+
.dropdown__list--active {
65+
display: block;
66+
}

‎components/dropdown/dropdown.jsx

Lines changed: 31 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,34 @@
11
import React from 'react';
22

33
export default class Dropdown extends React.Component {
4-
5-
constructor(props, context) {
6-
super(props, context);
7-
this.state = {
8-
isLanguageShow: false,
9-
defaultLanguage: 'english',
10-
};
11-
}
4+
state = {
5+
active: false
6+
};
127

138
render() {
14-
15-
let {
16-
section,
17-
activeMod
18-
} = this.props;
19-
20-
let activeList = (this.state.isLanguageShow) ? "dropdown-list-show" : "";
9+
let { className = '', items = [] } = this.props;
10+
let activeMod = this.state.active ? "dropdown__list--active" : "";
2111

2212
return (
2313
<div
24-
className={ `navigation__link ${activeMod} dropdown` }
25-
onMouseOver={() => {
26-
this.setState({
27-
isLanguageShow: true
28-
});
29-
}}
30-
onMouseLeave={() => {
31-
this.setState({
32-
isLanguageShow: false
33-
});
34-
}}
35-
>
36-
<img className="dropdown-language" src={require("../../assets/language/" + this.state.defaultLanguage + ".png")}/>
37-
<i className="dropdown-arrow"></i>
38-
<div className={`dropdown-list ${activeList}`}>
14+
className={ `dropdown ${className}` }
15+
onMouseOver={ this._toggle.bind(this, true) }
16+
onMouseLeave={ this._toggle.bind(this, false) }>
17+
<img
18+
className="dropdown__language"
19+
src={ items[0].image } />
20+
21+
<i className="dropdown__arrow" />
22+
23+
<div className={ `dropdown__list ${activeMod}` }>
3924
<ul>
4025
{
41-
section.children.map((language) => {
26+
items.map(item => {
4227
return (
43-
<li key={language.title}>
44-
<a href={language.url}>
45-
<img src={require("../../assets/language/" + language.title + ".png")}/>
28+
<li key={ item.title }>
29+
<a href={ item.url }>
30+
<span>{ item.title }</span>
31+
<img src={ item.image } />
4632
</a>
4733
</li>
4834
);
@@ -54,4 +40,14 @@ export default class Dropdown extends React.Component {
5440
);
5541
}
5642

57-
}
43+
/**
44+
* Toggle visibility of dropdown items
45+
*
46+
* @param {bool} state - Whether to display or hide the items
47+
*/
48+
_toggle(state = false) {
49+
this.setState({
50+
active: state
51+
});
52+
}
53+
}

‎components/navigation/navigation-style.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,11 @@
152152
color: getColor(malibu);
153153
}
154154
}
155+
156+
.navigation__languages {
157+
margin-left: 1em;
158+
margin-top: -4px;
159+
}
155160
}
156161

157162
@include break {

‎components/navigation/navigation.jsx

Lines changed: 19 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import Link from '../link/link';
33
import Container from '../container/container';
44
import Logo from '../logo/logo';
55
import Dropdown from '../dropdown/dropdown';
6+
import USFlag from '../../assets/language/english.png';
7+
import ChineseFlag from '../../assets/language/chinese.png';
68

79
// TODO: Maybe by updating the routing scheme later on we can avoid hardcoding this?
810
let Sections = [
@@ -35,15 +37,8 @@ let Sections = [
3537
url: '//medium.com/webpack'
3638
},
3739
{
38-
title: 'Support',
39-
url: 'support'
40-
},
41-
{
42-
title: 'Language',
43-
children: [
44-
{ title: 'english', url: 'https://webpack.js.org/' },
45-
{ title: 'chinese', url: 'https://doc.webpack-china.org/' }
46-
]
40+
title: 'Support',
41+
url: 'support'
4742
}
4843
];
4944

@@ -69,27 +64,14 @@ export default class Navigation extends React.Component {
6964
let active = this._isActive(section);
7065
let activeMod = active ? 'navigation__link--active' : '';
7166

72-
if (section.title === 'Language') {
73-
return (
74-
<Dropdown
75-
key={ `navigation__link-${section.title}` }
76-
section={section}
77-
activeMod={activeMod}
78-
className={ `navigation__link ${activeMod}` }
79-
>
80-
</Dropdown>
81-
);
82-
}
83-
else {
84-
return (
85-
<Link
86-
key={ `navigation__link-${section.title}` }
87-
className={ `navigation__link ${activeMod}` }
88-
to={ `/${section.url}` }>
89-
{ section.title }
90-
</Link>
91-
);
92-
}
67+
return (
68+
<Link
69+
key={ `navigation__link-${section.title}` }
70+
className={ `navigation__link ${activeMod}` }
71+
to={ `/${section.url}` }>
72+
{ section.title }
73+
</Link>
74+
);
9375
})
9476
}
9577
</nav>
@@ -121,6 +103,13 @@ export default class Navigation extends React.Component {
121103
to="//stackoverflow.com/questions/tagged/webpack">
122104
<i className="sidecar__icon icon-stack-overflow" />
123105
</Link>
106+
107+
<Dropdown
108+
className="navigation__languages"
109+
items={[
110+
{ title: 'English', url: 'https://webpack.js.org/', image: USFlag },
111+
{ title: 'Chinese', url: 'https://doc.webpack-china.org/', image: ChineseFlag }
112+
]} />
124113
</Container>
125114

126115
{

0 commit comments

Comments
 (0)