PR#137: Add button to scroll to the top of the page. - Fedora-app

Fedora-app

#137 Add button to scroll to the top of the page.

Merged 5 years ago by amitosh. Opened 5 years ago by alishapapun.

alishapapun/Fedora-app TopButton into master

Remove unnecessary line of code

Alisha Mohanty • 5 years ago

c299dd5

Add scroll to top button

Alisha Mohanty • 5 years ago

7986e67

ionic.config.json

file modified

+2 -1

		`@@ -29,5 +29,6 @@`
		`"proxyUrl": "https://api.simplecast.com/v1/"`
		`}`
		`],`
		`- "type": "ionic-angular"`
		`+ "type": "ionic-angular",`
		`+ "app_id": ""`
		`}`

src/pages/ask/ask.html

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>`

src/pages/ask/ask.scss

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;`
		`+ }`
		`+ }`

src/pages/ask/ask.ts

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.`

src/pages/calendar/calendar.html

file modified

		`@@ -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>`

src/pages/calendar/calendar.scss

file modified

+12 -1

		`@@ -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`
		`+ }`

src/pages/calendar/calendar.ts

file modified

+9 -3

		`@@ -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`

src/pages/home/home.html

file modified

		`@@ -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>`

src/pages/home/home.scss

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;`
		`+ }`
		`+ }`

src/pages/home/home.ts

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`
		`*/`

src/pages/magazine/magazine.html

file modified

		`@@ -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>`

src/pages/magazine/magazine.scss

file modified

+12

		`@@ -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;`
		`}`

src/pages/magazine/magazine.ts

file modified

+9 -3

		`@@ -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`