bitgapp/eqMac
1
1
Fork 0
mirror of https://github.com/bitgapp/eqMac.git synced 2024-11-22 04:33:53 +03:00
Code Issues Projects Releases Wiki Activity

ui fixes and tweaks

Browse Source
This commit is contained in:
Nodeful 2021-11-11 23:32:41 +02:00
parent e6d205c5b6
commit 36ed8ebaaf
37 changed files with 97 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.vscode/settings.json vendored Normal file
View File

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

6
modules/components/src/components/checkbox/checkbox.component.html
View File

@ -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>

15
modules/components/src/components/checkbox/checkbox.component.ts
View File

@ -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()
}
}
}

1
modules/components/src/components/container/container.component.scss
View File

@ -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;

3
modules/components/src/components/container/container.component.ts
View File

@ -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 () {
}
}

10
modules/components/src/components/dropdown/dropdown.component.html
View File

@ -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>

2
modules/components/src/components/dropdown/dropdown.component.scss
View File

@ -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);
}

4
modules/components/src/components/dropdown/dropdown.component.ts
View File

@ -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
) {
}

6
modules/components/src/components/flat-slider/flat-slider.component.ts
View File

@ -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')

3
modules/components/src/components/icon/icons.ts
View File

@ -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"/>

4
modules/components/src/components/input-field/input-field.component.html
View File

@ -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"

1
modules/components/src/components/input-field/input-field.component.scss
View File

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

4
modules/components/src/components/input-field/input-field.component.ts
View File

@ -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 () {
}

2
modules/components/src/components/loading/loading.component.html
View File

@ -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>

5
modules/components/src/components/loading/loading.component.ts
View File

@ -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

3
modules/components/src/components/skeuomorph-slider/skeuomorph-slider.component.ts
View File

@ -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)
}

6
modules/components/src/components/tooltip/tooltip.component.scss
View File

@ -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;

1
modules/components/src/components/tooltip/tooltip.component.ts
View File

@ -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
modules/components/tsconfig.json
View File

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

4
native/app/Source/Application.swift
View File

@ -45,8 +45,12 @@ 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>()

2
native/app/Source/ApplicationState.swift
View File

@ -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)

6
native/app/Source/Constants.swift
View File

@ -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

5
native/app/Source/Networking/Networking.swift
View File

@ -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,6 +22,9 @@ 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
}

2
ui/package.json
View File

@ -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",

1
ui/src/app/app.component.html
View File

@ -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>

2
ui/src/app/app.component.scss
View File

@ -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;
}

1
ui/src/app/app.component.ts
View File

@ -245,6 +245,7 @@ This data would help us improve and grow the product.`
}
async startDimensionsSync () {
this.handleWindowResize()
setInterval(() => {
this.syncMinHeight()
this.syncMaxHeight()

2
ui/src/app/components/options/options.component.ts
View File

@ -149,7 +149,7 @@ export class OptionsComponent {
}
if (option.type === 'dropdown') {
style['z-index'] = 9999
style['z-index'] = 9000
}
return style

2
ui/src/app/sections/effects/equalizers/advanced-equalizer/advanced-equalizer.component.html
View File

@ -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>

4
ui/src/app/sections/effects/equalizers/advanced-equalizer/advanced-equalizer.component.ts
View File

@ -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()

2
ui/src/app/sections/effects/equalizers/basic-equalizer/basic-equalizer.component.html
View File

@ -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'

2
ui/src/app/sections/outputs/outputs.component.html
View File

@ -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)"

7
ui/src/app/sections/outputs/outputs.component.ts
View File

@ -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()

2
ui/src/app/sections/volume/booster-balance/balance/balance.component.html
View File

@ -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>

4
ui/src/app/sections/volume/booster-balance/booster/booster.component.html
View File

@ -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>

9
ui/src/app/services/ui.service.ts
View File

@ -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()

2
ui/src/app/styles/_colors.scss
View File

@ -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;
}