goober-ionic/src/pages/stream/stream.html

<!--
  Generated template for the StreamPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{ title }}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>

  <ion-refresher (ionRefresh)="fetchNewerPosts($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

  <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>
          <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>
        </ng-template>
      </ion-card-content>
      <div *ngIf="post.raw">
        <div *ngFor="let r of post.raw">
          <div *ngIf="r.type == 'io.pnut.core.oembed'">
            <img src="{{ r.value.url }}">
          </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)="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)="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)="fetchThread(post.thread_id)">
            <ion-icon name="chatboxes"></ion-icon>
            <div *ngIf="post.counts.replies > 0">{{ post.counts.replies }}</div>
          </button>
        </ion-col>
      </ion-row>
    </ion-card>
  </ion-list>

 <ion-infinite-scroll (ionInfinite)="fetchOlderPosts($event)">
   <ion-infinite-scroll-content></ion-infinite-scroll-content>
 </ion-infinite-scroll>

  <ion-fab right bottom>
    <button ion-fab (click)="showNewPost()">
      <ion-icon name="add"></ion-icon>
    </button>
  </ion-fab>

  <ion-fab *ngIf="showScrollBtn" left bottom>
    <button ion-fab color="light" (click)="scrollToTop()">
      <ion-icon name="arrow-dropup"></ion-icon>
    </button>
  </ion-fab>

</ion-content>