Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-18 16:30:13 +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-body>
</nb-card> </nb-card>
`, `,
styles: [`
nb-card {
margin: 0;
max-width: 20rem;
}
`],
}) })
export class NgxPopoverCardComponent { 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-header>Popover Position</nb-card-header>
<nb-card-body> <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> <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 nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="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 nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="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 nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="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="right">Right</button>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>
@ -17,9 +17,9 @@
<nb-card-header>Simple Popovers</nb-card-header> <nb-card-header>Simple Popovers</nb-card-header>
<nb-card-body> <nb-card-body>
<p>In a simples form popover can take a string of text to render.</p> <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 nbButton status="success" 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 nbButton status="success" nbPopover="Hello, how are you today?" nbPopoverTrigger="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?" nbPopoverTrigger="hint">on hint</button>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>
@ -76,9 +76,9 @@
<nb-card-header>Template Popovers</nb-card-header> <nb-card-header>Template Popovers</nb-card-header>
<nb-card-body> <nb-card-body>
<p>You can pass a refference to `ng-template` to be rendered.</p> <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 nbButton status="warning" [nbPopover]="tabs">With tabs</button>
<button class="btn btn-warning with-margins" [nbPopover]="form">With form</button> <button nbButton status="warning" [nbPopover]="form">With form</button>
<button class="btn btn-warning with-margins" [nbPopover]="card">With card</button> <button nbButton status="warning" [nbPopover]="card">With card</button>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>
@ -88,9 +88,9 @@
<nb-card-header>Component Popovers</nb-card-header> <nb-card-header>Component Popovers</nb-card-header>
<nb-card-body> <nb-card-body>
<p>Same way popover can render any angular compnoent.</p> <p>Same way popover can render any angular compnoent.</p>
<button class="btn btn-warning with-margins" [nbPopover]="tabsComponent">With tabs</button> <button nbButton status="warning" [nbPopover]="tabsComponent">With tabs</button>
<button class="btn btn-warning with-margins" [nbPopover]="formComponent">With form</button> <button nbButton status="warning" [nbPopover]="formComponent">With form</button>
<button class="btn btn-warning with-margins" [nbPopover]="cardComponent">With card</button> <button nbButton status="warning" [nbPopover]="cardComponent">With card</button>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>
@ -100,55 +100,55 @@
<div class="col-md-12"> <div class="col-md-12">
<nb-card> <nb-card>
<nb-card-header>Event Debouncing</nb-card-header> <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> <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 show hint
</button> </button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
<button class="btn btn-outline-secondary" nbPopover="Popover!" nbPopoverMode="hint"> <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
show hint show hint
</button> </button>
</nb-card-body> </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'; @import '~@nebular/theme/styles/core/mixins';
::ng-deep nb-card.popover-card { nb-card-body {
margin-bottom: 0; margin: 0 -0.5rem;
width: 300px;
box-shadow: none;
}
:host { button,
button.with-margins { p {
@include nb-ltr(margin, 0 0.75rem 2rem 0); margin: 0.5rem 0.5rem 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);
} }
} }
.popover-card {
margin: 0;
max-width: 20rem;
}