From f4cdf4ab221969c0fbfb92d1e1f3ba381be9ed56 Mon Sep 17 00:00:00 2001 From: Dmitry Nehaychik <4dmitr@gmail.com> Date: Thu, 22 Feb 2018 20:13:23 +0300 Subject: [PATCH] feat(popover): add popover showcase (#1556) --- src/app/@theme/theme.module.ts | 2 + src/app/pages/pages-menu.ts | 4 + .../popovers/popover-examples.component.ts | 61 +++++++ .../popovers/popovers.component.html | 157 ++++++++++++++++++ .../popovers/popovers.component.scss | 13 ++ .../popovers/popovers.component.ts | 16 ++ .../ui-features/ui-features-routing.module.ts | 4 + .../pages/ui-features/ui-features.module.ts | 12 ++ 8 files changed, 269 insertions(+) create mode 100644 src/app/pages/ui-features/popovers/popover-examples.component.ts create mode 100644 src/app/pages/ui-features/popovers/popovers.component.html create mode 100644 src/app/pages/ui-features/popovers/popovers.component.scss create mode 100644 src/app/pages/ui-features/popovers/popovers.component.ts diff --git a/src/app/@theme/theme.module.ts b/src/app/@theme/theme.module.ts index 8d0124bc..e3c8cd53 100644 --- 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 index 1aa0fc98..044c6ea6 100644 --- 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 new file mode 100644 index 00000000..8e4395c7 --- /dev/null +++ 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: ` + + +
+ Such a wonderful day! +
+ + +
+ Indeed! +
+ + + `, +}) +export class NgxPopoverTabsComponent { +} + +@Component({ + selector: 'ngx-popover-form', + template: ` +
+
+
+ +
+
+ +
+
+ +
+ +
+
+ `, +}) +export class NgxPopoverFormComponent { +} + +@Component({ + selector: 'ngx-popover-card', + template: ` + + + Hello! + + + 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. + + + `, +}) +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 new file mode 100644 index 00000000..a5762fc9 --- /dev/null +++ b/src/app/pages/ui-features/popovers/popovers.component.html @@ -0,0 +1,157 @@ +
+
+ + Popover Position + +

When popover has not enough space based on the configured placement, it will adjust accordingly trying to fit the screen.

+ + + + + + +
+ +
+ + Simple Popovers + +

In a simples form popover can take a string of text to render.

+ + + + + +
+
+ +
+
+ + + + +
+ Such a wonderful day! +
+ + +
+ Indeed! +
+ + + + + +
+
+
+ +
+
+ +
+
+ +
+ +
+
+ + + + + + Hello! + + + 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. + + + + + + Template Popovers + +

You can pass a refference to `ng-template` to be rendered.

+ + + + + +
+ +
+ + Component Popovers + +

Same way popover can render any angular compnoent.

+ + + + + +
+
+ +
+
+ + Event Debouncing + +

Quickly move mouse cursor over the buttons, only the last popover will be created. It allows us to avoid excess white improving page performance.

+ + + + + + + + + + + + + + + + + + + +
+
diff --git a/src/app/pages/ui-features/popovers/popovers.component.scss b/src/app/pages/ui-features/popovers/popovers.component.scss new file mode 100644 index 00000000..82ea0cc6 --- /dev/null +++ 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 new file mode 100644 index 00000000..1200c80f --- /dev/null +++ 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 index 6804668c..e4717e0d 100644 --- 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 index 5f337d57..facb28d0 100644 --- 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 { }