From c3039ca33cd521c5d62bc0793f732885a6157ecb Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:07:14 +0000 Subject: [PATCH 1/24] Add Dates to the social --- diff --git a/src/providers/social/facebook.ts b/src/providers/social/facebook.ts index d958926..d768aa1 100644 --- a/src/providers/social/facebook.ts +++ b/src/providers/social/facebook.ts @@ -3,6 +3,7 @@ import ENV from '@environment'; import { Storage } from '@ionic/storage'; import { Facebook } from 'fb'; import { compact } from 'lodash-es'; +import { beautifyDate } from '../../utils'; import { SocialProvider, Post, FACEBOOK } from './social'; import { Observable } from 'rxjs/Observable'; import { Observer } from 'rxjs/Observer'; @@ -90,6 +91,7 @@ export class FacebookProvider implements SocialProvider { link: 'https://facebook.com/' + p.id, content: p.message, origin: FACEBOOK, + date: beautifyDate(p.created_time) }; return post.content ? post : null; diff --git a/src/providers/social/social.ts b/src/providers/social/social.ts index bb76e33..930b775 100644 --- a/src/providers/social/social.ts +++ b/src/providers/social/social.ts @@ -17,22 +17,27 @@ export interface Post { /** * Service specific unique ID */ - id:string, + id: string, /** * Origin of the post */ - origin:string, + origin: string, /** * Link to the app of website of the social media service hosting the post */ - link:string, + link: string, /** * Text content of the post */ - content:string, + content: string, + + /** + * Date of the post + */ + date: string, } /** diff --git a/src/providers/social/twitter.ts b/src/providers/social/twitter.ts index 5bcabb8..df1faff 100644 --- a/src/providers/social/twitter.ts +++ b/src/providers/social/twitter.ts @@ -1,5 +1,6 @@ import ENV from '@environment'; import { Injectable } from '@angular/core'; +import { beautifyDate } from '../../utils'; import { SocialProvider, Post } from './social'; import { HttpClient } from '@angular/common/http'; import { Storage } from '@ionic/storage'; @@ -68,6 +69,7 @@ export class TwitterProvider implements SocialProvider { link: 'https://twitter.com/statuses/' + t.id_str, content: t.text, origin: 'twitter', + date: beautifyDate(t.created_at) }))) ); } diff --git a/src/utils.ts b/src/utils.ts index dae1244..dbbf223 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -19,3 +19,15 @@ export function chooseEndpoint(devServerEndpoint:string, appEndpoint:string) { export function defaultValue(value:T): OperatorFunction { return map((x:T) => x ? x : value ); } + + /* Function to beautify the post date to human readable form + * @param postDate actual time of the post + * @returns Beautified date in format MM DD at HH:MM + */ +export function beautifyDate(postDate: any): string { + let jsDate: any = new Date(postDate); + let ptime = jsDate.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true }); + jsDate = jsDate.toString().split(' '); + let pdate: string = jsDate[1] + ' ' + jsDate[2]; + return (pdate + ' at ' + ptime); +} From 4f341e29628e56e1082e7a5f1e855443118990fe Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:07:14 +0000 Subject: [PATCH 2/24] update magazine provider to fetch images for carousel --- diff --git a/src/providers/fedora-magazine/fedora-magazine.ts b/src/providers/fedora-magazine/fedora-magazine.ts index bb17792..68ebc98 100644 --- a/src/providers/fedora-magazine/fedora-magazine.ts +++ b/src/providers/fedora-magazine/fedora-magazine.ts @@ -1,6 +1,6 @@ import { Storage } from '@ionic/storage'; import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; +import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http'; import { Observable } from 'rxjs/Observable'; import { map, tap } from 'rxjs/operators'; import { fromPromise } from 'rxjs/observable/fromPromise'; @@ -45,11 +45,6 @@ export interface Post { title: string, /** - * URL to the featured image of the post - */ - image: string, - - /** * A short excerpt of the post */ excerpt: string, @@ -66,6 +61,27 @@ export interface Post { } /** + * Represents a image on App Carousel fetched from fedora magazine + */ +export interface Image { + /** + * Unique ID of the post, supplied by the CMS + */ + id: number, + + /** + * A sluggified link to the post + */ + link: string, + + /** + * The Image of the post + */ + + image: string +} + +/** * Service for fetching posts from Fedora Magazine API */ @Injectable() @@ -117,4 +133,28 @@ export class FedoraMagazineService { tap(x => this.storage.set(STORAGE_KEY, x))) ); } + + /** + * Fetch the list of latest images on Fedora Magazine + * + * @returns Observable which emits an array of images + */ + getImages(): Observable { + //set request headers + let headers = new HttpHeaders(); + headers.append('Content-Type', 'application/json'); + + let pageResults = '5'; // get top 5 posts only + let imageCategory = '609'; //get posts from New in Fedora category + + //set search parameters + let params = new HttpParams().set('per_page',pageResults).set('categories',imageCategory).set('_embed',''); + + return this.http.get(`${ENDPOINT}/posts`, {headers: headers, params: params}) + .map((data: any[]) => data.map((image: any) => ({ + id: image.id, + link: image.link, + image: image._embedded['wp:featuredmedia']['0'].media_details.sizes.medium_large.source_url + }))); + } } From 727f8f91dbc4e7cf46542fa68fc284fff840e3ff Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:08:52 +0000 Subject: [PATCH 3/24] Update beautifyDate to incorporate blog posts and social posts --- diff --git a/src/providers/social/facebook.ts b/src/providers/social/facebook.ts index d768aa1..a599dc8 100644 --- a/src/providers/social/facebook.ts +++ b/src/providers/social/facebook.ts @@ -91,7 +91,7 @@ export class FacebookProvider implements SocialProvider { link: 'https://facebook.com/' + p.id, content: p.message, origin: FACEBOOK, - date: beautifyDate(p.created_time) + date: beautifyDate(p.created_time,'social') }; return post.content ? post : null; diff --git a/src/providers/social/twitter.ts b/src/providers/social/twitter.ts index df1faff..c2ac7f2 100644 --- a/src/providers/social/twitter.ts +++ b/src/providers/social/twitter.ts @@ -69,7 +69,7 @@ export class TwitterProvider implements SocialProvider { link: 'https://twitter.com/statuses/' + t.id_str, content: t.text, origin: 'twitter', - date: beautifyDate(t.created_at) + date: beautifyDate(t.created_at,'social') }))) ); } diff --git a/src/utils.ts b/src/utils.ts index dbbf223..9a51b77 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -7,7 +7,7 @@ import { OperatorFunction } from 'rxjs/interfaces'; * @param devServerEndpoint endpoint in Ionic dev server * @param appEndpoint endpoint to use in real application */ -export function chooseEndpoint(devServerEndpoint:string, appEndpoint:string) { +export function chooseEndpoint(devServerEndpoint: string, appEndpoint: string) { // courtesy: https://forum.ionicframework.com/t/check-if-run-on-emulator-dev-production-or-livereload/71845/9 return window.hasOwnProperty('IonicDevServer') ? devServerEndpoint : appEndpoint; } @@ -22,12 +22,19 @@ export function defaultValue(value:T): OperatorFunction { /* Function to beautify the post date to human readable form * @param postDate actual time of the post - * @returns Beautified date in format MM DD at HH:MM + * @returns Beautified date in format MM DD at HH:MM for social media post and MM DD, YY for blog posts */ -export function beautifyDate(postDate: any): string { + +export function beautifyDate(postDate: any, type: string): string { + let jsDate: any = new Date(postDate); - let ptime = jsDate.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true }); - jsDate = jsDate.toString().split(' '); - let pdate: string = jsDate[1] + ' ' + jsDate[2]; - return (pdate + ' at ' + ptime); + if (type === 'social') { + let ptime = jsDate.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true }); + jsDate = jsDate.toString().split(' '); + let pdate: string = jsDate[1] + ' ' + jsDate[2]; + return (pdate + ' at ' + ptime); + } else if (type === 'blog') { + jsDate = jsDate.toString().split(' ') + return jsDate[1] + ' ' + jsDate[2] + ', ' + jsDate[3]; + } } From 9d55682558d82bb2de37bdf628fe4761389085a2 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:08:52 +0000 Subject: [PATCH 4/24] Add Community Blog Provider --- diff --git a/src/providers/community-blog/community-blog.ts b/src/providers/community-blog/community-blog.ts new file mode 100644 index 0000000..59b5a02 --- /dev/null +++ b/src/providers/community-blog/community-blog.ts @@ -0,0 +1,35 @@ +import 'rxjs/add/operator/map'; +import { Injectable } from '@angular/core'; +import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http'; +import { Observable } from 'rxjs/Observable'; +import { chooseEndpoint, beautifyDate } from '../../utils'; +import { Post } from '../fedora-magazine/fedora-magazine'; + +const ENDPOINT = chooseEndpoint('/community-blog', 'http://communityblog.fedoraproject.org/wp-json/wp/v2'); + +/** + * Service for fetching posts from Community Blog API + */ +@Injectable() +export class CommunityBlogService { + constructor(private http: HttpClient) { + } + + /** + * Fetch the list of latest posts on Fedora Community Blog + * + * @returns Observable which emits an array of blog posts + */ + getBlogPosts(): Observable { + return this.http.get(`${ENDPOINT}/posts`) + .map((data: any[]) => data.map((blogpost: any) => ({ + id: blogpost.id, + link: blogpost.link, + permalink: blogpost.guid.rendered, + title: blogpost.title.rendered, + excerpt: blogpost.excerpt.rendered, + content: blogpost.content.rendered, + publishedAt: beautifyDate(blogpost.date_gmt, 'blog') + }))); + } +} From 0ba3bd8b9cc0ad2ac1c2e7d6162bf5675d4b0da8 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:08:52 +0000 Subject: [PATCH 5/24] update mag provider to fetch images --- diff --git a/src/providers/fedora-magazine/fedora-magazine.ts b/src/providers/fedora-magazine/fedora-magazine.ts index 68ebc98..f7e0298 100644 --- a/src/providers/fedora-magazine/fedora-magazine.ts +++ b/src/providers/fedora-magazine/fedora-magazine.ts @@ -57,7 +57,7 @@ export interface Post { /** * Time of publication */ - publishedAt: Date + publishedAt: any } /** From c77ff68bdff3ce12accfc9057c8d5da1ed7933f8 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:08:52 +0000 Subject: [PATCH 6/24] Remove unused imports and add HTTPS --- diff --git a/src/providers/community-blog/community-blog.ts b/src/providers/community-blog/community-blog.ts index 59b5a02..08f20a9 100644 --- a/src/providers/community-blog/community-blog.ts +++ b/src/providers/community-blog/community-blog.ts @@ -1,11 +1,11 @@ import 'rxjs/add/operator/map'; import { Injectable } from '@angular/core'; -import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http'; +import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs/Observable'; import { chooseEndpoint, beautifyDate } from '../../utils'; import { Post } from '../fedora-magazine/fedora-magazine'; -const ENDPOINT = chooseEndpoint('/community-blog', 'http://communityblog.fedoraproject.org/wp-json/wp/v2'); +const ENDPOINT = chooseEndpoint('/community-blog', 'https://communityblog.fedoraproject.org/wp-json/wp/v2'); /** * Service for fetching posts from Community Blog API From 18c20b8f681f60eb45b5dff038f59d8463c3d983 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:11:42 +0000 Subject: [PATCH 7/24] fix conflicting interface name --- diff --git a/src/providers/social/facebook.ts b/src/providers/social/facebook.ts index a599dc8..9f7bbc0 100644 --- a/src/providers/social/facebook.ts +++ b/src/providers/social/facebook.ts @@ -4,7 +4,7 @@ import { Storage } from '@ionic/storage'; import { Facebook } from 'fb'; import { compact } from 'lodash-es'; import { beautifyDate } from '../../utils'; -import { SocialProvider, Post, FACEBOOK } from './social'; +import { SocialProvider, SocialMediaPost, FACEBOOK } from './social'; import { Observable } from 'rxjs/Observable'; import { Observer } from 'rxjs/Observer'; import { fromPromise } from 'rxjs/observable/fromPromise'; @@ -50,7 +50,7 @@ export class FacebookProvider implements SocialProvider { * @param page ID of the Facebook page * @returns Observable which emits an array of Facebook posts */ - private loadCachedPosts(page: string): Observable { + private loadCachedPosts(page: string): Observable { return fromPromise(this.storage.get(getStorageKey(page))).pipe(defaultValue([])); } @@ -81,11 +81,11 @@ export class FacebookProvider implements SocialProvider { * @param args Extra args for pagination etc. * @returns Observable which emits an array of Facebook posts */ - fetchPosts(page: string, args?): Observable { + fetchPosts(page: string, args?): Observable { return this.api(`${page}/posts`) .pipe( map((res: any) => { - const posts = compact(res.data.map(p => { + const posts = compact(res.data.map(p => { const post = { id: p.id, link: 'https://facebook.com/' + p.id, @@ -109,7 +109,7 @@ export class FacebookProvider implements SocialProvider { * @param page ID of the Facebook page * @returns Observable which emits an array of Facebook posts */ - public getPosts(page: string): Observable { + public getPosts(page: string): Observable { return merge(this.loadCachedPosts(page), this.fetchPosts(page).pipe( tap(x => this.storage.set(getStorageKey(page), x)) )); diff --git a/src/providers/social/social.ts b/src/providers/social/social.ts index 930b775..a8e8c95 100644 --- a/src/providers/social/social.ts +++ b/src/providers/social/social.ts @@ -13,7 +13,7 @@ export const TWITTER = 'twitter'; /** * Represents a post in social media service */ -export interface Post { +export interface SocialMediaPost { /** * Service specific unique ID */ @@ -53,7 +53,7 @@ export interface SocialProvider { * @param resID service specific resource ID * @returns Observable which emits an array of posts */ - getPosts(resID: string): Observable + getPosts(resID: string): Observable /** * Fetch the list of posts for a given service specific resource ID, usually @@ -65,5 +65,5 @@ export interface SocialProvider { * @param args Extra args for pagination etc. * @returns Observable which emits an array of posts */ - fetchPosts(resID: string, args?:{ offset?: string }): Observable + fetchPosts(resID: string, args?:{ offset?: string }): Observable } diff --git a/src/providers/social/twitter.ts b/src/providers/social/twitter.ts index c2ac7f2..7a3d9d0 100644 --- a/src/providers/social/twitter.ts +++ b/src/providers/social/twitter.ts @@ -1,7 +1,7 @@ import ENV from '@environment'; import { Injectable } from '@angular/core'; import { beautifyDate } from '../../utils'; -import { SocialProvider, Post } from './social'; +import { SocialProvider, SocialMediaPost } from './social'; import { HttpClient } from '@angular/common/http'; import { Storage } from '@ionic/storage'; import { Observable } from 'rxjs/Observable'; @@ -48,7 +48,7 @@ export class TwitterProvider implements SocialProvider { * @param handle twitter handle * @returns Observable which emits an array of tweets */ - private loadCachedPosts(handle: string): Observable { + private loadCachedPosts(handle: string): Observable { return fromPromise(this.storage.get(getStorageKey(handle))).pipe(defaultValue([])); } @@ -59,7 +59,7 @@ export class TwitterProvider implements SocialProvider { * @param args Extra args for pagination etc. * @returns Observable which emits an array of tweets */ - fetchPosts(handle: string, args?): Observable { + fetchPosts(handle: string, args?): Observable { return this.http.get(`${ENDPOINT}/statuses/user_timeline.json`, { params: { screen_name: handle }, headers: { 'Authorization': 'Bearer ' + ENV.TWITTER_CONFIG.BEARER_TOKEN } @@ -82,7 +82,7 @@ export class TwitterProvider implements SocialProvider { * @param handle Twitter handle whose tweets to load * @returns Observable which emits an array of tweets */ - public getPosts(handle: string): Observable { + public getPosts(handle: string): Observable { return merge(this.loadCachedPosts(handle), this.fetchPosts(handle).pipe( tap(x => this.storage.set(getStorageKey(handle), x)) )); From 4c1c74fa59bfe8eb1ade18ca102b348164f74619 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:11:42 +0000 Subject: [PATCH 8/24] Add community blog proxy --- diff --git a/ionic.config.json b/ionic.config.json index 12b679c..cd9d4b5 100644 --- a/ionic.config.json +++ b/ionic.config.json @@ -17,6 +17,10 @@ { "path": "/ask-fedora", "proxyUrl": "https://ask.fedoraproject.org/en/api/v1/" + }, + { + "path": "/community-blog", + "proxyUrl": "https://communityblog.fedoraproject.org/wp-json/wp/v2/" } ], "integrations": { From 0e46af7f03533fdfd25b0c9cd0c9a437380303d6 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:11:42 +0000 Subject: [PATCH 9/24] Add More and Notifications Page --- diff --git a/src/pages/more/more.html b/src/pages/more/more.html new file mode 100644 index 0000000..7fe188f --- /dev/null +++ b/src/pages/more/more.html @@ -0,0 +1,18 @@ + + + + + more + + + + + + + + diff --git a/src/pages/more/more.module.ts b/src/pages/more/more.module.ts new file mode 100644 index 0000000..7e818d1 --- /dev/null +++ b/src/pages/more/more.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { IonicPageModule } from 'ionic-angular'; +import { MorePage } from './more'; + +@NgModule({ + declarations: [ + MorePage, + ], + imports: [ + IonicPageModule.forChild(MorePage), + ], +}) +export class MorePageModule {} diff --git a/src/pages/more/more.scss b/src/pages/more/more.scss new file mode 100644 index 0000000..dfcf761 --- /dev/null +++ b/src/pages/more/more.scss @@ -0,0 +1,3 @@ +page-more { + +} diff --git a/src/pages/more/more.ts b/src/pages/more/more.ts new file mode 100644 index 0000000..16483d8 --- /dev/null +++ b/src/pages/more/more.ts @@ -0,0 +1,25 @@ +import { Component } from '@angular/core'; +import { IonicPage, NavController, NavParams } from 'ionic-angular'; + +/** + * Generated class for the MorePage page. + * + * See https://ionicframework.com/docs/components/#navigation for more info on + * Ionic pages and navigation. + */ + +@IonicPage() +@Component({ + selector: 'page-more', + templateUrl: 'more.html', +}) +export class MorePage { + + constructor(public navCtrl: NavController, public navParams: NavParams) { + } + + ionViewDidLoad() { + console.log('ionViewDidLoad MorePage'); + } + +} diff --git a/src/pages/notifications/notifications.html b/src/pages/notifications/notifications.html new file mode 100644 index 0000000..388eedb --- /dev/null +++ b/src/pages/notifications/notifications.html @@ -0,0 +1,18 @@ + + + + + notifications + + + + + + + + diff --git a/src/pages/notifications/notifications.module.ts b/src/pages/notifications/notifications.module.ts new file mode 100644 index 0000000..0862bad --- /dev/null +++ b/src/pages/notifications/notifications.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { IonicPageModule } from 'ionic-angular'; +import { NotificationsPage } from './notifications'; + +@NgModule({ + declarations: [ + NotificationsPage, + ], + imports: [ + IonicPageModule.forChild(NotificationsPage), + ], +}) +export class NotificationsPageModule {} diff --git a/src/pages/notifications/notifications.scss b/src/pages/notifications/notifications.scss new file mode 100644 index 0000000..b3c6a89 --- /dev/null +++ b/src/pages/notifications/notifications.scss @@ -0,0 +1,3 @@ +page-notifications { + +} diff --git a/src/pages/notifications/notifications.ts b/src/pages/notifications/notifications.ts new file mode 100644 index 0000000..47983e3 --- /dev/null +++ b/src/pages/notifications/notifications.ts @@ -0,0 +1,25 @@ +import { Component } from '@angular/core'; +import { IonicPage, NavController, NavParams } from 'ionic-angular'; + +/** + * Generated class for the NotificationsPage page. + * + * See https://ionicframework.com/docs/components/#navigation for more info on + * Ionic pages and navigation. + */ + +@IonicPage() +@Component({ + selector: 'page-notifications', + templateUrl: 'notifications.html', +}) +export class NotificationsPage { + + constructor(public navCtrl: NavController, public navParams: NavParams) { + } + + ionViewDidLoad() { + console.log('ionViewDidLoad NotificationsPage'); + } + +} From 8c12b00f47e3a8f4775b244b8d6435f311e90aca Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:11:42 +0000 Subject: [PATCH 10/24] Add Tabs View --- diff --git a/src/pages/tabs/tabs.html b/src/pages/tabs/tabs.html new file mode 100644 index 0000000..7da2a9e --- /dev/null +++ b/src/pages/tabs/tabs.html @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/src/pages/tabs/tabs.scss b/src/pages/tabs/tabs.scss new file mode 100644 index 0000000..1e4454e --- /dev/null +++ b/src/pages/tabs/tabs.scss @@ -0,0 +1,3 @@ +page-tabs { + +} diff --git a/src/pages/tabs/tabs.ts b/src/pages/tabs/tabs.ts new file mode 100644 index 0000000..86009b8 --- /dev/null +++ b/src/pages/tabs/tabs.ts @@ -0,0 +1,24 @@ +import { Component } from '@angular/core'; + +import { HomePage } from '../home/home'; +import { MagazinePage } from '../magazine/magazine'; +import { CalendarPage } from '../calendar/calendar'; +import { AskPage } from '../ask/ask'; +import { MorePage } from '../more/more'; + +@Component({ + templateUrl: 'tabs.html' +}) +export class TabsPage { + /** + * set the root of the tabs + */ + tab1Root = HomePage; + tab2Root = MagazinePage; + tab3Root = CalendarPage; + tab4Root = AskPage; + tab5Root = MorePage; + constructor() { + + } +} \ No newline at end of file From 89b499f14e6088d1b65f1d4633db0f5faacc3b3d Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:11:42 +0000 Subject: [PATCH 11/24] Add Home Page View --- diff --git a/src/pages/home/home.html b/src/pages/home/home.html new file mode 100644 index 0000000..8facbf9 --- /dev/null +++ b/src/pages/home/home.html @@ -0,0 +1,62 @@ + + + + Fedora + + + + + + + + + + + + + + + + +
+ Latest from the community + + + Community Blog + + + Social Media + + +
+ + + + + + + + + + + + + + +
+ Fedora + + + {{update.date}} + +
+ + + + + +
+
+ \ No newline at end of file diff --git a/src/pages/home/home.scss b/src/pages/home/home.scss new file mode 100644 index 0000000..7eb6c36 --- /dev/null +++ b/src/pages/home/home.scss @@ -0,0 +1,73 @@ +page-home { + ion-content { + background-color: #EFF0F1 !important; + } + ion-slides { + height: auto; + } + ion-slide.swiper-slide { + align-items: flex-start; + } + .slide-zoom { + img { + padding: 0.25em; + } + } + .latest { + .label { + background-color: #fff; + padding: 13px 16px; + margin: 0; + } + ion-segment { + padding: 0px 24px 0 24px; + background-color: #fff; + } + .segment-button { + font-family: "Montserrat-Light"; + font-size: 12px; + color: #9A9FA6; + text-transform: none; + padding: 0; + } + .segment-activated { + font-family: "Montserrat-SemiBold"; + font-size: 12px; + color: #3C6EB4; + padding: 0; + } + } + .card { + padding: 16px 24px; + background-color: #FFFFFF!important; + box-shadow: none; + margin: 4px 0; + width: 100%; + } + .card-header{ + padding: 0!important; + } + .card-content{ + margin-top: 8px; + padding: 0!important; + } + ion-card{ + img{ + width: auto; + float: left; + margin-right: 12px; + } + span{ + display: block; + } + .active-title{ + margin-bottom: 4px; + } + ion-icon{ + margin-right: 5px; + } + } + .social{ + margin-top: 16px!important; + } +} \ No newline at end of file diff --git a/src/pages/home/home.ts b/src/pages/home/home.ts new file mode 100644 index 0000000..bbf906d --- /dev/null +++ b/src/pages/home/home.ts @@ -0,0 +1,65 @@ +import { Component } from '@angular/core'; +import { NavController } from 'ionic-angular'; +import { NotificationsPage } from '../../pages/notifications/notifications' +import { Browser } from '../../providers/browser/browser'; +import { FacebookProvider } from '../../providers/social/facebook'; +import { TwitterProvider } from '../../providers/social/twitter'; +import { SocialMediaPost } from '../../providers/social/social'; +import { forkJoin } from 'rxjs/observable/forkJoin'; +import { FedoraMagazineService, Post, Image } from '../../providers/fedora-magazine/fedora-magazine'; +import { CommunityBlogService } from '../../providers/community-blog/community-blog'; + +const HANDLE = { + FB: 'fedoraqa', + TWITTER: 'fedora_qa', +}; + +@Component({ + selector: 'page-home', + templateUrl: 'home.html', + providers: [FacebookProvider, TwitterProvider, FedoraMagazineService, CommunityBlogService] +}) + +export class HomePage { + latestActive: String = "blog"; + + private socialposts: SocialMediaPost[]; + private carousel: Image[]; + private blogposts: Post[]; + + constructor(public navCtrl: NavController, private browser: Browser, private fb: FacebookProvider, private twitter: TwitterProvider, private fedoraMag: FedoraMagazineService, private communityblog: CommunityBlogService) { + this.socialposts = []; + this.blogposts = []; + this.carousel = []; + } + + openNotificationPage() { + this.navCtrl.push(NotificationsPage, { animate: true, direction: 'forward' }); + } + + ngOnInit() { + this.updatePosts(); + } + + private updatePosts(): void { + + forkJoin(this.fb.getPosts(HANDLE.FB), this.twitter.getPosts(HANDLE.TWITTER)) + .subscribe(values => { + this.socialposts = [...values[0], ...values[1]] as SocialMediaPost[]; + }); + + this.fedoraMag.getImages() + .subscribe(images => { + this.carousel = images; + }); + + this.communityblog.getBlogPosts() + .subscribe(blogposts => { + this.blogposts = blogposts; + }); + } + + openUpdate(event) { + this.browser.open(event.link); + } +} \ No newline at end of file From 20d7346fd15bd15ae7a8dac6a31bae10f3cf83d8 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:11:42 +0000 Subject: [PATCH 12/24] Add Icons for the homepage --- diff --git a/src/assets/img/Fedora.svg b/src/assets/img/Fedora.svg new file mode 100644 index 0000000..2de1ad1 --- /dev/null +++ b/src/assets/img/Fedora.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/img/notification.svg b/src/assets/img/notification.svg new file mode 100644 index 0000000..53c7c0f --- /dev/null +++ b/src/assets/img/notification.svg @@ -0,0 +1,12 @@ + + + + ion-android-notifications-none - Ionicons + Created with Sketch. + + + + + + + \ No newline at end of file From 4ce56cef39e8b235c540f5c217a60dbc176158c8 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:11:42 +0000 Subject: [PATCH 13/24] Update the app to show tabs view --- diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 67a0859..924438b 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,12 +1,7 @@ import { Component, ViewChild } from '@angular/core'; import { Platform, NavController } from 'ionic-angular'; -import { MagazinePage } from '../pages/magazine/magazine'; -import { AskPage } from '../pages/ask/ask'; -import { CalendarPage } from '../pages/calendar/calendar'; -import { SocialPage } from '../pages/social/social'; -import { WomenPage } from '../pages/women/women'; -import { FirstPage } from '../pages/first/first'; +import { TabsPage } from '../pages/tabs/tabs'; import { SplashScreen } from '@ionic-native/splash-screen'; /** @@ -16,44 +11,16 @@ import { SplashScreen } from '@ionic-native/splash-screen'; templateUrl: 'app.html', }) export class App { - /** - * Contains the pages that constitute this app - */ - pages: { title: string, component: any }[]; - - rootPage: any; + //set the entry point of app as Tabs + rootPage:any = TabsPage; @ViewChild('content') nav: NavController; - constructor(platform: Platform, splashScreen: SplashScreen) { - this.pages = [ - { title: 'Home', component: FirstPage }, - { title: 'Magazine', component: MagazinePage }, - { title: 'Social', component: SocialPage }, - { title: 'Ask', component: AskPage }, - { title: 'Calendar', component: CalendarPage }, - { title: 'Women', component: WomenPage } - - ]; - - this.rootPage = FirstPage; - platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. splashScreen.hide(); }); } - - /** - * Navigate to a new page - * - * @param page page to navigate to - */ - openPage(page): void { - // Reset the content nav to have just this page we wouldn't want the back - // button to show in this scenario - this.nav.push(page.component); - } } diff --git a/src/app/app.html b/src/app/app.html index e99f30a..202644e 100644 --- a/src/app/app.html +++ b/src/app/app.html @@ -1,19 +1 @@ - - - - Fedora - - - - - - - - - - - - - + \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 7872c11..3ba77d7 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,11 +11,13 @@ import { SpinnerDialog } from '@ionic-native/spinner-dialog'; import { Toast } from '@ionic-native/toast'; import { App } from './app.component'; -import { FirstPage } from '../pages/first/first'; +import { TabsPage } from '../pages/tabs/tabs'; +import { HomePage } from '../pages/home/home'; import { MagazinePage } from '../pages/magazine/magazine'; import { AskPage } from '../pages/ask/ask'; import { CalendarPage } from '../pages/calendar/calendar'; -import { SocialPage } from '../pages/social/social'; +import { MorePage} from '../pages/more/more'; +import { NotificationsPage} from '../pages/notifications/notifications'; import { WomenPage } from '../pages/women/women'; import { Browser } from '../providers/browser/browser'; @@ -23,11 +25,13 @@ import { Browser } from '../providers/browser/browser'; @NgModule({ declarations: [ App, - FirstPage, + TabsPage, + HomePage, MagazinePage, AskPage, CalendarPage, - SocialPage, + MorePage, + NotificationsPage, WomenPage ], imports: [ @@ -39,11 +43,13 @@ import { Browser } from '../providers/browser/browser'; bootstrap: [IonicApp], entryComponents: [ App, - FirstPage, MagazinePage, AskPage, CalendarPage, - SocialPage, + TabsPage, + HomePage, + MorePage, + NotificationsPage, WomenPage ], providers: [ From 3d030049e5a0ae2f558508046da30eb3a183bf35 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:11:42 +0000 Subject: [PATCH 14/24] Add Tabs Stylesheet --- diff --git a/src/app/app.scss b/src/app/app.scss index dc10e30..268a6b5 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -1,6 +1,4 @@ // http://ionicframework.com/docs/v2/theming/ - - // App Global Sass // -------------------------------------------------- // Put style rules here that you want to apply globally. These @@ -12,21 +10,129 @@ // default Sass variables, belong in "theme/variables.scss". // // To declare rules for a specific mode, create a child rule -// for the .md, .ios, or .wp mode classes. The mode class is +// for the .md, .md, or .wp mode classes. The mode class is // automatically applied to the element in the app. // http://ionicframework.com/docs/v2/theming/ - // @import "../pages/magazine/magazine"; // @import "../pages/ask/ask"; // @import "../pages/calendar/calendar"; -// @import "../pages/social/social"; // @import "../pages/women/women"; -// @import "../pages/first/first"; - - // App Shared Rules - .iframeWrapper iframe { width: 100%; height: 100%; } + +//tab icons-active +ion-icon { + &[class*="fedora-"] { + mask-size: contain; + mask-position: 50% 50%; + mask-repeat: no-repeat; + background: currentColor; + width: 1em; + height: 1em; + } + &[class*="fedora-home"] { + mask-image: url('data:image/svg+xml;utf8,home - material '); + } + &[class*="fedora-mag"] { + mask-image: url('data:image/svg+xml;utf8,Icons/Mag/Active '); + } + &[class*="fedora-cal"] { + mask-image: url('data:image/svg+xml;utf8,Icons/Cal/Active '); + } + &[class*="fedora-ask"] { + mask-image: url('data:image/svg+xml;utf8,Icons/Ask/Active '); + } + &[class*="fedora-more"] { + mask-image: url('data:image/svg+xml;utf8,Icons/More/Active '); + } +} + +//tab icons-inactive +.tabs { + a[aria-selected=false] { + .tab-button-icon[ng-reflect-name=fedora-home] { + mask-image: url('data:image/svg+xml;utf8, '); + } + } + a[aria-selected=false] { + .tab-button-icon[ng-reflect-name=fedora-mag] { + mask-image: url('data:image/svg+xml;utf8, '); + } + } + a[aria-selected=false] { + .tab-button-icon[ng-reflect-name=fedora-cal] { + mask-image: url('data:image/svg+xml;utf8, '); + } + } + a[aria-selected=false] { + .tab-button-icon[ng-reflect-name=fedora-ask] { + mask-image: url('data:image/svg+xml;utf8, '); + } + } + a[aria-selected=false] { + .tab-button-icon[ng-reflect-name=fedora-more] { + mask-image: url('data:image/svg+xml;utf8, '); + } + } +} + +ion-buttons { + button { + background-color: transparent; + } + } + + +//tab typography +.tabs { + a[aria-selected=false] { + span { + font-family: "Montserrat-Regular"; + font-size: 12px; + color: #9A9FA6; + text-align: left; + } + } + a[aria-selected=true] { + span { + /* Home: */ + font-family: "Montserrat-SemiBold"; + font-size: 12px; + color: #3C6EB4; + text-align: left; + line-height: 12px; + } + } +} + +.tabs-md[tabsLayout=icon-top] .has-icon .tab-button-text { + margin-top: 8px; +} + +//styles of the tabbar +.tabbar { + padding: 12px 0; + background-color: #fff !important; + box-shadow: 0 2px 4px 0 #565656 !important; + justify-content: space-around !important; +} + +.tab-button { + overflow: visible !important; + flex: none; +} + +//styles of the top navbar +ion-navbar { + ion-title { + text-align: center; + } + background-color: #fff !important; + box-shadow: 0 2px 4px 0 rgba(86, + 86, + 86, + 0.05); +} \ No newline at end of file From d6be9a1a9d3ccdd45f23cfbf1622369ed7513bf3 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:11:42 +0000 Subject: [PATCH 15/24] Add global fonts,colors and typographic styles --- diff --git a/src/theme/variables.scss b/src/theme/variables.scss index 18276a4..6009a9b 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -1,19 +1,51 @@ // Ionic Variables and Theming. For more info, please see: // http://ionicframework.com/docs/theming/ - // Font path is used to include ionicons, // roboto, and noto sans fonts -$font-path: "../assets/fonts"; - - // The app direction is used to include // rtl styles in your app. For more info, please see: // http://ionicframework.com/docs/theming/rtl-support/ $app-direction: ltr; +@import "ionic.globals"; -@import "ionic.globals"; +// Fonts +// -------------------------------------------------- +@font-face { + font-family: 'Montserrat-Light'; + src: url('../assets/fonts/montserrat-light-webfont.woff2') format('woff2'), url('../assets/fonts/montserrat-light-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Montserrat-Regular'; + src: url('../assets/fonts/montserrat-regular-webfont.woff2') format('woff2'), url('../assets/fonts/montserrat-regular-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Montserrat-SemiBold'; + src: url('../assets/fonts/montserrat-semibold-webfont.woff2') format('woff2'), url('../assets/fonts/montserrat-semibold-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'OpenSans-Regular'; + src: url('../assets/fonts/opensans-regular-webfont.woff2') format('woff2'), url('../assets/fonts/opensans-regular-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'OpenSans-Semibold'; + src: url('../assets/fonts/opensans-semibold-webfont.woff2') format('woff2'), url('../assets/fonts/opensans-semibold-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} // Shared Variables // -------------------------------------------------- @@ -21,10 +53,6 @@ $app-direction: ltr; // the Sass variables found in Ionic's source scss files. // To view all the possible Ionic variables, see: // http://ionicframework.com/docs/theming/overriding-ionic-variables/ - - - - // Named Color Variables // -------------------------------------------------- // Named colors makes it easy to reuse colors on various components. @@ -33,56 +61,68 @@ $app-direction: ltr; // colors so you can add, rename and remove colors as needed. // The "primary" color is the only required color in the map. -$colors: ( - primary: #488aff, - secondary: #32db64, - danger: #f53d3d, - light: #f4f4f4, - dark: #222 + +$colors: ( primary: #3C6EB4, +fedorablue: #3C6EB4, +fedoraltblue: #7096D0, +bgcolor: #EFF0F1, +dark: #000, +light: #fff, +bgaccent: #E8EFF8, +darkgrey: #535961, +grey: #79818B, +ltgrey: #9A9FA6, ); +// Typographic Styles +.label { + font-family: "Montserrat-Regular"; + font-size: 12px; + text-transform: uppercase; + color: #9A9FA6; + letter-spacing: 0.43px; + line-height: 12px; +} + +.body-title { + font-family: "OpenSans-Semibold"; + font-size: 14px !important; + color: #000000 !important; + line-height: 20px !important; +} + +.active-title { + @extend .body-title; + color: #3C6EB4; +} + +.body-subtitle { + font-family: "OpenSans-Regular"; + font-size: 10px !important; + color: #535961 !important; + line-height: 10px; +} + +.content { + @extend .body-subtitle; + font-size: 14px !important; + line-height: 20px !important; +} + // App iOS Variables // -------------------------------------------------- // iOS only Sass variables can go here - - - - // App Material Design Variables // -------------------------------------------------- // Material Design only Sass variables can go here - - - - // App Windows Variables // -------------------------------------------------- // Windows only Sass variables can go here - - - - // App Theme // -------------------------------------------------- // Ionic apps can have different themes applied, which can // then be future customized. This import comes last // so that the above variables are used and Ionic's // default are overridden. - -@import "ionic.theme.default"; - - -// Ionicons -// -------------------------------------------------- -// The premium icon font for Ionic. For more info, please see: -// http://ionicframework.com/docs/ionicons/ - -@import "ionic.ionicons"; - - -// Fonts -// -------------------------------------------------- - -@import "roboto"; -@import "noto-sans"; +@import "ionic.theme.default"; \ No newline at end of file From ff90976136116357ebdadbc22bb741aa3c4d7946 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:11:42 +0000 Subject: [PATCH 16/24] Remove conflicting style --- diff --git a/src/pages/calendar/calendar.scss b/src/pages/calendar/calendar.scss index fada625..1cfce0e 100644 --- a/src/pages/calendar/calendar.scss +++ b/src/pages/calendar/calendar.scss @@ -18,10 +18,6 @@ html, body margin:auto; } -ion-list { - margin-top: 40px !important; -} - .item { background-color: transparent; From e832f64a873da0b05728d66f60bdab563c6c4ac9 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:14:47 +0000 Subject: [PATCH 17/24] Remove the pages not needed in the new design --- diff --git a/src/pages/first/first.html b/src/pages/first/first.html deleted file mode 100644 index 44fd2d1..0000000 --- a/src/pages/first/first.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - - - - - - -
- -
- -
- -
- -
- -
- -
- -
- - diff --git a/src/pages/first/first.scss b/src/pages/first/first.scss deleted file mode 100644 index fb30b9e..0000000 --- a/src/pages/first/first.scss +++ /dev/null @@ -1,122 +0,0 @@ -@font-face { - font-family: native; - src: url('/assets/fonts/Comfortaa-Regular.ttf'); -} - -@font-face { - font-family: nativeBold; - src: url('/assets/fonts/Comfortaa-Bold.ttf'); -} - -.first { - background-color: transparent; - padding: 0; - margin: 0; - .first-navbar { - z-index: 1; - } -} - - -/*First page */ - -html, -body { - height: 100%; - padding: 0; - margin: 0; -} - -#div1, -#div2, -#div3, -#div4 { - width: 50%; - height: 50%; - position: absolute; - /* Chrome bug, does not honor z-index properly */ - z-index: -1; -} - -.button1 { - padding: 0; - margin: 0; - border-radius: 0; -} - -#div1 { - background: #3c6eb4; - top: 0; - left: 0; -} - -#div2 { - background: #db3279; - top: 0; - right: 0; -} - -#div3 { - background: #e59728; - bottom: 0; - left: 0; -} - -#div4 { - background: #79db32; - bottom: 0; - right: 0; -} - -#div1, -#div2, -#div3, -#div4 p { - font-family: 'opensans'; - font-size: 16px; - color: #ffffff; - position: absolute; -} - -#logo { - position: absolute; - left: 50%; - top: 50%; - margin-left: -60px; - margin-top: -60px; - z-index: 3; -} - -#mag-logo { - position: absolute; - left: 25%; - top: 25%; -} - -#social-logo { - position: absolute; - left: 25%; - top: 25%; -} - -#ask-logo { - position: absolute; - left: 25%; - top: 25%; -} - -#calender-logo { - position: absolute; - left: 25%; - top: 25%; -} - -.caption { - color: #ffffff; - text-transform: uppercase; - font-family: nativeBold !important; - letter-spacing: 1px; -} - - -/*Front page ends*/ diff --git a/src/pages/first/first.ts b/src/pages/first/first.ts deleted file mode 100644 index 6a8b464..0000000 --- a/src/pages/first/first.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { Component } from '@angular/core'; -import { NavController } from 'ionic-angular'; -import { MagazinePage } from '../magazine/magazine'; -import { AskPage } from '../ask/ask'; -import { CalendarPage } from '../calendar/calendar'; -import { SocialPage } from '../social/social'; - -/** - * Home page of the Fedora App - */ -@Component({ - templateUrl: 'first.html', -}) - -export class FirstPage { - - constructor(private nav: NavController) { - } - - /** - * Navigate to Fedora Magazine section - */ - openMag(): void { - this.nav.push(MagazinePage); - } - - /** - * Navigate to Ask Fedora section - */ - openAsk(): void { - this.nav.push(AskPage); - } - - /** - * Navigate to Fedora Social section - */ - openSocial(): void { - this.nav.push(SocialPage); - } - - /** - * Navigate to Fedora Calendar section - */ - openCal(): void { - this.nav.push(CalendarPage); - } -} diff --git a/src/pages/social/social.html b/src/pages/social/social.html deleted file mode 100644 index 736e9b3..0000000 --- a/src/pages/social/social.html +++ /dev/null @@ -1,40 +0,0 @@ - - diff --git a/src/pages/social/social.scss b/src/pages/social/social.scss deleted file mode 100644 index 11f9d8d..0000000 --- a/src/pages/social/social.scss +++ /dev/null @@ -1,29 +0,0 @@ -.social { - background : url('../../social_back.png'); - background-color: #FFFFFF; -} - -#social_logo{ - z-index: 1; - display:block; - position:absolute; - left:0; - right:0; - top:40px; - margin:auto; - padding-bottom: 30px; -} - -#social_card{ - margin-top: 80px !important; - -} - -.button{ - box-shadow: none; - float: right; -} - -.s-icon{ - float: left !important; -} diff --git a/src/pages/social/social.ts b/src/pages/social/social.ts deleted file mode 100644 index cb8e049..0000000 --- a/src/pages/social/social.ts +++ /dev/null @@ -1,81 +0,0 @@ -import { Component } from '@angular/core'; -import { SocialSharing } from '@ionic-native/social-sharing'; - -import { Browser } from '../../providers/browser/browser'; -import { FacebookProvider } from '../../providers/social/facebook'; -import { TwitterProvider } from '../../providers/social/twitter'; -import { Post } from '../../providers/social/social'; -import { combineLatest } from 'rxjs/observable/combineLatest'; - -const HANDLE = { - FB: 'fedoraqa', - TWITTER: 'fedora_qa', -}; - -const DEFAULT_POST_TITLE = 'Update from Fedora Project'; - -/** - * Shows updates from the social media channels of Fedora - */ -@Component({ - templateUrl: 'social.html', - providers: [FacebookProvider, TwitterProvider], -}) -export class SocialPage { - - /** - * List of posts from different social media channels - */ - private posts: Post[]; - - constructor(private browser: Browser, private fb: FacebookProvider, private twitter: TwitterProvider, - private socialSharing: SocialSharing) { - this.posts = []; - } - - ngOnInit() { - this.updatePosts(); - } - - /** - * Fetch posts from social media channels - * - * Currently, we fetch posts from Facebook and Twitter - */ - private updatePosts(): void { - combineLatest(this.fb.getPosts(HANDLE.FB), this.twitter.getPosts(HANDLE.TWITTER)) - .subscribe(values => { - this.posts = [...values[0], ...values[1]] as Post[]; - }); - } - - /** - * Open a post in a browser - * - * Opens the post in an in-app browser in mobile app and in a new tab on desktop. - * On some platforms, the post may directly open in the app of the social media - * service. - * - * @param post post to open - */ - openPost(post:Post): void { - this.browser.open(post.link); - } - - /** - * Share the post using a third-party app installed in the user's device - * - * Allows to share the post using apps like WhatsApp, Facebook, or any app that - * exposes a share interface to the underlying OS. - * - * @param post post to share - */ - sharePost(post:Post): void { - this.socialSharing.share( - post.content, - DEFAULT_POST_TITLE, - null, - post.link - ); - } -} From 089818b28cae93fb9ad794b891e0357da9679e23 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:14:47 +0000 Subject: [PATCH 18/24] Refactored and added comments --- diff --git a/src/pages/home/home.ts b/src/pages/home/home.ts index bbf906d..12ff834 100644 --- a/src/pages/home/home.ts +++ b/src/pages/home/home.ts @@ -21,10 +21,24 @@ const HANDLE = { }) export class HomePage { + /** + * Set the currently active segment on Home Page as Community Blog + */ latestActive: String = "blog"; + /** + * List of Facebook and Twitter Posts + */ private socialposts: SocialMediaPost[]; + + /** + * List of images fetched from FedoraMag showing top 5 latest events + */ private carousel: Image[]; + + /** + * List of posts from Fedora Community Blog + */ private blogposts: Post[]; constructor(public navCtrl: NavController, private browser: Browser, private fb: FacebookProvider, private twitter: TwitterProvider, private fedoraMag: FedoraMagazineService, private communityblog: CommunityBlogService) { @@ -33,33 +47,60 @@ export class HomePage { this.carousel = []; } - openNotificationPage() { - this.navCtrl.push(NotificationsPage, { animate: true, direction: 'forward' }); - } - - ngOnInit() { - this.updatePosts(); - } - - private updatePosts(): void { - + /** + * Fetch posts from social media channels + * + * Currently, we fetch posts from Facebook and Twitter + */ + private updateSocialMedia(): void { forkJoin(this.fb.getPosts(HANDLE.FB), this.twitter.getPosts(HANDLE.TWITTER)) .subscribe(values => { this.socialposts = [...values[0], ...values[1]] as SocialMediaPost[]; }); + } + /** + * Fetch Latest 5 Images from 'Latest from Fedora Section' of Magazine for carousel + */ + private updateImages(): void { this.fedoraMag.getImages() .subscribe(images => { this.carousel = images; }); + } + /** + * Fetch Blog Posts from the Fedora Community Blog + */ + private updateBlogPosts(): void { this.communityblog.getBlogPosts() .subscribe(blogposts => { this.blogposts = blogposts; }); } - openUpdate(event) { - this.browser.open(event.link); + ngOnInit() { + this.updateImages(); + this.updateBlogPosts(); + this.updateSocialMedia(); + } + + /** + * Opens a update in a browser + * + * Opens the update in an in-app browser in mobile app and in a new tab on desktop. + * + * @param update update to open + */ + openUpdate(update: any): void { + this.browser.open(update.link); } + + /** + * Open the notifications pane from the home page + */ + openNotificationPage() { + this.navCtrl.push(NotificationsPage, { animate: true, direction: 'forward' }); + } + } \ No newline at end of file From 54250554817ad59177f7ab80072cc2fc06ad31b1 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:14:47 +0000 Subject: [PATCH 19/24] Fix Back icon on the navbar --- diff --git a/src/theme/variables.scss b/src/theme/variables.scss index 6009a9b..95541b5 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -1,15 +1,12 @@ // Ionic Variables and Theming. For more info, please see: // http://ionicframework.com/docs/theming/ -// Font path is used to include ionicons, -// roboto, and noto sans fonts +// Font path is used to include ionicons +$font-path: "../assets/fonts"; // The app direction is used to include // rtl styles in your app. For more info, please see: // http://ionicframework.com/docs/theming/rtl-support/ $app-direction: ltr; @import "ionic.globals"; - - - // Fonts // -------------------------------------------------- @font-face { @@ -60,8 +57,6 @@ $app-direction: ltr; // to match your app's branding. Ionic uses a Sass map of // colors so you can add, rename and remove colors as needed. // The "primary" color is the only required color in the map. - - $colors: ( primary: #3C6EB4, fedorablue: #3C6EB4, fedoraltblue: #7096D0, @@ -73,8 +68,6 @@ darkgrey: #535961, grey: #79818B, ltgrey: #9A9FA6, ); - - // Typographic Styles .label { font-family: "Montserrat-Regular"; @@ -125,4 +118,9 @@ ltgrey: #9A9FA6, // then be future customized. This import comes last // so that the above variables are used and Ionic's // default are overridden. -@import "ionic.theme.default"; \ No newline at end of file +@import "ionic.theme.default"; +// Ionicons +// -------------------------------------------------- +// The premium icon font for Ionic. For more info, please see: +// http://ionicframework.com/docs/ionicons/ +@import "ionic.ionicons"; \ No newline at end of file From d7993978d94c5f052b92d06f5599e4eccb486cb6 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:14:47 +0000 Subject: [PATCH 20/24] Remove Inline SVG images --- diff --git a/src/app/app.scss b/src/app/app.scss index 268a6b5..8da86c1 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -19,120 +19,120 @@ // @import "../pages/women/women"; // App Shared Rules .iframeWrapper iframe { - width: 100%; - height: 100%; -} - -//tab icons-active -ion-icon { - &[class*="fedora-"] { - mask-size: contain; - mask-position: 50% 50%; - mask-repeat: no-repeat; - background: currentColor; - width: 1em; - height: 1em; + width: 100%; + height: 100%; } - &[class*="fedora-home"] { - mask-image: url('data:image/svg+xml;utf8,home - material '); - } - &[class*="fedora-mag"] { - mask-image: url('data:image/svg+xml;utf8,Icons/Mag/Active '); - } - &[class*="fedora-cal"] { - mask-image: url('data:image/svg+xml;utf8,Icons/Cal/Active '); - } - &[class*="fedora-ask"] { - mask-image: url('data:image/svg+xml;utf8,Icons/Ask/Active '); - } - &[class*="fedora-more"] { - mask-image: url('data:image/svg+xml;utf8,Icons/More/Active '); - } -} - -//tab icons-inactive -.tabs { - a[aria-selected=false] { - .tab-button-icon[ng-reflect-name=fedora-home] { - mask-image: url('data:image/svg+xml;utf8, '); - } - } - a[aria-selected=false] { - .tab-button-icon[ng-reflect-name=fedora-mag] { - mask-image: url('data:image/svg+xml;utf8, '); - } - } - a[aria-selected=false] { - .tab-button-icon[ng-reflect-name=fedora-cal] { - mask-image: url('data:image/svg+xml;utf8, '); - } + + //tab icons-active + ion-icon { + &[class*="fedora-"] { + mask-size: contain; + mask-position: 50% 50%; + mask-repeat: no-repeat; + background: currentColor; + width: 1em; + height: 1em; + } + &[class*="fedora-home"] { + mask-image: url(../assets/img/home-active.svg); + } + &[class*="fedora-mag"] { + mask-image: url(../assets/img/mag-active.svg); + } + &[class*="fedora-cal"] { + mask-image: url(../assets/img/cal-active.svg); + } + &[class*="fedora-ask"] { + mask-image: url(../assets/img/ask-active.svg); + } + &[class*="fedora-more"] { + mask-image: url(../assets/img/more-active.svg); + } } - a[aria-selected=false] { - .tab-button-icon[ng-reflect-name=fedora-ask] { - mask-image: url('data:image/svg+xml;utf8, '); - } + + //tab icons-inactive + .tabs { + a[aria-selected=false] { + .tab-button-icon[ng-reflect-name=fedora-home] { + mask-image: url(../assets/img/home-inactive.svg); + } + } + a[aria-selected=false] { + .tab-button-icon[ng-reflect-name=fedora-mag] { + mask-image: url(../assets/img/mag-inactive.svg); + } + } + a[aria-selected=false] { + .tab-button-icon[ng-reflect-name=fedora-cal] { + mask-image: url(../assets/img/cal-inactive.svg); + } + } + a[aria-selected=false] { + .tab-button-icon[ng-reflect-name=fedora-ask] { + mask-image: url(../assets/img/ask-inactive.svg); + } + } + a[aria-selected=false] { + .tab-button-icon[ng-reflect-name=fedora-more] { + mask-image: url(../assets/img/more-inactive.svg); + } + } } - a[aria-selected=false] { - .tab-button-icon[ng-reflect-name=fedora-more] { - mask-image: url('data:image/svg+xml;utf8, '); + + ion-buttons { + button { + background-color: transparent; } - } -} - -ion-buttons { - button { - background-color: transparent; + } + + + //tab typography + .tabs { + a[aria-selected=false] { + span { + font-family: "Montserrat-Regular"; + font-size: 12px; + color: #9A9FA6; + text-align: left; + } + } + a[aria-selected=true] { + span { + /* Home: */ + font-family: "Montserrat-SemiBold"; + font-size: 12px; + color: #3C6EB4; + text-align: left; + line-height: 12px; + } } } - -//tab typography -.tabs { - a[aria-selected=false] { - span { - font-family: "Montserrat-Regular"; - font-size: 12px; - color: #9A9FA6; - text-align: left; - } + .tabs-md[tabsLayout=icon-top] .has-icon .tab-button-text { + margin-top: 8px; } - a[aria-selected=true] { - span { - /* Home: */ - font-family: "Montserrat-SemiBold"; - font-size: 12px; - color: #3C6EB4; - text-align: left; - line-height: 12px; - } + + //styles of the tabbar + .tabbar { + padding: 12px 0; + background-color: #fff !important; + box-shadow: 0 2px 4px 0 #565656 !important; + justify-content: space-around !important; } -} - -.tabs-md[tabsLayout=icon-top] .has-icon .tab-button-text { - margin-top: 8px; -} - -//styles of the tabbar -.tabbar { - padding: 12px 0; - background-color: #fff !important; - box-shadow: 0 2px 4px 0 #565656 !important; - justify-content: space-around !important; -} - -.tab-button { - overflow: visible !important; - flex: none; -} - -//styles of the top navbar -ion-navbar { - ion-title { - text-align: center; + + .tab-button { + overflow: visible !important; + flex: none; } - background-color: #fff !important; - box-shadow: 0 2px 4px 0 rgba(86, - 86, - 86, - 0.05); -} \ No newline at end of file + + //styles of the top navbar + ion-navbar { + ion-title { + text-align: center; + } + background-color: #fff !important; + box-shadow: 0 2px 4px 0 rgba(86, + 86, + 86, + 0.05); + } \ No newline at end of file diff --git a/src/assets/img/ask-active.svg b/src/assets/img/ask-active.svg new file mode 100644 index 0000000..a4e85e3 --- /dev/null +++ b/src/assets/img/ask-active.svg @@ -0,0 +1,15 @@ + + + + Group Copy 2 + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/img/ask-inactive.svg b/src/assets/img/ask-inactive.svg new file mode 100644 index 0000000..92bd2b0 --- /dev/null +++ b/src/assets/img/ask-inactive.svg @@ -0,0 +1,12 @@ + + + + message - anticon + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/assets/img/cal-active.svg b/src/assets/img/cal-active.svg new file mode 100644 index 0000000..c192899 --- /dev/null +++ b/src/assets/img/cal-active.svg @@ -0,0 +1,15 @@ + + + + Group 2 + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/img/cal-inactive.svg b/src/assets/img/cal-inactive.svg new file mode 100644 index 0000000..ec10e80 --- /dev/null +++ b/src/assets/img/cal-inactive.svg @@ -0,0 +1,20 @@ + + + + Group 11 + Created with Sketch. + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/img/home-active.svg b/src/assets/img/home-active.svg new file mode 100644 index 0000000..71c2294 --- /dev/null +++ b/src/assets/img/home-active.svg @@ -0,0 +1,12 @@ + + + + home - material + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/assets/img/home-inactive.svg b/src/assets/img/home-inactive.svg new file mode 100644 index 0000000..03622dc --- /dev/null +++ b/src/assets/img/home-inactive.svg @@ -0,0 +1,12 @@ + + + + home - material + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/assets/img/mag-active.svg b/src/assets/img/mag-active.svg new file mode 100644 index 0000000..5537639 --- /dev/null +++ b/src/assets/img/mag-active.svg @@ -0,0 +1,15 @@ + + + + Group Copy + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/img/mag-inactive.svg b/src/assets/img/mag-inactive.svg new file mode 100644 index 0000000..0ca6e9d --- /dev/null +++ b/src/assets/img/mag-inactive.svg @@ -0,0 +1,12 @@ + + + + book-open - simple-line-icons + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/assets/img/more-active.svg b/src/assets/img/more-active.svg new file mode 100644 index 0000000..662ee17 --- /dev/null +++ b/src/assets/img/more-active.svg @@ -0,0 +1,12 @@ + + + + Combined Shape + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/assets/img/more-inactive.svg b/src/assets/img/more-inactive.svg new file mode 100644 index 0000000..5be8f25 --- /dev/null +++ b/src/assets/img/more-inactive.svg @@ -0,0 +1,12 @@ + + + + Combined Shape + Created with Sketch. + + + + + + + \ No newline at end of file From 7d62616861188c7dded50124581182678debd33d Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:14:47 +0000 Subject: [PATCH 21/24] Refactor auto generated pages --- diff --git a/src/pages/more/more.module.ts b/src/pages/more/more.module.ts deleted file mode 100644 index 7e818d1..0000000 --- a/src/pages/more/more.module.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { NgModule } from '@angular/core'; -import { IonicPageModule } from 'ionic-angular'; -import { MorePage } from './more'; - -@NgModule({ - declarations: [ - MorePage, - ], - imports: [ - IonicPageModule.forChild(MorePage), - ], -}) -export class MorePageModule {} diff --git a/src/pages/more/more.ts b/src/pages/more/more.ts index 16483d8..2a9ef14 100644 --- a/src/pages/more/more.ts +++ b/src/pages/more/more.ts @@ -1,14 +1,6 @@ import { Component } from '@angular/core'; -import { IonicPage, NavController, NavParams } from 'ionic-angular'; +import { NavController, NavParams } from 'ionic-angular'; -/** - * Generated class for the MorePage page. - * - * See https://ionicframework.com/docs/components/#navigation for more info on - * Ionic pages and navigation. - */ - -@IonicPage() @Component({ selector: 'page-more', templateUrl: 'more.html', @@ -17,9 +9,4 @@ export class MorePage { constructor(public navCtrl: NavController, public navParams: NavParams) { } - - ionViewDidLoad() { - console.log('ionViewDidLoad MorePage'); - } - } diff --git a/src/pages/notifications/notifications.module.ts b/src/pages/notifications/notifications.module.ts deleted file mode 100644 index 0862bad..0000000 --- a/src/pages/notifications/notifications.module.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { NgModule } from '@angular/core'; -import { IonicPageModule } from 'ionic-angular'; -import { NotificationsPage } from './notifications'; - -@NgModule({ - declarations: [ - NotificationsPage, - ], - imports: [ - IonicPageModule.forChild(NotificationsPage), - ], -}) -export class NotificationsPageModule {} diff --git a/src/pages/notifications/notifications.ts b/src/pages/notifications/notifications.ts index 47983e3..ff01af2 100644 --- a/src/pages/notifications/notifications.ts +++ b/src/pages/notifications/notifications.ts @@ -1,14 +1,6 @@ import { Component } from '@angular/core'; -import { IonicPage, NavController, NavParams } from 'ionic-angular'; +import { NavController, NavParams } from 'ionic-angular'; -/** - * Generated class for the NotificationsPage page. - * - * See https://ionicframework.com/docs/components/#navigation for more info on - * Ionic pages and navigation. - */ - -@IonicPage() @Component({ selector: 'page-notifications', templateUrl: 'notifications.html', @@ -17,9 +9,4 @@ export class NotificationsPage { constructor(public navCtrl: NavController, public navParams: NavParams) { } - - ionViewDidLoad() { - console.log('ionViewDidLoad NotificationsPage'); - } - } From 1fbb97be9573a9573f2c1efe021a5c434a0da52a Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:16:07 +0000 Subject: [PATCH 22/24] fix type of date --- diff --git a/src/providers/fedora-magazine/fedora-magazine.ts b/src/providers/fedora-magazine/fedora-magazine.ts index f7e0298..529421f 100644 --- a/src/providers/fedora-magazine/fedora-magazine.ts +++ b/src/providers/fedora-magazine/fedora-magazine.ts @@ -5,7 +5,7 @@ import { Observable } from 'rxjs/Observable'; import { map, tap } from 'rxjs/operators'; import { fromPromise } from 'rxjs/observable/fromPromise'; import { merge } from 'rxjs/observable/merge'; -import { chooseEndpoint, defaultValue } from '../../utils'; +import { chooseEndpoint, defaultValue, beautifyDate } from '../../utils'; /** * Endpoint for this service. @@ -57,7 +57,7 @@ export interface Post { /** * Time of publication */ - publishedAt: any + publishedAt: string } /** @@ -115,7 +115,7 @@ export class FedoraMagazineService { image: post.featured_media, excerpt: post.excerpt.rendered, content: post.content.rendered, - publishedAt: new Date(post.date_gmt + 'Z'), + publishedAt: beautifyDate(post.date_gmt,'blog'), }))) ); } From 844b713443a1e8396f79ef80b2332245b1841993 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:16:07 +0000 Subject: [PATCH 23/24] pass query parameters natively --- diff --git a/src/providers/fedora-magazine/fedora-magazine.ts b/src/providers/fedora-magazine/fedora-magazine.ts index 529421f..1cace85 100644 --- a/src/providers/fedora-magazine/fedora-magazine.ts +++ b/src/providers/fedora-magazine/fedora-magazine.ts @@ -1,6 +1,6 @@ import { Storage } from '@ionic/storage'; import { Injectable } from '@angular/core'; -import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http'; +import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs/Observable'; import { map, tap } from 'rxjs/operators'; import { fromPromise } from 'rxjs/observable/fromPromise'; @@ -140,17 +140,11 @@ export class FedoraMagazineService { * @returns Observable which emits an array of images */ getImages(): Observable { - //set request headers - let headers = new HttpHeaders(); - headers.append('Content-Type', 'application/json'); let pageResults = '5'; // get top 5 posts only let imageCategory = '609'; //get posts from New in Fedora category - - //set search parameters - let params = new HttpParams().set('per_page',pageResults).set('categories',imageCategory).set('_embed',''); - return this.http.get(`${ENDPOINT}/posts`, {headers: headers, params: params}) + return this.http.get(`${ENDPOINT}/posts`, { params: { 'per_page': pageResults, 'categories':imageCategory, '_embed': '' } }) .map((data: any[]) => data.map((image: any) => ({ id: image.id, link: image.link, From 53d96890a2e89bd539b97211b084428e515fc2dd Mon Sep 17 00:00:00 2001 From: Abhishek Sharma Date: Jun 06 2018 08:24:22 +0000 Subject: [PATCH 24/24] Fix Merge Conflicts --- diff --git a/src/utils.ts b/src/utils.ts index 9a51b77..a541bfe 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -16,14 +16,14 @@ export function chooseEndpoint(devServerEndpoint: string, appEndpoint: string) { * Substitutes a falsy value in a RxJS stream with a default value * @param value the default value */ -export function defaultValue(value:T): OperatorFunction { - return map((x:T) => x ? x : value ); +export function defaultValue(value: T): OperatorFunction { + return map((x: T) => x ? x : value); } - /* Function to beautify the post date to human readable form - * @param postDate actual time of the post - * @returns Beautified date in format MM DD at HH:MM for social media post and MM DD, YY for blog posts - */ +/* Function to beautify the post date to human readable form +* @param postDate actual time of the post +* @returns Beautified date in format MM DD at HH:MM for social media post and MM DD, YY for blog posts +*/ export function beautifyDate(postDate: any, type: string): string {