pageTop -> baPageTop

src/app/theme/components/baPageTop/baPageTop.component.ts

@@ -0,0 +1,35 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+import {AppState} from '../../../app.state';
+import {BaProfilePicturePipe} from '../../pipes';
+import {BaMsgCenter} from '../../components/baMsgCenter';
+import {BaScrollPosition} from '../../directives';
+
+@Component({
+  selector: 'ba-page-top',
+  styles: [require('./baPageTop.scss')],
+  template: require('./baPageTop.html'),
+  directives: [BaMsgCenter, BaScrollPosition],
+  pipes: [BaProfilePicturePipe],
+  encapsulation: ViewEncapsulation.None
+})
+export class BaPageTop {
+
+  public isScrolled:boolean = false;
+  public isMenuCollapsed:boolean = false;
+
+  constructor(private _state:AppState) {
+    this._state.subscribe('menu.isCollapsed', (isCollapsed) => {
+      this.isMenuCollapsed = isCollapsed;
+    });
+  }
+
+  public toggleMenu() {
+    this.isMenuCollapsed = !this.isMenuCollapsed;
+    this._state.notifyDataChanged('menu.isCollapsed', this.isMenuCollapsed);
+  }
+
+  public scrolledChanged(isScrolled) {
+    this.isScrolled = isScrolled;
+  }
+}

src/app/theme/components/baPageTop/baPageTop.html

@@ -0,0 +1,25 @@
+<div class="page-top clearfix" baScrollPosition maxHeight="50" (scrollChange)="scrolledChanged($event)"
+     [ngClass]="{scrolled: isScrolled}">
+  <a href="#/pages/dashboard" class="al-logo clearfix"><span>ng2-</span>admin</a>
+  <a (click)="toggleMenu()" class="collapse-menu-link ion-navicon"></a>
+
+  <div class="search">
+    <i class="ion-ios-search-strong" ng-click="startSearch()"></i>
+    <input id="searchInput" type="text" placeholder="Search for...">
+  </div>
+
+  <div class="user-profile clearfix">
+    <div class="dropdown al-user-profile">
+      <a class="profile-toggle-link dropdown-toggle" id="user-profile-dd" data-toggle="dropdown" aria-expanded="false">
+        <img src="{{ ( 'Nasta' | baProfilePicture ) }}">
+      </a>
+      <div class="dropdown-menu top-dropdown-menu profile-dropdown" aria-labelledby="user-profile-dd">
+        <li class="dropdown-item"><i class="dropdown-arr"></i></li>
+        <li class="dropdown-item"><a href="#/profile"><i class="fa fa-user"></i>Profile</a></li>
+        <li class="dropdown-item"><a href><i class="fa fa-cog"></i>Settings</a></li>
+        <li class="dropdown-item"><a href class="signout"><i class="fa fa-power-off"></i>Sign out</a></li>
+      </div>
+    </div>
+    <ba-msg-center></ba-msg-center>
+  </div>
+</div>

src/app/theme/components/baPageTop/baPageTop.scss

@@ -0,0 +1,180 @@
+@import '../../sass/conf/conf';
+@import '../../components/baMsgCenter/baMsgCenter';
+
+.page-top {
+  background-color: $sidebar;
+  position: fixed;
+  z-index: 904;
+  box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.5);
+  height: 66px;
+  width: 100%;
+  min-width: $resMin;
+  padding: 0 32px 0 40px;
+
+  &.scrolled {
+    background-color: rgba(black, 0.85)
+  }
+
+  .dropdown-toggle::after {
+    display: none;
+  }
+}
+
+a.al-logo {
+  color: $sidebar-text;
+  display: block;
+  font-size: 24px;
+  font-family: $font-family;
+  white-space: nowrap;
+  float: left;
+  outline: none !important;
+  line-height: 60px;
+
+  span {
+    color: $primary;
+  }
+}
+
+.user-profile {
+  float: right;
+  min-width: 230px;
+  margin-top: 10px;
+}
+
+.al-user-profile {
+  float: right;
+  margin-right: 12px;
+  transition: all .15s ease-in-out;
+  padding: 0;
+  width: 36px;
+  height: 36px;
+  border: 0;
+  opacity: 1;
+  position: relative;
+  a {
+    display: block;
+  }
+  img {
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+  }
+}
+
+a.refresh-data {
+  color: $sidebar-text;
+  font-size: 13px;
+  text-decoration: none;
+  font-weight: $font-normal;
+  float: right;
+  margin-top: 13px;
+  margin-right: 26px;
+
+  &:hover {
+    color: $warning !important;
+  }
+}
+
+a.collapse-menu-link {
+  font-size: 31px;
+  cursor: pointer;
+  display: block;
+  text-decoration: none;
+  line-height: 42px;
+  color: $sidebar-text;
+  padding: 0;
+  float: left;
+  margin: 11px 0 0 25px;
+
+  &:hover {
+    text-decoration: none;
+    color: $warning;
+  }
+}
+
+.al-skin-dropdown {
+  float: right;
+  margin-top: 14px;
+  margin-right: 26px;
+
+  .tpl-skin-panel {
+    max-height: 300px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
+}
+
+.icon-palette {
+  display: inline-block;
+  width: 14px;
+  height: 13px;
+  @include bg('theme/palette.png');
+  background-size: cover;
+}
+
+.search {
+  text-shadow: none;
+  color: $sidebar-text;
+  font-size: 13px;
+  line-height: 25px;
+  transition: all 0.5s ease;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 162px;
+  float: left;
+  margin: 20px 0 0 30px;
+
+  label {
+    cursor: pointer;
+  }
+  i {
+    width: 16px;
+    display: inline-block;
+    cursor: pointer;
+    padding-left: 1px;
+    font-size: 16px;
+    margin-right: 13px;
+  }
+  input {
+    background: none;
+    border: none;
+    outline: none;
+    width: 120px;
+    padding: 0;
+    margin: 0 0 0 -3px;
+    height: 27px;
+  }
+}
+
+@media screen and (max-width: $resS) {
+  .search {
+    display: none;
+  }
+}
+
+@media screen and (max-width: $resXS) {
+  .page-top {
+    padding: 0 20px;
+  }
+}
+
+@media (max-width: $resXXS) {
+  .user-profile{
+    min-width: 136px;
+  }
+  a.refresh-data {
+    margin-right: 10px;
+  }
+  a.collapse-menu-link {
+    margin-left: 10px;
+  }
+
+  .al-skin-dropdown {
+    display: none;
+  }
+}
+
+.profile-toggle-link{
+  cursor: pointer;
+}
+

src/app/theme/components/baPageTop/index.ts

@@ -0,0 +1 @@
+export * from './baPageTop.component.ts';