Working conversion

This commit is contained in:
Michael Shamoon
2022-03-09 15:34:26 -08:00
parent 1841cefbd8
commit 4df7f92a56
5 changed files with 55 additions and 39 deletions

View File

@@ -6,7 +6,7 @@
<ng-template #popContent>
<div style="min-width: 200px;" class="pb-3">
<color-slider [color]="value" (onChangeComplete)="sliderChanged($event)"></color-slider>
<color-slider [color]="value" (onChangeComplete)="colorChanged($event.color.hex)"></color-slider>
</div>
</ng-template>

View File

@@ -1,7 +1,6 @@
import { Component, Input, forwardRef } from '@angular/core';
import { Component, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { ColorEvent, ColorMode } from 'ngx-color';
import { randomColor, hslToHex } from 'src/app/utils/color';
import { randomColor } from 'src/app/utils/color';
import { AbstractInputComponent } from '../abstract-input';
@Component({
@@ -16,26 +15,16 @@ import { AbstractInputComponent } from '../abstract-input';
})
export class ColorComponent extends AbstractInputComponent<string> {
@Input()
colorMode: ColorMode = ColorMode.HEX
constructor() {
super()
}
randomize() {
const color = randomColor(this.colorMode)
let colorHex = color
if (this.colorMode == ColorMode.HSL) {
const hsl = color.split(',')
colorHex = hslToHex(+hsl[0], +hsl[1], +hsl[2])
}
this.value = colorHex
this.onChange(color)
this.colorChanged(randomColor())
}
sliderChanged(colorEvent:ColorEvent) {
this.value = colorEvent.color.hex
this.onChange(colorEvent.color[this.colorMode].toString())
colorChanged(value) {
this.value = value
this.onChange(value)
}
}

View File

@@ -105,7 +105,7 @@
<span i18n>Theme Color</span>
</div>
<div class="col-3">
<app-input-color i18n-title colorMode="hsl" formControlName="themeColor" [error]="error?.color"></app-input-color>
<app-input-color i18n-title formControlName="themeColor" [error]="error?.color"></app-input-color>
</div>
<div class="col-2">
<button class="btn btn-link btn-sm pt-2 ps-0" [disabled]="!this.settingsForm.get('themeColor').value" (click)="clearThemeColor()">