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 { ThreadPage } from '../pages/thread/thread';
|
||||||
import { SettingsPage } from '../pages/settings/settings';
|
import { SettingsPage } from '../pages/settings/settings';
|
||||||
import { AboutPage } from '../pages/about/about';
|
import { AboutPage } from '../pages/about/about';
|
||||||
|
import { ProfilePage } from '../pages/profile/profile';
|
||||||
|
|
||||||
import { SplashScreen } from '@ionic-native/splash-screen';
|
import { SplashScreen } from '@ionic-native/splash-screen';
|
||||||
import { IonicStorageModule } from '@ionic/storage';
|
import { IonicStorageModule } from '@ionic/storage';
|
||||||
|
@ -28,6 +29,7 @@ import { ParserPipe } from '../pipes/parser/parser';
|
||||||
ThreadPage,
|
ThreadPage,
|
||||||
SettingsPage,
|
SettingsPage,
|
||||||
AboutPage,
|
AboutPage,
|
||||||
|
ProfilePage,
|
||||||
TimeagoPipe,
|
TimeagoPipe,
|
||||||
NewPostModal,
|
NewPostModal,
|
||||||
PostMenu,
|
PostMenu,
|
||||||
|
@ -46,6 +48,7 @@ import { ParserPipe } from '../pipes/parser/parser';
|
||||||
ThreadPage,
|
ThreadPage,
|
||||||
SettingsPage,
|
SettingsPage,
|
||||||
AboutPage,
|
AboutPage,
|
||||||
|
ProfilePage,
|
||||||
NewPostModal,
|
NewPostModal,
|
||||||
PostMenu
|
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-list>
|
||||||
<ion-card *ngFor="let post of posts" color="{{ post.you_are_mentioned ? 'mention' : '' }}">
|
<ion-card *ngFor="let post of posts" color="{{ post.you_are_mentioned ? 'mention' : '' }}">
|
||||||
<ion-item 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 }}">
|
<img src="{{ post.user.content.avatar_image.link }}">
|
||||||
</ion-avatar>
|
</ion-avatar>
|
||||||
<h2>{{ post.user.name }}</h2>
|
<h2>{{ post.user.name }}</h2>
|
||||||
|
|
|
@ -1,14 +1,14 @@
|
||||||
page-stream {
|
page-stream {
|
||||||
.item-md ion-avatar img {
|
.item-md ion-avatar img {
|
||||||
border-radius: 0;
|
border-radius: 10px;
|
||||||
background-color: #e9e9e9;
|
background-color: #e9e9e9;
|
||||||
}
|
}
|
||||||
.item-wp ion-avatar img {
|
.item-wp ion-avatar img {
|
||||||
border-radius: 0;
|
border-radius: 10px;
|
||||||
background-color: #e9e9e9;
|
background-color: #e9e9e9;
|
||||||
}
|
}
|
||||||
.item-ios ion-avatar img {
|
.item-ios ion-avatar img {
|
||||||
border-radius: 0;
|
border-radius: 10px;
|
||||||
background-color: #e9e9e9;
|
background-color: #e9e9e9;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,6 +4,7 @@ import { ThreadPage } from '../thread/thread';
|
||||||
import { Storage } from '@ionic/storage';
|
import { Storage } from '@ionic/storage';
|
||||||
import { Events } from 'ionic-angular';
|
import { Events } from 'ionic-angular';
|
||||||
import { LoginPage } from '../login/login';
|
import { LoginPage } from '../login/login';
|
||||||
|
import { ProfilePage } from '../profile/profile';
|
||||||
import { PostMenu } from '../stream/post-menu';
|
import { PostMenu } from '../stream/post-menu';
|
||||||
import { NewPostModal } from '../stream/new-post';
|
import { NewPostModal } from '../stream/new-post';
|
||||||
|
|
||||||
|
@ -311,6 +312,10 @@ export class StreamPage {
|
||||||
window.open(url, '_blank');
|
window.open(url, '_blank');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
showProfile(user) {
|
||||||
|
this.navCtrl.push(ProfilePage, {user: user});
|
||||||
|
}
|
||||||
|
|
||||||
presentToast(text) {
|
presentToast(text) {
|
||||||
let toast = this.toastCtrl.create({
|
let toast = this.toastCtrl.create({
|
||||||
position: 'top',
|
position: 'top',
|
||||||
|
|
Reference in a new issue