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

Update particle-related styles and improve forms' structure in particle components.

Browse Source
This commit is contained in:
akastijn 2025-12-27 21:13:49 +01:00
parent d9b60d8a94
commit 37d7c37f3b
6 changed files with 61 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,7 @@
<input type="color" [(ngModel)]="selectedColor">
<span>Current color: {{ selectedColor }}</span>
</div>
<mat-form-field appearance="fill" class="type-field">
<mat-form-field appearance="outline" class="type-field">
<mat-label>Select Particle Type</mat-label>
<input type="text"
placeholder="Search for a particle type"

41
frontend/src/app/pages/particles/components/properties/properties.component.html
View File

@ -9,9 +9,6 @@
<mat-label>Particle Name</mat-label>
<input matInput [(ngModel)]="particleData.particle_name" placeholder="Enter particle name">
</mat-form-field>
</div>
<div class="form-row">
<mat-form-field appearance="outline">
<mat-label>Display Name</mat-label>
<input matInput [(ngModel)]="particleData.display_name" placeholder="Enter display name">
@ -27,16 +24,6 @@
}
</mat-select>
</mat-form-field>
</div>
<div class="form-row">
<mat-form-field appearance="outline">
<mat-label>Lore</mat-label>
<textarea matInput [(ngModel)]="particleData.lore" placeholder="Enter lore"></textarea>
</mat-form-field>
</div>
<div class="form-row">
<mat-form-field appearance="outline">
<mat-label>Display Item</mat-label>
<input matInput [(ngModel)]="particleData.display_item" placeholder="Enter display item">
@ -44,20 +31,29 @@
</div>
<div class="form-row">
<mat-form-field appearance="outline">
<mat-label>Permission</mat-label>
<input matInput [(ngModel)]="particleData.permission" placeholder="Enter permission">
<mat-form-field appearance="outline" class="lore-double">
<mat-label>Lore</mat-label>
<textarea matInput [(ngModel)]="particleData.lore" placeholder="Enter lore"></textarea>
</mat-form-field>
</div>
<div class="form-row">
<mat-form-field appearance="outline">
<mat-label>Package Permission</mat-label>
<mat-label>Permission name</mat-label>
<input matInput [(ngModel)]="particleData.permission" placeholder="Enter permission">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Package name</mat-label>
<input matInput [(ngModel)]="particleData.package_permission" placeholder="Enter package permission">
</mat-form-field>
</div>
<div class="form-row">
<mat-form-field appearance="outline">
<mat-label>Random Offset</mat-label>
<input matInput type="number" [(ngModel)]="particleData.random_offset"
placeholder="Enter random offset">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Frame Delay</mat-label>
<input matInput type="number" [(ngModel)]="particleData.frame_delay" placeholder="Enter frame delay">
@ -69,9 +65,6 @@
<mat-label>Repeat</mat-label>
<input matInput type="number" [(ngModel)]="particleData.repeat" placeholder="Enter repeat count">
</mat-form-field>
</div>
<div class="form-row">
<mat-form-field appearance="outline">
<mat-label>Repeat Delay</mat-label>
<input matInput type="number" [(ngModel)]="particleData.repeat_delay"
@ -79,14 +72,6 @@
</mat-form-field>
</div>
<div class="form-row">
<mat-form-field appearance="outline">
<mat-label>Random Offset</mat-label>
<input matInput type="number" [(ngModel)]="particleData.random_offset"
placeholder="Enter random offset">
</mat-form-field>
</div>
<div class="form-row">
<mat-checkbox [(ngModel)]="particleData.stationary"><span>Stationary</span></mat-checkbox>
</div>

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

@ -1,5 +1,12 @@
.form-row {
margin-bottom: 15px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
align-items: start;
}
.lore-double {
grid-column: span 2;
}
.card-div {

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

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

4
frontend/src/app/pages/particles/particles.component.html
View File

@ -10,8 +10,9 @@
<section class="darkmodeSection full-height">
<section class="column">
<div class="renderer-section column">
<div class="flex row">
<div class="flex row spacing">
<div class="flex side-column">
<app-particle></app-particle>
<app-particle-properties></app-particle-properties>
</div>
<div class="flex middle-column">
@ -25,7 +26,6 @@
</div>
</div>
<div class="flex side-column">
<app-particle></app-particle>
<app-frames>
<button mat-icon-button matTooltip="Copy JSON to clipboard" (click)="copyJson()">
<mat-icon>content_copy</mat-icon>

5
frontend/src/app/pages/particles/particles.component.scss
View File

@ -1,9 +1,14 @@
.renderer-section {
margin-top: 15px;
flex: 1;
min-width: 300px;
display: flex;
}
.spacing {
gap: 10px;
}
.side-column {
flex: 1;
flex-direction: column;