Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-17 16:00:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(popovers): use Nebular components

Browse source
This commit is contained in:
Sergey Andrievskiy 2019-06-19 22:04:57 +03:00
parent c837664b1c
commit 97e86df69c
3 changed files with 46 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/app/pages/modal-overlays/popovers/popover-examples.component.ts
View file

@ -56,6 +56,12 @@ export class NgxPopoverFormComponent {
</nb-card-body>
</nb-card>
`,
styles: [`
nb-card {
margin: 0;
max-width: 20rem;
}
`],
})
export class NgxPopoverCardComponent {
}

60
src/app/pages/modal-overlays/popovers/popovers.component.html
View file

@ -4,10 +4,10 @@
<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>
<button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="left">Left</button>
<button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="top">Top</button>
<button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="bottom">Bottom</button>
<button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="right">Right</button>
</nb-card-body>
</nb-card>
</div>
@ -17,9 +17,9 @@
<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>
<button nbButton status="success" nbPopover="Hello, how are you today?">on click</button>
<button nbButton status="success" nbPopover="Hello, how are you today?" nbPopoverTrigger="hover">on hover</button>
<button nbButton status="success" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint">on hint</button>
</nb-card-body>
</nb-card>
</div>
@ -76,9 +76,9 @@
<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>
<button nbButton status="warning" [nbPopover]="tabs">With tabs</button>
<button nbButton status="warning" [nbPopover]="form">With form</button>
<button nbButton status="warning" [nbPopover]="card">With card</button>
</nb-card-body>
</nb-card>
</div>
@ -88,9 +88,9 @@
<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>
<button nbButton status="warning" [nbPopover]="tabsComponent">With tabs</button>
<button nbButton status="warning" [nbPopover]="formComponent">With form</button>
<button nbButton status="warning" [nbPopover]="cardComponent">With card</button>
</nb-card-body>
</nb-card>
</div>
@ -100,55 +100,55 @@
<div class="col-md-12">
<nb-card>
<nb-card-header>Event Debouncing</nb-card-header>
<nb-card-body>
<nb-card-body class="debounce-card">
<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">
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint">
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
</nb-card-body>

24
src/app/pages/modal-overlays/popovers/popovers.component.scss
View file

@ -1,19 +1,15 @@
@import '~@nebular/theme/styles/core/mixins';
::ng-deep nb-card.popover-card {
margin-bottom: 0;
width: 300px;
box-shadow: none;
}
nb-card-body {
margin: 0 -0.5rem;
:host {
button.with-margins {
@include nb-ltr(margin, 0 0.75rem 2rem 0);
@include nb-rtl(margin, 0 0 2rem 0.75rem);
}
::ng-deep .btn-outline-secondary {
@include nb-ltr(margin, 0 0.5rem 0.5rem 0);
@include nb-rtl(margin, 0 0 0.5rem 0.5rem);
button,
p {
margin: 0.5rem 0.5rem 0;
}
}
.popover-card {
margin: 0;
max-width: 20rem;
}