Added a play button for playScale and standardised some css vars

Salma Alam-Naylor · Salma Alam-Naylor · commit 2a263fa74e5b · 2020-06-16T02:49:04.000+01:00
diff --git a/apps/fretonator-web/src/app/common/chips/chip/chip.component.html b/apps/fretonator-web/src/app/common/chips/chip/chip.component.html
@@ -4,7 +4,7 @@
   class="chip"
   [class.chip--active]="selected"
   [class.chip--round]="rounded"
-  [class.chip--grey]="selectedColor === SelectedColor.grey"
+  [class.chip--muted]="selectedColor === SelectedColor.muted"
 >
   <ng-content></ng-content>
 </a>
diff --git a/apps/fretonator-web/src/app/common/chips/chip/chip.component.scss b/apps/fretonator-web/src/app/common/chips/chip/chip.component.scss
@@ -10,9 +10,10 @@
   @include chip_button_base()
 }
 
-.chip--grey {
-  border-color: var(--grey);
-  color: var(--grey);
+.chip--muted {
+  border-color: var(--chip-border-color-muted);
+  color: var(--chip-foreground-color-muted);
+  background-color: var(--chip-background-color-muted);
 }
 
 .chip--round {
@@ -25,10 +26,13 @@
 }
 
 .chip--active {
-  background-color: var(--black);
-  color: var(--white);
+  background-color: var(--chip-background-color-active);
+  color: var(--chip-foreground-color-active);
+  border-color: var(--chip-border-color-active);
 
-  &.chip--grey {
-    background-color: var(--grey);
+  &.chip--muted {
+    background-color: var(--chip-background-color-muted-active);
+    border-color: var(--chip-border-color-muted-active);
+    color: var(--chip-foreground-color-muted-active);
   }
 }
diff --git a/apps/fretonator-web/src/app/common/chips/chip/chip.component.ts b/apps/fretonator-web/src/app/common/chips/chip/chip.component.ts
@@ -4,7 +4,7 @@ import { ActivatedRoute } from '@angular/router';
 
 export enum SelectedColor {
   default = 'default',
-  grey = 'grey',
+  muted = 'muted',
 }
 
 @Component({
diff --git a/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss b/apps/fretonator-web/src/app/common/fretonator/fretonator.component.scss
@@ -233,7 +233,7 @@
   @include content_wrapper();
   max-width: $screen-med;
   margin-top: pxToRem($grid-unit * 4);
-  background-color: var(--white);
+  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);
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
@@ -9,12 +9,23 @@ <h5 class="scaleDisplay__note">
         </h5>
       </ng-container>
     </div>
-    <button *ngIf="isTheoretical"
-            class="button__infoToggle"
-            aria-label="Theoretical Scales Info Toggle"
-            type="button"
-            (click)="toggleTheoreticalScaleInfo()">{{theoreticalScalesToggleText}}
-    </button>
+    <div class="buttonRow">
+      <button class="button__playScale"
+              aria-label="Play this scale"
+              type="button"
+              (click)="playScale()">
+        <span class="button__playScale__svg">
+          <app-play-svg></app-play-svg>
+        </span>
+        Play scale
+      </button>
+      <button *ngIf="isTheoretical"
+              class="button__infoToggle"
+              aria-label="Theoretical Scales Info Toggle"
+              type="button"
+              (click)="toggleTheoreticalScaleInfo()">{{theoreticalScalesToggleText}}
+      </button>
+    </div>
   </div>
 
   <div class="scaleMap__degrees" *ngIf="mode | displayScaleDegrees">
@@ -43,12 +54,13 @@ <h2 class="infoBlock__title">About Theoretical Scales
             aria-label="Theoretical Scales Info Close"
             type="button"
             (click)="toggleTheoreticalScaleInfo()">
-    <app-cross-svg></app-cross-svg>
+      <app-cross-svg></app-cross-svg>
     </button>
   </h2>
   <p class="infoBlock__copy">A theoretical scale or <em>impossible key</em> is a key whose key signature has at least
     one double flat (𝄫) or double sharp (x).</p>
-  <p class="infoBlock__copy">{{modeDisplayString}} is a theoretical scale and looks unnecessarily complicated. We can make things simpler!</p>
+  <p class="infoBlock__copy">{{modeDisplayString}} is a theoretical scale and looks unnecessarily complicated. We can
+    make things simpler!</p>
   <p class="infoBlock__copy">Switch to the enharmonic equivalent note of {{scale[0] | getEnharmonicEquivalent }} to make
     the notes easier to read. (It'll sound exactly the same!)</p>
   <a class="actionButton"
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
@@ -124,6 +124,39 @@
   }
 }
 
+.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);
+  }
+}
+
+.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();
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
@@ -39,4 +39,8 @@ export class ScaleMapComponent {
     this.showTheoreticalScalesInfo = !this.showTheoreticalScalesInfo;
     this.theoreticalScalesToggleText = this.showTheoreticalScalesInfo ? TheoreticalScalesToggleText.visible : TheoreticalScalesToggleText.hidden;
   }
+
+  playScale() {
+    console.log('playing');
+  }
 }
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
@@ -6,6 +6,7 @@ import { GetEnharmonicEquivalentPipe } from './get-enharmonic-equivalent.pipe';
 import { RouterModule } from '@angular/router';
 import { GetEnharmonicRouterLinkPipe } from './get-enharmonic-router-link.pipe';
 import { CrossModule } from '../../svgs/cross/cross.module';
+import { PlayModule } from '../../svgs/play/play.module';
 
 
 @NgModule({
@@ -16,7 +17,8 @@ import { CrossModule } from '../../svgs/cross/cross.module';
   imports: [
     CommonModule,
     RouterModule,
-    CrossModule
+    CrossModule,
+    PlayModule
   ]
 })
 export class ScaleMapModule { }
diff --git a/apps/fretonator-web/src/app/common/svgs/play/play.component.html b/apps/fretonator-web/src/app/common/svgs/play/play.component.html
@@ -0,0 +1,6 @@
+<svg aria-hidden="true" role="img"
+     class="svg"
+     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path
+    d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"></path>
+</svg>
diff --git a/apps/fretonator-web/src/app/common/svgs/play/play.component.scss b/apps/fretonator-web/src/app/common/svgs/play/play.component.scss
@@ -0,0 +1,6 @@
+.svg {
+  flex: 1;
+  height: 100%;
+  width: 100%;
+  fill: currentColor;
+}
diff --git a/apps/fretonator-web/src/app/common/svgs/play/play.component.spec.ts b/apps/fretonator-web/src/app/common/svgs/play/play.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlayComponent } from './play.component';
+
+describe('PlayComponent', () => {
+  let component: PlayComponent;
+  let fixture: ComponentFixture<PlayComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PlayComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PlayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/fretonator-web/src/app/common/svgs/play/play.component.ts b/apps/fretonator-web/src/app/common/svgs/play/play.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-play-svg',
+  templateUrl: './play.component.html',
+  styleUrls: ['./play.component.scss']
+})
+export class PlayComponent {
+}
diff --git a/apps/fretonator-web/src/app/common/svgs/play/play.module.ts b/apps/fretonator-web/src/app/common/svgs/play/play.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PlayComponent } from './play.component';
+
+
+
+@NgModule({
+  declarations: [PlayComponent],
+  exports: [
+    PlayComponent
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class PlayModule { }
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
@@ -1107,7 +1107,35 @@ exports[`HomeIndexComponent should create 1`] = `
                        B 
                     </h5>
                   </div>
-                  
+                  <div
+                    class="buttonRow"
+                  >
+                    <button
+                      aria-label="Play this scale"
+                      class="button__playScale"
+                      type="button"
+                    >
+                      <span
+                        class="button__playScale__svg"
+                      >
+                        <app-play-svg>
+                          <svg
+                            aria-hidden="true"
+                            class="svg"
+                            role="img"
+                            viewBox="0 0 512 512"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"
+                            />
+                          </svg>
+                        </app-play-svg>
+                      </span>
+                       Play scale 
+                    </button>
+                    
+                  </div>
                 </div>
                 
                 <div
diff --git a/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.html b/apps/fretonator-web/src/app/pages/home/home-index/home-index.component.html
@@ -47,21 +47,21 @@ <h2 class="modeSelector__label">Starting note</h2>
                   [noteExtender]="'flat'"
                   [mode]="mode"
                   rounded="true"
-                  selectedColor="grey">{{note | titlecase}}♭
+                  selectedColor="muted">{{note | titlecase}}♭
         </app-chip>
 
         <app-chip [note]="note"
                   [noteExtender]="'natural'"
                   [mode]="mode"
                   rounded="true"
-                  selectedColor="grey">{{note | titlecase}}</app-chip>
+                  selectedColor="muted">{{note | titlecase}}</app-chip>
 
         <app-chip *ngIf="!(note === 'b' || note === 'e')"
                   [note]="note"
                   [noteExtender]="'sharp'"
                   [mode]="mode"
                   rounded="true"
-                  selectedColor="grey">{{note | titlecase}}#
+                  selectedColor="muted">{{note | titlecase}}#
         </app-chip>
       </app-chips>
     </div>
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
@@ -152,6 +152,7 @@
   margin-top: pxToRem($grid-unit * 1);
   margin-bottom: pxToRem($grid-unit * 1);
   text-align: left;
+  color: var(--foreground-color-base);
 
   @media screen and (min-width: 400px) {
     text-align: center;
diff --git a/apps/fretonator-web/src/app/pages/not-found/not-found-index/not-found-index.component.scss b/apps/fretonator-web/src/app/pages/not-found/not-found-index/not-found-index.component.scss
@@ -21,8 +21,6 @@
   @include font_large();
   color: var(--offwhite);
   text-align: center;
-  //margin-top: pxToRem($grid-unit * 8);
-  //margin-bottom: pxToRem($grid-unit * 2);
 }
 
 .notFound__subtitle {
diff --git a/apps/fretonator-web/src/styles.scss b/apps/fretonator-web/src/styles.scss
@@ -4,16 +4,18 @@
 
 :root {
   --background-color-base: #f9f9f9;
+  --background-color-light: #ffffff;
+  --foreground-color-base: #1c1c1c;
   --font-family-main: "Montserrat", sans-serif;
 
   --string-color: #1c1c1c;
   --string-label-color: #1c1c1c;
-
+  --nut-color: #1a1a1a;
   --fret-color: rgba(28, 28, 28, 0.2);
+
   --fret-width-base: 2px;
   --fretboard-height: 100px;
   --string-height-base: 48px;
-  --nut-color: #1a1a1a;
 
   --note-color: #fafac6;
   --note-background: #1c1c1c;
@@ -36,6 +38,22 @@
 
   --border-width-button: 2px;
 
+  --chip-background-color: #ffffff;
+  --chip-foreground-color: #1c1c1c;
+  --chip-border-color: #1c1c1c;
+
+  --chip-background-color-active: #1c1c1c;
+  --chip-foreground-color-active: #f9f9f9;
+  --chip-border-color-active: #1c1c1c;
+
+  --chip-background-color-muted: #ffffff;
+  --chip-foreground-color-muted: #474350;
+  --chip-border-color-muted: #474350;;
+
+  --chip-foreground-color-muted-active: #f9f9f9;
+  --chip-background-color-muted-active: #474350;
+  --chip-border-color-muted-active: #474350;
+
   --black: #1c1c1c;
   --white: #ffffff;
   --offwhite: #f9f9f9;
diff --git a/apps/fretonator-web/src/styles/_mixins.scss b/apps/fretonator-web/src/styles/_mixins.scss
@@ -39,16 +39,16 @@
   appearance: none;
   border-width: var(--border-width-button);
   border-style: solid;
-  border-color: var(--black);
-  background-color: var(--white);
+  border-color: var(--chip-border-color);
+  background-color: var(--chip-background-color);
   border-radius: var(--border-radius-chip);
   padding: pxToRem(4) pxToRem(8);
   cursor: pointer;
   font-weight: var(--font-weight-bold);
   font-family: var(--font-family-main);
   font-size: pxToRem(14);
   text-decoration: none;
-  color: var(--black);
+  color: var(--chip-foreground-color);
 
   @include focus_accessible();
 }

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@`
`4`	`4`	`class="chip"`
`5`	`5`	`[class.chip--active]="selected"`
`6`	`6`	`[class.chip--round]="rounded"`
`7`		`- [class.chip--grey]="selectedColor === SelectedColor.grey"`
	`7`	`+ [class.chip--muted]="selectedColor === SelectedColor.muted"`
`8`	`8`	`>`
`9`	`9`	`<ng-content></ng-content>`
`10`	`10`	`</a>`
Original file line number	Diff line number	Diff line change
`@@ -10,9 +10,10 @@`
`10`	`10`	`@include chip_button_base()`
`11`	`11`	`}`
`12`	`12`
`13`		`-.chip--grey {`
`14`		`- border-color: var(--grey);`
`15`		`- color: var(--grey);`
	`13`	`+.chip--muted {`
	`14`	`+ border-color: var(--chip-border-color-muted);`
	`15`	`+ color: var(--chip-foreground-color-muted);`
	`16`	`+ background-color: var(--chip-background-color-muted);`
`16`	`17`	`}`
`17`	`18`
`18`	`19`	`.chip--round {`
`@@ -25,10 +26,13 @@`
`25`	`26`	`}`
`26`	`27`
`27`	`28`	`.chip--active {`
`28`		`- background-color: var(--black);`
`29`		`- color: var(--white);`
	`29`	`+ background-color: var(--chip-background-color-active);`
	`30`	`+ color: var(--chip-foreground-color-active);`
	`31`	`+ border-color: var(--chip-border-color-active);`
`30`	`32`
`31`		`- &.chip--grey {`
`32`		`- background-color: var(--grey);`
	`33`	`+ &.chip--muted {`
	`34`	`+ background-color: var(--chip-background-color-muted-active);`
	`35`	`+ border-color: var(--chip-border-color-muted-active);`
	`36`	`+ color: var(--chip-foreground-color-muted-active);`
`33`	`37`	`}`
`34`	`38`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ import { ActivatedRoute } from '@angular/router';`
`4`	`4`
`5`	`5`	`export enum SelectedColor {`
`6`	`6`	`default = 'default',`
`7`		`- grey = 'grey',`
	`7`	`+ muted = 'muted',`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`@Component({`
Original file line number	Diff line number	Diff line change
`@@ -39,4 +39,8 @@ export class ScaleMapComponent {`
`39`	`39`	`this.showTheoreticalScalesInfo = !this.showTheoreticalScalesInfo;`
`40`	`40`	`this.theoreticalScalesToggleText = this.showTheoreticalScalesInfo ? TheoreticalScalesToggleText.visible : TheoreticalScalesToggleText.hidden;`
`41`	`41`	`}`
	`42`	`+`
	`43`	`+ playScale() {`
	`44`	`+ console.log('playing');`
	`45`	`+ }`
`42`	`46`	`}`