refactored to have all the things for a skill summary card in one directory, except for the install button which is shared with the skill detail component
Chris Veilleux
parent
fdd6909819
commit
31f9e04c25
|
|
@ -0,0 +1,26 @@
|
|||
<div fxLayout="row" fxLayoutAlign="space-between start" class="card-header">
|
||||
<div class="mycroft-icon">
|
||||
<img
|
||||
src="../../../../assets/mycroft-logo.svg"
|
||||
*ngIf="skill.isMycroftMade"
|
||||
matTooltip="Mycroft Made"
|
||||
>
|
||||
</div>
|
||||
<div class="skill-icon">
|
||||
<fa
|
||||
*ngIf="!skill.iconImage"
|
||||
[ngStyle]="{'color': skill.icon.color}"
|
||||
name={{skill.icon.icon}} size="2x"
|
||||
>
|
||||
</fa>
|
||||
<img *ngIf="skill.iconImage" src={{skill.iconImage}} height="30" width="30">
|
||||
</div>
|
||||
<div class="installed-icon">
|
||||
<fa-icon
|
||||
*ngIf="isInstalled"
|
||||
[icon]="installedIcon"
|
||||
matTooltip="Skill Installed"
|
||||
>
|
||||
</fa-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
@import '../../../../stylesheets/global.scss';
|
||||
|
||||
.card-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.mycroft-icon {
|
||||
width: 20px;
|
||||
img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
.installed-icon {
|
||||
width: 20px;
|
||||
fa-icon {
|
||||
color: $mycroft-tertiary-green;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -3,7 +3,8 @@
|
|||
* for the skill and a Mycroft logo if the skill is authored by Mycroft AI.
|
||||
*/
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { Skill } from "../../skills.service";
|
||||
import { AvailableSkill } from "../../skills.service";
|
||||
import { InstallService } from "../../install.service";
|
||||
import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
@Component({
|
||||
|
|
@ -12,22 +13,24 @@ import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
|
|||
styleUrls: ['./skill-card-header.component.scss']
|
||||
})
|
||||
export class SkillCardHeaderComponent implements OnInit {
|
||||
@Input() public skill: Skill;
|
||||
public isMycroftMade: boolean;
|
||||
public isInstalled: boolean;
|
||||
public installedIcon = faCheckCircle;
|
||||
@Input() public skill: AvailableSkill;
|
||||
|
||||
constructor() { }
|
||||
constructor(private installService: InstallService) { }
|
||||
|
||||
/**
|
||||
* Include the Mycroft AI logo in the card header if Mycroft authored the skill
|
||||
*/
|
||||
ngOnInit() {
|
||||
if (this.skill.credits) {
|
||||
this.isMycroftMade = this.skill.credits[0]['name'] == 'Mycroft AI';
|
||||
}
|
||||
if (this.skill.installStatus === 'installed') {
|
||||
this.isInstalled = true;
|
||||
}
|
||||
this.installService.installStatuses.subscribe(
|
||||
(installStatuses) => {
|
||||
let installStatus = this.installService.getSkillInstallStatus(
|
||||
this.skill,
|
||||
installStatuses
|
||||
);
|
||||
this.isInstalled = ['system', 'installed'].includes(installStatus);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!-- This represents a single skill on the skill summary page -->
|
||||
<mat-card>
|
||||
<!-- Make the entire card a clickable button that routes to the details -->
|
||||
<div [routerLink]="['/skill', skill.name]">
|
||||
<market-skill-card-header [skill]="skill"></market-skill-card-header>
|
||||
<mat-card-title align="center">
|
||||
{{skill.title ? skill.title : ' '}}
|
||||
</mat-card-title>
|
||||
<mat-card-subtitle fxLayoutAlign="center">
|
||||
<div class="skill-trigger">
|
||||
<fa-icon [icon]="voiceIcon"></fa-icon>
|
||||
{{skill.trigger}}
|
||||
</div>
|
||||
</mat-card-subtitle>
|
||||
<mat-card-content [innerHTML]="skill.summary ? skill.summary : ' '">
|
||||
</mat-card-content>
|
||||
</div>
|
||||
<mat-card-actions>
|
||||
<skill-install-button [skill]="skill" [component]="'skillSummary'">
|
||||
|
||||
</skill-install-button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
@import '../../../../stylesheets/global.scss';
|
||||
|
||||
@mixin card-width {
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
mat-card {
|
||||
@include card-width;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
margin: 10px;
|
||||
padding: 18px;
|
||||
mat-card-title {
|
||||
@include ellipsis-overflow;
|
||||
color: $mycroft-secondary;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-weight: bold;
|
||||
padding-bottom: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
mat-card-subtitle {
|
||||
.skill-trigger {
|
||||
@include ellipsis-overflow;
|
||||
@include skill-trigger;
|
||||
}
|
||||
}
|
||||
mat-card-content {
|
||||
color: $mycroft-secondary;
|
||||
@include ellipsis-overflow;
|
||||
text-align: center;
|
||||
}
|
||||
mat-card-actions {
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
mat-card:hover{
|
||||
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
/**
|
||||
* Format the header portion of a skill summary card. This includes the icon
|
||||
* for the skill and a Mycroft logo if the skill is authored by Mycroft AI.
|
||||
*/
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { AvailableSkill } from "../../skills.service";
|
||||
import { faComment } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
@Component({
|
||||
selector: 'market-skill-card',
|
||||
templateUrl: './skill-card.component.html',
|
||||
styleUrls: ['./skill-card.component.scss']
|
||||
})
|
||||
export class SkillCardComponent {
|
||||
@Input() public skill: AvailableSkill;
|
||||
public voiceIcon = faComment;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
Loading…
Reference in New Issue