myxelium/bytefy
1
0
Fork 0
mirror of https://github.com/Polaris-Entertainment/bytefy.git synced 2026-07-07 16:15:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add color picker

Browse Source
This commit is contained in:
Rallegit
2024-10-26 21:43:47 +02:00
parent 62ad9bd381
commit 63819805c8
6 changed files with 83 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
tools/src/app/app.routes.ts
View File

@@ -7,6 +7,7 @@ import { TextToCronComponent } from '../tools/client-side/text-to-cron/text-to-c
import { DdsToPngComponent } from '../tools/client-side/dds-to-png/dds-to-png.component';
import { ImageConverterComponent } from '../tools/server-side/image-converter/image-converter.component';
import { WordCounterComponent } from '../tools/client-side/word-counter/word-counter.component';
import { ColorPickerComponent } from '../tools/client-side/color-picker/color-picker/color-picker.component';
export const routes: Routes = [
{
@@ -48,6 +49,11 @@ export const routes: Routes = [
path: 'text-counter',
pathMatch: 'full',
component: WordCounterComponent
},
{
path: 'color-picker',
pathMatch: 'full',
component: ColorPickerComponent
}
];

5
tools/src/app/header/header.component.ts
View File

@@ -53,6 +53,11 @@ export class HeaderComponent implements OnInit {
label: 'Text to Cron Expression',
routerLink: 'text-to-cron',
routerLinkActiveOptions: { exact: true }
},
{
label: 'Color picker',
routerLink: 'color-picker',
routerLinkActiveOptions: { exact: true }
}
],

5
tools/src/tools/client-side/color-picker/color-picker/color-picker.component.html Normal file
View File

@@ -0,0 +1,5 @@
<div class="color-picker">
<label for="color-input">Choose Color:</label>
<input #colorPicker type="color" id="color-input" [formControl]="colorControl" (input)="onColorChange(colorPicker.value)" />
<input #colorText type="text" [formControl]="colorControl" (input)="onColorChange(colorText.value)" />
</div>

18
tools/src/tools/client-side/color-picker/color-picker/color-picker.component.scss Normal file
View File

@@ -0,0 +1,18 @@
.color-picker {
display: flex;
align-items: center;
gap: 10px;
}
.color-picker input[type="color"] {
width: 50px;
height: 50px;
border: none;
cursor: pointer;
}
.color-picker input[type="text"] {
padding: 5px;
font-size: 16px;
width: 100px;
}

23
tools/src/tools/client-side/color-picker/color-picker/color-picker.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ColorPickerComponent } from './color-picker.component';
describe('ColorPickerComponent', () => {
let component: ColorPickerComponent;
let fixture: ComponentFixture<ColorPickerComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [ColorPickerComponent]
})
.compileComponents();
fixture = TestBed.createComponent(ColorPickerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

26
tools/src/tools/client-side/color-picker/color-picker/color-picker.component.ts Normal file
View File

@@ -0,0 +1,26 @@
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';
@Component({
selector: 'app-color-picker',
standalone: true,
imports: [
CommonModule,
FormsModule,
InputTextModule,
ButtonModule,
ReactiveFormsModule
],
templateUrl: './color-picker.component.html',
styleUrl: './color-picker.component.scss'
})
export class ColorPickerComponent {
colorControl = new FormControl('#ff0000');
onColorChange(value: string) {
this.colorControl.setValue(value);
}
}