From 8c77155cd46a0ba98ff5e72b4a250d742c245e01 Mon Sep 17 00:00:00 2001
From: Chris Veilleux <veilleux.chris@gmail.com>
Date: Mon, 15 Oct 2018 23:06:09 -0500
Subject: [PATCH] refactored to use updated skill class variable names. added a
 "installed" icon for installed skills

---
 .../skill-card-header.component.html                  |  9 +++++----
 .../skill-card-header.component.scss                  | 11 +++--------
 .../skill-card-header/skill-card-header.component.ts  |  7 ++++++-
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card-header/skill-card-header.component.html b/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card-header/skill-card-header.component.html
index bc340cc3..5a485646 100644
--- a/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card-header/skill-card-header.component.html
+++ b/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card-header/skill-card-header.component.html
@@ -1,14 +1,15 @@
-<mat-card-header>
+<div fxLayout="row" fxLayoutAlign="space-between center">
     <div class="mycroft-icon">
         <img src="../../../../assets/mycroft-logo.svg"  *ngIf="isMycroftMade"  matTooltip="Mycroft Made">
     </div>
     <div class="skill-icon">
         <fa
-            *ngIf="!skill.icon_image"
+            *ngIf="!skill.iconImage"
             [ngStyle]="{'color': skill.icon.color}"
             name={{skill.icon.icon}} size="2x"
         >
         </fa>
-        <img *ngIf="skill.icon_image" src={{skill.icon_image}} height="30" width="30">
+        <img *ngIf="skill.iconImage" src={{skill.iconImage}} height="30" width="30">
     </div>
-</mat-card-header>
+    <fa-icon *ngIf="isInstalled" class="installed-icon" [icon]="installedIcon"></fa-icon>
+</div>
diff --git a/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card-header/skill-card-header.component.scss b/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card-header/skill-card-header.component.scss
index e9d05c47..441ec201 100644
--- a/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card-header/skill-card-header.component.scss
+++ b/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card-header/skill-card-header.component.scss
@@ -5,19 +5,14 @@ mat-card-header {
     margin-bottom: 15px;
     .mycroft-icon {
         left: 18px;
-        position: absolute;
         top: 18px;
         img {
             height: 20px;
             width: 20px;
         }
     }
-    .skill-icon {
-        //offset the skill icon by the width of the
-        // mycroft icon to center it on card
-        margin-left: -15px;
-        fa-icon {
-            font-size: 28px;
-        }
+    fa-icon {
+        color: $mycroft-tertiary-green;
+        font-size: 20px;
     }
 }
diff --git a/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card-header/skill-card-header.component.ts b/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card-header/skill-card-header.component.ts
index 33a07972..c6aded72 100644
--- a/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card-header/skill-card-header.component.ts
+++ b/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card-header/skill-card-header.component.ts
@@ -4,7 +4,7 @@
  */
 import { Component, Input, OnInit } from '@angular/core';
 import { Skill } from "../../skills.service";
-import { faMicrophoneAlt } from "@fortawesome/free-solid-svg-icons";
+import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
 
 @Component({
     selector: 'market-skill-card-header',
@@ -14,6 +14,8 @@ import { faMicrophoneAlt } from "@fortawesome/free-solid-svg-icons";
 export class SkillCardHeaderComponent implements OnInit {
     @Input() public skill: Skill;
     public isMycroftMade: boolean;
+    public isInstalled: boolean;
+    public installedIcon = faCheckCircle;
 
     constructor() { }
 
@@ -24,5 +26,8 @@ export class SkillCardHeaderComponent implements OnInit {
         if (this.skill.credits) {
             this.isMycroftMade = this.skill.credits[0]['name'] == 'Mycroft AI';
         }
+        if (this.skill.installStatus === 'installed') {
+            this.isInstalled = true;
+        }
     }
 }