feed component in progress

src/app/pages/dashboard/dashboard.component.ts

@@ -5,12 +5,13 @@ import {PieChart} from './pieChart';
 import {TrafficChart} from './trafficChart';
 import {UsersMap} from './usersMap';
 import {LineChart} from './lineChart';
+import {Feed} from './feed';
 import {BaCard} from '../../theme/components';
 
 @Component({
   selector: 'dashboard',
   pipes: [],
-  directives: [PopularApp, PieChart, TrafficChart, UsersMap, LineChart, BaCard],
+  directives: [PopularApp, PieChart, TrafficChart, UsersMap, LineChart, Feed, BaCard],
   encapsulation: ViewEncapsulation.None,
   styles: [require('./dashboard.scss')],
   template: require('./dashboard.html')

src/app/pages/dashboard/dashboard.html

@@ -17,30 +17,24 @@
 </div>
 
 <div class="row">
-    <div class="col-xlg-9 col-lg-6 col-md-6 col-sm-12 col-xs-12">
+  <div class="col-xl-9 col-lg-9 col-md-6 col-sm-12 col-xs-12">
-        <div class="row">
-
-        </div>
-    </div>
-</div>
-
-<div class="row">
-  <div class="col-xlg-9 col-lg-6 col-md-6 col-sm-12 col-xs-12">
     <div class="row">
-      <ba-card class="col-xl-8 col-lg-12 col-md-12 col-sm-7 col-xs-12"
+      <ba-card class="col-xl-8 col-lg-8 col-md-12 col-sm-7 col-xs-12"
                title="Revenue" baCardClass="medium-card">
         <line-chart></line-chart>
       </ba-card>
-      <ba-card class="col-xlg-4 col-lg-12 col-md-12 col-sm-5 col-xs-12"
+      <ba-card class="col-xl-4 col-lg-4 col-md-12 col-sm-5 col-xs-12"
                baCardClass="popular-app medium-card">
         <popular-app></popular-app>
       </ba-card>
     </div>
   </div>
-  <div class="col-xlg-3 col-lg-6 col-md-6 col-sm-12 col-xs-12"
+
-       ba-panel
+  <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-xs-12">
-       ba-panel-title="Feed"
+    <ba-card title="Feed"
-       ba-panel-class="large-panel with-scroll feed-panel">
+             baCardClass="large-panel with-scroll feed-panel">
-    <blur-feed></blur-feed>
+      <feed></feed>
+    </ba-card>
   </div>
+
 </div>

src/app/pages/dashboard/feed/feed.component.ts

@@ -0,0 +1,32 @@
+import {Component, ViewEncapsulation} from 'angular2/core';
+
+import {ProfilePicturePipe} from '../../../theme/pipes';
+import {FeedService} from './feed.service';
+
+@Component({
+  selector: 'feed',
+  encapsulation: ViewEncapsulation.None,
+  providers: [FeedService],
+  pipes: [ProfilePicturePipe],
+  styles: [require('./feed.scss')],
+  template: require('./feed.html')
+})
+export class Feed {
+
+  public feed:Array<Object>;
+
+  constructor(private _feedService:FeedService) {
+  }
+
+  ngOnInit() {
+    this._loadFeed();
+  }
+
+  expandMessage (message){
+    message.expanded = !message.expanded;
+  }
+
+  private _loadFeed() {
+    this.feed = this._feedService.getData();
+  }
+}

src/app/pages/dashboard/feed/feed.html

@@ -0,0 +1,32 @@
+<div class="feed-messages-container" track-width="smallContainerWidth" min-width="360">
+  <div class="feed-message" *ngFor="#message of feed" (ngClick)="expandMessage(message)">
+    <div class="message-icon" *ngIf="message.type == 'text-message'">
+      <img class="photo-icon" src="{{ ( message.author | profilePicture ) }}">
+    </div>
+    <div class="message-icon" *ngIf="message.type != 'text-message'">
+      <img class="photo-icon" src="{{ ( message.author | profilePicture ) }}">
+      <span class="sub-photo-icon" [ngClass]="message.type"></span>
+    </div>
+    <div class="text-block text-message">
+      <div class="message-header">
+        <span class="author">{{ message.author }} {{ message.surname}}</span>
+      </div>
+      <div class="message-content line-clamp" [ngClass]="{'line-clamp-2' : !message.expanded}">
+        <span *ngIf="message.preview">{{ message.header }} </span>{{ message.text }}
+      </div>
+      <div class="preview" [ngClass]="{'hidden': !message.expanded}" *ngIf="message.preview">
+        <a href="{{ message.link }}" target="_blank">
+          <!--<img src="{{ ( message.preview | appImage )}}">-->
+        </a>
+      </div>
+      <div [ngClass]="{'hidden': !message.expanded}" class="message-time">
+        <div class="post-time">
+          {{ message.time }}
+        </div>
+        <div class="ago-time">
+          {{ message.ago }}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pages/dashboard/feed/feed.scss

@@ -0,0 +1,215 @@
+@import '../../../theme/sass/conf/conf';
+
+.feed-panel .panel-body {
+  padding: 10px 0;
+}
+
+.feed-message {
+  $text-message-color: $default;
+  $video-message-color: $danger;
+  $image-message-color: $success;
+  $geo-message-color: $primary;
+  padding: 10px 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+  &:first-child {
+    padding-top: 0;
+  }
+
+  .message-icon {
+    cursor: pointer;
+    width: 60px;
+    height: 60px;
+    float: left;
+    position: relative;
+    margin-left: 20px;
+    > img, .media-icon {
+      border-radius: 30px;
+      width: 100%;
+      height: 100%;
+    }
+
+    .sub-photo-icon {
+      display: inline-block;
+      padding: 4px;
+      &:after {
+        content: '';
+        display: inline-block;
+        width: 22px;
+        height: 22px;
+        background-size: contain;
+      }
+      &.video-message {
+        background: $video-message-color;
+        &:after {
+          @include bg-image('theme/icon/feed/feed-video.svg');
+        }
+      }
+      &.image-message {
+        background: $image-message-color;
+        &:after {
+          width: 21px;
+          height: 21px;
+          margin-top: 1px;
+          margin-left: 1px;
+          border-radius: 5px;
+          @include bg-image('theme/icon/feed/feed-image.svg');
+        }
+      }
+      &.geo-message {
+        background: $geo-message-color;
+        &:after {
+          width: 22px;
+          height: 22px;
+          @include bg-image('theme/icon/feed/feed-location.svg');
+        }
+      }
+    }
+
+    .sub-photo-icon {
+      position: absolute;
+      width: 30px;
+      height: 30px;
+      right: -2px;
+      bottom: -4px;
+      border-radius: 15px;
+    }
+  }
+
+  .text-block {
+    cursor: pointer;
+    position: relative;
+    border-radius: 5px;
+    margin: 0 0 0 80px;
+    padding: 5px 20px;
+    color: #fff;
+    width: 280px;
+    height: 70px;
+
+    &.text-message {
+      font-size: 12px;
+      width: inherit;
+      max-width: calc(100% - 80px);
+      height: inherit;
+      min-height: 60px;
+      &:before {
+        display: block;
+      }
+      .message-content {
+        font-size: 12px;
+        line-height: 15px;
+        font-weight: $font-light;
+      }
+    }
+    &.small-message {
+      width: 155px;
+      height: 145px;
+      .preview {
+        bottom: 0;
+        top: initial;
+        height: 87px;
+        img {
+          width: 155px;
+          height: 87px;
+          border-radius: 0 0 5px 5px;
+        }
+      }
+    }
+  }
+
+  .message-header {
+    font-size: 12px;
+    padding-bottom: 5px;
+    .author {
+      font-size: 13px;
+      padding-right: 5px;
+    }
+  }
+
+  .message-content {
+    font-size: 18px;
+    line-height: 20px;
+  }
+
+  .preview {
+    transition: 0s linear all;
+    display: inline-block;
+    img {
+      padding-top: 10px;
+      width: 100%;
+      height: auto;
+      float: none !important;
+    }
+  }
+
+  .message-time {
+    width: 100%;
+    left: 0;
+    font-size: 11px;
+    padding-top: 10px;
+    color: $help-text;
+    margin-bottom: 5px;
+    .post-time {
+      float: left;
+    }
+    .ago-time {
+      float: right;
+    }
+  }
+}
+
+.line-clamp {
+  display: block;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  position: relative;
+
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 !important;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  .line-clamp:after {
+    content: '...';
+    text-align: right;
+    bottom: 0;
+    right: 0;
+    width: 25%;
+    display: block;
+    position: absolute;
+    height: calc(1em * 1.2);
+  }
+}
+
+@supports (-webkit-line-clamp: 1) {
+  .line-clamp:after {
+    display: none !important;
+  }
+}
+
+.line-clamp-1 {
+  -webkit-line-clamp: 1;
+  height: calc(1em * 1.2 * 1);
+}
+
+.line-clamp-2 {
+  -webkit-line-clamp: 2;
+  height: calc(1em * 1.2 * 2);
+}
+
+.line-clamp-3 {
+  -webkit-line-clamp: 3;
+  height: calc(1em * 1.2 * 3);
+}
+
+.line-clamp-4 {
+  -webkit-line-clamp: 4;
+  height: calc(1em * 1.2 * 4);
+}
+
+.line-clamp-5 {
+  -webkit-line-clamp: 5;
+  height: calc(1em * 1.2 * 5);
+}

src/app/pages/dashboard/feed/feed.service.ts

@@ -0,0 +1,121 @@
+import {Injectable} from 'angular2/core';
+
+@Injectable()
+export class FeedService {
+
+  private _data = [
+    {
+      type: 'text-message',
+      author: 'Kostya',
+      surname: 'Danovsky',
+      header: 'Posted new message',
+      text: 'Guys, check this out: \nA police officer found a perfect hiding place for watching for speeding motorists. One day, the officer was amazed when everyone was under the speed limit, so he investigated and found the problem. A 10 years old boy was standing on the side of the road with a huge hand painted sign which said "Radar Trap Ahead." A little more investigative work led the officer to the boy\'s accomplice: another boy about 100 yards beyond the radar trap with a sign reading "TIPS" and a bucket at his feet full of change.',
+      time: 'Today 11:55 pm',
+      ago: '25 minutes ago',
+      expanded: false,
+    }, {
+      type: 'video-message',
+      author: 'Andrey',
+      surname: 'Hrabouski',
+      header: 'Added new video',
+      text: '"Vader and Me"',
+      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',
+      expanded: false,
+    }, {
+      type: 'image-message',
+      author: 'Vlad',
+      surname: 'Lugovsky',
+      header: 'Added new image',
+      text: '"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',
+      expanded: false,
+    }, {
+      type: 'text-message',
+      author: 'Nasta',
+      surname: 'Linnie',
+      header: 'Posted new message',
+      text: 'Haha lol',
+      time: '11.11.2015',
+      ago: '2 days ago',
+      expanded: false,
+    }, {
+      type: 'geo-message',
+      author: 'Nick',
+      surname: 'Cat',
+      header: 'Posted location',
+      text: '"New York, USA"',
+      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',
+      expanded: false,
+    }, {
+      type: 'text-message',
+      author: 'Vlad',
+      surname: 'Lugovsky',
+      header: 'Posted new message',
+      text: "First snake: I hope I'm not poisonous. Second snake: Why? First snake: Because I bit my lip!",
+      time: '12.11.2015',
+      ago: '3 days ago',
+      expanded: false,
+    }, {
+      type: 'text-message',
+      author: 'Andrey',
+      surname: 'Hrabouski',
+      header: 'Posted new message',
+      text: 'How do you smuggle an elephant across the border? Put a slice of bread on each side, and call him "lunch".',
+      time: '14.11.2015',
+      ago: '5 days ago',
+      expanded: false,
+    }, {
+      type: 'text-message',
+      author: 'Nasta',
+      surname: 'Linnie',
+      header: 'Posted new message',
+      text: 'When your hammer is C++, everything begins to look like a thumb.',
+      time: '14.11.2015',
+      ago: '5 days ago',
+      expanded: false,
+    }, {
+      type: 'text-message',
+      author: 'Alexander',
+      surname: 'Demeshko',
+      header: 'Posted new message',
+      text: '“I mean, they say you die twice. One time when you stop breathing and a second time, a bit later on, when somebody says your name for the last time." ©',
+      time: '15.11.2015',
+      ago: '6 days ago',
+      expanded: false,
+    }, {
+      type: 'image-message',
+      author: 'Nick',
+      surname: 'Cat',
+      header: 'Posted photo',
+      text: '"Protein Heroes"',
+      preview: 'app/feed/genom.png',
+      link: 'https://dribbble.com/shots/2504810-Protein-Heroes',
+      time: '16.11.2015',
+      ago: '7 days ago',
+      expanded: false,
+    },
+    {
+      type: 'text-message',
+      author: 'Kostya',
+      surname: 'Danovsky',
+      header: 'Posted new message',
+      text: 'Why did the CoffeeScript developer keep getting lost? Because he couldn\'t find his source without a map',
+      time: '18.11.2015',
+      ago: '9 days ago',
+      expanded: false,
+    }
+  ];
+
+  getData() {
+    return this._data;
+  }
+}

src/app/pages/dashboard/feed/index.ts

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

src/app/pages/dashboard/lineChart/lineChart.component.ts

@@ -28,6 +28,7 @@ export class LineChart {
     };
 
     chart.addListener('rendered', zoomChart);
+    zoomChart();
     
     if (chart.zoomChart) {
       chart.zoomChart();