start building post component
This commit is contained in:
parent
eaefe3908b
commit
c41a422968
4 changed files with 121 additions and 0 deletions
8
src/components/components.module.ts
Normal file
8
src/components/components.module.ts
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { PostComponent } from './post/post';
|
||||||
|
@NgModule({
|
||||||
|
declarations: [PostComponent],
|
||||||
|
imports: [],
|
||||||
|
exports: [PostComponent]
|
||||||
|
})
|
||||||
|
export class ComponentsModule {}
|
88
src/components/post/post.html
Normal file
88
src/components/post/post.html
Normal file
|
@ -0,0 +1,88 @@
|
||||||
|
|
||||||
|
<ion-item color="{{ post.you_are_mentioned ? 'mention' : '' }}">
|
||||||
|
<ion-avatar item-start (click)="showProfile(post.user)">
|
||||||
|
<img src="{{ post.user.content.avatar_image.link }}">
|
||||||
|
</ion-avatar>
|
||||||
|
<h2>{{ post.user.name }}</h2>
|
||||||
|
<p>@{{ post.user.username }}</p>
|
||||||
|
<ion-note item-end>
|
||||||
|
<div text-right>
|
||||||
|
{{ post.created_at | timeago }}<br/>
|
||||||
|
{{ post.source.name }}
|
||||||
|
</div>
|
||||||
|
</ion-note>
|
||||||
|
</ion-item>
|
||||||
|
|
||||||
|
<ion-card-content>
|
||||||
|
<div *ngIf="post.is_deleted; else renderBlock"></div>
|
||||||
|
<ng-template #renderBlock >
|
||||||
|
<div [innerHTML]="post.content.html | parser"></div>
|
||||||
|
<div *ngIf="post.raw">
|
||||||
|
<div *ngFor="let r of post.raw">
|
||||||
|
<div *ngIf="r.type == 'nl.chimpnut.blog.post'">
|
||||||
|
<hr>
|
||||||
|
<div>{{ r.value.body }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
|
</ion-card-content>
|
||||||
|
|
||||||
|
<div *ngIf="post.raw">
|
||||||
|
<div *ngFor="let r of post.raw">
|
||||||
|
<div *ngIf="r.type == 'io.pnut.core.oembed'">
|
||||||
|
<ion-item>
|
||||||
|
<div *ngIf="hideImg; then imgbtn else thumbnail"></div>
|
||||||
|
<ng-template #imgbtn >
|
||||||
|
<button ion-button icon-start (click)="showImage(r.value.url)">
|
||||||
|
<ion-icon name="image"></ion-icon>
|
||||||
|
{{ r.value.title }}
|
||||||
|
</button>
|
||||||
|
</ng-template>
|
||||||
|
<ng-template #thumbnail >
|
||||||
|
<img src="{{ r.value.thumbnail_url || r.value.url }}" (click)="showImage(r.value.url)">
|
||||||
|
</ng-template>
|
||||||
|
</ion-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div *ngIf="post.reposted_by_string">
|
||||||
|
<ion-item><ion-note>{{ post.reposted_by_string }}</ion-note></ion-item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ion-row>
|
||||||
|
<ion-col>
|
||||||
|
<button ion-button icon-left clear small block (click)="showReplyPost(post)">
|
||||||
|
<ion-icon name="ios-undo"></ion-icon>
|
||||||
|
</button>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col>
|
||||||
|
<button ion-button icon-left clear small block (click)="showQuotedPost(post)">
|
||||||
|
<ion-icon name="quote"></ion-icon>
|
||||||
|
</button>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col>
|
||||||
|
<button ion-button icon-left clear small block (click)="repost(post.id, post.you_reposted)">
|
||||||
|
<ion-icon name="repeat"></ion-icon>
|
||||||
|
<div *ngIf="post.counts.reposts > 0">{{ post.counts.reposts }}</div>
|
||||||
|
</button>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col>
|
||||||
|
<button ion-button icon-left clear small block (click)="bookmark(post.id, post.you_bookmarked)">
|
||||||
|
<ion-icon name="star"></ion-icon>
|
||||||
|
<div *ngIf="post.counts.bookmarks > 0">{{ post.counts.bookmarks }}</div>
|
||||||
|
</button>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col>
|
||||||
|
<button ion-button icon-left clear small block (click)="fetchThread(post.thread_id)">
|
||||||
|
<ion-icon name="chatboxes"></ion-icon>
|
||||||
|
<div *ngIf="post.counts.replies > 0">{{ post.counts.replies }}</div>
|
||||||
|
</button>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col>
|
||||||
|
<button ion-button icon-left clear small block (click)="presentPostMenu($event, post)">
|
||||||
|
<ion-icon name="more"></ion-icon>
|
||||||
|
</button>
|
||||||
|
</ion-col>
|
||||||
|
</ion-row>
|
3
src/components/post/post.scss
Normal file
3
src/components/post/post.scss
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
post {
|
||||||
|
|
||||||
|
}
|
22
src/components/post/post.ts
Normal file
22
src/components/post/post.ts
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generated class for the PostComponent component.
|
||||||
|
*
|
||||||
|
* See https://angular.io/api/core/Component for more info on Angular
|
||||||
|
* Components.
|
||||||
|
*/
|
||||||
|
@Component({
|
||||||
|
selector: 'post',
|
||||||
|
templateUrl: 'post.html'
|
||||||
|
})
|
||||||
|
export class PostComponent {
|
||||||
|
|
||||||
|
text: string;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
console.log('Hello PostComponent Component');
|
||||||
|
this.text = 'Hello World';
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
Reference in a new issue