-
+
+
-
-
-
+
+
+
+
-
+
+
+
+ {{ message }}
+
+
+
+
+
diff --git a/src/app/@theme/components/page-container/page-container.component.scss b/src/app/@theme/components/page-container/page-container.component.scss
index 4487663..b07ac64 100644
--- a/src/app/@theme/components/page-container/page-container.component.scss
+++ b/src/app/@theme/components/page-container/page-container.component.scss
@@ -1,21 +1,64 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
@import '../../styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
$primary: nb-theme(color-primary);
- $search-input-padding-sides: 2.5rem;
- $search-input-padding-tops: 1.625rem;
+ $search-input-padding-sides: 1rem;
+ $search-input-padding-tops: 1rem;
+ $search-input-mobile-padding-sides: 0.5rem;
+ $search-input-mobile-padding-tops: 1rem;
+ $search-placeholder-color: #a6aebd;
+ $version-color: #0fba81;
+ $version-bg: #edfff3;
+ $description-color: #5670a1;
+ $search-icon-fill-color: #a6aebd;
- margin-top: 3.5rem;
- margin-bottom: 4rem;
+ margin-top: 4.5rem;
+ margin-bottom: 3rem;
display: block;
+ .title {
+ position: relative;
+ }
+
+ .version {
+ background-color: $version-bg;
+ position: relative;
+ bottom: 0.35rem;
+ font-family: 'Raleway Medium', sans-serif;
+ font-size: nb-theme(font-size);
+ font-weight: nb-theme(font-weight-bold);
+ color: $version-color;
+ padding: 0.3125rem 0.6875rem 0.3125rem 0.8125rem;
+ border-radius: nb-theme(custiom-radius);
+ text-transform: none;
+ }
+
h1 {
+ font-family: 'Raleway Bold', sans-serif;
color: $primary;
font-size: 5rem;
+ padding-left: 6.625rem;
text-transform: capitalize;
- font-weight: 700;
+ margin-bottom: 1rem;
+ }
+
+ .description {
+ color: $description-color;
+ font-family: 'Raleway Medium', sans-serif;
+ font-size: nb-theme(font-size-lg);
+ line-height: 1.625;
+ margin-bottom: 2rem;
+
+ span {
+ font-weight: nb-theme(font-weight-ultra-bold);
+ }
}
// search
@@ -23,38 +66,42 @@
width: 100%;
position: relative;
- &::after {
- content: '';
+ i {
position: absolute;
- border: 2px solid $primary;
- width: 100%;
- left: 0;
- bottom: 0;
- border-radius: nb-theme(radius);
- box-shadow: 0 8px 32px 0 #edf0f5;
+ left: $search-input-padding-sides;
+ top: 1rem;
+ fill: $search-icon-fill-color;
}
- i {
- color: $primary;
- position: absolute;
- right: $search-input-padding-sides;
- top: calc(#{$search-input-padding-tops} - 0.25rem);
-
- .eva-search-outline {
+ &.search-focus {
+ i {
fill: $primary;
}
}
}
+ .heart {
+ position: absolute;
+ top: 1.25rem;
+ left: 1.375rem;
+ width: 3.75rem;
+ height: 3.75rem;
+ background: url('../../../../assets/img/heart.svg') no-repeat;
+ background-position: 50% 50%;
+ }
+
.search-input {
width: 100%;
border: none;
- font-size: nb-theme(font-size-xlg);
+ background-color: nb-theme(color-gray-bg);
+ color: $primary;
padding: $search-input-padding-tops $search-input-padding-sides;
+ padding-left: 4rem;
+ line-height: 1.5;
+ border-radius: nb-theme(custiom-radius);
&::placeholder {
- color: nb-theme(color-fg-text);
- font-weight: nb-theme(font-weight-light);
+ color: $search-icon-fill-color;
}
&::-ms-clear {
@@ -63,19 +110,115 @@
}
// search
+ // actions
+ .actions {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 2.875rem;
+ }
+ // actions
+
// icons container
.icons {
position: relative;
}
// icons container
- eva-list-view-switcher {
- position: absolute;
- left: 110%;
- top: 25%;
+ eva-icon-list {
+ margin-top: 3rem;
}
- eva-icon-list {
- margin-top: 5rem;
+ .spinner-container {
+ width: 100%;
+ height: 25vh;
+ }
+
+ .info-message {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ height: 7rem;
+ width: 70%;
+ margin: 2.5rem auto;
+ text-align: center;
+ font-family: 'Raleway Medium', sans-serif;
+ font-size: nb-theme(font-size-lg);
+ background-color: nb-theme(info-bg);
+ color: nb-theme(info-fg);
+ border-radius: 0.75rem;
+ }
+
+ @include media-breakpoint-up(sm) {
+ .mobile {
+ display: none;
+ }
+ }
+
+ @include media-breakpoint-down(lg) {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+
+ @include media-breakpoint-down(md) {
+
+ }
+
+ @include media-breakpoint-down(sm) {
+ margin-top: 0;
+
+ .desktop {
+ display: none;
+ }
+
+ .title {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .heart {
+ position: static;
+ display: block;
+ margin-bottom: 0.875rem;
+ }
+
+ .version {
+ position: static;
+ }
+
+ h1 {
+ margin-top: 0.75rem;
+ margin-bottom: 2rem;
+ padding-left: 0;
+ font-size: 4rem;
+ }
+
+ .description {
+ margin-bottom: 4rem;
+ font-size: nb-theme(font-size);
+ text-align: center;
+ }
+
+ .actions {
+ flex-direction: column;
+ align-items: center;
+ margin-top: 4rem;
+
+ .right-action {
+ margin-top: 2.5rem;
+ }
+ }
+
+ .info-message {
+ width: 100%;
+ padding: 0 1rem;
+ }
+ }
+
+ @media (min-width: 315px) and (max-width: 370px) {
+ h1 {
+ font-size: 3.5rem;
+ }
}
}
diff --git a/src/app/@theme/components/page-container/page-container.component.ts b/src/app/@theme/components/page-container/page-container.component.ts
index 390b5ef..e237eab 100644
--- a/src/app/@theme/components/page-container/page-container.component.ts
+++ b/src/app/@theme/components/page-container/page-container.component.ts
@@ -1,18 +1,30 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
import {
AfterViewInit,
Component,
ElementRef,
- Input,
OnDestroy,
ViewChild,
} from '@angular/core';
-import { NbDialogService } from '@nebular/theme';
+import {
+ NbDialogService,
+ NbMediaBreakpoint,
+ NbMediaBreakpointsService,
+ NbThemeService,
+} from '@nebular/theme';
import { ActivatedRoute, Router } from '@angular/router';
import { fromEvent } from 'rxjs/internal/observable/fromEvent';
-import { IconService } from '../../../@core/data/icon.service';
-import { debounceTime, delay, map, mergeMap, takeWhile, tap } from 'rxjs/operators';
+import { IconService, IconServiceData } from '../../../@core/data/service/icons/icon.service';
+import { debounceTime, delay, mergeMap, takeWhile, tap } from 'rxjs/operators';
import { DownloadIconComponent } from '../modals/download-icon/download-icon.component';
+import { DialogStateService } from '../../services/dialog-state.service';
+import { EvaVersionService } from '../../services/version.service';
@Component({
selector: 'eva-page-container',
@@ -23,17 +35,34 @@ export class PageContainerComponent implements AfterViewInit, OnDestroy {
private alive = true;
- @Input() iconsType: string;
-
- icons: string[] = [];
- view: string = 'full';
-
@ViewChild('searchInput') searchInput: ElementRef;
+ @ViewChild('iconsBlock') iconsElement: ElementRef;
+
+ currentVersion: string;
+ iconsType: string = 'outline';
+ isInputFocus = false;
+ icons: string[] = [];
+ message: string = '';
+ breakpoint: NbMediaBreakpoint = { name: '', width: 0 };
+ breakpoints: any;
+ animation: string = 'zoom';
constructor(private iconService: IconService,
private router: Router,
private activatedRoute: ActivatedRoute,
- private dialogService: NbDialogService) {
+ private dialogService: NbDialogService,
+ private breakpointService: NbMediaBreakpointsService,
+ private themeService: NbThemeService,
+ private dialogStateService: DialogStateService,
+ private versionService: EvaVersionService) {
+ this.currentVersion = this.versionService.getEvoVersion();
+ this.breakpoints = this.breakpointService.getBreakpointsMap();
+
+ this.themeService.onMediaQueryChange()
+ .pipe(takeWhile(() => this.alive))
+ .subscribe(([oldValue, newValue]) => {
+ this.breakpoint = newValue;
+ });
}
ngAfterViewInit() {
@@ -41,22 +70,26 @@ export class PageContainerComponent implements AfterViewInit, OnDestroy {
.pipe(
takeWhile(() => this.alive),
delay(0),
- map(params => params.searchKey),
- tap((searchKeyValue: string) => {
+ tap((params) => {
const inputValue = this.searchInput.nativeElement.value;
- if (!inputValue && searchKeyValue) {
- this.searchInput.nativeElement.value = searchKeyValue;
+ if (!inputValue && params.searchKey) {
+ this.searchInput.nativeElement.value = params.searchKey;
+ }
+
+ if (params.type && this.iconsType !== params.type) {
+ this.iconsType = params.type;
}
}),
- mergeMap((searchKeyValue: string) => {
- return searchKeyValue ?
- this.iconService.getFilteredIconsData(searchKeyValue, this.iconsType) :
+ mergeMap((params) => {
+ return params.searchKey && params.type ?
+ this.iconService.getFilteredIconsData(params.searchKey, params.type) :
this.iconService.getIconsData(this.iconsType);
}),
)
- .subscribe((iconsData: string[]) => {
- this.icons = iconsData;
+ .subscribe((iconsData: IconServiceData) => {
+ this.icons = iconsData.icons;
+ this.message = iconsData.message;
});
fromEvent(this.searchInput.nativeElement, 'keyup')
@@ -68,9 +101,7 @@ export class PageContainerComponent implements AfterViewInit, OnDestroy {
const searchKeyValue = event.target.value;
if (searchKeyValue) {
- this.router.navigate(
- [this.iconsType],
- { queryParams: { searchKey: searchKeyValue }});
+ this.updateQueryParams({ searchKey: searchKeyValue, type: this.iconsType });
} else {
const url = this.router.url.substring(0, this.router.url.indexOf('?'));
@@ -79,23 +110,79 @@ export class PageContainerComponent implements AfterViewInit, OnDestroy {
});
}
- changeView(viewMode) {
- this.view = viewMode;
+ get placeholder() {
+ return this.isLoading || this.noSearchResults ? '' : `Search ${this.icons.length} Icons`;
+ }
+
+ get noSearchResults() {
+ return (
+ this.message &&
+ this.icons.length === 0
+ );
+ }
+
+ get isLoading() {
+ return (
+ !this.message &&
+ this.icons.length === 0
+ );
+ }
+
+ get isMobileMode() {
+ return this.breakpoint.width <= this.breakpoints.sm;
}
clickIcon(icon) {
+ if (this.isMobileMode) {
+ return;
+ }
+
const modalRef = this.dialogService.open(
DownloadIconComponent,
{
- hasBackdrop: true,
backdropClass: 'download-icon',
- closeOnBackdropClick: true,
},
);
const componentInstance = modalRef.componentRef.instance;
componentInstance.selectedIcon = icon;
componentInstance.iconType = this.iconsType;
+
+ this.dialogStateService.changeDialogState('open');
+
+ modalRef.onClose
+ .subscribe(() => {
+ this.dialogStateService.changeDialogState('close');
+ });
+ }
+
+ handleFocusInput() {
+ this.isInputFocus = true;
+ }
+
+ handleBlurInput() {
+ this.isInputFocus = false;
+ }
+
+ changeAnimation(animationType) {
+ this.animation = animationType;
+ }
+
+ changeIconsType(iconsType) {
+ this.iconsType = iconsType;
+ this.icons = [];
+
+ this.updateQueryParams({ type: iconsType });
+ }
+
+ updateQueryParams(queryParams) {
+ this.router.navigate(
+ [],
+ {
+ relativeTo: this.activatedRoute,
+ queryParamsHandling: 'merge',
+ queryParams,
+ });
}
ngOnDestroy() {
diff --git a/src/app/@theme/components/type-switcher/type-switcher.component.html b/src/app/@theme/components/type-switcher/type-switcher.component.html
new file mode 100644
index 0000000..111db29
--- /dev/null
+++ b/src/app/@theme/components/type-switcher/type-switcher.component.html
@@ -0,0 +1,11 @@
+
+
+
+ {{ item.title }}
+
+
diff --git a/src/app/@theme/components/type-switcher/type-switcher.component.scss b/src/app/@theme/components/type-switcher/type-switcher.component.scss
new file mode 100644
index 0000000..3ccada1
--- /dev/null
+++ b/src/app/@theme/components/type-switcher/type-switcher.component.scss
@@ -0,0 +1,66 @@
+/**
+ * @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';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+ $primary: nb-theme(color-primary);
+ $item-color: #a7b4cc;
+
+ ul {
+ display: flex;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+
+ li {
+ display: flex;
+ align-items: baseline;
+ position: relative;
+ text-decoration: none;
+ font-size: nb-theme(font-size-sm);
+ color: $item-color;
+ cursor: pointer;
+
+ &:not(:first-child) {
+ margin-left: 1.75rem;
+ }
+
+ &:hover, &.active, &:focus {
+ color: $primary;
+ text-shadow: 0.5px 0 0 currentColor;
+ font-weight: normal;
+ outline: none!important;
+
+ .nav-menu-icon {
+ fill: $primary;
+ }
+ }
+
+ .nav-menu-icon {
+ margin-right: 0.5rem;
+ fill: $item-color;
+ }
+
+ span {
+ font-size: nb-theme(font-size-sm);
+ }
+ }
+
+ @include media-breakpoint-down(lg) {
+
+ }
+
+ @include media-breakpoint-down(sm) {
+ a {
+ span {
+ display: none;
+ }
+ }
+ }
+}
diff --git a/src/app/@theme/components/type-switcher/type-switcher.component.ts b/src/app/@theme/components/type-switcher/type-switcher.component.ts
new file mode 100644
index 0000000..d19d614
--- /dev/null
+++ b/src/app/@theme/components/type-switcher/type-switcher.component.ts
@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+ selector: 'eva-type-switcher',
+ templateUrl: './type-switcher.component.html',
+ styleUrls: ['./type-switcher.component.scss'],
+})
+
+export class TypeSwitcherComponent {
+
+ @Output() changeIconsType: EventEmitter
= new EventEmitter();
+
+ @Input() iconsType: string;
+ @Input() isMobileView: string;
+
+ navItems = [
+ {
+ title: 'Outline',
+ type: 'outline',
+ iconName: 'star-outline',
+ },
+ {
+ title: 'Fill',
+ type: 'fill',
+ iconName: 'star',
+ },
+ ];
+
+ changeType(value) {
+ this.changeIconsType.emit(value);
+ this.iconsType = value;
+ }
+}
diff --git a/src/app/@theme/pipes/eva-icons.pipe.ts b/src/app/@theme/pipes/eva-icons.pipe.ts
new file mode 100644
index 0000000..fa10722
--- /dev/null
+++ b/src/app/@theme/pipes/eva-icons.pipe.ts
@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { DomSanitizer } from '@angular/platform-browser';
+import { Pipe, PipeTransform } from '@angular/core';
+
+import { icons } from '../../../../package-build/eva';
+
+@Pipe({ name: 'eva' })
+export class EvaIconsPipe implements PipeTransform {
+
+ private defaultOptions = {
+ height: 24,
+ width: 24,
+ fill: 'inherit',
+ animationHover: true,
+ animationInfinity: false,
+ };
+
+ constructor(private sanitizer: DomSanitizer) {}
+
+ transform(icon: string,
+ options: {
+ height: number;
+ width: number;
+ fill: string;
+ animationType?: string;
+ animationHover?: boolean;
+ animationInfinity?: boolean;
+ },
+ ) {
+ const mergedOptions = {
+ ...this.defaultOptions,
+ ...options,
+ };
+ const { width, height, fill, animationType, animationHover, animationInfinity } = mergedOptions;
+ const animation = animationType ?
+ { type: animationType, hover: animationHover, infinite: animationInfinity } :
+ null;
+
+ return this.sanitizer.bypassSecurityTrustHtml(icons[icon].toSvg({
+ width,
+ height,
+ fill,
+ animation,
+ }));
+ }
+}
diff --git a/src/app/@theme/services/dialog-state.service.ts b/src/app/@theme/services/dialog-state.service.ts
new file mode 100644
index 0000000..6634e85
--- /dev/null
+++ b/src/app/@theme/services/dialog-state.service.ts
@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Injectable } from '@angular/core';
+import { Observable, ReplaySubject } from 'rxjs';
+import { share } from 'rxjs/operators';
+
+@Injectable()
+export class DialogStateService {
+
+ protected dialogState$ = new ReplaySubject();
+
+ changeDialogState(state: string) {
+ this.dialogState$.next({state});
+ }
+
+ onChangeDialogState(): Observable {
+ return this.dialogState$.pipe(share());
+ }
+}
diff --git a/src/app/@theme/services/index.ts b/src/app/@theme/services/index.ts
index f62f33e..dacfa04 100644
--- a/src/app/@theme/services/index.ts
+++ b/src/app/@theme/services/index.ts
@@ -1,5 +1,14 @@
-import { EvoVersionService } from './version.service';
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
-export default [
- EvoVersionService,
+import { EvaVersionService } from './version.service';
+import { DialogStateService } from './dialog-state.service';
+
+
+export const evaServices = [
+ EvaVersionService,
+ DialogStateService,
];
diff --git a/src/app/@theme/services/version.service.ts b/src/app/@theme/services/version.service.ts
index 598aab8..af8f481 100644
--- a/src/app/@theme/services/version.service.ts
+++ b/src/app/@theme/services/version.service.ts
@@ -1,7 +1,13 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
import { Injectable } from '@angular/core';
@Injectable()
-export class EvoVersionService {
+export class EvaVersionService {
getEvoVersion() {
return require('../../../../package.json').version;
diff --git a/src/app/@theme/styles/_open-sans.scss b/src/app/@theme/styles/_open-sans.scss
new file mode 100644
index 0000000..ac25a8f
--- /dev/null
+++ b/src/app/@theme/styles/_open-sans.scss
@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+$open-sans-font-path: '/assets/fonts/open-sans' !default;
+
+@font-face {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 400;
+ src: url('#{$open-sans-font-path}/open-sans-latin-regular.eot');
+ src: local('Open Sans Regular'), local('OpenSans-Regular'),
+ url('#{$open-sans-font-path}/open-sans-latin-regular.eot?#iefix') format('embedded-opentype'),
+ url('#{$open-sans-font-path}/open-sans-latin-regular.woff2') format('woff2'),
+ url('#{$open-sans-font-path}/open-sans-latin-regular.woff') format('woff'),
+ url('#{$open-sans-font-path}/open-sans-latin-regular.ttf') format('truetype'),
+ url('#{$open-sans-font-path}/open-sans-latin-regular.svg#OpenSans') format('svg');
+}
+
+@font-face {
+ font-family: 'Open Sans SemiBold';
+ src: url('#{$open-sans-font-path}/OpenSans-SemiBold.eot');
+ src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
+ url('#{$open-sans-font-path}/OpenSans-SemiBold.eot?#iefix') format('embedded-opentype'),
+ url('#{$open-sans-font-path}/OpenSans-SemiBold.woff') format('woff'),
+ url('#{$open-sans-font-path}/OpenSans-SemiBold.ttf') format('truetype');
+ font-weight: 600;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Open Sans Bold';
+ src: url('#{$open-sans-font-path}/OpenSans-Bold.eot');
+ src: local('Open Sans Bold'), local('OpenSans-Bold'),
+ url('#{$open-sans-font-path}/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
+ url('#{$open-sans-font-path}/OpenSans-Bold.woff') format('woff'),
+ url('#{$open-sans-font-path}/OpenSans-Bold.ttf') format('truetype');
+ font-weight: bold;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Open Sans Extra Bold';
+ src: url('#{$open-sans-font-path}/OpenSans-ExtraBold.eot');
+ src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
+ url('#{$open-sans-font-path}/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
+ url('#{$open-sans-font-path}/OpenSans-ExtraBold.woff') format('woff'),
+ url('#{$open-sans-font-path}/OpenSans-ExtraBold.ttf') format('truetype');
+ font-weight: 800;
+ font-style: normal;
+}
diff --git a/src/app/@theme/styles/_raleway.scss b/src/app/@theme/styles/_raleway.scss
new file mode 100644
index 0000000..a9e7010
--- /dev/null
+++ b/src/app/@theme/styles/_raleway.scss
@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+$raleway-font-path: '/assets/fonts/raleway' !default;
+
+@font-face {
+ font-family: 'Raleway Medium';
+ src: url('#{$raleway-font-path}/Raleway-Medium.eot');
+ src: local('Raleway Medium'), local('Raleway-Medium'),
+ url('#{$raleway-font-path}/Raleway-Medium.eot?#iefix') format('embedded-opentype'),
+ url('#{$raleway-font-path}/Raleway-Medium.woff') format('woff'),
+ url('#{$raleway-font-path}/Raleway-Medium.ttf') format('truetype');
+ font-weight: 500;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Raleway Bold';
+ src: url('#{$raleway-font-path}/Raleway-Bold.eot');
+ src: local('Raleway Bold'), local('Raleway-Bold'),
+ url('#{$raleway-font-path}/Raleway-Bold.eot?#iefix') format('embedded-opentype'),
+ url('#{$raleway-font-path}/Raleway-Bold.woff') format('woff'),
+ url('#{$raleway-font-path}/Raleway-Bold.ttf') format('truetype');
+ font-weight: bold;
+ font-style: normal;
+}
diff --git a/src/app/@theme/styles/_small-social.scss b/src/app/@theme/styles/_small-social.scss
deleted file mode 100644
index ae79305..0000000
--- a/src/app/@theme/styles/_small-social.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-$small-social-font-path: '/assets/fonts/small-social' !default;
-@font-face {
- font-family: 'small-social';
- src: url('#{$small-social-font-path}/small-social.eot?skntni');
- src: url('#{$small-social-font-path}/small-social.eot?skntni#iefix') format('embedded-opentype'),
- url('#{$small-social-font-path}/small-social.ttf?skntni') format('truetype'),
- url('#{$small-social-font-path}/small-social.woff?skntni') format('woff'),
- url('#{$small-social-font-path}/small-social.svg?skntni#small-social') format('svg');
- font-weight: normal;
- font-style: normal;
-}
-
-[class^='small-social-'], [class*=' small-social-'] {
- font-family: 'small-social' !important;
- speak: none;
- font-style: normal;
- font-weight: normal;
- font-variant: normal;
- text-transform: none;
- line-height: 1;
-
- /* Better Font Rendering =========== */
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-.small-social-facebook::before {
- content: '\e900';
-}
-.small-social-github::before {
- content: '\e901';
-}
-.small-social-twitter::before {
- content: '\e902';
-}
diff --git a/src/app/@theme/styles/styles.scss b/src/app/@theme/styles/styles.scss
index ce9ed8e..f0cd874 100644
--- a/src/app/@theme/styles/styles.scss
+++ b/src/app/@theme/styles/styles.scss
@@ -1,8 +1,17 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import 'raleway';
+@import 'open-sans';
@import 'themes';
-@import 'small-social';
@import '~@nebular/theme/styles/globals';
+@import '~@nebular/bootstrap/styles/globals';
@include nb-install() {
@include nb-theme-global();
+ @include nb-bootstrap-global();
};
diff --git a/src/app/@theme/styles/themes.scss b/src/app/@theme/styles/themes.scss
index b4c1087..24c6548 100644
--- a/src/app/@theme/styles/themes.scss
+++ b/src/app/@theme/styles/themes.scss
@@ -1,3 +1,9 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
@import '~@nebular/theme/styles/theming';
@import '~@nebular/theme/styles/themes/corporate';
@@ -5,9 +11,10 @@ $nb-enabled-themes: (eva);
/* stylelint-disable */
$nb-themes: nb-register-theme((
- font-main: unquote('-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'),
+ font-main: 'Open Sans',
+ font-secondary: 'Raleway Bold',
- content-width: 1100px,
+ content-width: 1120px,
color-primary: #3366ff,
@@ -17,6 +24,7 @@ $nb-themes: nb-register-theme((
color-fg-heading: #546d8d,
color-fg-text: #919fb1,
color-fg-icon: #c4c8d1,
+ color-gray-bg: #edf0f5,
shadow: none,
@@ -29,12 +37,13 @@ $nb-themes: nb-register-theme((
header-padding: 0 0,
header-height: 4.25rem,
header-fg: color-fg,
+ header-section-border-color: #f5f5f5,
header-button-border: #dce4f2,
menu-bg: transparent,
menu-item-padding: 0.675rem 1rem,
- menu-item-fg: #d8e1f0,
+ menu-item-fg: #8992a3,
menu-active-fg: color-primary,
menu-font-size: 0.95rem,
menu-font-weight: font-weight-normal,
@@ -59,5 +68,15 @@ $nb-themes: nb-register-theme((
format-name-fg: #6a7385,
+ popover-bg: #0d1c2e,
+ popover-fg: #ffffff,
+ popover-border: #0d1c2e,
+ popover-border-radius: 0.75rem,
+ popover-arrow-size: 6px,
+
+ info-bg: #fff2f2,
+ info-fg: #ff3d71,
+
+ custiom-radius: 0.625rem,
), eva, corporate);
diff --git a/src/app/@theme/theme.module.ts b/src/app/@theme/theme.module.ts
index 4cc797f..3463597 100644
--- a/src/app/@theme/theme.module.ts
+++ b/src/app/@theme/theme.module.ts
@@ -1,22 +1,31 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
import { RouterModule } from '@angular/router';
import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
-import { CoreModule } from '../@core/core.module';
-
// components
import { FooterComponent } from './components/footer/footer.component';
import { HeaderComponent } from './components/header/header.component';
import { DownloadIconComponent } from './components/modals/download-icon/download-icon.component';
import { PageContainerComponent } from './components/page-container/page-container.component';
-import { ListViewSwitcherComponent } from './components/list-view-switcher/list-view-switcher.component';
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';
// components
// services
-import evaServices from './services';
+import { evaServices } from './services';
// services
+// pipes
+import { EvaIconsPipe } from './pipes/eva-icons.pipe';
+// pipes
+
import {
NbMenuModule,
NbLayoutModule,
@@ -25,8 +34,24 @@ import {
NbOverlayModule,
NbDialogModule,
NbCheckboxModule,
+ NbSpinnerModule,
+ NbPopoverModule, NbSelectModule,
} from '@nebular/theme';
+const COMPONENTS = [
+ FooterComponent,
+ HeaderComponent,
+ DownloadIconComponent,
+ PageContainerComponent,
+ IconListComponent,
+ TypeSwitcherComponent,
+ AnimationSwitcherComponent,
+];
+
+const PIPES = [
+ EvaIconsPipe,
+];
+
@NgModule({
imports: [
RouterModule,
@@ -37,15 +62,14 @@ import {
NbOverlayModule,
NbDialogModule,
NbCheckboxModule,
- CoreModule,
+ NbSpinnerModule,
+ NbPopoverModule,
+ NbSelectModule,
],
declarations: [
- FooterComponent,
- HeaderComponent,
- DownloadIconComponent,
- PageContainerComponent,
- ListViewSwitcherComponent,
- IconListComponent,
+ ...COMPONENTS,
+
+ ...PIPES,
],
exports: [
RouterModule,
@@ -56,12 +80,15 @@ import {
NbDialogModule,
NbOverlayModule,
NbCheckboxModule,
+ NbSpinnerModule,
+ NbSelectModule,
FooterComponent,
HeaderComponent,
PageContainerComponent,
- ListViewSwitcherComponent,
IconListComponent,
+
+ ...PIPES,
],
entryComponents: [
DownloadIconComponent,
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
deleted file mode 100644
index 9d09d6d..0000000
--- a/src/app/app-routing.module.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { ExtraOptions, RouterModule, Routes } from '@angular/router';
-import { NgModule } from '@angular/core';
-
-import { FillComponent } from './pages/fill/fill.component';
-import { OutlineComponent } from './pages/outline/outline.component';
-
-const routes: Routes = [
- {
- path: 'outline',
- component: OutlineComponent,
- },
- {
- path: 'fill',
- component: FillComponent,
- },
- { path: '', redirectTo: 'outline', pathMatch: 'full' },
- { path: '**', redirectTo: 'outline' },
-];
-
-const config: ExtraOptions = {
- useHash: true,
-};
-
-@NgModule({
- imports: [RouterModule.forRoot(routes, config)],
- exports: [RouterModule],
-})
-
-export class AppRoutingModule {
-}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index fb33a35..b2fc915 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,10 +1,10 @@
-
+
-
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index c2b448e..5f95e3a 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,7 +1,16 @@
+/**
+ * @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';
+@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
+ $blur-background: #e9eaec;
$content-width: nb-theme(content-width);
+ $popover-border-width: calc(#{nb-theme(popover-arrow-size)} - 2px);
.content-center {
max-width: $content-width;
@@ -14,11 +23,41 @@
.contact-us {
padding: 5rem 1rem;
+
h2 {
color: black;
}
}
+ /deep/ nb-popover {
+ font-family: nb-theme(font-main), sans-serif;
+
+ nb-overlay-container {
+ .primitive-overlay {
+ box-shadow: 0 6px 10px 0 rgba(51, 102, 255, 0.16);
+ padding: 0.4rem 1rem 0.5rem;
+ font-size: nb-theme(font-size-sm);
+ }
+ }
+
+ .arrow {
+ &::after {
+ border-left-width: $popover-border-width;
+ border-right-width: $popover-border-width;
+ border-bottom-width: $popover-border-width;
+ }
+ }
+ }
+
+ /deep/ nb-layout {
+ &.blur {
+ .layout {
+ filter: blur(5px);
+ background-color: $blur-background;
+ }
+ }
+ }
+
/deep/ nb-layout .main-container {
padding-top: 3rem;
@@ -27,21 +66,34 @@
}
}
- /deep/ nb-layout .layout-container {
+ /deep/ nb-layout .layout-container .columns {
max-width: $content-width;
+ margin: 0 auto;
+ }
+
+ /deep/ nb-layout-header {
+ nav {
+ max-width: $content-width;
+ margin: 0 auto;
+ }
+ }
+
+ /deep/ .content nb-layout-footer {
width: 100%;
- margin-left: auto;
- margin-right: auto;
+ background-color: #f7f8fa;
+
+ nav {
+ max-width: $content-width;
+ width: 100%;
+ margin: 0 auto;
+ }
}
- /deep/ nb-layout-footer {
- margin-top: 6rem;
- }
- // modals
- /deep/ .download-icon, /deep/ .download-icons {
- background-color: nb-theme(color-white);
- opacity: 0.9;
+ @include media-breakpoint-down(xl) {
+ nb-layout-header /deep/ nav {
+ height: 8.25rem;
+ display: block;
+ }
}
- // modals
}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index d8d2b2e..e0004a8 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,11 @@
+/**
+ * @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';
+import { DialogStateService } from './@theme/services/dialog-state.service';
@Component({
selector: 'eva-app',
@@ -7,4 +14,12 @@ import { Component } from '@angular/core';
})
export class AppComponent {
+ isOpenDialog = false;
+
+ constructor(private dialogStateService: DialogStateService) {
+ this.dialogStateService.onChangeDialogState()
+ .subscribe(({state}) => {
+ this.isOpenDialog = state === 'open';
+ });
+ }
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 46d260c..501bd2d 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,3 +1,9 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
import { APP_BASE_HREF } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -5,10 +11,9 @@ import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { EvaThemeModule } from './@theme/theme.module';
-import { AppRoutingModule } from './app-routing.module';
import { CoreModule } from './@core/core.module';
import { AppComponent } from './app.component';
-import { PagesModule } from './pages/pages.module';
+import { RouterModule } from '@angular/router';
@NgModule({
declarations: [
@@ -17,9 +22,16 @@ import { PagesModule } from './pages/pages.module';
imports: [
BrowserModule,
BrowserAnimationsModule,
- AppRoutingModule,
- PagesModule,
HttpClientModule,
+ RouterModule.forRoot(
+ [
+ { path: '', component: AppComponent },
+ { path: '**', redirectTo: '' },
+ ],
+ {
+ useHash: true,
+ },
+ ),
EvaThemeModule.forRoot(),
CoreModule.forRoot(),
diff --git a/src/app/pages/fill/fill.component.ts b/src/app/pages/fill/fill.component.ts
deleted file mode 100644
index 28f5d01..0000000
--- a/src/app/pages/fill/fill.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'eva-fill',
- template: `
-
+
+
+
diff --git a/src/assets/fonts/open-sans/open-sans-latin-regular.ttf b/src/assets/fonts/open-sans/open-sans-latin-regular.ttf
new file mode 100644
index 0000000..9d4e8e5
Binary files /dev/null and b/src/assets/fonts/open-sans/open-sans-latin-regular.ttf differ
diff --git a/src/assets/fonts/open-sans/open-sans-latin-regular.woff b/src/assets/fonts/open-sans/open-sans-latin-regular.woff
new file mode 100644
index 0000000..e495e6f
Binary files /dev/null and b/src/assets/fonts/open-sans/open-sans-latin-regular.woff differ
diff --git a/src/assets/fonts/open-sans/open-sans-latin-regular.woff2 b/src/assets/fonts/open-sans/open-sans-latin-regular.woff2
new file mode 100644
index 0000000..c8050c2
Binary files /dev/null and b/src/assets/fonts/open-sans/open-sans-latin-regular.woff2 differ
diff --git a/src/assets/fonts/raleway/Raleway-Bold.eot b/src/assets/fonts/raleway/Raleway-Bold.eot
new file mode 100644
index 0000000..fa0248d
Binary files /dev/null and b/src/assets/fonts/raleway/Raleway-Bold.eot differ
diff --git a/src/assets/fonts/raleway/Raleway-Bold.ttf b/src/assets/fonts/raleway/Raleway-Bold.ttf
new file mode 100644
index 0000000..e993635
Binary files /dev/null and b/src/assets/fonts/raleway/Raleway-Bold.ttf differ
diff --git a/src/assets/fonts/raleway/Raleway-Bold.woff b/src/assets/fonts/raleway/Raleway-Bold.woff
new file mode 100644
index 0000000..522dc2e
Binary files /dev/null and b/src/assets/fonts/raleway/Raleway-Bold.woff differ
diff --git a/src/assets/fonts/raleway/Raleway-Medium.eot b/src/assets/fonts/raleway/Raleway-Medium.eot
new file mode 100644
index 0000000..45b1a71
Binary files /dev/null and b/src/assets/fonts/raleway/Raleway-Medium.eot differ
diff --git a/src/assets/fonts/raleway/Raleway-Medium.ttf b/src/assets/fonts/raleway/Raleway-Medium.ttf
new file mode 100644
index 0000000..7e1ce79
Binary files /dev/null and b/src/assets/fonts/raleway/Raleway-Medium.ttf differ
diff --git a/src/assets/fonts/raleway/Raleway-Medium.woff b/src/assets/fonts/raleway/Raleway-Medium.woff
new file mode 100644
index 0000000..feba39b
Binary files /dev/null and b/src/assets/fonts/raleway/Raleway-Medium.woff differ
diff --git a/src/assets/fonts/small-social/small-social.eot b/src/assets/fonts/small-social/small-social.eot
deleted file mode 100644
index a1f4b67..0000000
Binary files a/src/assets/fonts/small-social/small-social.eot and /dev/null differ
diff --git a/src/assets/fonts/small-social/small-social.svg b/src/assets/fonts/small-social/small-social.svg
deleted file mode 100644
index 4275994..0000000
--- a/src/assets/fonts/small-social/small-social.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
-
-
-
diff --git a/src/assets/fonts/small-social/small-social.ttf b/src/assets/fonts/small-social/small-social.ttf
deleted file mode 100644
index eb2e1bb..0000000
Binary files a/src/assets/fonts/small-social/small-social.ttf and /dev/null differ
diff --git a/src/assets/fonts/small-social/small-social.woff b/src/assets/fonts/small-social/small-social.woff
deleted file mode 100644
index 6671c4d..0000000
Binary files a/src/assets/fonts/small-social/small-social.woff and /dev/null differ
diff --git a/src/assets/img/figma.svg b/src/assets/img/figma.svg
deleted file mode 100644
index 43948bf..0000000
--- a/src/assets/img/figma.svg
+++ /dev/null
@@ -1 +0,0 @@
- figma Created with Sketch.
+
+ 595CB108-9780-47D9-AAF4-432058714209
+ Created with sketchtool.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/assets/img/png.svg b/src/assets/img/png.svg
index 0710264..ca2f6e9 100644
--- a/src/assets/img/png.svg
+++ b/src/assets/img/png.svg
@@ -1 +1,20 @@
- png Created with Sketch.
+
+ F31E5E6F-F235-4BD8-89D2-557112DBC22B
+ Created with sketchtool.
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/assets/img/shape.svg b/src/assets/img/shape.svg
index ea62719..69ec0de 100644
--- a/src/assets/img/shape.svg
+++ b/src/assets/img/shape.svg
@@ -1 +1,35 @@
- Shape Created with Sketch.
+
+ 03E06ED1-7080-41DC-991A-216AEADFA853
+ Created with sketchtool.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/assets/img/sketch.svg b/src/assets/img/sketch.svg
deleted file mode 100644
index 957032c..0000000
--- a/src/assets/img/sketch.svg
+++ /dev/null
@@ -1,39 +0,0 @@
-
-
-
- sketch
- Created with Sketch.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/src/favicon.ico b/src/favicon.ico
index d4340cf..6c0c0b0 100644
Binary files a/src/favicon.ico and b/src/favicon.ico differ
diff --git a/src/index.html b/src/index.html
index aabc81a..967e56b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,14 +1,33 @@
+
+
+
+
+
Eva Icons
+ Eva Icons - beautifully crafted Open Source UI icons for common actions and items.
+
+ 
Eva Icons
+
+