#96 Empty States Components
Merged 9 months ago by a2batic. Opened 9 months ago by thelittlewonder.
thelittlewonder/Fedora-app emptyStates  into  master

file modified
+12 -3

@@ -16,11 +16,16 @@ 

  import { MagazinePage } from '../pages/magazine/magazine';

  import { AskPage } from '../pages/ask/ask';

  import { CalendarPage, Search, meetingDetails } from '../pages/calendar/calendar';

- import { MorePage, AboutDetailPage, AboutPage, BookmarksPage} from '../pages/more/more';

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

+ import { MorePage, AboutDetailPage, AboutPage, BookmarksPage } from '../pages/more/more';

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

  import { PackageSearchPage } from '../pages/package-search/package-search';

  import { ViewPackagePage } from '../pages/view-package/view-package';

  

+ import { NoBookmarksComponent } from '../components/no-bookmarks/no-bookmarks';

+ import { NoMeetingsComponent } from '../components/no-meetings/no-meetings';

+ import { NoResultsComponent } from '../components/no-results/no-results';

+ import { NoInternetComponent } from '../components/no-internet/no-internet';

+ 

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

  

  @NgModule({

@@ -39,7 +44,11 @@ 

      PackageSearchPage,

      ViewPackagePage,

      Search,

-     meetingDetails

+     meetingDetails,

+     NoBookmarksComponent,

+     NoMeetingsComponent,

+     NoResultsComponent,

+     NoInternetComponent

    ],

    imports: [

      BrowserModule,

empty or binary file added

@@ -0,0 +1,7 @@ 

+ <div class="emptystate">

+     <img src="./assets/img/es-bookmarks.svg">

+     <h1>We couldn't find any articles</h1>

+     <h2>Press

+       <img src="./assets/img/bookmark-inactive.svg"> to save an article for offline viewing</h2>

+     <button (click)="toMag()">Read Latest Articles</button>

+ </div>

@@ -0,0 +1,21 @@ 

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

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

+ 

+ @Component({

+   selector: 'no-bookmarks',

+   templateUrl: 'no-bookmarks.html'

+ })

+ 

+ export class NoBookmarksComponent {

+ 

+   constructor(public navCtrl: NavController) {

+   }

+ 

+   /**

+    * Switches to Mag View to read articles

+    */

+   toMag() {

+     this.navCtrl.parent.select(1);

+   }

+ 

+ }

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

+ <div class="emptystate">

+   <img src="./assets/img/es-internet.png">

+   <h1>We can't reach the internet.</h1>

+   <h2>Seems like you're offline, please check your internet connection</h2>

+   <button (click)="reload()">Try Again</button>

+ </div>

@@ -0,0 +1,17 @@ 

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

+ 

+ @Component({

+   selector: 'no-internet',

+   templateUrl: 'no-internet.html'

+ })

+ export class NoInternetComponent {

+ 

+   constructor() {

+   }

+ 

+   //reloads the page

+   reload(){

+     location.reload();

+   }

+ 

+ }

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

+ <div class="emptystate">

+   <img src="./assets/img/es-cal.svg">

+   <h1>We couldn't find any events</h1>

+   <h2>Seems like the schedule is light.

+     <br> Relax and Enjoy the moment</h2>

+ </div> 

\ No newline at end of file

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

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

+ 

+ @Component({

+   selector: 'no-meetings',

+   templateUrl: 'no-meetings.html'

+ })

+ export class NoMeetingsComponent {

+ 

+   constructor() {

+   }

+ 

+ }

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

+ <div class="emptystate">

+   <img src="./assets/img/es-search.svg">

+   <h1>We couldn’t find anything</h1>

+   <h2>Maybe a little spelling mistake?</h2>

+ </div>

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

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

+ 

+ @Component({

+   selector: 'no-results',

+   templateUrl: 'no-results.html'

+ })

+ export class NoResultsComponent {

+ 

+   constructor() {

+   }

+ 

+ }

@@ -52,10 +52,5 @@ 

        </ion-card>

      </div>

    </ion-list>

-   <div *ngIf="meetings.length === 0" class="emptystate">

-     <img src="./assets/img/es-cal.svg">

-     <h1>We couldn't find any events</h1>

-     <h2>Seems like the schedule is light.

-       <br> Relax and Enjoy the moment</h2>

-   </div>

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

  </ion-content> 

\ No newline at end of file

@@ -30,9 +30,5 @@ 

              </ion-row>

          </ion-card>

      </ion-list>

-     <div *ngIf="calendars.length===0" class="emptystate">

-         <img src="./assets/img/es-search.svg">

-         <h1>We couldn’t find anything</h1>

-         <h2>Maybe a little spelling mistake?</h2>

-     </div>

+     <no-results *ngIf="calendars.length===0"></no-results>

  </ion-content> 

\ No newline at end of file

file modified
+1 -1

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

  <ion-header>

    <ion-title>

      <img src="./assets/img/back.svg" tappable navPop>

-     <span>About Us</span>

+     <span>About Fedora</span>

    </ion-title>

  </ion-header>

  <ion-content>

@@ -9,10 +9,5 @@ 

    </ion-title>

  </ion-header>

  <ion-content>

-   <div class="emptystate">

-     <img src="./assets/img/es-bookmarks.svg">

-     <h1>We couldn't find any articles</h1>

-     <h2>Press <img src="./assets/img/bookmark-inactive.svg"> to save an article for offline viewing</h2>

-     <button (click)="toMag()">Read Latest Articles</button>

-   </div>

+   <no-bookmarks></no-bookmarks>

  </ion-content>

@@ -110,6 +110,9 @@ 

        padding: 16px 24px;

        font-size: 16px;

        line-height: 26px;

+       p {

+         margin: 0.5em 0;

+       }

      }

    }

  }

@@ -26,5 +26,6 @@ 

          </ion-row>

        </ion-card>

      </div>

+     <no-results *ngIf="showError"></no-results>

    </ion-list>

  </ion-content>

@@ -12,20 +12,26 @@ 

  })

  export class PackageSearchPage {

  

-   private searchQuery:string;

+   private searchQuery: string;

    private offset = 0;

    private matches = 0;

-   private packages:Package[] = [];

+   private packages: Package[] = [];

+   private showError: boolean;

  

-   constructor(public navCtrl: NavController, private searchProvider:PackageSearchProvider) {

+   constructor(public navCtrl: NavController, private searchProvider: PackageSearchProvider) {

+     this.showError = false;

    }

  

    search() {

      this.searchProvider.search(this.searchQuery, RESULTS_PER_PAGE, this.offset)

-       .subscribe( r => {

+       .subscribe(r => {

          this.packages = r.packages;

          this.offset = r.offset;

          this.matches = r.matches;

+         //if no matches returned show error

+         if (this.packages.length === 0) {

+           this.showError = true;

+         }

        });

    }

  

@@ -35,11 +41,11 @@ 

      this.matches = 0;

    }

  

-   showPackage(pkg:Package) {

+   showPackage(pkg: Package) {

      this.navCtrl.push(ViewPackagePage, { pkg });

    }

  

-   getPackageType(pkg:Package) {

+   getPackageType(pkg: Package) {

      return getPackageType(pkg.name);

    }

  }