Browse Source

Add FAB to write a new tweet

Carsten Porth 5 years ago
parent
commit
800533ed09

+ 4 - 1
app/src/app/app.module.ts

@@ -22,6 +22,7 @@ import { TweetActionsComponent } from '../components/tweet-actions/tweet-actions
 import { ProfilePage } from '../pages/profile/profile';
 import { ProfileHeaderComponent } from '../components/profile-header/profile-header';
 import { PipesModule } from '../pipes/pipes.module';
+import { WriteTweetPage } from '../pages/write-tweet/write-tweet';
 
 @NgModule({
   declarations: [
@@ -31,6 +32,7 @@ import { PipesModule } from '../pipes/pipes.module';
     SettingsPage,
     LoginPage,
     ProfilePage,
+    WriteTweetPage,
     FeedComponent,
     TweetComponent,
     TweetHeaderComponent,
@@ -52,7 +54,8 @@ import { PipesModule } from '../pipes/pipes.module';
     SearchPage,
     SettingsPage,
     LoginPage,
-    ProfilePage
+    ProfilePage,
+    WriteTweetPage
   ],
   providers: [
     StatusBar,

+ 6 - 0
app/src/pages/home/home.html

@@ -9,4 +9,10 @@
 
 <ion-content>
   <feed [data]="data" (onRefresh)="doRefresh($event)" (onLoadMore)="loadMore($event)"></feed>
+
+  <ion-fab bottom right>
+    <button ion-fab (click)="writeTweet()">
+      <ion-icon name="add"></ion-icon>
+    </button>
+  </ion-fab>
 </ion-content>

+ 5 - 0
app/src/pages/home/home.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { IonicPage, NavController, MenuController, InfiniteScroll } from 'ionic-angular';
 import { TwitterApiProvider } from '../../providers/twitter-api/twitter-api';
+import { WriteTweetPage } from '../write-tweet/write-tweet';
 
 @IonicPage()
 @Component({
@@ -44,4 +45,8 @@ export class HomePage {
         infiniteScroll.complete();
       })
   }
+
+  writeTweet() {
+    this.navCtrl.push(WriteTweetPage);
+  }
 }

+ 18 - 0
app/src/pages/write-tweet/write-tweet.html

@@ -0,0 +1,18 @@
+<!--
+  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>
+
+</ion-content>

+ 13 - 0
app/src/pages/write-tweet/write-tweet.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { WriteTweetPage } from './write-tweet';
+
+@NgModule({
+  declarations: [
+    WriteTweetPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(WriteTweetPage),
+  ],
+})
+export class WriteTweetPageModule {}

+ 3 - 0
app/src/pages/write-tweet/write-tweet.scss

@@ -0,0 +1,3 @@
+page-write-tweet {
+
+}

+ 25 - 0
app/src/pages/write-tweet/write-tweet.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+
+/**
+ * Generated class for the WriteTweetPage page.
+ *
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
+ */
+
+@IonicPage()
+@Component({
+  selector: 'page-write-tweet',
+  templateUrl: 'write-tweet.html',
+})
+export class WriteTweetPage {
+
+  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad WriteTweetPage');
+  }
+
+}