HOSN-app/app/src/pages/write-tweet/write-tweet.html

<!--
  Generated template for the WriteTweetPage page.

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

  <ion-navbar>
    <ion-title>Write a new tweet</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <form [formGroup]="tweet" (ngSubmit)="submitTweet()">
    <ion-item class="padding-0">
      <ion-label color="primary" stacked>Your tweet</ion-label>
      <ion-textarea type="text" formControlName="text" maxlength="140" [attr.rows]="4"></ion-textarea>
    </ion-item>

    <div class="actions">
      <span class="progress">
          <svg width="20" height="20" class="progress-circle">
              <circle class="background-stroke" cx="10" cy="10" r="8"></circle>
              <circle class="progress-stroke" cx="10" cy="10" r="8" transform="rotate(-90, 10, 10)" [style.strokeDashoffset]="tweetCharProgress"></circle>
            </svg>
      
            <span class="progress-stats">{{ (tweet.value.text).length }}/140</span>
      </span>
      
      <span class="network-switch">
          <ion-icon name="logo-twitter"></ion-icon>
          <ion-toggle checked="false" formControlName="p2p" color="dark"></ion-toggle>
          <ion-icon name="glasses"></ion-icon>
      </span>

      <button ion-button type="submit" [disabled]="!tweet.valid" class="submit-tweet">tweet!</button>
    </div>
  </form>

</ion-content>