#137 Add button to scroll to the top of the page.
Merged a year ago by amitosh. Opened a year ago by alishapapun.
alishapapun/Fedora-app TopButton  into  master

file modified
+2 -1

@@ -29,5 +29,6 @@ 

        "proxyUrl": "https://api.simplecast.com/v1/"

      }

    ],

-   "type": "ionic-angular"

+   "type": "ionic-angular",

+   "app_id": ""

  }

file modified
+6 -1

@@ -45,4 +45,9 @@ 

          </ion-card>

        </ion-list>

      </ion-list>

- </ion-content> 

\ No newline at end of file

+   <ion-fab class="ion-fab-scroll" >

+     <button class="button-scroll" ion-fab color="primary" (click)="scrollToTop()">

+       <ion-icon name="arrow-dropup"></ion-icon>

+     </button>

+   </ion-fab>

+ </ion-content>

file modified
+12 -1

@@ -45,4 +45,15 @@ 

              border-radius: 2px;

          }

      }

- } 

\ No newline at end of file

+     .ion-fab-scroll {

+       bottom: 44px;

+       right: 20px;

+       width: 30px;

+       height: 30px;

+     }

+     .button-scroll{

+       background-color: rgba(60, 110, 180, 0.9);

+       height: 30px;

+       width: 30px;

+     }

+ }

file modified
+9 -1

@@ -1,6 +1,7 @@ 

- import { Component } from '@angular/core';

+ import { Component, ViewChild } from '@angular/core';

  import { Browser } from '../../providers/browser/browser';

  import { AskFedoraService, Question } from '../../providers/ask-fedora/ask-fedora';

+ import { Content } from 'ionic-angular';

  

  /**

   * Shows latest questions from Ask Fedora

@@ -13,6 +14,7 @@ 

    providers: [Browser, AskFedoraService],

  })

  export class AskPage {

+   @ViewChild(Content) content: Content;

    /**

     * Set active segment as latest questions

     */

@@ -31,6 +33,12 @@ 

    ngOnInit() {

      this.updateQuestions('activity');

    }

+   /*

+   Scroll to Top Method

+   */

+   scrollToTop() {

+       this.content.scrollToTop();

+   }

  

    /**

     * Fetch a list of latest questions using Ask Fedora API.

@@ -53,4 +53,9 @@ 

      </div>

    </ion-list>

    <no-meetings *ngIf="meetings.length === 0"></no-meetings>

+   <ion-fab class="ion-fab-scroll" >

+   <button class="button-scroll" ion-fab color="primary" (click)="scrollToTop()">

+     <ion-icon name="arrow-dropup"></ion-icon>

+   </button>

+ </ion-fab>

  </ion-content>

@@ -85,6 +85,17 @@ 

              }

          }

      }

+     .ion-fab-scroll {

+       bottom: 44px;

+       right: 20px;

+       width: 30px;

+       height: 30px;

+     }

+     .button-scroll{

+       background-color: rgba(60, 110, 180, 0.9);

+       height: 30px;

+       width: 30px;

+     }

  }

  

  searchpage {

@@ -212,4 +223,4 @@ 

              text-align: center;

          }

      }

- } 

\ No newline at end of file

+ }

@@ -1,6 +1,6 @@ 

- import { Component } from '@angular/core';

+ import { Component , ViewChild} from '@angular/core';

  import { Calendar } from '@ionic-native/calendar';

- import { ModalController, ViewController, NavParams, NavController, ToastController } from 'ionic-angular';

+ import { ModalController, ViewController, NavParams, NavController, ToastController, Content } from 'ionic-angular';

  

  import { NotificationsPage } from '../../pages/notifications/notifications';

  import { FedoCalService, Calendar as CalendarType, Meeting } from '../../providers/fedo-cal/fedo-cal';

@@ -22,7 +22,7 @@ 

    templateUrl: 'calendar.html',

  })

  export class CalendarPage {

- 

+   @ViewChild(Content) content: Content;

    /**

     * Set the current active segment as Upcoming Events in the interface

     */

@@ -58,6 +58,12 @@ 

      this.updateCalendars();

      this.updateMeetings();

    }

+   /*

+   Scroll to Top Method

+   */

+   scrollToTop() {

+       this.content.scrollToTop();

+   }

  

    /**

     * Update the list of calendars from FedoCal

@@ -60,4 +60,9 @@ 

        </ion-list>

      </div>

    </div>

+   <ion-fab class="ion-fab-scroll" >

+     <button class="button-scroll" ion-fab color="primary" (click)="scrollToTop()">

+       <ion-icon name="arrow-dropup"></ion-icon>

+     </button>

+   </ion-fab>

  </ion-content>

file modified
+12 -1

@@ -70,4 +70,15 @@ 

  	.social{

  		margin-top: 16px!important;

  	}

- } 

\ No newline at end of file

+   .ion-fab-scroll {

+     bottom: 44px;

+     right: 20px;

+     width: 30px;

+     height: 30px;

+   }

+   .button-scroll{

+     background-color: rgba(60, 110, 180, 0.9);

+     height: 30px;

+     width: 30px;

+   }

+ }

file modified
+10 -3

@@ -1,5 +1,5 @@ 

- import { Component } from '@angular/core';

- import { NavController, ToastController } from 'ionic-angular';

+ import { Component ,  ViewChild } from '@angular/core';

+ import { NavController, ToastController, Content } from 'ionic-angular';

  import { NotificationsPage } from '../../pages/notifications/notifications';

  import { Browser } from '../../providers/browser/browser';

  import { FacebookProvider } from '../../providers/social/facebook';

@@ -32,11 +32,13 @@ 

    ]

  })

  export class HomePage {

+   @ViewChild(Content) content: Content;

    /**

     * Set the currently active segment on Home Page as Community Blog

     */

    latestActive: String = 'blog';

  

+ 

    /**

     * List of Facebook and Twitter Posts

     */

@@ -110,7 +112,12 @@ 

            .present()

      );

    }

- 

+   /*

+   Scroll to Top Method

+   */

+   scrollToTop() {

+       this.content.scrollToTop();

+   }

    /**

     * Fetch latest posts from Fedor Magazine API

     */

@@ -56,4 +56,9 @@ 

    <button (click)="loadMore()" class="load" ng-if="posts.length!==0">

      Load More Posts

    </button>

+   <ion-fab class="ion-fab-scroll" >

+   <button class="button-scroll" ion-fab color="primary" (click)="scrollToTop()">

+     <ion-icon name="arrow-dropup"></ion-icon>

+   </button>

+   </ion-fab>

  </ion-content>

@@ -1,4 +1,5 @@ 

  .mag {

+   position: relative;

    background-color: #EFF0F1 !important;

    ion-card {

      padding: 16px;

@@ -35,6 +36,17 @@ 

        padding: 0 !important;

      }

    }

+   .ion-fab-scroll {

+     bottom: 44px;

+     right: 20px;

+     width: 30px;

+     height: 30px;

+   }

+   .button-scroll{

+     background-color: rgba(60, 110, 180, 0.9);

+     height: 30px;

+     width: 30px;

+   }

    .list-md {

      margin: 0 !important;

    }

@@ -1,8 +1,8 @@ 

- import { Component } from '@angular/core';

+ import { Component, ViewChild } from '@angular/core';

  

  import { Browser } from '../../providers/browser/browser';

  import { NotificationsPage } from '../../pages/notifications/notifications';

- import { NavController, ActionSheetController, ToastController } from 'ionic-angular';

+ import { NavController, ActionSheetController, ToastController, Content } from 'ionic-angular';

  import { WordPressBlogProvider, Blog, BlogPost, BLOG } from '../../providers/word-press-blog/word-press-blog';

  import { merge } from 'rxjs/observable/merge';

  import { beautifyDate } from '../../utils';

@@ -15,7 +15,7 @@ 

    providers: [WordPressBlogProvider],

  })

  export class MagazinePage {

- 

+   @ViewChild(Content) content: Content;

    /**

     * List of posts from Fedora Magazine

     */

@@ -59,6 +59,12 @@ 

    ngOnInit() {

      this.updateCachedPosts();

    }

+   /*

+   Scroll to Top Method

+   */

+   scrollToTop() {

+       this.content.scrollToTop();

+   }

  

    /**

     * Fetch latest posts from Fedora Magazine API