Skip to content

Commit 24e1b89

Browse files
author
Salma Alam-Naylor
committed
Split out interval map and chord map into separate components
1 parent 056ac31 commit 24e1b89

24 files changed

+483
-326
lines changed

‎apps/fretonator-web/src/app/common/chips/chip/create-chip-link-title.pipe.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { TestBed } from '@angular/core/testing';
22
import { CreateChipLinkTitlePipe } from './create-chip-link-title.pipe';
33
import { FretMapService } from '../../fret-map/fret-map.service';
4-
import { NoteExtenderString, Mode } from '../../../util/types';
4+
import { Mode, NoteExtenderString } from '../../../util/types';
55

66
describe('CreateChipLinkTitlePipe', () => {
77
let service: FretMapService;

‎apps/fretonator-web/src/app/common/chips/chip/create-chip-link-title.pipe.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Pipe, PipeTransform } from '@angular/core';
2-
import { NoteExtenderString, Mode } from '../../../util/types';
2+
import { Mode, NoteExtenderString } from '../../../util/types';
33
import { FretMapService } from '../../fret-map/fret-map.service';
44

55
@Pipe({

‎apps/fretonator-web/src/app/common/fret-map/fret-map.service.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import {
3030
import { JamTracksData } from '../../data/jamTracks';
3131

3232
import { FretMapService } from './fret-map.service';
33-
import { NoteSymbol, NoteExtenderString, Mode } from '../../util/types';
33+
import { Mode, NoteExtenderString, NoteSymbol } from '../../util/types';
3434

3535
describe('GenerateFretMapService', () => {
3636
let service: FretMapService;

‎apps/fretonator-web/src/app/common/fret-map/fret-map.service.ts

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,17 @@ import {
66
JamTrack,
77
Mode,
88
ModeMap,
9-
NoteObject,
10-
NoteSymbol,
119
NoteExtenderString,
12-
NoteExtenderSymbol,
10+
NoteObject,
11+
NoteSymbol
1312
} from '../../util/types';
1413
import {
1514
ChordPatterns,
1615
ModePatterns,
16+
ModeSelectorObjects,
1717
NoteToStringAndFretMap,
1818
Octave,
19-
ScaleDegrees,
20-
ModeSelectorObjects,
19+
ScaleDegrees
2120
} from '../../util/constants';
2221
import { JamTracksData } from '../../data/jamTracks';
2322

‎apps/fretonator-web/src/app/common/fretonator/chord-map/chord-map.component.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<div class="chordMap">
2+
<h4 class="chordMap__title">Chords (triads)</h4>
3+
<div class="chordMap__chords">
4+
<ng-container *ngFor="let chord of chordMap; let i = index">
5+
<h5 class="chordMap__chord">
6+
{{chord.note}}{{chord.type}}
7+
</h5>
8+
<span class="chordMap__separator" *ngIf="i < chordMap.length - 1"> - </span>
9+
</ng-container>
10+
</div>
11+
</div>

‎apps/fretonator-web/src/app/common/fretonator/chord-map/chord-map.component.scss

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
@import '../../../../styles/vars';
2+
@import "../../../../styles/functions";
3+
@import "../../../../styles/typography";
4+
5+
.chordMap {
6+
display: flex;
7+
flex-direction: column;
8+
order: 3;
9+
align-items: center;
10+
margin-top: pxToRem($grid-unit * 8);
11+
margin-bottom: 0;
12+
13+
@media screen and (min-width: $screen-med) {
14+
align-items: flex-start;
15+
margin-top: 0;
16+
}
17+
}
18+
19+
.chordMap__title {
20+
@include info_container_title;
21+
}
22+
23+
24+
.chordMap__chords {
25+
display: flex;
26+
flex-direction: row;
27+
justify-content: flex-start;
28+
flex-wrap: wrap;
29+
}
30+
31+
.chordMap__chord,
32+
.chordMap__separator {
33+
font-size: pxToRem(16);
34+
font-family: var(--font-family-main);
35+
display: flex;
36+
flex-direction: row;
37+
justify-content: space-between;
38+
align-items: center;
39+
font-style: italic;
40+
margin-right: pxToRem($grid-unit);
41+
margin-bottom: pxToRem($grid-unit);
42+
font-weight: var(--font-weight-bold);
43+
}

‎apps/fretonator-web/src/app/common/fretonator/chord-map/chord-map.component.spec.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { ChordMapComponent } from './chord-map.component';
4+
5+
describe('ChordMapComponent', () => {
6+
let component: ChordMapComponent;
7+
let fixture: ComponentFixture<ChordMapComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ ChordMapComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(ChordMapComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎apps/fretonator-web/src/app/common/fretonator/chord-map/chord-map.component.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Component, Input, OnInit } from '@angular/core';
2+
import { ChordMap } from '../../../util/types';
3+
4+
@Component({
5+
selector: 'app-chord-map',
6+
templateUrl: './chord-map.component.html',
7+
styleUrls: ['./chord-map.component.scss']
8+
})
9+
export class ChordMapComponent implements OnInit {
10+
@Input() chordMap: ChordMap;
11+
12+
constructor() { }
13+
14+
ngOnInit(): void {
15+
}
16+
17+
}

‎apps/fretonator-web/src/app/common/fretonator/chord-map/chord-map.module.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { ChordMapComponent } from './chord-map.component';
4+
5+
6+
@NgModule({
7+
declarations: [ChordMapComponent],
8+
exports: [
9+
ChordMapComponent
10+
],
11+
imports: [
12+
CommonModule
13+
]
14+
})
15+
export class ChordMapModule { }

‎apps/fretonator-web/src/app/common/fretonator/fretonator.component.html

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -128,27 +128,7 @@ <h2 class="scaleDegreesInfo__title">About Scale Degrees
128128
</p>
129129
</div>
130130

131-
<div class="intervalDisplay">
132-
<h4 class="intervalDisplay__title">Mode interval pattern</h4>
133-
<div class="intervalDisplay__intervals">
134-
<ng-container *ngFor="let integer of intervalPattern; let i = index">
135-
<h5 class="intervalDisplay__interval">
136-
{{ integer | convertIntervalIntegerToString }}
137-
</h5>
138-
<span class="intervalDisplay__separator" *ngIf="i < intervalPattern.length - 1"> - </span>
139-
</ng-container>
140-
</div>
141-
</div>
131+
<app-interval-map [intervalMap]="intervalMap"></app-interval-map>
142132

143-
<div class="chordMap">
144-
<h4 class="chordMap__title">Chords (triads)</h4>
145-
<div class="chordMap__chords">
146-
<ng-container *ngFor="let chord of chordMap; let i = index">
147-
<h5 class="chordMap__chord">
148-
{{chord.note}}{{chord.type}}
149-
</h5>
150-
<span class="chordMap__separator" *ngIf="i < chordMap.length - 1"> - </span>
151-
</ng-container>
152-
</div>
153-
</div>
133+
<app-chord-map [chordMap]="chordMap"></app-chord-map>
154134
</div>

0 commit comments

Comments
 (0)