moved to a different way of selecting eq type

Author: nodeful

ui/src/app/sections/effects/equalizers/equalizers.component.html

@@ -1,21 +1,23 @@
-<div fxLayout="row" [style.padding.px]="5" [style.width.%]="100" fxLayoutAlign="space-between start" >
+<div fxLayout="row" [style.padding.px]="5" [style.width.%]="100" fxLayoutAlign="space-between center" >
 
     <div fxFlex="20" fxLayoutAlign="start center">
         <eqm-toggle class="on-off" [(state)]="enabled" (stateChange)="setEnabled()"></eqm-toggle>
     </div>
 
-    <div fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="5px">
-      <eqm-button type="transparent" (pressed)="previousType()" [disabled]="!enabled || type === 'Basic'">
-          <eqm-icon name="triangle" color="#4f8d71" rotate="180" size="15"></eqm-icon>
-      </eqm-button>
-      <div style="width: 110px;" fxLayout="row" fxLayoutAlign="center center">
-        <eqm-label>{{type}}</eqm-label>
-        &nbsp;
-        <eqm-label>Equalizer</eqm-label>
-      </div>
-      <eqm-button type="transparent" (pressed)="nextType()" [disabled]="!enabled || type === 'Advanced'">
-        <eqm-icon name="triangle" color="#4f8d71" size="15"></eqm-icon>
-      </eqm-button>
+    <div fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="20px">
+      <eqm-label>Equalizer: </eqm-label>
+      <eqm-label 
+        [color]="type === 'Basic' ? ui.colors.accent : ui.colors.light"
+        (click)="setType('Basic')"
+      >
+        Basic
+      </eqm-label>
+      <eqm-label 
+        [color]="type === 'Advanced' ? ui.colors.accent : ui.colors.light"
+        (click)="setType('Advanced')"
+      >
+        Advanced
+      </eqm-label>
     </div>
 
     <div fxFlex="20" fxLayoutAlign="end start">
@@ -29,6 +31,7 @@
         <!-- <eqm-icon (click)="toggleVisibility()" [name]="hide ? 'show' : 'hide'"></eqm-icon> -->
     </div>
 </div>
+
 <div [style.width.%]="100" fxLayout="row">
   <eqm-equalizer-presets 
     [disabled]="!enabled"
@@ -38,11 +41,6 @@
     (presetSaved)="savePreset($event)"
     (presetDeleted)="deletePreset()"
   ></eqm-equalizer-presets> 
-  <!-- <div fxLayout="column" fxLayoutAlign="start center">
-    <eqm-label>Global</eqm-label>
-    <eqm-knob size="small"></eqm-knob>
-    <eqm-value-screen></eqm-value-screen>
-  </div> -->
 </div>
 <eqm-loading *ngIf="!loaded"></eqm-loading>
 <eqm-carousel class="equalizers" #equalizersCarousel [hidden]="!loaded" 

ui/src/app/sections/effects/equalizers/equalizers.component.scss

@@ -5,6 +5,13 @@
   justify-items: center;
   position: relative;
 
+  .button-container {
+    width: 100%;
+    .button {
+      width: 27.5%;
+    }
+  }
+  
   .presets {
     width: 95%;
   }

ui/src/app/sections/effects/equalizers/equalizers.component.ts

@@ -99,6 +99,11 @@ export class EqualizersComponent implements OnInit {
     this.equalizersCarousel.next()
   }
 
+  setType (type: EqualizerType) {
+    this.type = type
+    this.typeSwitched(type)
+  }
+
   equalizerCameIntoView (type: EqualizerType) {
     const equalizer = this.getEqualizerFromType(type)
     equalizer && equalizer.selected()

ui/src/app/sections/source/source.component.scss

@@ -4,7 +4,6 @@
     width: 100%;
     .button {
       width: 27.5%;
-
     }
   }
 

ui/src/app/services/ui.service.ts

@@ -23,6 +23,15 @@ export class UIService extends DataService {
   dimensionsChanged = new Subject<UIDimensions>()
   settingsChanged = new Subject<UISettings>()
 
+  readonly colors = {
+    'accent': '#4f8d71',
+    'warning': '#e80415',
+    'gradient-start': '#5a5b5f',
+    'gradient-end': '#2c2c2e',
+    'light': '#c9cdd0',
+    'dark': '#16191c'
+  }
+
   get isLocal () {
     return window.location.href.includes('file://')
   }

ui/src/app/styles/_colors.scss

@@ -1,6 +1,6 @@
 $accent: #4f8d71;
 $warning: #e80415;
-$gradient-start: rgb(90, 91, 95);
+$gradient-start: #5a5b5f;
 $gradient-end: #2c2c2e;
 $light: #c9cdd0;
 $dark: #16191c;