add profile menu with mute and block functions
This commit is contained in:
parent
73664e4f44
commit
6647a6ccd0
6 changed files with 118 additions and 10 deletions
|
@ -11,6 +11,7 @@ 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 { ProfilePage } from '../pages/profile/profile';
|
||||||
|
import { ProfileMenu } from '../pages/profile/profile-menu';
|
||||||
import { UserListPage } from '../pages/user-list/user-list';
|
import { UserListPage } from '../pages/user-list/user-list';
|
||||||
import { PostComponent } from '../components/post/post';
|
import { PostComponent } from '../components/post/post';
|
||||||
|
|
||||||
|
@ -36,6 +37,7 @@ import { ParserPipe } from '../pipes/parser/parser';
|
||||||
TimeagoPipe,
|
TimeagoPipe,
|
||||||
NewPostModal,
|
NewPostModal,
|
||||||
PostMenu,
|
PostMenu,
|
||||||
|
ProfileMenu,
|
||||||
ParserPipe,
|
ParserPipe,
|
||||||
PostComponent
|
PostComponent
|
||||||
],
|
],
|
||||||
|
@ -55,7 +57,8 @@ import { ParserPipe } from '../pipes/parser/parser';
|
||||||
ProfilePage,
|
ProfilePage,
|
||||||
UserListPage,
|
UserListPage,
|
||||||
NewPostModal,
|
NewPostModal,
|
||||||
PostMenu
|
PostMenu,
|
||||||
|
ProfileMenu
|
||||||
],
|
],
|
||||||
providers: [
|
providers: [
|
||||||
SplashScreen,
|
SplashScreen,
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
|
|
||||||
<ion-item color="{{ post.you_are_mentioned ? 'mention' : '' }}">
|
<ion-item color="{{ post.you_are_mentioned ? 'mention' : '' }}" (click)="showProfile(post.user)">
|
||||||
<ion-avatar item-start (click)="showProfile(post.user)">
|
<ion-avatar item-start >
|
||||||
<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>
|
||||||
|
|
70
src/pages/profile/profile-menu.ts
Normal file
70
src/pages/profile/profile-menu.ts
Normal file
|
@ -0,0 +1,70 @@
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { ViewController, NavParams, ToastController } from 'ionic-angular';
|
||||||
|
import { Events } from 'ionic-angular';
|
||||||
|
|
||||||
|
import * as pnut from 'pnut-butter';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
template: `
|
||||||
|
<ion-list>
|
||||||
|
<button ion-item (click)="browse()">Open in browser</button>
|
||||||
|
<button ion-item >Block</button>
|
||||||
|
<button ion-item >Mute</button>
|
||||||
|
</ion-list>
|
||||||
|
`
|
||||||
|
})
|
||||||
|
export class ProfileMenu {
|
||||||
|
|
||||||
|
private userid: string;
|
||||||
|
private username: string;
|
||||||
|
|
||||||
|
constructor(public navParams: NavParams, public viewCtrl: ViewController,
|
||||||
|
public toastCtrl: ToastController, public events: Events) {
|
||||||
|
this.userid = this.navParams.data.userid;
|
||||||
|
this.username = this.navParams.data.username;
|
||||||
|
}
|
||||||
|
|
||||||
|
browse() {
|
||||||
|
window.open('https://pnut.io/@' + this.username, '_system');
|
||||||
|
this.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
mute() {
|
||||||
|
if (this.user.you_muted) {
|
||||||
|
pnut.unmute(this.userid).then(res => {
|
||||||
|
this.presentToast('User unmuted');
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
pnut.mute(this.userid).then(res => {
|
||||||
|
this.presentToast('User muted');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
block() {
|
||||||
|
if (this.user.you_blocked) {
|
||||||
|
pnut.unblock(this.userid).then(res => {
|
||||||
|
this.presentToast('User unblocked');
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
pnut.block(this.userid).then(res => {
|
||||||
|
this.presentToast('User blocked');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
presentToast(text) {
|
||||||
|
let toast = this.toastCtrl.create({
|
||||||
|
position: 'top',
|
||||||
|
message: text,
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
toast.present();
|
||||||
|
}
|
||||||
|
|
||||||
|
close() {
|
||||||
|
this.viewCtrl.dismiss();
|
||||||
|
}
|
||||||
|
}
|
|
@ -8,6 +8,11 @@
|
||||||
|
|
||||||
<ion-navbar>
|
<ion-navbar>
|
||||||
<ion-title>{{ user.username }}</ion-title>
|
<ion-title>{{ user.username }}</ion-title>
|
||||||
|
<ion-buttons end>
|
||||||
|
<button ion-button icon-only (click)="presentProfileMenu($event)">
|
||||||
|
<ion-icon name="more"></ion-icon>
|
||||||
|
</button>
|
||||||
|
</ion-buttons>
|
||||||
</ion-navbar>
|
</ion-navbar>
|
||||||
|
|
||||||
</ion-header>
|
</ion-header>
|
||||||
|
@ -24,7 +29,7 @@
|
||||||
<h2>{{ user.name }}</h2>
|
<h2>{{ user.name }}</h2>
|
||||||
<p>@{{ user.username }}</p>
|
<p>@{{ user.username }}</p>
|
||||||
<ion-col item-end text-right>
|
<ion-col item-end text-right>
|
||||||
<button ion-button disabled>{{ user.you_follow ? "Unfollow" : "Follow" }}</button>
|
<button ion-button (click)="followUser()">{{ user.you_follow ? "Unfollow" : "Follow" }}</button>
|
||||||
<ion-note>{{ user.follows_you ? "Follows you" : ""}}</ion-note>
|
<ion-note>{{ user.follows_you ? "Follows you" : ""}}</ion-note>
|
||||||
</ion-col>
|
</ion-col>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { NavController, NavParams } from 'ionic-angular';
|
import { NavController, NavParams, PopoverController, ToastController } from 'ionic-angular';
|
||||||
import { UserListPage } from '../user-list/user-list';
|
import { UserListPage } from '../user-list/user-list';
|
||||||
|
import { ProfileMenu } from './profile-menu'
|
||||||
|
|
||||||
import * as pnut from 'pnut-butter';
|
import * as pnut from 'pnut-butter';
|
||||||
|
|
||||||
|
@ -25,15 +26,14 @@ export class ProfilePage {
|
||||||
private myUsername: string;
|
private myUsername: string;
|
||||||
public activeTab: string = 'posts';
|
public activeTab: string = 'posts';
|
||||||
|
|
||||||
constructor(public navCtrl: NavController, public navParams: NavParams) {
|
constructor(public navCtrl: NavController, public navParams: NavParams,
|
||||||
|
public popoverCtrl: PopoverController, public toastCtrl: ToastController) {
|
||||||
this.user = this.navParams.data.user;
|
this.user = this.navParams.data.user;
|
||||||
this.myUsername = this.navParams.data.me;
|
this.myUsername = this.navParams.data.me;
|
||||||
}
|
}
|
||||||
|
|
||||||
ionViewDidLoad() {
|
ionViewDidLoad() {
|
||||||
console.log('ionViewDidLoad ProfilePage');
|
console.log('ionViewDidLoad ProfilePage');
|
||||||
// console.log(JSON.stringify(this.user));
|
|
||||||
// console.log('-----');
|
|
||||||
let params = {
|
let params = {
|
||||||
include_deleted: 0,
|
include_deleted: 0,
|
||||||
include_raw: 1,
|
include_raw: 1,
|
||||||
|
@ -114,4 +114,34 @@ export class ProfilePage {
|
||||||
list: list});
|
list: list});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
followUser() {
|
||||||
|
if (this.user.you_follow) {
|
||||||
|
pnut.unfollow(this.user.id).then(res => {
|
||||||
|
this.user = res.data;
|
||||||
|
this.presentToast('User unfollowed');
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
pnut.follow(this.user.id).then(res => {
|
||||||
|
this.user = res.data;
|
||||||
|
this.presentToast('User followed');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
presentProfileMenu(myEvent) {
|
||||||
|
let popover = this.popoverCtrl.create(ProfileMenu, {
|
||||||
|
userid: this.user.id,
|
||||||
|
username: this.user.username});
|
||||||
|
popover.present({ev: myEvent});
|
||||||
|
}
|
||||||
|
|
||||||
|
presentToast(text) {
|
||||||
|
let toast = this.toastCtrl.create({
|
||||||
|
position: 'top',
|
||||||
|
message: text,
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
toast.present();
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,10 +21,10 @@
|
||||||
</ion-avatar>
|
</ion-avatar>
|
||||||
<h2>{{ user.name }}</h2>
|
<h2>{{ user.name }}</h2>
|
||||||
<p>@{{ user.username }}</p>
|
<p>@{{ user.username }}</p>
|
||||||
<ion-col item-end text-right>
|
<!-- <ion-col item-end text-right>
|
||||||
<button ion-button disabled>{{ user.you_follow ? "Unfollow" : "Follow" }}</button>
|
<button ion-button disabled>{{ user.you_follow ? "Unfollow" : "Follow" }}</button>
|
||||||
<ion-note>{{ user.follows_you ? "Follows you" : ""}}</ion-note>
|
<ion-note>{{ user.follows_you ? "Follows you" : ""}}</ion-note>
|
||||||
</ion-col>
|
</ion-col> -->
|
||||||
</ion-item>
|
</ion-item>
|
||||||
</ion-list>
|
</ion-list>
|
||||||
|
|
||||||
|
|
Reference in a new issue