diff --git a/src/app/@theme/components/banner/_banner.component.theme.scss b/src/app/@theme/components/banner/_banner.component.theme.scss new file mode 100644 index 00000000..a805d720 --- /dev/null +++ b/src/app/@theme/components/banner/_banner.component.theme.scss @@ -0,0 +1,26 @@ +@import '../../styles/themes'; + +@mixin ngx-release-banner-component { + ngx-release-banner { + background-color: nb-theme(release-banner-bg); + color: nb-theme(release-banner-fg); + + .heading-with-icon { + border-bottom-color: nb-theme(release-banner-separator); + } + + .banner-heading, + .close-button { + color: nb-theme(release-banner-fg); + } + + .cta { + color: nb-theme(release-banner-cta); + } + + .cta-link { + background: nb-theme(release-banner-fg); + color: nb-theme(release-banner-bg); + } + } +} diff --git a/src/app/@theme/components/banner/banner.component.scss b/src/app/@theme/components/banner/banner.component.scss new file mode 100644 index 00000000..ca7b7a0d --- /dev/null +++ b/src/app/@theme/components/banner/banner.component.scss @@ -0,0 +1,58 @@ +@import '../../styles/themes'; + +:host { + position: fixed; + @include nb-ltr(right, 1.5rem); + @include nb-rtl(left, 1.5rem); + top: 8vh; + border-radius: 5px; + box-shadow: 0 5px 12px 0 rgba(0, 32, 128, 0.14); + z-index: 99999999; + + .heading-with-icon { + border-bottom-width: 1px; + border-bottom-style: solid; + display: flex; + align-items: center; + } + + .icon { + height: auto; + width: 4rem; + margin: 0 1.625rem; + } + + .banner-heading { + font-size: 1.5rem; + line-height: 1.5; + font-weight: 600; + margin: 1.625rem 0; + } + + .close-button { + background: none; + border: none; + cursor: pointer; + margin-bottom: auto; + padding: 0.625rem; + } + + .nb-close { + font-size: 1.5rem; + font-weight: 600; + } + + .cta { + margin: 0; + text-align: center; + } + + .cta-link { + border-radius: 1.8px; + display: inline-block; + padding: 0.5rem 1rem; + margin: 0.725rem 0.8rem; + text-transform: uppercase; + font-weight: 600; + } +} diff --git a/src/app/@theme/components/banner/banner.component.ts b/src/app/@theme/components/banner/banner.component.ts new file mode 100644 index 00000000..790263d9 --- /dev/null +++ b/src/app/@theme/components/banner/banner.component.ts @@ -0,0 +1,67 @@ +import { Component, HostBinding, Inject, OnDestroy, OnInit } from '@angular/core'; +import { NB_WINDOW, NbThemeService } from '@nebular/theme'; +import { takeWhile } from 'rxjs/operators'; + +const HIDE_BANNER_KEY = 'HIDE_RELEASE_2_BANNER'; + +@Component({ + selector: 'ngx-release-banner', + template: ` +
+ bell +

Nebular 2.0 stable
with 30+ components is out!

+ +
+

+ Don't forget to check out and star our repo :) +

+ `, + styleUrls: ['./banner.component.scss'], +}) +export class BannerComponent implements OnInit, OnDestroy { + + private alive = true; + storage: Storage; + isDarkTheme: boolean; + + @HostBinding('attr.hidden') + isHidden: true | null = null; + + @HostBinding('attr.dir') + dir = 'ltr'; + + constructor( + @Inject(NB_WINDOW) private window, + private themeService: NbThemeService, + ) {} + + ngOnInit() { + this.storage = this.window.localStorage; + + this.isHidden = this.storage && this.storage.getItem(HIDE_BANNER_KEY) + ? true + : null; + + this.isDarkTheme = this.themeService.currentTheme === 'cosmic'; + this.themeService.onThemeChange() + .pipe(takeWhile(() => this.alive)) + .subscribe(({ name }) => this.isDarkTheme = name === 'cosmic'); + } + + closeBanner() { + if (this.storage) { + this.storage.setItem(HIDE_BANNER_KEY, 'true'); + } + this.isHidden = true; + } + + getBellPath() { + return `assets/images/bell${this.isDarkTheme ? '' : '-white'}.svg`; + } + + ngOnDestroy() { + this.alive = false; + } +} diff --git a/src/app/@theme/layouts/sample/sample.layout.ts b/src/app/@theme/layouts/sample/sample.layout.ts index 4c334f2a..1fe42c9f 100644 --- a/src/app/@theme/layouts/sample/sample.layout.ts +++ b/src/app/@theme/layouts/sample/sample.layout.ts @@ -19,6 +19,7 @@ import { StateService } from '../../../@core/utils'; + - + `, }) export class SampleLayoutComponent implements OnDestroy { diff --git a/src/app/@theme/styles/styles.scss b/src/app/@theme/styles/styles.scss index 6721bfb0..dac33370 100644 --- a/src/app/@theme/styles/styles.scss +++ b/src/app/@theme/styles/styles.scss @@ -15,6 +15,8 @@ @import './bootstrap-rtl'; +@import '../components/banner/banner.component.theme'; + // install the framework and custom global styles @include nb-install() { @@ -26,6 +28,8 @@ // loading progress bar @include ngx-pace-theme(); + @include ngx-release-banner-component(); + // fixed in rc.9 and can be removed after upgrade .custom-control .custom-control-indicator { border-radius: 50%; // TODO: quickfix for https://github.com/akveo/nebular/issues/275 diff --git a/src/app/@theme/styles/themes.scss b/src/app/@theme/styles/themes.scss index cdbd4dc8..5b8f97cd 100644 --- a/src/app/@theme/styles/themes.scss +++ b/src/app/@theme/styles/themes.scss @@ -34,6 +34,11 @@ $nb-themes: nb-register-theme(( ecommerce-card-border-width: 1px, progress-bar-background: linear-gradient(90deg, #3edd81 0%, #3bddaf 100%), + + release-banner-fg: #ffffff, + release-banner-bg: #3366ff, + release-banner-cta: release-banner-fg, + release-banner-separator: #2454e3, ), default, default); $nb-themes: nb-register-theme(( @@ -64,6 +69,11 @@ $nb-themes: nb-register-theme(( ecommerce-card-border-width: 1px, progress-bar-background: linear-gradient(90deg, #00c7c7 0%, #00d977 100%), + + release-banner-fg: #3366ff, + release-banner-bg: #ffffff, + release-banner-cta: #5d72b3, + release-banner-separator: #ebedf2, ), cosmic, cosmic); $nb-themes: nb-register-theme(( @@ -94,4 +104,9 @@ $nb-themes: nb-register-theme(( ecommerce-card-border-width: 1px, progress-bar-background: linear-gradient(90deg, #ff9f6f 0%, #ff8b97 100%), + + release-banner-fg: #ffffff, + release-banner-bg: #3366ff, + release-banner-cta: release-banner-fg, + release-banner-separator: #2454e3, ), corporate, corporate); diff --git a/src/app/@theme/theme.module.ts b/src/app/@theme/theme.module.ts index 4d967c9e..0671c2d1 100644 --- a/src/app/@theme/theme.module.ts +++ b/src/app/@theme/theme.module.ts @@ -69,6 +69,7 @@ import { import { DEFAULT_THEME } from './styles/theme.default'; import { COSMIC_THEME } from './styles/theme.cosmic'; import { CORPORATE_THEME } from './styles/theme.corporate'; +import { BannerComponent } from 'app/@theme/components/banner/banner.component'; const BASE_MODULES = [CommonModule, FormsModule, ReactiveFormsModule]; @@ -122,6 +123,7 @@ const COMPONENTS = [ SampleLayoutComponent, ThreeColumnsLayoutComponent, TwoColumnsLayoutComponent, + BannerComponent, ToggleSettingsButtonComponent, ]; diff --git a/src/assets/images/bell-white.svg b/src/assets/images/bell-white.svg new file mode 100644 index 00000000..d25d01a5 --- /dev/null +++ b/src/assets/images/bell-white.svg @@ -0,0 +1,28 @@ + + + + 2 + Created with Sketch. + + + + + \ No newline at end of file diff --git a/src/assets/images/bell.svg b/src/assets/images/bell.svg new file mode 100644 index 00000000..d47f1549 --- /dev/null +++ b/src/assets/images/bell.svg @@ -0,0 +1,33 @@ + + + + 1 + Created with Sketch. + + + + + \ No newline at end of file