Add Profile page issue #32
This commit is contained in:
parent
7f04d55641
commit
d94bec3a4b
7 changed files with 96 additions and 4 deletions
|
@ -10,6 +10,7 @@ import { NewPostModal } from '../pages/stream/new-post';
|
|||
import { ThreadPage } from '../pages/thread/thread';
|
||||
import { SettingsPage } from '../pages/settings/settings';
|
||||
import { AboutPage } from '../pages/about/about';
|
||||
import { ProfilePage } from '../pages/profile/profile';
|
||||
|
||||
import { SplashScreen } from '@ionic-native/splash-screen';
|
||||
import { IonicStorageModule } from '@ionic/storage';
|
||||
|
@ -28,6 +29,7 @@ import { ParserPipe } from '../pipes/parser/parser';
|
|||
ThreadPage,
|
||||
SettingsPage,
|
||||
AboutPage,
|
||||
ProfilePage,
|
||||
TimeagoPipe,
|
||||
NewPostModal,
|
||||
PostMenu,
|
||||
|
@ -46,6 +48,7 @@ import { ParserPipe } from '../pipes/parser/parser';
|
|||
ThreadPage,
|
||||
SettingsPage,
|
||||
AboutPage,
|
||||
ProfilePage,
|
||||
NewPostModal,
|
||||
PostMenu
|
||||
],
|
||||
|
|
43
src/pages/profile/profile.html
Normal file
43
src/pages/profile/profile.html
Normal file
|
@ -0,0 +1,43 @@
|
|||
<!--
|
||||
Generated template for the ProfilePage page.
|
||||
|
||||
See http://ionicframework.com/docs/components/#navigation for more info on
|
||||
Ionic pages and navigation.
|
||||
-->
|
||||
<ion-header>
|
||||
|
||||
<ion-navbar>
|
||||
<ion-title>{{ user.username }}</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
</ion-header>
|
||||
|
||||
|
||||
<ion-content padding>
|
||||
|
||||
<img src="{{ user.content.cover_image.link }}">
|
||||
|
||||
<ion-item>
|
||||
<ion-avatar item-start>
|
||||
<img src="{{ user.content.avatar_image.link }}">
|
||||
</ion-avatar>
|
||||
<h2>{{ user.name }}</h2>
|
||||
<p>@{{ user.username }}</p>
|
||||
<button ion-button item-end>{{ user.you_follow ? "Unfollow" : "Follow" }}</button>
|
||||
</ion-item>
|
||||
|
||||
<p><div [innerHTML]="user.content.html | parser"></div>
|
||||
|
||||
<p>
|
||||
<ion-row>
|
||||
<ion-col text-center>
|
||||
<button ion-button >{{ user.counts.posts }}<br/>posts</button>
|
||||
<button ion-button >{{ user.counts.followers }}<br/>followers</button>
|
||||
<button ion-button >{{ user.counts.following }}<br/>following</button>
|
||||
<button ion-button >{{ user.counts.bookmarks }}<br/>stars</button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
|
||||
|
||||
</ion-content>
|
14
src/pages/profile/profile.scss
Normal file
14
src/pages/profile/profile.scss
Normal file
|
@ -0,0 +1,14 @@
|
|||
page-profile {
|
||||
.item-md ion-avatar img {
|
||||
border-radius: 10px;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
.item-wp ion-avatar img {
|
||||
border-radius: 10px;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
.item-ios ion-avatar img {
|
||||
border-radius: 10px;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
}
|
27
src/pages/profile/profile.ts
Normal file
27
src/pages/profile/profile.ts
Normal file
|
@ -0,0 +1,27 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NavController, NavParams } from 'ionic-angular';
|
||||
|
||||
/**
|
||||
* Generated class for the ProfilePage page.
|
||||
*
|
||||
* See https://ionicframework.com/docs/components/#navigation for more info on
|
||||
* Ionic pages and navigation.
|
||||
*/
|
||||
|
||||
@Component({
|
||||
selector: 'page-profile',
|
||||
templateUrl: 'profile.html',
|
||||
})
|
||||
export class ProfilePage {
|
||||
|
||||
private user: any;
|
||||
|
||||
constructor(public navCtrl: NavController, public navParams: NavParams) {
|
||||
this.user = this.navParams.data.user;
|
||||
}
|
||||
|
||||
ionViewDidLoad() {
|
||||
console.log('ionViewDidLoad ProfilePage');
|
||||
}
|
||||
|
||||
}
|
|
@ -25,7 +25,7 @@
|
|||
<ion-list>
|
||||
<ion-card *ngFor="let post of posts" color="{{ post.you_are_mentioned ? 'mention' : '' }}">
|
||||
<ion-item color="{{ post.you_are_mentioned ? 'mention' : '' }}">
|
||||
<ion-avatar item-start>
|
||||
<ion-avatar item-start (click)="showProfile(post.user)">
|
||||
<img src="{{ post.user.content.avatar_image.link }}">
|
||||
</ion-avatar>
|
||||
<h2>{{ post.user.name }}</h2>
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
page-stream {
|
||||
.item-md ion-avatar img {
|
||||
border-radius: 0;
|
||||
border-radius: 10px;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
.item-wp ion-avatar img {
|
||||
border-radius: 0;
|
||||
border-radius: 10px;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
.item-ios ion-avatar img {
|
||||
border-radius: 0;
|
||||
border-radius: 10px;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,6 +4,7 @@ import { ThreadPage } from '../thread/thread';
|
|||
import { Storage } from '@ionic/storage';
|
||||
import { Events } from 'ionic-angular';
|
||||
import { LoginPage } from '../login/login';
|
||||
import { ProfilePage } from '../profile/profile';
|
||||
import { PostMenu } from '../stream/post-menu';
|
||||
import { NewPostModal } from '../stream/new-post';
|
||||
|
||||
|
@ -311,6 +312,10 @@ export class StreamPage {
|
|||
window.open(url, '_blank');
|
||||
}
|
||||
|
||||
showProfile(user) {
|
||||
this.navCtrl.push(ProfilePage, {user: user});
|
||||
}
|
||||
|
||||
presentToast(text) {
|
||||
let toast = this.toastCtrl.create({
|
||||
position: 'top',
|
||||
|
|
Reference in a new issue