#82 Magazine Tab Design Update
Merged a year ago by a2batic. Opened a year ago by thelittlewonder.
thelittlewonder/Fedora-app magazine  into  master

@@ -0,0 +1,12 @@ 

+ <?xml version="1.0" encoding="UTF-8"?>

+ <svg width="8px" height="10px" viewBox="0 0 8 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

+     <!-- Generator: Sketch 50.1 (55044) - http://www.bohemiancoding.com/sketch -->

+     <title>bookmark - FontAwesome</title>

+     <desc>Created with Sketch.</desc>

+     <defs></defs>

+     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

+         <g id="Blog-Post" transform="translate(-171.000000, -63.000000)" fill="#79818B">

+             <path d="M178.275,63 C178.36875,63 178.4625,63.0198282 178.55,63.0594845 C178.825,63.171844 179,63.4428288 179,63.7402512 L179,72.2597488 C179,72.5571712 178.825,72.828156 178.55,72.9405155 C178.4625,72.9801718 178.36875,72.9933906 178.275,72.9933906 C178.08125,72.9933906 177.9,72.9206874 177.75625,72.7818903 L175,69.9795109 L172.24375,72.7818903 C172.1,72.9206874 171.91875,73 171.725,73 C171.63125,73 171.5375,72.9801718 171.45,72.9405155 C171.175,72.828156 171,72.5571712 171,72.2597488 L171,63.7402512 C171,63.4428288 171.175,63.171844 171.45,63.0594845 C171.5375,63.0198282 171.63125,63 171.725,63 C171.91875,63 178.08125,63 178.275,63 Z" id="bookmark---FontAwesome"></path>

+         </g>

+     </g>

+ </svg> 

\ No newline at end of file

@@ -0,0 +1,18 @@ 

+ <?xml version="1.0" encoding="UTF-8"?>

+ <svg width="11px" height="12px" viewBox="0 0 11 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

+     <!-- Generator: Sketch 50.1 (55044) - http://www.bohemiancoding.com/sketch -->

+     <title>bookmark-o - FontAwesome</title>

+     <desc>Created with Sketch.</desc>

+     <defs></defs>

+     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

+         <g id="Blog-Post" transform="translate(-160.000000, -62.000000)" fill="#79818B" stroke="#FFFFFF" stroke-width="0.3">

+             <g id="Item">

+                 <g transform="translate(16.000000, 16.000000)">

+                     <g id="Info">

+                         <path d="M153.1,47.8460013 L145.9,47.8460013 L145.9,56.0548579 L148.874219,53.3714475 L149.5,52.8096497 L150.125781,53.3714475 L153.1,56.0548579 L153.1,47.8460013 Z M153.184375,47 C153.289844,47 153.395312,47.0198282 153.49375,47.0594845 C153.803125,47.171844 154,47.4428288 154,47.7402512 L154,56.2597488 C154,56.5571712 153.803125,56.828156 153.49375,56.9405155 C153.395312,56.9801718 153.289844,56.9933906 153.184375,56.9933906 C152.966406,56.9933906 152.7625,56.9206874 152.600781,56.7818903 L149.5,53.9795109 L146.399219,56.7818903 C146.2375,56.9206874 146.033594,57 145.815625,57 C145.710156,57 145.604688,56.9801718 145.50625,56.9405155 C145.196875,56.828156 145,56.5571712 145,56.2597488 L145,47.7402512 C145,47.4428288 145.196875,47.171844 145.50625,47.0594845 C145.604688,47.0198282 145.710156,47 145.815625,47 C146.033594,47 152.966406,47 153.184375,47 Z" id="bookmark-o---FontAwesome"></path>

+                     </g>

+                 </g>

+             </g>

+         </g>

+     </g>

+ </svg> 

\ No newline at end of file

@@ -0,0 +1,18 @@ 

+ <?xml version="1.0" encoding="UTF-8"?>

+ <svg width="7px" height="10px" viewBox="0 0 7 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

+     <!-- Generator: Sketch 50.1 (55044) - http://www.bohemiancoding.com/sketch -->

+     <title>ion-ios-arrow-thin-down - Ionicons</title>

+     <desc>Created with Sketch.</desc>

+     <defs></defs>

+     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

+         <g id="Magazine" transform="translate(-337.000000, -67.000000)" fill="#7096D0" stroke="#7096D0" stroke-width="0.4">

+             <g id="Dynamic-group" transform="translate(0.000000, 52.000000)">

+                 <g id="12:16" transform="translate(16.000000, 13.000000)">

+                     <g id="Group" transform="translate(275.000000, 0.500000)">

+                         <path d="M52.3440415,8.35625 C52.3813473,8.39375019 52.4,8.44999963 52.4,8.525 C52.4,8.60000037 52.3813473,8.65624981 52.3440415,8.69375 C50.7212355,10.1750074 49.9005184,10.9249999 49.8818655,10.94375 C49.8445596,10.9812502 49.7886016,11 49.7139898,11 C49.6393781,11 49.5834201,10.9812502 49.5461142,10.94375 L47.0839382,8.69375 C46.9720206,8.58124944 46.9720206,8.46875056 47.0839382,8.35625 C47.1958559,8.24374944 47.3077719,8.24374944 47.4196895,8.35625 L49.4901557,10.240625 L49.4901557,2.225 C49.4901557,2.07499925 49.5647663,2 49.7139898,2 C49.8632134,2 49.937824,2.07499925 49.937824,2.225 L49.937824,10.240625 L52.0082902,8.35625 C52.1202078,8.24374944 52.2321238,8.24374944 52.3440415,8.35625 Z" id="ion-ios-arrow-thin-down---Ionicons"></path>

+                     </g>

+                 </g>

+             </g>

+         </g>

+     </g>

+ </svg> 

\ No newline at end of file

@@ -1,36 +1,37 @@ 

- <!--

-   Generated template for the MagazinePage page.

- 

-   See http://ionicframework.com/docs/v2/components/#navigation for more info on

-   Ionic pages and navigation.

- -->

- <ion-content class="magazine">

- <ion-navbar>

-   <button ion-button menuToggle>

-     <ion-icon name="menu"></ion-icon>

-   </button>

- </ion-navbar>

- 

- <img id="maglogo" src="assets/img/mag_logo.svg">

-     <img id="mag-title" src="assets/img/mag_title.svg">

+ <ion-header no-border>

+   <ion-navbar>

+     <ion-title>

+       <img src="./assets/img/Fedora.svg" height="24px" alt="Fedora">

+     </ion-title>

+     <ion-buttons end>

+       <button tappable (click)="openNotificationPage()">

+         <img src="./assets/img/notification.svg">

+       </button>

+     </ion-buttons>

+   </ion-navbar>

+ </ion-header>

  

+ <ion-content class="mag">

+   <ion-label>Latest Articles from Magazine

+     <button (click)="presentActionSheet()">Sort

+       <img src='./assets/img/sort.svg'>

+     </button>

+   </ion-label>

    <ion-list>

-     <ion-card *ngFor="let post of posts">

-       <!--<ion-row id="featured-image">

-       <img src="https://fedoramagazine.org/wp-json/wp/v2/media/{{post.id}}" />

-     </ion-row>-->

+     <ion-card *ngFor="let post of posts let i = index">

        <ion-row>

-         <ion-col width-80 padding tappable (click)="openPost(post)">

-           <strong id="title" [innerHtml]="post.title"></strong>

+         <ion-col col-7>

+           <ion-card-header [innerHTML]="post.title" class="body-title" text-wrap tappable (click)="openPost(post)"></ion-card-header>

+           <ion-card-content>

+             <span [innerHTML]="post.publishedAt + ' — ' + post.comments + ' comments'" class="body-subtitle"></span>

+             <img [src]=bookmarkIcon[i] tappable (click)="addToBookmark(post,i)" class="bookmark">

+           </ion-card-content>

          </ion-col>

-         <ion-col width-20 center>

-           <button float-right ion-button small tappable clear color="light" (click)="sharePost(post)">

-             <ion-icon name="share"></ion-icon>

-           </button>

+         <ion-col col-5 tappable (click)="openPost(post)">

+           <img src="{{post.featuredImage}}" class="card-image">

          </ion-col>

        </ion-row>

-       <ion-card-content [innerHTML]="post.excerpt">

-       </ion-card-content>

      </ion-card>

    </ion-list>

+   <button (click)="loadMore()" class="load" ng-if="posts.length!==0">Load More Posts</button>

  </ion-content>

@@ -1,25 +1,79 @@ 

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

      }

-     #title {

-         color: #ffffff;

+     ion-card-content {

+       margin-top: 4px;

+       padding: 0 !important;

+       .bookmark {

+         height: 14px;

+         vertical-align: middle;

+         margin-left: 8px;

+         display: inline-block;

+         width: auto;

+       }

      }

-     ion-list {

-         margin-top: 50px;

+     .card-image {

+       padding-left: 8px;

      }

-     .button {

-         background-color: transparent;

-         box-shadow: none;

+     [col-5],

+     [col-7] {

+       padding: 0 !important;

      }

-     #maglogo {

-         position: absolute;

-         top: 0;

-         left: 50px;

-     }

-     #mag-title {

-         position: absolute;

-         top: 10px;

-         right: 25px;

+   }

+   .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;

+   }

+   .active {

+     font-family: "OpenSans-Semibold";

+     color: #3C6EB4;

+   }

  }

file modified
+125 -17

@@ -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,154 @@ 

     */

    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';

+ 

+   //currently Active Sort Parameter

+   sortBy: string = 'latest';

+ 

    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',

+           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);

+               return secondDate.getTime() - firstDate.getTime();

+             });

+           }

+         },

+         {

+           /**

+            * 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);

+               return firstDate.getTime() - secondDate.getTime();

+             });

+           }

+         },

+         {

+           /**

+            * 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;

+             });

+           }

+         },

+       ]

+     });

+     /**

+      * 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();

+     }

    }

  }

@@ -29,7 +29,9 @@ 

                  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:''

              })));

      }

  }

@@ -20,7 +20,6 @@ 

   */

  const CALENDAR_STORAGE_KEY = 'fedocal__calendars';

  

- 

  /**

   * Convert calendar name from API to a value suitable for display

   *

@@ -194,9 +193,12 @@ 

    }

  

    /**

-    * 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<Meeting[]> {

@@ -5,7 +5,7 @@ 

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

    /**

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

     *

     * @returns Observable which emits an array of posts

     */

-   fetchPosts(): Observable<Post[]> {

-     return this.http.get(`${ENDPOINT}/posts`)

+   fetchPosts(postCount): Observable<Post[]> {

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

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

     *

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

      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,

Blocked by #74

  • Changes the magazine view according to the new design
  • Added feature to sort the articles
  • Option to bookmark (backend functionality not there, will be worked by Amitosh)
  • Added button to load more posts

UI Prototype - https://marvelapp.com/8j6ihg7/screen/43345149

rebased onto df8f4e0bdde263edf092c52a056f286693f6233f

a year ago

1 new commit added

  • change number of post to 15
a year ago

rebased onto d884c175fa0036ce24173ff4be5aefcf40c4cb84

a year ago

2 new commits added

  • Merge branch 'calendar-ui' into magazine
  • add meeting detail page
a year ago

3 new commits added

  • Merge branch 'calendar-ui' into magazine
  • Add 'loader' into calendar-ui
  • add homepage loader
a year ago

23 new commits added

  • Merge branch 'calendar-ui' into magazine
  • Add 'loader' into calendar-ui
  • add homepage loader
  • Merge branch 'calendar-ui' into magazine
  • add meeting detail page
  • add load more button
  • add calendar
  • add meeting detail page
  • rebase and fix conflicts
  • fix merge conflict and rebase
  • Add Empty States
  • fix relative path to icon
  • add toast on calendar subscribe
  • fix search icon
  • fix font
  • add notification page
  • fix type of meeting time
  • Update styles
  • Update styles
  • update fedocal ui
  • update fedo cal to fetch posts by date
  • add search modal
  • Add icons for the calendar page
a year ago

1 new commit added

  • reset loader
a year ago

24 new commits added

  • reset loader
  • Merge branch 'calendar-ui' into magazine
  • Add 'loader' into calendar-ui
  • add homepage loader
  • Merge branch 'calendar-ui' into magazine
  • add meeting detail page
  • add load more button
  • add calendar
  • add meeting detail page
  • rebase and fix conflicts
  • fix merge conflict and rebase
  • Add Empty States
  • fix relative path to icon
  • add toast on calendar subscribe
  • fix search icon
  • fix font
  • add notification page
  • fix type of meeting time
  • Update styles
  • Update styles
  • update fedocal ui
  • update fedo cal to fetch posts by date
  • add search modal
  • Add icons for the calendar page
a year ago

rebased onto 2c8d4689408cb3ef040fbd6c4be7010ec0d0cb9f

a year ago

rebased onto 0d540f8f9879b25a95b190826bd9944fe67af12e

a year ago

rebased onto 27a89944cc7e7dae27ae7d3da0a08d568b741f6e

a year ago

rebased onto 8d42dffe401c53a7dbb937b6ea65e1ecef7dba0d

a year ago

rebased onto f514e8d0cb6c39107ed0814e0aa5c62d01d0213c

a year ago

rebased onto db719b521875b4c77c8d05dbab7ca438e66b397c

a year ago

rebased onto 50aaa9c

a year ago

1 new commit added

  • set active status of sorting preference
a year ago

Pull-Request has been merged by a2batic

a year ago