[#9][fyqj] add user relative info in header

greengerong · Dec 26, 2017 · 4340edf · 4340edf
1 parent c913d97
commit 4340edf
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 2 deletions.
diff --git a/src/app/manage/manage-app.component.html b/src/app/manage/manage-app.component.html
@@ -4,7 +4,6 @@
 
 <div class="container main">
   <h2>Main content</h2>
-  <button class="btn btn-primary">test</button>
 
   <router-outlet></router-outlet>
 

diff --git a/src/app/shared/page-header/page-header.component.html b/src/app/shared/page-header/page-header.component.html
@@ -6,4 +6,25 @@
     <i class="fa fa-bars" aria-hidden="true"></i>
   </div>
 
+  <div class="user-info navbar-right">
+    <div reDropdown>
+      <span class="username dropdown-toggle">
+        &nbsp;{{dummyName}}
+        <i class="menu-icon glyphicon glyphicon-user"></i>
+        <span class="caret"></span>
+      </span>
+      <ul class="dropdown-menu">
+        <li>
+          <a>个人信息</a>
+        </li>
+         <li>
+          <a>系统设置</a>
+        </li>
+         <li>
+          <a>登出</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+
 </div>
diff --git a/src/app/shared/page-header/page-header.component.scss b/src/app/shared/page-header/page-header.component.scss
@@ -22,3 +22,40 @@
   font-weight: 500;
   white-space: nowrap;
 }
+
+.user-info {
+  position: absolute;
+  right: 5rem;
+
+  & > .open > .dropdown-menu {
+    display: block;
+  }
+}
+
+.username {
+  color: #fff;
+  cursor: pointer;
+}
+
+.dropdown-menu {
+  margin-top: 0;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+  max-height: 600px;
+  overflow: auto;
+}
+
+li {
+  a {
+    display: block;
+    cursor: pointer;
+    transition: all 0.2s;
+    background-color: transparent;
+
+    &:hover {
+      text-decoration: none;
+      color: #141414;
+      background-color: #eeeeee;
+    }
+  }
+}
diff --git a/src/app/shared/page-header/page-header.component.ts b/src/app/shared/page-header/page-header.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, Output, ViewChild } from '@angular/core';
 
 @Component({
   selector: 'app-page-header',
@@ -8,6 +8,9 @@ import { Component, EventEmitter, Output } from '@angular/core';
 export class PageHeaderComponent {
   @Output() onExpand = new EventEmitter();
 
+  @ViewChild('volumeTemplate') volumeTemplate;
+  dummyName = '管理员名称';
+
   handleExpandClick() {
     this.onExpand.emit();
   }