router

Levan-Du · Jun 13, 2017 · 3c6830c · 3c6830c
1 parent 1fe8f9f
commit 3c6830c
Show file tree

Hide file tree

Showing 28 changed files with 513 additions and 302 deletions.
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/dist/index.html b/dist/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta name="viewport" content="wdith=device-width,initial-scale=1">    <title>avalon spa demo</title></head><body ms-controller="app">    <ms-app /><script type="text/javascript" src="bundle.js"></script></body></html>
+<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta name="viewport" content="wdith=device-width,initial-scale=1">    <title>avalon spa demo</title></head><body ms-controller="app">    <div class="container-full clearfix">        <ms-sidebar />        <ms-main />    </div><script type="text/javascript" src="bundle.js"></script></body></html>

diff --git a/src/common/common.css b/src/common/common.css
@@ -37,3 +37,31 @@ select {
 .border-left {
     border-left: solid 1px #ccc;
 }
+
+.zindex10 {
+    z-index: 10;
+}
+
+.zindex100 {
+    z-index: 100;
+}
+
+.zindex1000 {
+    z-index: 1000;
+}
+
+.zindex10000 {
+    z-index: 10000;
+}
+
+.zindex100000 {
+    z-index: 100000;
+}
+
+.zindex1000000 {
+    z-index: 1000000;
+}
+
+.zindex10000000 {
+    z-index: 10000000;
+}
diff --git a/src/components/App/index.css b/src/components/App/index.css
diff --git a/src/components/App/index.html b/src/components/App/index.html
diff --git a/src/components/App/index.js b/src/components/App/index.js
diff --git a/src/components/Login/index.js b/src/components/Login/index.js
@@ -1,6 +1,5 @@
 import avalon, { component } from 'avalon2';
 import '../../assets/iconfont/iconfont.css';
-import '../../common/common.css';
 import './index.css';
 
 component('ms-login', {

diff --git a/src/components/LoginInfo/index.css b/src/components/LoginInfo/index.css
@@ -0,0 +1,4 @@
+.logininfo {
+    height: 100%;
+    background: #10182f;
+}
diff --git a/src/components/LoginInfo/index.html b/src/components/LoginInfo/index.html
@@ -0,0 +1,3 @@
+<div class="logininfo">
+    <p>hello,Levan</p>
+</div>
diff --git a/src/components/Main/index.js → src/components/LoginInfo/index.js b/src/components/Main/index.js → src/components/LoginInfo/index.js
@@ -1,8 +1,10 @@
 import avalon, { component } from 'avalon2';
+import '../../assets/iconfont/iconfont.css';
 import './index.css';
 
-component('ms-main', {
+component('ms-logininfo', {
     template: require('./index.html'),
     defaults: {
+        account: {}
     }
-})
+});
diff --git a/src/components/Main/index.html b/src/components/Main/index.html
diff --git a/src/components/Menu/index.js b/src/components/Menu/index.js
@@ -4,9 +4,6 @@ import './index.css';
 component('ms-menu', {
     template: require('./index.html'),
     defaults: {
-        menus: [
-            { id: 1, title: 'page1', path: '/page1', pid: 0 },
-            { id: 2, title: 'page2', path: '/page2', pid: 0 }
-        ]
+        menus:[]
     }
 })
diff --git a/src/components/NavLink/index.html b/src/components/NavLink/index.html
@@ -1 +1 @@
-<a class="link" ms-attr="{href:@to}" ms-text="@title" ></a>
+<a class="link" ms-attr="{href:parseHref()}" ms-text="@title"></a>
diff --git a/src/components/NavLink/index.js b/src/components/NavLink/index.js
@@ -5,6 +5,15 @@ component('ms-navlink', {
     template: require('./index.html'),
     defaults: {
         title: '',
-        to: ''
+        to: '',
+        parseHref() {
+            if (!this.to)
+                return '';
+            else if (this.to === '/') {
+                return '';
+            } else {
+                return '#' + this.to;
+            }
+        }
     }
 })
diff --git a/src/components/SideBar/index.css b/src/components/SideBar/index.css
diff --git a/src/components/SideBar/index.html b/src/components/SideBar/index.html
diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js
diff --git a/src/components/Tab/index.css b/src/components/Tab/index.css
@@ -17,14 +17,30 @@
     left: 0;
     right: 0;
     top: 0;
-    height: 3.15rem;
-    line-height: 3rem;
+    height: 3.5rem;
+    line-height: 3.4rem;
     border-bottom: solid .2rem #203040;
 }
 
 .tab__header .left {
     float: left;
-    border-right: solid 2px #ccc;
+    border-right: solid 1px #e7e7e7;
+}
+
+.tab__header .glyphicon {
+    padding: 0 .3rem;
+}
+
+.tab__header .link {
+    float: left;
+    height: 100%;
+    padding: 0 1rem;
+    border-right: solid 1px #e7e7e7;
+    color: #aaa;
+}
+
+.tab__header .link:hover {
+    background: #eee;
 }
 
 .tab__header .mid {
@@ -33,14 +49,14 @@
 
 .tab__header .right {
     float: right;
-    border-left: solid 2px #ccc;
+    border-left: solid 1px #e7e7e7;
 }
 
 .tab__content {
     position: absolute;
     left: 0;
     right: 0;
-    top: 3.2rem;
+    top: 3.5rem;
     bottom: 0;
     z-index: 101;
     overflow: auto;

diff --git a/src/components/Tab/index.html b/src/components/Tab/index.html
@@ -1,14 +1,18 @@
 <div class="tab">
     <ul class="tab__header">
-        <li class="left">111</li>
-        <li class="right">222</li>
+        <li class="left"><a class="link"><i class="glyphicon glyphicon-backward"></i></a></li>
+        <li class="right clearfix">
+            <a class="link"><i class="glyphicon glyphicon-forward"></i></a>
+            <a class="link"><i class="glyphicon glyphicon-remove-circle"></i></a>
+            <a class="link"><i class="glyphicon glyphicon-log-out"></i><span>退出</span></a>
+        </li>
         <li class="mid">
             <ul class="clearfix">
-                <ms-tabtitle ms-for="(i,p) in pages" ms-widget="{el:p,click:onTabTitleClick}" />
+                <ms-tabtitle ms-for="item in items" ms-widget="{el:item,click:onTabTitleClick}" />
             </ul>
         </li>
     </ul>
     <ul class="tab__content">
-        <ms-tabpage ms-for="p in pages" ms-widget="{tmpl:p.tmpl,checked:p.checked}">
+        <ms-tabpage ms-for="item in items" ms-widget="{tmpl:item.tmpl,checked:item.checked}">
     </ul>
 </div>
diff --git a/src/components/Tab/index.js b/src/components/Tab/index.js
@@ -5,13 +5,11 @@ component('ms-tab', {
     template: require('./index.html'),
     defaults: {
         name: 'pagetab',
-        pages: [
-            { title: 'home', tmpl: '<ms-homepage slot="page" />', checked: true },
-            { title: 'page1', tmpl: '<ms-page1 slot="page" />', checked: false },
-            { title: 'page2', tmpl: '<ms-page2 slot="page" />', checked: false }
+        items: [
+
         ],
         onTabTitleClick(checked) {
-            this.pages.forEach(el => el.checked = false);            
+            this.items.find(el => el.checked).checked = false;
         }
     }
 })
diff --git a/src/components/TabTitle/index.css b/src/components/TabTitle/index.css
@@ -1,7 +1,11 @@
+.tab a {
+    text-decoration: none;
+}
+
 .tab .tab__title {
     float: left;
     display: block;
-    border-right: solid 1px #ddd;
+    border-right: solid 1px #e7e7e7;
 }
 
 .tab__title__label {
@@ -12,8 +16,8 @@
     padding: 0 .8rem;
 }
 
-.tab a {
-    text-decoration: none;
+.tab__title__label:hover {
+    background: #eee;
 }
 
 .tab__title__label.checked {

diff --git a/src/components/TabTitle/index.js b/src/components/TabTitle/index.js
@@ -5,9 +5,7 @@ component('ms-tabtitle', {
     template: require('./index.html'),
     defaults: {
         el: {},
-        click() {
-
-        },
+        click() {},
         onClick() {
         	this.click();
             this.el.checked = true;

diff --git a/src/components/index.js b/src/components/index.js
@@ -1,11 +1,9 @@
 import './Login';
 import './Menu';
-import './SideBar';
-import './Main';
-import './App';
 import './Topbar';
 import './StatusBar';
 import './Tab';
 import './TabTitle';
 import './TabPage';
 import './NavLink';
+import './LoginInfo';
diff --git a/src/components/Main/index.css → src/index.css b/src/components/Main/index.css → src/index.css
@@ -1,10 +1,26 @@
+.sidebar {
+    float: left;
+    width: 20rem;
+    height: 100%;
+    background: #203445;
+}
+
+.sidebar__header {
+    height: 12rem;
+    padding: .5rem;
+    background: #022334;
+    color: #eee;
+}
+
+.sidebar__nav {}
+
 .main {
     overflow: hidden;
     height: 100%;
     position: relative;
 }
 
-.top {
+.main .main__top {
     position: absolute;
     left: 0;
     right: 0;
@@ -14,7 +30,7 @@
     border-bottom: solid 1px #e7e7e7;
 }
 
-.content {
+.main .main__content {
     position: absolute;
     left: 0;
     right: 0;
@@ -25,7 +41,7 @@
     overflow: hidden;
 }
 
-.footer {
+.main .main__footer {
     position: absolute;
     left: 0;
     right: 0;

diff --git a/src/index.html b/src/index.html
@@ -7,8 +7,29 @@
     <title>avalon spa demo</title>
 </head>
 
-<body ms-controller="app">
-    <ms-app />
+<body class="clearfix" ms-controller="app">
+    <aside class="sidebar" ms-controller="vm_sidebar">
+        <header class="sidebar__header">
+            <ms-logininfo />
+        </header>
+        <nav class="sidebar__nav">
+            <article ms-for="m in menus">
+                <h3><ms-navlink ms-widget="{to:m.path,title:m.title}" /></h3>
+                <ms-menu ms-widget="{menus:getSubmenus(m)}" />
+            </article>
+        </nav>
+    </aside>
+    <article class="main">
+        <header class="main__top">
+            <ms-topbar />
+        </header>
+        <article class="main__content">
+            <ms-tab ms-widget="{items:tabItems}" />
+        </article>
+        <footer class="main__footer">
+            <ms-statusbar />
+        </footer>
+    </article>
 </body>
 
 </html>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="wdith=device-width,initial-scale=1"> <title>avalon spa demo</title></head><body ms-controller="app"> <ms-app /><script type="text/javascript" src="bundle.js"></script></body></html>
		<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="wdith=device-width,initial-scale=1"> <title>avalon spa demo</title></head><body ms-controller="app"> <div class="container-full clearfix"> <ms-sidebar /> <ms-main /> </div><script type="text/javascript" src="bundle.js"></script></body></html>
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<a class="link" ms-attr="{href:@to}" ms-text="@title" ></a>
		<a class="link" ms-attr="{href:parseHref()}" ms-text="@title"></a>