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

renamed all disabled params to enabled, for consistency

Browse Source
This commit is contained in:
Nodeful 2021-06-18 22:04:19 +03:00
parent 63808c3405
commit ee1513b366
30 changed files with 100 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
modules/components/src/components/button/button.component.scss
View File

@ -16,11 +16,7 @@
transition-property: filter;
transition-duration: .5s;
border-radius: 3px; // font-size: 20px;
cursor: pointer !important;
& * {
cursor: pointer !important;
}
filter: grayscale(80%) brightness(80%);
}
.transparent {
@ -68,12 +64,11 @@
}
}
.disabled {
// box-shadow: 0 0 0 1px black, 0 0 0 1px rgba(gray, .1) inset, 0 0 15px 10px rgba(black, .3) inset;
filter: grayscale(80%) brightness(80%);
cursor: default !important;
.enabled {
filter: none;
cursor: pointer !important;
& * {
cursor: default !important;
cursor: pointer !important;
}
}

12
modules/components/src/components/button/button.component.ts
View File

@ -13,7 +13,7 @@ export class ButtonComponent implements OnInit {
@Input() toggle = false
@Input() depressable = true
@Input() hoverable = true
@Input() disabled = false
@Input() enabled = true
@Output() pressed = new EventEmitter()
ngOnInit () {
@ -29,18 +29,18 @@ export class ButtonComponent implements OnInit {
computeClass () {
let className = 'button'
className += ` ${this.type}`
className += ` ${this.type}`
className += this.state ? ' on' : ' off'
if (this.disabled) {
className += ' disabled'
} else if (this.hoverable) {
if (this.enabled) {
className += ' enabled'
}
if (this.hoverable) {
className += ' hoverable-' + (this.state ? 'on' : 'off')
}
return className
}
click () {
if (!this.disabled) {
if (this.enabled) {
if (this.toggle) {
if (this.state && this.depressable) {
this.state = !this.state

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

@ -9,8 +9,9 @@
box-shadow: 0 0 0 1px #000,
0 0 0 2px rgb(70, 74, 77);
background-size: 6px 6px;
}
:host.disabled {
filter: grayscale(80%);
}
:host.enabled {
filter: none;
}

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

@ -6,7 +6,7 @@ import { Component, OnInit, HostBinding, Input } from '@angular/core'
styleUrls: [ './container.component.scss' ]
})
export class ContainerComponent implements OnInit {
@HostBinding('class.disabled') @Input() disabled = false
@HostBinding('class.enabled') @Input() enabled = true
ngOnInit () {
}

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

@ -1,4 +1,4 @@
<eqm-container #container [disabled]="disabled" (click)="editable ? undefined : toggle($event)"
<eqm-container #container [enabled]="enabled" (click)="editable ? undefined : toggle($event)"
class="container">
<div class="item">

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

@ -5,6 +5,7 @@
width: 100%;
transition: filter;
transition-duration: 0.5s;
filter: grayscale(80%);
}
.container {
@ -45,8 +46,8 @@ $animation-duration: .2s;
transform-origin: bottom center;
}
:host.disabled {
filter: grayscale(80%);
:host.enabled {
filter: none;
}
.item {

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

@ -31,7 +31,7 @@ export class DropdownComponent implements OnInit {
}
@Output() refChanged = new EventEmitter<DropdownComponent>()
@HostBinding('class.disabled') @Input() disabled = false
@HostBinding('class.enabled') @Input() enabled = true
@Input() selectedItem = null
@Output() selectedItemChange = new EventEmitter<any>()
@Input() labelParam = 'text'
@ -108,7 +108,7 @@ export class DropdownComponent implements OnInit {
}
async open () {
if (!this.disabled && !this.shown && this.items.length) {
if (this.enabled && !this.shown && this.items.length) {
this.calculateYCoordinate()
this.setDimensions()
this.shown = true
@ -116,7 +116,7 @@ export class DropdownComponent implements OnInit {
}
async close () {
if (!this.disabled && this.shown) {
if (this.enabled && this.shown) {
this.shown = false
this.searchText = undefined
}
@ -134,7 +134,7 @@ export class DropdownComponent implements OnInit {
searchText?: string
@HostListener('document:keypress', [ '$event' ])
keypress (event: KeyboardEvent) {
if (!this.disabled && this.shown && this.searchable) {
if (this.enabled && this.shown && this.searchable) {
switch (event.key) {
case 'Backspace': {
if (this.searchText?.length) {

5
modules/components/src/components/flat-slider/flat-slider.component.scss
View File

@ -2,10 +2,11 @@
:host {
display: block;
padding: 2px;
filter: grayscale(80%);
}
:host.disabled {
filter: grayscale(80%);
:host.enabled {
filter: none;
}
.container {

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

@ -58,7 +58,7 @@ export class FlatSliderComponent {
public defaultColor = '#4f8d71'
public _enabled = true
@HostBinding('class.disabled') get disabled () { return !this.enabled }
@HostBinding('class.enabled')
@Input()
set enabled (shouldBeEnabled) {
this._enabled = shouldBeEnabled
@ -180,7 +180,7 @@ export class FlatSliderComponent {
})()
if (this.notches?.length) {
const closest = this.notches.reduce((prev, curr) => {
return (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
return (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev)
})
value = closest
}

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

@ -1,3 +1,3 @@
<eqm-container class="container" #container>
<input [(ngModel)]="text" [placeholder]="placeholder" (input)="inputChanged()" (keyup.enter)="enterPressed()" class="input-field" [readonly]="disabled || !editable" [style.font-size.px]="fontSize">
<input [(ngModel)]="text" [placeholder]="placeholder" (input)="inputChanged()" (keyup.enter)="enterPressed()" class="input-field" [readonly]="!enabled || !editable" [style.font-size.px]="fontSize">
</eqm-container>

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

@ -4,6 +4,7 @@
:host {
display: block;
width: 100%;
filter: grayscale(80%);
}
.container{
display: flex;
@ -30,6 +31,6 @@
}
}
:host.disabled {
filter: grayscale(80%);
:host.enabled {
filter: none;
}

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

@ -11,7 +11,7 @@ export class InputFieldComponent implements OnInit {
@Output() textChange = new EventEmitter()
@Output() enter = new EventEmitter()
@Input() editable = true
@HostBinding('class.disabled') @Input() disabled = false
@HostBinding('class.enabled') @Input() enabled = true
@Input() fontSize = 12
@ViewChild('container', { static: true }) container!: ElementRef

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

@ -1,9 +1,13 @@
@import "../../styles/colors.scss";
:host.disabled {
:host {
filter: grayscale(80%)
}
:host.enabled {
filter: none;
}
@mixin center {
position: absolute;
top: 50%;

12
modules/components/src/components/knob/knob.component.ts
View File

@ -31,7 +31,7 @@ export class KnobComponent implements OnInit {
@Input() set max (newMax) { this._max = newMax; this.calculateMiddleValue() }
get max () { return this._max }
@HostBinding('class.disabled') @Input() disabled = false
@HostBinding('class.enabled') @Input() enabled = true
@Input() doubleClickToAnimateToMiddle = true
@Input() animationDuration = 500
@ -92,7 +92,7 @@ export class KnobComponent implements OnInit {
}
mouseWheel (event: WheelEvent) {
if (!this.disabled) {
if (this.enabled) {
this.continueAnimation = false
const oldValue = this.value
this.value += -event.deltaY / (1000 / this.max)
@ -102,7 +102,7 @@ export class KnobComponent implements OnInit {
}
mousedown (event: MouseEvent) {
if (!this.disabled) {
if (this.enabled) {
this.continueAnimation = false
this.dragStartDegr = this.getDegreesFromEvent(event)
this.dragging = true
@ -116,7 +116,7 @@ export class KnobComponent implements OnInit {
@HostListener('gesturechange', [ '$event' ])
onGestureChange (event: any) {
if (!this.disabled) {
if (this.enabled) {
try {
this.continueAnimation = false
const oldValue = this.value
@ -130,7 +130,7 @@ export class KnobComponent implements OnInit {
}
mousemove (event: MouseEvent) {
if (!this.disabled) {
if (this.enabled) {
if (this.setDraggingFalseTimeout) {
window.clearTimeout(this.setDraggingFalseTimeout)
}
@ -171,7 +171,7 @@ export class KnobComponent implements OnInit {
}
doubleclick () {
if (this.doubleClickToAnimateToMiddle && !this.disabled) {
if (this.doubleClickToAnimateToMiddle && this.enabled) {
this.animatingToMiddle.emit()
this.userChangedValue.emit({ value: this.middleValue, transition: true })
this.animateKnob(this._value, this.middleValue)

5
modules/components/src/components/skeuomorph-slider/skeuomorph-slider.component.scss
View File

@ -9,6 +9,7 @@
position: relative;
transition-property: filter;
transition-duration: .5s;
filter: grayscale(80%);
}
.notches {
@ -66,6 +67,6 @@
}
}
:host.disabled {
filter: grayscale(80%);
:host.enabled {
filter: none;
}

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

@ -47,7 +47,7 @@ export class SkeuomorphSliderComponent implements OnInit {
@Output() valueChange = new EventEmitter()
@Input() showNotches = true
@HostBinding('class.disabled') @Input() disabled = false
@HostBinding('class.enabled') @Input() enabled = true
public _value = 0.5
@Input()
@ -79,7 +79,7 @@ export class SkeuomorphSliderComponent implements OnInit {
@HostListener('mousewheel', [ '$event' ])
onMouseWheel (event: WheelEvent): void {
if (!this.disabled && this.scrollEnabled) {
if (this.enabled && this.scrollEnabled) {
this.value += -event.deltaY / 100
this.userChangedValue.emit({ value: this.value })
}
@ -106,7 +106,7 @@ export class SkeuomorphSliderComponent implements OnInit {
@HostListener('mousedown', [ '$event' ])
onMouseDown (event: MouseEvent) {
if (!this.disabled) {
if (this.enabled) {
this.dragging = true
if (!this.doubleclickTimeout) {
this.doubleclickTimeout = setTimeout(() => {
@ -120,7 +120,7 @@ export class SkeuomorphSliderComponent implements OnInit {
@HostListener('mousemove', [ '$event' ])
onMouseMove (event: MouseEvent) {
if (!this.disabled && this.dragging) {
if (this.enabled && this.dragging) {
this.value = this.getValueFromMouseEvent(event)
this.userChangedValue.emit({ value: this.value })
}
@ -137,7 +137,7 @@ export class SkeuomorphSliderComponent implements OnInit {
}
doubleclick () {
if (!this.disabled) {
if (this.enabled) {
if (this.doubleclickTimeout) {
clearTimeout(this.doubleclickTimeout)
}

2
modules/components/src/components/value-screen/value-screen.component.html
View File

@ -1,4 +1,4 @@
<eqm-container [class]="'screen' + (disabled ? ' disabled' : '')" [style.font-size.px]="fontSize" [style.width.px]="fontSize * 4" [style.height.px]="fontSize * 1.4">
<eqm-container class="screen" [enabled]="enabled" [style.font-size.px]="fontSize" [style.width.px]="fontSize * 4" [style.height.px]="fontSize * 1.4">
<eqm-label [fontSize]="fontSize">
<ng-content></ng-content>
</eqm-label>

10
modules/components/src/components/value-screen/value-screen.component.scss
View File

@ -6,15 +6,13 @@
flex-direction: column;
align-items: center;
justify-content: center;
transition-property: filter;
transition-duration: .5s;
::ng-deep eqm-label {
span {
color: $accent !important;
}
}
transition-property: filter;
transition-duration: .5s;
}
.disabled {
filter: grayscale(80%);
}

2
modules/components/src/components/value-screen/value-screen.component.ts
View File

@ -11,7 +11,7 @@ import {
})
export class ValueScreenComponent implements OnInit {
@Input() fontSize = 10
@Input() disabled = false
@Input() enabled = true
ngOnInit () {}
}

2
ui/angular.json
View File

@ -1,5 +1,5 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"$schema": "../node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {

10
ui/src/app/components/options/options.component.html
View File

@ -12,7 +12,7 @@
<!-- Button -->
<eqm-button *ngIf="option.type === 'button'"
fxFill type="narrow"
[disabled]="!!option.isEnabled && option.isEnabled() === false"
[enabled]="!option.isEnabled || option.isEnabled() === true"
(pressed)="option.action()" [hoverable]="option.hasOwnProperty('hoverable') ? option.hoverable : true">
<eqm-label [clickable]="true">{{option.label}}</eqm-label>
</eqm-button>
@ -23,7 +23,7 @@
<div fxLayout="row" fxLayoutGap="5px" fxFlex>
<eqm-button *ngFor="let selectOption of option.options"
[fxFlex]="100 / option.options.length"
[disabled]="!!option.isEnabled && option.isEnabled() === false"
[enabled]="!option.isEnabled || option.isEnabled() === true"
[depressable]="false" [toggle]="true" type="narrow" [state]="option.selectedId === selectOption.id" (pressed)="selectedOption(option, selectOption)"
>
<eqm-label [clickable]="true">{{selectOption.label}}</eqm-label>
@ -73,7 +73,7 @@
(enter)="option.enter && option.enter()"
[placeholder]="option.placeholder"
[editable]="option.editable" [fontSize]="option.fontSize"
[disabled]="!!option.isEnabled && option.isEnabled() === false"
[enabled]="!option.isEnabled || option.isEnabled() === true"
></eqm-input-field>
<!-- Flat Slider -->
@ -89,7 +89,7 @@
></eqm-flat-slider>
<!-- Skeuomorph Slider -->
<eqm-skeuomorph-slider *ngIf="option.type === 'skeuomorph-slider'" [disabled]="!!option.isEnabled && option.isEnabled() === false"
<eqm-skeuomorph-slider *ngIf="option.type === 'skeuomorph-slider'" [enabled]="!option.isEnabled || option.isEnabled() === true"
[(value)]="option.value" [min]="option.min" [middle]="option.middle" [max]="option.max"
[animationDuration]="option.animationDuration" [animationFps]="option.animationFps"
[scrollEnabled]="option.scrollEnabled" [stickToMiddle]="option.stickToMiddle"
@ -100,7 +100,7 @@
<!-- Value Screen -->
<eqm-value-screen *ngIf="option.type === 'value-screen'"
[disabled]="!!option.isEnabled && option.isEnabled() === false"
[enabled]="!option.isEnabled || option.isEnabled() === true"
(click)="option.clicked && option.clicked()"
[eqmTooltip]="option.tooltip"
>

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

@ -141,7 +141,7 @@ export class OptionsComponent {
style.width = `${100 / row.length}%`
}
if (!!option.isEnabled && !option.isEnabled()) {
if (option.isEnabled && !option.isEnabled()) {
style.filter = 'grayscale(1)'
}
@ -149,7 +149,7 @@ export class OptionsComponent {
}
toggleCheckbox (checkbox: CheckboxOption) {
if (!!checkbox.isEnabled && !checkbox.isEnabled()) {
if (checkbox.isEnabled && !checkbox.isEnabled()) {
return
}
checkbox.value = !checkbox.value
@ -158,7 +158,7 @@ export class OptionsComponent {
}
selectedOption (option: SelectOption, selectOption: SelectOptionOption) {
if (!!option.isEnabled && !option.isEnabled()) {
if (option.isEnabled && !option.isEnabled()) {
return
}
if (option.selectedId !== selectOption.id) {

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

@ -1,14 +1,14 @@
<eqm-loading *ngIf="!selectedPreset || !presets"></eqm-loading>
<div *ngIf="selectedPreset && presets" fxLayoutAlign="start center" fxLayout="column" fxLayoutGap="10px" fxFill>
<div fxLayout="row" style="width: 95%" fxLayoutAlign="space-around center" fxLayoutGap="10px">
<eqm-value-screen [disabled]="!enabled">Global:</eqm-value-screen>
<eqm-value-screen [enabled]="enabled">Global:</eqm-value-screen>
<div style="width: 90%">
<eqm-flat-slider [enabled]="enabled" [min]="-24" [max]="24" [(value)]="global"
(userChangedValue)="setGain('global', $event)" [stickToMiddle]="stickSlidersToMiddle"
(stickedToMiddle)="performHapticFeedback()" orientation="horizontal">
</eqm-flat-slider>
</div>
<eqm-value-screen [disabled]="!enabled">{{screenValue(global)}}</eqm-value-screen>
<eqm-value-screen [enabled]="enabled">{{screenValue(global)}}</eqm-value-screen>
</div>
<table fxFill>
<tr>
@ -21,12 +21,12 @@
</tr>
<tr>
<td class="band annotations">
<eqm-button type="transparent" (pressed)="selectFlatPreset()" [disabled]="!enabled">
<eqm-button type="transparent" (pressed)="selectFlatPreset()" [enabled]="enabled">
<eqm-icon name="triangle" color="#4f8d71" [width]="10" [height]="10"></eqm-icon>
</eqm-button>
</td>
<td class="band" *ngFor="let frequencyLabel of bandFrequencyLabels; index as i; trackBy: bandTracker">
<eqm-skeuomorph-slider [disabled]="!enabled" [min]="-24" [max]="24" [(value)]="bands[i]"
<eqm-skeuomorph-slider [enabled]="enabled" [min]="-24" [max]="24" [(value)]="bands[i]"
(userChangedValue)="setGain(i, $event)" [stickToMiddle]="stickSlidersToMiddle"
(stickedToMiddle)="performHapticFeedback()" [animationDuration]="animationDuration"
[animationFps]="animationFps"></eqm-skeuomorph-slider>
@ -37,7 +37,7 @@
<eqm-label [fontSize]="8">Gain</eqm-label>
</td>
<td class="band" *ngFor="let frequencyLabel of bandFrequencyLabels; index as i; trackBy: bandTracker">
<eqm-value-screen [disabled]="!enabled" class="gain" [fontSize]="8">
<eqm-value-screen [enabled]="enabled" class="gain" [fontSize]="8">
{{screenValue(bands[i])}}
</eqm-value-screen>
</td>

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

@ -21,28 +21,28 @@ Then increase the overall volume to compensate'
fxLayoutAlign="space-around center">
<div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="5px">
<eqm-label>BASS</eqm-label>
<eqm-knob #bassKnob size="large" [disabled]="!enabled" [min]="-24" [max]="24" [(value)]="gains.bass"
<eqm-knob #bassKnob size="large" [enabled]="enabled" [min]="-24" [max]="24" [(value)]="gains.bass"
(userChangedValue)="setGain('bass', $event)" [stickToMiddle]="stickSlidersToMiddle"
(stickedToMiddle)="performHapticFeedback($event)" [animationDuration]="animationDuration"
[animationFps]="animationFps"></eqm-knob>
<eqm-value-screen [disabled]="!enabled">{{screenValue(gains.bass)}}</eqm-value-screen>
<eqm-value-screen [enabled]="enabled">{{screenValue(gains.bass)}}</eqm-value-screen>
</div>
<div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="5px">
<eqm-label>MID</eqm-label>
<eqm-knob #bassKnob size="large" [disabled]="!enabled" [min]="-24" [max]="24" [(value)]="gains.mid"
<eqm-knob #bassKnob size="large" [enabled]="!enabled" [min]="-24" [max]="24" [(value)]="gains.mid"
(userChangedValue)="setGain('mid', $event)" [stickToMiddle]="stickSlidersToMiddle"
(stickedToMiddle)="performHapticFeedback($event)" [animationDuration]="animationDuration"
[animationFps]="animationFps"></eqm-knob>
<eqm-value-screen [disabled]="!enabled">{{screenValue(gains.mid)}}</eqm-value-screen>
<eqm-value-screen [enabled]="enabled">{{screenValue(gains.mid)}}</eqm-value-screen>
</div>
<div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="5px">
<eqm-label>TREBLE</eqm-label>
<eqm-knob #bassKnob size="large" [disabled]="!enabled" [min]="-24" [max]="24" [(value)]="gains.treble"
<eqm-knob #bassKnob size="large" [enabled]="enabled" [min]="-24" [max]="24" [(value)]="gains.treble"
(userChangedValue)="setGain('treble', $event)" [stickToMiddle]="stickSlidersToMiddle"
(stickedToMiddle)="performHapticFeedback($event)" [animationDuration]="animationDuration"
[animationFps]="animationFps"></eqm-knob>
<eqm-value-screen [disabled]="!enabled">{{screenValue(gains.treble)}}</eqm-value-screen>
<eqm-value-screen [enabled]="enabled">{{screenValue(gains.treble)}}</eqm-value-screen>
</div>
</div>
@ -57,7 +57,7 @@ Then increase the overall volume to compensate'
[animationDuration]="animationDuration" [animationFps]="animationFps" [stickToMiddle]="true"
(stickedToMiddle)="performHapticFeedback($event)"></eqm-flat-slider>
</div>
<eqm-value-screen fxFlex="52px" [disabled]="!enabled">{{screenValue(gains.bass)}}</eqm-value-screen>
<eqm-value-screen fxFlex="52px" [enabled]="enabled">{{screenValue(gains.bass)}}</eqm-value-screen>
</div>
<div fxLayout="row" fxLayoutAlign="center center" fxFill fxLayoutGap="5px">
@ -68,7 +68,7 @@ Then increase the overall volume to compensate'
[animationDuration]="animationDuration" [animationFps]="animationFps" [stickToMiddle]="true"
(stickedToMiddle)="performHapticFeedback($event)"></eqm-flat-slider>
</div>
<eqm-value-screen fxFlex="52px" [disabled]="!enabled">{{screenValue(gains.mid)}}</eqm-value-screen>
<eqm-value-screen fxFlex="52px" [enabled]="enabled">{{screenValue(gains.mid)}}</eqm-value-screen>
</div>
<div fxLayout="row" fxLayoutAlign="center center" fxFill fxLayoutGap="5px">
<eqm-label fxFlex="52px">TREBLE</eqm-label>
@ -78,7 +78,7 @@ Then increase the overall volume to compensate'
[animationDuration]="animationDuration" [animationFps]="animationFps" [stickToMiddle]="true"
(stickedToMiddle)="performHapticFeedback($event)"></eqm-flat-slider>
</div>
<eqm-value-screen fxFlex="52px" [disabled]="!enabled">{{screenValue(gains.treble)}}</eqm-value-screen>
<eqm-value-screen fxFlex="52px" [enabled]="enabled">{{screenValue(gains.treble)}}</eqm-value-screen>
</div>
</div>
</div>

4
ui/src/app/sections/effects/equalizers/equalizers.component.html
View File

@ -22,7 +22,7 @@
<div fxFlex="20" fxLayoutAlign="end start">
<eqm-button [@FadeInOut] type="transparent" (pressed)="openSettings()"
[disabled]="!enabled"
[enabled]="enabled"
*ngIf="activeEqualizer && activeEqualizer.settings.length"
eqmTooltip="Settings" eqmTooltipPositionSide="bottom">
<eqm-icon name="cog" color="#8E8E93" [width]="14" [height]="14"></eqm-icon>
@ -34,7 +34,7 @@
<div [style.width.%]="100" fxLayout="row">
<eqm-equalizer-presets
[disabled]="!enabled"
[enabled]="enabled"
class="presets"
[presets]="presets" [selectedPreset]="selectedPreset"
(presetSelected)="selectPreset($event)"

10
ui/src/app/sections/effects/equalizers/presets/equalizer-presets.component.html
View File

@ -3,7 +3,7 @@
<div class="button-container" *ngIf="additionalLeftOption">
<eqm-button
size="square" [height]="20" [width]="20" [disabled]="disabled"
size="square" [height]="20" [width]="20" [enabled]="enabled"
(pressed)="additionalLeftOption.action()"
[eqmTooltip]="additionalLeftOption.tooltip">
<eqm-icon [name]="additionalLeftOption.icon" [width]="additionalLeftOption.iconSize || 10" [height]="additionalLeftOption.iconSize || 10" [stroke]="2"></eqm-icon>
@ -12,7 +12,7 @@
<div class="button-container">
<eqm-button
size="square" [height]="20" [width]="20" [disabled]="disabled || selectedPreset?.isDefault"
size="square" [height]="20" [width]="20" [enabled]="enabled && !selectedPreset?.isDefault"
(pressed)="deletePreset()"
eqmTooltip="Remove Preset">
<eqm-icon name="minus" [width]="10" [height]="10" [stroke]="2"></eqm-icon>
@ -21,7 +21,7 @@
<!-- Presets Dropdown -->
<eqm-dropdown
[disabled]="disabled"
[enabled]="enabled"
[editable]="false" noItemsPlaceholder="No Presets" placeholder="Select Preset"
[items]="presets"
[selectedItem]="selectedPreset"
@ -31,14 +31,14 @@
<!-- Right buttons -->
<div class="button-container">
<eqm-button type="square" [height]="20" [width]="20" eqmTooltip="Save Preset" (pressed)="savePreset()" [disabled]="disabled">
<eqm-button type="square" [height]="20" [width]="20" eqmTooltip="Save Preset" (pressed)="savePreset()" [enabled]="enabled">
<eqm-icon name="cross" [width]="10" [height]="10" [stroke]="5" [rotate]="45"></eqm-icon>
</eqm-button>
</div>
<div class="button-container" *ngIf="additionalRightOption">
<eqm-button
size="square" [height]="20" [width]="20" [disabled]="disabled"
size="square" [height]="20" [width]="20" [enabled]="enabled"
(pressed)="additionalRightOption.action()"
[eqmTooltip]="additionalRightOption.tooltip">
<eqm-icon [name]="additionalRightOption.icon" [width]="additionalRightOption.iconSize || 10" [height]="additionalRightOption.iconSize || 10" [stroke]="2"></eqm-icon>

2
ui/src/app/sections/effects/equalizers/presets/equalizer-presets.component.ts
View File

@ -24,7 +24,7 @@ export interface AdditionalPresetOption {
})
export class EqualizerPresetsComponent implements OnInit {
@Input() presets: EqualizerPreset[]
@Input() disabled = false
@Input() enabled = true
@Input() selectedPreset: EqualizerPreset
@Output() presetSelected = new EventEmitter<EqualizerPreset>()
@Output() presetSaved = new EventEmitter<string>()

2
ui/src/app/sections/source/file/file.component.html
View File

@ -1,5 +1,5 @@
<div class="file" fxLayout="row" fxFill fxLayoutAlign="space-between center" fxLayoutGap="10px">
<eqm-button [disabled]="!selected" size="square" (pressed)="toggleFilePlayback()">
<eqm-button [enabled]="!selected" size="square" (pressed)="toggleFilePlayback()">
<eqm-icon [name]="playing ? 'pause' : 'triangle'" [height]="playing ? 20 : 25" [width]="playing ? 20 : 25"></eqm-icon>
</eqm-button>
<div fxLayout="column" fxFill fxFlex="100%" fxLayoutAlign="center start">

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

@ -8,9 +8,10 @@
</ng-template>
<ng-template #boost>
<div fxLayout="column" fxLayoutAlign="center center" fxFlex="52px">
<div style="position: relative;" fxLayout="column" fxLayoutAlign="center center" fxFlex="52px">
<eqm-checkbox style="position: absolute; top: 5px; right: -8px;" [checked]="boostEnabled" (checkedChange)="setBoostEnabled($event)"></eqm-checkbox>
<eqm-label>Boost</eqm-label>
<eqm-value-screen>{{(gain | mapValue:1:2:0:100 | clipValue:0:100 | fixFloat:0:false)}}%</eqm-value-screen>
<eqm-value-screen [enabled]="boostEnabled">{{(gain | mapValue:1:2:0:100 | clipValue:0:100 | fixFloat:0:false)}}%</eqm-value-screen>
</div>
</ng-template>

6
ui/src/app/sections/volume/booster-balance/booster/booster.component.ts
View File

@ -97,6 +97,12 @@ export class BoosterComponent implements OnInit, OnDestroy {
this.boosterService.setGain(gain)
}
setBoostEnabled (enabled: boolean) {
this.boostEnabled = enabled
this.boosterService.setBoostEnabled(this.boostEnabled)
this.changeRef.detectChanges()
}
performHapticFeedback (animating) {
if (!animating) {
this.app.haptic()