From 50aaa9c15585cddae3db568fdf34f72cb05e8a61 Mon Sep 17 00:00:00 2001 From: Abhishek Date: Jul 10 2018 08:15:30 +0000 Subject: [PATCH 1/6] add mag icons --- diff --git a/src/assets/img/bookmark-active.svg b/src/assets/img/bookmark-active.svg new file mode 100644 index 0000000..fde7db6 --- /dev/null +++ b/src/assets/img/bookmark-active.svg @@ -0,0 +1,12 @@ + + + + bookmark - FontAwesome + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/assets/img/bookmark-inactive.svg b/src/assets/img/bookmark-inactive.svg new file mode 100644 index 0000000..6309263 --- /dev/null +++ b/src/assets/img/bookmark-inactive.svg @@ -0,0 +1,18 @@ + + + + bookmark-o - FontAwesome + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/img/sort.svg b/src/assets/img/sort.svg new file mode 100644 index 0000000..2c39aa2 --- /dev/null +++ b/src/assets/img/sort.svg @@ -0,0 +1,18 @@ + + + + ion-ios-arrow-thin-down - Ionicons + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file From 4f40d287e5040778ad35a70d24ffc8d8ce4090b4 Mon Sep 17 00:00:00 2001 From: Abhishek Date: Jul 10 2018 08:15:47 +0000 Subject: [PATCH 2/6] add magazine template --- diff --git a/src/pages/magazine/magazine.html b/src/pages/magazine/magazine.html index 63c4d3f..7dc15ab 100644 --- a/src/pages/magazine/magazine.html +++ b/src/pages/magazine/magazine.html @@ -1,36 +1,37 @@ - - - - - - - - + + + + Fedora + + + + + + + + From the Fedora Magazine + + - - + - - + + + + + + - - + + - - + From 168a9dc7b541862e7bc33372467ca2354721679d Mon Sep 17 00:00:00 2001 From: Abhishek Date: Jul 10 2018 08:16:04 +0000 Subject: [PATCH 3/6] change magazine style --- diff --git a/src/pages/magazine/magazine.scss b/src/pages/magazine/magazine.scss index 7de1411..f96da32 100644 --- a/src/pages/magazine/magazine.scss +++ b/src/pages/magazine/magazine.scss @@ -1,25 +1,75 @@ -.magazine { - ion-row { - background-color: #294172; +.mag { + background-color: #EFF0F1 !important; + ion-card { + padding: 16px; + background-color: #FFFFFF !important; + box-shadow: none; + margin: 4px 0 !important; + width: 100%; + ion-card-header { + padding: 0 !important; + } + ion-card-content { + margin-top: 4px; + padding: 0 !important; + .bookmark { + height: 14px; + vertical-align: middle; + margin-left: 8px; + display: inline-block; + width: auto; + } + } + .card-image { + padding-left: 8px; + } + [col-5], + [col-7] { + padding: 0 !important; + } } - #title { - color: #ffffff; + .list-md{ + margin: 0!important; } - ion-list { - margin-top: 50px; + .label { + background-color: #fff; + padding: 13px 16px; + margin: 4px 0 0 0; + button { + background: transparent; + font-family: "Montserrat-Regular"; + font-size: 12px; + color: #7096D0; + letter-spacing: 0.37px; + text-transform: uppercase; + float: right; + } } - .button { - background-color: transparent; - box-shadow: none; + .load { + text-align: center; + font-family: "OpenSans-Semibold"; + padding: 14px; + font-size: 14px; + color: #FFFFFF; + background-color: #3C6EB4; + width: 100%; + margin: 4px 0 0px 0; } - #maglogo { - position: absolute; - top: 0; - left: 50px; +} + +.action-sheet-group { + .action-sheet-title { + font-family: "Montserrat-Regular"; + font-size: 12px; + color: #9A9FA6; + letter-spacing: 0.43px; + border-bottom: 1px solid #EFF0F1; } - #mag-title { - position: absolute; - top: 10px; - right: 25px; + button { + font-family: "OpenSans-Regular"; + font-size: 14px; + color: #000000; + text-align: left; + line-height: 20px; } -} +} \ No newline at end of file From 688dce5813be25c24a09162a72d47a1eadcbf22d Mon Sep 17 00:00:00 2001 From: Abhishek Date: Jul 10 2018 08:16:25 +0000 Subject: [PATCH 4/6] add actionsheet logic --- diff --git a/src/pages/magazine/magazine.ts b/src/pages/magazine/magazine.ts index cce42c8..f73f9cf 100644 --- a/src/pages/magazine/magazine.ts +++ b/src/pages/magazine/magazine.ts @@ -1,8 +1,9 @@ import { Component } from '@angular/core'; -import { SocialSharing } from '@ionic-native/social-sharing'; import { Browser } from '../../providers/browser/browser'; import { FedoraMagazineService, Post } from '../../providers/fedora-magazine/fedora-magazine'; +import { NotificationsPage } from '../../pages/notifications/notifications'; +import { NavController, ActionSheetController, ToastController } from 'ionic-angular'; /** * Shows latest posts from Fedora Magazine @@ -18,47 +19,145 @@ export class MagazinePage { */ private posts: Post[]; + /** + * Number of posts + */ + + postCount = 15; + + //Initialize array for showing calendar icon + bookmarkIcon: string[] = []; + //set icon values + activeIcon: string = './assets/img/bookmark-active.svg'; + inactiveIcon: string = './assets/img/bookmark-inactive.svg'; + constructor(private browser: Browser, - private fedoraMag: FedoraMagazineService, private socialSharing: SocialSharing) { + private fedoraMag: FedoraMagazineService, public navCtrl: NavController, public actionSheetCtrl: ActionSheetController, public toastCtrl: ToastController) { + for (let i = 0; i < 50; i++) { + //update src of icon + this.bookmarkIcon[i] = this.inactiveIcon; + } } ngOnInit() { - this.updatePosts(); + this.updatePosts(this.postCount); } /** * Fetch latest posts from Fedor Magazine API */ - updatePosts(): void { - this.fedoraMag.getPosts() + updatePosts(postCount): void { + this.fedoraMag.getPosts(postCount) .subscribe(posts => { this.posts = posts; }); } /** + * load more posts + */ + loadMore(postCount):void{ + this.postCount += 5; + this.updatePosts(this.postCount); + } + + /** * Open a post in a browser * * Opens the post in an in-app browser in mobile app and in a new tab on desktop. * * @param post post to open */ - openPost(post:Post): void { + 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 + * Create an action sheet to sort the articles + */ + + presentActionSheet() { + let actionSheet = this.actionSheetCtrl.create({ + title: 'SORT ARTICLES BY', + buttons: [ + { + /** + * Sort the articles by date in descending order + */ + text: 'Latest First', + handler: () => { + this.posts.sort(function (a: any, b: any): number { + let firstDate = new Date(a.publishedAt); + let secondDate = new Date(b.publishedAt); + return secondDate.getTime() - firstDate.getTime(); + }); + } + }, + { + /** + * Sort the articles by date in ascending order + */ + text: 'Oldest First', + handler: () => { + this.posts.sort(function (a: any, b: any): number { + let firstDate = new Date(a.publishedAt); + let secondDate = new Date(b.publishedAt); + return firstDate.getTime() - secondDate.getTime(); + }); + } + }, + { + /** + * Sort the articles by number of comments in descending order + */ + text: 'Comments', + handler: () => { + this.posts.sort(function (a: any, b: any): number { + return b.comments - a.comments; + }); + } + }, + ] + }); + /** + * Load the action sheet + */ + actionSheet.present(); + } + + + /** + * Open the notifications pane from the home page */ - sharePost(post:Post): void { - this.socialSharing.share( - post.excerpt, post.title, - null, post.permalink - ); + openNotificationPage() { + this.navCtrl.push(NotificationsPage, { animate: true, direction: 'forward' }); + } + + /** + * Function called when someone taps the star to subscribe to the calendar + */ + addToBookmark(post: Post, i: number): void { + /** + * Declare toasts for showing events + */ + const subscribedToast = this.toastCtrl.create({ + message: 'Saved the article for offline reading', + duration: 2000 + }); + const unsubscribedToast = this.toastCtrl.create({ + message: 'Removed the article from bookmarks', + duration: 2000 + }); + + /** + * Fire event on the basis of selected icon + */ + if (this.bookmarkIcon[i] === this.inactiveIcon) { + this.bookmarkIcon[i] = this.activeIcon; + subscribedToast.present(); + } else { + this.bookmarkIcon[i] = this.inactiveIcon; + unsubscribedToast.present(); + } } } From fdf872a05f9b5d93a3ec19a97ec3f5e25701528b Mon Sep 17 00:00:00 2001 From: Abhishek Date: Jul 10 2018 08:16:43 +0000 Subject: [PATCH 5/6] fix providers to fetch images --- diff --git a/src/providers/community-blog/community-blog.ts b/src/providers/community-blog/community-blog.ts index 08f20a9..4108cd5 100644 --- a/src/providers/community-blog/community-blog.ts +++ b/src/providers/community-blog/community-blog.ts @@ -29,7 +29,9 @@ export class CommunityBlogService { title: blogpost.title.rendered, excerpt: blogpost.excerpt.rendered, content: blogpost.content.rendered, - publishedAt: beautifyDate(blogpost.date_gmt, 'blog') + publishedAt: beautifyDate(blogpost.date_gmt, 'blog'), + comments: null, + featuredImage:'' }))); } } diff --git a/src/providers/fedo-cal/fedo-cal.ts b/src/providers/fedo-cal/fedo-cal.ts index e724f19..f07fa55 100644 --- a/src/providers/fedo-cal/fedo-cal.ts +++ b/src/providers/fedo-cal/fedo-cal.ts @@ -20,7 +20,6 @@ const ENDPOINT = chooseEndpoint('/fedocal', 'https://apps.fedoraproject.org/cale */ const CALENDAR_STORAGE_KEY = 'fedocal__calendars'; - /** * Convert calendar name from API to a value suitable for display * @@ -194,9 +193,12 @@ export class FedoCalService { } /** - * Fetch the list of meetings for a given FedoCal calendar name from FedoCal API + * Fetch the list of meetings for a given FedoCal calendar name * * @param calendar FedoCal calendar name + * @param type Type of Meetings to fetch: + * - start(starting after today i.e upcoming meetings) + * - end(ended today i.e past meetings) * @returns Observable which emits an array of meetings */ fetchMeetings(calendar: Calendar, type: string): Observable { diff --git a/src/providers/fedora-magazine/fedora-magazine.ts b/src/providers/fedora-magazine/fedora-magazine.ts index 1cace85..3ee6c58 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, beautifyDate } from '../../utils'; +import { chooseEndpoint, defaultValue, beautifyDate} from '../../utils'; /** * Endpoint for this service. @@ -57,16 +57,28 @@ export interface Post { /** * Time of publication */ - publishedAt: string + publishedAt: string, + + /** + * Number of comments on the article + */ + + comments: number, + + /** + * Featured Image of article + */ + + featuredImage: string } /** * Represents a image on App Carousel fetched from fedora magazine */ export interface Image { - /** - * Unique ID of the post, supplied by the CMS - */ + /** + * Unique ID of the post, supplied by the CMS + */ id: number, /** @@ -104,8 +116,8 @@ export class FedoraMagazineService { * * @returns Observable which emits an array of posts */ - fetchPosts(): Observable { - return this.http.get(`${ENDPOINT}/posts`) + fetchPosts(postCount): Observable { + return this.http.get(`${ENDPOINT}/posts`, { params: { '_embed': '', 'per_page': postCount } }) .pipe( map((data: any[]) => data.map((post: any) => ({ id: post.id, @@ -115,7 +127,9 @@ export class FedoraMagazineService { image: post.featured_media, excerpt: post.excerpt.rendered, content: post.content.rendered, - publishedAt: beautifyDate(post.date_gmt,'blog'), + publishedAt: beautifyDate(post.date_gmt, 'blog'), + featuredImage: post._embedded['wp:featuredmedia']['0'].media_details.sizes.medium.source_url, + comments: post._embedded['replies'] !== undefined ? post._embedded['replies']['0'].length : 0, }))) ); } @@ -128,8 +142,8 @@ export class FedoraMagazineService { * * @returns Observable which emits an array of posts */ - getPosts() { - return merge(this.loadCachedPosts(), this.fetchPosts().pipe( + getPosts(postCount) { + return merge(this.loadCachedPosts(), this.fetchPosts(postCount).pipe( tap(x => this.storage.set(STORAGE_KEY, x))) ); } @@ -144,7 +158,7 @@ export class FedoraMagazineService { let pageResults = '5'; // get top 5 posts only let imageCategory = '609'; //get posts from New in Fedora category - return this.http.get(`${ENDPOINT}/posts`, { params: { 'per_page': pageResults, 'categories':imageCategory, '_embed': '' } }) + 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 2d0c3ead2339409a81ecfeaab00e058c0d1f08bf Mon Sep 17 00:00:00 2001 From: Abhishek Date: Jul 10 2018 11:27:23 +0000 Subject: [PATCH 6/6] set active status of sorting preference --- diff --git a/src/pages/magazine/magazine.html b/src/pages/magazine/magazine.html index 7dc15ab..e384403 100644 --- a/src/pages/magazine/magazine.html +++ b/src/pages/magazine/magazine.html @@ -12,7 +12,7 @@ - From the Fedora Magazine + Latest Articles from Magazine diff --git a/src/pages/magazine/magazine.scss b/src/pages/magazine/magazine.scss index f96da32..c7f9616 100644 --- a/src/pages/magazine/magazine.scss +++ b/src/pages/magazine/magazine.scss @@ -1,75 +1,79 @@ .mag { - background-color: #EFF0F1 !important; - ion-card { - padding: 16px; - background-color: #FFFFFF !important; - box-shadow: none; - margin: 4px 0 !important; - width: 100%; - ion-card-header { - padding: 0 !important; - } - ion-card-content { - margin-top: 4px; - padding: 0 !important; - .bookmark { - height: 14px; - vertical-align: middle; - margin-left: 8px; - display: inline-block; - width: auto; - } - } - .card-image { - padding-left: 8px; - } - [col-5], - [col-7] { - padding: 0 !important; - } + background-color: #EFF0F1 !important; + ion-card { + padding: 16px; + background-color: #FFFFFF !important; + box-shadow: none; + margin: 4px 0 !important; + width: 100%; + ion-card-header { + padding: 0 !important; } - .list-md{ - margin: 0!important; + ion-card-content { + margin-top: 4px; + padding: 0 !important; + .bookmark { + height: 14px; + vertical-align: middle; + margin-left: 8px; + display: inline-block; + width: auto; + } } - .label { - background-color: #fff; - padding: 13px 16px; - margin: 4px 0 0 0; - button { - background: transparent; - font-family: "Montserrat-Regular"; - font-size: 12px; - color: #7096D0; - letter-spacing: 0.37px; - text-transform: uppercase; - float: right; - } + .card-image { + padding-left: 8px; } - .load { - text-align: center; - font-family: "OpenSans-Semibold"; - padding: 14px; - font-size: 14px; - color: #FFFFFF; - background-color: #3C6EB4; - width: 100%; - margin: 4px 0 0px 0; + [col-5], + [col-7] { + padding: 0 !important; } + } + .list-md { + margin: 0 !important; + } + .label { + background-color: #fff; + padding: 13px 16px; + margin: 4px 0 0 0; + button { + background: transparent; + font-family: "Montserrat-Regular"; + font-size: 12px; + color: #7096D0; + letter-spacing: 0.37px; + text-transform: uppercase; + float: right; + } + } + .load { + text-align: center; + font-family: "OpenSans-Semibold"; + padding: 14px; + font-size: 14px; + color: #FFFFFF; + background-color: #3C6EB4; + width: 100%; + margin: 4px 0 0px 0; + } } .action-sheet-group { - .action-sheet-title { - font-family: "Montserrat-Regular"; - font-size: 12px; - color: #9A9FA6; - letter-spacing: 0.43px; - border-bottom: 1px solid #EFF0F1; - } - button { - font-family: "OpenSans-Regular"; - font-size: 14px; - color: #000000; - text-align: left; - line-height: 20px; - } -} \ No newline at end of file + .action-sheet-title { + font-family: "Montserrat-Regular"; + font-size: 12px; + color: #9A9FA6; + letter-spacing: 0.43px; + border-bottom: 1px solid #EFF0F1; + } + button { + font-family: "OpenSans-Regular"; + font-size: 14px; + color: #000000; + text-align: left; + line-height: 20px; + } + .active { + font-family: "OpenSans-Semibold"; + color: #3C6EB4; + } +} diff --git a/src/pages/magazine/magazine.ts b/src/pages/magazine/magazine.ts index f73f9cf..2023c32 100644 --- a/src/pages/magazine/magazine.ts +++ b/src/pages/magazine/magazine.ts @@ -22,15 +22,18 @@ export class MagazinePage { /** * Number of posts */ - postCount = 15; - + //Initialize array for showing calendar icon bookmarkIcon: string[] = []; + //set icon values activeIcon: string = './assets/img/bookmark-active.svg'; inactiveIcon: string = './assets/img/bookmark-inactive.svg'; + //currently Active Sort Parameter + sortBy: string = 'latest'; + constructor(private browser: Browser, private fedoraMag: FedoraMagazineService, public navCtrl: NavController, public actionSheetCtrl: ActionSheetController, public toastCtrl: ToastController) { for (let i = 0; i < 50; i++) { @@ -56,8 +59,8 @@ export class MagazinePage { /** * load more posts */ - loadMore(postCount):void{ - this.postCount += 5; + loadMore(postCount): void { + this.postCount += 5; this.updatePosts(this.postCount); } @@ -85,7 +88,9 @@ export class MagazinePage { * Sort the articles by date in descending order */ text: 'Latest First', + cssClass: this.sortBy === 'latest' ? 'active' : '', handler: () => { + this.sortBy = 'latest'; this.posts.sort(function (a: any, b: any): number { let firstDate = new Date(a.publishedAt); let secondDate = new Date(b.publishedAt); @@ -98,7 +103,9 @@ export class MagazinePage { * Sort the articles by date in ascending order */ text: 'Oldest First', + cssClass: this.sortBy === 'oldest' ? 'active' : '', handler: () => { + this.sortBy = 'oldest'; this.posts.sort(function (a: any, b: any): number { let firstDate = new Date(a.publishedAt); let secondDate = new Date(b.publishedAt); @@ -111,7 +118,9 @@ export class MagazinePage { * Sort the articles by number of comments in descending order */ text: 'Comments', + cssClass: this.sortBy === 'comments' ? 'active' : '', handler: () => { + this.sortBy = 'comments'; this.posts.sort(function (a: any, b: any): number { return b.comments - a.comments; });