From 2f71b9a1a27ade59ed3733917deef06070e51df3 Mon Sep 17 00:00:00 2001 From: Alexander Zhukov Date: Thu, 4 May 2017 15:33:51 +0300 Subject: [PATCH] feat(ui-features): add the icons page --- .angular-cli.json | 5 +-- src/app/@shared/shared.module.ts | 3 +- .../styles/gorgeous/gorgeous.theme.scss | 2 +- src/app/@theme/styles/pure/pure.theme.scss | 2 +- src/app/pages/pages.component.ts | 7 ++-- .../ui-features/icons/icons.component.html | 28 +++++++++++++++ .../ui-features/icons/icons.component.scss | 16 +++++++++ .../ui-features/icons/icons.component.ts | 35 ++++++++++++++++--- 8 files changed, 82 insertions(+), 16 deletions(-) create mode 100644 src/app/pages/ui-features/icons/icons.component.html create mode 100644 src/app/pages/ui-features/icons/icons.component.scss diff --git a/.angular-cli.json b/.angular-cli.json index 751b80b1..a706d6fd 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -19,10 +19,7 @@ "testTsconfig": "tsconfig.spec.json", "styles": [ "../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss", - "../node_modules/normalize.css/normalize.css", - "../node_modules/font-awesome/scss/font-awesome.scss", - "../node_modules/ionicons/scss/ionicons.scss", - "../node_modules/bootstrap/scss/bootstrap.scss" + "../node_modules/normalize.css/normalize.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.js", diff --git a/src/app/@shared/shared.module.ts b/src/app/@shared/shared.module.ts index 94c30a2e..e0984ce7 100644 --- a/src/app/@shared/shared.module.ts +++ b/src/app/@shared/shared.module.ts @@ -2,8 +2,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; -import { NgaCardModule } from '@nga/theme'; -import { NgaBootstrapModule } from '@nga/bootstrap'; +import { NgaCardModule, NgaBootstrapModule } from '@nga/theme'; @NgModule ({ exports: [ diff --git a/src/app/@theme/styles/gorgeous/gorgeous.theme.scss b/src/app/@theme/styles/gorgeous/gorgeous.theme.scss index a40d0bcc..e37af511 100644 --- a/src/app/@theme/styles/gorgeous/gorgeous.theme.scss +++ b/src/app/@theme/styles/gorgeous/gorgeous.theme.scss @@ -18,5 +18,5 @@ $theme-name: 'gorgeous'; } // @nga/bootstrap module styles -@import '~@nga/bootstrap/styles/themes/nga.theme.default'; +@import '~@nga/theme/overrides/bootstrap/styles/themes/nga.theme.default'; @include nga-bootstrap($theme-name); diff --git a/src/app/@theme/styles/pure/pure.theme.scss b/src/app/@theme/styles/pure/pure.theme.scss index 6f304e26..24028aef 100644 --- a/src/app/@theme/styles/pure/pure.theme.scss +++ b/src/app/@theme/styles/pure/pure.theme.scss @@ -18,5 +18,5 @@ $theme-name: 'pure'; } // @nga/bootstrap module styles -@import '~@nga/bootstrap/styles/themes/nga.theme.default'; +@import '~@nga/theme/overrides/bootstrap/styles/themes/nga.theme.default'; @include nga-bootstrap($theme-name); diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts index 55b7afed..12c5b591 100644 --- a/src/app/pages/pages.component.ts +++ b/src/app/pages/pages.component.ts @@ -1,11 +1,10 @@ import { Component } from '@angular/core'; +import 'style-loader!../@theme/styles/gorgeous/gorgeous.theme.scss'; +import 'style-loader!../@theme/styles/pure/pure.theme.scss'; + @Component({ selector: 'pages', - styleUrls: [ - '../@theme/styles/gorgeous/gorgeous.theme.scss', - '../@theme/styles/pure/pure.theme.scss', - ], template: ` diff --git a/src/app/pages/ui-features/icons/icons.component.html b/src/app/pages/ui-features/icons/icons.component.html new file mode 100644 index 00000000..b14c1009 --- /dev/null +++ b/src/app/pages/ui-features/icons/icons.component.html @@ -0,0 +1,28 @@ +
+
+ + + Ionicons + + +
+ + + See all ionicons icons + + +
+
+ + + Font awesome icons + + +
+ + + See all Font Awesome icons + + +
+
diff --git a/src/app/pages/ui-features/icons/icons.component.scss b/src/app/pages/ui-features/icons/icons.component.scss new file mode 100644 index 00000000..0046b004 --- /dev/null +++ b/src/app/pages/ui-features/icons/icons.component.scss @@ -0,0 +1,16 @@ +:host { + display: block; + + nga-card { + nga-card-body { + .icon { + float: left; + text-align: center; + } + } + + nga-card-footer { + text-align: right; + } + } +} diff --git a/src/app/pages/ui-features/icons/icons.component.ts b/src/app/pages/ui-features/icons/icons.component.ts index 2b3f1c08..efa08c3c 100644 --- a/src/app/pages/ui-features/icons/icons.component.ts +++ b/src/app/pages/ui-features/icons/icons.component.ts @@ -1,13 +1,40 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Pipe, PipeTransform } from '@angular/core'; @Component({ selector: 'ngx-icons', - template: ` -

icons works!

- `, + styleUrls: ['./icons.component.scss'], + templateUrl: './icons.component.html', }) export class NgxIconsComponent implements OnInit { + icons = { + + ionicons: [ + 'ion-ionic', 'ion-arrow-right-b', 'ion-arrow-down-b', 'ion-arrow-left-b', 'ion-arrow-up-c', 'ion-arrow-right-c', + 'ion-arrow-down-c', 'ion-arrow-left-c', 'ion-arrow-return-right', 'ion-arrow-return-left', 'ion-arrow-swap', + 'ion-arrow-shrink', 'ion-arrow-expand', 'ion-arrow-move', 'ion-arrow-resize', 'ion-chevron-up', + 'ion-chevron-right', 'ion-chevron-down', 'ion-chevron-left', 'ion-navicon-round', 'ion-navicon', + 'ion-drag', 'ion-log-in', 'ion-log-out', 'ion-checkmark-round', 'ion-checkmark', 'ion-checkmark-circled', + 'ion-close-round', 'ion-plus-round', 'ion-minus-round', 'ion-information', 'ion-help', + 'ion-backspace-outline', 'ion-help-buoy', 'ion-asterisk', 'ion-alert', 'ion-alert-circled', + 'ion-refresh', 'ion-loop', 'ion-shuffle', 'ion-home', 'ion-search', 'ion-flag', 'ion-star', + 'ion-heart', 'ion-heart-broken', 'ion-gear-a', 'ion-gear-b', 'ion-toggle-filled', 'ion-toggle', + 'ion-settings', 'ion-wrench', 'ion-hammer', 'ion-edit', 'ion-trash-a', 'ion-trash-b', + 'ion-document', 'ion-document-text', 'ion-clipboard', 'ion-scissors', 'ion-funnel', + 'ion-bookmark', 'ion-email', 'ion-email-unread', 'ion-folder', 'ion-filing', 'ion-archive', + 'ion-reply', 'ion-reply-all', 'ion-forward', + ], + + fontAwesome: [ + 'fa fa-adjust', 'fa fa-anchor', 'fa fa-archive', 'fa fa-area-chart', 'fa fa-arrows', 'fa fa-arrows-h', + 'fa fa-arrows-v', 'fa fa-asterisk', 'fa fa-at', 'fa fa-automobile', 'fa fa-ban', 'fa fa-bank', + 'fa fa-bar-chart', 'fa fa-bar-chart-o', 'fa fa-barcode', 'fa fa-bars', 'fa fa-bed', 'fa fa-beer', + 'fa fa-bell', 'fa fa-bell-o', 'fa fa-bell-slash', 'fa fa-bell-slash-o', 'fa fa-bicycle', 'fa fa-binoculars', + 'fa fa-birthday-cake', 'fa fa-bolt', 'fa fa-bomb', 'fa fa-book', 'fa fa-bookmark', 'fa fa-bookmark-o', + 'fa fa-briefcase', 'fa fa-bug', 'fa fa-building', 'fa fa-building-o', 'fa fa-bullhorn', + ], + } + constructor() { } ngOnInit() { }