Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(ui-features): add the icons page

Browse source
This commit is contained in:
Alexander Zhukov 2017-05-04 15:33:51 +03:00
parent 44318d9e25
commit 2f71b9a1a2
8 changed files with 82 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

5
.angular-cli.json
View file

@ -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",

3
src/app/@shared/shared.module.ts
View file

@ -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: [

2
src/app/@theme/styles/gorgeous/gorgeous.theme.scss
View file

@ -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);

2
src/app/@theme/styles/pure/pure.theme.scss
View file

@ -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);

7
src/app/pages/pages.component.ts
View file

@ -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: `
<one-column-layout>
<nga-menu></nga-menu>

28
src/app/pages/ui-features/icons/icons.component.html Normal file
View file

@ -0,0 +1,28 @@
<div class="row">
<div class="col-6 col-md-6">
<nga-card>
<nga-card-header>
Ionicons
</nga-card-header>
<nga-card-body>
<div class="col-2 icon" *ngFor="let icon of icons.ionicons"><i class="{{ icon }}"></i></div>
</nga-card-body>
<nga-card-footer>
<a href="http://ionicons.com/" target="_blank" class="see-all-icons">See all ionicons icons</a>
</nga-card-footer>
</nga-card>
</div>
<div class="col-6 col-md-6">
<nga-card>
<nga-card-header>
Font awesome icons
</nga-card-header>
<nga-card-body>
<div class="col-2 icon" *ngFor="let icon of icons.fontAwesome"><i class="fa {{ icon }}"></i></div>
</nga-card-body>
<nga-card-footer>
<a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank" class="see-all-icons">See all Font Awesome icons</a>
</nga-card-footer>
</nga-card>
</div>
</div>

16
src/app/pages/ui-features/icons/icons.component.scss Normal file
View file

@ -0,0 +1,16 @@
:host {
display: block;
nga-card {
nga-card-body {
.icon {
float: left;
text-align: center;
}
}
nga-card-footer {
text-align: right;
}
}
}

35
src/app/pages/ui-features/icons/icons.component.ts
View file

@ -1,13 +1,40 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, Pipe, PipeTransform } from '@angular/core';
@Component({
selector: 'ngx-icons',
template: `
<p>icons works!</p>
`,
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() { }