project structure update for more accurate import

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

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

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

@@ -0,0 +1,31 @@
+import {Component} from 'angular2/core';
+
+import {ThemeGlobal} from '../../../theme';
+import {ProfilePicturePipe} from '../../pipes';
+import {MsgCenter} from '../../components/msgCenter';
+import {ScrollPosition} from '../../directives';
+
+@Component({
+  selector: 'page-top',
+  styles: [require('./pageTop.scss')],
+  template: require('./pageTop.html'),
+  directives: [MsgCenter, ScrollPosition],
+  pipes: [ProfilePicturePipe]
+})
+export class PageTop {
+  isScrolled:Boolean = false;
+  isMenuCollapsed:boolean = false;
+
+
+  constructor(private _themeGlobal:ThemeGlobal) {
+  }
+
+  toggleMenu() {
+    this.isMenuCollapsed = !this.isMenuCollapsed;
+    this._themeGlobal.setData('menu.isCollapsed', this.isMenuCollapsed);
+  }
+
+  scrolledChanged(isScrolled) {
+    this.isScrolled = isScrolled;
+  }
+}

src/app/theme/components/pageTop/pageTop.html

@@ -0,0 +1,25 @@
+<div class="page-top clearfix" scrollPosition maxHeight="50" (scrollChange)="scrolledChanged($event)"
+     [ngClass]="{scrolled: isScrolled}">
+  <a href="#/dashboard" class="al-logo clearfix"><span>Blur</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' | profilePicture ) }}">
+      </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>
+    <msg-center></msg-center>
+  </div>
+</div>

src/app/theme/components/pageTop/pageTop.scss

@@ -0,0 +1,180 @@
+@import '../../sass/conf/conf';
+@import '../../components/msgCenter/msgCenter';
+
+.page-top {
+  @include bg-translucent-dark(0.5);
+  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 {
+    @include bg-translucent-dark(0.85);
+  }
+}
+
+a.al-logo {
+  color: #ffffff;
+  display: block;
+  font-size: 24px;
+  font-family: $font-family;
+  white-space: nowrap;
+  float: left;
+  outline: none !important;
+  line-height: 60px;
+  text-decoration: none;
+
+  &:hover {
+    color: $hoverlink;
+  }
+
+  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: #ffffff;
+  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: #fff;
+  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: #fff;
+  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;
+}