mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 12:35:07 +00:00
profile page + some more tweaks
This commit is contained in:
Sercan Yemen
parent
be8195663e
commit
abf8c61d8c
|
|
@ -162,7 +162,7 @@ export class FuseNavigation
|
||||||
{
|
{
|
||||||
'title': 'Profile',
|
'title': 'Profile',
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
'icon' : 'account',
|
'icon' : 'person',
|
||||||
'url' : '/pages/profile'
|
'url' : '/pages/profile'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -13,19 +13,8 @@
|
||||||
@include mat-core();
|
@include mat-core();
|
||||||
|
|
||||||
// Include theme styles for core and each component used in your app.
|
// Include theme styles for core and each component used in your app.
|
||||||
// Alternatively, you can import and @include the theme mixins for each component
|
|
||||||
// that you are using.
|
|
||||||
@include angular-material-theme($theme);
|
@include angular-material-theme($theme);
|
||||||
|
|
||||||
// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
|
|
||||||
@include mat-base-typography($custom-typography);
|
|
||||||
|
|
||||||
// Override typography for a specific Angular Material components.
|
|
||||||
@include mat-checkbox-typography($custom-typography);
|
|
||||||
|
|
||||||
// Override typography for all Angular Material, including mat-base-typography and all components.
|
|
||||||
@include angular-material-typography($custom-typography);
|
|
||||||
|
|
||||||
// Partials
|
// Partials
|
||||||
@import "partials/reset";
|
@import "partials/reset";
|
||||||
@import "partials/normalize";
|
@import "partials/normalize";
|
||||||
|
|
|
||||||
|
|
@ -72,3 +72,10 @@ button {
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
vertical-align: top;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
@ -1,17 +1,12 @@
|
||||||
@import '~@angular/material/theming';
|
@import '~@angular/material/theming';
|
||||||
|
|
||||||
|
// Palettes
|
||||||
$primary: mat-palette($mat-indigo);
|
$primary: mat-palette($mat-indigo);
|
||||||
$accent: mat-palette($mat-blue, A200, A100, A400);
|
$accent: mat-palette($mat-blue, A200, A100, A400);
|
||||||
|
|
||||||
// The warn palette is optional (defaults to red).
|
|
||||||
$warn: mat-palette($mat-red);
|
$warn: mat-palette($mat-red);
|
||||||
|
|
||||||
// Create the theme object (a Sass map containing all of the palettes).
|
// Create the theme object (a Sass map containing all of the palettes).
|
||||||
$theme: mat-light-theme($primary, $accent, $warn);
|
$theme: mat-light-theme($primary, $accent, $warn);
|
||||||
|
|
||||||
$custom-typography: mat-typography-config(
|
|
||||||
$font-family: 'Roboto, "Helvetica Neue", sans-serif'
|
|
||||||
);
|
|
||||||
|
|
||||||
$background: map-get($theme, background);
|
$background: map-get($theme, background);
|
||||||
$foreground: map-get($theme, foreground);
|
$foreground: map-get($theme, foreground);
|
||||||
|
|
@ -1,39 +1,30 @@
|
||||||
import { InMemoryDbService } from 'angular-in-memory-web-api';
|
import { InMemoryDbService } from 'angular-in-memory-web-api';
|
||||||
|
|
||||||
import { MailFakeDb } from './mail';
|
import { MailFakeDb } from './mail';
|
||||||
import { ChatFakeDb } from './chat';
|
import { ChatFakeDb } from './chat';
|
||||||
import { CalendarFakeDb } from './calendar';
|
import { CalendarFakeDb } from './calendar';
|
||||||
import { TodoFakeDb } from './todo';
|
import { TodoFakeDb } from './todo';
|
||||||
|
import { ProfileFakeDb } from './profile';
|
||||||
|
|
||||||
export class FuseFakeDbService implements InMemoryDbService
|
export class FuseFakeDbService implements InMemoryDbService
|
||||||
{
|
{
|
||||||
createDb()
|
createDb()
|
||||||
{
|
{
|
||||||
return {
|
return {
|
||||||
'mail-mails' : MailFakeDb.mails,
|
'mail-mails' : MailFakeDb.mails,
|
||||||
'mail-folders' : MailFakeDb.folders,
|
'mail-folders' : MailFakeDb.folders,
|
||||||
'mail-filters' : MailFakeDb.filters,
|
'mail-filters' : MailFakeDb.filters,
|
||||||
'mail-labels' : MailFakeDb.labels,
|
'mail-labels' : MailFakeDb.labels,
|
||||||
'chat-contacts': ChatFakeDb.contacts,
|
'chat-contacts' : ChatFakeDb.contacts,
|
||||||
'chat-chats' : ChatFakeDb.chats,
|
'chat-chats' : ChatFakeDb.chats,
|
||||||
'chat-user' : ChatFakeDb.user,
|
'chat-user' : ChatFakeDb.user,
|
||||||
'calendar' : CalendarFakeDb.data,
|
'calendar' : CalendarFakeDb.data,
|
||||||
'todo-todos' : TodoFakeDb.todos,
|
'todo-todos' : TodoFakeDb.todos,
|
||||||
'todo-filters' : TodoFakeDb.filters,
|
'todo-filters' : TodoFakeDb.filters,
|
||||||
'todo-tags' : TodoFakeDb.tags
|
'todo-tags' : TodoFakeDb.tags,
|
||||||
|
'profile-timeline' : ProfileFakeDb.timeline,
|
||||||
|
'profile-photos-videos': ProfileFakeDb.photosVideos,
|
||||||
|
'profile-about' : ProfileFakeDb.about
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
/*get(args): Observable<Response>
|
|
||||||
{
|
|
||||||
console.log(args);
|
|
||||||
|
|
||||||
// return new Observable<Response>
|
|
||||||
|
|
||||||
return Observable.create((observer: Observer<Response>) =>
|
|
||||||
{
|
|
||||||
const response = new Response({id: '1111'});
|
|
||||||
observer.next(response);
|
|
||||||
});
|
|
||||||
|
|
||||||
}*/
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
360
src/app/fuse-fake-db/profile.ts
Normal file
360
src/app/fuse-fake-db/profile.ts
Normal file
|
|
@ -0,0 +1,360 @@
|
||||||
|
export class ProfileFakeDb
|
||||||
|
{
|
||||||
|
public static timeline = {
|
||||||
|
activities: [
|
||||||
|
{
|
||||||
|
'user' : {
|
||||||
|
'name' : 'Alice Freeman',
|
||||||
|
'avatar': 'assets/images/avatars/alice.jpg'
|
||||||
|
},
|
||||||
|
'message': 'started following you.',
|
||||||
|
'time' : '13 mins. ago'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'user' : {
|
||||||
|
'name' : 'Andrew Green',
|
||||||
|
'avatar': 'assets/images/avatars/andrew.jpg'
|
||||||
|
},
|
||||||
|
'message': 'sent you a message.',
|
||||||
|
'time' : 'June 10,2015'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'user' : {
|
||||||
|
'name' : 'Garry Newman',
|
||||||
|
'avatar': 'assets/images/avatars/garry.jpg'
|
||||||
|
},
|
||||||
|
'message': 'shared a public post with your group.',
|
||||||
|
'time' : 'June 9,2015'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'user' : {
|
||||||
|
'name' : 'Carl Henderson',
|
||||||
|
'avatar': 'assets/images/avatars/carl.jpg'
|
||||||
|
},
|
||||||
|
'message': 'wants to play Fallout Shelter with you.',
|
||||||
|
'time' : 'June 8,2015'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'user' : {
|
||||||
|
'name' : 'Jane Dean',
|
||||||
|
'avatar': 'assets/images/avatars/jane.jpg'
|
||||||
|
},
|
||||||
|
'message': 'started following you.',
|
||||||
|
'time' : 'June 7,2015'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'user' : {
|
||||||
|
'name' : 'Juan Carpenter',
|
||||||
|
'avatar': 'assets/images/avatars/james.jpg'
|
||||||
|
},
|
||||||
|
'message': 'sent you a message.',
|
||||||
|
'time' : 'June 6,2015'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'user' : {
|
||||||
|
'name' : 'Judith Burton',
|
||||||
|
'avatar': 'assets/images/avatars/joyce.jpg'
|
||||||
|
},
|
||||||
|
'message': 'shared a photo with you.',
|
||||||
|
'time' : 'June 5,2015'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'user' : {
|
||||||
|
'name' : 'Vincent Munoz',
|
||||||
|
'avatar': 'assets/images/avatars/vincent.jpg'
|
||||||
|
},
|
||||||
|
'message': 'shared a photo with you.',
|
||||||
|
'time' : 'June 4,2015'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
posts : [
|
||||||
|
{
|
||||||
|
'user' : {
|
||||||
|
'name' : 'Garry Newman',
|
||||||
|
'avatar': 'assets/images/avatars/garry.jpg'
|
||||||
|
},
|
||||||
|
'message' : 'Remember the place we were talking about the other night? Found it!',
|
||||||
|
'time' : '32 minutes ago',
|
||||||
|
'type' : 'post',
|
||||||
|
'like' : 5,
|
||||||
|
'share' : 21,
|
||||||
|
'media' : {
|
||||||
|
'type' : 'image',
|
||||||
|
'preview': 'assets/images/etc/early-sunrise.jpg'
|
||||||
|
},
|
||||||
|
'comments': [
|
||||||
|
{
|
||||||
|
'user' : {
|
||||||
|
'name' : 'Alice Freeman',
|
||||||
|
'avatar': 'assets/images/avatars/alice.jpg'
|
||||||
|
},
|
||||||
|
'time' : 'June 10, 2015',
|
||||||
|
'message': 'That’s a wonderful place. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et eleifend ligula. Fusce posuere in sapien ac facilisis. Etiam sit amet justo non felis ornare feugiat.'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'user' : {
|
||||||
|
'name' : 'Andrew Green',
|
||||||
|
'avatar': 'assets/images/avatars/andrew.jpg'
|
||||||
|
},
|
||||||
|
'message' : 'Hey, man! Check this, it’s pretty awesome!',
|
||||||
|
'time' : 'June 12, 2015',
|
||||||
|
'type' : 'article',
|
||||||
|
'like' : 98,
|
||||||
|
'share' : 6,
|
||||||
|
'article' : {
|
||||||
|
'title' : 'The Fallout 4 Pip-Boy Edition Is Back In Stock Now',
|
||||||
|
'subtitle': 'Kotaku',
|
||||||
|
'excerpt' : 'The Fallout 4 Pip-Boy edition is back in stock at Gamestop, for all 3 platforms. Additionally, Walmart also has it in stock for the PS4 and Xbox One as of this writing, as does Best Buy.',
|
||||||
|
'media' : {
|
||||||
|
'type' : 'image',
|
||||||
|
'preview': 'assets/images/etc/fallout.jpg'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'comments': [
|
||||||
|
{
|
||||||
|
'user' : {
|
||||||
|
'name' : 'Alice Freeman',
|
||||||
|
'avatar': 'assets/images/avatars/alice.jpg'
|
||||||
|
},
|
||||||
|
'time' : 'June 10, 2015',
|
||||||
|
'message': 'That’s a wonderful place. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et eleifend ligula. Fusce posuere in sapien ac facilisis. Etiam sit amet justo non felis ornare feugiat.'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'user' : {
|
||||||
|
'name' : 'Carl Henderson',
|
||||||
|
'avatar': 'assets/images/avatars/carl.jpg'
|
||||||
|
},
|
||||||
|
'message': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et eleifend ligula. Fusce posuere in sapien ac facilisis. Etiam sit amet justo non felis ornare feugiat. Aenean lorem ex, ultrices sit amet ligula sed...',
|
||||||
|
'time' : 'June 10, 2015',
|
||||||
|
'type' : 'something',
|
||||||
|
'like' : 4,
|
||||||
|
'share' : 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
public static photosVideos = [
|
||||||
|
{
|
||||||
|
'name' : 'June 2015',
|
||||||
|
'info' : '5 Photos',
|
||||||
|
'media': [
|
||||||
|
{
|
||||||
|
'type' : 'photo',
|
||||||
|
'title' : 'Mountain Sunset',
|
||||||
|
'preview': 'assets/images/etc/mountain-sunset.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'type' : 'photo',
|
||||||
|
'title' : 'Mountain Lake',
|
||||||
|
'preview': 'assets/images/etc/mountain-lake.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'type' : 'photo',
|
||||||
|
'title' : 'Hot air balloons',
|
||||||
|
'preview': 'assets/images/etc/air-balloons.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'type' : 'photo',
|
||||||
|
'title' : 'Cactus',
|
||||||
|
'preview': 'assets/images/etc/cactus.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'type' : 'photo',
|
||||||
|
'title' : 'Road Trip',
|
||||||
|
'preview': 'assets/images/etc/road-trip.jpg'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name' : 'May 2015',
|
||||||
|
'info' : '7 Photos, 3 Videos',
|
||||||
|
'media': [
|
||||||
|
{
|
||||||
|
'type' : 'photo',
|
||||||
|
'title' : 'Mountain Sunset',
|
||||||
|
'preview': 'assets/images/etc/mountain-sunset.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'type' : 'photo',
|
||||||
|
'title' : 'Mountain Lake',
|
||||||
|
'preview': 'assets/images/etc/mountain-lake.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'type' : 'photo',
|
||||||
|
'title' : 'Hot air balloons',
|
||||||
|
'preview': 'assets/images/etc/air-balloons.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'type' : 'photo',
|
||||||
|
'title' : 'Cactus',
|
||||||
|
'preview': 'assets/images/etc/cactus.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'type' : 'photo',
|
||||||
|
'title' : 'Road Trip',
|
||||||
|
'preview': 'assets/images/etc/road-trip.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'type' : 'photo',
|
||||||
|
'title' : 'Mountain Sunset',
|
||||||
|
'preview': 'assets/images/etc/mountain-sunset.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'type' : 'photo',
|
||||||
|
'title' : 'Mountain Lake',
|
||||||
|
'preview': 'assets/images/etc/mountain-lake.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'type' : 'photo',
|
||||||
|
'title' : 'Hot air balloons',
|
||||||
|
'preview': 'assets/images/etc/air-balloons.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'type' : 'photo',
|
||||||
|
'title' : 'Cactus',
|
||||||
|
'preview': 'assets/images/etc/cactus.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'type' : 'photo',
|
||||||
|
'title' : 'Road Trip',
|
||||||
|
'preview': 'assets/images/etc/road-trip.jpg'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name' : 'April 2015',
|
||||||
|
'info' : '5 Photos',
|
||||||
|
'media': [
|
||||||
|
{
|
||||||
|
'type' : 'photo',
|
||||||
|
'title' : 'Mountain Sunset',
|
||||||
|
'preview': 'assets/images/etc/mountain-sunset.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'type' : 'photo',
|
||||||
|
'title' : 'Mountain Lake',
|
||||||
|
'preview': 'assets/images/etc/mountain-lake.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'type' : 'photo',
|
||||||
|
'title' : 'Hot air balloons',
|
||||||
|
'preview': 'assets/images/etc/air-balloons.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'type' : 'photo',
|
||||||
|
'title' : 'Cactus',
|
||||||
|
'preview': 'assets/images/etc/cactus.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'type' : 'photo',
|
||||||
|
'title' : 'Road Trip',
|
||||||
|
'preview': 'assets/images/etc/road-trip.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'type' : 'photo',
|
||||||
|
'title' : 'Mountain Sunset',
|
||||||
|
'preview': 'assets/images/etc/mountain-sunset.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'type' : 'photo',
|
||||||
|
'title' : 'Mountain Lake',
|
||||||
|
'preview': 'assets/images/etc/mountain-lake.jpg'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
public static about = {
|
||||||
|
'general': {
|
||||||
|
'gender' : 'Female',
|
||||||
|
'birthday' : 'May 8th, 1988',
|
||||||
|
'locations': [
|
||||||
|
'Istanbul, Turkey',
|
||||||
|
'New York, USA'
|
||||||
|
],
|
||||||
|
'about' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget pharetra felis, sed ullamcorper dui. Sed et elementum neque. Vestibulum pellente viverra ultrices. Etiam justo augue, vehicula ac gravida a, interdum sit amet nisl. Integer vitae nisi id nibh dictum mollis in vitae tortor.'
|
||||||
|
},
|
||||||
|
'work' : {
|
||||||
|
'occupation': 'Developer',
|
||||||
|
'skills' : 'C#, PHP, Javascript, Angular, JS, HTML, CSS',
|
||||||
|
'jobs' : [
|
||||||
|
{
|
||||||
|
'company': 'Self-Employed',
|
||||||
|
'date' : '2010 - Now'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'company': 'Google',
|
||||||
|
'date' : '2008 - 2010'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
'contact': {
|
||||||
|
'address' : 'Ut pharetra luctus est quis sodales. Duis nisi tortor, bibendum eget tincidunt, aliquam ac elit. Mauris nec euismod odio.',
|
||||||
|
'tel' : [
|
||||||
|
'+6 555 6600',
|
||||||
|
'+9 555 5255'
|
||||||
|
],
|
||||||
|
'websites': [
|
||||||
|
'withinpixels.com'
|
||||||
|
],
|
||||||
|
'emails' : [
|
||||||
|
'mail@withinpixels.com',
|
||||||
|
'mail@creapond.com'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
'groups' : [
|
||||||
|
{
|
||||||
|
'logo' : 'assets/images/logos/android.png',
|
||||||
|
'name' : 'Android',
|
||||||
|
'category': 'Technology',
|
||||||
|
'members' : '1.856.546'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'logo' : 'assets/images/logos/google.png',
|
||||||
|
'name' : 'Google',
|
||||||
|
'category': 'Web',
|
||||||
|
'members' : '1.226.121'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'logo' : 'assets/images/logos/fallout.png',
|
||||||
|
'name' : 'Fallout',
|
||||||
|
'category': 'Games',
|
||||||
|
'members' : '526.142'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'friends': [
|
||||||
|
{
|
||||||
|
'name' : 'Garry Newman',
|
||||||
|
'avatar': 'assets/images/avatars/garry.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name' : 'Carl Henderson',
|
||||||
|
'avatar': 'assets/images/avatars/carl.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name' : 'Jane Dean',
|
||||||
|
'avatar': 'assets/images/avatars/jane.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name' : 'Garry Arnold',
|
||||||
|
'avatar': 'assets/images/avatars/garry.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name' : 'Vincent Munoz',
|
||||||
|
'avatar': 'assets/images/avatars/vincent.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name' : 'Alice Freeman',
|
||||||
|
'avatar': 'assets/images/avatars/alice.jpg'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name' : 'Andrew Green',
|
||||||
|
'avatar': 'assets/images/avatars/andrew.jpg'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -2,7 +2,6 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||||
import { MailService } from './mail.service';
|
import { MailService } from './mail.service';
|
||||||
import { Subscription } from 'rxjs/Subscription';
|
import { Subscription } from 'rxjs/Subscription';
|
||||||
import { FormControl } from '@angular/forms';
|
import { FormControl } from '@angular/forms';
|
||||||
import { FuseUtils } from '../../../core/fuseUtils';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector : 'fuse-mail',
|
selector : 'fuse-mail',
|
||||||
|
|
@ -30,7 +29,6 @@ export class MailComponent implements OnInit, OnDestroy
|
||||||
|
|
||||||
ngOnInit()
|
ngOnInit()
|
||||||
{
|
{
|
||||||
|
|
||||||
this.onSelectedMailsChanged =
|
this.onSelectedMailsChanged =
|
||||||
this.mailService.onSelectedMailsChanged
|
this.mailService.onSelectedMailsChanged
|
||||||
.subscribe(selectedMails => {
|
.subscribe(selectedMails => {
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import { Observable } from 'rxjs/Observable';
|
||||||
import { Http } from '@angular/http';
|
import { Http } from '@angular/http';
|
||||||
import { Mail } from './mail.model';
|
import { Mail } from './mail.model';
|
||||||
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
|
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
|
||||||
import { FuseUtils } from "app/core/fuseUtils";
|
import { FuseUtils } from 'app/core/fuseUtils';
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class MailService implements Resolve<any>
|
export class MailService implements Resolve<any>
|
||||||
|
|
|
||||||
21
src/app/main/pages/maintenance/maintenance.component.html
Normal file
21
src/app/main/pages/maintenance/maintenance.component.html
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
<div id="maintenance" fxLayout="column" perfect-scrollbar>
|
||||||
|
|
||||||
|
<div id="maintenance-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
|
||||||
|
|
||||||
|
<div id="maintenance-form">
|
||||||
|
|
||||||
|
<div class="logo">
|
||||||
|
<span>F</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="title">Closed for scheduled maintenance!</div>
|
||||||
|
|
||||||
|
<div class="subtitle">
|
||||||
|
We're sorry for the inconvenience. <br> Please check back later.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
56
src/app/main/pages/maintenance/maintenance.component.scss
Normal file
56
src/app/main/pages/maintenance/maintenance.component.scss
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
@import "src/app/core/scss/fuse";
|
||||||
|
|
||||||
|
:host {
|
||||||
|
|
||||||
|
#maintenance {
|
||||||
|
height: 100%;
|
||||||
|
background: url('/assets/images/backgrounds/march.jpg') no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
#maintenance-form-wrapper {
|
||||||
|
flex: 1 0 auto;
|
||||||
|
padding: 32px;
|
||||||
|
|
||||||
|
@include media-breakpoint('xs') {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#maintenance-form {
|
||||||
|
max-width: 384px;
|
||||||
|
padding: 32px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
text-align: center;
|
||||||
|
@include mat-elevation(7);
|
||||||
|
|
||||||
|
@include media-breakpoint('xs') {
|
||||||
|
padding: 24px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 128px;
|
||||||
|
height: 128px;
|
||||||
|
line-height: 128px;
|
||||||
|
font-size: 86px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 32px auto;
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
border-radius: 2px;
|
||||||
|
background: mat-color($accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 17px;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
margin: 16px 0;
|
||||||
|
max-width: 300px;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
25
src/app/main/pages/maintenance/maintenance.component.ts
Normal file
25
src/app/main/pages/maintenance/maintenance.component.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
import { FuseLayoutService } from '../../../core/services/layout.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector : 'fuse-maintenance',
|
||||||
|
templateUrl: './maintenance.component.html',
|
||||||
|
styleUrls : ['./maintenance.component.scss']
|
||||||
|
})
|
||||||
|
export class MaintenanceComponent implements OnInit
|
||||||
|
{
|
||||||
|
constructor(private layoutService: FuseLayoutService)
|
||||||
|
{
|
||||||
|
this.layoutService.setSettings({
|
||||||
|
navigation: 'none',
|
||||||
|
toolbar : 'none',
|
||||||
|
footer : 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit()
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -12,6 +12,10 @@ import { LockComponent } from './authentication/lock/lock.component';
|
||||||
import { ComingSoonComponent } from './coming-soon/coming-soon.component';
|
import { ComingSoonComponent } from './coming-soon/coming-soon.component';
|
||||||
import { Error404Component } from './errors/404/error-404.component';
|
import { Error404Component } from './errors/404/error-404.component';
|
||||||
import { Error500Component } from './errors/500/error-500.component';
|
import { Error500Component } from './errors/500/error-500.component';
|
||||||
|
import { MaintenanceComponent } from './maintenance/maintenance.component';
|
||||||
|
import { ProfileComponent } from './profile/profile.component';
|
||||||
|
import { ProfileModule } from './profile/profile.module';
|
||||||
|
import { ProfileService } from './profile/profile.service';
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
|
|
@ -53,13 +57,25 @@ const routes = [
|
||||||
{
|
{
|
||||||
path : 'pages/errors/error-500',
|
path : 'pages/errors/error-500',
|
||||||
component: Error500Component
|
component: Error500Component
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path : 'pages/maintenance',
|
||||||
|
component: MaintenanceComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path : 'pages/profile',
|
||||||
|
component: ProfileComponent,
|
||||||
|
resolve : {
|
||||||
|
profile: ProfileService
|
||||||
|
}
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports : [
|
imports : [
|
||||||
SharedModule,
|
SharedModule,
|
||||||
RouterModule.forChild(routes)
|
RouterModule.forChild(routes),
|
||||||
|
ProfileModule
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
LoginComponent,
|
LoginComponent,
|
||||||
|
|
@ -71,7 +87,11 @@ const routes = [
|
||||||
LockComponent,
|
LockComponent,
|
||||||
ComingSoonComponent,
|
ComingSoonComponent,
|
||||||
Error404Component,
|
Error404Component,
|
||||||
Error500Component
|
Error500Component,
|
||||||
|
MaintenanceComponent
|
||||||
|
],
|
||||||
|
providers : [
|
||||||
|
ProfileService
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class PagesModule
|
export class PagesModule
|
||||||
|
|
|
||||||
43
src/app/main/pages/profile/profile.component.html
Normal file
43
src/app/main/pages/profile/profile.component.html
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
<div id="profile" class="page-layout simple tabbed">
|
||||||
|
|
||||||
|
<!-- HEADER -->
|
||||||
|
<div class="header md-accent-bg" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-sm="row"
|
||||||
|
fxLayoutAlign.gt-sm="space-between end">
|
||||||
|
|
||||||
|
<div class="user-info" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-sm="row"
|
||||||
|
fxLayoutAlign.gt-sm="start center">
|
||||||
|
<img class="profile-image avatar huge" src="assets/images/avatars/katherine.jpg">
|
||||||
|
<div class="name">Katherine Wilson</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions" fxLayout="row" fxLayoutAlign="end center">
|
||||||
|
<button md-raised-button color="accent" aria-label="Follow">Follow</button>
|
||||||
|
<button md-raised-button color="primary" aria-label="Send Message">Send Message</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- / HEADER -->
|
||||||
|
|
||||||
|
<!-- CONTENT -->
|
||||||
|
<div class="content">
|
||||||
|
|
||||||
|
<md-tab-group md-dynamic-height="true">
|
||||||
|
|
||||||
|
<md-tab label="Timeline">
|
||||||
|
<fuse-profile-timeline></fuse-profile-timeline>
|
||||||
|
</md-tab>
|
||||||
|
|
||||||
|
<md-tab label="About">
|
||||||
|
<fuse-profile-about></fuse-profile-about>
|
||||||
|
</md-tab>
|
||||||
|
|
||||||
|
<md-tab label="Photos & Videos">
|
||||||
|
<fuse-profile-photos-videos></fuse-profile-photos-videos>
|
||||||
|
</md-tab>
|
||||||
|
|
||||||
|
</md-tab-group>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- / CONTENT -->
|
||||||
|
|
||||||
|
</div>
|
||||||
43
src/app/main/pages/profile/profile.component.scss
Normal file
43
src/app/main/pages/profile/profile.component.scss
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
@import "src/app/core/scss/fuse";
|
||||||
|
|
||||||
|
:host {
|
||||||
|
|
||||||
|
#profile {
|
||||||
|
|
||||||
|
.header {
|
||||||
|
height: 320px;
|
||||||
|
min-height: 320px;
|
||||||
|
max-height: 320px;
|
||||||
|
background: url('/assets/images/backgrounds/march.jpg') no-repeat 0 45%;
|
||||||
|
background-size: 100% auto;
|
||||||
|
|
||||||
|
.profile-image {
|
||||||
|
margin-right: 24px;
|
||||||
|
|
||||||
|
@include media-breakpoint('sm') {
|
||||||
|
margin: 0 0 16px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 34px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
|
||||||
|
@include media-breakpoint('sm') {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
|
||||||
|
button {
|
||||||
|
text-transform: none;
|
||||||
|
padding: 0 16px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
margin: 0 0 0 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
20
src/app/main/pages/profile/profile.component.ts
Normal file
20
src/app/main/pages/profile/profile.component.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector : 'fuse-profile',
|
||||||
|
templateUrl: './profile.component.html',
|
||||||
|
styleUrls : ['./profile.component.scss']
|
||||||
|
})
|
||||||
|
export class ProfileComponent implements OnInit
|
||||||
|
{
|
||||||
|
|
||||||
|
constructor()
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit()
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
28
src/app/main/pages/profile/profile.module.ts
Normal file
28
src/app/main/pages/profile/profile.module.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { SharedModule } from '../../../core/modules/shared.module';
|
||||||
|
|
||||||
|
import { ProfileComponent } from './profile.component';
|
||||||
|
import { ProfileTimelineComponent } from './tabs/timeline/timeline.component';
|
||||||
|
import { ProfileAboutComponent } from './tabs/about/about.component';
|
||||||
|
import { ProfilePhotosVideosComponent } from './tabs/photos-videos/photos-videos.component';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports : [
|
||||||
|
SharedModule
|
||||||
|
],
|
||||||
|
exports : [
|
||||||
|
ProfileComponent,
|
||||||
|
ProfileTimelineComponent,
|
||||||
|
ProfileAboutComponent,
|
||||||
|
ProfilePhotosVideosComponent
|
||||||
|
],
|
||||||
|
declarations: [
|
||||||
|
ProfileComponent,
|
||||||
|
ProfileTimelineComponent,
|
||||||
|
ProfileAboutComponent,
|
||||||
|
ProfilePhotosVideosComponent
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class ProfileModule
|
||||||
|
{
|
||||||
|
}
|
||||||
92
src/app/main/pages/profile/profile.service.ts
Normal file
92
src/app/main/pages/profile/profile.service.ts
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
|
||||||
|
import { Observable } from 'rxjs/Observable';
|
||||||
|
import { Http } from '@angular/http';
|
||||||
|
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class ProfileService implements Resolve<any>
|
||||||
|
{
|
||||||
|
timeline: any;
|
||||||
|
about: any;
|
||||||
|
photosVideos: any;
|
||||||
|
|
||||||
|
timelineOnChanged: BehaviorSubject<any> = new BehaviorSubject({});
|
||||||
|
aboutOnChanged: BehaviorSubject<any> = new BehaviorSubject({});
|
||||||
|
photosVideosOnChanged: BehaviorSubject<any> = new BehaviorSubject({});
|
||||||
|
|
||||||
|
constructor(private http: Http)
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Resolve
|
||||||
|
* @param {ActivatedRouteSnapshot} route
|
||||||
|
* @param {RouterStateSnapshot} state
|
||||||
|
* @returns {Observable<any> | Promise<any> | any}
|
||||||
|
*/
|
||||||
|
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any
|
||||||
|
{
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
Promise.all([
|
||||||
|
this.getTimeline(),
|
||||||
|
this.getAbout(),
|
||||||
|
this.getPhotosVideos()
|
||||||
|
]).then(
|
||||||
|
() => {
|
||||||
|
resolve();
|
||||||
|
},
|
||||||
|
reject
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get timeline
|
||||||
|
*/
|
||||||
|
getTimeline(): Promise<any[]>
|
||||||
|
{
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
|
||||||
|
this.http.get('api/profile-timeline')
|
||||||
|
.subscribe(timeline => {
|
||||||
|
this.timeline = timeline.json().data;
|
||||||
|
this.timelineOnChanged.next(this.timeline);
|
||||||
|
resolve(this.timeline);
|
||||||
|
}, reject);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get about
|
||||||
|
*/
|
||||||
|
getAbout(): Promise<any[]>
|
||||||
|
{
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
|
||||||
|
this.http.get('api/profile-about')
|
||||||
|
.subscribe(about => {
|
||||||
|
this.about = about.json().data;
|
||||||
|
this.aboutOnChanged.next(this.about);
|
||||||
|
resolve(this.about);
|
||||||
|
}, reject);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get photos & videos
|
||||||
|
*/
|
||||||
|
getPhotosVideos(): Promise<any[]>
|
||||||
|
{
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
|
||||||
|
this.http.get('api/profile-photos-videos')
|
||||||
|
.subscribe(photosVideos => {
|
||||||
|
this.photosVideos = photosVideos.json().data;
|
||||||
|
this.photosVideosOnChanged.next(this.photosVideos);
|
||||||
|
resolve(this.photosVideos);
|
||||||
|
}, reject);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
157
src/app/main/pages/profile/tabs/about/about.component.html
Normal file
157
src/app/main/pages/profile/tabs/about/about.component.html
Normal file
|
|
@ -0,0 +1,157 @@
|
||||||
|
<div id="about" fxLayout="row" fxLayoutWrap>
|
||||||
|
|
||||||
|
<div class="about" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="65">
|
||||||
|
|
||||||
|
<div class="profile-box info-box general" fxLayout="column">
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<div class="title">General Information</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<div class="info-line">
|
||||||
|
<div class="title">Gender</div>
|
||||||
|
<div class="info">{{about.general.gender}}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-line">
|
||||||
|
<div class="title">Birthday</div>
|
||||||
|
<div class="info">{{about.general.birthday}}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-line">
|
||||||
|
<div class="title">Locations</div>
|
||||||
|
<div class="info location" fxLayout="row" fxLayoutAlign="start center"
|
||||||
|
*ngFor="let location of about.general.locations">
|
||||||
|
<span>{{location}}</span>
|
||||||
|
<md-icon class="s-16 ml-4">location_on</md-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-line">
|
||||||
|
<div class="title">About Me</div>
|
||||||
|
<div class="info">{{about.general.about}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="profile-box info-box work" fxLayout="column">
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<div class="title">Work</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<div class="info-line">
|
||||||
|
<div class="title">Occupation</div>
|
||||||
|
<div class="info">{{about.work.occupation}}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-line">
|
||||||
|
<div class="title">Skills</div>
|
||||||
|
<div class="info">{{about.work.skills}}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-line">
|
||||||
|
<div class="title">Jobs</div>
|
||||||
|
<table class="info jobs">
|
||||||
|
<tr class="job" *ngFor="let job of about.work.jobs">
|
||||||
|
<td class="company">{{job.company}}</td>
|
||||||
|
<td class="date">{{job.date}}</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="profile-box info-box contact" fxLayout="column">
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<div class="title">Contact</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<div class="info-line">
|
||||||
|
<div class="title">Address</div>
|
||||||
|
<div class="info">{{about.contact.address}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-line">
|
||||||
|
<div class="title">Tel.</div>
|
||||||
|
<div class="info" *ngFor="let tel of about.contact.tel">
|
||||||
|
<span>{{tel}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-line">
|
||||||
|
<div class="title">Website</div>
|
||||||
|
<div class="info" *ngFor="let website of about.contact.websites">
|
||||||
|
<span>{{website}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-line">
|
||||||
|
<div class="title">Emails</div>
|
||||||
|
<div class="info" *ngFor="let email of about.contact.emails">
|
||||||
|
<span>{{email}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="about-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="35">
|
||||||
|
|
||||||
|
<div class="profile-box friends" fxLayout="column">
|
||||||
|
|
||||||
|
<header fxLayout="row" fxLayoutAlign="space-between center">
|
||||||
|
<div class="title">Friends</div>
|
||||||
|
<div class="more secondary-text">
|
||||||
|
<span>See 454 more...</span>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="content" fxLayout="row" fxLayoutWrap>
|
||||||
|
<div class="friend" fxFlex="20" *ngFor="let friend of about.friends">
|
||||||
|
<img [src]="friend.avatar">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="profile-box groups" fxLayout="column">
|
||||||
|
|
||||||
|
<header fxLayout="row" fxLayoutAlign="space-between center">
|
||||||
|
<div class="title">Joined Groups</div>
|
||||||
|
<div class="more secondary-text">
|
||||||
|
<span>See 6 more...</span>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
|
||||||
|
<div class="group" *ngFor="let group of about.groups" fxLayout="row"
|
||||||
|
fxLayoutAlign="space-between center">
|
||||||
|
|
||||||
|
<div fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
|
||||||
|
<img [src]="group.logo" class="logo" alt="{{group.name}}"/>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="name">{{group.name}}</div>
|
||||||
|
<div class="category">{{group.category}}</div>
|
||||||
|
<div class="members">{{group.members}} people</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button md-icon-button aria-label="More">
|
||||||
|
<md-icon>more_vert</md-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
139
src/app/main/pages/profile/tabs/about/about.component.scss
Normal file
139
src/app/main/pages/profile/tabs/about/about.component.scss
Normal file
|
|
@ -0,0 +1,139 @@
|
||||||
|
@import "src/app/core/scss/fuse";
|
||||||
|
|
||||||
|
:host {
|
||||||
|
|
||||||
|
#about {
|
||||||
|
max-width: 1200px;
|
||||||
|
|
||||||
|
.about {
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
.general {
|
||||||
|
|
||||||
|
.location {
|
||||||
|
|
||||||
|
md-icon {
|
||||||
|
line-height: 13px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.work {
|
||||||
|
|
||||||
|
.job {
|
||||||
|
|
||||||
|
.company {
|
||||||
|
padding: 0 16px 0 0;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date {
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-sidebar {
|
||||||
|
padding: 8px 8px 8px 32px;
|
||||||
|
|
||||||
|
@include media-breakpoint('sm') {
|
||||||
|
padding: 8px
|
||||||
|
}
|
||||||
|
|
||||||
|
.friends {
|
||||||
|
|
||||||
|
.content {
|
||||||
|
|
||||||
|
.friend {
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.groups {
|
||||||
|
|
||||||
|
.content {
|
||||||
|
|
||||||
|
.group {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category,
|
||||||
|
.members {
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
}
|
||||||
|
|
||||||
|
.members {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Profile boxes
|
||||||
|
.profile-box {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
@include mat-elevation(2);
|
||||||
|
|
||||||
|
header {
|
||||||
|
padding: 16px;
|
||||||
|
background: mat-color($primary);
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 16px;
|
||||||
|
background-color: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
padding: 8px;
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
background-color: rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.info-box {
|
||||||
|
|
||||||
|
.info-line {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
24
src/app/main/pages/profile/tabs/about/about.component.ts
Normal file
24
src/app/main/pages/profile/tabs/about/about.component.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { ProfileService } from '../../profile.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector : 'fuse-profile-about',
|
||||||
|
templateUrl: './about.component.html',
|
||||||
|
styleUrls : ['./about.component.scss']
|
||||||
|
})
|
||||||
|
export class ProfileAboutComponent implements OnInit
|
||||||
|
{
|
||||||
|
about: any;
|
||||||
|
|
||||||
|
constructor(private profileService: ProfileService)
|
||||||
|
{
|
||||||
|
this.profileService.aboutOnChanged.subscribe(about => {
|
||||||
|
this.about = about;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit()
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
<div id="photos-videos">
|
||||||
|
<div class="period" *ngFor="let period of photosVideos">
|
||||||
|
<div class="period-title">
|
||||||
|
<span class="name">{{period.name}}</span>
|
||||||
|
<span class="info">{{period.info}}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="period-media" fxLayout="row" fxLayoutWrap>
|
||||||
|
<div class="media" *ngFor="let media of period.media">
|
||||||
|
<img class="preview" [src]="media.preview" title="{{media.title}}">
|
||||||
|
<div class="title">{{media.title}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
@import "src/app/core/scss/fuse";
|
||||||
|
|
||||||
|
:host {
|
||||||
|
|
||||||
|
#photos-videos {
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
.period {
|
||||||
|
|
||||||
|
.period-title {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
margin-left: 16px;
|
||||||
|
font-size: 15px;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.period-media {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
.media {
|
||||||
|
margin: 0 16px 16px 0;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.preview {
|
||||||
|
width: 256px;
|
||||||
|
height: 256px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 10;
|
||||||
|
padding: 0 16px;
|
||||||
|
height: 48px;
|
||||||
|
line-height: 48px;
|
||||||
|
background: rgba(0, 0, 0, 0.54);
|
||||||
|
color: #FFF;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
import { ProfileService } from '../../profile.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector : 'fuse-profile-photos-videos',
|
||||||
|
templateUrl: './photos-videos.component.html',
|
||||||
|
styleUrls : ['./photos-videos.component.scss']
|
||||||
|
})
|
||||||
|
export class ProfilePhotosVideosComponent implements OnInit
|
||||||
|
{
|
||||||
|
photosVideos: any;
|
||||||
|
|
||||||
|
constructor(private profileService: ProfileService)
|
||||||
|
{
|
||||||
|
this.profileService.photosVideosOnChanged.subscribe(photosVideos => {
|
||||||
|
this.photosVideos = photosVideos;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit()
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
164
src/app/main/pages/profile/tabs/timeline/timeline.component.html
Normal file
164
src/app/main/pages/profile/tabs/timeline/timeline.component.html
Normal file
|
|
@ -0,0 +1,164 @@
|
||||||
|
<div id="timeline" fxLayout="row" fxLayoutWrap>
|
||||||
|
|
||||||
|
<div class="timeline" fxLayout="column" fxFlex="100" fxFlex.gt-sm="55" fxFlex.gt-md="65" fxFlexOrder="2"
|
||||||
|
fxFlexOrder.gt-sm="1">
|
||||||
|
|
||||||
|
<div class="profile-box add-post">
|
||||||
|
|
||||||
|
<div class="form" fxFlex>
|
||||||
|
|
||||||
|
<textarea placeholder="Write something.."></textarea>
|
||||||
|
|
||||||
|
<footer fxLayout="row" fxLayoutAlign="space-between center">
|
||||||
|
|
||||||
|
<div fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
|
||||||
|
<button md-icon-button aria-label="Add photo" md-tooltip="Add Photo">
|
||||||
|
<md-icon>photo</md-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button md-icon-button aria-label="Mention somebody" md-tooltip="Mention somebody">
|
||||||
|
<md-icon>person</md-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button md-icon-button aria-label="Add location" md-tooltip="Add location">
|
||||||
|
<md-icon>location_on</md-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button md-raised-button color="accent" class="post-button" aria-label="POST">POST</button>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<md-divider></md-divider>
|
||||||
|
|
||||||
|
<div class="timeline-item" *ngFor="let post of timeline.posts">
|
||||||
|
|
||||||
|
<header fxLayout="row" fxLayoutAlign="space-between start">
|
||||||
|
<div class="user" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<img class="avatar" [src]="post.user.avatar">
|
||||||
|
|
||||||
|
<div fxLayout="column">
|
||||||
|
<div class="title">
|
||||||
|
<span class="username">{{post.user.name}}</span>
|
||||||
|
<span *ngIf="post.type === 'post'">posted on your timeline</span>
|
||||||
|
<span *ngIf="post.type === 'something'">shared something with you</span>
|
||||||
|
<span *ngIf="post.type === 'video'">shared a video with you</span>
|
||||||
|
<span *ngIf="post.type === 'article'">shared an article with you</span>
|
||||||
|
</div>
|
||||||
|
<div class="time">{{post.time}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button md-icon-button aria-label="More">
|
||||||
|
<md-icon>more_vert</md-icon>
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<div *ngIf="post.message" class="message">
|
||||||
|
{{post.message}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div *ngIf="post.media" class="media">
|
||||||
|
<img *ngIf="post.media.type === 'image'" [src]="post.media.preview">
|
||||||
|
<div *ngIf="post.media.type === 'video'" [innerHtml]="post.media.embed"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div *ngIf="post.article" fxLayout="column" class="article">
|
||||||
|
<div class="media">
|
||||||
|
<img [src]="post.article.media.preview">
|
||||||
|
</div>
|
||||||
|
<div class="title">{{post.article.title}}</div>
|
||||||
|
<div class="subtitle">{{post.article.subtitle}}</div>
|
||||||
|
<div class="excerpt">{{post.article.excerpt}}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<button md-button class="like-button">
|
||||||
|
<span fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<md-icon class="s-16">favorite</md-icon>
|
||||||
|
<span>Like</span> <span>({{post.like}})</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button md-button class="share-button">
|
||||||
|
<span fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<md-icon class="s-16">share</md-icon>
|
||||||
|
<span>Share</span> <span>({{post.share}})</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="" fxLayout="column" fxLayoutAlign="start start">
|
||||||
|
<div *ngIf="post.comments" class="comment-count" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
{{post.comments.length}} comments
|
||||||
|
<md-icon class="s-16">keyboard_arrow_down</md-icon>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="comment" fxLayout="row" fxFlexFill *ngFor="let comment of post.comments">
|
||||||
|
<img [src]="comment.user.avatar" class="avatar"/>
|
||||||
|
|
||||||
|
<div fxLayout="column" fxFlex>
|
||||||
|
<div fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<span class="username">{{comment.user.name}}</span>
|
||||||
|
<span class="time">{{comment.time}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="message">
|
||||||
|
{{comment.message}}
|
||||||
|
</div>
|
||||||
|
<div class="actions" fxLayout="row" fxLayoutAlign="space-between center">
|
||||||
|
<a href="#" class="reply-button">Reply</a>
|
||||||
|
<md-icon fxFlex class="report-button s-16">flag</md-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="reply" fxLayout="row" fxFlexFill>
|
||||||
|
<img src="assets/images/avatars/profile.jpg" class="avatar"/>
|
||||||
|
|
||||||
|
<form fxFlex>
|
||||||
|
<textarea placeholder="Add a comment..."></textarea>
|
||||||
|
<button md-raised-button color="accent" class="post-comment-button" aria-label="Post Comment">
|
||||||
|
Post Comment
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timeline-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="45" fxFlex.gt-md="35" fxFlexOrder="1"
|
||||||
|
fxFlexOrder.gt-sm="2">
|
||||||
|
|
||||||
|
<div class="profile-box latest-activity" fxLayout="column">
|
||||||
|
<header fxLayout="row" fxLayoutAlign="space-between center">
|
||||||
|
<div class="title">Latest Activity</div>
|
||||||
|
<div class="more secondary-text">See All</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="content" fxLayout="row" fxLayoutWrap>
|
||||||
|
<div class="activities">
|
||||||
|
<div class="activity" fxLayout="row" fxLayoutAlign="start start"
|
||||||
|
*ngFor="let activity of timeline.activities">
|
||||||
|
<img [src]="activity.user.avatar" class="avatar" alt="{{activity.user.name}}"/>
|
||||||
|
|
||||||
|
<div fxLayout="column">
|
||||||
|
<div>
|
||||||
|
<span class="username">{{activity.user.name}}</span>
|
||||||
|
<span class="message"> {{activity.message}}</span>
|
||||||
|
</div>
|
||||||
|
<span class="time secondary-text">{{activity.time}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
311
src/app/main/pages/profile/tabs/timeline/timeline.component.scss
Normal file
311
src/app/main/pages/profile/tabs/timeline/timeline.component.scss
Normal file
|
|
@ -0,0 +1,311 @@
|
||||||
|
@import "src/app/core/scss/fuse";
|
||||||
|
|
||||||
|
:host {
|
||||||
|
|
||||||
|
#timeline {
|
||||||
|
max-width: 1200px;
|
||||||
|
|
||||||
|
.timeline {
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
.add-post {
|
||||||
|
margin-bottom: 0;
|
||||||
|
@include mat-elevation(2);
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
display: flex;
|
||||||
|
flex: 1 0 auto;
|
||||||
|
font-size: 13px;
|
||||||
|
width: 100%;
|
||||||
|
height: 140px;
|
||||||
|
border: none;
|
||||||
|
padding: 16px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
padding: 8px;
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
background: #F3F4F5;
|
||||||
|
|
||||||
|
.post-button {
|
||||||
|
margin: 0;
|
||||||
|
width: 64px;
|
||||||
|
min-width: 64px;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
min-height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
md-divider {
|
||||||
|
border-top-width: 1px;
|
||||||
|
border-top-style: solid;
|
||||||
|
margin: 32px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
@include mat-elevation(2);
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
padding: 16px 0 8px 16px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
.username {
|
||||||
|
margin-right: 2px;
|
||||||
|
color: mat-color($accent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
|
||||||
|
.message {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media {
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
img, iframe {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.like-button,
|
||||||
|
.share-button {
|
||||||
|
padding: 4px 6px;
|
||||||
|
text-transform: inherit;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: normal;
|
||||||
|
margin: 0 0 16px 8px;
|
||||||
|
min-width: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
md-icon {
|
||||||
|
margin: 0 8px 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.article {
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
margin: 16px;
|
||||||
|
|
||||||
|
.media {
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 15px;
|
||||||
|
padding: 16px 16px 4px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
padding: 0 16px;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
}
|
||||||
|
|
||||||
|
.excerpt {
|
||||||
|
padding: 16px 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
background-color: rgba(0, 0, 0, 0.04);
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
.comment-count {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
md-icon {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment {
|
||||||
|
margin-bottom: 24px !important;
|
||||||
|
|
||||||
|
.username {
|
||||||
|
font-weight: 500;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
color: rgba(0, 0, 0, 0.87);
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
margin-top: 8px;
|
||||||
|
|
||||||
|
.reply-button {
|
||||||
|
margin-right: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: mat-color($accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-button {
|
||||||
|
margin: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply {
|
||||||
|
|
||||||
|
form {
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
width: 100% !important;
|
||||||
|
min-height: 72px;
|
||||||
|
padding: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-comment-button {
|
||||||
|
margin: 0;
|
||||||
|
text-transform: inherit;
|
||||||
|
font-weight: normal;
|
||||||
|
padding: 0 12px;
|
||||||
|
min-height: 30px;
|
||||||
|
min-width: inherit;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-sidebar {
|
||||||
|
padding: 8px 8px 8px 32px;
|
||||||
|
|
||||||
|
@include media-breakpoint('sm') {
|
||||||
|
padding: 8px
|
||||||
|
}
|
||||||
|
|
||||||
|
.latest-activity {
|
||||||
|
|
||||||
|
header {
|
||||||
|
background: mat-color($primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
background-color: #FFF;
|
||||||
|
|
||||||
|
.activities {
|
||||||
|
|
||||||
|
.activity {
|
||||||
|
padding: 16px 0;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.username {
|
||||||
|
font-weight: 500;
|
||||||
|
color: mat-color($accent)
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Profile boxes
|
||||||
|
.profile-box {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
@include mat-elevation(2);
|
||||||
|
|
||||||
|
header {
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 16px;
|
||||||
|
background-color: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
padding: 8px;
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
background-color: rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.info-box {
|
||||||
|
|
||||||
|
.info-line {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { ProfileService } from '../../profile.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector : 'fuse-profile-timeline',
|
||||||
|
templateUrl: './timeline.component.html',
|
||||||
|
styleUrls : ['./timeline.component.scss']
|
||||||
|
})
|
||||||
|
export class ProfileTimelineComponent implements OnInit
|
||||||
|
{
|
||||||
|
timeline: any;
|
||||||
|
|
||||||
|
constructor(private profileService: ProfileService)
|
||||||
|
{
|
||||||
|
this.profileService.timelineOnChanged.subscribe(timeline => {
|
||||||
|
this.timeline = timeline;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit()
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user