fixed ui aligning issues for macOS 10.12

bitgapp · Oct 4, 2021 · 34ae184 · 34ae184
1 parent 2491e96
commit 34ae184
Show file tree

Hide file tree

Showing 11 changed files with 34 additions and 20 deletions.
diff --git a/modules/components/src/components/skeuomorph-slider/skeuomorph-slider.component.scss b/modules/components/src/components/skeuomorph-slider/skeuomorph-slider.component.scss
@@ -21,6 +21,7 @@
 }
 
 .groove {
+  flex: 1 1 0%;
   height: 100%;
   width: 7px;
   margin: 8px 0;

diff --git a/native/app/Embedded/ui.zip → native/app/Assets/Embedded/ui.zip b/native/app/Embedded/ui.zip → native/app/Assets/Embedded/ui.zip
diff --git a/native/app/Embedded b/native/app/Embedded
diff --git a/native/app/Source/Constants.swift b/native/app/Source/Constants.swift
@@ -13,7 +13,7 @@ import Version
 struct Constants {
 
   #if DEBUG
-//  static let UI_ENDPOINT_URL = URL(string: "http://localhost:8080")!
+//  static let UI_ENDPOINT_URL = URL(string: "http://eqmac.local:8080")!
   static let UI_ENDPOINT_URL = URL(string: "https://ui-v3.eqmac.app")!
   static let DEBUG = true
   #else

diff --git a/ui/package.json b/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "scripts": {
     "lint": "npx eslint .",
     "start": "../node_modules/.bin/ng serve --port 8080 --host 0.0.0.0 --disable-host-check",

diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts
@@ -242,8 +242,6 @@ This data would help us improve and grow the product.`
   }
 
   async startDimensionsSync () {
-    this.previousMinHeight = this.minHeight
-    this.previousMaxHeight = this.maxHeight
     setInterval(() => {
       this.syncMinHeight()
       this.syncMaxHeight()
@@ -252,6 +250,12 @@ This data would help us improve and grow the product.`
 
   private previousMinHeight: number
   async syncMinHeight () {
+    if (!this.previousMinHeight) {
+      this.previousMinHeight = this.minHeight
+      await this.ui.setMinHeight({ minHeight: this.minHeight })
+      return
+    }
+
     const diff = this.minHeight - this.previousMinHeight
     this.previousMinHeight = this.minHeight
     if (diff !== 0) {
@@ -264,8 +268,14 @@ This data would help us improve and grow the product.`
     }
   }
 
-  private previousMaxHeight
+  private previousMaxHeight: number
   async syncMaxHeight () {
+    if (!this.previousMaxHeight) {
+      this.previousMaxHeight = this.maxHeight
+      await this.ui.setMaxHeight({ maxHeight: this.maxHeight })
+      return
+    }
+
     const diff = this.maxHeight - this.previousMaxHeight
     this.previousMaxHeight = this.maxHeight
     await this.ui.setMaxHeight({ maxHeight: this.maxHeight })

diff --git a/ui/src/app/sections/effects/equalizers/advanced-equalizer/advanced-equalizer.component.ts b/ui/src/app/sections/effects/equalizers/advanced-equalizer/advanced-equalizer.component.ts
@@ -6,7 +6,8 @@ import {
   Output,
   ChangeDetectorRef,
   OnDestroy,
-  HostBinding
+  HostBinding,
+  Host
 } from '@angular/core'
 import { AdvancedEqualizerService, AdvancedEqualizerPreset, AdvancedEqualizerPresetsChangedEventCallback, AdvancedEqualizerSelectedPresetChangedEventCallback } from 'src/app/sections/effects/equalizers/advanced-equalizer/advanced-equalizer.service'
 import { EqualizerComponent } from '../equalizer.component'
@@ -22,7 +23,8 @@ import { ToastService } from '../../../../services/toast.service'
 })
 export class AdvancedEqualizerComponent extends EqualizerComponent implements OnInit, OnDestroy {
   @Input() enabled = true
-  height = 228
+
+  @HostBinding('style.height.px') height = 228
 
   public ShowDefaultPresetsCheckbox: CheckboxOption = {
     type: 'checkbox',

diff --git a/ui/src/app/sections/effects/equalizers/basic-equalizer/basic-equalizer.component.html b/ui/src/app/sections/effects/equalizers/basic-equalizer/basic-equalizer.component.html
@@ -1,5 +1,5 @@
 <eqm-loading *ngIf="!selectedPreset || !presets"></eqm-loading>
-<div *ngIf="selectedPreset && presets" fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="10px" fxFlex>
+<div *ngIf="selectedPreset && presets" fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="5px" fxFlex>
   <div fxLayout="row">
     <div fxLayout="column">
       <div fxLayout="row" fxLayoutAlign="center center" style="width: 100%;">
@@ -42,32 +42,31 @@
   </div>
 
   <!-- Sliders -->
-  <div *ngIf="replaceKnobsWithSliders" class="basic-level-sliders w-100" fxLayoutGap="20px" fxLayout="column" fxLayoutAlign="space-around center">
-    <div fxLayout="row" fxLayoutAlign="center center" fxFill fxLayoutGap="5px">
+  <div *ngIf="replaceKnobsWithSliders" class="basic-level-sliders w-100" fxLayoutGap="10px" fxLayout="column" fxLayoutAlign="space-around center">
+    <div fxLayout="row" class="w-100" fxLayoutAlign="center center" fxLayoutGap="5px">
       <eqm-label fxFlex="52px">BASS</eqm-label>
       <div fxFlex="70%">
-        <eqm-flat-slider [enabled]="enabled" [min]="-24" [max]="24" [(value)]="gains.bass"
+        <eqm-flat-slider [enabled]="enabled" [min]="-24" [max]="24" [(value)]="gains.bass" [thickness]="3" [thumbRadius]="6"
           (userChangedValue)="setGain('bass', $event)" [doubleClickToAnimateToMiddle]="true"
           [animationDuration]="animationDuration" [animationFps]="animationFps" [stickToMiddle]="true"
           (stickedToMiddle)="performHapticFeedback($event)"></eqm-flat-slider>
       </div>
       <eqm-value-screen fxFlex="52px" [enabled]="enabled">{{screenValue(gains.bass)}}</eqm-value-screen>
-
     </div>
-    <div fxLayout="row" fxLayoutAlign="center center" fxFill fxLayoutGap="5px">
+    <div fxLayout="row" class="w-100" fxLayoutAlign="center center" fxLayoutGap="5px">
       <eqm-label fxFlex="52px">MID</eqm-label>
       <div fxFlex="70%">
-        <eqm-flat-slider [enabled]="enabled" [min]="-24" [max]="24" [(value)]="gains.mid"
+        <eqm-flat-slider [enabled]="enabled" [min]="-24" [max]="24" [(value)]="gains.mid" [thickness]="3" [thumbRadius]="6"
           (userChangedValue)="setGain('mid', $event)" [doubleClickToAnimateToMiddle]="true"
           [animationDuration]="animationDuration" [animationFps]="animationFps" [stickToMiddle]="true"
           (stickedToMiddle)="performHapticFeedback($event)"></eqm-flat-slider>
       </div>
       <eqm-value-screen fxFlex="52px" [enabled]="enabled">{{screenValue(gains.mid)}}</eqm-value-screen>
     </div>
-    <div fxLayout="row" fxLayoutAlign="center center" fxFill fxLayoutGap="5px">
+    <div fxLayout="row" class="w-100" fxLayoutAlign="center center" fxLayoutGap="5px">
       <eqm-label fxFlex="52px">TREBLE</eqm-label>
       <div fxFlex="70%">
-        <eqm-flat-slider [enabled]="enabled" [min]="-24" [max]="24" [(value)]="gains.treble"
+        <eqm-flat-slider [enabled]="enabled" [min]="-24" [max]="24" [(value)]="gains.treble" [thickness]="3" [thumbRadius]="6"
           (userChangedValue)="setGain('treble', $event)" [doubleClickToAnimateToMiddle]="true"
           [animationDuration]="animationDuration" [animationFps]="animationFps" [stickToMiddle]="true"
           (stickedToMiddle)="performHapticFeedback($event)"></eqm-flat-slider>

diff --git a/ui/src/app/sections/effects/equalizers/basic-equalizer/basic-equalizer.component.scss b/ui/src/app/sections/effects/equalizers/basic-equalizer/basic-equalizer.component.scss
@@ -1,5 +1,5 @@
 :host {
-  display: block;
+  display: flex;
 }
 
 .basic-level-knobs {
@@ -11,5 +11,6 @@
 
 
 .basic-level-sliders {
+  flex: 1 1 0%;
   margin: 10px;
 }
diff --git a/ui/src/app/sections/effects/equalizers/basic-equalizer/basic-equalizer.component.ts b/ui/src/app/sections/effects/equalizers/basic-equalizer/basic-equalizer.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectorRef, HostBinding } from '@angular/core'
+import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectorRef, HostBinding, HostListener } from '@angular/core'
 import { BasicEqualizerService, BasicEqualizerPreset, BasicEqualizerBand, BasicEqualizerPresetGains } from './basic-equalizer.service'
 import { EqualizerComponent } from '../equalizer.component'
 import { KnobValueChangedEvent } from '@eqmac/components'
@@ -13,7 +13,8 @@ import { UIService } from '../../../../services/ui.service'
 })
 export class BasicEqualizerComponent extends EqualizerComponent implements OnInit {
   @Input() enabled = true
-  get height () {
+
+  @HostListener('style.height.px') get height () {
     return this.replaceKnobsWithSliders ? 180 : 164
   }
 

diff --git a/ui/src/app/sections/effects/equalizers/equalizers.component.html b/ui/src/app/sections/effects/equalizers/equalizers.component.html
@@ -4,7 +4,7 @@
       <eqm-icon [@FadeInOut] *ngIf="activeEqualizer && activeEqualizer.settings.length" (click)="openSettings()" eqmTooltip="Settings" eqmTooltipPositionSide="bottom" name="cog" color="#8E8E93" [size]="16"></eqm-icon>
     </div>
 
-    <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="5px">
+    <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="8px">
       <eqm-label>Equalizer: </eqm-label>
       <eqm-label class="type" [class.active]="type === 'Basic'" (click)="setType('Basic')">Basic</eqm-label>
       <eqm-label class="type" [class.active]="type === 'Advanced'" (click)="setType('Advanced')">Advanced</eqm-label>