mirror of
https://github.com/bitgapp/eqMac.git
synced 2024-11-21 17:41:41 +03:00
ui fixes and tweaks
This commit is contained in:
parent
e6d205c5b6
commit
36ed8ebaaf
2
.vscode/settings.json
vendored
Normal file
2
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
{
|
||||
}
|
@ -1,5 +1,5 @@
|
||||
<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>
|
||||
@ -7,8 +7,8 @@
|
||||
<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>
|
||||
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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 () {
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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
|
||||
) {
|
||||
}
|
||||
|
||||
|
@ -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')
|
||||
|
@ -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"/>
|
||||
|
@ -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"
|
||||
|
@ -17,7 +17,6 @@
|
||||
.input-field {
|
||||
font-family: 'SF Pro Text';
|
||||
width: 100%;
|
||||
color: $accent;
|
||||
background: none;
|
||||
border: none;
|
||||
flex-grow: 4;
|
||||
|
@ -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 () {
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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)
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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
|
||||
|
||||
|
@ -2,7 +2,7 @@
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"baseUrl": "./src",
|
||||
"outDir": "./dist/out-tsc",
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
|
@ -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>()
|
||||
|
@ -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)
|
||||
|
@ -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
|
||||
|
@ -10,7 +10,7 @@ import Foundation
|
||||
import Connectivity
|
||||
import EmitterKit
|
||||
class Networking {
|
||||
static private let connectivity = Connectivity()
|
||||
static let connectivity = Connectivity()
|
||||
|
||||
static var status: ConnectivityStatus = .determining {
|
||||
didSet {
|
||||
@ -22,10 +22,13 @@ class Networking {
|
||||
static let statusChanged = Event<ConnectivityStatus>()
|
||||
|
||||
static func startMonitor () {
|
||||
// connectivity.connectivityURLs = [Constants.UI_ENDPOINT_URL.appendingPathComponent("/success.html")]
|
||||
// connectivity.successThreshold = Connectivity.Percentage(100)
|
||||
|
||||
connectivity.whenConnected = { connectivity in
|
||||
Networking.status = connectivity.status
|
||||
}
|
||||
|
||||
|
||||
connectivity.whenDisconnected = { connectivity in
|
||||
Networking.status = connectivity.status
|
||||
}
|
||||
@ -43,7 +46,7 @@ class Networking {
|
||||
completion(statusConsideredConnected(connectivity.status))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
delay(1000) {
|
||||
if (!returned) {
|
||||
returned = true
|
||||
@ -61,13 +64,13 @@ class Networking {
|
||||
whenConnected(completion)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
static var isConnected: Bool {
|
||||
return statusConsideredConnected(status)
|
||||
}
|
||||
|
||||
|
||||
static func statusConsideredConnected (_ status: ConnectivityStatus) -> Bool {
|
||||
let accepted: [ConnectivityStatus] = [
|
||||
.connected,
|
||||
@ -82,7 +85,7 @@ class Networking {
|
||||
if socketFileDescriptor == -1 {
|
||||
return false
|
||||
}
|
||||
|
||||
|
||||
var addr = sockaddr_in()
|
||||
let sizeOfSockkAddr = MemoryLayout<sockaddr_in>.size
|
||||
addr.sin_len = __uint8_t(sizeOfSockkAddr)
|
||||
@ -92,7 +95,7 @@ class Networking {
|
||||
addr.sin_zero = (0, 0, 0, 0, 0, 0, 0, 0)
|
||||
var bind_addr = sockaddr()
|
||||
memcpy(&bind_addr, &addr, Int(sizeOfSockkAddr))
|
||||
|
||||
|
||||
if Darwin.bind(socketFileDescriptor, &bind_addr, socklen_t(sizeOfSockkAddr)) == -1 {
|
||||
release(socket: socketFileDescriptor)
|
||||
return false
|
||||
@ -104,7 +107,7 @@ class Networking {
|
||||
release(socket: socketFileDescriptor)
|
||||
return true
|
||||
}
|
||||
|
||||
|
||||
static func getAvailabilePort (_ start: UInt) -> UInt {
|
||||
var port = start
|
||||
while !tcpPortIsAvailable(port) {
|
||||
@ -112,7 +115,7 @@ class Networking {
|
||||
}
|
||||
return port
|
||||
}
|
||||
|
||||
|
||||
static func release(socket: Int32) {
|
||||
Darwin.shutdown(socket, SHUT_RDWR)
|
||||
close(socket)
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ui",
|
||||
"version": "3.0.4",
|
||||
"version": "3.1.0",
|
||||
"scripts": {
|
||||
"lint": "npx eslint .",
|
||||
"start": "../node_modules/.bin/ng serve --port 8080 --host 0.0.0.0 --disable-host-check",
|
||||
|
@ -28,5 +28,6 @@
|
||||
<eqm-divider *ngIf="ui.settings.equalizersFeatureEnabled"></eqm-divider>
|
||||
|
||||
<eqm-outputs *ngIf="ui.settings.outputFeatureEnabled" #outputs></eqm-outputs>
|
||||
|
||||
<eqm-tooltip-container [scale]="ui.scale"></eqm-tooltip-container>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -245,6 +245,7 @@ This data would help us improve and grow the product.`
|
||||
}
|
||||
|
||||
async startDimensionsSync () {
|
||||
this.handleWindowResize()
|
||||
setInterval(() => {
|
||||
this.syncMinHeight()
|
||||
this.syncMaxHeight()
|
||||
|
@ -149,7 +149,7 @@ export class OptionsComponent {
|
||||
}
|
||||
|
||||
if (option.type === 'dropdown') {
|
||||
style['z-index'] = 9999
|
||||
style['z-index'] = 9000
|
||||
}
|
||||
|
||||
return style
|
||||
|
@ -14,7 +14,7 @@
|
||||
<div fxLayout="column" fxLayoutAlign="space-between center">
|
||||
<eqm-label [fontSize]="10">Hz</eqm-label>
|
||||
<eqm-button type="transparent" (pressed)="selectFlatPreset()" [enabled]="enabled">
|
||||
<eqm-icon name="triangle" color="#4f8d71" [width]="10" [height]="10"></eqm-icon>
|
||||
<eqm-icon name="triangle" [color]="colors.accent" [width]="10" [height]="10"></eqm-icon>
|
||||
</eqm-button>
|
||||
<eqm-label [fontSize]="8" class="gain">Gain</eqm-label>
|
||||
</div>
|
||||
|
@ -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()
|
||||
|
@ -3,7 +3,7 @@
|
||||
<div fxLayout="row">
|
||||
<div fxLayout="column">
|
||||
<div fxLayout="row" fxLayoutAlign="center center" style="width: 100%;">
|
||||
<eqm-checkbox labelSide="right" [checked]="peakLimiter" (checkedChanged)="setPeakLimiter($event)">Peak Limiter</eqm-checkbox>
|
||||
<eqm-checkbox labelSide="right" [checked]="peakLimiter" (checkedChange)="setPeakLimiter($event)">Peak Limiter</eqm-checkbox>
|
||||
<eqm-question
|
||||
[eqmTooltip]="
|
||||
'Enable if you hear Distortion when increasing Gain.\nThis will decrease the Global Gain \n to make sure the sound never clips.\nThen increase the overall volume to compensate'
|
||||
|
@ -1,5 +1,5 @@
|
||||
<div fxFill class="outputs" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="10px">
|
||||
<eqm-icon (click)="select(selected)" name="reset" color="#4f8d71" eqmTooltip="Reset playback" eqmTooltipPositionSide="top"></eqm-icon>
|
||||
<eqm-icon (click)="select(selected)" name="reset" [color]="colors.accent" eqmTooltip="Reset playback" eqmTooltipPositionSide="top"></eqm-icon>
|
||||
<eqm-dropdown fxFlex
|
||||
labelParam="name" noItemsPlaceholder="No Outputs" placeholder="Select Output"
|
||||
[items]="outputs" [(selectedItem)]="selected" (itemSelected)="select($event)"
|
||||
|
@ -1,4 +1,5 @@
|
||||
import { Component, HostBinding, OnInit } from '@angular/core'
|
||||
import { ColorsService } from '@eqmac/components'
|
||||
import { ApplicationService } from '../../services/app.service'
|
||||
import { OutputsService, Output } from './outputs.service'
|
||||
|
||||
@ -13,7 +14,11 @@ export class OutputsComponent implements OnInit {
|
||||
|
||||
@HostBinding('style.height.px') height = 52
|
||||
|
||||
constructor (public service: OutputsService, public app: ApplicationService) { }
|
||||
constructor (
|
||||
public service: OutputsService,
|
||||
public app: ApplicationService,
|
||||
public colors: ColorsService
|
||||
) { }
|
||||
|
||||
async ngOnInit () {
|
||||
await this.sync()
|
||||
|
@ -29,7 +29,7 @@
|
||||
<ng-container *ngTemplateOutlet="left"></ng-container>
|
||||
<div fxFlex="60%">
|
||||
<eqm-flat-slider [enabled]="app.enabled" [min]="-1" [max]="1" [(value)]="balance" (userChangedValue)="setBalance($event)"
|
||||
[doubleClickToAnimateToMiddle]="true" [animationDuration]="animationDuration" [animationFps]="animationFps"
|
||||
[doubleClickToAnimateToMiddle]="true" [animationDuration]="animationDuration" [animationFps]="animationFps" [thickness]="4" [thumbRadius]="5"
|
||||
[stickToMiddle]="true" (stickedToMiddle)="performHapticFeedback($event)"></eqm-flat-slider>
|
||||
</div>
|
||||
<ng-container *ngTemplateOutlet="right"></ng-container>
|
||||
|
@ -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)"
|
||||
></eqm-checkbox>
|
||||
<eqm-label>Boost</eqm-label>
|
||||
<eqm-value-screen [enabled]="boostEnabled && app.enabled">{{(gain | mapValue:1:2:0:100 | clipValue:0:100 | fixFloat:0:false)}}%</eqm-value-screen>
|
||||
@ -36,7 +36,7 @@
|
||||
<ng-container *ngTemplateOutlet="volume"></ng-container>
|
||||
<div fxFlex="60%">
|
||||
<eqm-flat-slider [min]="0" [enabled]="app.enabled" [max]="boostEnabled ? 2 : 1" [(value)]="gain" (userChangedValue)="setGain($event.value)"
|
||||
[doubleClickToAnimateToMiddle]="false" [showMiddleNotch]="boostEnabled"
|
||||
[doubleClickToAnimateToMiddle]="false" [showMiddleNotch]="boostEnabled" [thickness]="4" [thumbRadius]="5"
|
||||
[stickToMiddle]="boostEnabled" (stickedToMiddle)="performHapticFeedback($event)"></eqm-flat-slider>
|
||||
</div>
|
||||
<ng-container *ngTemplateOutlet="boost"></ng-container>
|
||||
|
@ -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()
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user