mirror/eva-icons
1
0
Fork 0
mirror of https://github.com/akveo/eva-icons.git synced 2025-09-03 10:53:08 +02:00
Code Issues Releases Wiki Activity

feat(banner): add banner (#39)

Browse Source
This commit is contained in:
Denis Strigo
2018-11-29 17:29:58 +03:00
committed by GitHub
parent 4c51d667ac
commit c820ff162e
9 changed files with 235 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/app/@theme/components/banner/_banner.component.theme.scss Normal file
View File

@@ -0,0 +1,32 @@
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
@import '../../styles/themes';
@mixin ngx-release-banner-component {
eva-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);
}
}
}

69
src/app/@theme/components/banner/banner.component.scss Normal file
View File

@@ -0,0 +1,69 @@
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
@import '../../styles/themes';
@include nb-install-component() {
font-size: nb-theme(font-size-sm);
position: fixed;
@include nb-ltr(right, 1.25rem);
@include nb-rtl(left, 1.25rem);
top: 40vh;
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: 3.75rem;
margin: 0 1.35rem;
}
.banner-heading {
font-size: 1.25rem;
line-height: 1.5;
font-weight: 600;
margin: 1.35rem 0;
}
.close-button {
background: none;
border: none;
cursor: pointer;
margin-bottom: auto;
padding: 0.35rem;
}
.nb-close {
font-size: 1.25rem;
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;
}
@media screen and (max-width: 63rem) {
display: none;
}
}

61
src/app/@theme/components/banner/banner.component.ts Normal file
View File

@@ -0,0 +1,61 @@
/**
* @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_RELEASE_2_BANNER';
@Component({
selector: 'eva-release-banner',
template: `
<div class="heading-with-icon">
<img class="icon" src="assets/img/bell-white.svg" alt="bell">
<h1 class="banner-heading">Nebular 3.0 stable <br> with 30+ components is out!</h1>
<button class="close-button" aria-label="close" (click)="closeBanner()">
<i [innerHTML]="'close' | eva: { width: 24, height: 24, fill: '#ffffff' }"></i>
</button>
</div>
<p class="cta">
Don't forget to <a class="cta-link"
href="https://akveo.github.io/nebular?utm_source=eva-icons&utm_medium=banner_link">
check out</a> and star our repo :)
</p>
`,
styleUrls: ['./banner.component.scss'],
})
export class BannerComponent implements OnInit {
storage: Storage;
@HostBinding('attr.hidden')
isHidden: boolean | null = null;
@HostBinding('attr.dir')
dir = 'ltr';
constructor(@Inject(NB_WINDOW) private window) {
}
ngOnInit() {
this.storage = this.window.localStorage;
this.isHidden = this.isBannerKeyInLocalStorage();
}
isBannerKeyInLocalStorage(): boolean | null {
return this.storage && this.storage.getItem(HIDE_BANNER_KEY)
? true
: null;
}
closeBanner() {
if (this.storage) {
this.storage.setItem(HIDE_BANNER_KEY, 'true');
}
this.isHidden = true;
}
}

4
src/app/@theme/styles/styles.scss
View File

@@ -10,7 +10,11 @@
@import '~@nebular/theme/styles/globals';
@import '~@nebular/bootstrap/styles/globals';
@import '../components/banner/banner.component.theme';
@include nb-install() {
@include nb-theme-global();
@include nb-bootstrap-global();
@include ngx-release-banner-component();
};

4
src/app/@theme/styles/themes.scss
View File

@@ -76,4 +76,8 @@ $nb-themes: nb-register-theme((
custiom-radius: 0.625rem,
release-banner-fg: #ffffff,
release-banner-bg: #3366ff,
release-banner-cta: release-banner-fg,
release-banner-separator: #2454e3,
), eva, corporate);

3
src/app/@theme/theme.module.ts
View File

@@ -16,6 +16,7 @@ import { PageContainerComponent } from './components/page-container/page-contain
import { IconListComponent } from './components/icon-list/icon-list.component';
import { TypeSwitcherComponent } from './components/type-switcher/type-switcher.component';
import { AnimationSwitcherComponent } from './components/animation-switcher/animation-switcher.component';
import { BannerComponent } from './components/banner/banner.component';
// components
// services
@@ -46,6 +47,7 @@ const COMPONENTS = [
IconListComponent,
TypeSwitcherComponent,
AnimationSwitcherComponent,
BannerComponent,
];
const PIPES = [
@@ -87,6 +89,7 @@ const PIPES = [
HeaderComponent,
PageContainerComponent,
IconListComponent,
BannerComponent,
...PIPES,
],

1
src/app/app.component.html
View File

@@ -11,3 +11,4 @@
<eva-footer></eva-footer>
</nb-layout-footer>
</nb-layout>
<eva-release-banner></eva-release-banner>

28
src/assets/img/bell-white.svg Normal file
View File

@@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="46px" height="41px" viewBox="0 0 46 41" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
<title>2</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Homepage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Banner-Blue" transform="translate(-36.000000, -35.000000)" fill-rule="nonzero">
<g id="2" transform="translate(36.000000, 35.000000)">
<g id="Page-1" transform="translate(11.500000, 0.000000)" fill="#728BB7">
<path d="M0.818882143,0.254015675 L1.31584643,1.29279656" id="Fill-23"></path>
</g>
<g id="Page-1" fill="#FFFFFF">
<path d="M25.9279,7.70327639 C24.0952381,7.63259259 21.9047619,7.63259259 20.0251143,7.70327639 C20.0251143,6.06937777 21.3467929,4.74579642 22.9765071,4.74579642 C24.6062214,4.74579642 25.9279,6.06937777 25.9279,7.70327639 Z" id="Fill-1"></path>
<path d="M26.2857143,37.6177778 C26.2857143,39.3600981 24.8152185,40.8888889 23,40.8888889 C21.1847815,40.8888889 19.7142857,39.3592627 19.7142857,37.6177778 L26.2857143,37.6177778 Z" id="Combined-Shape"></path>
<path d="M22.9765071,38.1586528 L38.1310429,38.1586528 C38.1310429,31.204912 33.7405071,35.9098815 33.7405071,19.7923153 C33.7405071,13.0756338 29.3499714,7.70311176 22.9765071,7.70311176 C16.6030429,7.70311176 12.2125071,13.0756338 12.2125071,19.7923153 C12.2125071,35.9098815 7.82279286,31.2040888 7.82279286,38.1586528 L22.9765071,38.1586528 Z" id="Fill-7" fill-opacity="0.3"></path>
<path d="M24.620925,35.958528 L37.316925,35.958528 C37.316925,29.7735838 33.6393893,33.9583398 33.6393893,19.6228343 C33.6393893,13.6502558 29.9610321,8.87202835 24.620925,8.87202835 C19.2816393,8.87202835 15.6032821,13.6502558 15.6032821,19.6228343 C15.6032821,33.0520817 12.3758893,30.2287707 11.9676393,34.9024616 C11.9183536,35.4654775 12.3290679,35.958528 12.8613536,35.958528 L24.620925,35.958528 Z" id="Fill-9" fill-opacity="0.3"></path>
<path d="M9.01222143,38.9817755 C7.85793169,38.9817755 6.94637071,37.9813615 7.06120453,36.8306604 C7.21523002,35.2690855 7.60988701,34.3401154 8.45000733,33.1886378 C8.53261933,33.075409 8.8324557,32.6736616 8.89441519,32.5892593 C9.06434674,32.3577754 9.19872982,32.1650315 9.32697216,31.9654834 C10.6913769,29.8424381 11.3910786,26.5543001 11.3910786,19.7923153 C11.3910786,12.487826 16.257961,6.87998903 22.9765071,6.87998903 C29.6950532,6.87998903 34.5619357,12.487826 34.5619357,19.7923153 C34.5619357,26.5550082 35.2617508,29.8429901 36.6264928,31.965988 C36.7547005,32.1654284 36.8890484,32.3580806 37.0589304,32.5894549 C37.1209192,32.6738818 37.4206585,33.0754285 37.5032257,33.1885727 C38.3435539,34.3400985 38.7383491,35.2689984 38.892637,36.8307194 C39.0060885,37.9817856 38.094914,38.9817755 36.9416143,38.9817755 L9.01222143,38.9817755 Z M36.9416143,37.3355301 C37.1266604,37.3355301 37.2754476,37.17224 37.257753,36.9927124 C37.134751,35.7476709 36.854787,35.0889535 36.1771057,34.1603074 C36.1011278,34.0561928 35.8033263,33.6572421 35.7356452,33.5650624 C35.5471912,33.3083935 35.394303,33.0891549 35.2453778,32.8574863 C33.6814134,30.4245773 32.9190786,26.8428552 32.9190786,19.7923153 C32.9190786,13.3498889 28.732766,8.52623449 22.9765071,8.52623449 C17.2202483,8.52623449 13.0339357,13.3498889 13.0339357,19.7923153 C13.0339357,26.8420854 12.2717409,30.4239004 10.7081964,32.8568117 C10.5592284,33.0886094 10.4062969,33.3079572 10.2177846,33.5647521 C10.1501295,33.656913 9.85223844,34.0560539 9.77622237,34.1602424 C9.09875195,35.0887902 8.81890193,35.74752 8.69600198,36.9935256 C8.67812468,37.1726674 8.82652251,37.3355301 9.01222143,37.3355301 L36.9416143,37.3355301 Z" id="Stroke-11"></path>
<path d="M29.3128429,15.9061883 C29.3128429,17.6240454 28.3024857,19.0167691 27.0547357,19.0167691 C25.8078071,19.0167691 24.7966286,17.6240454 24.7966286,15.9061883 C24.7966286,14.187508 25.8078071,12.7947843 27.0547357,12.7947843 C28.3024857,12.7947843 29.3128429,14.187508 29.3128429,15.9061883" id="Fill-13"></path>
<path d="M14.0775467,3.4475639 L14.7891536,3.03640007 L15.6097888,4.46254921 L14.8981818,4.87371303 C9.91246081,7.7544441 6.77629286,13.0733488 6.77629286,18.9430996 L6.77629286,19.7662223 L5.13343571,19.7662223 L5.13343571,18.9430996 C5.13343571,12.4786305 8.58829126,6.6192353 14.0775467,3.4475639 Z" id="Stroke-15"></path>
<path d="M40.81925,18.9430996 L40.81925,19.7662223 L39.1763929,19.7662223 L39.1763929,18.9430996 C39.1763929,13.0733488 36.0402249,7.7544441 31.0545039,4.87371303 L30.342897,4.46254921 L31.1635321,3.03640007 L31.875139,3.4475639 C37.3643945,6.6192353 40.81925,12.4786305 40.81925,18.9430996 Z" id="Stroke-17"></path>
<path d="M11.517838,0.41146011 L12.2294604,0.000323336602 L13.0500416,1.42650367 L12.3384192,1.83764044 C5.77341126,5.63054503 1.64302143,12.6354563 1.64302143,20.364221 L1.64302143,21.1873437 L0.000164285714,21.1873437 L0.000164285714,20.364221 C0.000164285714,12.0407205 4.44926147,4.49529929 11.517838,0.41146011 Z" id="Stroke-19"></path>
<path d="M45.9531786,20.364221 L45.9531786,21.1873437 L44.3103214,21.1873437 L44.3103214,20.364221 C44.3103214,12.6354563 40.1799316,5.63054503 33.6149237,1.83764044 L32.9033012,1.42650367 L33.7238824,0.000323336602 L34.4355049,0.41146011 C41.5040814,4.49529929 45.9531786,12.0407205 45.9531786,20.364221 Z" id="Stroke-21"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

33
src/assets/img/bell.svg Normal file
View File

@@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="47px" height="42px" viewBox="0 0 47 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
<title>1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Homepage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Banner-White" transform="translate(-36.000000, -34.000000)">
<g id="Group-3-Copy" transform="translate(12.000000, 7.000000)">
<g id="1" transform="translate(24.000000, 27.000000)">
<g id="Page-1" transform="translate(12.493243, 0.000000)" fill="#728BB7" fill-rule="nonzero">
<path d="M0.818401014,0.254141176 L1.31507331,1.29343529" id="Fill-23"></path>
</g>
<g id="Group-3" transform="translate(0.200000, 0.200000)">
<g id="Page-1">
<path d="M22.9630074,4.74814118 C24.5917642,4.74814118 25.9126662,6.07237647 25.9126662,7.70708235 C25.9126662,9.34096471 24.5917642,10.6660235 22.9630074,10.6660235 C21.3342507,10.6660235 20.0133486,9.34096471 20.0133486,7.70708235 C20.0133486,6.07237647 21.3342507,4.74814118 22.9630074,4.74814118" id="Fill-1" fill="#3366FF" fill-rule="nonzero"></path>
<path d="M26.3196912,36.0808824 L26.3196912,38.0886471 C26.3196912,39.9481765 24.8173601,41.4552353 22.9628432,41.4552353 C21.1083264,41.4552353 19.6059953,39.9473529 19.6059953,38.0886471 L19.6059953,36.0808824 L26.3196912,36.0808824 Z" id="Fill-3" fill="#457AE6" fill-rule="nonzero"></path>
<path d="M22.9630074,36.0808824 L22.9630074,41.4552353 C24.8175243,41.4552353 26.3198554,39.9481765 26.3198554,38.0886471 L26.3198554,36.0808824 L22.9630074,36.0808824 Z" id="Fill-5" fill="#3366FF" fill-rule="nonzero"></path>
<path d="M22.9630074,38.1775059 L38.1086392,38.1775059 C38.1086392,31.2203294 33.7206831,35.9276235 33.7206831,19.8020941 C33.7206831,13.0820941 29.332727,7.70691765 22.9630074,7.70691765 C16.5932878,7.70691765 12.2053318,13.0820941 12.2053318,19.8020941 C12.2053318,35.9276235 7.81819662,31.2195059 7.81819662,38.1775059 L22.9630074,38.1775059 Z" id="Fill-7" fill="#6193FF"></path>
<path d="M24.6064591,35.9762941 L37.2949997,35.9762941 C37.2949997,29.7882941 33.6196247,33.9751176 33.6196247,19.6325294 C33.6196247,13.657 29.9434287,8.87641176 24.6064591,8.87641176 C19.2703105,8.87641176 15.5941145,13.657 15.5941145,19.6325294 C15.5941145,33.0684118 12.3686179,30.2437059 11.9606078,34.9197059 C11.911351,35.483 12.321824,35.9762941 12.853797,35.9762941 L24.6064591,35.9762941 Z" id="Fill-9" fill="#99C0FF"></path>
<path d="M9.00692635,39.0010353 C7.85331481,39.0010353 6.94228941,38.000127 7.05705576,36.8488574 C7.21099075,35.2865109 7.60541586,34.3570819 8.44504257,33.2050354 C8.52760604,33.0917506 8.82726625,32.6898047 8.88918933,32.6053607 C9.05902104,32.3737625 9.19332517,32.1809233 9.32149215,31.9812766 C10.6850953,29.8571824 11.3843858,26.5674198 11.3843858,19.8020941 C11.3843858,12.4939959 16.2484088,6.88338824 22.9630074,6.88338824 C29.6776061,6.88338824 34.5416291,12.4939959 34.5416291,19.8020941 C34.5416291,26.5681283 35.241033,29.8577347 36.6049732,31.9817815 C36.7331055,32.1813204 36.8673745,32.3740678 37.0371566,32.6055564 C37.099109,32.690025 37.3986722,33.0917701 37.4811909,33.2049702 C38.3210254,34.3570649 38.7155886,35.2864238 38.8697859,36.8489164 C38.9831707,38.0005513 38.0725315,39.0010353 36.9199095,39.0010353 L9.00692635,39.0010353 Z M36.9199095,37.3539765 C37.1048468,37.3539765 37.2535467,37.1906058 37.2358624,37.0109894 C37.1129327,35.7653328 36.8331332,35.10629 36.1558501,34.177185 C36.0799168,34.073019 35.7822903,33.6738712 35.7146489,33.5816459 C35.5263057,33.3248502 35.3735073,33.1055033 35.2246695,32.8737202 C33.6616241,30.4396092 32.8997372,26.8561175 32.8997372,19.8020941 C32.8997372,13.3564846 28.7158843,8.53044706 22.9630074,8.53044706 C17.2101306,8.53044706 13.0262777,13.3564846 13.0262777,19.8020941 C13.0262777,26.8553473 12.2645307,30.4389319 10.7019049,32.8730453 C10.5530244,33.1049575 10.4001827,33.3244137 10.2117812,33.5813354 C10.1441659,33.6735419 9.84644981,34.07288 9.77047841,34.1771199 C9.09340603,35.1061266 8.81372043,35.7651818 8.69089269,37.011803 C8.6730259,37.1910334 8.82133654,37.3539765 9.00692635,37.3539765 L36.9199095,37.3539765 Z" id="Stroke-11" fill="#3366FF" fill-rule="nonzero"></path>
<path d="M29.2956203,15.9140471 C29.2956203,17.6327529 28.2858568,19.0261647 27.0388399,19.0261647 C25.7926439,19.0261647 24.7820595,17.6327529 24.7820595,15.9140471 C24.7820595,14.1945176 25.7926439,12.8011059 27.0388399,12.8011059 C28.2858568,12.8011059 29.2956203,14.1945176 29.2956203,15.9140471" id="Fill-13" fill="#FFFFFF" fill-rule="nonzero"></path>
<path d="M14.0692756,3.44926724 L14.7804643,3.03790027 L15.6006173,4.46475402 L14.8894285,4.87612099 C9.90663681,7.75827535 6.77231149,13.079808 6.77231149,18.9524588 L6.77231149,19.7759882 L5.13041959,19.7759882 L5.13041959,18.9524588 C5.13041959,12.4847958 8.58324526,6.62250567 14.0692756,3.44926724 Z" id="Stroke-15" fill="#3366FF" fill-rule="nonzero"></path>
<path d="M40.7952669,18.9524588 L40.7952669,19.7759882 L39.153375,19.7759882 L39.153375,18.9524588 C39.153375,13.079808 36.0190497,7.75827535 31.036258,4.87612099 L30.3250692,4.46475402 L31.1452222,3.03790027 L31.8564109,3.44926724 C37.3424412,6.62250567 40.7952669,12.4847958 40.7952669,18.9524588 Z" id="Stroke-17" fill="#3366FF" fill-rule="nonzero"></path>
<path d="M11.5110707,0.4116634 L12.2222751,0.000323496353 L13.0423742,1.42720846 L12.3311698,1.83854836 C5.77001913,5.63332692 1.64205608,12.6416991 1.64205608,20.3742824 L1.64205608,21.1978118 L0.000164189189,21.1978118 L0.000164189189,20.3742824 C0.000164189189,12.0466694 4.44664733,4.49752028 11.5110707,0.4116634 Z" id="Stroke-19" fill="#3366FF" fill-rule="nonzero"></path>
<path d="M45.9261791,20.3742824 L45.9261791,21.1978118 L44.2842872,21.1978118 L44.2842872,20.3742824 C44.2842872,12.6416991 40.1563241,5.63332692 33.5951734,1.83854836 L32.8839691,1.42720846 L33.7040681,0.000323496353 L34.4152725,0.4116634 C41.4796959,4.49752028 45.9261791,12.0466694 45.9261791,20.3742824 Z" id="Stroke-21" fill="#3366FF" fill-rule="nonzero"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB