diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..7a73a41 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,2 @@ +{ +} \ No newline at end of file diff --git a/modules/components/src/components/checkbox/checkbox.component.html b/modules/components/src/components/checkbox/checkbox.component.html index f5c26dd..dc3965d 100644 --- a/modules/components/src/components/checkbox/checkbox.component.html +++ b/modules/components/src/components/checkbox/checkbox.component.html @@ -1,5 +1,5 @@ - + @@ -7,8 +7,8 @@
- - + +
diff --git a/modules/components/src/components/checkbox/checkbox.component.ts b/modules/components/src/components/checkbox/checkbox.component.ts index 9268c9d..cabf063 100644 --- a/modules/components/src/components/checkbox/checkbox.component.ts +++ b/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() + @Output() checkedChange = new EventEmitter() + @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() } } } diff --git a/modules/components/src/components/container/container.component.scss b/modules/components/src/components/container/container.component.scss index c45483f..54866a7 100644 --- a/modules/components/src/components/container/container.component.scss +++ b/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; diff --git a/modules/components/src/components/container/container.component.ts b/modules/components/src/components/container/container.component.ts index e915dc6..03eb320 100644 --- a/modules/components/src/components/container/container.component.ts +++ b/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 () { } } diff --git a/modules/components/src/components/dropdown/dropdown.component.html b/modules/components/src/components/dropdown/dropdown.component.html index 020be22..bcad4db 100644 --- a/modules/components/src/components/dropdown/dropdown.component.html +++ b/modules/components/src/components/dropdown/dropdown.component.html @@ -2,17 +2,17 @@ class="container">
- - {{(searchText || (items.length ? (selectedItem ? selectedItem[labelParam] : placeholder) : noItemsPlaceholder))}} + + {{(searchText || (items.length ? (selectedItem ? selectedItem[labelParam] : placeholder) : noItemsPlaceholder))}}
- +
- + - +
diff --git a/modules/components/src/components/dropdown/dropdown.component.scss b/modules/components/src/components/dropdown/dropdown.component.scss index b0d7d25..1585cd6 100644 --- a/modules/components/src/components/dropdown/dropdown.component.scss +++ b/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); } diff --git a/modules/components/src/components/dropdown/dropdown.component.ts b/modules/components/src/components/dropdown/dropdown.component.ts index ca5d6f0..a7cc4e8 100644 --- a/modules/components/src/components/dropdown/dropdown.component.ts +++ b/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 ) { } diff --git a/modules/components/src/components/flat-slider/flat-slider.component.ts b/modules/components/src/components/flat-slider/flat-slider.component.ts index 8209034..5bb6fa1 100644 --- a/modules/components/src/components/flat-slider/flat-slider.component.ts +++ b/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, 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') diff --git a/modules/components/src/components/icon/icons.ts b/modules/components/src/components/icon/icons.ts index df79e57..bed915b 100644 --- a/modules/components/src/components/icon/icons.ts +++ b/modules/components/src/components/icon/icons.ts @@ -13,6 +13,9 @@ export const svgs = { `, + arrow: /* html */` + + `, avatar: /* html */` diff --git a/modules/components/src/components/input-field/input-field.component.html b/modules/components/src/components/input-field/input-field.component.html index 90d063b..c13ea9c 100644 --- a/modules/components/src/components/input-field/input-field.component.html +++ b/modules/components/src/components/input-field/input-field.component.html @@ -1,5 +1,5 @@ - -
\ No newline at end of file + diff --git a/ui/src/app/app.component.scss b/ui/src/app/app.component.scss index 75114fd..5cbf5a8 100644 --- a/ui/src/app/app.component.scss +++ b/ui/src/app/app.component.scss @@ -105,7 +105,7 @@ $noise: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyA max-width: 400px; box-sizing: border-box; position: absolute; - z-index: 4; + z-index: 5; transform-origin: right top; right: 0; } diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts index 7e98d11..64ca05d 100644 --- a/ui/src/app/app.component.ts +++ b/ui/src/app/app.component.ts @@ -245,6 +245,7 @@ This data would help us improve and grow the product.` } async startDimensionsSync () { + this.handleWindowResize() setInterval(() => { this.syncMinHeight() this.syncMaxHeight() diff --git a/ui/src/app/components/options/options.component.ts b/ui/src/app/components/options/options.component.ts index 16ee391..31e82e8 100644 --- a/ui/src/app/components/options/options.component.ts +++ b/ui/src/app/components/options/options.component.ts @@ -149,7 +149,7 @@ export class OptionsComponent { } if (option.type === 'dropdown') { - style['z-index'] = 9999 + style['z-index'] = 9000 } return style diff --git a/ui/src/app/sections/effects/equalizers/advanced-equalizer/advanced-equalizer.component.html b/ui/src/app/sections/effects/equalizers/advanced-equalizer/advanced-equalizer.component.html index 9bb2895..0c460a0 100644 --- a/ui/src/app/sections/effects/equalizers/advanced-equalizer/advanced-equalizer.component.html +++ b/ui/src/app/sections/effects/equalizers/advanced-equalizer/advanced-equalizer.component.html @@ -14,7 +14,7 @@
Hz - + Gain
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 index befa108..bb212fa 100644 --- 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 @@ -15,6 +15,7 @@ import { Options, CheckboxOption } from 'src/app/components/options/options.comp import { TransitionService } from '../../../../services/transitions.service' import { ApplicationService } from '../../../../services/app.service' import { ToastService } from '../../../../services/toast.service' +import { ColorsService } from '@eqmac/components' @Component({ selector: 'eqm-advanced-equalizer', @@ -123,7 +124,8 @@ export class AdvancedEqualizerComponent extends EqualizerComponent implements On public transition: TransitionService, public change: ChangeDetectorRef, public app: ApplicationService, - public toast: ToastService + public toast: ToastService, + public colors: ColorsService ) { super() this.getImportLegacyAvailable() 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 index c0036aa..35d4358 100644 --- 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 @@ -3,7 +3,7 @@
- Peak Limiter + Peak Limiter - +
diff --git a/ui/src/app/sections/volume/booster-balance/booster/booster.component.html b/ui/src/app/sections/volume/booster-balance/booster/booster.component.html index a443cf9..0117c08 100644 --- a/ui/src/app/sections/volume/booster-balance/booster/booster.component.html +++ b/ui/src/app/sections/volume/booster-balance/booster/booster.component.html @@ -13,7 +13,7 @@ [enabled]="boostEnabledAvailable && app.enabled" [eqmTooltip]="boostEnabledAvailable ? (boostEnabled ? 'Disable Boost' : 'Enable Boost') : ('Enable/Disable Boost\nOnly available after v1.0.0')" style="position: absolute; top: 5px; right: -10px;" - [checked]="boostEnabled" (checkedChanged)="setBoostEnabled($event)" + [checked]="boostEnabled" (checkedChange)="setBoostEnabled($event)" > Boost {{(gain | mapValue:1:2:0:100 | clipValue:0:100 | fixFloat:0:false)}}% @@ -36,7 +36,7 @@
diff --git a/ui/src/app/services/ui.service.ts b/ui/src/app/services/ui.service.ts index a3d1e95..761b902 100644 --- a/ui/src/app/services/ui.service.ts +++ b/ui/src/app/services/ui.service.ts @@ -53,15 +53,6 @@ export class UIService extends DataService { } } - readonly colors = { - accent: '#4f8d71', - warning: '#e80415', - 'gradient-start': '#5a5b5f', - 'gradient-end': '#2c2c2e', - light: '#c9cdd0', - dark: '#16191c' - } - constructor () { super() this.sync() diff --git a/ui/src/app/styles/_colors.scss b/ui/src/app/styles/_colors.scss index ba7c02c..a50da05 100644 --- a/ui/src/app/styles/_colors.scss +++ b/ui/src/app/styles/_colors.scss @@ -34,7 +34,7 @@ $gradient-start: #5a5b5f; background-color: $gradient-start !important; } -$gradient-end: rgb(44, 44, 46); +$gradient-end: #2c2c2e; ::ng-deep .gradient-end { color: $gradient-end !important; }