diff --git a/docs/app/pages/home/banner/banner.component.scss b/docs/app/pages/home/banner/banner.component.scss new file mode 100644 index 00000000..71b31bbc --- /dev/null +++ b/docs/app/pages/home/banner/banner.component.scss @@ -0,0 +1,82 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@import '../../../@theme/styles/themes'; + +:host { + position: fixed; + @include nb-ltr(right, 10px); + @include nb-rtl(left, 10px); + top: 80px; + border-radius: 5px; + background-color: #dc5425; + box-shadow: 0 2px 4px 0 rgba(189, 93, 60, 0.54); + z-index: 99999999; + + .heading-with-icon { + display: flex; + align-items: center; + } + + .icon { + height: auto; + width: 77px; + margin: 0 26px; + } + + .banner-heading { + font-size: 14px; + line-height: 20px; + font-weight: 700; + margin: 0; + color: #ffffff; + } + + .banner-content { + padding-top: 36px; + padding-bottom: 36px; + } + + .close-button { + background: none; + border: none; + cursor: pointer; + margin-bottom: auto; + padding: 10px; + color: #ffffff; + } + + .nb-close { + font-size: 24px; + font-weight: 600; + } + + .cta { + margin: 8px 0 0; + font-size: 14px; + color: #ffffff; + } + + .cta-link { + font-size: 10px; + border-radius: 2px; + display: inline-block; + padding: 4px 16px; + margin: 0 10px; + text-transform: uppercase; + font-weight: 700; + background: #ffffff; + color: #000000; + } + + @media screen and (max-width: 991px) { + top: 20px; + } + + @media screen and (max-width: 767px) { + display: none; + } +} diff --git a/docs/app/pages/home/banner/banner.component.ts b/docs/app/pages/home/banner/banner.component.ts new file mode 100644 index 00000000..80eddab3 --- /dev/null +++ b/docs/app/pages/home/banner/banner.component.ts @@ -0,0 +1,63 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { Component, HostBinding, Inject, OnInit } from '@angular/core'; +import { NB_WINDOW } from '@nebular/theme'; + +const HIDE_BANNER_KEY = 'HIDE_PRODUCT_HUNT_BANNER'; + +@Component({ + selector: 'ngx-release-banner', + template: ` +
+ Product Hunt + + +
+ `, + styleUrls: ['./banner.component.scss'], +}) +export class BannerComponent implements OnInit { + + storage: Storage; + + @HostBinding('attr.hidden') + isHidden: true | null = null; + + @HostBinding('attr.dir') + dir = 'ltr'; + + constructor( + @Inject(NB_WINDOW) private window, + ) {} + + ngOnInit() { + this.storage = this.window.localStorage; + + this.isHidden = this.storage && this.storage.getItem(HIDE_BANNER_KEY) + ? true + : null; + } + + closeBanner() { + if (this.storage) { + this.storage.setItem(HIDE_BANNER_KEY, 'true'); + } + this.isHidden = true; + } +} diff --git a/docs/app/pages/home/landing-home.component.html b/docs/app/pages/home/landing-home.component.html index 64cb1186..4af48655 100644 --- a/docs/app/pages/home/landing-home.component.html +++ b/docs/app/pages/home/landing-home.component.html @@ -5,7 +5,7 @@ - + diff --git a/docs/app/pages/home/landing-home.module.ts b/docs/app/pages/home/landing-home.module.ts index 7072deec..9a181c89 100644 --- a/docs/app/pages/home/landing-home.module.ts +++ b/docs/app/pages/home/landing-home.module.ts @@ -23,7 +23,7 @@ import { ContactSectionComponent } from './contact-section/contact-section.compo import { OurProjectsSectionComponent } from './our-projects-section/our-projects-section.component'; import { LandingHomeRoutingModule } from './landing-home-routing.module'; import { NgxLandingSectionsContainerComponent } from './sections-container/ngx-landing-sections-container.component'; -import { RibbonComponent } from './ribbon/ribbon.component'; +import { BannerComponent } from './banner/banner.component'; // components const COMPONENTS = [ @@ -37,7 +37,7 @@ const COMPONENTS = [ OurProjectsSectionComponent, SocialSectionComponent, ContactSectionComponent, - RibbonComponent, + BannerComponent, ]; @NgModule({ diff --git a/docs/app/pages/home/ribbon/ribbon.component.html b/docs/app/pages/home/ribbon/ribbon.component.html deleted file mode 100644 index ab14ed03..00000000 --- a/docs/app/pages/home/ribbon/ribbon.component.html +++ /dev/null @@ -1,8 +0,0 @@ -
- - - - - - Please, don't hunt me! -
diff --git a/docs/app/pages/home/ribbon/ribbon.component.scss b/docs/app/pages/home/ribbon/ribbon.component.scss deleted file mode 100644 index c0510406..00000000 --- a/docs/app/pages/home/ribbon/ribbon.component.scss +++ /dev/null @@ -1,19 +0,0 @@ -.ribbon-dont-hunt { - display: inline-flex; - justify-content: center; - align-items: center; - font-weight: 700; - font-size: 11px; - text-transform: uppercase; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; - width: 300px; - color: rgb(218, 85, 47); - background: rgb(255, 255, 255); - position: fixed; - text-align: center; - line-height: 40px; - transform: rotate(40deg); - box-shadow: rgba(50, 69, 93, 0.15) 0px 4px 7px 0px, rgba(0, 0, 0, 0.08) 0px -1px 4px 0px; - top: 55px; - right: -60px; -} diff --git a/docs/app/pages/home/ribbon/ribbon.component.ts b/docs/app/pages/home/ribbon/ribbon.component.ts deleted file mode 100644 index 9dd0c51d..00000000 --- a/docs/app/pages/home/ribbon/ribbon.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -/** - * @license - * Copyright Akveo. All Rights Reserved. - * Licensed under the MIT License. See License.txt in the project root for license information. - */ - -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-landing-ribbon', - templateUrl: './ribbon.component.html', - styleUrls: ['./ribbon.component.scss'], -}) -export class RibbonComponent { -} diff --git a/docs/assets/img/product-hunt-cat.png b/docs/assets/img/product-hunt-cat.png new file mode 100644 index 00000000..e06b88c8 Binary files /dev/null and b/docs/assets/img/product-hunt-cat.png differ diff --git a/src/app/@theme/components/banner/_banner.component.theme.scss b/src/app/@theme/components/banner/_banner.component.theme.scss deleted file mode 100644 index a805d720..00000000 --- a/src/app/@theme/components/banner/_banner.component.theme.scss +++ /dev/null @@ -1,26 +0,0 @@ -@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 index 5ff044d8..42ac9245 100644 --- a/src/app/@theme/components/banner/banner.component.scss +++ b/src/app/@theme/components/banner/banner.component.scss @@ -1,32 +1,43 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + @import '../../styles/themes'; :host { position: fixed; @include nb-ltr(right, 1.5rem); @include nb-rtl(left, 1.5rem); - top: 40vh; + top: 20vh; border-radius: 5px; - box-shadow: 0 5px 12px 0 rgba(0, 32, 128, 0.14); + background-color: #dc5425; + box-shadow: 0 2px 4px 0 rgba(189, 93, 60, 0.54); 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; + width: 77px; + margin: 0 26px; } .banner-heading { - font-size: 1.5rem; - line-height: 1.5; - font-weight: 600; - margin: 1.625rem 0; + font-size: 14px; + line-height: 20px; + font-weight: 700; + margin: 0; + color: #ffffff; + } + + .banner-content { + padding-top: 36px; + padding-bottom: 36px; } .close-button { @@ -34,29 +45,34 @@ border: none; cursor: pointer; margin-bottom: auto; - padding: 0.625rem; + padding: 10px; + color: #ffffff; } .nb-close { - font-size: 1.5rem; + font-size: 24px; font-weight: 600; } .cta { - margin: 0; - text-align: center; + margin: 8px 0 0; + font-size: 14px; + color: #ffffff; } .cta-link { - border-radius: 1.8px; + font-size: 10px; + border-radius: 2px; display: inline-block; - padding: 0.5rem 1rem; - margin: 0.725rem 0.8rem; + padding: 4px 16px; + margin: 0 10px; text-transform: uppercase; - font-weight: 600; + font-weight: 700; + background: #ffffff; + color: #000000; } - @media screen and (max-width: 63rem) { + @media screen and (max-width: 767px) { display: none; } } diff --git a/src/app/@theme/components/banner/banner.component.ts b/src/app/@theme/components/banner/banner.component.ts index 6fbc2ac9..41df328f 100644 --- a/src/app/@theme/components/banner/banner.component.ts +++ b/src/app/@theme/components/banner/banner.component.ts @@ -1,36 +1,40 @@ -import { Component, HostBinding, Inject, OnDestroy, OnInit } from '@angular/core'; -import { NB_WINDOW, NbThemeService } from '@nebular/theme'; -import { takeWhile } from 'rxjs/operators'; +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ -const HIDE_BANNER_KEY = 'HIDE_RELEASE_2_BANNER'; +import { Component, HostBinding, Inject, OnInit } from '@angular/core'; +import { NB_WINDOW } from '@nebular/theme'; + +const HIDE_BANNER_KEY = 'HIDE_PRODUCT_HUNT_BANNER'; @Component({ selector: 'ngx-release-banner', template: `
- bell -

Nebular 3.0 stable
with 30+ components is out!

+ Product Hunt +
-

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

`, styleUrls: ['./banner.component.scss'], }) -export class BannerComponent implements OnInit, OnDestroy { +export class BannerComponent implements OnInit { - private alive = true; storage: Storage; - isDarkTheme: boolean; @HostBinding('attr.hidden') isHidden: true | null = null; @@ -40,7 +44,6 @@ export class BannerComponent implements OnInit, OnDestroy { constructor( @Inject(NB_WINDOW) private window, - private themeService: NbThemeService, ) {} ngOnInit() { @@ -49,11 +52,6 @@ export class BannerComponent implements OnInit, OnDestroy { 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() { @@ -62,12 +60,4 @@ export class BannerComponent implements OnInit, OnDestroy { } this.isHidden = true; } - - getBellPath() { - return `assets/images/bell${this.isDarkTheme ? '' : '-white'}.svg`; - } - - ngOnDestroy() { - this.alive = false; - } } diff --git a/src/app/@theme/styles/styles.scss b/src/app/@theme/styles/styles.scss index dac33370..6721bfb0 100644 --- a/src/app/@theme/styles/styles.scss +++ b/src/app/@theme/styles/styles.scss @@ -15,8 +15,6 @@ @import './bootstrap-rtl'; -@import '../components/banner/banner.component.theme'; - // install the framework and custom global styles @include nb-install() { @@ -28,8 +26,6 @@ // 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/assets/images/product-hunt-cat.png b/src/assets/images/product-hunt-cat.png new file mode 100644 index 00000000..e06b88c8 Binary files /dev/null and b/src/assets/images/product-hunt-cat.png differ