mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-18 08:20:13 +01:00
feed component in progress
This commit is contained in:
nixa
parent
769c115c13
commit
c3d16af979
8 changed files with 414 additions and 17 deletions
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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="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="col-xl-9 col-lg-9 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
|
||||
ba-panel-title="Feed"
|
||||
ba-panel-class="large-panel with-scroll feed-panel">
|
||||
<blur-feed></blur-feed>
|
||||
|
||||
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-xs-12">
|
||||
<ba-card title="Feed"
|
||||
baCardClass="large-panel with-scroll feed-panel">
|
||||
<feed></feed>
|
||||
</ba-card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
32
src/app/pages/dashboard/feed/feed.component.ts
Normal file
32
src/app/pages/dashboard/feed/feed.component.ts
Normal file
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
32
src/app/pages/dashboard/feed/feed.html
Normal file
32
src/app/pages/dashboard/feed/feed.html
Normal file
|
|
@ -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>
|
||||
215
src/app/pages/dashboard/feed/feed.scss
Normal file
215
src/app/pages/dashboard/feed/feed.scss
Normal file
|
|
@ -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);
|
||||
}
|
||||
121
src/app/pages/dashboard/feed/feed.service.ts
Normal file
121
src/app/pages/dashboard/feed/feed.service.ts
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
1
src/app/pages/dashboard/feed/index.ts
Normal file
1
src/app/pages/dashboard/feed/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './feed.component';
|
||||
|
|
@ -28,6 +28,7 @@ export class LineChart {
|
|||
};
|
||||
|
||||
chart.addListener('rendered', zoomChart);
|
||||
zoomChart();
|
||||
|
||||
if (chart.zoomChart) {
|
||||
chart.zoomChart();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue