Skip to content

Commit

Permalink
menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levan-Du
Levan-Du committed Jun 17, 2017
1 parent 6e71d4d commit 208cbb4
Show file tree
Hide file tree
Showing 30 changed files with 158 additions and 97 deletions.
81 changes: 51 additions & 30 deletions dist/bundle.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>avalon spa demo</title> <!--[if lt IE 9]> <script src="js/html5shiv.min.js"></script> <script src="js/respond.min.js"></script> <script src="js/es5-shim.min.js"></script> <script src="js/es5-sham.min.js"></script> <![endif]--></head><body> <div class="container-full clearfix" ms-controller="app"> <aside class="sidebar" ms-controller="vm_sidebar"> <header class="sidebar__header"> <ms-logininfo /> </header> <nav class="sidebar__nav"> <ms-menu ms-widget="{menus:menus,submenus:submenus,removeItem:removeTabItem}" /> </nav> </aside> <article class="main"> <header class="main__top"> <ms-topbar /> </header> <article class="main__content"> <ms-pagetab ms-widget="{items:tabItems,removeItem:removeTabItem}" /> </article> <footer class="main__footer"> <ms-statusbar /> </footer> </article> </div><script type="text/javascript" src="bundle.js"></script></body></html>
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>avalon spa demo</title> <!--[if lt IE 9]> <script src="js/html5shiv.min.js"></script> <script src="js/respond.min.js"></script> <![endif]--></head><body> <div class="container-full clearfix" ms-controller="app"> <aside class="sidebar" ms-controller="vm_sidebar"> <header class="sidebar__header"> <ms-logininfo /> </header> <nav class="sidebar__nav"> <ms-menu ms-widget="{menus:menus,submenus:submenus,removeItem:removeTabItem}" /> </nav> </aside> <article class="main"> <header class="main__top"> <ms-topbar /> </header> <article class="main__content"> <ms-pagetab ms-widget="{items:tabItems,removeItem:removeTabItem}" /> </article> <footer class="main__footer"> <ms-statusbar /> </footer> </article> </div><script type="text/javascript" src="bundle.js"></script></body></html>
Expand Down
0 src/constants/actions.js → src/actions/actions.js
View file
File renamed without changes.
18 changes: 9 additions & 9 deletions src/components/Login/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div class="l-login">
<form ms-on-submit="@onSubmit">
<article class="box">
<h3 class="title"><img src="../../assets/imgs/logoicon.png"><span>登录</span></h3>
<section class="content">
<article class="box">
<h3 class="title"><img src="../../assets/imgs/logoicon.png"><span>登录</span></h3>
<section class="content">
<form ms-on-submit="@onSubmit">
<p class="row">
<span class="iconfont icon-ren"></span>
<input type="text" name="account" placeholder="用户名/邮箱/手机号码">
Expand All @@ -18,9 +18,9 @@ <h3 class="title"><img src="../../assets/imgs/logoicon.png"><span>登录</span><
<p class="row row-noborder">
<input class="btn btn-submit" type="submit" name="submit" value="提交">
</p>
</section>
<section class="footer">
</section>
</article>
</form>
</form>
</section>
<section class="footer">
</section>
</article>
</div>
Binary file added src/components/LoginInfo/boy.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/components/LoginInfo/girl.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 29 additions & 0 deletions src/components/LoginInfo/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,32 @@
.logininfo {
height: 100%;
padding-left: 2rem;
}

.logininfo .row {
width: 7rem;
line-height: 1;
margin: 0;
border: none;
text-align: center;
font-size: 12px;
}

.row.avator {
height: 7rem;
margin-top: 1rem;
}

.avator img {
width: 100%;
height: 100%;
border-radius: 4rem;
}

.floatleft {
float: left;
}

.overflowhidden {
overflow: hidden;
}
8 changes: 5 additions & 3 deletions src/components/LoginInfo/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
<div class="logininfo">
<p>hello,Levan</p>
</div>
<article class="logininfo clearfix">
<p class="row avator"><img ms-attr="{src:avator}" alt="头像"></p>
<p class="row name"><span ms-text="name"></span></p>
<p class="row role"><span ms-text="role"></span><i class="glyphicon glyphicon-triangle-bottom"></i></p>
</article>
5 changes: 4 additions & 1 deletion src/components/LoginInfo/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ import './index.css';
component('ms-logininfo', {
template: require('./index.html'),
defaults: {
account: {}
id: 0,
name: '怡红公子',
role: '管理员',
avator: require('./boy.png')
}
});
8 changes: 6 additions & 2 deletions src/components/Menu/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
background: #2a3845;
}

.menu__item.checked .nav-link {
.menu__item.checked > .menu__title .nav-link {
color: #eef;
}

Expand All @@ -13,6 +13,10 @@
padding: .5rem 2rem;
}

.menu__item .nav-link.checked {
color: #eee;
}

.menu__item > .menu__title .nav-link {
padding: .8rem 2rem;
}
Expand All @@ -23,7 +27,7 @@
}

.menu__item:hover .nav-link {
color: #eee;
/*color: #eee;*/
}

.submenu {
Expand Down
6 changes: 3 additions & 3 deletions src/components/Menu/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<ul class="menu">
<li ms-for="(i,m) in menus" ms-class="['menu__item',m.checked&&'checked']">
<div class="menu__title">
<ms-navlink ms-widget="{el:m,glyphicon:'glyphicon-home',iconvisible:true}" ms-click="menuItemClick(m,i)" />
<ms-navlink ms-widget="{item:m,glyphicon:'glyphicon-home',iconvisible:true,click:menuItemClick}" />
</div>
<ul ms-class="['submenu',m.checked&&'checked']">
<li class="submenu__item" ms-for="sm in getSubmenus(m.id)">
<ms-navlink ms-widget="{el:sm,glyphicon:'glyphicon-home'}" />
<li class="submenu__item" ms-for="sm in submenuArr[m.id]">
<ms-navlink ms-widget="{item:sm,glyphicon:'glyphicon-home',click:subMenuItemClick}" />
</li>
</ul>
</li>
Expand Down
30 changes: 21 additions & 9 deletions src/components/Menu/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,34 @@ import avalon, { component } from 'avalon2';
import './index.css';
import { menus, submenus } from '../../routes/pages';


var submenuArr = {};
menus.forEach((m) => {
submenuArr[m.id] = submenus.filter(s => s.pid === m.id);
});
var selectedSubMenuItem = submenus[0];

component('ms-menu', {
template: require('./index.html'),
defaults: {
menus,
submenus,
getSubmenus(id) {
var sms = this.submenus.filter(el => el.pid === id);
return sms;
},
menuItemClick(el, i) {
submenuArr,
selectedSubMenuItem,
menuItemClick(e, item) {
var preIndex = this.menus.findIndex(el => el.checked);
var currIndex = this.menus.findIndex(el => item.id === el.id);
this.menus[preIndex].checked = false;
this.menus[i].checked = true;
this.menus[currIndex].checked = true;
},
subMenuItemClick(el) {
subMenuItemClick(e, item) {
var preIndex = this.submenuArr[item.pid].findIndex(el => el.checked);
var currIndex = this.submenuArr[item.pid].findIndex(el => item.id === el.id);

}
if (preIndex >= 0) {
this.submenuArr[item.pid][preIndex].checked = false;
}
this.submenuArr[item.pid][currIndex].checked = true;
},
onReady(e) {}
}
})
4 changes: 4 additions & 0 deletions src/components/NavLink/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
color: #fff;
}

.nav-link:checked {
color: #eee;
}

.nav-link > * {
display: inline-block;
vertical-align: middle;
Expand Down
6 changes: 3 additions & 3 deletions src/components/NavLink/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<a class="nav-link clearfix" ms-attr="{href:parseHref(el.path)}">
<a ms-class="['nav-link','clearfix',item.checked&&'checked']" ms-attr="{href:parseHref(item.path)}" ms-click="click($event,item)">
<i class="glyphicon glyphicon-home" ms-visible="iconvisible"></i>
<i ms-class="['glyphicon',el.checked?'glyphicon-chevron-down':'glyphicon-chevron-left','right']" ms-visible="iconvisible"></i>
<span class="text" ms-text="el.title"></span>
<i ms-class="['glyphicon',item.checked?'glyphicon-chevron-down':'glyphicon-chevron-left','right']" ms-visible="iconvisible"></i>
<span class="text" ms-text="item.title"></span>
</a>
9 changes: 6 additions & 3 deletions src/components/NavLink/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import './index.css';
component('ms-navlink', {
template: require('./index.html'),
defaults: {
el:{},
glyphicon:'',
item: {},
glyphicon: '',
parseHref(path) {
if (!path)
return '';
Expand All @@ -15,6 +15,9 @@ component('ms-navlink', {
return '#' + path;
}
},
iconvisible: false
iconvisible: false,
click(e, el) {

}
}
})
2 changes: 1 addition & 1 deletion src/components/PageTab/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ component('ms-pagetab', {

},
onReady() {
console.log(this.removeItem);

}
}
})
1 change: 1 addition & 0 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ body > .container-full {

.sidebar__header {
height: 13rem;
line-height: 13rem;
background: #2a3845;
}

Expand Down
1 change: 1 addition & 0 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>avalon spa demo</title>
<!--[if lt IE 9]>
Expand Down
4 changes: 3 additions & 1 deletion src/pages/Home/index.css
View file
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
article {}
.homepage {
padding: 1rem;
}
25 changes: 3 additions & 22 deletions src/pages/Home/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,3 @@
<article>
<p>this is home page.</p>
<p>this is home page.</p>
<p>this is home page.</p>
<p>this is home page.</p>
<p>this is home page.</p>
<p>this is home page.</p>
<p>this is home page.</p>
<p>this is home page.</p>
<p>this is home page.</p>
<p>this is home page.</p>
<p>this is home page.</p>
<p>this is home page.</p>
<p>this is home page.</p>
<p>this is home page.</p>
<p>this is home page.</p>
<p>this is home page.</p>
<p>this is home page.</p>
<p>this is home page.</p>
<p>this is home page.</p>
<p>this is home page.</p>
</article>
<article class="homepage">
123
</article>
0 src/pages/Page1/index.css → src/pages/Page101/index.css
View file
File renamed without changes.
0 src/pages/Page1/index.html → src/pages/Page101/index.html
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion src/pages/Page1/index.js → src/pages/Page101/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { parseCssModule } from '../../common/common';

// console.log(parseCssModule(styles, require('./index.html'));

component('ms-page1', {
component('ms-page101', {
template: require('./index.html'),
defaults: {}
})
0 src/pages/Page2/index.css → src/pages/Page201/index.css
View file
File renamed without changes.
0 src/pages/Page2/index.html → src/pages/Page201/index.html
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion src/pages/Page2/index.js → src/pages/Page201/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { parseCssModule } from '../../common/common';

// console.log(parseCssModule(styles, require('./index.html'));

component('ms-page2', {
component('ms-page201', {
template: require('./index.html'),
defaults: {}
})
4 changes: 2 additions & 2 deletions src/pages/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import './Home';
import './Page1';
import './Page2';
import './Page101';
import './Page201';
1 change: 1 addition & 0 deletions src/reducers/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
index.js
2 changes: 0 additions & 2 deletions src/routes/pages.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@ var createPage = (id, pid, page) => {
return o;
};

pages.push(createPage(10000, -1, 'homepage'));
console.log(pages);

[1, 2, 3].forEach(i => {
pages.push(createPage(i, 0, 'page' + i));
Expand Down
4 changes: 1 addition & 3 deletions src/stores/createStroe.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,7 @@ const createStore = (reducer) => {
listeners = listeners.filter(l => l !== listener);
}
};

dispatch({});


return { getState, dispatch, subscribe };
};

Expand Down

0 comments on commit 208cbb4

Please sign in to comment.