icons page

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() {
+  }
+}

src/app/pages/ui/components/incons/components/disabledButtons/disabledButtons.html

@@ -0,0 +1,18 @@
+<div class="button-wrapper">
+  <button type="button" class="btn btn-default" disabled="disabled">Default</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-primary" disabled="disabled">Primary</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-success" disabled="disabled">Success</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-info" disabled="disabled">Info</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-warning" disabled="disabled">Warning</button>
+</div>
+<div class="button-wrapper">
+  <button type="button" class="btn btn-danger" disabled="disabled">Danger</button>
+</div>

src/app/pages/ui/components/incons/components/disabledButtons/index.ts

@@ -0,0 +1 @@
+export * from './disabledButtons.component';

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();
+  }
+}

src/app/pages/ui/components/incons/icons.html

@@ -0,0 +1,47 @@
+<div class="widgets">
+
+  <div class="row">
+    <div class="col-md-6">
+      <ba-card title="Kameleon SVG Icons" baCardClass="with-scroll">
+        <div class="row clearfix">
+          <div class="kameleon-row" *ngFor="let icon of icons.kameleonIcons">
+            <div class="kameleon-icon"><img src="{{ (icon.img | kameleonPicture )}}"><span>{{ icon.name }}</span></div>
+          </div>
+        </div>
+        <a href="http://www.kameleon.pics/" target="_blank" class="see-all-icons">See all Kamaleon icons</a>
+      </ba-card>
+
+      <ba-card title="Socicon" baCardClass="with-scroll">
+        <div class="row icons-list danger">
+          <div class="col-xs-2" *ngFor="let icon of icons.socicon"><i class="socicon">{{ icon }}</i></div>
+        </div>
+        <a href="http://www.socicon.com/chart.php" target="_blank" class="see-all-icons">See all Socicon icons</a>
+      </ba-card>
+    </div>
+    <div class="col-md-6">
+      <ba-card title="Icons With Rounded Background" baCardClass="with-scroll">
+        <div class="row clearfix">
+          <div class="kameleon-row" *ngFor="let icon of icons.kameleonRoundedIcons">
+            <div class="kameleon-icon with-round-bg {{ icon.color }}"><img src="{{ ( icon.img | kameleonPicture ) }}"><span>{{ icon.name }}</span></div>
+          </div>
+        </div>
+        <a href="http://www.kameleon.pics/" target="_blank" class="see-all-icons">See all Kamaleon icons</a>
+      </ba-card>
+
+      <ba-card title="Ionicons" baCardClass="with-scroll">
+        <div class="row icons-list primary">
+          <div class="col-xs-2" *ngFor="let icon of icons.ionicons"><i class="{{ icon }}"></i></div>
+        </div>
+        <a href="http://ionicons.com/" target="_blank" class="see-all-icons">See all ionicons icons</a>
+      </ba-card>
+
+      <ba-card title="Font Awesome Icons" baCardClass="with-scroll">
+        <div class="row icons-list success awesomeIcons">
+          <div class="col-xs-2" *ngFor="let icon of icons.fontAwesomeIcons"><i class="fa {{ icon }}"></i></div>
+        </div>
+        <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank" class="see-all-icons">See all Font Awesome icons</a>
+      </ba-card>
+    </div>
+  </div>
+
+</div>

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);
+  }
+}

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;
+  }
+}

src/app/pages/ui/components/incons/index.ts

@@ -0,0 +1 @@
+export * from './icons.component';

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() {
-  }
-
 }

src/app/theme/components/sidebar/sidebar.service.ts

@@ -28,6 +28,10 @@ export class SidebarService {
           title: 'Buttons',
           name: 'Buttons',
         },
+        {
+          title: 'Icons',
+          name: 'Icons',
+        },
       ]
     },
     {

src/app/theme/pipes/index.ts

@@ -1,2 +1,3 @@
 export * from './profilePicture';
 export * from './appPicture';
+export * from './kameleonPicture';

src/app/theme/pipes/kameleonPicture/index.ts

@@ -0,0 +1 @@
+export * from './kameleonPicture.pipe.ts';

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';
+  }
+}