Split out scale degrees info to a separate component

Author: Salma Alam-Naylor

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

@@ -54,79 +54,8 @@
 </div>
 
 <div class="infoContainer">
-
-  <div class="infoContainer__row">
-    <div class="degrees" *ngIf="mode | displayScaleDegrees">
-      <h4 class="degreesDisplay__title">Degrees</h4>
-      <div class="degreesDisplay">
-        <span class="degreesDisplay__degree degreesDisplay__degree--tonic">1</span>
-        <span class="degreesDisplay__degree degreesDisplay__degree--mediant"
-        >3</span
-        >
-        <span class="degreesDisplay__degree degreesDisplay__degree--dominant"
-        >5</span>
-      </div>
-      <button class="scaleDegrees__toggle"
-              aria-label="Scale Degrees Info Toggle"
-              aria-controls="scaleDegreesInfo"
-              role="switch"
-              type="button"
-              [attr.aria-checked]="showScaleDegreesInfo"
-              (click)="toggleScaleDegreesInfo()">{{scaleDegreesToggleText}}
-      </button>
-    </div>
-
-    <div class="scaleDisplay">
-      <h4 class="scaleDisplay__title">Scale</h4>
-      <div class="scaleDisplay__notes">
-        <ng-container *ngFor="let scaleNote of scale; let i = index">
-          <h5 class="scaleDisplay__note">
-            {{ scaleNote }}
-            <span *ngIf="i < scale.length - 1"> - </span>
-          </h5>
-        </ng-container>
-      </div>
-    </div>
-  </div>
-
-  <div class="scaleDegreesInfo"
-       id="scaleDegreesInfo"
-       *ngIf="showScaleDegreesInfo">
-    <h2 class="scaleDegreesInfo__title">About Scale Degrees
-      <button class="scaleDegreesInfo__close"
-              aria-label="Scale Degrees Info Toggle"
-              aria-controls="scaleDegreesInfo"
-              role="switch"
-              type="button"
-              (click)="toggleScaleDegreesInfo()">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
-          <path fill="#474350" fill-rule="evenodd"
-                d="M14 1.41L12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7z"></path>
-        </svg>
-      </button>
-    </h2>
-    <p class="scaleDegreesInfo__copy">
-      Each of the 7 notes of a mode or scale is called a <em>scale degree</em>, and has a specific name.
-    </p>
-    <ol class="scaleDegreesInfo__list">
-      <li class="scaleDegreesInfo__listItem">Tonic</li>
-      <li class="scaleDegreesInfo__listItem">Supertonic</li>
-      <li class="scaleDegreesInfo__listItem">Mediant</li>
-      <li class="scaleDegreesInfo__listItem">Subdominant</li>
-      <li class="scaleDegreesInfo__listItem">Dominant</li>
-      <li class="scaleDegreesInfo__listItem">Submediant</li>
-      <li class="scaleDegreesInfo__listItem">Leading note</li>
-    </ol>
-    <p class="scaleDegreesInfo__copy">
-      Notes 1, 3 and 5 of a scale make up the <em>tonic triad</em>, 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 <em>home</em>
-      chord - meaning it's usually the chord that the jam track starts on and returns to often.
-    </p>
-    <p class="scaleDegreesInfo__copy">
-      Scale degrees 1, 3, and 5 are highlighted on the fretboard to give you a helpful point of reference when learning
-      the mode.
-    </p>
-  </div>
+  <app-scale-map [mode]="mode"
+                 [scale]="scale"></app-scale-map>
 
   <app-interval-map [intervalMap]="intervalMap"></app-interval-map>
 

apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss

@@ -230,109 +230,6 @@
   }
 }
 
-.infoContainer__row {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: pxToRem($grid-unit * 4);
-  flex-direction: column;
-
-  @media screen and (min-width: $screen-med) {
-    flex-direction: row;
-    margin-bottom: 0;
-  }
-}
-
-.degrees {
-  margin-left: auto;
-  margin-right: auto;
-  order: 1;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-  margin-bottom: pxToRem($grid-unit * 8);
-
-  @media screen and (min-width: $screen-med) {
-    order: 2;
-    flex-basis: 50%;
-    align-items: flex-end;
-  }
-}
-
-.degreesDisplay__title {
-  @include info_container_title;
-}
-
-.degreesDisplay {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-}
-
-.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);
-}
-
-.scaleDisplay {
-  height: pxToRem($grid-unit * 10);
-  order: 2;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  @media screen and (min-width: $screen-med) {
-    order: 1;
-    flex-basis: 50%;
-    margin-top: 0;
-    align-items: flex-start;
-  }
-}
-
-.scaleDisplay__title {
-  @include info_container_title;
-}
-
-.scaleDisplay__note {
-  display: inline;
-  font-size: pxToRem(20);
-  font-family: var(--font-family-main);
-  font-weight: var(--font-weight-bold);
-}
-
 .arrowHint {
   position: relative;
   display: block;
@@ -354,61 +251,3 @@
     display: none;
   }
 }
-
-.scaleDegrees__toggle {
-  @include chip_button_base();
-  border-color: var(--grey);
-  color: var(--grey);
-  margin-top: pxToRem($grid-unit * 2);
-}
-
-.scaleDegreesInfo {
-  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);
-}
-
-.scaleDegreesInfo__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;
-}
-
-.scaleDegreesInfo__close {
-  border-width: 0;
-  background-color: transparent;
-  height: pxToRem(44);
-  width: pxToRem(44);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-
-  svg {
-    height: 50%;
-    width: 50%;
-  }
-}
-
-.scaleDegreesInfo__copy {
-  @include font_bodyCopy();
-  color: var(--offwhite);
-  margin-top: pxToRem($grid-unit * 2);
-  margin-bottom: pxToRem($grid-unit * 2);
-}
-
-.scaleDegreesInfo__list {
-
-}
-
-.scaleDegreesInfo__listItem {
-  @include font_bodyCopy();
-  color: var(--yellow);
-  margin-bottom: pxToRem($grid-unit * 1);
-}

apps/fretonator-web/src/app/common/fretonator/fretonator.component.ts

@@ -1,11 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { ChordMap, FretMap, Mode, Scale } from '../../util/types';
 
-enum ScaleDegreesToggleText {
-  hidden = 'What is this?',
-  visible = 'Hide info'
-}
-
 @Component({
   selector: 'app-fretonator',
   templateUrl: './fretonator.component.html',
@@ -18,15 +13,8 @@ export class FretonatorComponent implements OnInit {
   @Input() chordMap: ChordMap;
   @Input() mode: Mode;
   frets = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-  showScaleDegreesInfo = false;
-  scaleDegreesToggleText = ScaleDegreesToggleText.hidden;
 
   constructor() {}
 
   ngOnInit(): void {}
-
-  toggleScaleDegreesInfo() {
-    this.showScaleDegreesInfo = !this.showScaleDegreesInfo;
-    this.scaleDegreesToggleText = this.showScaleDegreesInfo ? ScaleDegreesToggleText.visible : ScaleDegreesToggleText.hidden;
-  }
 }

apps/fretonator-web/src/app/common/fretonator/fretonator.module.ts

@@ -2,20 +2,20 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FretonatorComponent } from './fretonator.component';
 import { GetFretFromFretMapPipe } from './get-fret-from-fret-map.pipe';
-import { DisplayScaleDegreesPipe } from './display-scale-degrees.pipe';
 import { ChordMapModule } from './chord-map/chord-map.module';
 import { IntervalMapModule } from './interval-map/interval-map.module';
+import { ScaleMapModule } from './scale-map/scale-map.module';
 
 @NgModule({
   declarations: [
     FretonatorComponent,
     GetFretFromFretMapPipe,
-    DisplayScaleDegreesPipe,
   ],
   imports: [
     CommonModule,
     ChordMapModule,
-    IntervalMapModule
+    IntervalMapModule,
+    ScaleMapModule
   ],
   exports: [
     FretonatorComponent

apps/fretonator-web/src/app/common/fretonator/display-scale-degrees.pipe.spec.ts renamed to apps/fretonator-web/src/app/common/fretonator/scale-map/display-scale-degrees.pipe.spec.ts

@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import { Mode } from '../../util/types';
+import { Mode } from '../../../util/types';
 
 @Pipe({
   name: 'displayScaleDegrees'

apps/fretonator-web/src/app/common/fretonator/display-scale-degrees.pipe.ts renamed to apps/fretonator-web/src/app/common/fretonator/scale-map/display-scale-degrees.pipe.ts

@@ -0,0 +1,72 @@
+  <div class="scaleMap__row">
+    <div class="scaleMap__degrees" *ngIf="mode | displayScaleDegrees">
+      <h4 class="scaleMap__title">Degrees</h4>
+      <div class="degreesDisplay">
+        <span class="degreesDisplay__degree degreesDisplay__degree--tonic">1</span>
+        <span class="degreesDisplay__degree degreesDisplay__degree--mediant"
+        >3</span
+        >
+        <span class="degreesDisplay__degree degreesDisplay__degree--dominant"
+        >5</span>
+      </div>
+      <button class="scaleDegrees__toggle"
+              aria-label="Scale Degrees Info Toggle"
+              aria-controls="scaleMapInfo"
+              role="switch"
+              type="button"
+              [attr.aria-checked]="showscaleMapInfo"
+              (click)="togglescaleMapInfo()">{{scaleDegreesToggleText}}
+      </button>
+    </div>
+
+    <div class="scaleDisplay">
+      <h4 class="scaleDisplay__title">Scale</h4>
+      <div class="scaleDisplay__notes">
+        <ng-container *ngFor="let scaleNote of scale; let i = index">
+          <h5 class="scaleDisplay__note">
+            {{ scaleNote }}
+            <span *ngIf="i < scale.length - 1"> - </span>
+          </h5>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+
+  <div class="scaleMapInfo"
+       id="scaleMapInfo"
+       *ngIf="showscaleMapInfo">
+    <h2 class="scaleMapInfo__title">About Scale Degrees
+      <button class="scaleMapInfo__close"
+              aria-label="Scale Degrees Info Toggle"
+              aria-controls="scaleMapInfo"
+              role="switch"
+              type="button"
+              (click)="togglescaleMapInfo()">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
+          <path fill="#474350" fill-rule="evenodd"
+                d="M14 1.41L12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7z"></path>
+        </svg>
+      </button>
+    </h2>
+    <p class="scaleMapInfo__copy">
+      Each of the 7 notes of a mode or scale is called a <em>scale degree</em>, and has a specific name.
+    </p>
+    <ol class="scaleMapInfo__list">
+      <li class="scaleMapInfo__listItem">Tonic</li>
+      <li class="scaleMapInfo__listItem">Supertonic</li>
+      <li class="scaleMapInfo__listItem">Mediant</li>
+      <li class="scaleMapInfo__listItem">Subdominant</li>
+      <li class="scaleMapInfo__listItem">Dominant</li>
+      <li class="scaleMapInfo__listItem">Submediant</li>
+      <li class="scaleMapInfo__listItem">Leading note</li>
+    </ol>
+    <p class="scaleMapInfo__copy">
+      Notes 1, 3 and 5 of a scale make up the <em>tonic triad</em>, 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 <em>home</em>
+      chord - meaning it's usually the chord that the jam track starts on and returns to often.
+    </p>
+    <p class="scaleMapInfo__copy">
+      Scale degrees 1, 3, and 5 are highlighted on the fretboard to give you a helpful point of reference when learning
+      the mode.
+    </p>
+  </div>