split the skill detail component into a header and footer component due to its complexity
Chris Veilleux
parent
a6bda77f76
commit
859894ec0a
|
|
@ -0,0 +1,57 @@
|
|||
<div class="skill-detail-body" fxLayout="row wrap">
|
||||
|
||||
<!-- Left Side -->
|
||||
<div class="skill-detail-body-left" fxFlex>
|
||||
<div class="skill-detail-section">
|
||||
<div class="mat-subheading-1">hey mycroft</div>
|
||||
<div fxLayout="row wrap">
|
||||
<div class="mat-body-1 skill-trigger" *ngFor="let trigger of skill.triggers">
|
||||
<fa-icon [icon]="triggerIcon"></fa-icon>
|
||||
{{trigger}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-detail-section">
|
||||
<div class="mat-subheading-1">description</div>
|
||||
<div class="mat-body-1" [innerHTML]="skill.description"></div>
|
||||
</div>
|
||||
<div class="skill-detail-section">
|
||||
<div class="mat-subheading-1">credits</div>
|
||||
<div class="mat-body-1" *ngFor="let credit of skill.credits">
|
||||
{{credit.name}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side -->
|
||||
<div class="skill-detail-body-right" fxFlex="20">
|
||||
<div class="skill-detail-section">
|
||||
<div class="mat-subheading-1">supported devices</div>
|
||||
<div class="mat-body-1" fxLayoutAlign="none center">
|
||||
<img src="../../../../assets/mark-1-icon.svg">
|
||||
Mark I
|
||||
</div>
|
||||
<div class="mat-body-1" fxLayoutAlign="none center">
|
||||
<img src="../../../../assets/mark-2-icon.svg">
|
||||
Mark II
|
||||
</div>
|
||||
<div class="mat-body-1" fxLayoutAlign="none center">
|
||||
<img src="../../../../assets/picroft-icon.svg">
|
||||
Picroft
|
||||
</div>
|
||||
<div class="mat-body-1" fxLayoutAlign="none center">
|
||||
<img src="../../../../assets/kde.svg" class="kde-icon">
|
||||
KDE
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-detail-section">
|
||||
<div class="mat-subheading-1">supported languages</div>
|
||||
<div class="mat-body-1">English</div>
|
||||
</div>
|
||||
<div class="skill-detail-section">
|
||||
<div class="mat-subheading-1">category</div>
|
||||
<div class="mat-body-1">{{skill.categories[0]}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
@import '../../../../stylesheets/global';
|
||||
|
||||
.skill-detail-body {
|
||||
background-color: $mycroft-white;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
margin-bottom: 50px;
|
||||
padding-bottom: 3vh;
|
||||
padding-left: 4vw;
|
||||
padding-right: 4vw;
|
||||
padding-top: 3vh;
|
||||
.mat-subheading-1 {
|
||||
color: $mycroft-dark-grey;
|
||||
font-variant: small-caps;
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.mat-body-1 {
|
||||
color: $mycroft-secondary;
|
||||
}
|
||||
.kde-icon {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
.skill-detail-section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.skill-detail-body-left {
|
||||
min-width: 340px;
|
||||
margin-right: 50px;
|
||||
.skill-trigger {
|
||||
@include skill-trigger;
|
||||
@include ellipsis-overflow;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
max-width: 340px;
|
||||
}
|
||||
}
|
||||
.skill-detail-body-right {
|
||||
margin-right: 20px;
|
||||
white-space: nowrap;
|
||||
img {
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { Component, Input } from '@angular/core';
|
||||
|
||||
import { SkillDetail } from "../../skills.service";
|
||||
import { faComment } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
@Component({
|
||||
selector: 'market-skill-detail-body',
|
||||
templateUrl: './skill-detail-body.component.html',
|
||||
styleUrls: ['./skill-detail-body.component.scss']
|
||||
})
|
||||
export class SkillDetailBodyComponent {
|
||||
@Input() public skill: SkillDetail;
|
||||
public triggerIcon = faComment;
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!-- Header block -->
|
||||
<div class="skill-detail-header" fxLayout="row wrap">
|
||||
|
||||
<!-- Left Side -->
|
||||
<div class="skill-detail-header-left" fxFlex>
|
||||
<!-- there cannot be an icon and an icon_image. show the
|
||||
image if it exists otherwise show the icon -->
|
||||
<img *ngIf="skill.iconImage" src={{skill.iconImage}} height="70" width="70">
|
||||
<fa
|
||||
*ngIf="!skill.iconImage"
|
||||
[ngStyle]="{'color': skill.icon.color}"
|
||||
name={{skill.icon.icon}}
|
||||
>
|
||||
</fa>
|
||||
<div fxFlex>
|
||||
<h1>{{skill.title}}</h1>
|
||||
<div class="mat-body-1" [innerHTML]="skill.summary"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side -->
|
||||
<div class="skill-detail-header-right" fxFlex="20">
|
||||
<skill-install-button [skill]="skill" [component]="'skillDetail'">
|
||||
</skill-install-button>
|
||||
<div>
|
||||
<button
|
||||
mat-icon-button
|
||||
class="github-button"
|
||||
(click)="navigateToGithubRepo(skill.repositoryUrl)"
|
||||
>
|
||||
<fa-icon [icon]="githubIcon"></fa-icon>
|
||||
GitHub Repository
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
@import '../../../../stylesheets/global';
|
||||
|
||||
.skill-detail-header {
|
||||
background-color: #f7f9fa;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
padding-bottom: 3vh;
|
||||
padding-left: 4vw;
|
||||
padding-right: 4vw;
|
||||
padding-top: 4vh;
|
||||
.skill-detail-header-left {
|
||||
color: $mycroft-secondary;
|
||||
margin-right: 50px;
|
||||
min-width: 340px;
|
||||
fa {
|
||||
font-size: 70px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
img {
|
||||
margin-right: 20px;
|
||||
}
|
||||
h1 {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.skill-detail-header-right {
|
||||
margin-right: 20px;
|
||||
.install-button {
|
||||
@include action-button;
|
||||
width: 140px;
|
||||
}
|
||||
.install-button:hover {
|
||||
background-color: $mycroft-tertiary-green;
|
||||
color: $mycroft-secondary;
|
||||
}
|
||||
|
||||
.github-button {
|
||||
color: $mycroft-dark-grey;
|
||||
font-weight: normal;
|
||||
width: 135px;
|
||||
fa-icon {
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { Component, Input } from '@angular/core';
|
||||
import { SkillDetail } from "../../skills.service";
|
||||
import { faCodeBranch } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
@Component({
|
||||
selector: 'market-skill-detail-header',
|
||||
templateUrl: './skill-detail-header.component.html',
|
||||
styleUrls: ['./skill-detail-header.component.scss']
|
||||
})
|
||||
export class SkillDetailHeaderComponent {
|
||||
public githubIcon = faCodeBranch;
|
||||
@Input() public skill: SkillDetail;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
|
@ -5,102 +5,6 @@
|
|||
</button>
|
||||
</div>
|
||||
<div class="skill-detail" *ngIf="skill$ | async as skill">
|
||||
<!-- Header block -->
|
||||
<div class="skill-detail-header" fxLayout="row wrap">
|
||||
|
||||
<!-- Left Side -->
|
||||
<div class="skill-detail-header-left" fxFlex>
|
||||
<!-- there cannot be an icon and an icon_image. show the
|
||||
image if it exists otherwise show the icon -->
|
||||
<img *ngIf="skill.iconImage" src={{skill.iconImage}} height="70" width="70">
|
||||
<fa
|
||||
*ngIf="!skill.iconImage"
|
||||
[ngStyle]="{'color': skill.icon.color}"
|
||||
name={{skill.icon.icon}}
|
||||
>
|
||||
</fa>
|
||||
<div fxFlex>
|
||||
<h1>{{skill.title}}</h1>
|
||||
<div class="mat-body-1" [innerHTML]="skill.summary"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side -->
|
||||
<div class="skill-detail-header-right" fxFlex="20">
|
||||
<div class="install-button">
|
||||
<button mat-flat-button class="install-button">INSTALL</button>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
mat-icon-button
|
||||
class="github-button"
|
||||
(click)="navigateToGithubRepo(skill.repositoryUrl)"
|
||||
>
|
||||
<fa-icon [icon]="githubIcon"></fa-icon>
|
||||
GitHub Repository
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Detail block -->
|
||||
<div class="skill-detail-body" fxLayout="row wrap">
|
||||
|
||||
<!-- Left Side -->
|
||||
<div class="skill-detail-body-left" fxFlex>
|
||||
<div class="skill-detail-section">
|
||||
<div class="mat-subheading-1">hey mycroft</div>
|
||||
<div fxLayout="row wrap">
|
||||
<div class="mat-body-1 skill-trigger" *ngFor="let trigger of skill.triggers">
|
||||
<fa-icon [icon]="triggerIcon"></fa-icon>
|
||||
{{trigger}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-detail-section">
|
||||
<div class="mat-subheading-1">description</div>
|
||||
<div class="mat-body-1" [innerHTML]="skill.description"></div>
|
||||
</div>
|
||||
<div class="skill-detail-section">
|
||||
<div class="mat-subheading-1">credits</div>
|
||||
<div class="mat-body-1" *ngFor="let credit of skill.credits">
|
||||
{{credit.name}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side -->
|
||||
<div class="skill-detail-body-right" fxFlex="20">
|
||||
<div class="skill-detail-section">
|
||||
<div class="mat-subheading-1">supported devices</div>
|
||||
<div class="mat-body-1" fxLayoutAlign="none center">
|
||||
<img src="../../../assets/mark-1-icon.svg">
|
||||
Mark I
|
||||
</div>
|
||||
<div class="mat-body-1" fxLayoutAlign="none center">
|
||||
<img src="../../../assets/mark-2-icon.svg">
|
||||
Mark II
|
||||
</div>
|
||||
<div class="mat-body-1" fxLayoutAlign="none center">
|
||||
<img src="../../../assets/picroft-icon.svg">
|
||||
Picroft
|
||||
</div>
|
||||
<div class="mat-body-1" fxLayoutAlign="none center">
|
||||
<img src="../../../assets/kde.svg" class="kde-icon">
|
||||
KDE
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-detail-section">
|
||||
<div class="mat-subheading-1">supported languages</div>
|
||||
<div class="mat-body-1">English</div>
|
||||
</div>
|
||||
<div class="skill-detail-section">
|
||||
<div class="mat-subheading-1">category</div>
|
||||
<div class="mat-body-1">{{skill.categories[0]}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<market-skill-detail-header [skill]="skill"></market-skill-detail-header>
|
||||
<market-skill-detail-body [skill]="skill"></market-skill-detail-body>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,94 +15,4 @@
|
|||
@include skill-detail-size;
|
||||
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
border-radius: 10px;
|
||||
.skill-detail-header {
|
||||
background-color: #f7f9fa;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
padding-bottom: 3vh;
|
||||
padding-left: 4vw;
|
||||
padding-right: 4vw;
|
||||
padding-top: 4vh;
|
||||
.skill-detail-header-left {
|
||||
color: $mycroft-secondary;
|
||||
margin-right: 50px;
|
||||
min-width: 340px;
|
||||
fa {
|
||||
font-size: 70px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
img {
|
||||
margin-right: 20px;
|
||||
}
|
||||
h1 {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.skill-detail-header-right {
|
||||
margin-right: 20px;
|
||||
.install-button {
|
||||
@include action-button;
|
||||
width: 140px;
|
||||
}
|
||||
.install-button:hover {
|
||||
background-color: $mycroft-tertiary-green;
|
||||
color: $mycroft-secondary;
|
||||
}
|
||||
|
||||
.github-button {
|
||||
color: $mycroft-dark-grey;
|
||||
font-weight: normal;
|
||||
width: 135px;
|
||||
fa-icon {
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.skill-detail-body {
|
||||
background-color: $mycroft-white;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
margin-bottom: 50px;
|
||||
padding-bottom: 3vh;
|
||||
padding-left: 4vw;
|
||||
padding-right: 4vw;
|
||||
padding-top: 3vh;
|
||||
.mat-subheading-1 {
|
||||
color: $mycroft-dark-grey;
|
||||
font-variant: small-caps;
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.mat-body-1 {
|
||||
color: $mycroft-secondary;
|
||||
}
|
||||
.kde-icon {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
.skill-detail-section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.skill-detail-body-left {
|
||||
min-width: 340px;
|
||||
margin-right: 50px;
|
||||
.skill-trigger {
|
||||
@include skill-trigger;
|
||||
@include ellipsis-overflow;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
max-width: 340px;
|
||||
}
|
||||
}
|
||||
.skill-detail-body-right {
|
||||
margin-right: 20px;
|
||||
white-space: nowrap;
|
||||
img {
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { SkillDetailComponent } from './skill-detail.component';
|
||||
|
||||
describe('SkillDetailComponent', () => {
|
||||
let component: SkillDetailComponent;
|
||||
let fixture: ComponentFixture<SkillDetailComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ SkillDetailComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SkillDetailComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,11 +1,12 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
|
||||
import { Observable } from "rxjs/internal/Observable";
|
||||
import { switchMap } from "rxjs/operators";
|
||||
import { switchMap, tap } from "rxjs/operators";
|
||||
|
||||
import { faArrowLeft, faComment, faCodeBranch } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
import { Skill, SkillsService } from "../skills.service";
|
||||
import { InstallService } from "../install.service";
|
||||
import { SkillDetail, SkillsService } from "../skills.service";
|
||||
|
||||
@Component({
|
||||
selector: 'marketplace-skill-detail',
|
||||
|
|
@ -14,27 +15,29 @@ import { Skill, SkillsService } from "../skills.service";
|
|||
})
|
||||
export class SkillDetailComponent implements OnInit {
|
||||
public backArrow = faArrowLeft;
|
||||
public githubIcon = faCodeBranch;
|
||||
public skill$: Observable<Skill>;
|
||||
public triggerIcon = faComment;
|
||||
public skill$: Observable<SkillDetail>;
|
||||
|
||||
constructor(
|
||||
private installService: InstallService,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private service: SkillsService
|
||||
private skillsService: SkillsService
|
||||
) { }
|
||||
|
||||
|
||||
ngOnInit() {
|
||||
this.installService.getSkillInstallations();
|
||||
this.skill$ = this.route.paramMap.pipe(
|
||||
switchMap((params: ParamMap) => this.service.getSkillById(params.get('id')))
|
||||
switchMap(
|
||||
(params: ParamMap) => this.skillsService.getSkillById(params.get('skillName'))
|
||||
),
|
||||
tap(
|
||||
() => {this.installService.getSkillInstallations();}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
navigateToGithubRepo(githubRepoUrl) {
|
||||
window.open(githubRepoUrl);
|
||||
}
|
||||
// returnToSummary() {
|
||||
// this.router.navigate(['/skills']);
|
||||
// }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,8 +10,10 @@ import { InstallButtonComponent } from './shared/install-button/install-button.c
|
|||
import { InstallService } from "./install.service";
|
||||
import { MaterialModule } from "../shared/material.module";
|
||||
import { SkillCardComponent } from './skill-summary/skill-card/skill-card.component';
|
||||
import { SkillDetailBodyComponent } from './skill-detail/skill-detail-body/skill-detail-body.component';
|
||||
import { SkillCardHeaderComponent } from "./skill-summary/skill-card/skill-card-header.component";
|
||||
import { SkillDetailComponent } from "./skill-detail/skill-detail.component";
|
||||
import { SkillDetailHeaderComponent } from './skill-detail/skill-detail-header/skill-detail-header.component';
|
||||
import { SkillSearchComponent} from "./skill-summary/skill-search/skill-search.component";
|
||||
import { SkillsRoutingModule } from "./skills-routing.module";
|
||||
import { SkillsService } from "./skills.service";
|
||||
|
|
@ -32,6 +34,8 @@ import { SkillSummaryComponent } from "./skill-summary/skill-summary.component";
|
|||
SkillCardComponent,
|
||||
SkillCardHeaderComponent,
|
||||
SkillDetailComponent,
|
||||
SkillDetailBodyComponent,
|
||||
SkillDetailHeaderComponent,
|
||||
SkillSearchComponent,
|
||||
SkillSummaryComponent,
|
||||
InstallButtonComponent
|
||||
|
|
|
|||
Loading…
Reference in New Issue