Altitude/AltitudeWeb
5
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor ParticleComponent by replacing custom color picker with Angular Material form fields, adjusting style

Browse Source
This commit is contained in:
akastijn 2025-12-27 21:20:49 +01:00
parent 37d7c37f3b
commit be78b66c5a
3 changed files with 7 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app/pages/particles/components/particle/particle.component.html
View File

@ -6,10 +6,10 @@
<mat-card-content>
<div class="particle-properties">
<div class="property-row">
<div class="color-picker">
<input type="color" [(ngModel)]="selectedColor">
<span>Current color: {{ selectedColor }}</span>
</div>
<mat-form-field appearance="outline">
<mat-label>Current color: {{ selectedColor }}</mat-label>
<input type="color" class="color-input" matInput [(ngModel)]="selectedColor">
</mat-form-field>
<mat-form-field appearance="outline" class="type-field">
<mat-label>Select Particle Type</mat-label>
<input type="text"

9
frontend/src/app/pages/particles/components/particle/particle.component.scss
View File

@ -6,10 +6,10 @@
.particle-properties {
display: flex;
flex-direction: column;
gap: 20px;
}
.property-row {
margin-top: 20px;
display: flex;
align-items: center;
gap: 15px;
@ -22,11 +22,8 @@
max-width: 40ch;
}
.color-picker {
display: flex;
flex: 1;
align-items: center;
gap: 10px;
.color-input {
height: 1em;
}
.color-picker input[type="color"] {

23
frontend/src/app/pages/particles/components/particle/particle.component.spec.ts
View File

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