Skip to content

Commit

Permalink
增加导航网址 & 优化添加导航界面
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaywcjlove
jaywcjlove committed Feb 20, 2018
1 parent 4b0f3fa commit 4ed86f5
Show file tree
Hide file tree
Showing 4 changed files with 174 additions and 19 deletions.
49 changes: 32 additions & 17 deletions src/pages/Navigation/Edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ export default class Edit extends Component {
constructor(props) {
super(props);
this.state = {
list: [],
active: '',
edit: {
label: '添加网址',
Expand Down Expand Up @@ -59,14 +58,23 @@ export default class Edit extends Component {
this.warpper.style.marginBottom = `-${this.warpper.clientHeight}px`;
}
onChangeEdit(e) {
const { edit } = this.state;
edit.icon = '';
edit.value = e.target.value;
edit.label = e.target.value;
this.setState({ edit });
const value = e.target.value;
const wb = {};
wb.icon = '';
wb.value = value;
wb.label = value;
website.forEach((item) => {
item.children.forEach((itemChild) => {
if (value.indexOf(itemChild.value) > -1) {
wb.icon = itemChild.icon;
// wb.label = itemChild.label;
}
});
});
this.setState({ edit: wb });
}
render() {
const { list, active, edit } = this.state;
const { active, edit } = this.state;
return (
<div className={styles.navEdit} ref={node => this.warpper = node}>
<div className={styles.edit}>
Expand All @@ -87,16 +95,23 @@ export default class Edit extends Component {
);
})}
</div>
<div className={styles.list}>
{list.map((item, idx) => {
return (
<span key={idx} onClick={this.handleAddNav.bind(this, item)}>
<img alt={item.label} src={item.icon} />
<p>{item.label}</p>
</span>
);
})}
</div>
{website.map((item, idx) => {
return (
<div
key={idx}
className={classNames(styles.list, {
show: item.value === active || (active === '' && idx === 0),
})}
>
{item.children.map((_item, _idx) => (
<span key={_idx} onClick={this.handleAddNav.bind(this, _item)}>
<img alt={_item.label} src={_item.icon} />
<p>{_item.label}</p>
</span>
))}
</div>
);
})}
</div>
<div className={styles.closeBtn} onClick={this.onHideEdit.bind(this)} />
</div>
Expand Down
6 changes: 5 additions & 1 deletion src/pages/Navigation/Edit.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,10 @@
align-content: flex-start;
padding: 30px 0;
min-height: 280px;
display: none;
&:global(.show) {
display: flex;
}
span {
display: inline-block;
margin: 0 10px;
Expand All @@ -103,7 +107,7 @@
}
img {
border-radius: 2px;
display: inline-block;
display: block;
background-color: #ffffff2b;
width: 62px;
height: 62px;
Expand Down
3 changes: 2 additions & 1 deletion src/pages/Navigation/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
display: flex;
width: 100%;
flex-direction: column;
user-select: none;
.navBox {
flex: 1;
align-items: center;
Expand Down Expand Up @@ -69,7 +70,7 @@
background-color: #fff;
border: 1px solid rgba(27, 31, 35, 0.15);
box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15);
top: -5px;
top: 0;
right: 0;
// top: 9px;
// left: 3px;
Expand Down
135 changes: 135 additions & 0 deletions src/source/website.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,46 @@
"label": "网易音乐",
"value": "http://music.163.com/",
"icon": "https://jaywcjlove.github.io/logo/music163.png"
},
{
"label": "哔哩哔哩",
"value": "https://www.bilibili.com/",
"icon": "https://jaywcjlove.github.io/logo/bilibili.png"
},
{
"label": "AcFun",
"value": "http://www.acfun.cn/",
"icon": "https://jaywcjlove.github.io/logo/acfun.png"
},
{
"label": "优酷",
"value": "https://www.youku.com/",
"icon": "https://jaywcjlove.github.io/logo/youku.png"
},
{
"label": "爱奇艺",
"value": "http://www.iqiyi.com/",
"icon": "https://jaywcjlove.github.io/logo/iqiyi.png"
},
{
"label": "虾米音乐",
"value": "http://www.xiami.com/",
"icon": "https://jaywcjlove.github.io/logo/xiami.png"
},
{
"label": "QQ音乐",
"value": "https://y.qq.com/",
"icon": "https://jaywcjlove.github.io/logo/yqq.png"
},
{
"label": "豆瓣FM",
"value": "https://douban.fm/",
"icon": "https://jaywcjlove.github.io/logo/doubanfm.png"
},
{
"label": "蜻蜓FM",
"value": "http://www.qingting.fm/",
"icon": "https://jaywcjlove.github.io/logo/qingting.png"
}
]
},
Expand All @@ -64,6 +104,31 @@
"label": "亚马逊",
"value": "https://www.amazon.cn/",
"icon": "https://jaywcjlove.github.io/logo/amazon.png"
},
{
"label": "当当网",
"value": "http://www.dangdang.com/",
"icon": "https://jaywcjlove.github.io/logo/dangdang.png"
},
{
"label": "1药网",
"value": "http://www.111.com.cn/",
"icon": "https://jaywcjlove.github.io/logo/111.png"
},
{
"label": "饿了么",
"value": "https://www.ele.me",
"icon": "https://jaywcjlove.github.io/logo/eleme.png"
},
{
"label": "百度外卖",
"value": "https://waimai.baidu.com/",
"icon": "https://jaywcjlove.github.io/logo/waimaibaidu.png"
},
{
"label": "大众点评",
"value": "https://www.dianping.com/",
"icon": "https://jaywcjlove.github.io/logo/dianping.png"
}
]
},
Expand All @@ -85,6 +150,16 @@
"label": "威锋网",
"value": "http://www.feng.com/",
"icon": "https://jaywcjlove.github.io/logo/feng.png"
},
{
"label": "V2EX",
"value": "https://www.v2ex.com/",
"icon": "https://jaywcjlove.github.io/logo/v2ex.png"
},
{
"label": "简书",
"value": "http://www.jianshu.com/",
"icon": "https://jaywcjlove.github.io/logo/jianshu.png"
}
]
},
Expand All @@ -102,6 +177,11 @@
"value": "http://www.cnbeta.com/",
"icon": "https://jaywcjlove.github.io/logo/cnbeta.png"
},
{
"label": "雷锋网",
"value": "http://www.leiphone.com/",
"icon": "https://jaywcjlove.github.io/logo/leiphone.png"
},
{
"label": "36氪",
"value": "http://36kr.com/",
Expand Down Expand Up @@ -143,6 +223,11 @@
"label": "Airbnb",
"value": "https://www.airbnbchina.cn/",
"icon": "https://jaywcjlove.github.io/logo/airbnbchina.png"
},
{
"label": "穷游网",
"value": "http://www.qyer.com/",
"icon": "https://jaywcjlove.github.io/logo/qyer.png"
}
]
},
Expand All @@ -155,6 +240,31 @@
"value": "https://500px.com/",
"icon": "https://jaywcjlove.github.io/logo/500px.png"
},
{
"label": "站酷",
"value": "http://www.zcool.com.cn/",
"icon": "https://jaywcjlove.github.io/logo/zcool.png"
},
{
"label": "TOPYS",
"value": "http://www.topys.cn/",
"icon": "https://jaywcjlove.github.io/logo/topys.png"
},
{
"label": "涂鸦王国",
"value": "https://www.gracg.com/",
"icon": "https://jaywcjlove.github.io/logo/gracg.png"
},
{
"label": "UI中国",
"value": "http://www.ui.cn/",
"icon": "https://jaywcjlove.github.io/logo/ui.png"
},
{
"label": "Pinterest",
"value": "https://www.pinterest.com/",
"icon": "https://jaywcjlove.github.io/logo/pinterest.png"
},
{
"label": "Behance",
"value": "https://www.behance.net/",
Expand Down Expand Up @@ -186,15 +296,40 @@
"value": "http://stackoverflow.com/",
"icon": "https://jaywcjlove.github.io/logo/stackoverflow.png"
},
{
"label": "MDN Web",
"value": "https://developer.mozilla.org",
"icon": "https://jaywcjlove.github.io/logo/mozilla.png"
},
{
"label": "Apple Developer",
"value": "https://developer.apple.com/",
"icon": "https://jaywcjlove.github.io/logo/developerApple.png"
},
{
"label": "掘金",
"value": "https://juejin.im",
"icon": "https://jaywcjlove.github.io/logo/juejin.png"
},
{
"label": "NPM",
"value": "https://www.npmjs.com/",
"icon": "https://jaywcjlove.github.io/logo/npm.png"
},
{
"label": "CSDN",
"value": "http://www.csdn.net/",
"icon": "https://jaywcjlove.github.io/logo/csdn.png"
},
{
"label": "SegmentFault",
"value": "https://segmentfault.com/",
"icon": "https://jaywcjlove.github.io/logo/segmentfault.png"
},
{
"label": "开源中国",
"value": "http://www.oschina.net/",
"icon": "https://jaywcjlove.github.io/logo/oschina.png"
}
]
}
Expand Down

0 comments on commit 4ed86f5

Please sign in to comment.