Progress visualisation and styling for "write tweet" page

app/src/components/profile-header/profile-header.html

@@ -1,7 +1,7 @@
 <!-- Generated template for the ProfileHeaderComponent component -->
 <div>
   <div class="profile-banner" [style.background]="'url('+ user.profile_banner_url +')'">
-    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px"
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
       viewBox="0 0 300 100" xml:space="preserve" width="100%" class="svg-triangle">
       <polygon points="0,75  0,100 300,100" fill="#FFFFFF" />
     </svg>

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

@@ -14,5 +14,22 @@
 
 
 <ion-content padding>
+  <form [formGroup]="tweet" (ngSubmit)="logForm()">
+    <ion-item class="padding-0">
+      <ion-label color="primary" floating>Your tweet</ion-label>
+      <ion-textarea type="text" formControlName="text" maxlength="140" [attr.rows]="4"></ion-textarea>
+    </ion-item>
 
-</ion-content>
+    <div class="actions">
+      <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>
+
+      <button ion-button type="submit" [disabled]="!tweet.valid" class="submit-tweet">tweet!</button>
+    </div>
+  </form>
+
+</ion-content>

app/src/pages/write-tweet/write-tweet.scss

@@ -1,3 +1,30 @@
 page-write-tweet {
-
-}
+    .padding-0 {
+        padding: 0;
+    }
+    .actions {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        .progress-stats {
+            margin-left: 5px;
+        }
+        .background-stroke,
+        .progress-stroke {
+            fill: transparent;
+            stroke-width: 2;
+            stroke-dasharray: 50.2654825;
+            transition: stroke-dashoffset 0.5s;
+            -webkit-animation-play-state: running;
+        }
+        .background-stroke {
+            stroke: #ddd;
+        }
+        .progress-stroke {
+            stroke: blue;
+        }
+        .submit-tweet {
+            margin-left: auto;
+        }
+    }
+}

app/src/pages/write-tweet/write-tweet.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import { FormBuilder, Validators, FormGroup } from '@angular/forms';
 
 /**
  * Generated class for the WriteTweetPage page.
@@ -15,11 +16,31 @@ import { IonicPage, NavController, NavParams } from 'ionic-angular';
 })
 export class WriteTweetPage {
 
-  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  tweet: FormGroup;
+
+  constructor(
+    public navCtrl: NavController,
+    public navParams: NavParams,
+    private formBuilder: FormBuilder
+  ) {
+    this.tweet = this.formBuilder.group({
+      text: ['', Validators.maxLength(140)]
+    });
   }
 
   ionViewDidLoad() {
-    console.log('ionViewDidLoad WriteTweetPage');
+
+  }
+
+  get tweetCharProgress() {
+    let progress = 1 - this.tweet.value["text"].length/140;
+    let radius = 8;
+    let circumference = Math.PI * radius * 2;
+    return progress * circumference;
+  }
+
+  logForm() {
+    console.log(this.tweet);
   }
 
 }