refactor(images): images mostly fixed

bower.json

@@ -73,6 +73,9 @@
     },
     "slimScroll": {
       "main": "./jquery.slimscroll.js"
+    },
+    "font-awesome": {
+      "main": "css/font-awesome.css"
     }
   },
   "devDependencies": {

gulp/watch.js

@@ -15,8 +15,8 @@ gulp.task('watch', ['inject'], function () {
   gulp.watch([path.join(conf.paths.src, '/*.html'), 'bower.json'], ['inject-reload']);
 
   gulp.watch([
-    path.join(conf.paths.src, '/app/**/*.css'),
+    path.join(conf.paths.src, '/sass/**/*.css'),
-    path.join(conf.paths.src, '/app/**/*.scss')
+    path.join(conf.paths.src, '/sass/**/*.scss')
   ], function(event) {
     if(isOnlyChange(event)) {
       gulp.start('styles-reload');

src/app/pages/charts/amCharts/areaChart/AreaChartCtrl.js

@@ -9,7 +9,7 @@
       .controller('AreaChartCtrl', AreaChartCtrl);
 
   /** @ngInject */
-  function AreaChartCtrl($scope, layoutColors, $element, tplSkinChartWatcherHelper) {
+  function AreaChartCtrl($scope, layoutColors, $element, tplSkinChartWatcherHelper, layoutPaths) {
     var id = $element[0].getAttribute('id');
     var areaChart = AmCharts.makeChart(id, {
       type: 'serial',
@@ -131,7 +131,7 @@
       export: {
         enabled: true
       },
-      pathToImages: 'img/'
+      pathToImages: layoutPaths.images.amChart
     });
 
     tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, areaChart);

src/app/pages/charts/amCharts/barChart/BarChartCtrl.js

@@ -9,7 +9,7 @@
       .controller('BarChartCtrl', BarChartCtrl);
 
   /** @ngInject */
-  function BarChartCtrl($scope, layoutColors, $element, tplSkinChartWatcherHelper) {
+  function BarChartCtrl($scope, layoutColors, $element, tplSkinChartWatcherHelper, layoutPaths) {
     var id = $element[0].getAttribute('id');
     var barChart = AmCharts.makeChart(id, {
       type: 'serial',
@@ -79,7 +79,7 @@
         enabled: true
       },
       creditsPosition: 'top-right',
-      pathToImages: 'img/'
+      pathToImages: layoutPaths.images.amChart
     });
 
     tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, barChart);

src/app/pages/charts/amCharts/funnelChart/FunnelChartCtrl.js

@@ -9,7 +9,7 @@
       .controller('FunnelChartCtrl', FunnelChartCtrl);
 
   /** @ngInject */
-  function FunnelChartCtrl($scope, $element, tplSkinChartWatcherHelper) {
+  function FunnelChartCtrl($scope, $element, tplSkinChartWatcherHelper, layoutPaths) {
     var id = $element[0].getAttribute('id');
     var funnelChart = AmCharts.makeChart(id, {
       type: 'funnel',
@@ -60,7 +60,7 @@
         enabled: true
       },
       creditsPosition: 'bottom-left',
-      pathToImages: 'img/'
+      pathToImages: layoutPaths
     });
 
     tplSkinChartWatcherHelper.watchFunnelChanges($scope, funnelChart);

src/app/pages/charts/amCharts/lineChart/LineChartCtrl.js

@@ -9,7 +9,7 @@
       .controller('LineChartCtrl', LineChartCtrl);
 
   /** @ngInject */
-  function LineChartCtrl($scope, layoutColors, $element, tplSkinChartWatcherHelper) {
+  function LineChartCtrl($scope, layoutColors, $element, tplSkinChartWatcherHelper, layoutPaths) {
     var id = $element[0].getAttribute('id');
     var lineChart = AmCharts.makeChart(id, {
       type: 'serial',
@@ -137,7 +137,7 @@
         enabled: true
       },
       creditsPosition: 'bottom-right',
-      pathToImages: 'img/'
+      pathToImages: layoutPaths.images.amChart
     });
 
     tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, lineChart);

src/app/pages/charts/amCharts/pieChart/PieChartCtrl.js

@@ -9,7 +9,7 @@
       .controller('PieChartCtrl', PieChartCtrl);
 
   /** @ngInject */
-  function PieChartCtrl($scope, $element, tplSkinChartWatcherHelper) {
+  function PieChartCtrl($scope, $element, tplSkinChartWatcherHelper, layoutPaths) {
     var id = $element[0].getAttribute('id');
     var pieChart = AmCharts.makeChart(id, {
       type: 'pie',
@@ -94,7 +94,7 @@
       marginLeft: 0,
       marginRight: 0,
       pullOutRadius: 0,
-      pathToImages: 'img/',
+      pathToImages: layoutPaths.images.amChart,
       responsive: {
         enabled: true,
         rules: [

src/app/pages/dashboard/blurFeed/BlurFeedCtrl.js

@@ -23,7 +23,7 @@
         author: 'Andrey',
         header: 'added new video',
         text: 'Vader and Me',
-        preview: 'vader-and-me-preview',
+        preview: 'app/feed/vader-and-me-preview.png',
         link: 'https://www.youtube.com/watch?v=IfcpzBbbamk',
         time: 'Today 9:30 pm',
         ago: '3 hrs ago',
@@ -32,7 +32,7 @@
         author: 'Vlad',
         header: 'added new image',
         text: 'My little kitten',
-        preview: 'my-little-kitten',
+        preview: 'app/feed/my-little-kitten.png',
         link: 'http://api.ning.com/files/DtcI2O2Ry7A7VhVxeiWfGU9WkHcMy4WSTWZ79oxJq*h0iXvVGndfD7CIYy-Ax-UAFCBCdqXI4GCBw3FOLKTTjQc*2cmpdOXJ/1082127884.jpeg',
         time: 'Today 2:20 pm',
         ago: '10 hrs ago',
@@ -48,7 +48,7 @@
         author: 'Nick',
         header: 'posted location',
         text: 'New York, USA',
-        preview: 'new-york-location',
+        preview: 'app/feed/new-york-location.png',
         link: 'https://www.google.by/maps/place/New+York,+NY,+USA/@40.7201111,-73.9893872,14z',
         time: '11.11.2015',
         ago: '2 days ago',

src/app/pages/dashboard/blurFeed/blurFeed.html

@@ -2,11 +2,11 @@
 <div class="feed-messages-container" track-width="smallContainerWidth" min-width="360">
   <div class="feed-message" ng-repeat="message in feed" ng-class="{'left': $index%2==0, 'right': $index%2==1}">
     <div class="message-icon" ng-if="message.type == 'text-message'">
-      <img class="photo-icon" ng-src="img/{{ ::message.author }}.png">
+      <img class="photo-icon" ng-src="{{::( message.author | profilePicture )}}">
     </div>
     <div class="message-icon" ng-if="message.type != 'text-message'">
       <span class="media-icon" ng-class="::message.type"></span>
-      <img class="sub-photo-icon" ng-src="img/{{ ::message.author }}.png">
+      <img class="sub-photo-icon" ng-src="{{::( message.author | profilePicture )}}">
     </div>
     <div class="text-block" ng-class="{'small-message': smallContainerWidth && message.type != 'text-message', '{{::message.type}}': true}">
       <div class="message-header">
@@ -17,7 +17,7 @@
       </div>
       <div class="preview" ng-if="message.preview">
         <a href="{{::message.link}}" target="_blank">
-          <img ng-src="img/{{ ::message.preview }}.png">
+          <img ng-src="{{ ::( message.preview | appImage )}}">
         </a>
       </div>
       <div class="message-time">

src/app/pages/dashboard/dashboardLineChart/DashboardLineChartCtrl.js

@@ -9,7 +9,7 @@
       .controller('DashboardLineChartCtrl', DashboardLineChartCtrl);
 
   /** @ngInject */
-  function DashboardLineChartCtrl($scope, tplSkinManager, tplSkinChartWatcherHelper, layoutColors) {
+  function DashboardLineChartCtrl($scope, tplSkinManager, tplSkinChartWatcherHelper, layoutColors, layoutPaths) {
     var chartData = [
       { date: new Date(2012, 11), value: 0, value0: 0 },
       { date: new Date(2013, 0), value: 15000, value0: 19000},
@@ -111,7 +111,7 @@
         backgroundAlpha: 0
       },
       zoomOutText: '',
-      pathToImages: 'img/'
+      pathToImages: layoutPaths.images.amChart
     });
 
     tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, chart);

src/app/pages/dashboard/dashboardMap/DashboardMapCtrl.js

@@ -9,7 +9,7 @@
       .controller('DashboardMapCtrl', DashboardMapCtrl);
 
   /** @ngInject */
-  function DashboardMapCtrl(layoutColors) {
+  function DashboardMapCtrl(layoutColors, layoutPaths) {
     var map = AmCharts.makeChart('amChartMap', {
       type: 'map',
       theme: 'blur',
@@ -96,7 +96,7 @@
         enabled: true
       },
       creditsPosition: 'bottom-right',
-      pathToImages: 'img/'
+      pathToImages: layoutPaths.images.amChart
     });
   }
 })();

src/app/pages/dashboard/popularApp/popularApp.html

@@ -1,5 +1,5 @@
 <div class="popular-app-img">
-  <img src="img/my-app-logo.png"/>
+  <img ng-src="{{::( 'app/my-app-logo.png' | appImage )}}"/>
 </div>
 <div class="popular-app-cost row">
   <div class="col-xs-9">

src/app/pages/icons/IconsPageCtrl.js

@@ -14,205 +14,205 @@
       kameleonIcons: [
         {
           name: 'Beach',
-          img: 'Beach.svg'
+          img: 'Beach'
         },
         {
           name: 'Bus',
-          img: 'Bus.svg'
+          img: 'Bus'
         },
         {
           name: 'Cheese',
-          img: 'Cheese.svg'
+          img: 'Cheese'
         },
         {
           name: 'Desert',
-          img: 'Desert.svg'
+          img: 'Desert'
         },
         {
           name: 'Images',
-          img: 'Images.svg'
+          img: 'Images'
         },
         {
           name: 'Magician',
-          img: 'Magician.svg'
+          img: 'Magician'
         },
         {
           name: 'Makeup',
-          img: 'Makeup.svg'
+          img: 'Makeup'
         },
         {
           name: 'Programming',
-          img: 'Programming.svg'
+          img: 'Programming'
         },
         {
           name: 'Shop',
-          img: 'Shop.svg'
+          img: 'Shop'
         },
         {
           name: 'Surfer',
-          img: 'Surfer.svg'
+          img: 'Surfer'
         },
         {
           name: 'Phone Booth',
-          img: 'Phone-Booth.svg'
+          img: 'Phone-Booth'
         },
         {
           name: 'Ninja',
-          img: 'Ninja.svg'
+          img: 'Ninja'
         },
         {
           name: 'Apartment',
-          img: 'Apartment.svg'
+          img: 'Apartment'
         },
         {
           name: 'Batman',
-          img: 'Batman.svg'
+          img: 'Batman'
         },
         {
           name: 'Medal',
-          img: 'Medal-2.svg'
+          img: 'Medal-2'
         },
         {
           name: 'Money',
-          img: 'Money-Increase.svg'
+          img: 'Money-Increase'
         },
         {
           name: 'Street View',
-          img: 'Street-View.svg'
+          img: 'Street-View'
         },
         {
           name: 'Student',
-          img: 'Student-3.svg'
+          img: 'Student-3'
         },
         {
           name: 'Bell',
-          img: 'Bell.svg'
+          img: 'Bell'
         },
         {
           name: 'Woman',
-          img: 'Boss-5.svg'
+          img: 'Boss-5'
         },
         {
           name: 'Euro',
-          img: 'Euro-Coin.svg'
+          img: 'Euro-Coin'
         },
         {
           name: 'Chessboard',
-          img: 'Chessboard.svg'
+          img: 'Chessboard'
         },
         {
           name: 'Burglar',
-          img: 'Burglar.svg'
+          img: 'Burglar'
         },
         {
           name: 'Dna',
-          img: 'Dna.svg'
+          img: 'Dna'
         },
         {
           name: 'Clipboard Plan',
-          img: 'Clipboard-Plan.svg'
+          img: 'Clipboard-Plan'
         },
         {
           name: 'Boss',
-          img: 'Boss-3.svg'
+          img: 'Boss-3'
         },
         {
           name: 'Key',
-          img: 'Key.svg'
+          img: 'Key'
         },
         {
           name: 'Surgeon',
-          img: 'Surgeon.svg'
+          img: 'Surgeon'
         },
         {
           name: 'Hacker',
-          img: 'Hacker.svg'
+          img: 'Hacker'
         },
         {
           name: 'Santa',
-          img: 'Santa.svg'
+          img: 'Santa'
         }
       ],
       kameleonRoundedIcons: [
         {
           color: 'success',
-          img: 'Apartment.svg',
+          img: 'Apartment',
           name: 'Apartment'
         },
         {
           color: 'warning',
-          img: 'Bus.svg',
+          img: 'Bus',
           name: 'Bus'
         },
         {
           color: 'primary',
-          img: 'Checklist.svg',
+          img: 'Checklist',
           name: 'Checklist'
         },
         {
           color: 'warning',
-          img: 'Desert.svg',
+          img: 'Desert',
           name: 'Desert'
         },
         {
           color: 'danger',
-          img: 'Laptop-Signal.svg',
+          img: 'Laptop-Signal',
           name: 'Laptop Signal'
         },
         {
           color: 'info',
-          img: 'Love-Letter.svg',
+          img: 'Love-Letter',
           name: 'Love Letter'
         },
         {
           color: 'success',
-          img: 'Makeup.svg',
+          img: 'Makeup',
           name: 'Makeup'
         },
         {
           color: 'primary',
-          img: 'Santa.svg',
+          img: 'Santa',
           name: 'Santa'
         },
         {
           color: 'success',
-          img: 'Surfer.svg',
+          img: 'Surfer',
           name: 'Surfer'
         },
         {
           color: 'info',
-          img: 'Vector.svg',
+          img: 'Vector',
           name: 'Vector'
         },
         {
           color: 'warning',
-          img: 'Money-Increase.svg',
+          img: 'Money-Increase',
           name: 'Money Increase'
         },
         {
           color: 'info',
-          img: 'Alien.svg',
+          img: 'Alien',
           name: 'Alien'
         },
         {
           color: 'danger',
-          img: 'Online-Shopping.svg',
+          img: 'Online-Shopping',
           name: 'Online Shopping'
         },
         {
           color: 'warning',
-          img: 'Euro-Coin.svg',
+          img: 'Euro-Coin',
           name: 'Euro'
         },
         {
           color: 'info',
-          img: 'Boss-3.svg',
+          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', ',', ';', ':', '+', '@', '=', '-', '^', '?', '$', '*', '&', '(', '#', '.', '_', ']', ')', '?', '\'', '"', '}', '{']
+      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', ',', ';', ':', '+', '@', '=', '-', '^', '?', '$', '*', '&', '(', '#', '.', '_', ']', ')', '\'', '"', '}', '{']
     }
   }
 

src/app/pages/icons/widgets/kameleon.html

@@ -1,6 +1,6 @@
 <div class="row clearfix">
   <div class="kameleon-row" ng-repeat="icon in icons.kameleonIcons">
-    <div class="kameleon-icon"><img ng-src="img/{{icon.img}}"><span>{{icon.name}}</span></div>
+    <div class="kameleon-icon"><img ng-src="{{:: (icon.img | kameleonImg )}}"><span>{{icon.name}}</span></div>
   </div>
 </div>
 

src/app/pages/icons/widgets/kameleonRounded.html

@@ -1,6 +1,6 @@
 <div class="row clearfix">
   <div class="kameleon-row" ng-repeat="icon in icons.kameleonRoundedIcons">
-    <div class="kameleon-icon with-round-bg {{icon.color}}"><img ng-src="img/{{icon.img}}"><span>{{ icon.name }}</span></div>
+    <div class="kameleon-icon with-round-bg {{icon.color}}"><img ng-src="{{::( icon.img | kameleonImg )}}"><span>{{ icon.name }}</span></div>
   </div>
 </div>
 

src/app/pages/maps/map-bubbles/MapBubblePageCtrl.js

@@ -9,7 +9,7 @@
       .controller('MapBubblePageCtrl', MapBubblePageCtrl);
 
   /** @ngInject */
-  function MapBubblePageCtrl(layoutColors, $timeout) {
+  function MapBubblePageCtrl(layoutColors, $timeout, layoutPaths) {
     var latlong = {};
     latlong['AD'] = {'latitude': 42.5, 'longitude': 1.5};
     latlong['AE'] = {'latitude': 24, 'longitude': 54};
@@ -452,7 +452,7 @@
       unlistedAreasAlpha: 0.1
     };
     map.imagesSettings.balloonText = '<span style="font-size:14px;"><b>[[title]]</b>: [[value]]</span>';
-    map.pathToImages = 'img/';
+    map.pathToImages = layoutPaths.images.amChart;
 
     var dataProvider = {
       mapVar: AmCharts.maps.worldLow,

src/app/pages/maps/map-lines/MapLinesPageCtrl.js

@@ -9,7 +9,7 @@
       .controller('MapLinesPageCtrl', MapLinesPageCtrl);
 
   /** @ngInject */
-  function MapLinesPageCtrl(layoutColors, $timeout) {
+  function MapLinesPageCtrl(layoutColors, $timeout, layoutPaths) {
     // svg path for target icon
     var targetSVG = 'M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z';
 // svg path for plane icon
@@ -269,7 +269,7 @@
         export: {
           'enabled': true
         },
-        pathToImages: 'img/'
+        pathToImages: layoutPaths.images.amChart
       } );
     }, 100);
 

src/app/pages/profile/ProfilePageCtrl.js

@@ -9,11 +9,11 @@
       .controller('ProfilePageCtrl', ProfilePageCtrl);
 
   /** @ngInject */
-  function ProfilePageCtrl($scope, fileReader) {
+  function ProfilePageCtrl($scope, fileReader, $filter) {
-    $scope.picture = 'img/pic-profile.png';
+    $scope.picture = $filter('profilePicture')('Nasta');
 
     $scope.removePicture = function () {
-      $scope.picture = 'img/no-photo.png';
+      $scope.picture = $filter('appImage')('theme/no-photo.png');
       $scope.noPicture = true;
     };
 

src/app/pages/tables/TablesPageCtrl.js

@@ -178,7 +178,7 @@
 
     $scope.metricsTableData = [
       {
-        image: 'img/chrome.svg',
+        image: 'app/browsers/chrome.svg',
         browser: 'Google Chrome',
         visits: '10,392',
         isVisitsUp: true,
@@ -188,7 +188,7 @@
         isPercentUp: true
       },
       {
-        image: 'img/firefox.svg',
+        image: 'app/browsers/firefox.svg',
         browser: 'Mozilla Firefox',
         visits: '7,873',
         isVisitsUp: true,
@@ -198,7 +198,7 @@
         isPercentUp: true
       },
       {
-        image: 'img/ie.svg',
+        image: 'app/browsers/ie.svg',
         browser: 'Internet Explorer',
         visits: '5,890',
         isVisitsUp: false,
@@ -208,7 +208,7 @@
         isPercentUp: false
       },
       {
-        image: 'img/safari.svg',
+        image: 'app/browsers/safari.svg',
         browser: 'Safari',
         visits: '4,001',
         isVisitsUp: false,
@@ -218,7 +218,7 @@
         isPercentUp: true
       },
       {
-        image: 'img/opera.svg',
+        image: 'app/browsers/opera.svg',
         browser: 'Opera',
         visits: '1,833',
         isVisitsUp: true,

src/app/pages/tables/widgets/borderedTable.html

@@ -11,7 +11,7 @@
     </thead>
     <tbody>
     <tr ng-repeat="item in metricsTableData">
-      <td><img ng-src="{{item.image}}" width="20" height="20"></td>
+      <td><img ng-src="{{::( item.image | appImage )}}" width="20" height="20"></td>
       <td ng-class="nowrap">{{item.browser}}</td>
       <td class="align-right">{{item.visits}}</td>
       <td class="align-right">{{item.purchases}}</td>

src/app/pages/tables/widgets/hoverRows.html

@@ -14,7 +14,7 @@
     </thead>
     <tbody>
     <tr ng-repeat="item in metricsTableData">
-      <td><img ng-src="{{item.image}}" width="20" height="20"></td>
+      <td><img ng-src="{{::( item.image | appImage )}}" width="20" height="20"></td>
       <td ng-class="nowrap">{{item.browser}}</td>
       <td class="align-right">{{item.visits}}</td>
       <td class="table-arr"><i ng-class="{'icon-up': item.isVisitsUp, 'icon-down': !item.isVisitsUp }"></i></td>

src/app/pages/typography/typography.html

@@ -170,7 +170,7 @@
     <blur-panel class-container="banner-column-panel">
       <div class="banner">
         <div class="large-banner-wrapper">
-          <img src="img/banner.png" alt=""/>
+          <img ng-src="{{::( 'app/typography/banner.png' | appImage )}}" alt=""/>
         </div>
         <div class="banner-text-wrapper">
           <div class="banner-text">
@@ -187,7 +187,7 @@
 
         <div class="row">
           <div class="col-sm-6">
-            <div class="img-wrapper"><img src="img/typo03.png" alt="" title=""/></div>
+            <div class="img-wrapper"><img ng-src="{{::( 'app/typography/typo03.png' | appImage )}}" alt="" title=""/></div>
             <p>Vel elit, eros elementum, id lacinia, duis non ut ut tortor blandit. Mauris <a
                 href>dapibus</a> magna rutrum. Ornare neque suspendisse <a
                 href>phasellus wisi</a>, quam cras pede rutrum suspendisse, <a
@@ -197,7 +197,7 @@
               arcu nulla.</p>
           </div>
           <div class="col-sm-6">
-            <div class="img-wrapper"><img src="img/typo01.png" alt="" title=""/></div>
+            <div class="img-wrapper"><img ng-src="{{::( 'app/typography/typo01.png' | appImage )}}" alt="" title=""/></div>
             <p>Et suspendisse, adipiscing fringilla ornare sit ligula sed, vel nam. Interdum et justo nulla,
               fermentum
               lobortis purus ut eu, duis nibh dolor massa tristique elementum, nibh iste potenti risus fusce
@@ -221,20 +221,20 @@
         </div>
         <div class="row">
           <div class="col-sm-4">
-            <div class="img-wrapper"><img src="img/typo04.png" alt=""/></div>
+            <div class="img-wrapper"><img ng-src="{{::( 'app/typography/typo04.png' | appImage )}}" alt=""/></div>
             <p>Eget augue, lacus erat ante egestas scelerisque aliquam, metus molestie leo in habitasse magna
               maecenas</p>
             <a href class="learn-more">Lean more</a>
           </div>
           <div class="col-sm-4">
-            <div class="img-wrapper"><img src="img/typo05.png" alt=""/></div>
+            <div class="img-wrapper"><img ng-src="{{::( 'app/typography/typo05.png' | appImage )}}" alt=""/></div>
             <p>Augue massa et parturient, suspendisse orci nec scelerisque sit, integer nam mauris pede consequat
               in
               velit</p>
             <a href class="learn-more">Lean more</a>
           </div>
           <div class="col-sm-4">
-            <div class="img-wrapper"><img src="img/typo06.png" alt=""/></div>
+            <div class="img-wrapper"><img ng-src="{{::( 'app/typography/typo06.png' | appImage )}}" alt=""/></div>
             <p>Eget turpis, tortor lobortis porttitor, vestibulum nullam vehicula aliquam</p>
             <a href class="learn-more">Lean more</a>
           </div>

src/app/theme/components/pageTop/pageTop.html

@@ -10,7 +10,7 @@
   <div class="user-profile clearfix">
     <div class="al-user-profile dropdown">
       <a href class="dropdown-toggle" data-toggle="dropdown">
-        <img src="img/Nasta.png">
+        <img ng-src="{{::( 'Nasta' | profilePicture )}}">
       </a>
       <div class="dropdown-menu top-dropdown-menu profile-dropdown">
         <i class="dropdown-arr"></i>

src/app/theme/filters/image/appImage.js

@@ -0,0 +1,18 @@
+/**
+ * @author v.lugovsky
+ * created on 17.12.2015
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.theme')
+      .filter('appImage', appImage);
+
+  /** @ngInject */
+  function appImage(layoutPaths) {
+    return function(input) {
+      return layoutPaths.images.root + input;
+    };
+  }
+
+})();

src/app/theme/filters/image/kameleonImg.js

@@ -0,0 +1,18 @@
+/**
+ * @author v.lugovsky
+ * created on 17.12.2015
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.theme')
+      .filter('kameleonImg', kameleonImg);
+
+  /** @ngInject */
+  function kameleonImg(layoutPaths) {
+    return function(input) {
+      return layoutPaths.images.root + 'theme/icon/kameleon/' + input + '.svg';
+    };
+  }
+
+})();

src/app/theme/filters/image/profilePicture.js

@@ -0,0 +1,19 @@
+/**
+ * @author v.lugovsky
+ * created on 17.12.2015
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.theme')
+      .filter('profilePicture', profilePicture);
+
+  /** @ngInject */
+  function profilePicture(layoutPaths) {
+    return function(input, ext) {
+      ext = ext || 'png';
+      return layoutPaths.images.profile + input + '.' + ext;
+    };
+  }
+
+})();

src/app/theme/theme.constants.js

@@ -5,6 +5,8 @@
 (function () {
   'use strict';
 
+  var IMAGES_ROOT = 'assets/img/';
+
   angular.module('BlurAdmin.theme')
       .constant('layoutColors', {
         primary:        '#41bee9',
@@ -30,6 +32,13 @@
       .constant('layoutSizes', {
         resWidthCollapseSidebar: 1200,
         resWidthHideSidebar: 500
+      })
+      .constant('layoutPaths', {
+        images: {
+          root: IMAGES_ROOT,
+          profile: IMAGES_ROOT + 'app/profile/',
+          amChart: 'bower_components/amcharts/dist/amcharts/images/'
+        }
       });
 
 })();