From c3d16af97953375fdafbb1a0ec1e457fe3d069a3 Mon Sep 17 00:00:00 2001 From: nixa <4dmitr@gmail.com> Date: Thu, 5 May 2016 13:26:28 +0300 Subject: [PATCH] feed component in progress --- .../pages/dashboard/dashboard.component.ts | 3 +- src/app/pages/dashboard/dashboard.html | 26 +-- .../pages/dashboard/feed/feed.component.ts | 32 +++ src/app/pages/dashboard/feed/feed.html | 32 +++ src/app/pages/dashboard/feed/feed.scss | 215 ++++++++++++++++++ src/app/pages/dashboard/feed/feed.service.ts | 121 ++++++++++ src/app/pages/dashboard/feed/index.ts | 1 + .../lineChart/lineChart.component.ts | 1 + 8 files changed, 414 insertions(+), 17 deletions(-) create mode 100644 src/app/pages/dashboard/feed/feed.component.ts create mode 100644 src/app/pages/dashboard/feed/feed.html create mode 100644 src/app/pages/dashboard/feed/feed.scss create mode 100644 src/app/pages/dashboard/feed/feed.service.ts create mode 100644 src/app/pages/dashboard/feed/index.ts diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts index 57275cd4..696c1862 100644 --- a/src/app/pages/dashboard/dashboard.component.ts +++ b/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') diff --git a/src/app/pages/dashboard/dashboard.html b/src/app/pages/dashboard/dashboard.html index 5759744c..88e20f16 100644 --- a/src/app/pages/dashboard/dashboard.html +++ b/src/app/pages/dashboard/dashboard.html @@ -17,30 +17,24 @@
-
-
- -
-
-
- -
-
+
- -
-
- + +
+ + +
+
diff --git a/src/app/pages/dashboard/feed/feed.component.ts b/src/app/pages/dashboard/feed/feed.component.ts new file mode 100644 index 00000000..3387b1ff --- /dev/null +++ b/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; + + constructor(private _feedService:FeedService) { + } + + ngOnInit() { + this._loadFeed(); + } + + expandMessage (message){ + message.expanded = !message.expanded; + } + + private _loadFeed() { + this.feed = this._feedService.getData(); + } +} diff --git a/src/app/pages/dashboard/feed/feed.html b/src/app/pages/dashboard/feed/feed.html new file mode 100644 index 00000000..b40503c4 --- /dev/null +++ b/src/app/pages/dashboard/feed/feed.html @@ -0,0 +1,32 @@ +
+
+
+ +
+
+ + +
+
+
+ {{ message.author }} {{ message.surname}} +
+
+ {{ message.header }} {{ message.text }} +
+
+ + + +
+
+
+ {{ message.time }} +
+
+ {{ message.ago }} +
+
+
+
+
diff --git a/src/app/pages/dashboard/feed/feed.scss b/src/app/pages/dashboard/feed/feed.scss new file mode 100644 index 00000000..56603363 --- /dev/null +++ b/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); +} diff --git a/src/app/pages/dashboard/feed/feed.service.ts b/src/app/pages/dashboard/feed/feed.service.ts new file mode 100644 index 00000000..9047b9cf --- /dev/null +++ b/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; + } +} diff --git a/src/app/pages/dashboard/feed/index.ts b/src/app/pages/dashboard/feed/index.ts new file mode 100644 index 00000000..c2555290 --- /dev/null +++ b/src/app/pages/dashboard/feed/index.ts @@ -0,0 +1 @@ +export * from './feed.component'; diff --git a/src/app/pages/dashboard/lineChart/lineChart.component.ts b/src/app/pages/dashboard/lineChart/lineChart.component.ts index bc721d94..42bf0e6d 100644 --- a/src/app/pages/dashboard/lineChart/lineChart.component.ts +++ b/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();