feat(popover): add popover showcase (#1556)

akveo · Feb 22, 2018 · f4cdf4a · f4cdf4a
1 parent ddb6306
commit f4cdf4a
Show file tree

Hide file tree

Showing 8 changed files with 269 additions and 0 deletions.
diff --git a/src/app/@theme/theme.module.ts b/src/app/@theme/theme.module.ts
@@ -15,6 +15,7 @@ import {
   NbThemeModule,
   NbUserModule,
   NbCheckboxModule,
+  NbPopoverModule,
   NbContextMenuModule,
 } from '@nebular/theme';
 
@@ -49,6 +50,7 @@ const NB_MODULES = [
   NbSearchModule,
   NbSidebarModule,
   NbCheckboxModule,
+  NbPopoverModule,
   NbContextMenuModule,
   NgbModule,
 ];

diff --git a/src/app/pages/pages-menu.ts b/src/app/pages/pages-menu.ts
@@ -32,6 +32,10 @@ export const MENU_ITEMS: NbMenuItem[] = [
         title: 'Modals',
         link: '/pages/ui-features/modals',
       },
+      {
+        title: 'Popovers',
+        link: '/pages/ui-features/popovers',
+      },
       {
         title: 'Typography',
         link: '/pages/ui-features/typography',

diff --git a/src/app/pages/ui-features/popovers/popover-examples.component.ts b/src/app/pages/ui-features/popovers/popover-examples.component.ts
@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-popover-tabs',
+  template: `
+    <nb-tabset>
+      <nb-tab tabTitle="What's up?">
+        <div class="p-4">
+          Such a wonderful day!
+        </div>
+      </nb-tab>
+      <nb-tab tabTitle="Second Tab">
+        <div class="p-4">
+          Indeed!
+        </div>
+      </nb-tab>
+    </nb-tabset>
+  `,
+})
+export class NgxPopoverTabsComponent {
+}
+
+@Component({
+  selector: 'ngx-popover-form',
+  template: `
+    <div class="p-4">
+      <form>
+        <div class="form-group">
+          <input type="text" class="form-control" placeholder="Recipients">
+        </div>
+        <div class="form-group">
+          <input type="text" class="form-control" placeholder="Subject">
+        </div>
+        <div class="form-group">
+          <textarea class="form-control" placeholder="Message"></textarea>
+        </div>
+        <button type="submit" class="btn btn-primary w-100">Send</button>
+      </form>
+    </div>
+  `,
+})
+export class NgxPopoverFormComponent {
+}
+
+@Component({
+  selector: 'ngx-popover-card',
+  template: `
+    <nb-card class="popover-card">
+      <nb-card-header status="warning">
+        Hello!
+      </nb-card-header>
+      <nb-card-body>
+        Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
+        there live the blind texts.
+        Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
+      </nb-card-body>
+    </nb-card>
+  `,
+})
+export class NgxPopoverCardComponent {
+}
diff --git a/src/app/pages/ui-features/popovers/popovers.component.html b/src/app/pages/ui-features/popovers/popovers.component.html
@@ -0,0 +1,157 @@
+<div class="row">
+  <div class="col-lg-6">
+    <nb-card size="small">
+      <nb-card-header>Popover Position</nb-card-header>
+      <nb-card-body>
+        <p>When popover has not enough space based on the configured placement, it will adjust accordingly trying to fit the screen.</p>
+        <button class="btn btn-danger with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint" nbPopoverPlacement="left">Left</button>
+        <button class="btn btn-danger with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint" nbPopoverPlacement="top">Top</button>
+        <button class="btn btn-danger with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint" nbPopoverPlacement="bottom">Bottom</button>
+        <button class="btn btn-danger with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint" nbPopoverPlacement="right">Right</button>
+      </nb-card-body>
+    </nb-card>
+  </div>
+
+  <div class="col-lg-6">
+    <nb-card size="small">
+      <nb-card-header>Simple Popovers</nb-card-header>
+      <nb-card-body>
+        <p>In a simples form popover can take a string of text to render.</p>
+        <button class="btn btn-success with-margins" nbPopover="Hello, how are you today?">on click</button>
+        <button class="btn btn-success with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hover">on hover</button>
+        <button class="btn btn-success with-margins" nbPopover="Hello, how are you today?" nbPopoverMode="hint">on hint</button>
+      </nb-card-body>
+    </nb-card>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-lg-6">
+
+    <ng-template #tabs>
+      <nb-tabset>
+        <nb-tab tabTitle="What's up?">
+          <div class="p-4">
+            Such a wonderful day!
+          </div>
+        </nb-tab>
+        <nb-tab tabTitle="Second Tab">
+          <div class="p-4">
+            Indeed!
+          </div>
+        </nb-tab>
+      </nb-tabset>
+    </ng-template>
+
+    <ng-template #form>
+      <div class="p-4">
+        <form>
+          <div class="form-group">
+            <input type="text" class="form-control" placeholder="Recipients">
+          </div>
+          <div class="form-group">
+            <input type="text" class="form-control" placeholder="Subject">
+          </div>
+          <div class="form-group">
+            <textarea class="form-control" placeholder="Message"></textarea>
+          </div>
+          <button type="submit" class="btn btn-primary w-100">Send</button>
+        </form>
+      </div>
+    </ng-template>
+
+    <ng-template #card>
+      <nb-card class="popover-card">
+        <nb-card-header status="warning">
+          Hello!
+        </nb-card-header>
+        <nb-card-body>
+          Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
+          Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
+        </nb-card-body>
+      </nb-card>
+    </ng-template>
+
+    <nb-card size="small">
+      <nb-card-header>Template Popovers</nb-card-header>
+      <nb-card-body>
+        <p>You can pass a refference to `ng-template` to be rendered.</p>
+        <button class="btn btn-warning with-margins" [nbPopover]="tabs">With tabs</button>
+        <button class="btn btn-warning with-margins" [nbPopover]="form">With form</button>
+        <button class="btn btn-warning with-margins" [nbPopover]="card">With card</button>
+      </nb-card-body>
+    </nb-card>
+  </div>
+
+  <div class="col-lg-6">
+    <nb-card size="small">
+      <nb-card-header>Component Popovers</nb-card-header>
+      <nb-card-body>
+        <p>Same way popover can render any angular compnoent.</p>
+        <button class="btn btn-warning with-margins" [nbPopover]="tabsComponent">With tabs</button>
+        <button class="btn btn-warning with-margins" [nbPopover]="formComponent">With form</button>
+        <button class="btn btn-warning with-margins" [nbPopover]="cardComponent">With card</button>
+      </nb-card-body>
+    </nb-card>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-md-12">
+    <nb-card>
+      <nb-card-header>Event Debouncing</nb-card-header>
+      <nb-card-body>
+        <p>Quickly move mouse cursor over the buttons, only the last popover will be created. It allows us to avoid excess white improving page performance.</p>
+
+        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+          show hint
+        </button>
+        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+          show hint
+        </button>
+        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+          show hint
+        </button>
+        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+          show hint
+        </button>
+        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+          show hint
+        </button>
+        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+          show hint
+        </button>
+        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+          show hint
+        </button>
+        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+          show hint
+        </button>
+        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+          show hint
+        </button>
+        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+          show hint
+        </button>
+        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+          show hint
+        </button>
+        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+          show hint
+        </button>
+        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+          show hint
+        </button>
+        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+          show hint
+        </button>
+        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+          show hint
+        </button>
+        <button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
+          show hint
+        </button>
+      </nb-card-body>
+    </nb-card>
+  </div>
+</div>
diff --git a/src/app/pages/ui-features/popovers/popovers.component.scss b/src/app/pages/ui-features/popovers/popovers.component.scss
@@ -0,0 +1,13 @@
+button.with-margins {
+  margin: 0 0.75rem 2rem 0;
+}
+
+/deep/ nb-card.popover-card {
+  margin-bottom: 0;
+  width: 300px;
+  box-shadow: none;
+}
+
+:host /deep/ .btn-outline-secondary {
+  margin: 0 0.5rem 0.5rem 0;
+}
diff --git a/src/app/pages/ui-features/popovers/popovers.component.ts b/src/app/pages/ui-features/popovers/popovers.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import {
+  NgxPopoverCardComponent, NgxPopoverFormComponent,
+  NgxPopoverTabsComponent,
+} from './popover-examples.component';
+
+@Component({
+  selector: 'ngx-popovers',
+  styleUrls: ['./popovers.component.scss'],
+  templateUrl: './popovers.component.html',
+})
+export class PopoversComponent {
+  tabsComponent = NgxPopoverTabsComponent;
+  cardComponent = NgxPopoverCardComponent;
+  formComponent = NgxPopoverFormComponent;
+}
diff --git a/src/app/pages/ui-features/ui-features-routing.module.ts b/src/app/pages/ui-features/ui-features-routing.module.ts
@@ -9,6 +9,7 @@ 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';
+import { PopoversComponent } from './popovers/popovers.component';
 
 const routes: Routes = [{
   path: '',
@@ -25,6 +26,9 @@ const routes: Routes = [{
   }, {
     path: 'modals',
     component: ModalsComponent,
+  }, {
+    path: 'popovers',
+    component: PopoversComponent,
   }, {
     path: 'typography',
     component: TypographyComponent,

diff --git a/src/app/pages/ui-features/ui-features.module.ts b/src/app/pages/ui-features/ui-features.module.ts
@@ -11,6 +11,11 @@ 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';
+import { PopoversComponent } from './popovers/popovers.component';
+import {
+  NgxPopoverCardComponent, NgxPopoverFormComponent,
+  NgxPopoverTabsComponent,
+} from './popovers/popover-examples.component';
 
 const components = [
   UiFeaturesComponent,
@@ -23,6 +28,10 @@ const components = [
   Tab1Component,
   Tab2Component,
   SearchComponent,
+  PopoversComponent,
+  NgxPopoverCardComponent,
+  NgxPopoverFormComponent,
+  NgxPopoverTabsComponent,
 ];
 
 @NgModule({
@@ -36,6 +45,9 @@ const components = [
   ],
   entryComponents: [
     ModalComponent,
+    NgxPopoverCardComponent,
+    NgxPopoverFormComponent,
+    NgxPopoverTabsComponent,
   ],
 })
 export class UiFeaturesModule { }