From b641d30bd0d132aebcb62750f0b70ab9256dec92 Mon Sep 17 00:00:00 2001 From: Dmitry Nehaychik <4dmitr@gmail.com> Date: Mon, 19 Feb 2018 20:03:52 +0300 Subject: [PATCH 1/2] feat(popover): add popover showcase Closes #1542 --- src/app/@theme/theme.module.ts | 2 + src/app/pages/pages-menu.ts | 4 + .../popovers/popover-examples.component.ts | 61 ++++++++ .../popovers/popovers.component.html | 143 ++++++++++++++++++ .../popovers/popovers.component.scss | 13 ++ .../popovers/popovers.component.ts | 13 ++ .../ui-features/ui-features-routing.module.ts | 4 + .../pages/ui-features/ui-features.module.ts | 12 ++ 8 files changed, 252 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 8d0124bca9..e3c8cd5319 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 1aa0fc98df..044c6ea618 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 0000000000..8e4395c7b0 --- /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 0000000000..21e192db61 --- /dev/null +++ b/src/app/pages/ui-features/popovers/popovers.component.html @@ -0,0 +1,143 @@ +
+
+ + 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.

+ + + + + +
+
+ +
+
+ + 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 0000000000..82ea0cc667 --- /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 0000000000..f04df2b69b --- /dev/null +++ b/src/app/pages/ui-features/popovers/popovers.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; +import { NgxPopoverCardComponent, 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 = NgxPopoverCardComponent; +} 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 6804668c7f..e4717e0dd5 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 5f337d574f..facb28d004 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 { } From e65f1d87e5c62b444f842f94ff07385eff230998 Mon Sep 17 00:00:00 2001 From: Dmitry Nehaychik <4dmitr@gmail.com> Date: Tue, 20 Feb 2018 18:17:25 +0300 Subject: [PATCH 2/2] feat(popover): component popover demo --- .../popovers/popovers.component.html | 26 ++++++++++++++----- .../popovers/popovers.component.ts | 7 +++-- 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/src/app/pages/ui-features/popovers/popovers.component.html b/src/app/pages/ui-features/popovers/popovers.component.html index 21e192db61..a5762fc905 100644 --- a/src/app/pages/ui-features/popovers/popovers.component.html +++ b/src/app/pages/ui-features/popovers/popovers.component.html @@ -1,6 +1,6 @@
-
- +
+ Popover Position

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

@@ -12,8 +12,8 @@
-
- +
+ Simple Popovers

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

@@ -23,8 +23,10 @@
+
-
+
+
@@ -70,7 +72,7 @@ - + Template Popovers

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

@@ -80,6 +82,18 @@
+ +
+ + Component Popovers + +

Same way popover can render any angular compnoent.

+ + + + + +
diff --git a/src/app/pages/ui-features/popovers/popovers.component.ts b/src/app/pages/ui-features/popovers/popovers.component.ts index f04df2b69b..1200c80feb 100644 --- a/src/app/pages/ui-features/popovers/popovers.component.ts +++ b/src/app/pages/ui-features/popovers/popovers.component.ts @@ -1,5 +1,8 @@ import { Component } from '@angular/core'; -import { NgxPopoverCardComponent, NgxPopoverTabsComponent } from './popover-examples.component'; +import { + NgxPopoverCardComponent, NgxPopoverFormComponent, + NgxPopoverTabsComponent, +} from './popover-examples.component'; @Component({ selector: 'ngx-popovers', @@ -9,5 +12,5 @@ import { NgxPopoverCardComponent, NgxPopoverTabsComponent } from './popover-exam export class PopoversComponent { tabsComponent = NgxPopoverTabsComponent; cardComponent = NgxPopoverCardComponent; - formComponent = NgxPopoverCardComponent; + formComponent = NgxPopoverFormComponent; }