mirror of
https://github.com/paperless-ngx/paperless-ngx.git
synced 2025-04-02 13:45:10 -05:00
Working conversion
This commit is contained in:
parent
1841cefbd8
commit
4df7f92a56
@ -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>
|
||||
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
@ -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()">
|
||||
|
@ -2,6 +2,7 @@ import { DOCUMENT } from '@angular/common';
|
||||
import { Inject, Injectable, LOCALE_ID, Renderer2, RendererFactory2, RendererStyleFlags2 } from '@angular/core';
|
||||
import { Meta } from '@angular/platform-browser';
|
||||
import { CookieService } from 'ngx-cookie-service';
|
||||
import { hexToHsl } from 'src/app/utils/color';
|
||||
|
||||
export interface PaperlessSettings {
|
||||
key: string
|
||||
@ -87,9 +88,9 @@ export class SettingsService {
|
||||
}
|
||||
|
||||
if (themeColor) {
|
||||
const hsl = themeColor.split(',')
|
||||
this.renderer.setStyle(document.documentElement, '--pngx-primary',`${+hsl[0] * 360},${hsl[1] * 100}%`, RendererStyleFlags2.DashCase)
|
||||
this.renderer.setStyle(document.documentElement, '--pngx-primary-lightness',`${hsl[2] * 100}%`, RendererStyleFlags2.DashCase)
|
||||
const hsl = hexToHsl(themeColor)
|
||||
this.renderer.setStyle(document.documentElement, '--pngx-primary',`${+hsl.h * 360},${hsl.s * 100}%`, RendererStyleFlags2.DashCase)
|
||||
this.renderer.setStyle(document.documentElement, '--pngx-primary-lightness',`${hsl.l * 100}%`, RendererStyleFlags2.DashCase)
|
||||
} else {
|
||||
this.renderer.removeStyle(document.documentElement, '--pngx-primary', RendererStyleFlags2.DashCase)
|
||||
this.renderer.removeStyle(document.documentElement, '--pngx-primary-lightness', RendererStyleFlags2.DashCase)
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { ColorMode } from "ngx-color"
|
||||
import { HSL } from "ngx-color"
|
||||
|
||||
function componentToHex(c) {
|
||||
var hex = Math.floor(c).toString(16)
|
||||
@ -6,8 +6,8 @@ function componentToHex(c) {
|
||||
}
|
||||
|
||||
/**
|
||||
* https://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
|
||||
*
|
||||
* https://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
|
||||
* Converts an HSL color value to RGB. Conversion formula
|
||||
* adapted from http://en.wikipedia.org/wiki/HSL_color_space.
|
||||
* Assumes h, s, and l are contained in the set [0, 1] and
|
||||
@ -43,21 +43,47 @@ function hslToRgb(h, s, l){
|
||||
return [r * 255, g * 255, b * 255]
|
||||
}
|
||||
|
||||
export function hslToHex(h: number, s: number, l:number): string {
|
||||
const rgb = hslToRgb(h,s,l)
|
||||
return `#${componentToHex(rgb[0])}${componentToHex(rgb[1])}${componentToHex(rgb[2])}`
|
||||
/**
|
||||
* https://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
|
||||
* Converts an RGB color value to HSL. Conversion formula
|
||||
* adapted from http://en.wikipedia.org/wiki/HSL_color_space.
|
||||
* Assumes r, g, and b are contained in the set [0, 255] and
|
||||
* returns h, s, and l in the set [0, 1].
|
||||
*
|
||||
* @param Number r The red color value
|
||||
* @param Number g The green color value
|
||||
* @param Number b The blue color value
|
||||
* @return Array The HSL representation
|
||||
*/
|
||||
export function rgbToHsl(r, g, b){
|
||||
r /= 255, g /= 255, b /= 255;
|
||||
var max = Math.max(r, g, b), min = Math.min(r, g, b);
|
||||
var h, s, l = (max + min) / 2;
|
||||
|
||||
if(max == min){
|
||||
h = s = 0; // achromatic
|
||||
}else{
|
||||
var d = max - min;
|
||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
||||
switch(max){
|
||||
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
|
||||
case g: h = (b - r) / d + 2; break;
|
||||
case b: h = (r - g) / d + 4; break;
|
||||
}
|
||||
h /= 6;
|
||||
}
|
||||
|
||||
return [h, s, l];
|
||||
}
|
||||
|
||||
export function randomColor(colorMode: ColorMode = ColorMode.HEX) {
|
||||
const h = Math.random()
|
||||
const s = 0.6
|
||||
const l = Math.random() * 0.4 + 0.4
|
||||
switch (colorMode) {
|
||||
case ColorMode.HSL:
|
||||
return `${h},${s},${l}`
|
||||
break;
|
||||
default: // HEX
|
||||
return hslToHex(h,s,l)
|
||||
break;
|
||||
}
|
||||
export function hexToHsl(hex: string): HSL {
|
||||
hex = hex.replace('#', '')
|
||||
let aRgbHex = hex.match(/.{1,2}/g)
|
||||
const hsl = rgbToHsl(parseInt(aRgbHex[0], 16), parseInt(aRgbHex[1], 16), parseInt(aRgbHex[2], 16))
|
||||
return { h: hsl[0], s: hsl[1], l: hsl[2] }
|
||||
}
|
||||
|
||||
export function randomColor() {
|
||||
let rgb = hslToRgb(Math.random(), 0.6, Math.random() * 0.4 + 0.4)
|
||||
return `#${componentToHex(rgb[0])}${componentToHex(rgb[1])}${componentToHex(rgb[2])}`
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user