From 14291b832d3dac7f59dd874209bdee06c9c5ca38 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Fri, 3 Jul 2020 15:47:49 +0100 Subject: [PATCH 01/22] Started creating a control panel 1. Moved the fretboard toggle into its own component 2. Moved the scale degrees display into its own component --- .../fretboard-config.component.html | 22 +++ .../fretboard-config.component.scss | 63 ++++++++ .../fretboard-config.component.spec.ts | 25 +++ .../fretboard-config.component.ts | 24 +++ .../fretboard-config.module.ts | 16 ++ .../fretboard/fretboard.component.html | 37 ++--- .../fretboard/fretboard.component.scss | 81 +++------- .../fretonator/fretboard/fretboard.module.ts | 6 +- .../scale-degrees.component.html | 8 + .../scale-degrees.component.scss | 49 ++++++ .../scale-degrees.component.spec.ts | 25 +++ .../scale-degrees/scale-degrees.component.ts | 15 ++ .../scale-degrees/scale-degrees.module.ts | 16 ++ .../scale-map/scale-map.component.html | 9 +- .../scale-map/scale-map.component.scss | 45 ------ .../fretonator/scale-map/scale-map.module.ts | 4 +- .../home-index.component.spec.ts.snap | 149 +++++++++++------- 17 files changed, 394 insertions(+), 200 deletions(-) create mode 100644 apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.html create mode 100644 apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.scss create mode 100644 apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.spec.ts create mode 100644 apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.ts create mode 100644 apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.module.ts create mode 100644 apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.html create mode 100644 apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.scss create mode 100644 apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.spec.ts create mode 100644 apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.ts create mode 100644 apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.module.ts diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.html b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.html new file mode 100644 index 0000000..ca134a6 --- /dev/null +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.html @@ -0,0 +1,22 @@ +
+ + + + +
diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.scss b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.scss new file mode 100644 index 0000000..8b8cce2 --- /dev/null +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.scss @@ -0,0 +1,63 @@ +@import "../../../../styles/vars"; +@import "../../../../styles/functions"; +@import "../../../../styles/mixins"; +@import "../../../../styles/typography"; + +.fretboard__toggle { + display: block; + text-align: center; +} + +.fretboard__toggleButton { + @include chip_button_base(); + height: pxToRem(44); +} + +.toggle__shortLabel { + display: inline; + font-weight: inherit; + padding-left: pxToRem($grid_unit * 1.5); + padding-right: pxToRem($grid_unit * 1.5); + + @media screen and (min-width: $screen-med) { + display: none; + } +} + +.toggle__longLabel { + display: none; + font-weight: inherit; + + @media screen and (min-width: $screen-med) { + display: inline; + } +} + +.fretboard__toggleButton--active { + background-color: var(--chip-background-color-active); + color: var(--chip-foreground-color-active); +} + +.fretboard__toggleButton--left { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right-width: calc(var(--border-width-button) / 2); +} + +.fretboard__toggleButton--middle-left { + border-radius: 0; + border-right-width: calc(var(--border-width-button) / 2); + border-left-width: 0; +} + +.fretboard__toggleButton--middle-right { + border-radius: 0; + border-right-width: 0; + border-left-width: calc(var(--border-width-button) / 2); +} + +.fretboard__toggleButton--right { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left-width: calc(var(--border-width-button) / 2); +} diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.spec.ts b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.spec.ts new file mode 100644 index 0000000..abda0ef --- /dev/null +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FretboardConfigComponent } from './fretboard-config.component'; + +describe('FretboardConfigComponent', () => { + let component: FretboardConfigComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ FretboardConfigComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FretboardConfigComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.ts b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.ts new file mode 100644 index 0000000..34c41ef --- /dev/null +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.ts @@ -0,0 +1,24 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { FretMode, Orientation } from '../fretboard/fretboard.component'; + +@Component({ + selector: 'app-fretboard-config', + templateUrl: './fretboard-config.component.html', + styleUrls: ['./fretboard-config.component.scss'] +}) +export class FretboardConfigComponent { + @Input() fretMode; + @Input() fretModes; + @Input() orientations; + @Input() orientation; + @Output() setFretMode = new EventEmitter(); + @Output() setOrientation = new EventEmitter(); + + setFretModeClick(fretMode: FretMode) { + this.setFretMode.emit(fretMode); + } + + setOrientationClick(orientation: Orientation) { + this.setOrientation.emit(orientation); + } +} diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.module.ts b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.module.ts new file mode 100644 index 0000000..a325c7c --- /dev/null +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FretboardConfigComponent } from './fretboard-config.component'; + + + +@NgModule({ + declarations: [FretboardConfigComponent], + exports: [ + FretboardConfigComponent + ], + imports: [ + CommonModule + ] +}) +export class FretboardConfigModule { } diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html index 59d0251..eb1380e 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html @@ -22,29 +22,6 @@ -
- - - - -
-
@@ -88,10 +65,8 @@ [ngTemplateOutlet]="string" [ngTemplateOutletContext]="{ stringName: 'E', string: 'E' }" > -
-
@@ -101,6 +76,18 @@
+
+ + +
+

diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss index 99f64bd..c3c2320 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss @@ -449,66 +449,6 @@ $note-height: 36; } } -.fretboard__toggle { - display: block; - text-align: center; - margin: pxToRem($grid-unit * 2) auto 0 auto; -} - -.fretboard__toggleButton { - @include chip_button_base(); - height: pxToRem(44); -} - -.toggle__shortLabel { - display: inline; - font-weight: inherit; - padding-left: pxToRem($grid_unit * 1.5); - padding-right: pxToRem($grid_unit * 1.5); - - @media screen and (min-width: $screen-med) { - display: none; - } -} - -.toggle__longLabel { - display: none; - font-weight: inherit; - - @media screen and (min-width: $screen-med) { - display: inline; - } -} - -.fretboard__toggleButton--active { - background-color: var(--chip-background-color-active); - color: var(--chip-foreground-color-active); -} - -.fretboard__toggleButton--left { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-right-width: calc(var(--border-width-button) / 2); -} - -.fretboard__toggleButton--middle-left { - border-radius: 0; - border-right-width: calc(var(--border-width-button) / 2); - border-left-width: 0; -} - -.fretboard__toggleButton--middle-right { - border-radius: 0; - border-right-width: 0; - border-left-width: calc(var(--border-width-button) / 2); -} - -.fretboard__toggleButton--right { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-left-width: calc(var(--border-width-button) / 2); -} - .fretonator__playCtaIcon { display: flex; height: pxToRem($grid-unit * 2); @@ -541,3 +481,24 @@ $note-height: 36; } } } + +.control__panel { + @include content_wrapper(); + display: flex; + flex-direction: column; + max-width: $screen-med; + margin-top: pxToRem($grid-unit * 2); + margin-bottom: pxToRem($grid-unit * 8); + background-color: var(--background-color-light); + padding: pxToRem($grid-unit * 4); + border-radius: pxToRem($grid-unit * 4); + box-shadow: 0 pxToRem(1) pxToRem(3) rgba(26, 26, 26, 0.12), 0 pxToRem(1) pxToRem(2) rgba(26, 26, 26, 0.24); + + @media screen and (min-width: $screen-med) { + flex-direction: row; + } +} + +.control__panel__column { + +} diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.module.ts b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.module.ts index 3fe1197..9fec559 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.module.ts +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.module.ts @@ -3,6 +3,8 @@ import { CommonModule } from '@angular/common'; import { FretboardComponent } from './fretboard.component'; import { GetFretFromFretMapPipe } from './get-fret-from-fret-map.pipe'; import { SpeakerModule } from '../../svgs/speaker/speaker.module'; +import { ScaleDegreesModule } from '../scale-degrees/scale-degrees.module'; +import { FretboardConfigModule } from '../fretboard-config/fretboard-config.module'; @NgModule({ @@ -12,7 +14,9 @@ import { SpeakerModule } from '../../svgs/speaker/speaker.module'; ], imports: [ CommonModule, - SpeakerModule + SpeakerModule, + ScaleDegreesModule, + FretboardConfigModule ], exports: [ FretboardComponent diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.html b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.html new file mode 100644 index 0000000..1038ebb --- /dev/null +++ b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.html @@ -0,0 +1,8 @@ +

+ 1 + 3 + 5 +
diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.scss b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.scss new file mode 100644 index 0000000..d8717a8 --- /dev/null +++ b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.scss @@ -0,0 +1,49 @@ +@import "../../../../styles/vars"; +@import "../../../../styles/functions"; +@import "../../../../styles/mixins"; +@import "../../../../styles/typography"; + +.degreesDisplay { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + height: $infoContainer_info_row_height; +} + +.degreesDisplay__degree { + display: flex; + justify-content: center; + align-items: center; + font-size: pxToRem(16); + height: pxToRem($grid-unit * 4); + width: pxToRem($grid-unit * 4); + border-radius: 50%; + font-weight: var(--font-weight-bold); + font-family: var(--font-family-main); + margin-left: pxToRem($grid-unit); + margin-right: pxToRem($grid-unit); + + &:last-child { + margin-right: 0; + } + + &:first-child { + margin-left: 0; + } +} + +.degreesDisplay__degree--tonic { + background-color: var(--note-bg-tonic); + color: var(--note-color-tonic); +} + +.degreesDisplay__degree--mediant { + background-color: var(--note-bg-mediant); + color: var(--note-color-mediant); +} + +.degreesDisplay__degree--dominant { + background-color: var(--note-bg-dominant); + color: var(--note-color-dominant); +} diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.spec.ts b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.spec.ts new file mode 100644 index 0000000..85539c6 --- /dev/null +++ b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ScaleDegreesComponent } from './scale-degrees.component'; + +describe('ScaleDegreesComponent', () => { + let component: ScaleDegreesComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ScaleDegreesComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ScaleDegreesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.ts b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.ts new file mode 100644 index 0000000..afac336 --- /dev/null +++ b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-scale-degrees', + templateUrl: './scale-degrees.component.html', + styleUrls: ['./scale-degrees.component.scss'] +}) +export class ScaleDegreesComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.module.ts b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.module.ts new file mode 100644 index 0000000..c01935a --- /dev/null +++ b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { ScaleDegreesComponent } from './scale-degrees.component'; + + + +@NgModule({ + declarations: [ScaleDegreesComponent], + exports: [ + ScaleDegreesComponent + ], + imports: [ + CommonModule + ] +}) +export class ScaleDegreesModule { } diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html index 2450083..f028f92 100644 --- a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html @@ -30,14 +30,7 @@

Degrees

-
- 1 - 3 - 5 -
+ - - - -
@@ -1142,6 +1100,75 @@ exports[`HomeIndexComponent should create 1`] = `
+
+ +
+ + 1 + + + 3 + + + 5 + +
+ + +
+ + + + +
+ +

@@ -1332,25 +1359,27 @@ exports[`HomeIndexComponent should create 1`] = ` > Degrees -

- - 1 - - - 3 - - +
- 5 - -
+ + 1 + + + 3 + + + 5 + +
+ - - - +
+
+ + +
+
+ + +
diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.scss b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.scss index 8b8cce2..725d12b 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.scss @@ -3,34 +3,30 @@ @import "../../../../styles/mixins"; @import "../../../../styles/typography"; -.fretboard__toggle { - display: block; - text-align: center; +.configure__controls { + display: flex; + flex-direction: column; } -.fretboard__toggleButton { - @include chip_button_base(); - height: pxToRem(44); -} +.button__group { + display: flex; + flex-direction: row; + justify-content: center; + margin-bottom: pxToRem($grid-unit * 2); -.toggle__shortLabel { - display: inline; - font-weight: inherit; - padding-left: pxToRem($grid_unit * 1.5); - padding-right: pxToRem($grid_unit * 1.5); + &:last-of-type { + margin-bottom: 0; + } @media screen and (min-width: $screen-med) { - display: none; + justify-content: flex-end; } } -.toggle__longLabel { - display: none; - font-weight: inherit; - - @media screen and (min-width: $screen-med) { - display: inline; - } +.fretboard__toggleButton { + @include chip_button_base(); + padding: pxToRem($grid-unit * 1.5); + border-color: var(--fretboard-toggle-button-border-color); } .fretboard__toggleButton--active { @@ -38,25 +34,13 @@ color: var(--chip-foreground-color-active); } -.fretboard__toggleButton--left { +.fretboard__toggleButton:first-of-type { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-width: calc(var(--border-width-button) / 2); } -.fretboard__toggleButton--middle-left { - border-radius: 0; - border-right-width: calc(var(--border-width-button) / 2); - border-left-width: 0; -} - -.fretboard__toggleButton--middle-right { - border-radius: 0; - border-right-width: 0; - border-left-width: calc(var(--border-width-button) / 2); -} - -.fretboard__toggleButton--right { +.fretboard__toggleButton:last-of-type { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: calc(var(--border-width-button) / 2); diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.module.ts b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.module.ts index a325c7c..eccda85 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.module.ts +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.module.ts @@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common'; import { FretboardConfigComponent } from './fretboard-config.component'; - @NgModule({ declarations: [FretboardConfigComponent], exports: [ diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss index c730ebc..3c272f3 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss @@ -502,13 +502,32 @@ $note-height: 36; } .control__panel__section { + display: flex; + flex-direction: column; + width: 100%; + margin-bottom: pxToRem($grid-unit * 4); + + &:last-of-type { + margin-bottom: 0; + } + @media screen and (min-width: $screen-med) { + margin-bottom: 0; + } } .control__panel__title { @include info_container_title; + text-align: center; + + @media screen and (min-width: $screen-med) { + text-align: left; + } } .control__panel__title--right { - text-align: right; + text-align: center; + @media screen and (min-width: $screen-med) { + text-align: right; + } } diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.scss b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.scss index 2d19b33..4e1d557 100644 --- a/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.scss @@ -6,8 +6,12 @@ .degreesDisplay { display: flex; flex-direction: row; - justify-content: flex-start; + justify-content: center; align-items: center; + + @media screen and (min-width: $screen-med) { + justify-content: flex-start; + } } .degreesDisplay__degree { diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.module.ts b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.module.ts index c01935a..517daa8 100644 --- a/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.module.ts +++ b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.module.ts @@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common'; import { ScaleDegreesComponent } from './scale-degrees.component'; - @NgModule({ declarations: [ScaleDegreesComponent], exports: [ diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html index f028f92..d07de2a 100644 --- a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html @@ -23,17 +23,18 @@ class="button__infoToggle button__infoToggle--theoretical" aria-label="Theoretical Scales Info Toggle" type="button" + [attr.aria-expanded]="showTheoreticalScalesInfo" (click)="toggleTheoreticalScaleInfo()">{{theoreticalScalesToggleText}}
-

Degrees

- +

Scale Degrees

@@ -93,7 +94,7 @@

About Scale Degrees chord - meaning it's usually the chord that the jam track starts on and returns to often.

- Scale degrees 1, 3, and 5 are highlighted on the fretboard to give you a helpful point of reference when learning + Scale degrees 1, 3, and 5 can be highlighted on the fretboard to give you a helpful point of reference when learning the mode.

diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.ts b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.ts index e2362ef..98763de 100644 --- a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.ts +++ b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.ts @@ -4,7 +4,7 @@ import { NotePlaybackService } from '../../playback/note-playback.service'; import { GlobalService } from '../../../global.service'; enum ScaleDegreesToggleText { - hidden = 'What is this?', + hidden = 'About scale degrees', visible = 'Hide info' } diff --git a/apps/fretonator-web/src/app/common/video-loader/video-browser/video-browser.component.html b/apps/fretonator-web/src/app/common/video-loader/video-browser/video-browser.component.html index 21fc027..a317668 100644 --- a/apps/fretonator-web/src/app/common/video-loader/video-browser/video-browser.component.html +++ b/apps/fretonator-web/src/app/common/video-loader/video-browser/video-browser.component.html @@ -1,6 +1,6 @@ diff --git a/apps/fretonator-web/src/styles.scss b/apps/fretonator-web/src/styles.scss index d4489cc..74abc56 100644 --- a/apps/fretonator-web/src/styles.scss +++ b/apps/fretonator-web/src/styles.scss @@ -140,6 +140,8 @@ --chip-tag-foreground-color: var(--black); --similar-modes-background-color: var(--peach); + + --fretboard-toggle-button-border-color: var(--black); } [color-mode="dark"] { @@ -224,6 +226,7 @@ --chip-tag-foreground-color: var(--black); --similar-modes-background-color: var(--black); + --fretboard-toggle-button-border-color: var(--peach); } body { From e77c75cd5d1d4ec1cdf0a50ceb6db83f5a2244c0 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Fri, 3 Jul 2020 21:58:00 +0100 Subject: [PATCH 04/22] Added max width to hero banner --- .../src/app/pages/home/home-index/home-index.component.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss index e09cfb5..511912b 100644 --- a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss +++ b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss @@ -13,6 +13,9 @@ width: 100%; padding-top: pxToRem($grid-unit * 4); padding-bottom: pxToRem($grid-unit * 4); + max-width: $max-width; + margin-left: auto; + margin-right: auto; } .hero__grid { From b6cd65e8b9c336aba75512c229c33794695c8ac3 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Fri, 3 Jul 2020 22:27:59 +0100 Subject: [PATCH 05/22] Fixed some tests, skip control panel for now --- .../fretboard-config.component.html | 8 +- .../fretboard-config.component.spec.ts | 22 +- .../fretboard-config.component.ts | 2 +- .../fretboard-config.module.ts | 5 +- .../fretboard/fretboard.component.spec.ts | 8 +- .../fretboard/fretboard.component.ts | 2 +- .../home-index.component.spec.ts.snap | 218 ++++++++++++------ 7 files changed, 172 insertions(+), 93 deletions(-) diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.html b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.html index 6594af0..4c42315 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.html @@ -1,21 +1,21 @@
- -
- - - - -
+
+ + Configure fretboard + + +
+
- Right handed - - -
- + + +
+
+ + +
+
+ +

- Degrees + Scale Degrees

- -
- - 1 - - - 3 - - - 5 - -
- From 2c2f1a1a03627171571fbe5999d4c4dc9d5f0ddc Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Sat, 4 Jul 2020 14:31:29 +0100 Subject: [PATCH 06/22] Standardise use of enums of FretModes and Orientations in fretboard and fretboard-config components --- .../fretboard-config.component.html | 16 ++++----- .../fretboard-config.component.spec.ts | 5 ++- .../fretboard-config.component.ts | 21 ++++++++---- .../fretboard/fretboard.component.html | 16 ++++----- .../fretboard/fretboard.component.spec.ts | 2 +- .../fretboard/fretboard.component.ts | 34 +++++++++---------- 6 files changed, 49 insertions(+), 45 deletions(-) diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.html b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.html index 4c42315..67e6db1 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.html @@ -1,23 +1,23 @@
diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.spec.ts b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.spec.ts index 130b21a..f383963 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.spec.ts +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.spec.ts @@ -1,14 +1,13 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - import { FretboardConfigComponent } from './fretboard-config.component'; import { Component } from '@angular/core'; import { FretboardConfigModule } from './fretboard-config.module'; -xdescribe('FretboardConfigComponent', () => { +describe('FretboardConfigComponent', () => { @Component({ selector: 'app-fretboard-config-spec', template: ` - + ` }) class FretboardConfigComponentSpec { diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.ts b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.ts index 531b973..9bcb915 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.ts +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard-config/fretboard-config.component.ts @@ -1,5 +1,5 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { FretMode, Orientation } from '../fretboard/fretboard.component'; +import { FretModes, Orientations } from '../fretboard/fretboard.component'; @Component({ selector: 'app-fretboard-config', @@ -8,17 +8,24 @@ import { FretMode, Orientation } from '../fretboard/fretboard.component'; }) export class FretboardConfigComponent { @Input() fretMode; - @Input() fretModes; @Input() orientation; - @Input() orientations; - @Output() setFretMode = new EventEmitter(); - @Output() setOrientation = new EventEmitter(); - setFretModeClick(fretMode: FretMode) { + @Output() setFretMode = new EventEmitter(); + @Output() setOrientation = new EventEmitter(); + + setFretModeClick(fretMode: FretModes) { this.setFretMode.emit(fretMode); } - setOrientationClick(orientation: Orientation) { + setOrientationClick(orientation: Orientations) { this.setOrientation.emit(orientation); } + + get FretModes() { + return FretModes; + } + + get Orientations() { + return Orientations; + } } diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html index 7882fa4..7fa4709 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html @@ -25,17 +25,17 @@
+ [class.fretboard__flip]="orientation === Orientations.left">
+ [class.fretboard__flip]="orientation === Orientations.left" + [class.fretboard__wide]="fretMode === FretModes.twentyFour">
+ [class.fretboard__leftHanded]="orientation === Orientations.left" + [class.fretboard__24]="fretMode === FretModes.twentyFour">
+ [class.fretboard__leftHanded]="orientation === Orientations.left" + [class.fretboard__24]="fretMode === FretModes.twentyFour"> @@ -94,9 +94,7 @@ Configure fretboard diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.spec.ts b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.spec.ts index 4e98a04..5f93121 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.spec.ts +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.spec.ts @@ -91,5 +91,5 @@ describe('FretboardComponent', () => { fixture.detectChanges(); expect(rightButton.classes[classNames.toggleFretButtonSelected]).toBeTruthy(); }); - }) + }); }); diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts index d068e23..e3c1546 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts @@ -4,12 +4,12 @@ import { NotePlaybackService } from '../../playback/note-playback.service'; import { AbstractDataService } from '../../abstract-data/abstract-data.service'; import { ScaleDegree } from '../../../util/constants'; -export enum FretMode { +export enum FretModes { twelve = 'twelve', twentyFour = 'twentyFour', } -export enum Orientation { +export enum Orientations { left = 'left', right = 'right', } @@ -21,7 +21,7 @@ const FretReturner = { const StorageKeys = { fretMode: 'fretonator_fretMode', - orientation: 'fretonator_orientation', + orientation: 'fretonator_orientation' }; @Component({ @@ -50,25 +50,25 @@ export class FretboardComponent implements OnChanges, OnInit { const _fretMode = this.localStorage.getItem(StorageKeys.fretMode); switch (_fretMode) { case 'twelve': - this.fretMode = FretMode.twelve; + this.fretMode = FretModes.twelve; break; case 'twentyFour': - this.fretMode = FretMode.twentyFour; + this.fretMode = FretModes.twentyFour; break; default: - this.fretMode = FretMode.twelve; + this.fretMode = FretModes.twelve; } const _orientation = this.localStorage.getItem(StorageKeys.orientation); switch (_orientation) { case 'right': - this.orientation = Orientation.right; + this.orientation = Orientations.right; break; case 'left': - this.orientation = Orientation.left; + this.orientation = Orientations.left; break; default: - this.orientation = Orientation.right; + this.orientation = Orientations.right; } this.toggleHighlightTonic(); @@ -77,16 +77,16 @@ export class FretboardComponent implements OnChanges, OnInit { ngOnChanges(): void { if (this.loadExpanded) { - this.setFretMode(FretMode.twentyFour); + this.setFretMode(FretModes.twentyFour); } } - get fretModes() { - return FretMode; + get FretModes() { + return FretModes; } - get orientations() { - return Orientation; + get Orientations() { + return Orientations; } get scaleDegree() { @@ -95,17 +95,17 @@ export class FretboardComponent implements OnChanges, OnInit { configureFretboard() { this.frets = FretReturner[this.fretMode]; - this.loadExpandedChange.emit(this.fretMode === FretMode.twentyFour); + this.loadExpandedChange.emit(this.fretMode === FretModes.twentyFour); } - setOrientation(orientation: Orientation) { + setOrientation(orientation: Orientations) { this.orientation = orientation; this.localStorage.setItem(StorageKeys.orientation, this.orientation); this.configureFretboard(); } - setFretMode(fretMode: FretMode) { + setFretMode(fretMode: FretModes) { this.fretMode = fretMode; this.localStorage.setItem(StorageKeys.fretMode, this.fretMode); this.configureFretboard(); From b1d65a100bcff765c4000c014acdd0ca7d1ebb3b Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Sat, 4 Jul 2020 15:01:15 +0100 Subject: [PATCH 07/22] Put max width around header blocks for light mode --- .../src/app/pages/home/home-index/home-index.component.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss index 511912b..a60600e 100644 --- a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss +++ b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss @@ -13,7 +13,6 @@ width: 100%; padding-top: pxToRem($grid-unit * 4); padding-bottom: pxToRem($grid-unit * 4); - max-width: $max-width; margin-left: auto; margin-right: auto; } @@ -25,6 +24,10 @@ text-align: center; padding: 0; position: relative; + max-width: $max-width; + margin-left: auto; + margin-right: auto; + @media screen and (min-width: $screen-sm) { flex-direction: row; From 2a5963c0496121611884728eaa981092376e6104 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Sat, 4 Jul 2020 15:04:08 +0100 Subject: [PATCH 08/22] Remove play cta? --- .../fretonator/fretboard/fretboard.component.html | 12 ++++++------ .../app/common/fretonator/fretonator.component.html | 2 +- .../app/common/fretonator/fretonator.component.scss | 1 - 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html index 7fa4709..2134cd0 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html @@ -101,9 +101,9 @@
-

- - - - Tap notes on the fretboard for sound! -

+ + + + + + diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html index 2b483ac..f8b0b93 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html @@ -7,7 +7,7 @@

Check out the fretboard

- Learn how to break this down into patterns in our learning hub → + Learn how to break down modes into patterns in our learning hub →
diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss index 5907165..a0e0ae2 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss @@ -21,7 +21,6 @@ .cta__row { text-align: center; - padding-top: pxToRem($grid-unit * 4); } .learnHub__cta { From e10a8ecf1bf47a37936fc7fbd423622164b996bb Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Sat, 4 Jul 2020 15:04:47 +0100 Subject: [PATCH 09/22] Update snapshot --- .../home-index.component.spec.ts.snap | 25 +------------------ 1 file changed, 1 insertion(+), 24 deletions(-) diff --git a/apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap b/apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap index fbc0fca..0b35d1d 100644 --- a/apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap +++ b/apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap @@ -1255,29 +1255,6 @@ exports[`HomeIndexComponent should create 1`] = `
-

- - - - - - Tap notes on the fretboard for sound! - -

- Learn how to break this down into patterns in our learning hub → + Learn how to break down modes into patterns in our learning hub →
From c7322f0bcd70a4b26c2b5b4621a5384350385cde Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Sun, 5 Jul 2020 13:07:47 +0100 Subject: [PATCH 10/22] Hide/show scale degrees for pentatonic/non pentatonic scales as they make no sense --- .../app/common/fretonator/fretboard/fretboard.component.html | 2 +- .../src/app/common/fretonator/fretboard/fretboard.module.ts | 2 ++ .../src/app/common/fretonator/scale-map/scale-map.module.ts | 3 ++- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html index 2134cd0..8c63de5 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html @@ -78,7 +78,7 @@
-
+
Highlight scale degrees Date: Sun, 5 Jul 2020 13:59:45 +0100 Subject: [PATCH 11/22] WIP - moving info buttons to one row inside theory container and hooking things up --- .../fretboard/fretboard.component.html | 7 -- .../fretboard/fretboard.component.scss | 4 +- .../fretonator/fretonator.component.html | 90 +++++++++++++-- .../fretonator/fretonator.component.scss | 97 ++++++++++++++-- .../common/fretonator/fretonator.component.ts | 23 ++++ .../common/fretonator/fretonator.module.ts | 10 +- .../get-enharmonic-equivalent.pipe.spec.ts | 0 .../get-enharmonic-equivalent.pipe.ts | 2 +- .../get-enharmonic-router-link.pipe.spec.ts | 0 .../get-enharmonic-router-link.pipe.ts | 2 +- .../scale-map/scale-map.component.html | 87 -------------- .../scale-map/scale-map.component.scss | 108 +----------------- .../scale-map/scale-map.component.ts | 40 ------- .../fretonator/scale-map/scale-map.module.ts | 9 +- .../chevron-right.component.html | 3 + .../chevron-right.component.scss | 4 + .../chevron-right.component.spec.ts | 25 ++++ .../chevron-right/chevron-right.component.ts | 9 ++ .../chevron-right/chevron-right.module.ts | 16 +++ apps/fretonator-web/src/styles.scss | 3 + 20 files changed, 275 insertions(+), 264 deletions(-) rename apps/fretonator-web/src/app/common/fretonator/{scale-map => }/get-enharmonic-equivalent.pipe.spec.ts (100%) rename apps/fretonator-web/src/app/common/fretonator/{scale-map => }/get-enharmonic-equivalent.pipe.ts (87%) rename apps/fretonator-web/src/app/common/fretonator/{scale-map => }/get-enharmonic-router-link.pipe.spec.ts (100%) rename apps/fretonator-web/src/app/common/fretonator/{scale-map => }/get-enharmonic-router-link.pipe.ts (93%) create mode 100644 apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.component.html create mode 100644 apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.component.scss create mode 100644 apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.component.spec.ts create mode 100644 apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.component.ts create mode 100644 apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.module.ts diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html index 8c63de5..083fb9e 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html @@ -100,10 +100,3 @@ >
- - - - - - - diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss index 3c272f3..6ef3490 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss @@ -30,7 +30,7 @@ $note-height: 36; .fretboard__help { text-align: center; - padding-top: pxToRem($grid-unit * 4); + padding-top: pxToRem($grid-unit * 2); &[data-fret="3"], &[data-fret="5"], @@ -490,7 +490,7 @@ $note-height: 36; align-items: flex-start; max-width: $screen-med; margin-top: pxToRem($grid-unit * 2); - margin-bottom: pxToRem($grid-unit * 8); + margin-bottom: pxToRem($grid-unit * 2); background-color: var(--background-color-light); padding: pxToRem($grid-unit * 4); border-radius: pxToRem($grid-unit * 4); diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html index f8b0b93..1f93305 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html @@ -3,14 +3,6 @@

Check out the fretboard

-
- - Learn how to break down modes into patterns in our learning hub → - -
- @@ -25,6 +17,87 @@

Learn the theory

[note]="note" [noteExtenderString]="noteExtenderString"> +
+ + + + Break modes down into patterns + + + + +
+ +
+

About Scale Degrees + +

+

+ Each of the 7 notes of a mode or scale is called a scale degree, and has a specific name. +

+
    +
  1. Tonic
    2. +
  2. Supertonic
    3. +
  3. Mediant
    4. +
  4. Subdominant
    5. +
  5. Dominant
    6. +
  6. Submediant
    7. +
  7. Leading note
    8. +
+

+ Notes 1, 3 and 5 of a scale make up the tonic triad, which is simply a chord of three notes built on + the first note of the scale. This is the the most important chord to learn when jamming as it is the home + chord - meaning it's usually the chord that the jam track starts on and returns to often. +

+

+ Scale degrees 1, 3, and 5 can be highlighted on the fretboard to give you a helpful point of reference when + learning + the mode. +

+
+ +
+

About Theoretical Scales + +

+

A theoretical scale or impossible key is a key whose key signature has at least + one double flat (𝄫) or double sharp (x).

+

{{modeDisplayString}} is a theoretical scale and looks unnecessarily complicated. We can + make things simpler!

+

Switch to the enharmonic equivalent note + of {{modeMap[0].displayName | getEnharmonicEquivalent }} to make + the notes easier to read. (It'll sound exactly the same!)

+ Switch to {{modeMap[0].displayName | getEnharmonicEquivalent }} +
+ @@ -33,5 +106,4 @@

Learn the theory

[similarModes]="modeMap | getSimilarModes : mode" [isTheoretical]="modeMap | isTheoreticalScale"> -
diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss index a0e0ae2..bb9e3e5 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss @@ -19,13 +19,96 @@ text-align: center; } -.cta__row { - text-align: center; +.infoButtonRow { + display: flex; + flex-direction: column; + margin-top: pxToRem($grid-unit * 4); + margin-bottom: pxToRem($grid-unit * 8); + justify-content: space-between; + + @media screen and (min-width: $screen-med) { + flex-direction: row; + } +} + +.infoButton { + @include chip_button_base(); + border-color: var(--fretboard-toggle-button-border-color); + margin-bottom: pxToRem($grid-unit * 2); + height: pxToRem(44); + justify-content: space-between; + align-content: center; + + @media screen and (min-width: $screen-med) { + margin-bottom: 0; + height: unset; + } +} + +.infoButton--withChevron { + display: flex; + justify-content: space-between; + align-items: center; + line-height: 1; +} + +.infoButton__svgContainer { + height: pxToRem($grid-unit * 1.5); + display: inline-block; + margin-left: pxToRem($grid-unit / 2); +} + +.infoBlock { + background-color: var(--black); + margin: pxToRem($grid-unit * 4) pxToRem($grid-unit * -4); + padding: pxToRem($grid-unit * 4); + display: flex; + flex-direction: column; } -.learnHub__cta { - @include text_link; - margin-left: auto; - margin-right: auto; - line-height: pxToRem(30); +.infoBlock__title { + @include font_medium; + color: var(--peach); + padding-bottom: pxToRem($grid-unit * 2); + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; } + +.infoBlock__close { + border-width: 0; + background-color: transparent; + height: pxToRem(44); + width: pxToRem(44); + padding: pxToRem($grid-unit); + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + color: var(--grey); +} + +.infoBlock__copy { + @include font_bodyCopy; + color: var(--offwhite); + margin-top: pxToRem($grid-unit * 2); + margin-bottom: pxToRem($grid-unit * 2); +} + +.infoBlock__list { + +} + +.infoBlock__listItem { + @include font_bodyCopy; + color: var(--yellow); + margin-bottom: pxToRem($grid-unit * 1); +} + +.actionButton { + @include hard_button_base(); + margin-bottom: pxToRem($grid-unit * 2); + align-self: flex-start; +} + diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.ts b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.ts index 53db103..c8e3ebc 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.ts +++ b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.ts @@ -1,6 +1,15 @@ import { Component, Input } from '@angular/core'; import { ChordMap, FretMap, Mode, ModeMap } from '../../util/types'; +enum ScaleDegreesToggleText { + hidden = 'About scale degrees', + visible = 'Hide scale degrees info' +} + +enum TheoreticalScalesToggleText { + hidden = 'About theoretical scales', + visible = 'Hide theoretical info' +} @Component({ selector: 'app-fretonator', @@ -17,4 +26,18 @@ export class FretonatorComponent { @Input() note: string; @Input() noteExtenderString: string; @Input() noteExtender: string; + showScaleMapInfo = false; + scaleDegreesToggleText = ScaleDegreesToggleText.hidden; + showTheoreticalScalesInfo = false; + theoreticalScalesToggleText = TheoreticalScalesToggleText.hidden; + + toggleScaleMapInfo() { + this.showScaleMapInfo = !this.showScaleMapInfo; + this.scaleDegreesToggleText = this.showScaleMapInfo ? ScaleDegreesToggleText.visible : ScaleDegreesToggleText.hidden; + } + + toggleTheoreticalScaleInfo() { + this.showTheoreticalScalesInfo = !this.showTheoreticalScalesInfo; + this.theoreticalScalesToggleText = this.showTheoreticalScalesInfo ? TheoreticalScalesToggleText.visible : TheoreticalScalesToggleText.hidden; + } } diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.module.ts b/apps/fretonator-web/src/app/common/fretonator/fretonator.module.ts index c121a7a..37daaf2 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretonator.module.ts +++ b/apps/fretonator-web/src/app/common/fretonator/fretonator.module.ts @@ -12,6 +12,10 @@ import { SymbolToNoteObjPipe } from './symbol-to-note-obj.pipe'; import { GetJamTrackPipe } from './get-jam-track.pipe'; import { FretboardModule } from './fretboard/fretboard.module'; import { RouterModule } from '@angular/router'; +import { CrossModule } from '../svgs/cross/cross.module'; +import { GetEnharmonicEquivalentPipe } from './get-enharmonic-equivalent.pipe'; +import { GetEnharmonicRouterLinkPipe } from './get-enharmonic-router-link.pipe'; +import { ChevronRightModule } from '../svgs/chevron-right/chevron-right.module'; @NgModule({ declarations: [ @@ -20,6 +24,8 @@ import { RouterModule } from '@angular/router'; GetSimilarModesPipe, SymbolToNoteObjPipe, GetJamTrackPipe, + GetEnharmonicEquivalentPipe, + GetEnharmonicRouterLinkPipe ], imports: [ CommonModule, @@ -29,7 +35,9 @@ import { RouterModule } from '@angular/router'; SimilarModesModule, VideoLoaderModule, FretboardModule, - RouterModule + RouterModule, + CrossModule, + ChevronRightModule ], exports: [ FretonatorComponent, diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/get-enharmonic-equivalent.pipe.spec.ts b/apps/fretonator-web/src/app/common/fretonator/get-enharmonic-equivalent.pipe.spec.ts similarity index 100% rename from apps/fretonator-web/src/app/common/fretonator/scale-map/get-enharmonic-equivalent.pipe.spec.ts rename to apps/fretonator-web/src/app/common/fretonator/get-enharmonic-equivalent.pipe.spec.ts diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/get-enharmonic-equivalent.pipe.ts b/apps/fretonator-web/src/app/common/fretonator/get-enharmonic-equivalent.pipe.ts similarity index 87% rename from apps/fretonator-web/src/app/common/fretonator/scale-map/get-enharmonic-equivalent.pipe.ts rename to apps/fretonator-web/src/app/common/fretonator/get-enharmonic-equivalent.pipe.ts index 9fc3b22..2c5e59f 100644 --- a/apps/fretonator-web/src/app/common/fretonator/scale-map/get-enharmonic-equivalent.pipe.ts +++ b/apps/fretonator-web/src/app/common/fretonator/get-enharmonic-equivalent.pipe.ts @@ -1,5 +1,5 @@ import { Pipe, PipeTransform } from '@angular/core'; -import { Enharmonics } from '../../../util/constants'; +import { Enharmonics } from '../../util/constants'; @Pipe({ name: 'getEnharmonicEquivalent' diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/get-enharmonic-router-link.pipe.spec.ts b/apps/fretonator-web/src/app/common/fretonator/get-enharmonic-router-link.pipe.spec.ts similarity index 100% rename from apps/fretonator-web/src/app/common/fretonator/scale-map/get-enharmonic-router-link.pipe.spec.ts rename to apps/fretonator-web/src/app/common/fretonator/get-enharmonic-router-link.pipe.spec.ts diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/get-enharmonic-router-link.pipe.ts b/apps/fretonator-web/src/app/common/fretonator/get-enharmonic-router-link.pipe.ts similarity index 93% rename from apps/fretonator-web/src/app/common/fretonator/scale-map/get-enharmonic-router-link.pipe.ts rename to apps/fretonator-web/src/app/common/fretonator/get-enharmonic-router-link.pipe.ts index c58992f..2794dd8 100644 --- a/apps/fretonator-web/src/app/common/fretonator/scale-map/get-enharmonic-router-link.pipe.ts +++ b/apps/fretonator-web/src/app/common/fretonator/get-enharmonic-router-link.pipe.ts @@ -1,5 +1,5 @@ import { Pipe, PipeTransform } from '@angular/core'; -import { Enharmonics } from '../../../util/constants'; +import { Enharmonics } from '../../util/constants'; @Pipe({ name: 'getEnharmonicRouterLink' diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html index d07de2a..3e15fd4 100644 --- a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.html @@ -9,92 +9,5 @@

-
- - -
- - -
-

Scale Degrees

-
- -
-

About Theoretical Scales - -

-

A theoretical scale or impossible key is a key whose key signature has at least - one double flat (𝄫) or double sharp (x).

-

{{modeDisplayString}} is a theoretical scale and looks unnecessarily complicated. We can - make things simpler!

-

Switch to the enharmonic equivalent note - of {{modeMap[0].displayName | getEnharmonicEquivalent }} to make - the notes easier to read. (It'll sound exactly the same!)

- Switch to {{modeMap[0].displayName | getEnharmonicEquivalent }} - -
- -
-

About Scale Degrees - -

-

- Each of the 7 notes of a mode or scale is called a scale degree, and has a specific name. -

-
    -
  1. Tonic
    2. -
  2. Supertonic
    3. -
  3. Mediant
    4. -
  4. Subdominant
    5. -
  5. Dominant
    6. -
  6. Submediant
    7. -
  7. Leading note
    8. -
-

- Notes 1, 3 and 5 of a scale make up the tonic triad, which is simply a chord of three notes built on - the first note of the scale. This is the the most important chord to learn when jamming as it is the home - chord - meaning it's usually the chord that the jam track starts on and returns to often. -

-

- Scale degrees 1, 3, and 5 can be highlighted on the fretboard to give you a helpful point of reference when learning - the mode. -

-
diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.scss b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.scss index 55b0aa3..596e616 100644 --- a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.scss @@ -13,7 +13,6 @@ @media screen and (min-width: $screen-med) { flex-direction: row; align-items: flex-start; - margin-bottom: pxToRem($grid-unit * 8); } } @@ -31,10 +30,6 @@ } } -.scaleMap__title { - @include info_container_title; -} - .scaleDisplay { display: flex; flex-direction: column; @@ -83,108 +78,9 @@ } } -.buttonRow { - display: flex; - flex-direction: column; - - @media screen and (min-width: $screen-sm) { - flex-direction: row; - } -} - -.button__playScale { - @include chip_button_base(); - margin-top: pxToRem($grid-unit * 2); - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - transition: background-color 0.1s ease-in-out; - - &:hover, &:active { - background-color: var(--purple); - } - - @media screen and (min-width: $screen-sm) { - margin-right: pxToRem($grid-unit * 2); - } - - display: none; -} - -.button__playScale__svg { - display: flex; - height: pxToRem($grid-unit * 2); - width: pxToRem($grid-unit * 2); - margin-right: pxToRem($grid-unit / 2); -} - -.button__infoToggle { - @include chip_button_base(); - border-color: var(--info-toggle-foreground-color); - color: var(--info-toggle-foreground-color); - margin-top: pxToRem($grid-unit * 2); -} - -.infoBlock { - background-color: var(--black); - margin-left: pxToRem($grid-unit * -4); - margin-right: pxToRem($grid-unit * -4); - padding: pxToRem($grid-unit * 4); - margin-bottom: pxToRem($grid-unit * 4); - display: flex; - flex-direction: column; -} - -.infoBlock__title { - @include font_medium; - color: var(--peach); - padding-bottom: pxToRem($grid-unit * 2); - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; -} - -.infoBlock__close { - border-width: 0; - background-color: transparent; - height: pxToRem(44); - width: pxToRem(44); - padding: pxToRem($grid-unit); - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - color: var(--grey); -} - -.infoBlock__copy { - @include font_bodyCopy; - color: var(--offwhite); - margin-top: pxToRem($grid-unit * 2); - margin-bottom: pxToRem($grid-unit * 2); -} - -.infoBlock__list { - -} - -.infoBlock__listItem { - @include font_bodyCopy; - color: var(--yellow); - margin-bottom: pxToRem($grid-unit * 1); -} - .infoHighlight { border-radius: var(--border-radius-chip); padding: pxToRem($grid-unit / 4) pxToRem(9); - color: var(--black); - background-color: var(--peach); -} - -.actionButton { - @include hard_button_base(); - margin-bottom: pxToRem($grid-unit * 2); - align-self: flex-start; + color: var(--info-highlight-color); + background-color: var(--info-highlight-background-color); } diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.ts b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.ts index 98763de..a8f2fed 100644 --- a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.ts +++ b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.ts @@ -1,17 +1,5 @@ import { Component, Input } from '@angular/core'; import { Mode, ModeMap } from '../../../util/types'; -import { NotePlaybackService } from '../../playback/note-playback.service'; -import { GlobalService } from '../../../global.service'; - -enum ScaleDegreesToggleText { - hidden = 'About scale degrees', - visible = 'Hide info' -} - -enum TheoreticalScalesToggleText { - hidden = 'About theoretical scales', - visible = 'Hide info' -} @Component({ selector: 'app-scale-map', @@ -25,32 +13,4 @@ export class ScaleMapComponent { @Input() modeMap: ModeMap; @Input() isTheoretical: boolean; @Input() modeDisplayString: string; - - showScaleMapInfo = false; - showTheoreticalScalesInfo = false; - scaleDegreesToggleText = ScaleDegreesToggleText.hidden; - theoreticalScalesToggleText = TheoreticalScalesToggleText.hidden; - - constructor(public playbackService: NotePlaybackService, - private globalService: GlobalService) { - } - - toggleScaleMapInfo() { - this.showScaleMapInfo = !this.showScaleMapInfo; - this.scaleDegreesToggleText = this.showScaleMapInfo ? ScaleDegreesToggleText.visible : ScaleDegreesToggleText.hidden; - } - - toggleTheoreticalScaleInfo() { - this.showTheoreticalScalesInfo = !this.showTheoreticalScalesInfo; - this.theoreticalScalesToggleText = this.showTheoreticalScalesInfo ? TheoreticalScalesToggleText.visible : TheoreticalScalesToggleText.hidden; - } - - linkClick() { - this.toggleTheoreticalScaleInfo(); - this.globalService.getScrollTarget().scrollIntoView(); - } - - playScale(modeMap: ModeMap) { - this.playbackService.playMode(modeMap); - } } diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.module.ts b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.module.ts index a0a895e..2c35166 100644 --- a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.module.ts +++ b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.module.ts @@ -2,16 +2,19 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ScaleMapComponent } from './scale-map.component'; import { DisplayScaleDegreesPipe } from './display-scale-degrees.pipe'; -import { GetEnharmonicEquivalentPipe } from './get-enharmonic-equivalent.pipe'; +import { GetEnharmonicEquivalentPipe } from '../get-enharmonic-equivalent.pipe'; import { RouterModule } from '@angular/router'; -import { GetEnharmonicRouterLinkPipe } from './get-enharmonic-router-link.pipe'; +import { GetEnharmonicRouterLinkPipe } from '../get-enharmonic-router-link.pipe'; import { CrossModule } from '../../svgs/cross/cross.module'; import { PlayModule } from '../../svgs/play/play.module'; import { ScaleDegreesModule } from '../scale-degrees/scale-degrees.module'; @NgModule({ - declarations: [ScaleMapComponent, DisplayScaleDegreesPipe, GetEnharmonicEquivalentPipe, GetEnharmonicRouterLinkPipe], + declarations: [ + ScaleMapComponent, + DisplayScaleDegreesPipe + ], exports: [ ScaleMapComponent, DisplayScaleDegreesPipe diff --git a/apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.component.html b/apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.component.html new file mode 100644 index 0000000..dd8f0e7 --- /dev/null +++ b/apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.component.html @@ -0,0 +1,3 @@ + + + diff --git a/apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.component.scss b/apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.component.scss new file mode 100644 index 0000000..8e6c40d --- /dev/null +++ b/apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.component.scss @@ -0,0 +1,4 @@ +.svg { + height: 100%; + fill: currentColor; +} diff --git a/apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.component.spec.ts b/apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.component.spec.ts new file mode 100644 index 0000000..dde9170 --- /dev/null +++ b/apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ChevronRightComponent } from './chevron-right.component'; + +describe('ChevronRightComponent', () => { + let component: ChevronRightComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ChevronRightComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ChevronRightComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.component.ts b/apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.component.ts new file mode 100644 index 0000000..a6444ac --- /dev/null +++ b/apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-chevron-right-svg', + templateUrl: './chevron-right.component.html', + styleUrls: ['./chevron-right.component.scss'] +}) +export class ChevronRightComponent { +} diff --git a/apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.module.ts b/apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.module.ts new file mode 100644 index 0000000..c29d31f --- /dev/null +++ b/apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { ChevronRightComponent } from './chevron-right.component'; + + + +@NgModule({ + declarations: [ChevronRightComponent], + exports: [ + ChevronRightComponent + ], + imports: [ + CommonModule + ] +}) +export class ChevronRightModule { } diff --git a/apps/fretonator-web/src/styles.scss b/apps/fretonator-web/src/styles.scss index 74abc56..d507060 100644 --- a/apps/fretonator-web/src/styles.scss +++ b/apps/fretonator-web/src/styles.scss @@ -56,6 +56,9 @@ --footer-title-color: var(--peach); --footer-list-link-color: var(--yellow); --footer-small-button-accent-color: var(--yellow); + + --info-highlight-color: var(--black); + --info-highlight-background-color: var(--peach); } [color-mode="light"] { From be464d0d3c47f5e6f25bf4ba16a6088261773e40 Mon Sep 17 00:00:00 2001 From: Samuel Degueldre Date: Sun, 5 Jul 2020 16:29:45 +0200 Subject: [PATCH 12/22] refactor stored property initialization to use a common method --- .../fretboard/fretboard.component.html | 6 +-- .../fretboard/fretboard.component.ts | 44 +++++-------------- 2 files changed, 13 insertions(+), 37 deletions(-) diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html index 8c63de5..86de23b 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html @@ -84,9 +84,9 @@ [tonicActive]="highlightedDegrees.has(scaleDegree.tonic)" [mediantActive]="highlightedDegrees.has(scaleDegree.mediant)" [dominantActive]="highlightedDegrees.has(scaleDegree.dominant)" - (setTonicHighlight)="toggleHighlightTonic()" - (setMediantHighlight)="toggleHighlightMediant()" - (setDominantHighlight)="toggleHighlightDominant()" + (setTonicHighlight)="toggleHighlight(scaleDegree.tonic)" + (setMediantHighlight)="toggleHighlight(scaleDegree.mediant)" + (setDominantHighlight)="toggleHighlight(scaleDegree.dominant)" > diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts index e3c1546..ee2c131 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts @@ -47,31 +47,10 @@ export class FretboardComponent implements OnChanges, OnInit { } ngOnInit() { - const _fretMode = this.localStorage.getItem(StorageKeys.fretMode); - switch (_fretMode) { - case 'twelve': - this.fretMode = FretModes.twelve; - break; - case 'twentyFour': - this.fretMode = FretModes.twentyFour; - break; - default: - this.fretMode = FretModes.twelve; - } - - const _orientation = this.localStorage.getItem(StorageKeys.orientation); - switch (_orientation) { - case 'right': - this.orientation = Orientations.right; - break; - case 'left': - this.orientation = Orientations.left; - break; - default: - this.orientation = Orientations.right; - } + this.loadPropFromStorage(StorageKeys.fretMode, 'fretMode', FretModes.twelve); + this.loadPropFromStorage(StorageKeys.orientation, 'orientation', Orientations.right); - this.toggleHighlightTonic(); + this.toggleHighlight(ScaleDegree.tonic); this.configureFretboard(); } @@ -88,7 +67,8 @@ export class FretboardComponent implements OnChanges, OnInit { get Orientations() { return Orientations; } - + // TODO: any reason this method is not capitalized like the other enum getters? + // also, any reason it's singular rather than plural? get scaleDegree() { return ScaleDegree; } @@ -101,7 +81,6 @@ export class FretboardComponent implements OnChanges, OnInit { setOrientation(orientation: Orientations) { this.orientation = orientation; this.localStorage.setItem(StorageKeys.orientation, this.orientation); - this.configureFretboard(); } @@ -111,15 +90,12 @@ export class FretboardComponent implements OnChanges, OnInit { this.configureFretboard(); } - toggleHighlightTonic() { - this.highlightedDegrees.has(ScaleDegree.tonic) ? this.highlightedDegrees.delete(ScaleDegree.tonic) : this.highlightedDegrees.add(ScaleDegree.tonic); - } - - toggleHighlightMediant() { - this.highlightedDegrees.has(ScaleDegree.mediant) ? this.highlightedDegrees.delete(ScaleDegree.mediant) : this.highlightedDegrees.add(ScaleDegree.mediant); + toggleHighlight(degree: ScaleDegree) { + this.highlightedDegrees.has(degree) ? this.highlightedDegrees.delete(degree) : this.highlightedDegrees.add(degree); } - toggleHighlightDominant() { - this.highlightedDegrees.has(ScaleDegree.dominant) ? this.highlightedDegrees.delete(ScaleDegree.dominant) : this.highlightedDegrees.add(ScaleDegree.dominant); + loadPropFromStorage(storageKey: string, propName: string, defaultValue: T) { + const value = this.localStorage.getItem(storageKey); + this[propName] = value || defaultValue; } } From 465b3ffcd61dffdec66de49411618787a89d58e5 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Sun, 5 Jul 2020 19:28:29 +0100 Subject: [PATCH 13/22] Toggle for numbers/note names functionality --- .../fret-map.service.testConstants.ts | 301 +++++++++--------- .../app/common/fret-map/fret-map.service.ts | 9 +- .../fretboard/fretboard.component.html | 36 ++- .../fretboard/fretboard.component.scss | 47 ++- .../fretboard/fretboard.component.ts | 34 +- .../fretonator/fretonator.component.html | 2 +- .../common/fretonator/fretonator.component.ts | 9 + .../scale-degrees.component.scss | 1 + .../home-index.component.spec.ts.snap | 120 ++++--- apps/fretonator-web/src/app/util/constants.ts | 18 +- apps/fretonator-web/src/app/util/types.ts | 5 +- 11 files changed, 326 insertions(+), 256 deletions(-) diff --git a/apps/fretonator-web/src/app/common/fret-map/fret-map.service.testConstants.ts b/apps/fretonator-web/src/app/common/fret-map/fret-map.service.testConstants.ts index df5e515..6deb8a8 100644 --- a/apps/fretonator-web/src/app/common/fret-map/fret-map.service.testConstants.ts +++ b/apps/fretonator-web/src/app/common/fret-map/fret-map.service.testConstants.ts @@ -1,4 +1,5 @@ import { ChordType, FretMap, ModeMap } from '../../util/types'; +import { ScaleDegrees } from '../../util/constants'; export const aSharpPentatonicMajor: ModeMap = [ { @@ -1037,159 +1038,159 @@ export const aSharpMajor: ModeMap = [ ]; export const cIonianFretMappings: FretMap = [ - { string: 'A', fret: 0, displayName: 'A', degree: 'submediant' }, - { string: 'A', fret: 2, displayName: 'B', degree: 'leadingTone' }, - { string: 'A', fret: 3, displayName: 'C', degree: 'tonic' }, - { string: 'A', fret: 5, displayName: 'D', degree: 'supertonic' }, - { string: 'A', fret: 7, displayName: 'E', degree: 'mediant' }, - { string: 'A', fret: 8, displayName: 'F', degree: 'subdominant' }, - { string: 'A', fret: 10, displayName: 'G', degree: 'dominant' }, - { string: 'A', fret: 12, displayName: 'A', degree: 'submediant' }, - { string: 'A', fret: 14, displayName: 'B', degree: 'leadingTone' }, - { string: 'A', fret: 15, displayName: 'C', degree: 'tonic' }, - { string: 'A', fret: 17, displayName: 'D', degree: 'supertonic' }, - { string: 'A', fret: 19, displayName: 'E', degree: 'mediant' }, - { string: 'A', fret: 20, displayName: 'F', degree: 'subdominant' }, - { string: 'A', fret: 22, displayName: 'G', degree: 'dominant' }, - { string: 'A', fret: 24, displayName: 'A', degree: 'submediant' }, - { string: 'B', fret: 0, displayName: 'B', degree: 'leadingTone' }, - { string: 'B', fret: 1, displayName: 'C', degree: 'tonic' }, - { string: 'B', fret: 3, displayName: 'D', degree: 'supertonic' }, - { string: 'B', fret: 5, displayName: 'E', degree: 'mediant' }, - { string: 'B', fret: 6, displayName: 'F', degree: 'subdominant' }, - { string: 'B', fret: 8, displayName: 'G', degree: 'dominant' }, - { string: 'B', fret: 10, displayName: 'A', degree: 'submediant' }, - { string: 'B', fret: 12, displayName: 'B', degree: 'leadingTone' }, - { string: 'B', fret: 13, displayName: 'C', degree: 'tonic' }, - { string: 'B', fret: 15, displayName: 'D', degree: 'supertonic' }, - { string: 'B', fret: 17, displayName: 'E', degree: 'mediant' }, - { string: 'B', fret: 18, displayName: 'F', degree: 'subdominant' }, - { string: 'B', fret: 20, displayName: 'G', degree: 'dominant' }, - { string: 'B', fret: 22, displayName: 'A', degree: 'submediant' }, - { string: 'B', fret: 24, displayName: 'B', degree: 'leadingTone' }, - { string: 'D', fret: 0, displayName: 'D', degree: 'supertonic' }, - { string: 'D', fret: 2, displayName: 'E', degree: 'mediant' }, - { string: 'D', fret: 3, displayName: 'F', degree: 'subdominant' }, - { string: 'D', fret: 5, displayName: 'G', degree: 'dominant' }, - { string: 'D', fret: 7, displayName: 'A', degree: 'submediant' }, - { string: 'D', fret: 9, displayName: 'B', degree: 'leadingTone' }, - { string: 'D', fret: 10, displayName: 'C', degree: 'tonic' }, - { string: 'D', fret: 12, displayName: 'D', degree: 'supertonic' }, - { string: 'D', fret: 14, displayName: 'E', degree: 'mediant' }, - { string: 'D', fret: 15, displayName: 'F', degree: 'subdominant' }, - { string: 'D', fret: 17, displayName: 'G', degree: 'dominant' }, - { string: 'D', fret: 19, displayName: 'A', degree: 'submediant' }, - { string: 'D', fret: 21, displayName: 'B', degree: 'leadingTone' }, - { string: 'D', fret: 22, displayName: 'C', degree: 'tonic' }, - { string: 'D', fret: 24, displayName: 'D', degree: 'supertonic' }, - { string: 'E', fret: 0, displayName: 'E', degree: 'mediant' }, - { string: 'E', fret: 1, displayName: 'F', degree: 'subdominant' }, - { string: 'E', fret: 3, displayName: 'G', degree: 'dominant' }, - { string: 'E', fret: 5, displayName: 'A', degree: 'submediant' }, - { string: 'E', fret: 7, displayName: 'B', degree: 'leadingTone' }, - { string: 'E', fret: 8, displayName: 'C', degree: 'tonic' }, - { string: 'E', fret: 10, displayName: 'D', degree: 'supertonic' }, - { string: 'E', fret: 12, displayName: 'E', degree: 'mediant' }, - { string: 'E', fret: 13, displayName: 'F', degree: 'subdominant' }, - { string: 'E', fret: 15, displayName: 'G', degree: 'dominant' }, - { string: 'E', fret: 17, displayName: 'A', degree: 'submediant' }, - { string: 'E', fret: 19, displayName: 'B', degree: 'leadingTone' }, - { string: 'E', fret: 20, displayName: 'C', degree: 'tonic' }, - { string: 'E', fret: 22, displayName: 'D', degree: 'supertonic' }, - { string: 'E', fret: 24, displayName: 'E', degree: 'mediant' }, - { string: 'G', fret: 0, displayName: 'G', degree: 'dominant' }, - { string: 'G', fret: 2, displayName: 'A', degree: 'submediant' }, - { string: 'G', fret: 4, displayName: 'B', degree: 'leadingTone' }, - { string: 'G', fret: 5, displayName: 'C', degree: 'tonic' }, - { string: 'G', fret: 7, displayName: 'D', degree: 'supertonic' }, - { string: 'G', fret: 9, displayName: 'E', degree: 'mediant' }, - { string: 'G', fret: 10, displayName: 'F', degree: 'subdominant' }, - { string: 'G', fret: 12, displayName: 'G', degree: 'dominant' }, - { string: 'G', fret: 14, displayName: 'A', degree: 'submediant' }, - { string: 'G', fret: 16, displayName: 'B', degree: 'leadingTone' }, - { string: 'G', fret: 17, displayName: 'C', degree: 'tonic' }, - { string: 'G', fret: 19, displayName: 'D', degree: 'supertonic' }, - { string: 'G', fret: 21, displayName: 'E', degree: 'mediant' }, - { string: 'G', fret: 22, displayName: 'F', degree: 'subdominant' }, - { string: 'G', fret: 24, displayName: 'G', degree: 'dominant' } + { string: 'A', fret: 0, displayName: 'A', degree: ScaleDegrees.submediant, degreeNumber: 6 }, + { string: 'A', fret: 2, displayName: 'B', degree: ScaleDegrees.leadingTone, degreeNumber: 7 }, + { string: 'A', fret: 3, displayName: 'C', degree: ScaleDegrees.tonic, degreeNumber: 1 }, + { string: 'A', fret: 5, displayName: 'D', degree: ScaleDegrees.supertonic, degreeNumber: 2 }, + { string: 'A', fret: 7, displayName: 'E', degree: ScaleDegrees.mediant, degreeNumber: 3 }, + { string: 'A', fret: 8, displayName: 'F', degree: ScaleDegrees.subdominant, degreeNumber: 4 }, + { string: 'A', fret: 10, displayName: 'G', degree: ScaleDegrees.dominant, degreeNumber: 5 }, + { string: 'A', fret: 12, displayName: 'A', degree: ScaleDegrees.submediant, degreeNumber: 6 }, + { string: 'A', fret: 14, displayName: 'B', degree: ScaleDegrees.leadingTone, degreeNumber: 7 }, + { string: 'A', fret: 15, displayName: 'C', degree: ScaleDegrees.tonic, degreeNumber: 1 }, + { string: 'A', fret: 17, displayName: 'D', degree: ScaleDegrees.supertonic, degreeNumber: 2 }, + { string: 'A', fret: 19, displayName: 'E', degree: ScaleDegrees.mediant, degreeNumber: 3 }, + { string: 'A', fret: 20, displayName: 'F', degree: ScaleDegrees.subdominant, degreeNumber: 4 }, + { string: 'A', fret: 22, displayName: 'G', degree: ScaleDegrees.dominant, degreeNumber: 5 }, + { string: 'A', fret: 24, displayName: 'A', degree: ScaleDegrees.submediant, degreeNumber: 6 }, + { string: 'B', fret: 0, displayName: 'B', degree: ScaleDegrees.leadingTone, degreeNumber: 7 }, + { string: 'B', fret: 1, displayName: 'C', degree: ScaleDegrees.tonic, degreeNumber: 1 }, + { string: 'B', fret: 3, displayName: 'D', degree: ScaleDegrees.supertonic, degreeNumber: 2 }, + { string: 'B', fret: 5, displayName: 'E', degree: ScaleDegrees.mediant, degreeNumber: 3 }, + { string: 'B', fret: 6, displayName: 'F', degree: ScaleDegrees.subdominant, degreeNumber: 4 }, + { string: 'B', fret: 8, displayName: 'G', degree: ScaleDegrees.dominant, degreeNumber: 5 }, + { string: 'B', fret: 10, displayName: 'A', degree: ScaleDegrees.submediant, degreeNumber: 6 }, + { string: 'B', fret: 12, displayName: 'B', degree: ScaleDegrees.leadingTone, degreeNumber: 7 }, + { string: 'B', fret: 13, displayName: 'C', degree: ScaleDegrees.tonic, degreeNumber: 1 }, + { string: 'B', fret: 15, displayName: 'D', degree: ScaleDegrees.supertonic, degreeNumber: 2 }, + { string: 'B', fret: 17, displayName: 'E', degree: ScaleDegrees.mediant, degreeNumber: 3 }, + { string: 'B', fret: 18, displayName: 'F', degree: ScaleDegrees.subdominant, degreeNumber: 4 }, + { string: 'B', fret: 20, displayName: 'G', degree: ScaleDegrees.dominant, degreeNumber: 5 }, + { string: 'B', fret: 22, displayName: 'A', degree: ScaleDegrees.submediant, degreeNumber: 6 }, + { string: 'B', fret: 24, displayName: 'B', degree: ScaleDegrees.leadingTone, degreeNumber: 7 }, + { string: 'D', fret: 0, displayName: 'D', degree: ScaleDegrees.supertonic, degreeNumber: 2 }, + { string: 'D', fret: 2, displayName: 'E', degree: ScaleDegrees.mediant, degreeNumber: 3 }, + { string: 'D', fret: 3, displayName: 'F', degree: ScaleDegrees.subdominant, degreeNumber: 4 }, + { string: 'D', fret: 5, displayName: 'G', degree: ScaleDegrees.dominant, degreeNumber: 5 }, + { string: 'D', fret: 7, displayName: 'A', degree: ScaleDegrees.submediant, degreeNumber: 6 }, + { string: 'D', fret: 9, displayName: 'B', degree: ScaleDegrees.leadingTone, degreeNumber: 7 }, + { string: 'D', fret: 10, displayName: 'C', degree: ScaleDegrees.tonic, degreeNumber: 1 }, + { string: 'D', fret: 12, displayName: 'D', degree: ScaleDegrees.supertonic, degreeNumber: 2 }, + { string: 'D', fret: 14, displayName: 'E', degree: ScaleDegrees.mediant, degreeNumber: 3 }, + { string: 'D', fret: 15, displayName: 'F', degree: ScaleDegrees.subdominant, degreeNumber: 4 }, + { string: 'D', fret: 17, displayName: 'G', degree: ScaleDegrees.dominant, degreeNumber: 5 }, + { string: 'D', fret: 19, displayName: 'A', degree: ScaleDegrees.submediant, degreeNumber: 6 }, + { string: 'D', fret: 21, displayName: 'B', degree: ScaleDegrees.leadingTone, degreeNumber: 7 }, + { string: 'D', fret: 22, displayName: 'C', degree: ScaleDegrees.tonic, degreeNumber: 1 }, + { string: 'D', fret: 24, displayName: 'D', degree: ScaleDegrees.supertonic, degreeNumber: 2 }, + { string: 'E', fret: 0, displayName: 'E', degree: ScaleDegrees.mediant, degreeNumber: 3 }, + { string: 'E', fret: 1, displayName: 'F', degree: ScaleDegrees.subdominant, degreeNumber: 4 }, + { string: 'E', fret: 3, displayName: 'G', degree: ScaleDegrees.dominant, degreeNumber: 5 }, + { string: 'E', fret: 5, displayName: 'A', degree: ScaleDegrees.submediant, degreeNumber: 6 }, + { string: 'E', fret: 7, displayName: 'B', degree: ScaleDegrees.leadingTone, degreeNumber: 7 }, + { string: 'E', fret: 8, displayName: 'C', degree: ScaleDegrees.tonic, degreeNumber: 1 }, + { string: 'E', fret: 10, displayName: 'D', degree: ScaleDegrees.supertonic, degreeNumber: 2 }, + { string: 'E', fret: 12, displayName: 'E', degree: ScaleDegrees.mediant, degreeNumber: 3 }, + { string: 'E', fret: 13, displayName: 'F', degree: ScaleDegrees.subdominant, degreeNumber: 4 }, + { string: 'E', fret: 15, displayName: 'G', degree: ScaleDegrees.dominant, degreeNumber: 5 }, + { string: 'E', fret: 17, displayName: 'A', degree: ScaleDegrees.submediant, degreeNumber: 6 }, + { string: 'E', fret: 19, displayName: 'B', degree: ScaleDegrees.leadingTone, degreeNumber: 7 }, + { string: 'E', fret: 20, displayName: 'C', degree: ScaleDegrees.tonic, degreeNumber: 1 }, + { string: 'E', fret: 22, displayName: 'D', degree: ScaleDegrees.supertonic, degreeNumber: 2 }, + { string: 'E', fret: 24, displayName: 'E', degree: ScaleDegrees.mediant, degreeNumber: 3 }, + { string: 'G', fret: 0, displayName: 'G', degree: ScaleDegrees.dominant, degreeNumber: 5 }, + { string: 'G', fret: 2, displayName: 'A', degree: ScaleDegrees.submediant, degreeNumber: 6 }, + { string: 'G', fret: 4, displayName: 'B', degree: ScaleDegrees.leadingTone, degreeNumber: 7 }, + { string: 'G', fret: 5, displayName: 'C', degree: ScaleDegrees.tonic, degreeNumber: 1 }, + { string: 'G', fret: 7, displayName: 'D', degree: ScaleDegrees.supertonic, degreeNumber: 2 }, + { string: 'G', fret: 9, displayName: 'E', degree: ScaleDegrees.mediant, degreeNumber: 3 }, + { string: 'G', fret: 10, displayName: 'F', degree: ScaleDegrees.subdominant, degreeNumber: 4 }, + { string: 'G', fret: 12, displayName: 'G', degree: ScaleDegrees.dominant, degreeNumber: 5 }, + { string: 'G', fret: 14, displayName: 'A', degree: ScaleDegrees.submediant, degreeNumber: 6 }, + { string: 'G', fret: 16, displayName: 'B', degree: ScaleDegrees.leadingTone, degreeNumber: 7 }, + { string: 'G', fret: 17, displayName: 'C', degree: ScaleDegrees.tonic, degreeNumber: 1 }, + { string: 'G', fret: 19, displayName: 'D', degree: ScaleDegrees.supertonic, degreeNumber: 2 }, + { string: 'G', fret: 21, displayName: 'E', degree: ScaleDegrees.mediant, degreeNumber: 3 }, + { string: 'G', fret: 22, displayName: 'F', degree: ScaleDegrees.subdominant, degreeNumber: 4 }, + { string: 'G', fret: 24, displayName: 'G', degree: ScaleDegrees.dominant, degreeNumber: 5 } ]; export const dIonianFretMappings: FretMap = [ - { string: 'A', fret: 0, displayName: 'A', degree: 'dominant' }, - { string: 'A', fret: 2, displayName: 'B', degree: 'submediant' }, - { string: 'A', fret: 4, displayName: 'C#', degree: 'leadingTone' }, - { string: 'A', fret: 5, displayName: 'D', degree: 'tonic' }, - { string: 'A', fret: 7, displayName: 'E', degree: 'supertonic' }, - { string: 'A', fret: 9, displayName: 'F#', degree: 'mediant' }, - { string: 'A', fret: 10, displayName: 'G', degree: 'subdominant' }, - { string: 'A', fret: 12, displayName: 'A', degree: 'dominant' }, - { string: 'A', fret: 14, displayName: 'B', degree: 'submediant' }, - { string: 'A', fret: 16, displayName: 'C#', degree: 'leadingTone' }, - { string: 'A', fret: 17, displayName: 'D', degree: 'tonic' }, - { string: 'A', fret: 19, displayName: 'E', degree: 'supertonic' }, - { string: 'A', fret: 21, displayName: 'F#', degree: 'mediant' }, - { string: 'A', fret: 22, displayName: 'G', degree: 'subdominant' }, - { string: 'A', fret: 24, displayName: 'A', degree: 'dominant' }, - { string: 'B', fret: 0, displayName: 'B', degree: 'submediant' }, - { string: 'B', fret: 2, displayName: 'C#', degree: 'leadingTone' }, - { string: 'B', fret: 3, displayName: 'D', degree: 'tonic' }, - { string: 'B', fret: 5, displayName: 'E', degree: 'supertonic' }, - { string: 'B', fret: 7, displayName: 'F#', degree: 'mediant' }, - { string: 'B', fret: 8, displayName: 'G', degree: 'subdominant' }, - { string: 'B', fret: 10, displayName: 'A', degree: 'dominant' }, - { string: 'B', fret: 12, displayName: 'B', degree: 'submediant' }, - { string: 'B', fret: 14, displayName: 'C#', degree: 'leadingTone' }, - { string: 'B', fret: 15, displayName: 'D', degree: 'tonic' }, - { string: 'B', fret: 17, displayName: 'E', degree: 'supertonic' }, - { string: 'B', fret: 19, displayName: 'F#', degree: 'mediant' }, - { string: 'B', fret: 20, displayName: 'G', degree: 'subdominant' }, - { string: 'B', fret: 22, displayName: 'A', degree: 'dominant' }, - { string: 'B', fret: 24, displayName: 'B', degree: 'submediant' }, - { string: 'D', fret: 0, displayName: 'D', degree: 'tonic' }, - { string: 'D', fret: 2, displayName: 'E', degree: 'supertonic' }, - { string: 'D', fret: 4, displayName: 'F#', degree: 'mediant' }, - { string: 'D', fret: 5, displayName: 'G', degree: 'subdominant' }, - { string: 'D', fret: 7, displayName: 'A', degree: 'dominant' }, - { string: 'D', fret: 9, displayName: 'B', degree: 'submediant' }, - { string: 'D', fret: 11, displayName: 'C#', degree: 'leadingTone' }, - { string: 'D', fret: 12, displayName: 'D', degree: 'tonic' }, - { string: 'D', fret: 14, displayName: 'E', degree: 'supertonic' }, - { string: 'D', fret: 16, displayName: 'F#', degree: 'mediant' }, - { string: 'D', fret: 17, displayName: 'G', degree: 'subdominant' }, - { string: 'D', fret: 19, displayName: 'A', degree: 'dominant' }, - { string: 'D', fret: 21, displayName: 'B', degree: 'submediant' }, - { string: 'D', fret: 23, displayName: 'C#', degree: 'leadingTone' }, - { string: 'D', fret: 24, displayName: 'D', degree: 'tonic' }, - { string: 'E', fret: 0, displayName: 'E', degree: 'supertonic' }, - { string: 'E', fret: 2, displayName: 'F#', degree: 'mediant' }, - { string: 'E', fret: 3, displayName: 'G', degree: 'subdominant' }, - { string: 'E', fret: 5, displayName: 'A', degree: 'dominant' }, - { string: 'E', fret: 7, displayName: 'B', degree: 'submediant' }, - { string: 'E', fret: 9, displayName: 'C#', degree: 'leadingTone' }, - { string: 'E', fret: 10, displayName: 'D', degree: 'tonic' }, - { string: 'E', fret: 12, displayName: 'E', degree: 'supertonic' }, - { string: 'E', fret: 14, displayName: 'F#', degree: 'mediant' }, - { string: 'E', fret: 15, displayName: 'G', degree: 'subdominant' }, - { string: 'E', fret: 17, displayName: 'A', degree: 'dominant' }, - { string: 'E', fret: 19, displayName: 'B', degree: 'submediant' }, - { string: 'E', fret: 21, displayName: 'C#', degree: 'leadingTone' }, - { string: 'E', fret: 22, displayName: 'D', degree: 'tonic' }, - { string: 'E', fret: 24, displayName: 'E', degree: 'supertonic' }, - { string: 'G', fret: 0, displayName: 'G', degree: 'subdominant' }, - { string: 'G', fret: 2, displayName: 'A', degree: 'dominant' }, - { string: 'G', fret: 4, displayName: 'B', degree: 'submediant' }, - { string: 'G', fret: 6, displayName: 'C#', degree: 'leadingTone' }, - { string: 'G', fret: 7, displayName: 'D', degree: 'tonic' }, - { string: 'G', fret: 9, displayName: 'E', degree: 'supertonic' }, - { string: 'G', fret: 11, displayName: 'F#', degree: 'mediant' }, - { string: 'G', fret: 12, displayName: 'G', degree: 'subdominant' }, - { string: 'G', fret: 14, displayName: 'A', degree: 'dominant' }, - { string: 'G', fret: 16, displayName: 'B', degree: 'submediant' }, - { string: 'G', fret: 18, displayName: 'C#', degree: 'leadingTone' }, - { string: 'G', fret: 19, displayName: 'D', degree: 'tonic' }, - { string: 'G', fret: 21, displayName: 'E', degree: 'supertonic' }, - { string: 'G', fret: 23, displayName: 'F#', degree: 'mediant' }, - { string: 'G', fret: 24, displayName: 'G', degree: 'subdominant' } + { string: 'A', fret: 0, displayName: 'A', degree: ScaleDegrees.dominant, degreeNumber: 5 }, + { string: 'A', fret: 2, displayName: 'B', degree: ScaleDegrees.submediant, degreeNumber: 6 }, + { string: 'A', fret: 4, displayName: 'C#', degree: ScaleDegrees.leadingTone, degreeNumber: 7 }, + { string: 'A', fret: 5, displayName: 'D', degree: ScaleDegrees.tonic, degreeNumber: 1 }, + { string: 'A', fret: 7, displayName: 'E', degree: ScaleDegrees.supertonic, degreeNumber: 2 }, + { string: 'A', fret: 9, displayName: 'F#', degree: ScaleDegrees.mediant, degreeNumber: 3 }, + { string: 'A', fret: 10, displayName: 'G', degree: ScaleDegrees.subdominant, degreeNumber: 4 }, + { string: 'A', fret: 12, displayName: 'A', degree: ScaleDegrees.dominant, degreeNumber: 5 }, + { string: 'A', fret: 14, displayName: 'B', degree: ScaleDegrees.submediant, degreeNumber: 6 }, + { string: 'A', fret: 16, displayName: 'C#', degree: ScaleDegrees.leadingTone, degreeNumber: 7 }, + { string: 'A', fret: 17, displayName: 'D', degree: ScaleDegrees.tonic, degreeNumber: 1 }, + { string: 'A', fret: 19, displayName: 'E', degree: ScaleDegrees.supertonic, degreeNumber: 2 }, + { string: 'A', fret: 21, displayName: 'F#', degree: ScaleDegrees.mediant, degreeNumber: 3 }, + { string: 'A', fret: 22, displayName: 'G', degree: ScaleDegrees.subdominant, degreeNumber: 4 }, + { string: 'A', fret: 24, displayName: 'A', degree: ScaleDegrees.dominant, degreeNumber: 5 }, + { string: 'B', fret: 0, displayName: 'B', degree: ScaleDegrees.submediant, degreeNumber: 6 }, + { string: 'B', fret: 2, displayName: 'C#', degree: ScaleDegrees.leadingTone, degreeNumber: 7 }, + { string: 'B', fret: 3, displayName: 'D', degree: ScaleDegrees.tonic, degreeNumber: 1 }, + { string: 'B', fret: 5, displayName: 'E', degree: ScaleDegrees.supertonic, degreeNumber: 2 }, + { string: 'B', fret: 7, displayName: 'F#', degree: ScaleDegrees.mediant, degreeNumber: 3 }, + { string: 'B', fret: 8, displayName: 'G', degree: ScaleDegrees.subdominant, degreeNumber: 4 }, + { string: 'B', fret: 10, displayName: 'A', degree: ScaleDegrees.dominant, degreeNumber: 5 }, + { string: 'B', fret: 12, displayName: 'B', degree: ScaleDegrees.submediant, degreeNumber: 6 }, + { string: 'B', fret: 14, displayName: 'C#', degree: ScaleDegrees.leadingTone, degreeNumber: 7 }, + { string: 'B', fret: 15, displayName: 'D', degree: ScaleDegrees.tonic, degreeNumber: 1 }, + { string: 'B', fret: 17, displayName: 'E', degree: ScaleDegrees.supertonic, degreeNumber: 2 }, + { string: 'B', fret: 19, displayName: 'F#', degree: ScaleDegrees.mediant, degreeNumber: 3 }, + { string: 'B', fret: 20, displayName: 'G', degree: ScaleDegrees.subdominant, degreeNumber: 4 }, + { string: 'B', fret: 22, displayName: 'A', degree: ScaleDegrees.dominant, degreeNumber: 5 }, + { string: 'B', fret: 24, displayName: 'B', degree: ScaleDegrees.submediant, degreeNumber: 6 }, + { string: 'D', fret: 0, displayName: 'D', degree: ScaleDegrees.tonic, degreeNumber: 1 }, + { string: 'D', fret: 2, displayName: 'E', degree: ScaleDegrees.supertonic, degreeNumber: 2 }, + { string: 'D', fret: 4, displayName: 'F#', degree: ScaleDegrees.mediant, degreeNumber: 3 }, + { string: 'D', fret: 5, displayName: 'G', degree: ScaleDegrees.subdominant, degreeNumber: 4 }, + { string: 'D', fret: 7, displayName: 'A', degree: ScaleDegrees.dominant, degreeNumber: 5 }, + { string: 'D', fret: 9, displayName: 'B', degree: ScaleDegrees.submediant, degreeNumber: 6 }, + { string: 'D', fret: 11, displayName: 'C#', degree: ScaleDegrees.leadingTone, degreeNumber: 7 }, + { string: 'D', fret: 12, displayName: 'D', degree: ScaleDegrees.tonic, degreeNumber: 1 }, + { string: 'D', fret: 14, displayName: 'E', degree: ScaleDegrees.supertonic, degreeNumber: 2 }, + { string: 'D', fret: 16, displayName: 'F#', degree: ScaleDegrees.mediant, degreeNumber: 3 }, + { string: 'D', fret: 17, displayName: 'G', degree: ScaleDegrees.subdominant, degreeNumber: 4 }, + { string: 'D', fret: 19, displayName: 'A', degree: ScaleDegrees.dominant, degreeNumber: 5 }, + { string: 'D', fret: 21, displayName: 'B', degree: ScaleDegrees.submediant, degreeNumber: 6 }, + { string: 'D', fret: 23, displayName: 'C#', degree: ScaleDegrees.leadingTone, degreeNumber: 7 }, + { string: 'D', fret: 24, displayName: 'D', degree: ScaleDegrees.tonic, degreeNumber: 1 }, + { string: 'E', fret: 0, displayName: 'E', degree: ScaleDegrees.supertonic, degreeNumber: 2 }, + { string: 'E', fret: 2, displayName: 'F#', degree: ScaleDegrees.mediant, degreeNumber: 3 }, + { string: 'E', fret: 3, displayName: 'G', degree: ScaleDegrees.subdominant, degreeNumber: 4 }, + { string: 'E', fret: 5, displayName: 'A', degree: ScaleDegrees.dominant, degreeNumber: 5 }, + { string: 'E', fret: 7, displayName: 'B', degree: ScaleDegrees.submediant, degreeNumber: 6 }, + { string: 'E', fret: 9, displayName: 'C#', degree: ScaleDegrees.leadingTone, degreeNumber: 7 }, + { string: 'E', fret: 10, displayName: 'D', degree: ScaleDegrees.tonic, degreeNumber: 1 }, + { string: 'E', fret: 12, displayName: 'E', degree: ScaleDegrees.supertonic, degreeNumber: 2 }, + { string: 'E', fret: 14, displayName: 'F#', degree: ScaleDegrees.mediant, degreeNumber: 3 }, + { string: 'E', fret: 15, displayName: 'G', degree: ScaleDegrees.subdominant, degreeNumber: 4 }, + { string: 'E', fret: 17, displayName: 'A', degree: ScaleDegrees.dominant, degreeNumber: 5 }, + { string: 'E', fret: 19, displayName: 'B', degree: ScaleDegrees.submediant, degreeNumber: 6 }, + { string: 'E', fret: 21, displayName: 'C#', degree: ScaleDegrees.leadingTone, degreeNumber: 7 }, + { string: 'E', fret: 22, displayName: 'D', degree: ScaleDegrees.tonic, degreeNumber: 1 }, + { string: 'E', fret: 24, displayName: 'E', degree: ScaleDegrees.supertonic, degreeNumber: 2 }, + { string: 'G', fret: 0, displayName: 'G', degree: ScaleDegrees.subdominant, degreeNumber: 4 }, + { string: 'G', fret: 2, displayName: 'A', degree: ScaleDegrees.dominant, degreeNumber: 5 }, + { string: 'G', fret: 4, displayName: 'B', degree: ScaleDegrees.submediant, degreeNumber: 6 }, + { string: 'G', fret: 6, displayName: 'C#', degree: ScaleDegrees.leadingTone, degreeNumber: 7 }, + { string: 'G', fret: 7, displayName: 'D', degree: ScaleDegrees.tonic, degreeNumber: 1 }, + { string: 'G', fret: 9, displayName: 'E', degree: ScaleDegrees.supertonic, degreeNumber: 2 }, + { string: 'G', fret: 11, displayName: 'F#', degree: ScaleDegrees.mediant, degreeNumber: 3 }, + { string: 'G', fret: 12, displayName: 'G', degree: ScaleDegrees.subdominant, degreeNumber: 4 }, + { string: 'G', fret: 14, displayName: 'A', degree: ScaleDegrees.dominant, degreeNumber: 5 }, + { string: 'G', fret: 16, displayName: 'B', degree: ScaleDegrees.submediant, degreeNumber: 6 }, + { string: 'G', fret: 18, displayName: 'C#', degree: ScaleDegrees.leadingTone, degreeNumber: 7 }, + { string: 'G', fret: 19, displayName: 'D', degree: ScaleDegrees.tonic, degreeNumber: 1 }, + { string: 'G', fret: 21, displayName: 'E', degree: ScaleDegrees.supertonic, degreeNumber: 2 }, + { string: 'G', fret: 23, displayName: 'F#', degree: ScaleDegrees.mediant, degreeNumber: 3 }, + { string: 'G', fret: 24, displayName: 'G', degree: ScaleDegrees.subdominant, degreeNumber: 4 } ]; export const cMajorPentatonicChordMap = [ diff --git a/apps/fretonator-web/src/app/common/fret-map/fret-map.service.ts b/apps/fretonator-web/src/app/common/fret-map/fret-map.service.ts index a8cc290..3b53df5 100644 --- a/apps/fretonator-web/src/app/common/fret-map/fret-map.service.ts +++ b/apps/fretonator-web/src/app/common/fret-map/fret-map.service.ts @@ -17,7 +17,7 @@ import { ModeSelectorObjects, NoteToStringAndFretMap, Octave, - ScaleDegrees, + ScaleDegreeNames, StandardModePatterns } from '../../util/constants'; import { JamTracksData } from '../../data/jamTracks'; @@ -330,16 +330,17 @@ export class FretMapService { const modeMap = origModeMap.map((noteObject, index) => ({ ...noteObject, - degree: ScaleDegrees[index] + degree: ScaleDegreeNames[index], })); return modeMap - .map((note) => + .map((note, index) => NoteToStringAndFretMap[this.convertNoteToFretMapKey(note)] .map((thisNote: NoteObject) => ({ ...thisNote, displayName: note.displayName, - degree: note.degree + degree: note.degree, + degreeNumber: index + 1 }))) .flat() .reduce((acc, curr) => [...acc, curr], []) diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html index 4b7c0eb..846bbc5 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html @@ -9,7 +9,7 @@ [attr.data-string]="string" [attr.data-fret]="fret" [attr.data-degree]="(fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.degree" - [attr.data-display-note]="(fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.displayName" + [attr.data-display-note]="noteNameDisplay === NoteDisplays.noteNames ? ((fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.displayName) : ((fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.degreeNumber)" [attr.data-mode]="mode" [attr.data-highlight]="highlightedDegrees.has((fretMap | getFretFromFretMap: stringName:fret:stringNamesAreCaseSensitive)?.degree)" (click)="playbackService.playNote(stringName, fret)" @@ -32,7 +32,6 @@ [class.fretboard__flip]="orientation === Orientations.left" [class.fretboard__wide]="fretMode === FretModes.twentyFour"> -
@@ -77,21 +76,32 @@
-
-
- Highlight scale degrees +
+
+ Highlight scale degrees + +
+ + +
-
- Configure fretboard +
+ Configure fretboard (); + highlightedDegrees = new Set(); + noteNameDisplay = NoteDisplays.noteNames; constructor(public playbackService: NotePlaybackService, private localStorage: AbstractDataService) { @@ -49,8 +56,9 @@ export class FretboardComponent implements OnChanges, OnInit { ngOnInit() { this.loadPropFromStorage(StorageKeys.fretMode, 'fretMode', FretModes.twelve); this.loadPropFromStorage(StorageKeys.orientation, 'orientation', Orientations.right); + this.loadPropFromStorage(StorageKeys.noteNameDisplay, 'noteNameDisplay', NoteDisplays.noteNames); - this.toggleHighlight(ScaleDegree.tonic); + this.toggleHighlight(ScaleDegrees.tonic); this.configureFretboard(); } @@ -67,10 +75,13 @@ export class FretboardComponent implements OnChanges, OnInit { get Orientations() { return Orientations; } - // TODO: any reason this method is not capitalized like the other enum getters? - // also, any reason it's singular rather than plural? - get scaleDegree() { - return ScaleDegree; + + get ScaleDegrees() { + return ScaleDegrees; + } + + get NoteDisplays() { + return NoteDisplays; } configureFretboard() { @@ -90,10 +101,15 @@ export class FretboardComponent implements OnChanges, OnInit { this.configureFretboard(); } - toggleHighlight(degree: ScaleDegree) { + toggleHighlight(degree: ScaleDegrees) { this.highlightedDegrees.has(degree) ? this.highlightedDegrees.delete(degree) : this.highlightedDegrees.add(degree); } + toggleNoteDisplay(displayType: NoteDisplays) { + this.noteNameDisplay = displayType; + this.localStorage.setItem(StorageKeys.noteNameDisplay, displayType); + } + loadPropFromStorage(storageKey: string, propName: string, defaultValue: T) { const value = this.localStorage.getItem(storageKey); this[propName] = value || defaultValue; diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html index 1f93305..f61b427 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html @@ -93,7 +93,7 @@

About Theoretical Scales of {{modeMap[0].displayName | getEnharmonicEquivalent }} to make the notes easier to read. (It'll sound exactly the same!)

Switch to {{modeMap[0].displayName | getEnharmonicEquivalent }}

diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.ts b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.ts index c8e3ebc..d8c2a69 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.ts +++ b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.ts @@ -1,5 +1,6 @@ import { Component, Input } from '@angular/core'; import { ChordMap, FretMap, Mode, ModeMap } from '../../util/types'; +import { GlobalService } from '../../global.service'; enum ScaleDegreesToggleText { hidden = 'About scale degrees', @@ -31,6 +32,9 @@ export class FretonatorComponent { showTheoreticalScalesInfo = false; theoreticalScalesToggleText = TheoreticalScalesToggleText.hidden; + constructor(private globalService: GlobalService) { + } + toggleScaleMapInfo() { this.showScaleMapInfo = !this.showScaleMapInfo; this.scaleDegreesToggleText = this.showScaleMapInfo ? ScaleDegreesToggleText.visible : ScaleDegreesToggleText.hidden; @@ -40,4 +44,9 @@ export class FretonatorComponent { this.showTheoreticalScalesInfo = !this.showTheoreticalScalesInfo; this.theoreticalScalesToggleText = this.showTheoreticalScalesInfo ? TheoreticalScalesToggleText.visible : TheoreticalScalesToggleText.hidden; } + + enharmonicLinkClick() { + this.toggleTheoreticalScaleInfo(); + this.globalService.getScrollTarget().scrollIntoView(); + } } diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.scss b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.scss index 4e1d557..6df0711 100644 --- a/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.scss @@ -11,6 +11,7 @@ @media screen and (min-width: $screen-med) { justify-content: flex-start; + height: pxToRem(46); } } diff --git a/apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap b/apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap index 0b35d1d..1e04571 100644 --- a/apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap +++ b/apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap @@ -1179,13 +1179,14 @@ exports[`HomeIndexComponent should create 1`] = `
+
Highlight scale degrees @@ -1210,12 +1211,26 @@ exports[`HomeIndexComponent should create 1`] = `
+
+ + +
Configure fretboard @@ -1256,16 +1271,6 @@ exports[`HomeIndexComponent should create 1`] = `
-
- - Learn how to break down modes into patterns in our learning hub → - -
@@ -1383,58 +1388,45 @@ exports[`HomeIndexComponent should create 1`] = ` B

-
- - -
- - -
-

- Scale Degrees -

-
- - +
+ + + + Break modes down into patterns + + + + + + + + +
+ +
Date: Sun, 5 Jul 2020 20:18:30 +0100 Subject: [PATCH 14/22] Added some tests for new code, fixed some old tests, some tests are skipped --- .../fretonator/fretonator.component.html | 4 +- .../fretonator/fretonator.component.spec.ts | 26 ++++++- .../scale-degrees.component.html | 21 ++--- .../scale-degrees.component.scss | 1 + .../scale-degrees.component.spec.ts | 77 +++++++++++++++++-- .../scale-degrees/scale-degrees.component.ts | 1 - .../scale-map/scale-map.component.spec.ts | 27 +------ .../home-index.component.spec.ts.snap | 27 ++++--- 8 files changed, 128 insertions(+), 56 deletions(-) diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html index f61b427..b1f9a2c 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html +++ b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.html @@ -18,12 +18,12 @@

Learn the theory

[noteExtenderString]="noteExtenderString">
- - + - 5 + >5
diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.scss b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.scss index 6df0711..90a16e3 100644 --- a/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.scss @@ -30,6 +30,7 @@ cursor: pointer; background-color: var(--note-background); color: var(--note-color); + border-width: 0; &:last-child { margin-right: 0; diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.spec.ts b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.spec.ts index 85539c6..7e58ebb 100644 --- a/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.spec.ts +++ b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.spec.ts @@ -1,20 +1,45 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { ScaleDegreesComponent } from './scale-degrees.component'; +import { Component, DebugElement } from '@angular/core'; +import { By } from '@angular/platform-browser'; +import { ScaleDegreesModule } from './scale-degrees.module'; describe('ScaleDegreesComponent', () => { - let component: ScaleDegreesComponent; - let fixture: ComponentFixture; + const selectors = { + tonicBlob: By.css('.tonic'), + mediantBlob: By.css('.mediant'), + dominantBlob: By.css('.dominant') + }; + + const classNames = { + tonicSelected: 'degreesDisplay__degree--tonic', + mediantSelected: 'degreesDisplay__degree--mediant', + dominantSelected: 'degreesDisplay__degree--dominant' + }; + + @Component({ + selector: 'app-scale-degrees-spec', + template: ` + + ` + }) + class ScaleDegreesComponentSpec { + } + + let component: ScaleDegreesComponentSpec; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ScaleDegreesComponent ] + declarations: [ScaleDegreesComponentSpec], + imports: [ScaleDegreesModule] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(ScaleDegreesComponent); + fixture = TestBed.createComponent(ScaleDegreesComponentSpec); component = fixture.componentInstance; fixture.detectChanges(); }); @@ -22,4 +47,46 @@ describe('ScaleDegreesComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + describe('clickTonic()', () => { + let tonicBlob: DebugElement; + + beforeEach(() => { + tonicBlob = fixture.debugElement.query(selectors.tonicBlob); + tonicBlob.nativeElement.click(); + fixture.detectChanges(); + }); + + it('removes the active class to the tonic degree display on first click', () => { + expect(tonicBlob.classes[classNames.tonicSelected]).toBeFalsy(); + }); + }); + + xdescribe('clickMediant()', () => { + let mediantBlob: DebugElement; + + beforeEach(() => { + mediantBlob = fixture.debugElement.query(selectors.mediantBlob); + mediantBlob.nativeElement.click(); + fixture.detectChanges(); + }); + + it('adds the active class to the mediant degree display on first click', () => { + expect(mediantBlob.classes[classNames.mediantSelected]).toBeTruthy(); + }); + }); + + xdescribe('clickDominant()', () => { + let dominantBlob: DebugElement; + + beforeEach(() => { + dominantBlob = fixture.debugElement.query(selectors.dominantBlob); + dominantBlob.nativeElement.click(); + fixture.detectChanges(); + }); + + it('adds the active class to the dominant degree display on first click', () => { + expect(dominantBlob.classes[classNames.dominantSelected]).toBeTruthy(); + }); + }); }); diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.ts b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.ts index bac138e..4154ca4 100644 --- a/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.ts +++ b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.ts @@ -18,7 +18,6 @@ export class ScaleDegreesComponent implements OnInit { ngOnInit(): void { } - clickTonic() { this.setTonicHighlight.emit(); } diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.spec.ts b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.spec.ts index 72e3345..b58f846 100644 --- a/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.spec.ts +++ b/apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.spec.ts @@ -1,17 +1,10 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { ScaleMapComponent } from './scale-map.component'; -import { Component, DebugElement } from '@angular/core'; +import { Component } from '@angular/core'; import { ScaleMapModule } from './scale-map.module'; -import { By } from '@angular/platform-browser'; describe('ScaleMapComponent', () => { - - const selectors = { - toggleScaleInfo: By.css('.button__infoToggle--scaleDegrees'), - scaleMapDegreesInfo: By.css('.infoBlock--scaleDegrees') - }; - @Component({ selector: 'app-scale-map-spec', template: ` @@ -41,23 +34,5 @@ describe('ScaleMapComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); - - describe('toggleScaleMapInfo()', () => { - let toggleScaleButton: DebugElement; - - beforeEach(() => { - toggleScaleButton = fixture.debugElement.query(selectors.toggleScaleInfo); - toggleScaleButton.nativeElement.click(); - fixture.detectChanges(); - }); - - it('should show the scale map info', () => { - expect(fixture.debugElement.query(selectors.scaleMapDegreesInfo)).toBeTruthy(); - }); - - it('should update the text on the toggle button', () => { - expect(toggleScaleButton.nativeElement.textContent.trim()).toBe('Hide info'); - }); - }); }); diff --git a/apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap b/apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap index 1e04571..ea2a190 100644 --- a/apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap +++ b/apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap @@ -1194,21 +1194,24 @@ exports[`HomeIndexComponent should create 1`] = `
- 1 - - +
- Note names + Note names
@@ -1397,7 +1400,7 @@ exports[`HomeIndexComponent should create 1`] = `

- How to use the Fretonator - Fretonator: the ultimate interactive free guitar theory tool + Fretonator: the ultimate interactive free guitar theory tool

-
    -
  1. Choose a starting note
    2. -
  2. Pick a mode
    3. -
  3. Check out the fretboard
    4. -
  4. Have a jam!
    5. -
  5. Learn the theory
    6. -
- -
diff --git a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss index 916d0f6..12840c9 100644 --- a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss +++ b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.scss @@ -3,10 +3,6 @@ @import '../../../../styles/functions'; @import '../../../../styles/typography'; -.hidden { - display: none; -} - .hero { background-color: var(--hero-background-color); display: block; @@ -17,23 +13,6 @@ margin-right: auto; } -.hero__grid { - display: flex; - flex-direction: column; - list-style: none; - text-align: center; - padding: 0; - position: relative; - max-width: $max-width; - margin-left: auto; - margin-right: auto; - - - @media screen and (min-width: $screen-sm) { - flex-direction: row; - } -} - .hero__title { font-family: var(--font-family-main); display: block; @@ -45,92 +24,6 @@ text-align: center; font-weight: var(--font-weight-bold); position: relative; - height: pxToRem($grid-unit * 6); - - span { - position: absolute; - right: 0; - text-align: center; - top: 0; - left: 0; - font-weight: var(--font-weight-bold); - } -} - -.hidden { - display: none; -} - -.hero__block { - font-family: var(--font-family-main); - letter-spacing: var(--letter-spacing-display); - font-size: pxToRem(14); - text-transform: uppercase; - text-align: center; - font-weight: var(--font-weight-bold); - padding-top: pxToRem($grid-unit * 2); - padding-left: pxToRem($grid-unit * 2); - padding-right: pxToRem($grid-unit * 2); - padding-bottom: pxToRem($grid-unit * 4); - margin: pxToRem($grid-unit); - box-shadow: 8px 8px 0 0 var(--hero-block-box-shadow-color); - - @media screen and (min-width: $screen-sm) { - flex-basis: 20%; - - &:first-child { - margin-left: pxToRem($grid-unit * 2); - } - - &:last-child { - margin-right: pxToRem($grid-unit * 2); - } - } - - &:before { - content: attr(data-step); - @include hard_button_base(); - box-shadow: 4px 4px 0 0 var(--offwhite); - display: block; - width: pxToRem($grid-unit * 6); - margin: pxToRem($grid-unit * 2) auto pxToRem($grid-unit * 4) auto; - cursor: default; - } -} - -.hero__text--step1 { - background-color: var(--hero-block-background-step-1); -} - -.hero__text--step2 { - background-color: var(--hero-block-background-step-2); -} - -.hero__text--step3 { - background-color: var(--hero-block-background-step-3); -} - -.hero__text--step4 { - background-color: var(--hero-block-background-step-4); -} - -.hero__text--step5 { - background-color: var(--hero-block-background-step-5); -} - -.hero__toggleHowTo { - @include chip_button_base(); - margin-left: auto; - margin-right: auto; - display: block; - color: var(--hero-toggle-foreground-color); - background-color: var(--hero-toggle-background-color); - border-color: var(--hero-toggle-foreground-color); - margin-top: pxToRem($grid-unit * 4); - - &:focus { - border-color: transparent; - } } .modeSelector__container { diff --git a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.spec.ts b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.spec.ts index 160e883..63c88e2 100644 --- a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.spec.ts +++ b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.spec.ts @@ -10,15 +10,6 @@ import { ActivatedRoute } from '@angular/router'; import { of } from 'rxjs'; describe('HomeIndexComponent', () => { - const selectors = { - howToToggle: By.css('.hero__toggleHowTo'), - howToList: By.css('.hero__grid') - }; - - const classNames = { - hideHowTo: 'hidden' - }; - @Component({ selector: 'app-home-index-spec', template: ` @@ -66,12 +57,4 @@ describe('HomeIndexComponent', () => { expect(component).toBeTruthy(); expect(fixture).toMatchSnapshot(); }); - - it('should toggle the how-to section', () => { - const howToToggle = fixture.debugElement.query(selectors.howToToggle); - const howToList = fixture.debugElement.query(selectors.howToList); - howToToggle.nativeElement.click(); - fixture.detectChanges(); - expect(howToList.classes[classNames.hideHowTo]).toBeTruthy(); - }); }); diff --git a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.ts b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.ts index bc00272..0730f47 100644 --- a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.ts +++ b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.ts @@ -22,7 +22,6 @@ export class HomeIndexComponent implements OnInit, AfterViewInit { mode: Mode = Mode.ionian; modeSelectorObjects = ModeSelectorObjects; octave = Octave; - showHowTo; constructor( private title: Title, @@ -38,18 +37,6 @@ export class HomeIndexComponent implements OnInit, AfterViewInit { ngOnInit(): void { this.activatedRoute.params.subscribe(() => this.onRouteChange()); this.setHomePageMeta(); - - const _showHowTo = this.localStorage.getItem('showHowTo'); - switch (_showHowTo) { - case false: - this.showHowTo = false; - break; - case true: - this.showHowTo = true; - break; - default: - this.showHowTo = true; - } } ngAfterViewInit(): void { @@ -77,11 +64,6 @@ export class HomeIndexComponent implements OnInit, AfterViewInit { this.setHomePageMeta(); } - toggleHowTo() { - this.showHowTo = !this.showHowTo; - this.localStorage.setItem('showHowTo', this.showHowTo); - } - setHomePageMeta() { const pageDescription = this.metaService.generateHomePageMetaDescription(this.note, this.noteExtenderString, this.mode); const pageTitle = this.metaService.generateHomePageTitle(this.note, this.noteExtenderString, this.mode); diff --git a/apps/fretonator-web/src/styles.scss b/apps/fretonator-web/src/styles.scss index d507060..1523de0 100644 --- a/apps/fretonator-web/src/styles.scss +++ b/apps/fretonator-web/src/styles.scss @@ -45,9 +45,6 @@ --header-link-color: var(--peach); --hero-background-color: var(--black); --hero-title-color: var(--offwhite-alt); - --hero-block-box-shadow-color: var(--grey); - --hero-toggle-foreground-color: var(--offwhite-alt); - --hero-toggle-background-color: var(--black); --footer-background: var(--black); --footer-border-color: var(--peach); @@ -75,12 +72,6 @@ --stripe-banner-background: var(--peach); - --hero-block-background-step-1: var(--peach); - --hero-block-background-step-2: var(--yellow); - --hero-block-background-step-3: var(--purple); - --hero-block-background-step-4: var(--turquoise); - --hero-block-background-step-5: var(--blue); - --string-color: var(--black); --string-label-color: var(--black); --nut-color: #1a1a1a; @@ -160,13 +151,6 @@ --text-link-hover-color: #FD7C21; --stripe-banner-background: var(--peach); - - --hero-block-background-step-1: var(--peach); - --hero-block-background-step-2: var(--coral); - --hero-block-background-step-3: var(--mint); - --hero-block-background-step-4: var(--coral); - --hero-block-background-step-5: var(--peach); - --string-color: var(--offwhite-alt); --string-label-color: var(--offwhite-alt); --nut-color: #d3d3d3; From 2d883443ed16b613b9ea7b88227aaaabd979af96 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Sun, 5 Jul 2020 21:12:12 +0100 Subject: [PATCH 19/22] Changed colour of arrow SVGs for dark mode/light mode --- .../app/common/fretonator/fretboard/fretboard.component.scss | 2 +- apps/fretonator-web/src/styles.scss | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss index 644ece5..6fd2932 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss @@ -421,7 +421,7 @@ $note-height: 36; &:before, &:after { - content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 512 512'%3E%3Cpath fill='%233993dd' d='M319.1 217c20.2 20.2 19.9 53.2-.6 73.7s-53.5 20.8-73.7.6l-190-190c-20.1-20.2-19.8-53.2.7-73.7S109 6.8 129.1 27l190 190z'/%3E%3Cpath fill='%233993dd' d='M319.1 290.5c20.2-20.2 19.9-53.2-.6-73.7s-53.5-20.8-73.7-.6l-190 190c-20.2 20.2-19.9 53.2.6 73.7s53.5 20.8 73.7.6l190-190z'/%3E%3C/svg%3E"); + content: var(--fretboard-arrow-svg); } diff --git a/apps/fretonator-web/src/styles.scss b/apps/fretonator-web/src/styles.scss index 1523de0..60aafdf 100644 --- a/apps/fretonator-web/src/styles.scss +++ b/apps/fretonator-web/src/styles.scss @@ -80,6 +80,7 @@ --fretboard-play-cta-color: var(--grey); --fret-marker-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23dbdae0' /%3E%3C/svg%3E"); + --fretboard-arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 512 512'%3E%3Cpath fill='%233993dd' d='M319.1 217c20.2 20.2 19.9 53.2-.6 73.7s-53.5 20.8-73.7.6l-190-190c-20.1-20.2-19.8-53.2.7-73.7S109 6.8 129.1 27l190 190z'/%3E%3Cpath fill='%233993dd' d='M319.1 290.5c20.2-20.2 19.9-53.2-.6-73.7s-53.5-20.8-73.7-.6l-190 190c-20.2 20.2-19.9 53.2.6 73.7s53.5 20.8 73.7.6l190-190z'/%3E%3C/svg%3E");; --note-color: var(--yellow); --note-background: var(--black); @@ -159,6 +160,7 @@ --fretboard-play-cta-color: #d3d3d3; --fret-marker-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23474350'/%3E%3C/svg%3E"); + --fretboard-arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 512 512'%3E%3Cpath fill='%23ee9198' d='M319.1 217c20.2 20.2 19.9 53.2-.6 73.7s-53.5 20.8-73.7.6l-190-190c-20.1-20.2-19.8-53.2.7-73.7S109 6.8 129.1 27l190 190z'/%3E%3Cpath fill='%23ee9198' d='M319.1 290.5c20.2-20.2 19.9-53.2-.6-73.7s-53.5-20.8-73.7-.6l-190 190c-20.2 20.2-19.9 53.2.6 73.7s53.5 20.8 73.7.6l190-190z'/%3E%3C/svg%3E"); --note-color: var(--black); --note-background: var(--offwhite); From 6ca0bcae6f2e99da172e11abfb0979ec1a2b3f0f Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Sun, 5 Jul 2020 21:18:37 +0100 Subject: [PATCH 20/22] Fixed display of chevron button --- .../src/app/common/fretonator/fretonator.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss index bb9e3e5..2fe5bac 100644 --- a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss +++ b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss @@ -47,7 +47,7 @@ .infoButton--withChevron { display: flex; - justify-content: space-between; + justify-content: center; align-items: center; line-height: 1; } From 7a39d15688811325da73d40e5741c722714d3682 Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Sun, 5 Jul 2020 21:23:38 +0100 Subject: [PATCH 21/22] Updated link to github on about page --- .../src/app/pages/about/about-index/about-index.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/fretonator-web/src/app/pages/about/about-index/about-index.component.html b/apps/fretonator-web/src/app/pages/about/about-index/about-index.component.html index 904efed..004e920 100644 --- a/apps/fretonator-web/src/app/pages/about/about-index/about-index.component.html +++ b/apps/fretonator-web/src/app/pages/about/about-index/about-index.component.html @@ -15,7 +15,7 @@

Thanks for checking out the Fretonator!

understanding the chord theory behind the modes, and most importantly - having a jam.

The code for the Fretonator is available to view on GitHub and I am gratefully welcoming feedback from musicians, pull requests from software engineers, and anything else you are willing to contribute. From e4bc83e8af0f56c5aeadc70b7032011453ffca8a Mon Sep 17 00:00:00 2001 From: Salma Alam-Naylor Date: Sun, 5 Jul 2020 21:25:11 +0100 Subject: [PATCH 22/22] Remove constructor from scale-degrees --- .../fretonator/scale-degrees/scale-degrees.component.ts | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.ts b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.ts index 4154ca4..131f401 100644 --- a/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.ts +++ b/apps/fretonator-web/src/app/common/fretonator/scale-degrees/scale-degrees.component.ts @@ -1,11 +1,11 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ selector: 'app-scale-degrees', templateUrl: './scale-degrees.component.html', styleUrls: ['./scale-degrees.component.scss'] }) -export class ScaleDegreesComponent implements OnInit { +export class ScaleDegreesComponent { @Output() setTonicHighlight = new EventEmitter(); @Output() setMediantHighlight = new EventEmitter(); @Output() setDominantHighlight = new EventEmitter(); @@ -13,11 +13,6 @@ export class ScaleDegreesComponent implements OnInit { @Input() mediantActive; @Input() dominantActive; - constructor() { } - - ngOnInit(): void { - } - clickTonic() { this.setTonicHighlight.emit(); }