feat(search): add animated search-field (#1)

akveo · May 19, 2017 · ea94441 · ea94441
1 parent a3dede3
commit ea94441
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 5 deletions.
diff --git a/src/app/@theme/components/header/header.component.ts b/src/app/@theme/components/header/header.component.ts
@@ -15,7 +15,7 @@ import { NgaThemeService } from '@nga/theme/services/theme.service';
     </div>
 
     <nga-actions size="medium" inverse class="right">
-      <nga-action><ngx-search-input></ngx-search-input></nga-action>
+      <nga-action><nga-search type="rotate-layout"></nga-search></nga-action>
       <nga-action icon="ion-ios-email-outline"></nga-action>
       <nga-action disabled icon="ion-ios-bell-outline"></nga-action>
       <nga-action>

diff --git a/src/app/@theme/theme.module.ts b/src/app/@theme/theme.module.ts
@@ -11,6 +11,7 @@ import {
   NgaMenuModule,
   NgaUserModule,
   NgaActionsModule,
+  NgaSearchModule,
 } from '@nga/theme';
 
 import {
@@ -36,6 +37,7 @@ const NGA_MODULES = [
   NgaMenuModule,
   NgaUserModule,
   NgaActionsModule,
+  NgaSearchModule,
 ];
 
 const COMPONENTS = [

diff --git a/src/app/pages/pages-menu.ts b/src/app/pages/pages-menu.ts
@@ -30,9 +30,13 @@ export const menuItems: List<NgaMenuItem> = List([{
     title: 'Typography',
     link: '/pages/ui-features/typography',
   }, {
-    title: 'Tabs',
-    link: '/pages/ui-features/tabs',
-  }]),
+    title: 'Animated Searches',
+    link: '/pages/ui-features/search-fields',
+  },
+    {
+      title: 'Tabs',
+      link: '/pages/ui-features/tabs',
+    }]),
 }, {
   title: 'Components',
   icon: 'ion ion-ios-gear-outline',

diff --git a/src/app/pages/ui-features/search-fields/search-fields.component.html b/src/app/pages/ui-features/search-fields/search-fields.component.html
@@ -0,0 +1,93 @@
+<div class="row">
+  <div class="col-md-6">
+    <nga-card>
+      <nga-card-header>
+        Simple search
+      </nga-card-header>
+      <nga-card-body>
+        <nga-search type="simple-search" tag="simple-search"></nga-search>
+      </nga-card-body>
+      <nga-card-footer></nga-card-footer>
+    </nga-card>
+  </div>
+  <div class="col-md-6">
+    <nga-card>
+      <nga-card-header>
+        Layout Rotate Search
+      </nga-card-header>
+      <nga-card-body>
+        <nga-search type="rotate-layout" tag="rotate-layout"></nga-search>
+      </nga-card-body>
+      <nga-card-footer></nga-card-footer>
+    </nga-card>
+  </div>
+</div>
+<div class="row">
+  <div class="col-md-6">
+    <nga-card>
+      <nga-card-header>
+        Modal Zoomin Search
+      </nga-card-header>
+      <nga-card-body>
+        <nga-search type="modal-zoomin" tag="modal-zoomin"></nga-search>
+      </nga-card-body>
+      <nga-card-footer></nga-card-footer>
+    </nga-card>
+  </div>
+  <div class="col-md-6">
+    <nga-card>
+      <nga-card-header>
+        Modal Move Search
+      </nga-card-header>
+      <nga-card-body>
+        <nga-search type="modal-move" tag="modal-move"></nga-search>
+      </nga-card-body>
+      <nga-card-footer></nga-card-footer>
+    </nga-card>
+  </div>
+  <div class="col-md-6">
+    <nga-card>
+      <nga-card-header>
+        Modal Drop Search
+      </nga-card-header>
+      <nga-card-body>
+        <nga-search type="modal-drop" tag="modal-drop"></nga-search>
+      </nga-card-body>
+      <nga-card-footer></nga-card-footer>
+    </nga-card>
+  </div>
+  <div class="col-md-6">
+    <nga-card>
+      <nga-card-header>
+        Modal Half Search
+      </nga-card-header>
+      <nga-card-body>
+        <nga-search type="modal-half" tag="modal-half"></nga-search>
+      </nga-card-body>
+      <nga-card-footer></nga-card-footer>
+    </nga-card>
+  </div>
+  <div class="col-md-6">
+    <nga-card>
+      <nga-card-header>
+        Curtain Search
+      </nga-card-header>
+      <nga-card-body>
+        <nga-search type="curtain" tag="curtain"></nga-search>
+      </nga-card-body>
+      <nga-card-footer></nga-card-footer>
+    </nga-card>
+  </div>
+  <div class="col-md-6">
+    <nga-card>
+      <nga-card-header>
+        Column Curtain Search
+      </nga-card-header>
+      <nga-card-body>
+        <nga-search type="column-curtain" tag="column-curtain"></nga-search>
+      </nga-card-body>
+      <nga-card-footer></nga-card-footer>
+    </nga-card>
+  </div>
+</div>
+
diff --git a/src/app/pages/ui-features/search-fields/search-fields.component.ts b/src/app/pages/ui-features/search-fields/search-fields.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'ngx-search-fields',
+    templateUrl: 'search-fields.component.html',
+})
+export class SearchComponent {
+}
diff --git a/src/app/pages/ui-features/ui-features-routing.module.ts b/src/app/pages/ui-features/ui-features-routing.module.ts
@@ -8,6 +8,7 @@ import { IconsComponent } from './icons/icons.component';
 import { ModalsComponent } from './modals/modals.component';
 import { TypographyComponent } from './typography/typography.component';
 import { TabsComponent, Tab1Component, Tab2Component } from './tabs/tabs.component';
+import { SearchComponent } from './search-fields/search-fields.component';
 
 const routes: Routes = [{
   path: '',
@@ -27,6 +28,9 @@ const routes: Routes = [{
   }, {
     path: 'typography',
     component: TypographyComponent,
+  }, {
+    path: 'search-fields',
+    component: SearchComponent,
   }, {
     path: 'tabs',
     component: TabsComponent,

diff --git a/src/app/pages/ui-features/ui-features.module.ts b/src/app/pages/ui-features/ui-features.module.ts
@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { NgaTabsetModule, NgaRouteTabsetModule } from '@nga/theme';
+import { NgaTabsetModule, NgaRouteTabsetModule, NgaSearchModule } from '@nga/theme';
 
 import { SharedModule } from '../../shared.module';
 
@@ -20,6 +20,7 @@ import { LargeButtonsComponent } from './buttons/large/large.component';
 import { ModalComponent } from './modals/modal/modal.component';
 import { TypographyComponent } from './typography/typography.component';
 import { TabsComponent, Tab1Component, Tab2Component } from './tabs/tabs.component';
+import { SearchComponent } from './search-fields/search-fields.component';
 
 const COMPONENTS = [
   UiFeaturesComponent,
@@ -40,6 +41,7 @@ const COMPONENTS = [
   TabsComponent,
   Tab1Component,
   Tab2Component,
+  SearchComponent,
 ];
 
 @NgModule({
@@ -48,6 +50,7 @@ const COMPONENTS = [
     UiFeaturesRoutingModule,
     NgaTabsetModule,
     NgaRouteTabsetModule,
+    NgaSearchModule,
   ],
   declarations: [
     ...COMPONENTS,