diff --git a/src/app/pages/ui/components/incons/components/disabledButtons/disabledButtons.component.ts b/src/app/pages/ui/components/incons/components/disabledButtons/disabledButtons.component.ts
new file mode 100644
index 00000000..8e20eef8
--- /dev/null
+++ b/src/app/pages/ui/components/incons/components/disabledButtons/disabledButtons.component.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'disabled-buttons',
+ template: require('./disabledButtons.html'),
+})
+export class DisabledButtons {
+
+ constructor() {
+ }
+}
diff --git a/src/app/pages/ui/components/incons/components/disabledButtons/disabledButtons.html b/src/app/pages/ui/components/incons/components/disabledButtons/disabledButtons.html
new file mode 100644
index 00000000..b38e8ed7
--- /dev/null
+++ b/src/app/pages/ui/components/incons/components/disabledButtons/disabledButtons.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/pages/ui/components/incons/components/disabledButtons/index.ts b/src/app/pages/ui/components/incons/components/disabledButtons/index.ts
new file mode 100644
index 00000000..e5600a26
--- /dev/null
+++ b/src/app/pages/ui/components/incons/components/disabledButtons/index.ts
@@ -0,0 +1 @@
+export * from './disabledButtons.component';
diff --git a/src/app/pages/ui/components/incons/icons.component.ts b/src/app/pages/ui/components/incons/icons.component.ts
new file mode 100644
index 00000000..01d49ac3
--- /dev/null
+++ b/src/app/pages/ui/components/incons/icons.component.ts
@@ -0,0 +1,26 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+import {BaCard} from '../../../../theme/components';
+import {KameleonPicturePipe} from '../../../../theme/pipes';
+import {IconsService} from './icons.service';
+
+@Component({
+ selector: 'icons',
+ encapsulation: ViewEncapsulation.None,
+ directives: [BaCard],
+ pipes: [KameleonPicturePipe],
+ providers: [IconsService],
+ styles: [require('./icons.scss')],
+ template: require('./icons.html'),
+})
+export class Icons {
+
+ icons:any;
+
+ constructor(private _iconsService: IconsService) {
+ }
+
+ ngOnInit() {
+ this.icons = this._iconsService.getAll();
+ }
+}
diff --git a/src/app/pages/ui/components/incons/icons.html b/src/app/pages/ui/components/incons/icons.html
new file mode 100644
index 00000000..a32863e5
--- /dev/null
+++ b/src/app/pages/ui/components/incons/icons.html
@@ -0,0 +1,47 @@
+
diff --git a/src/app/pages/ui/components/incons/icons.scss b/src/app/pages/ui/components/incons/icons.scss
new file mode 100644
index 00000000..817083f8
--- /dev/null
+++ b/src/app/pages/ui/components/incons/icons.scss
@@ -0,0 +1,123 @@
+@import '../../../../theme/sass/conf/conf';
+
+@mixin icon-hover($color) {
+ i:hover {
+ color: $color;
+ }
+}
+
+.icons-list {
+ & > div {
+ text-align: center;
+ margin-bottom: 32px;
+ }
+ i {
+ font-weight: $font-normal;
+ font-size: 18px;
+ cursor: pointer;
+ }
+
+ &.primary {
+ @include icon-hover($primary);
+ }
+ &.success {
+ @include icon-hover($success);
+ }
+ &.warning {
+ @include icon-hover($warning);
+ }
+ &.danger {
+ @include icon-hover($danger);
+ }
+}
+
+a.see-all-icons {
+ float: right;
+}
+
+.awesomeIcons {
+ height: 308px;
+}
+
+.kameleon-row {
+ display: inline-block;
+ min-width: 102px;
+ width: 20%;
+ .kameleon-icon {
+ padding: 0 10px;
+ img {
+ width: 81px;
+ }
+ }
+}
+
+@media (max-width: 750px) {
+ .kameleon-row {
+ width: 25%;
+ }
+}
+
+@media (max-width: 550px) {
+ .kameleon-row {
+ width: 33%;
+ }
+}
+
+@media (max-width: 430px) {
+ .kameleon-row {
+ width: 50%;
+ }
+}
+
+.kameleon-icon-tabs {
+ max-width: 84px;
+ img {
+ width: 100%;
+ min-width: 81px;
+ min-height: 81px;
+ }
+}
+
+.kameleon-icon {
+ text-align: center;
+ margin: 0 auto;
+ img {
+ width: 100%;
+ }
+ span {
+ display: block;
+ text-align: center;
+ white-space: nowrap;
+ }
+}
+
+@mixin setImgBg($color) {
+ img {
+ background: $color;
+ }
+}
+
+.with-round-bg {
+ margin-bottom: 6px;
+ img {
+ border-radius: 50%;
+ margin-bottom: 4px;
+ }
+ @include setImgBg($default);
+
+ &.success {
+ @include setImgBg($success);
+ }
+ &.danger {
+ @include setImgBg($danger);
+ }
+ &.warning {
+ @include setImgBg($warning);
+ }
+ &.info {
+ @include setImgBg($info);
+ }
+ &.primary {
+ @include setImgBg($primary);
+ }
+}
diff --git a/src/app/pages/ui/components/incons/icons.service.ts b/src/app/pages/ui/components/incons/icons.service.ts
new file mode 100644
index 00000000..4723ef20
--- /dev/null
+++ b/src/app/pages/ui/components/incons/icons.service.ts
@@ -0,0 +1,214 @@
+import {Injectable} from '@angular/core';
+
+@Injectable()
+export class IconsService {
+
+ icons = {
+ kameleonIcons: [
+ {
+ name: 'Beach',
+ img: 'Beach'
+ },
+ {
+ name: 'Bus',
+ img: 'Bus'
+ },
+ {
+ name: 'Cheese',
+ img: 'Cheese'
+ },
+ {
+ name: 'Desert',
+ img: 'Desert'
+ },
+ {
+ name: 'Images',
+ img: 'Images'
+ },
+ {
+ name: 'Magician',
+ img: 'Magician'
+ },
+ {
+ name: 'Makeup',
+ img: 'Makeup'
+ },
+ {
+ name: 'Programming',
+ img: 'Programming'
+ },
+ {
+ name: 'Shop',
+ img: 'Shop'
+ },
+ {
+ name: 'Surfer',
+ img: 'Surfer'
+ },
+ {
+ name: 'Phone Booth',
+ img: 'Phone-Booth'
+ },
+ {
+ name: 'Ninja',
+ img: 'Ninja'
+ },
+ {
+ name: 'Apartment',
+ img: 'Apartment'
+ },
+ {
+ name: 'Batman',
+ img: 'Batman'
+ },
+ {
+ name: 'Medal',
+ img: 'Medal-2'
+ },
+ {
+ name: 'Money',
+ img: 'Money-Increase'
+ },
+ {
+ name: 'Street View',
+ img: 'Street-View'
+ },
+ {
+ name: 'Student',
+ img: 'Student-3'
+ },
+ {
+ name: 'Bell',
+ img: 'Bell'
+ },
+ {
+ name: 'Woman',
+ img: 'Boss-5'
+ },
+ {
+ name: 'Euro',
+ img: 'Euro-Coin'
+ },
+ {
+ name: 'Chessboard',
+ img: 'Chessboard'
+ },
+ {
+ name: 'Burglar',
+ img: 'Burglar'
+ },
+ {
+ name: 'Dna',
+ img: 'Dna'
+ },
+ {
+ name: 'Clipboard Plan',
+ img: 'Clipboard-Plan'
+ },
+ {
+ name: 'Boss',
+ img: 'Boss-3'
+ },
+ {
+ name: 'Key',
+ img: 'Key'
+ },
+ {
+ name: 'Surgeon',
+ img: 'Surgeon'
+ },
+ {
+ name: 'Hacker',
+ img: 'Hacker'
+ },
+ {
+ name: 'Santa',
+ img: 'Santa'
+ }
+ ],
+ kameleonRoundedIcons: [
+ {
+ color: 'success',
+ img: 'Apartment',
+ name: 'Apartment'
+ },
+ {
+ color: 'warning',
+ img: 'Bus',
+ name: 'Bus'
+ },
+ {
+ color: 'primary',
+ img: 'Checklist',
+ name: 'Checklist'
+ },
+ {
+ color: 'warning',
+ img: 'Desert',
+ name: 'Desert'
+ },
+ {
+ color: 'danger',
+ img: 'Laptop-Signal',
+ name: 'Laptop Signal'
+ },
+ {
+ color: 'info',
+ img: 'Love-Letter',
+ name: 'Love Letter'
+ },
+ {
+ color: 'success',
+ img: 'Makeup',
+ name: 'Makeup'
+ },
+ {
+ color: 'primary',
+ img: 'Santa',
+ name: 'Santa'
+ },
+ {
+ color: 'success',
+ img: 'Surfer',
+ name: 'Surfer'
+ },
+ {
+ color: 'info',
+ img: 'Vector',
+ name: 'Vector'
+ },
+ {
+ color: 'warning',
+ img: 'Money-Increase',
+ name: 'Money Increase'
+ },
+ {
+ color: 'info',
+ img: 'Alien',
+ name: 'Alien'
+ },
+ {
+ color: 'danger',
+ img: 'Online-Shopping',
+ name: 'Online Shopping'
+ },
+ {
+ color: 'warning',
+ img: 'Euro-Coin',
+ name: 'Euro'
+ },
+ {
+ color: 'info',
+ img: 'Boss-3',
+ name: 'Boss'
+ }
+ ],
+ 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'],
+ fontAwesomeIcons: ['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'],
+ socicon: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', ',', ';', ':', '+', '@', '=', '-', '^', '?', '$', '*', '&', '(', '#', '.', '_', ']', ')', '\'', '"', '}', '{']
+ };
+
+ getAll() {
+ return this.icons;
+ }
+}
diff --git a/src/app/pages/ui/components/incons/index.ts b/src/app/pages/ui/components/incons/index.ts
new file mode 100644
index 00000000..16367534
--- /dev/null
+++ b/src/app/pages/ui/components/incons/index.ts
@@ -0,0 +1 @@
+export * from './icons.component';
diff --git a/src/app/pages/ui/ui.component.ts b/src/app/pages/ui/ui.component.ts
index 37974a1d..c34e8ae3 100644
--- a/src/app/pages/ui/ui.component.ts
+++ b/src/app/pages/ui/ui.component.ts
@@ -1,8 +1,9 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component} from '@angular/core';
import {RouteConfig} from '@angular/router-deprecated';
import {Typography} from './components/typography';
import {Buttons} from './components/buttons';
+import {Icons} from './components/incons';
@Component({
selector: 'ui',
@@ -22,14 +23,15 @@ import {Buttons} from './components/buttons';
name: 'Buttons',
component: Buttons,
path: '/buttons',
+ },
+ {
+ name: 'Icons',
+ component: Icons,
+ path: '/icons',
}
])
export class Ui {
constructor() {
}
-
- ngOnInit() {
- }
-
}
diff --git a/src/app/theme/components/sidebar/sidebar.service.ts b/src/app/theme/components/sidebar/sidebar.service.ts
index 81b6d815..297909c1 100644
--- a/src/app/theme/components/sidebar/sidebar.service.ts
+++ b/src/app/theme/components/sidebar/sidebar.service.ts
@@ -28,6 +28,10 @@ export class SidebarService {
title: 'Buttons',
name: 'Buttons',
},
+ {
+ title: 'Icons',
+ name: 'Icons',
+ },
]
},
{
diff --git a/src/app/theme/pipes/index.ts b/src/app/theme/pipes/index.ts
index 833f7fc3..bb403535 100644
--- a/src/app/theme/pipes/index.ts
+++ b/src/app/theme/pipes/index.ts
@@ -1,2 +1,3 @@
export * from './profilePicture';
export * from './appPicture';
+export * from './kameleonPicture';
diff --git a/src/app/theme/pipes/kameleonPicture/index.ts b/src/app/theme/pipes/kameleonPicture/index.ts
new file mode 100644
index 00000000..e36fb507
--- /dev/null
+++ b/src/app/theme/pipes/kameleonPicture/index.ts
@@ -0,0 +1 @@
+export * from './kameleonPicture.pipe.ts';
diff --git a/src/app/theme/pipes/kameleonPicture/kameleonPicture.pipe.ts b/src/app/theme/pipes/kameleonPicture/kameleonPicture.pipe.ts
new file mode 100644
index 00000000..a3ff396b
--- /dev/null
+++ b/src/app/theme/pipes/kameleonPicture/kameleonPicture.pipe.ts
@@ -0,0 +1,10 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {layoutPaths} from '../../../theme';
+
+@Pipe({name: 'kameleonPicture'})
+export class KameleonPicturePipe implements PipeTransform {
+
+ transform(input:string):string {
+ return layoutPaths.images.root + 'theme/icon/kameleon/' + input + '.svg';
+ }
+}
}})
{{ icon.name }}
+  }})
{{ icon.name }}
+