ui fixes and tweaks

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

modules/components/src/components/checkbox/checkbox.component.html

@@ -1,14 +1,14 @@
 <ng-template #label>
-  <eqm-label style="margin: 0 5px;" [clickable]="enabled">
+  <eqm-label style="margin: 0 5px;" [clickable]="enabled" [color]="labelColor">
     <ng-content></ng-content>
   </eqm-label>
 </ng-template>
 
 <div *ngIf="labelSide === 'left'" #content>
   <ng-container *ngTemplateOutlet="label"></ng-container>
 </div>
-<eqm-container>
-  <eqm-icon name="checkbox" [size]="10" [color]="checked ? '#4f8d71' : 'transparent'"></eqm-icon>
+<eqm-container [color]="bgColor">
+  <eqm-icon name="checkbox" [size]="10" [color]="checked ? color : 'transparent'"></eqm-icon>
 </eqm-container>
 <div *ngIf="labelSide === 'right'" #content>
   <ng-container *ngTemplateOutlet="label"></ng-container>

modules/components/src/components/checkbox/checkbox.component.ts

@@ -1,4 +1,5 @@
-import { Component, Input, Output, EventEmitter, HostBinding, HostListener, ViewChild, ElementRef, ContentChild, ChangeDetectionStrategy } from '@angular/core'
+import { Component, Input, Output, EventEmitter, HostBinding, HostListener, ViewChild, ElementRef, ContentChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'
+import { ColorsService } from '../../services/colors.service'
 
 @Component({
   selector: 'eqm-checkbox',
@@ -8,16 +9,24 @@ import { Component, Input, Output, EventEmitter, HostBinding, HostListener, View
 })
 export class CheckboxComponent {
   @Input() labelSide: 'left' | 'right'
+  @Input() labelColor = ColorsService.light
   @Input() interactive: boolean = true
   @Input() checked: boolean = false
-  @Output() checkedChanged = new EventEmitter<boolean>()
+  @Output() checkedChange = new EventEmitter<boolean>()
+  @Input() color = ColorsService.accent
+  @Input() bgColor = ColorsService.dark
   @HostBinding('class.enabled') @Input() enabled = true
 
+  constructor (
+    private readonly change: ChangeDetectorRef
+  ) {}
+
   @HostListener('click')
   toggle () {
     if (this.interactive && this.enabled) {
       this.checked = !this.checked
-      this.checkedChanged.emit(this.checked)
+      this.checkedChange.emit(this.checked)
+      this.change.detectChanges()
     }
   }
 }

modules/components/src/components/container/container.component.scss

@@ -5,7 +5,6 @@
   margin: 2px;
   color: $accent;
   border-radius: 2px;
-  background-color: $text-medium;
   box-shadow: 0 0 0 1px #000,
               0 0 0 2px rgb(70, 74, 77);
   background-size: 6px 6px;

modules/components/src/components/container/container.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, HostBinding, Input, ChangeDetectionStrategy } from '@angular/core'
+import { ColorsService } from '../../services/colors.service'
 
 @Component({
   selector: 'eqm-container',
@@ -7,7 +8,7 @@ import { Component, OnInit, HostBinding, Input, ChangeDetectionStrategy } from '
 })
 export class ContainerComponent implements OnInit {
   @HostBinding('class.enabled') @Input() enabled = true
-
+  @Input() @HostBinding('style.background-color') color = ColorsService.dark
   ngOnInit () {
   }
 }

modules/components/src/components/dropdown/dropdown.component.html

@@ -2,17 +2,17 @@
   class="container">
   <div class="item">
 
-    <eqm-icon *ngIf="selectedItem && selectedItem.icon" [name]="selectedItem.icon" [rotate]="selectedItem.iconRotate || 0" class="icon" [color]="selectedItem.iconColor || '#4f8d71'"></eqm-icon>
-    <eqm-label color="#4f8d71"> {{(searchText || (items.length ? (selectedItem ? selectedItem[labelParam] : placeholder) : noItemsPlaceholder))}} </eqm-label>
+    <eqm-icon *ngIf="selectedItem && selectedItem.icon" [name]="selectedItem.icon" [rotate]="selectedItem.iconRotate || 0" class="icon" [color]="selectedItem.iconColor || colors.accent"></eqm-icon>
+    <eqm-label [color]="colors.accent"> {{(searchText || (items.length ? (selectedItem ? selectedItem[labelParam] : placeholder) : noItemsPlaceholder))}} </eqm-label>
   </div>
 
   <div class="right" *ngIf="searchText" (click)="searchText = undefined">
-    <eqm-icon [name]="'cross'" [height]="16" [width]="16" color="#4f8d71"></eqm-icon>
+    <eqm-icon [name]="'cross'" [height]="16" [width]="16" [color]="colors.accent"></eqm-icon>
   </div>
   <div class="right" *ngIf="!searchText" (click)="editable ? toggle($event) : undefined">
-    <eqm-icon [name]="'triangle'" [height]="8" [width]="8" [color]="items.length ? '#4f8d71' : '#555'" [rotate]="-90">
+    <eqm-icon [name]="'triangle'" [height]="8" [width]="8" [color]="items.length ? colors.accent : '#555'" [rotate]="-90">
     </eqm-icon>
-    <eqm-icon [name]="'triangle'" [height]="8" [width]="8" [color]="items.length ? '#4f8d71' : '#555'" [rotate]="90">
+    <eqm-icon [name]="'triangle'" [height]="8" [width]="8" [color]="items.length ? colors.accent : '#555'" [rotate]="90">
     </eqm-icon>
   </div>
 </eqm-container>

modules/components/src/components/dropdown/dropdown.component.scss

@@ -32,7 +32,7 @@ $animation-duration: .2s;
 
 .items-select-box{
   position: fixed;
-  z-index: 999;
+  z-index: 4;
   box-shadow: 0px 8px 77px 2px rgba(0,0,0,0.56);
 }
 

modules/components/src/components/dropdown/dropdown.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Input, ViewChild, ElementRef, EventEmitter, Output,
 import { SelectBoxComponent } from '../select-box/select-box.component'
 import { UtilitiesService } from '../../services/utilities.service'
 import { FadeInOutAnimation } from '../../animations'
+import { ColorsService } from '../../services/colors.service'
 
 @Component({
   selector: 'eqm-dropdown',
@@ -14,7 +15,8 @@ export class DropdownComponent implements OnInit {
   constructor (
     public utils: UtilitiesService,
     public zone: NgZone,
-    public ref: ElementRef
+    public ref: ElementRef,
+    public colors: ColorsService
   ) {
   }
 

modules/components/src/components/flat-slider/flat-slider.component.ts

@@ -17,6 +17,7 @@ import {
 } from '../../services/utilities.service'
 import { FadeInOutAnimation } from '../../animations'
 import { DomSanitizer } from '@angular/platform-browser'
+import { ColorsService } from '../../services/colors.service'
 
 export interface FlatSliderValueChangedEvent {
   value: number
@@ -35,7 +36,8 @@ export class FlatSliderComponent implements OnInit, OnDestroy {
     public utils: UtilitiesService,
     public elem: ElementRef<HTMLElement>,
     public sanitizer: DomSanitizer,
-    private readonly changeRef: ChangeDetectorRef
+    private readonly changeRef: ChangeDetectorRef,
+    public colors: ColorsService
   ) {}
 
   @Input() scale: 'logarithmic' | 'linear' = 'linear'
@@ -63,7 +65,7 @@ export class FlatSliderComponent implements OnInit, OnDestroy {
     return typeof this.middle === 'number' ? this.middle : (this.min + this.max) / 2
   }
 
-  public defaultColor = '#4f8d71'
+  public defaultColor = ColorsService.accent
   public _enabled = true
 
   @HostBinding('class.enabled')

modules/components/src/components/icon/icons.ts

@@ -13,6 +13,9 @@ export const svgs = {
       <polygon points="5,17.1 5,71.1 16.166,71.1 22.389,63.9 12.2,63.9 12.2,24.3 87.8,24.3 87.8,63.9 78.076,63.9 84.291,71.1 95,71.1   95,17.1 "/>
     </svg>
   `,
+  arrow: /* html */`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M112 328l144-144 144 144"/></svg>
+  `,
   avatar: /* html */`
     <svg viewBox="0 0 512 512">
       <path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm-50.22 116.82C218.45 151.39 236.28 144 256 144s37.39 7.44 50.11 20.94c12.89 13.68 19.16 32.06 17.68 51.82C320.83 256 290.43 288 256 288s-64.89-32-67.79-71.25c-1.47-19.92 4.79-38.36 17.57-51.93zM256 432a175.49 175.49 0 01-126-53.22 122.91 122.91 0 0135.14-33.44C190.63 329 222.89 320 256 320s65.37 9 90.83 25.34A122.87 122.87 0 01382 378.78 175.45 175.45 0 01256 432z"/>

modules/components/src/components/input-field/input-field.component.html

@@ -1,5 +1,5 @@
-<eqm-container class="container" #container>
-  <input [type]="type" [(ngModel)]="text" 
+<eqm-container class="container" #container [color]="bgColor">
+  <input [type]="type" [(ngModel)]="text" [style.color]="color"
   [placeholder]="placeholder" autocomplete="true"
   (input)="inputChanged()" (keyup.enter)="enterPressed()" 
   class="input-field" [readonly]="!enabled || !editable" 

modules/components/src/components/input-field/input-field.component.scss

@@ -17,7 +17,6 @@
   .input-field {
     font-family: 'SF Pro Text';
     width: 100%;
-    color: $accent;
     background: none;
     border: none;
     flex-grow: 4;

modules/components/src/components/input-field/input-field.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, Input, EventEmitter, Output, ViewChild, HostBinding, ElementRef, ChangeDetectionStrategy } from '@angular/core'
+import { ColorsService } from '../../services/colors.service'
 
 @Component({
   selector: 'eqm-input-field',
@@ -15,8 +16,9 @@ export class InputFieldComponent implements OnInit {
   @HostBinding('class.enabled') @Input() enabled = true
   @Input() fontSize = 12
   @Input() type: string = 'text'
+  @Input() color = ColorsService.accent
+  @Input() bgColor = ColorsService.dark
   @ViewChild('container', { static: true }) container!: ElementRef
-
   ngOnInit () {
   }
 

modules/components/src/components/loading/loading.component.html

@@ -4,7 +4,7 @@
       viewBox="5 0 80 60">
     <path id="wave" #wave
         fill="none" 
-        stroke="#4f8d71" 
+        [attr.stroke]="colors.accent" 
         stroke-width="4"
         stroke-linecap="round">
     </path>

modules/components/src/components/loading/loading.component.ts

@@ -1,4 +1,5 @@
 import { Component, ViewChild, ElementRef, AfterViewInit, Input, ChangeDetectionStrategy } from '@angular/core'
+import { ColorsService } from '../../services/colors.service'
 
 @Component({
   selector: 'eqm-loading',
@@ -11,6 +12,10 @@ export class LoadingComponent implements AfterViewInit {
   @Input() text?: string
   @Input() showText = true
 
+  constructor (
+    public colors: ColorsService
+  ) {}
+
   ngAfterViewInit () {
     const path = this.wave.nativeElement
     // eslint-disable-next-line no-loss-of-precision

modules/components/src/components/skeuomorph-slider/skeuomorph-slider.component.ts

@@ -41,6 +41,7 @@ export class SkeuomorphSliderComponent implements OnInit, OnDestroy {
   @Input() scrollEnabled = true
   @Input() middle?: number
   @Input() stickToMiddle = false
+  @Input() doubleClickToAnimateToMiddle = true
   @Output() stickedToMiddle = new EventEmitter()
 
   private readonly padding = 14
@@ -194,7 +195,7 @@ export class SkeuomorphSliderComponent implements OnInit, OnDestroy {
   }
 
   doubleclick () {
-    if (this.enabled) {
+    if (this.enabled && this.doubleClickToAnimateToMiddle) {
       if (this.doubleclickTimeout) {
         clearTimeout(this.doubleclickTimeout)
       }

modules/components/src/components/tooltip/tooltip.component.scss

@@ -1,6 +1,6 @@
 
 :host {
-  z-index: 9999;
+  z-index: 100001;
 }
 
 .container {
@@ -10,7 +10,7 @@
   left: -100px;
   top: -100px;
   pointer-events: none;
-  z-index: 9999;
+  z-index: 100001;
 
   .tooltip {
     text-align: center;
@@ -20,7 +20,7 @@
 
   .arrow-container {
     position: absolute;
-    z-index: 9998;
+    z-index: 100000;
     width: 12px;
     height: 12px;
     display: flex;

modules/components/src/components/tooltip/tooltip.component.ts

@@ -53,6 +53,7 @@ export class TooltipComponent implements OnInit {
     let x = -999
     let y = -999
     const body = document.body
+
     const viewHeight = body.offsetHeight / this.scale
     const viewWidth = body.offsetWidth / this.scale
 

modules/components/tsconfig.json

@@ -2,7 +2,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": "./",
+    "baseUrl": "./src",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,

native/app/Source/Application.swift

@@ -45,7 +45,11 @@ class Application {
   private static var ignoreEvents = false
 
   static var settings: Settings!
+
+
   static var ui: UI!
+
+
 
   static var dataBus: ApplicationDataBus!
   static let error = EmitterKit.Event<String>()

native/app/Source/ApplicationState.swift

@@ -30,7 +30,7 @@ struct ApplicationState: State {
     }
 
     guard let state = ({ () -> ApplicationState? in 
-      if Constants.DEBUG {
+      if Constants.DEBUG && false {
         return try! JSONDecoder().decode(ApplicationState.self, from: stateData)
       } else {
         return try? JSONDecoder().decode(ApplicationState.self, from: stateData)

native/app/Source/Constants.swift

@@ -13,8 +13,10 @@ import Version
 struct Constants {
 
   #if DEBUG
-//  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 UI_ENDPOINT_URL = URL(string: "http://www.eqmac.local:8080")!
+//  static let UI_ENDPOINT_URL = URL(string: "https://ui-v3.eqmac.app")!
+  static let UI_ENDPOINT_URL = URL(string: "http://localhost:8080")!
+
   static let DEBUG = true
   #else
   static let DEBUG = false