1. Made 'learn' configuration an enum

2. Fixed button borders on fretboard config

Author: salmacodecomputerlove

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

@@ -24,6 +24,7 @@
   border-color: var(--fretboard-toggle-button-border-color);
   border-radius: 0;
   padding: pxToRem($grid-unit * 1.5);
+  border-right-width: 0;
 }
 
 .fretboard__toggleButton--active {
@@ -41,4 +42,5 @@
   border-top-right-radius: var(--border-radius-chip);
   border-bottom-right-radius: var(--border-radius-chip);
   border-left-width: calc(var(--border-width-button) / 2);
+  border-right-width: var(--border-width-button);
 }

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

@@ -15,7 +15,7 @@
       <ng-container *ngFor="let fret of frets">
         <div
           class="fretboard__cell"
-          [class.learn__theme]="configuration === 'learn'"
+          [class.learn__theme]="configuration === FretboardConfigurations.learn"
           [class.fretboard__cell--string]="fret === 0"
           [class.fretboard__cell--selected]="fretMap | getFretFromFretMap: string.name:fret:stringNamesAreCaseSensitive"
           [attr.data-string-name]="fret === 0 ? string.name : null"
@@ -42,7 +42,7 @@
 </div>
 
 <div class="controlPanel">
-  <div class="controlPanel__row" *ngIf="configuration !== 'learn'">
+  <div class="controlPanel__row" *ngIf="configuration !== FretboardConfigurations.learn">
     <div class="controlPanel__section">
       <h4 class="controlPanel__title">Highlight scale degrees</h4>
       <app-scale-degrees
@@ -79,23 +79,21 @@ <h4 class="controlPanel__title">Fretboard</h4>
     ></app-fretboard-config>
   </div>
 
-  <div class="controlPanel__column" *ngIf="configuration !== 'learn'">
+  <div class="controlPanel__column" *ngIf="configuration !== FretboardConfigurations.learn">
     <h4 class="controlPanel__title">Guitar tuning</h4>
     <div class="fretboard__tuningGroup">
       <button class="fretboard__changeTuning"
-              [class.tuning--active]="tuning === Tunings.standard"
+              [class.fretboard__changeTuning--active]="tuning === Tunings.standard"
               (click)="setTuning(Tunings.standard)">Standard
       </button>
       <button class="fretboard__changeTuning"
-              [class.tuning--active]="tuning === Tunings.dropd"
+              [class.fretboard__changeTuning--active]="tuning === Tunings.dropd"
               (click)="setTuning(Tunings.dropd)">Drop D
       </button>
       <button class="fretboard__changeTuning"
-              [class.tuning--active]="tuning === Tunings.dadgad"
+              [class.fretboard__changeTuning--active]="tuning === Tunings.dadgad"
               (click)="setTuning(Tunings.dadgad)">DADGAD
       </button>
     </div>
   </div>
 </div>
-
-

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

@@ -556,7 +556,7 @@ $note-height: 36;
   border-color: var(--fretboard-toggle-button-border-color);
 }
 
-.tuning--active {
+.fretboard__changeTuning--active {
   background-color: var(--chip-background-color-active);
   color: var(--chip-foreground-color-active);
   border-color: var(--chip-border-color-active);

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

@@ -1,20 +1,12 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnChanges,
-  OnInit,
-  Output,
-  ViewChild
-} from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core';
 import { FretMap, Mode } from '../../../util/types';
 import { NotePlaybackService } from '../../playback/note-playback.service';
 import { AbstractDataService } from '../../abstract-data/abstract-data.service';
 import { ScaleDegrees } from '../../../util/constants';
-import { BehaviorSubject, Subject } from 'rxjs';
-import { map } from 'rxjs/operators';
+
+export enum FretboardConfigurations {
+  learn = 'learn'
+}
 
 export enum FretModes {
   twelve = 'twelve',
@@ -108,7 +100,7 @@ export class FretboardComponent implements OnChanges, OnInit {
     this.loadPropFromStorage(StorageKeys.orientation, 'orientation', Orientations.right);
     this.loadPropFromStorage(StorageKeys.noteNameDisplay, 'noteNameDisplay', NoteDisplays.noteNames);
 
-    if (this.configuration !== 'learn') {
+    if (this.configuration !== FretboardConfigurations.learn) {
       this.loadPropFromStorage(StorageKeys.tuning, 'tuning', Tunings.standard);
     }
 
@@ -123,6 +115,10 @@ export class FretboardComponent implements OnChanges, OnInit {
     }
   }
 
+  get FretboardConfigurations() {
+    return FretboardConfigurations;
+  }
+
   get FretModes() {
     return FretModes;
   }

apps/fretonator-web/src/app/common/svgs/chevron-right/chevron-right.module.ts

@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
 import { ChevronRightComponent } from './chevron-right.component';
 
 
-
 @NgModule({
   declarations: [ChevronRightComponent],
   exports: [

apps/fretonator-web/src/app/pages/home/home-index/home-index.component.spec.ts

@@ -2,7 +2,6 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { HomeIndexComponent } from './home-index.component';
 import { Component } from '@angular/core';
 import { HomeModule } from '../home.module';
-import { By } from '@angular/platform-browser';
 import { BrowserTestingModule } from '@angular/platform-browser/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';

apps/fretonator-web/src/app/pages/learn/patterns-index/patterns-index.component.html

@@ -36,7 +36,7 @@ <h5 class="patterns__smallTitle">Choose a pattern</h5>
 
 <div class="fretboard__container">
   <app-fretboard
-    [configuration]="'learn'"
+    [configuration]="FretboardConfigurations.learn"
     [fretMap]="selectedFretMap"
     [stringNamesAreCaseSensitive]="true"
     [(loadExpanded)]="shouldExpand"></app-fretboard>

apps/fretonator-web/src/app/pages/learn/patterns-index/patterns-index.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { PatternFretMaps, PatternModeSelectors } from '../../../util/constants';
 import { Mode } from '../../../util/types';
 import { MetaService } from '../../../common/meta/meta.service';
+import { FretboardConfigurations } from '../../../common/fretonator/fretboard/fretboard.component';
 
 @Component({
   selector: 'app-patterns-index',
@@ -29,6 +30,10 @@ export class PatternsIndexComponent implements OnInit {
     this.metaService.updateAllGenericMeta(this.pageUrl, this.pageTitle, this.pageDescription);
   }
 
+  get FretboardConfigurations() {
+    return FretboardConfigurations;
+  }
+
   setPattern(mode: Mode) {
     this.selectedMode = mode;
     this.selectedFretMap = PatternFretMaps[mode];