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

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

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