From 3f77efdabf9de487af993e7ff5ef1e399eee1c02 Mon Sep 17 00:00:00 2001 From: eugene-sinitsyn Date: Thu, 5 Mar 2020 18:17:17 +0300 Subject: [PATCH] Add ripple effects to controls across application --- .../components/header/header.component.html | 54 +++++- .../components/header/header.component.scss | 4 +- src/app/@theme/styles/material/_ripple.scss | 4 + src/app/@theme/styles/themes.scss | 12 +- .../contacts/contacts.component.html | 23 +++ .../electricity/electricity.component.html | 47 ++++++ .../security-cameras.component.html | 61 +++++++ .../security-cameras.component.scss | 7 + .../status-card/status-card.component.scss | 1 + .../temperature-dragger.component.html | 47 ++++++ .../temperature-dragger.component.scss | 65 ++++++++ .../temperature/temperature.component.html | 8 +- .../dashboard/traffic/traffic.component.ts | 51 ++++++ .../chart-panel-header.component.html | 7 + .../chart-panel-header.component.scss | 25 +++ .../earning-card-front.component.html | 23 +++ .../traffic-cards-header.component.html | 6 + .../user-activity.component.html | 33 ++++ .../spinner-in-buttons.component.html | 39 +++++ .../forms/buttons/buttons.component.html | 123 ++++++++++++++ .../forms/buttons/buttons.component.scss | 25 +++ .../form-inputs/form-inputs.component.html | 87 ++++++++++ .../layout/accordion/accordion.component.html | 82 +++++++++ .../layout/stepper/stepper.component.html | 143 ++++++++++++++++ .../not-found/not-found.component.html | 15 ++ .../dialog-name-prompt.component.html | 10 ++ .../dialog/dialog.component.html | 70 ++++++++ .../showcase-dialog.component.html | 14 ++ .../popovers/popover-examples.component.ts | 67 ++++++++ .../popovers/popovers.component.html | 157 ++++++++++++++++++ .../toastr/toastr.component.html | 59 +++++++ .../tooltip/tooltip.component.html | 37 +++++ .../window/window.component.html | 31 ++++ .../search-fields.component.html | 122 ++++++++++++++ 34 files changed, 1538 insertions(+), 21 deletions(-) create mode 100644 src/app/pages/dashboard/contacts/contacts.component.html create mode 100644 src/app/pages/dashboard/electricity/electricity.component.html create mode 100644 src/app/pages/dashboard/security-cameras/security-cameras.component.html create mode 100644 src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html create mode 100644 src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss create mode 100644 src/app/pages/dashboard/traffic/traffic.component.ts create mode 100644 src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.html create mode 100644 src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss create mode 100644 src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.html create mode 100644 src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html create mode 100644 src/app/pages/e-commerce/user-activity/user-activity.component.html create mode 100644 src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.html create mode 100644 src/app/pages/forms/buttons/buttons.component.html create mode 100644 src/app/pages/forms/buttons/buttons.component.scss create mode 100644 src/app/pages/forms/form-inputs/form-inputs.component.html create mode 100644 src/app/pages/layout/accordion/accordion.component.html create mode 100644 src/app/pages/layout/stepper/stepper.component.html create mode 100644 src/app/pages/miscellaneous/not-found/not-found.component.html create mode 100644 src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.html create mode 100644 src/app/pages/modal-overlays/dialog/dialog.component.html create mode 100644 src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.html create mode 100644 src/app/pages/modal-overlays/popovers/popover-examples.component.ts create mode 100644 src/app/pages/modal-overlays/popovers/popovers.component.html create mode 100644 src/app/pages/modal-overlays/toastr/toastr.component.html create mode 100644 src/app/pages/modal-overlays/tooltip/tooltip.component.html create mode 100644 src/app/pages/modal-overlays/window/window.component.html create mode 100644 src/app/pages/ui-features/search-fields/search-fields.component.html diff --git a/src/app/@theme/components/header/header.component.html b/src/app/@theme/components/header/header.component.html index 5ad5fcc4..759c4c88 100644 --- a/src/app/@theme/components/header/header.component.html +++ b/src/app/@theme/components/header/header.component.html @@ -1,12 +1,28 @@
- +
- - {{ theme.name }} + + {{ theme.name }}
@@ -14,12 +30,32 @@
- - - - - - + + + + + + + + + + + + + + + + + + + + {{ c.time | date: 'shortTime' }} + + + + + + diff --git a/src/app/pages/dashboard/electricity/electricity.component.html b/src/app/pages/dashboard/electricity/electricity.component.html new file mode 100644 index 00000000..c68ede53 --- /dev/null +++ b/src/app/pages/dashboard/electricity/electricity.component.html @@ -0,0 +1,47 @@ + + + + Electricity Consumption + + + + + + + {{ month.month }} + + + + {{ month.delta }} + + + {{ month.kWatts }} kWh / {{ month.cost }} USD + + + + + + + + + + + Consumed + 816 kWh + + + Spent + 291 USD + + + + {{ t }} + + + + + + diff --git a/src/app/pages/dashboard/security-cameras/security-cameras.component.html b/src/app/pages/dashboard/security-cameras/security-cameras.component.html new file mode 100644 index 00000000..70d7b445 --- /dev/null +++ b/src/app/pages/dashboard/security-cameras/security-cameras.component.html @@ -0,0 +1,61 @@ + + + + Security Cameras + + + + + +
+ +
+
+ {{ selectedCamera.title }} +
+
+ +
+
+ {{ camera.title }} +
+
+ +
+ + + + + + Pause + + + + Logs + + + + Search + + + + Setup + + + + diff --git a/src/app/pages/dashboard/security-cameras/security-cameras.component.scss b/src/app/pages/dashboard/security-cameras/security-cameras.component.scss index f62f667f..a327a866 100644 --- a/src/app/pages/dashboard/security-cameras/security-cameras.component.scss +++ b/src/app/pages/dashboard/security-cameras/security-cameras.component.scss @@ -72,6 +72,10 @@ background-size: cover; position: relative; + &:not(.single) { + cursor: pointer; + } + &::before { background-color: rgba(255, 255, 255, 0.1); content: ''; @@ -96,6 +100,9 @@ } nb-action { + cursor: pointer; + border-radius: 2px; + nb-icon { @include nb-ltr(margin-right, 0.5rem); @include nb-rtl(margin-left, 0.5rem); diff --git a/src/app/pages/dashboard/status-card/status-card.component.scss b/src/app/pages/dashboard/status-card/status-card.component.scss index 261f13cf..158df84b 100644 --- a/src/app/pages/dashboard/status-card/status-card.component.scss +++ b/src/app/pages/dashboard/status-card/status-card.component.scss @@ -5,6 +5,7 @@ flex-direction: row; align-items: center; height: 6rem; + cursor: pointer; .icon-container { height: 100%; diff --git a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html new file mode 100644 index 00000000..826b87b9 --- /dev/null +++ b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html @@ -0,0 +1,47 @@ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ + diff --git a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss new file mode 100644 index 00000000..2a911576 --- /dev/null +++ b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss @@ -0,0 +1,65 @@ +@import '../../../../@theme/styles/themes'; + +@include nb-install-component() { + position: relative; + + img { + width: 100%; + height: auto; + visibility: hidden; + } + + .svg-container { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 2; + } + + .temperature-bg { + position: absolute; + width: 88%; + height: 88%; + top: 13%; + left: 6%; + border-radius: 50%; + z-index: 1; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color); + } + + .power-bg { + position: absolute; + width: 5.25rem; + height: 5.25rem; + background-color: nb-theme(card-background-color) !important; + border-radius: 50%; + bottom: 2%; + left: 50%; + transform: translate(-50%, 50%); + z-index: 2; + + cursor: pointer; + border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color); + + &.on { + color: nb-theme(color-primary-default); + } + } + + .power-icon { + position: absolute; + top: 50%; + margin-top: -0.625rem; + left: 50%; + margin-left: -0.625rem; + font-size: 3rem; + } +} diff --git a/src/app/pages/dashboard/temperature/temperature.component.html b/src/app/pages/dashboard/temperature/temperature.component.html index 9f6c4345..a7da27bb 100644 --- a/src/app/pages/dashboard/temperature/temperature.component.html +++ b/src/app/pages/dashboard/temperature/temperature.component.html @@ -51,16 +51,16 @@
- + - + - + - + diff --git a/src/app/pages/dashboard/traffic/traffic.component.ts b/src/app/pages/dashboard/traffic/traffic.component.ts new file mode 100644 index 00000000..a0396689 --- /dev/null +++ b/src/app/pages/dashboard/traffic/traffic.component.ts @@ -0,0 +1,51 @@ +import { Component, OnDestroy } from '@angular/core'; +import { NbThemeService } from '@nebular/theme'; +import { takeWhile } from 'rxjs/operators'; + +import { TrafficChartData } from '../../../@core/data/traffic-chart'; + +@Component({ + selector: 'ngx-traffic', + styleUrls: ['./traffic.component.scss'], + template: ` + + + Traffic Consumption + + + {{ t }} + + + + + + `, +}) +export class TrafficComponent implements OnDestroy { + + private alive = true; + + trafficChartPoints: number[]; + type = 'month'; + types = ['week', 'month', 'year']; + currentTheme: string; + + constructor(private themeService: NbThemeService, + private trafficChartService: TrafficChartData) { + this.themeService.getJsTheme() + .pipe(takeWhile(() => this.alive)) + .subscribe(theme => { + this.currentTheme = theme.name; + }); + + this.trafficChartService.getTrafficChartData() + .pipe(takeWhile(() => this.alive)) + .subscribe((data) => { + this.trafficChartPoints = data; + }); + } + + ngOnDestroy() { + this.alive = false; + } +} diff --git a/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.html b/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.html new file mode 100644 index 00000000..f2ba91aa --- /dev/null +++ b/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.html @@ -0,0 +1,7 @@ + + + + + {{ period }} + + diff --git a/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss b/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss new file mode 100644 index 00000000..51b123bb --- /dev/null +++ b/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss @@ -0,0 +1,25 @@ +@import '../../../../@theme/styles/themes'; +@import '~bootstrap/scss/mixins/breakpoints'; +@import '~@nebular/theme/styles/global/breakpoints'; + +@include nb-install-component() { + padding: 1.5rem 4.5rem; + display: flex; + flex-wrap: wrap; + align-items: center; + margin: -1rem; + + ngx-legend-chart, + .period-select { + margin-top: 1rem; + @include nb-ltr(margin-left, 0.5rem); + @include nb-rtl(margin-right, 0.5rem); + } + + @include media-breakpoint-up(md) { + .period-select { + @include nb-ltr(margin-left, auto); + @include nb-rtl(margin-right, auto); + } + } +} diff --git a/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.html b/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.html new file mode 100644 index 00000000..abaa6784 --- /dev/null +++ b/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.html @@ -0,0 +1,23 @@ + + + {{ currency }} + + + +
+
Daily Income
+
{{ earningLiveUpdateCardData.dailyIncome | ngxNumberWithCommas }}
+
+ + + {{ earningLiveUpdateCardData.delta.value }}% +
+
+ + + diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html b/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html new file mode 100644 index 00000000..9ee7a987 --- /dev/null +++ b/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html @@ -0,0 +1,6 @@ + + Traffic + + {{ period }} + + diff --git a/src/app/pages/e-commerce/user-activity/user-activity.component.html b/src/app/pages/e-commerce/user-activity/user-activity.component.html new file mode 100644 index 00000000..46ba0524 --- /dev/null +++ b/src/app/pages/e-commerce/user-activity/user-activity.component.html @@ -0,0 +1,33 @@ + + + + User Activity + + {{ t }} + + + + + + +
+ {{ item.date }} +
+ +
+
Pages Visit
+
{{ item.pagesVisitCount }}
+
+ +
+
New visits, %
+
+ + {{ item.newVisits }}% +
+
+ + + + + diff --git a/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.html b/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.html new file mode 100644 index 00000000..e547a3ea --- /dev/null +++ b/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.html @@ -0,0 +1,39 @@ + + Button With Spinner + +
+
+ + + + + +
+
+ + + + + +
+
+ + diff --git a/src/app/pages/forms/buttons/buttons.component.html b/src/app/pages/forms/buttons/buttons.component.html new file mode 100644 index 00000000..9ad1b934 --- /dev/null +++ b/src/app/pages/forms/buttons/buttons.component.html @@ -0,0 +1,123 @@ +
+
+ + Hero Buttons + +
+ + +
+ + + + + Default Buttons + +
+ + +
+ + + + + Outline Buttons + +
+ + +
+ + + + + Ghost Buttons + +
+ + +
+ + +
+ +
+ + Button shapes + +
+ +
+ + + + + Button sizes + +
+ +
+ + +
+ +
+ + Action Groups + + + + + + + + + + + + + + + + + + + Pause + + + + Logs + + + + Search + + + + Setup + + + + +
+
diff --git a/src/app/pages/forms/buttons/buttons.component.scss b/src/app/pages/forms/buttons/buttons.component.scss new file mode 100644 index 00000000..19176e49 --- /dev/null +++ b/src/app/pages/forms/buttons/buttons.component.scss @@ -0,0 +1,25 @@ +@import '../../../@theme/styles/themes'; + +@include nb-install-component() { + .buttons-row { + margin: -0.5rem; + } + + button[nbButton] { + margin: 0.5rem; + } + + .action-icon { + @include nb-ltr(margin-right, 0.5rem); + @include nb-rtl(margin-left, 0.5rem); + } + + .actions-card { + height: 8rem; + } + + nb-action { + border-radius: 2px; + cursor: pointer; + } +} diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.html b/src/app/pages/forms/form-inputs/form-inputs.component.html new file mode 100644 index 00000000..7bb23392 --- /dev/null +++ b/src/app/pages/forms/form-inputs/form-inputs.component.html @@ -0,0 +1,87 @@ +
+
+ + Default Inputs + + +
+ + +
+ + + + + + + + + + + +
+ +
+ + + Select + + + Option 1 + Option 2 + + + + + + Validation States + + + + + + +
+ Success Checkbox + Warning Checkbox + Danger Checkbox +
+ + + + + Checkboxes & Radios + +
+ Checkbox 1 + Checkbox 2 +
+
+ + + Radio 1 + + + Radio 2 + + + Radio 3 + + +
+
+ Disabled Checkbox + + + Disabled Radio + + +
+ + +
+
diff --git a/src/app/pages/layout/accordion/accordion.component.html b/src/app/pages/layout/accordion/accordion.component.html new file mode 100644 index 00000000..1b5240bf --- /dev/null +++ b/src/app/pages/layout/accordion/accordion.component.html @@ -0,0 +1,82 @@ +
+
+ + Toggle Accordion By Button + + + + + + + + + Product Details + + + A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. + Originally, nebula was a name for any diffuse astronomical object, + including galaxies beyond the Milky Way. + + + + + + Reviews + + + A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. + Originally, nebula was a name for any diffuse astronomical object, + including galaxies beyond the Milky Way. + + + + + + Edit + + + A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. + Originally, nebula was a name for any diffuse astronomical object, + including galaxies beyond the Milky Way. + + + +
+ +
+ + + + Product Details + + + A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. + Originally, nebula was a name for any diffuse astronomical object, + including galaxies beyond the Milky Way. + + + + + + Reviews + + + A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. + Originally, nebula was a name for any diffuse astronomical object, + including galaxies beyond the Milky Way. + + + + + + Edit + + + A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases. + Originally, nebula was a name for any diffuse astronomical object, + including galaxies beyond the Milky Way. + + + +
+
diff --git a/src/app/pages/layout/stepper/stepper.component.html b/src/app/pages/layout/stepper/stepper.component.html new file mode 100644 index 00000000..e6c220cc --- /dev/null +++ b/src/app/pages/layout/stepper/stepper.component.html @@ -0,0 +1,143 @@ + + + + + First step +

Step content #1

+ + + + + Second step +

Step content #2

+ + + + +

Step content #3

+ + + + + Fourth step +

Step content #4

+ + + + + + + +
+
+ + + + +
+

+ Lorizzle ipsum dolizzle stuff fizzle, consectetuer adipiscing break it down. Nullizzle sapien velizzle, + my shizz pimpin', shizzle my nizzle crocodizzle shut the shizzle up, gravida vizzle, dang. +

+
+ +
+ +
+ + +
+

+ Pellentesque we gonna chung tortor. + Sizzle pizzle. Fizzle izzle dolor dapibus fo shizzle mah nizzle fo rizzle, mah home g-dizzle tempus tempor. + Maurizzle cool nibh owned turpizzle. My shizz fo shizzle tortor. +

+
+ +
+ + +
+ + +
+

+ Things boom shackalack rhoncus yo. In fo shizzle my nizzle gangsta platea dictumst. Check it out pot. +

+
+ +
+ + +
+ + +
+

Wizard completed!

+ +
+ + + + +
+ +
+ + + + +

Step content #1

+

+ Proin varius accumsan semper. Praesent consequat tincidunt sagittis. Curabitur egestas sem a ipsum bibendum, + sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis + viverra ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus turpis, commodo vel + placerat quis, lobortis in ligula. +

+ + + + +

Step content #2

+

+ Curabitur luctus mattis risus nec condimentum. Donec at dui turpis. Sed vehicula fringilla rutrum. Nullam + sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui + eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum. +

+ + + + +

Step content #3

+

+ Proin varius accumsan semper. Praesent consequat tincidunt sagittis. Curabitur egestas sem a ipsum bibendum, + sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis + viverra ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus turpis, commodo vel + placerat quis, lobortis in ligula. +

+

+ Curabitur luctus mattis risus nec condimentum. Donec at dui turpis. Sed vehicula fringilla rutrum. Nullam + sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui + eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum. +

+ + + + +

Step content #4

+

+ Proin varius accumsan semper. Praesent consequat tincidunt sagittis. Curabitur egestas sem a ipsum bibendum, + sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis + viverra ex. +

+ + + + + + +
+
diff --git a/src/app/pages/miscellaneous/not-found/not-found.component.html b/src/app/pages/miscellaneous/not-found/not-found.component.html new file mode 100644 index 00000000..df0284ad --- /dev/null +++ b/src/app/pages/miscellaneous/not-found/not-found.component.html @@ -0,0 +1,15 @@ +
+
+ + +
+

404 Page Not Found

+ The page you were looking for doesn't exist + +
+ + +
+
diff --git a/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.html b/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.html new file mode 100644 index 00000000..a4202be3 --- /dev/null +++ b/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.html @@ -0,0 +1,10 @@ + + Enter your name + + + + + + + + diff --git a/src/app/pages/modal-overlays/dialog/dialog.component.html b/src/app/pages/modal-overlays/dialog/dialog.component.html new file mode 100644 index 00000000..a017869e --- /dev/null +++ b/src/app/pages/modal-overlays/dialog/dialog.component.html @@ -0,0 +1,70 @@ +
+
+ + Open Dialog + + + + + + +
+ +
+ + Open Without Backdrop + + + + + + +
+ +
+ + Open Without Esc Close + + + + + + +
+ +
+ + Open Without Backdrop Click + + + + + + +
+ +
+ + Return Result From Dialog + + +
+

Names:

+
    +
  • {{ name }}
    • +
+ + +
+
+ + + + Template Dialog + {{ data }} + + + + + + diff --git a/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.html b/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.html new file mode 100644 index 00000000..1e82a3b4 --- /dev/null +++ b/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.html @@ -0,0 +1,14 @@ + + {{ title }} + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis tincidunt tincidunt. + Vestibulum vulputate maximus massa vel tristique. Suspendisse potenti. Duis aliquet purus sed dictum dictum. + Donec fringilla, purus at fermentum imperdiet, velit enim malesuada turpis, quis luctus arcu arcu nec orci. + Duis eu mattis felis. Quisque sollicitudin elementum nunc vel tincidunt. Vestibulum egestas mi nec + iaculis varius. Morbi in risus sed sapien ultricies feugiat. Quisque pulvinar mattis purus, + in aliquet massa aliquet et. + + + + + diff --git a/src/app/pages/modal-overlays/popovers/popover-examples.component.ts b/src/app/pages/modal-overlays/popovers/popover-examples.component.ts new file mode 100644 index 00000000..000d50bc --- /dev/null +++ b/src/app/pages/modal-overlays/popovers/popover-examples.component.ts @@ -0,0 +1,67 @@ +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. + + + `, + styles: [` + nb-card { + margin: 0; + max-width: 20rem; + } + `], +}) +export class NgxPopoverCardComponent { +} diff --git a/src/app/pages/modal-overlays/popovers/popovers.component.html b/src/app/pages/modal-overlays/popovers/popovers.component.html new file mode 100644 index 00000000..4d7465ba --- /dev/null +++ b/src/app/pages/modal-overlays/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/modal-overlays/toastr/toastr.component.html b/src/app/pages/modal-overlays/toastr/toastr.component.html new file mode 100644 index 00000000..f9204833 --- /dev/null +++ b/src/app/pages/modal-overlays/toastr/toastr.component.html @@ -0,0 +1,59 @@ + + + Toaster configuration + + + +
+
+
+ + + {{ p }} + +
+ +
+ + +
+ +
+
+ + +
+
+ +
+ + +
+
+ +
+
+ + + {{ t }} + +
+ +
+ Hide on click +
+
+ Prevent arising of duplicate toast +
+
+ Show toast with icon +
+
+
+ + + + + + + diff --git a/src/app/pages/modal-overlays/tooltip/tooltip.component.html b/src/app/pages/modal-overlays/tooltip/tooltip.component.html new file mode 100644 index 00000000..a5113a5f --- /dev/null +++ b/src/app/pages/modal-overlays/tooltip/tooltip.component.html @@ -0,0 +1,37 @@ +
+
+ + Tooltip With Icon + + + + + +
+ +
+ + Tooltip Placements + + + + + + + +
+ +
+ + Colored Tooltips + + + + + + + + + +
+
diff --git a/src/app/pages/modal-overlays/window/window.component.html b/src/app/pages/modal-overlays/window/window.component.html new file mode 100644 index 00000000..a6fb387b --- /dev/null +++ b/src/app/pages/modal-overlays/window/window.component.html @@ -0,0 +1,31 @@ +
+
+ + Window Form + + + + + + +
+ +
+ + Window Without Backdrop + + + + + + +
+
+ + +

Here is the text provided via config: "{{ data.text }}"

+ + + + Disabled close on escape click. + diff --git a/src/app/pages/ui-features/search-fields/search-fields.component.html b/src/app/pages/ui-features/search-fields/search-fields.component.html new file mode 100644 index 00000000..138d1694 --- /dev/null +++ b/src/app/pages/ui-features/search-fields/search-fields.component.html @@ -0,0 +1,122 @@ +
+
+ + + Layout Rotate Search + + + + + +
+
+ + + Modal Zoomin Search + + + + + +
+
+ + + Modal Move Search + + + + + +
+
+ + + Modal Drop Search + + + + + +
+
+ + + Modal Half Search + + + + + +
+
+ + + Curtain Search + + + + + +
+
+ + + Column Curtain Search + + + + + +
+
+