From 0992b52b24dcee4885655b2d00a4fdfd97334268 Mon Sep 17 00:00:00 2001
From: tibing <parapupum@gmail.com>
Date: Tue, 18 Apr 2017 19:12:29 +0300
Subject: [PATCH] refactor(@theme): refactor style system

---
 .../_base-header.component.theme.scss         | 24 ++++++
 .../base-header/base-header.component.scss    | 64 ++++++++++++++++
 .../base-header/base-header.component.ts      | 29 +++++++
 src/app/@theme/layouts/index.ts               |  1 +
 .../one-coll-layout/one-coll.layout.scss      | 76 -------------------
 .../one-coll-layout/one-coll.layout.ts        | 30 +-------
 .../_search-input.component.theme.scss        |  9 +++
 .../search-input/search-input.component.scss  | 27 +++++++
 .../search-input/search-input.component.ts    | 35 +++++++++
 .../@theme/styles/pure/_pure.components.scss  |  7 ++
 ...re.redefines.scss => _pure.redefines.scss} |  5 ++
 src/app/@theme/styles/pure/pure.theme.scss    |  3 +-
 src/app/@theme/styles/styles.scss             |  2 +-
 src/app/@theme/theme.module.ts                | 15 ++--
 14 files changed, 214 insertions(+), 113 deletions(-)
 create mode 100644 src/app/@theme/layouts/base-header/_base-header.component.theme.scss
 create mode 100644 src/app/@theme/layouts/base-header/base-header.component.scss
 create mode 100644 src/app/@theme/layouts/base-header/base-header.component.ts
 delete mode 100644 src/app/@theme/layouts/one-coll-layout/one-coll.layout.scss
 create mode 100644 src/app/@theme/search-input/_search-input.component.theme.scss
 create mode 100644 src/app/@theme/search-input/search-input.component.scss
 create mode 100644 src/app/@theme/search-input/search-input.component.ts
 create mode 100644 src/app/@theme/styles/pure/_pure.components.scss
 rename src/app/@theme/styles/pure/{pure.redefines.scss => _pure.redefines.scss} (94%)

diff --git a/src/app/@theme/layouts/base-header/_base-header.component.theme.scss b/src/app/@theme/layouts/base-header/_base-header.component.theme.scss
new file mode 100644
index 00000000..da318b6c
--- /dev/null
+++ b/src/app/@theme/layouts/base-header/_base-header.component.theme.scss
@@ -0,0 +1,24 @@
+@mixin base-header-theme() {
+  /deep/ base-header {
+    i.control-icon {
+      &:hover {
+        color: $nga-color-secondary;
+      }
+    }
+
+    .logo {
+      span {
+        color: $nga-color-secondary;
+      }
+
+      &:hover span {
+        color: $nga-color-default;
+      }
+    }
+
+    .left > *,
+    .right > * {
+      border-color: rgba($nga-color-default, 0.2);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/@theme/layouts/base-header/base-header.component.scss b/src/app/@theme/layouts/base-header/base-header.component.scss
new file mode 100644
index 00000000..36fe4bb6
--- /dev/null
+++ b/src/app/@theme/layouts/base-header/base-header.component.scss
@@ -0,0 +1,64 @@
+:host {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+
+  i.control-icon {
+    &:before {
+      font-size: 2.3rem;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  div {
+    display: flex;
+    align-items: center;
+  }
+
+  .left {
+    > * {
+      padding: 0 1.25rem;
+      border-right-width: 1px;
+      border-right-style: solid;
+
+      &:first-child {
+        padding-left: 0;
+      }
+
+      &:last-child {
+        border: none;
+      }
+    }
+
+    .control-icon.ion-navicon {
+      font-size: 2.8rem;
+    }
+
+    .logo {
+      font-size: 1.7rem;
+      text-decoration: none;
+      transition: all 0.2s ease;
+    }
+  }
+
+  .right {
+    > * {
+      padding: 0 1.25rem;
+      border-left-width: 1px;
+      border-left-style: solid;
+
+      &:first-child {
+        border: none;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+
+  }
+}
+
diff --git a/src/app/@theme/layouts/base-header/base-header.component.ts b/src/app/@theme/layouts/base-header/base-header.component.ts
new file mode 100644
index 00000000..97cbc7a4
--- /dev/null
+++ b/src/app/@theme/layouts/base-header/base-header.component.ts
@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+
+import { NgaSidebarService } from '@nga/theme/components/sidebar/sidebar.service';
+
+@Component({
+  selector: 'base-header',
+  styleUrls: ['./base-header.component.scss'],
+  template: `
+    <div class="left">
+      <i class="control-icon ion ion-navicon" (click)="toggleSidebar()"></i>
+      <a href="/#/pages/dashboard" class="logo">NgX <span>Admin</span></a>
+    </div>
+    <div class="right">
+      <search-input></search-input>
+      <i class="control-icon ion ion-ios-email-outline"></i>
+      <i class="control-icon ion ion-ios-bell-outline"></i>
+      <nga-user></nga-user>
+      <i class="control-icon ion ion-ios-gear-outline"></i>
+    </div>
+  `
+})
+export class BaseHeaderComponent {
+  constructor(private sidebarService: NgaSidebarService) {
+  }
+
+  toggleSidebar() {
+    this.sidebarService.toggle(true);
+  }
+}
diff --git a/src/app/@theme/layouts/index.ts b/src/app/@theme/layouts/index.ts
index 45e34433..01b158ea 100644
--- a/src/app/@theme/layouts/index.ts
+++ b/src/app/@theme/layouts/index.ts
@@ -1 +1,2 @@
+export * from './base-header/base-header.component';
 export * from './one-coll-layout/one-coll.layout';
diff --git a/src/app/@theme/layouts/one-coll-layout/one-coll.layout.scss b/src/app/@theme/layouts/one-coll-layout/one-coll.layout.scss
deleted file mode 100644
index 60b40c76..00000000
--- a/src/app/@theme/layouts/one-coll-layout/one-coll.layout.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-@import '../../styles/pure/pure.redefines';
-
-:host /deep/ {
-  nga-layout-header > nav {
-    justify-content: space-between;
-
-    i.control-icon {
-      font-size: 2.3rem;
-
-      &:hover {
-        cursor: pointer;
-        color: $nga-color-secondary;
-      }
-    }
-
-    div {
-      display: flex;
-      align-items: center;
-    }
-
-    .left {
-      > * {
-        padding: 0 1.25rem;
-        border-right: 1px solid rgba($nga-color-default, 0.2);
-
-        &:first-child {
-          padding-left: 0;
-        }
-
-        &:last-child {
-          border: none;
-        }
-      }
-
-      .control-icon.ion-navicon {
-        font-size: 2.8rem;
-      }
-
-      .logo {
-        font-size: 1.7rem;
-        text-decoration: none;
-        transition: all 0.2s ease;
-
-        span {
-          color: $nga-color-secondary;
-        }
-
-        &:hover span {
-          color: $nga-color-default;
-        }
-      }
-    }
-
-    .right {
-      > * {
-        padding: 0 1.25rem;
-        border-left: 1px solid rgba($nga-color-default, 0.2);
-
-        &:first-child {
-          border: none;
-        }
-
-        &:last-child {
-          padding-right: 0;
-        }
-      }
-    }
-  }
-
-  nga-sidebar {
-
-  }
-
-  nga-layout-footer > nav {
-  }
-}
diff --git a/src/app/@theme/layouts/one-coll-layout/one-coll.layout.ts b/src/app/@theme/layouts/one-coll-layout/one-coll.layout.ts
index bd45c6da..e25109e6 100644
--- a/src/app/@theme/layouts/one-coll-layout/one-coll.layout.ts
+++ b/src/app/@theme/layouts/one-coll-layout/one-coll.layout.ts
@@ -1,33 +1,11 @@
-/*
-* TODO
-* I think we need to store our header, footer,
-* sedibars and etc. separetly, each in it's own
-* component.
-*
-* And of course we need to make this layout part
-* reusable.
-* */
 import { Component } from '@angular/core';
 
-import { NgaSidebarService } from '@nga/theme/components/sidebar/sidebar.service';
-
 @Component({
   selector: 'one-coll-layout',
-  styleUrls: ['./one-coll.layout.scss'],
   template: `
     <nga-layout>
       <nga-layout-header fixed>
-        <div class="left">
-          <i class="control-icon ion ion-navicon" (click)="toggleSidebar()"></i>
-          <a href="/#/pages/dashboard" class="logo">NgX <span>Admin</span></a>
-        </div>
-        <div class="right">
-          <i class="control-icon ion ion-ios-search"></i>
-          <i class="control-icon ion ion-ios-email-outline"></i>
-          <i class="control-icon ion ion-ios-bell-outline"></i>
-          <nga-user></nga-user>
-          <i class="control-icon ion ion-ios-gear-outline"></i>
-        </div>
+        <base-header></base-header>
       </nga-layout-header>
 
       <nga-sidebar>
@@ -46,10 +24,4 @@ import { NgaSidebarService } from '@nga/theme/components/sidebar/sidebar.service
   `,
 })
 export class OneCollLayoutComponent {
-  constructor(private sidebarService: NgaSidebarService) {
-  }
-
-  toggleSidebar() {
-    this.sidebarService.toggle(true);
-  }
 }
diff --git a/src/app/@theme/search-input/_search-input.component.theme.scss b/src/app/@theme/search-input/_search-input.component.theme.scss
new file mode 100644
index 00000000..00dc1afe
--- /dev/null
+++ b/src/app/@theme/search-input/_search-input.component.theme.scss
@@ -0,0 +1,9 @@
+@mixin search-input-theme() {
+  /deep/ search-input {
+    i.control-icon {
+      &:hover {
+        color: $nga-color-secondary;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/@theme/search-input/search-input.component.scss b/src/app/@theme/search-input/search-input.component.scss
new file mode 100644
index 00000000..dbc39562
--- /dev/null
+++ b/src/app/@theme/search-input/search-input.component.scss
@@ -0,0 +1,27 @@
+:host {
+  display: flex;
+  align-items: center;
+
+  i.control-icon {
+    &:before {
+      font-size: 2.3rem;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  input {
+    border: none;
+    outline: none;
+    margin-left: 1rem;
+    width: 15rem;
+    transition: width 0.2s ease;
+
+    &.hidden {
+      width: 0;
+      margin: 0;
+    }
+  }
+}
diff --git a/src/app/@theme/search-input/search-input.component.ts b/src/app/@theme/search-input/search-input.component.ts
new file mode 100644
index 00000000..3196b41e
--- /dev/null
+++ b/src/app/@theme/search-input/search-input.component.ts
@@ -0,0 +1,35 @@
+import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'search-input',
+  styleUrls: ['./search-input.component.scss'],
+  template: `
+    <i class="control-icon ion ion-ios-search"
+       (click)="showInput()"></i>
+    <input placeholder="Type your search request here..."
+           #input
+           [class.hidden]="!isInputShown"
+           (blur)="hideInput()"
+           (input)="onInput($event)">
+  `
+})
+export class SearchInputComponent {
+  @ViewChild('input') input: ElementRef;
+
+  @Output() search: EventEmitter<string> = new EventEmitter<string>();
+
+  isInputShown: boolean = false;
+
+  showInput() {
+    this.isInputShown = true;
+    this.input.nativeElement.focus();
+  }
+
+  hideInput() {
+    this.isInputShown = false;
+  }
+
+  onInput(val: string) {
+    this.search.emit(val);
+  }
+}
\ No newline at end of file
diff --git a/src/app/@theme/styles/pure/_pure.components.scss b/src/app/@theme/styles/pure/_pure.components.scss
new file mode 100644
index 00000000..97c35cab
--- /dev/null
+++ b/src/app/@theme/styles/pure/_pure.components.scss
@@ -0,0 +1,7 @@
+@import '../../layouts/base-header/base-header.component.theme';
+@import '../../search-input/search-input.component.theme';
+
+@mixin custom-components-theme() {
+  @include base-header-theme();
+  @include search-input-theme();
+}
\ No newline at end of file
diff --git a/src/app/@theme/styles/pure/pure.redefines.scss b/src/app/@theme/styles/pure/_pure.redefines.scss
similarity index 94%
rename from src/app/@theme/styles/pure/pure.redefines.scss
rename to src/app/@theme/styles/pure/_pure.redefines.scss
index 7397db2e..99319cfa 100644
--- a/src/app/@theme/styles/pure/pure.redefines.scss
+++ b/src/app/@theme/styles/pure/_pure.redefines.scss
@@ -21,10 +21,15 @@ $nga-user-picture-background: $nga-color-default;
 
 $nga-sidebar-background: $nga-background;
 $nga-sidebar-width: 16.25rem;
+$nga-sidebar-width-compact: 3.45rem;
 
 :host /deep/ {
   color: $nga-color-default;
 
+  input {
+    color: $nga-color-default;
+  }
+
   nga-layout {
     nga-layout-header > nav {
       box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
diff --git a/src/app/@theme/styles/pure/pure.theme.scss b/src/app/@theme/styles/pure/pure.theme.scss
index c6319882..2d4f0c70 100644
--- a/src/app/@theme/styles/pure/pure.theme.scss
+++ b/src/app/@theme/styles/pure/pure.theme.scss
@@ -1,5 +1,6 @@
 @import '~@nga/theme/styles/themes/nga.theme.default';
-
+@import 'pure.components';
 @import 'pure.redefines';
 
 @include nga-theme();
+@include custom-components-theme();
diff --git a/src/app/@theme/styles/styles.scss b/src/app/@theme/styles/styles.scss
index ecc98bed..6dce2342 100644
--- a/src/app/@theme/styles/styles.scss
+++ b/src/app/@theme/styles/styles.scss
@@ -1 +1 @@
-@import "pure/pure.theme";
\ No newline at end of file
+@import 'pure/pure.theme';
\ No newline at end of file
diff --git a/src/app/@theme/theme.module.ts b/src/app/@theme/theme.module.ts
index 489b8610..a2adf3a2 100644
--- a/src/app/@theme/theme.module.ts
+++ b/src/app/@theme/theme.module.ts
@@ -12,7 +12,8 @@ import {
   NgaUserModule
 } from '@nga/theme';
 
-import { OneCollLayoutComponent } from './layouts';
+import { SearchInputComponent } from './search-input/search-input.component';
+import { OneCollLayoutComponent, BaseHeaderComponent } from './layouts';
 
 const BASE_MODULES = [
   CommonModule,
@@ -29,8 +30,9 @@ const NGA_MODULES = [
   NgaUserModule
 ];
 
-const LAYOUT_COMPONENTS = [
-  OneCollLayoutComponent
+const LAYOUTS = [
+  OneCollLayoutComponent,
+  BaseHeaderComponent
 ];
 
 @NgModule({
@@ -42,11 +44,12 @@ const LAYOUT_COMPONENTS = [
   exports: [
     ...BASE_MODULES,
     ...NGA_MODULES,
-    ...LAYOUT_COMPONENTS,
-    NgaSidebarModule
+    ...LAYOUTS,
+    SearchInputComponent
   ],
   declarations: [
-    ...LAYOUT_COMPONENTS
+    ...LAYOUTS,
+    SearchInputComponent
   ]
 })
 export class ThemeModule {