From 5d9ca1b8f935456909ff7d1bedf1ca3e3e92e058 Mon Sep 17 00:00:00 2001
From: Amitosh Swain Mahapatra <amitosh.swain@gmail.com>
Date: Aug 03 2018 14:36:55 +0000
Subject: Show icons in package search


---

diff --git a/src/pages/package-search/package-search.html b/src/pages/package-search/package-search.html
index e00e14f..777e8d1 100755
--- a/src/pages/package-search/package-search.html
+++ b/src/pages/package-search/package-search.html
@@ -12,19 +12,27 @@
   <ion-list>
     <div *ngIf="packages.length > 0">
       <ion-label>Showing {{ matches }} results</ion-label>
-      <ion-card (click)="showPackage(pkg)" tappable *ngFor="let pkg of packages">
-        <ion-row style="margin-bottom: 4px">
-          <ion-col>
-            <ion-card-header>
-              <ion-icon [ngClass]="getPackageType(pkg)" name="cube" item-start></ion-icon> {{ pkg.name }}</ion-card-header>
-          </ion-col>
-        </ion-row>
-        <ion-row>
-          <ion-col>
-            <ion-card-content>{{ pkg.summary }}</ion-card-content>
-          </ion-col>
-        </ion-row>
-      </ion-card>
+      <ion-item (click)="showPackage(pkg)" tappable *ngFor="let pkg of packages">
+        <ion-avatar item-start>
+          <img width="32" height="32" src="https://apps.fedoraproject.org/packages/images/icons/{{ pkg.name }}.png" />
+        </ion-avatar>
+        <ion-col>
+          <ion-row style="margin-bottom: 4px">
+            <ion-col>
+              <ion-card-header>
+                <span>
+                  {{ pkg.name }}
+                </span>
+              </ion-card-header>
+            </ion-col>
+          </ion-row>
+          <ion-row>
+            <ion-col>
+              <ion-card-content>{{ pkg.summary }}</ion-card-content>
+            </ion-col>
+          </ion-row>
+        </ion-col>
+      </ion-item>
     </div>
     <no-results *ngIf="showError"></no-results>
   </ion-list>
diff --git a/src/pages/package-search/package-search.ts b/src/pages/package-search/package-search.ts
index fd9662a..c53c781 100755
--- a/src/pages/package-search/package-search.ts
+++ b/src/pages/package-search/package-search.ts
@@ -12,11 +12,11 @@ const RESULTS_PER_PAGE = 10;
 })
 export class PackageSearchPage {
 
-  private searchQuery: string;
-  private offset = 0;
-  private matches = 0;
-  private packages: Package[] = [];
-  private showError: boolean;
+  searchQuery: string;
+  offset = 0;
+  matches = 0;
+  packages: Package[] = [];
+  showError: boolean;
 
   constructor(public navCtrl: NavController, private searchProvider: PackageSearchProvider) {
     this.showError = false;
diff --git a/src/pages/view-package/view-package.html b/src/pages/view-package/view-package.html
index 19153be..264d928 100755
--- a/src/pages/view-package/view-package.html
+++ b/src/pages/view-package/view-package.html
@@ -13,12 +13,21 @@
 
 
 <ion-content>
-  <h1>{{ pkg.name }}</h1>
-  <hr>
-  <p>{{ pkg.summary }}</p>
-  <p *ngIf="pkg.upstreamUrl">
-    <a href="{{ pkg.upstreamUrl }}">{{ pkg.upstreamUrl }}</a>
-  </p>
+  <div class="package-header">
+    <img width="128" height="128" src="https://apps.fedoraproject.org/packages/images/icons/{{ pkg.name }}.png" class="package-icon"
+    />
+    <div class="package-header-text">
+      <h1>{{ pkg.name }}</h1>
+      <p>{{ pkg.summary }}</p>
+      <p *ngIf="pkg.upstreamUrl">
+        <a href="{{ pkg.upstreamUrl }}">{{ pkg.upstreamUrl }}</a>
+      </p>
+      <div class="package-badges">
+        <ion-badge color="positive">{{ getPackageType(pkg) }}</ion-badge>
+      </div>
+    </div>
+  </div>
+
   <ion-row>
     <div class="info">
       <ion-label>Description</ion-label>
@@ -40,6 +49,10 @@
       <ion-label *ngIf="pkg.subPackages.length > 0">Sub Packages</ion-label>
       <ion-list *ngIf="pkg.subPackages.length > 0" no-lines>
         <ion-item (click)="showPackage(pkg)" *ngFor="let pkg of pkg.subPackages">
+          <ion-avatar item-start>
+            <img width="48" height="48" src="https://apps.fedoraproject.org/packages/images/icons/{{ pkg.name }}.png" class="package-icon"
+            />
+          </ion-avatar>
           <h2>{{ pkg.name }}</h2>
           <h3>{{ pkg.summary }}</h3>
         </ion-item>
diff --git a/src/pages/view-package/view-package.scss b/src/pages/view-package/view-package.scss
index fd54572..669091f 100755
--- a/src/pages/view-package/view-package.scss
+++ b/src/pages/view-package/view-package.scss
@@ -1,80 +1,89 @@
 page-view-package {
-  ion-header {
-    padding: 16px 24px;
-    background-color: #fff;
-    span {
-      font-family: "Montserrat-Regular";
-      font-size: 16px;
-      color: #9A9FA6;
-      letter-spacing: 0.57px;
-      margin: 0 0 16px 16px;
-      text-transform: uppercase;
-    }
-    .toolbar-title {
-      padding: 0 !important;
-    }
-  }
-  .header-md::after {
-    background-color: #ECEDEE;
-    background-image: none;
-  }
-  .scroll-content {
-    padding: 24px !important;
-    h1 {
-      margin: 0 0 12px 0;
-      font-family: "OpenSans-Semibold";
-      font-size: 16px;
-      color: #3C6EB4;
-      line-height: 20px;
-    }
-    p {
-      margin: 16px 0 8px 0;
+    ion-header {
+        padding: 16px 24px;
+        background-color: #fff;
+        span {
+            font-family: "Montserrat-Regular";
+            font-size: 16px;
+            color: #9A9FA6;
+            letter-spacing: 0.57px;
+            margin: 0 0 16px 16px;
+            text-transform: uppercase;
+        }
+        .toolbar-title {
+            padding: 0 !important;
+        }
     }
-    hr {
-      height: 0;
-      background-color: none;
-      border: 1px solid #EFF0F1;
-      margin: 0;
+    .header-md::after {
+        background-color: #ECEDEE;
+        background-image: none;
     }
-    .info {
-      margin: 12px 0;
-      max-width: 100%;
-      ion-label {
-        margin: 0 0 6px 0;
-        font-size: 11px;
-      }
-      p {
-        margin: 0;
-      }
-      .code {
-        margin-top: 4px;
-        code {
-          background: #f0f0f0;
-          border-radius: 3px;
-          padding: 4px;
+    .scroll-content {
+        padding: 24px !important;
+        h1 {
+            margin: 0 0 12px 0;
+            font-family: "OpenSans-Semibold";
+            font-size: 16px;
+            color: #3C6EB4;
+            line-height: 20px;
+        }
+        p {
+            margin: 16px 0 8px 0;
         }
-      }
-      ion-item {
-        margin-top: 4px;
-        padding: 0;
-        h2 {
-          font-family: "OpenSans-Semibold";
-          font-size: 14px;
-          color: #3B6FBB;
-          padding: 0;
-          text-transform: none;
-          letter-spacing: 0;
+        hr {
+            height: 0;
+            background-color: none;
+            border: 1px solid #EFF0F1;
+            margin: 0;
         }
-        h3 {
-          font-family: "OpenSans-Regular";
-          font-size: 12px;
-          color: #535961;
-          line-height: 20px;
-          padding: 0;
-          text-transform: none;
-          letter-spacing: 0;
+        .info {
+            margin: 12px 0;
+            max-width: 100%;
+            ion-label {
+                margin: 0 0 6px 0;
+                font-size: 11px;
+            }
+            p {
+                margin: 0;
+            }
+            .code {
+                margin-top: 4px;
+                code {
+                    background: #f0f0f0;
+                    border-radius: 3px;
+                    padding: 4px;
+                }
+            }
+            ion-item {
+                margin-top: 4px;
+                padding: 0;
+                h2 {
+                    font-family: "OpenSans-Semibold";
+                    font-size: 14px;
+                    color: #3B6FBB;
+                    padding: 0;
+                    text-transform: none;
+                    letter-spacing: 0;
+                }
+                h3 {
+                    font-family: "OpenSans-Regular";
+                    font-size: 12px;
+                    color: #535961;
+                    line-height: 20px;
+                    padding: 0;
+                    text-transform: none;
+                    letter-spacing: 0;
+                }
+            }
+        }
+    }
+    .package-header {
+        .package-icon {
+            width: 128px;
+            height: 128px;
+            margin-right: 1em;
         }
-      }
+        display: flex;
+        align-items: center;
     }
-  }
 }
diff --git a/src/pages/view-package/view-package.ts b/src/pages/view-package/view-package.ts
index 2d27ad9..845793c 100755
--- a/src/pages/view-package/view-package.ts
+++ b/src/pages/view-package/view-package.ts
@@ -16,7 +16,7 @@ import { getPackageType } from '../../utils';
 })
 export class ViewPackagePage {
 
-  private pkg: Package;
+  pkg: Package;
 
   constructor(public navCtrl: NavController, public navParams: NavParams) {
     this.pkg = this.navParams.get('pkg') || {};