From d9b60d8a94554ca900178669803f5893e2845737 Mon Sep 17 00:00:00 2001 From: akastijn Date: Sat, 27 Dec 2025 21:04:55 +0100 Subject: [PATCH] Removable footer, compact styling for particle creator --- frontend/src/app/app.component.spec.ts | 29 ------- frontend/src/app/app.component.ts | 9 +- .../pages/footer/footer/footer.component.html | 87 ++++++++++--------- .../pages/footer/footer/footer.component.ts | 12 +-- .../components/frames/frames.component.html | 32 ++++--- .../components/frames/frames.component.scss | 30 +++++++ .../frames/frames.component.spec.ts | 23 ----- .../components/frames/frames.component.ts | 18 ++-- .../pages/particles/particles.component.html | 52 +++++------ .../particles/particles.component.spec.ts | 23 ----- .../pages/particles/particles.component.ts | 21 ++--- frontend/src/app/services/footer.service.ts | 10 +++ .../full-size/full-size.component.ts | 24 +++-- 13 files changed, 175 insertions(+), 195 deletions(-) delete mode 100644 frontend/src/app/app.component.spec.ts delete mode 100644 frontend/src/app/pages/particles/components/frames/frames.component.spec.ts delete mode 100644 frontend/src/app/pages/particles/particles.component.spec.ts create mode 100644 frontend/src/app/services/footer.service.ts diff --git a/frontend/src/app/app.component.spec.ts b/frontend/src/app/app.component.spec.ts deleted file mode 100644 index 998c602..0000000 --- a/frontend/src/app/app.component.spec.ts +++ /dev/null @@ -1,29 +0,0 @@ -import {TestBed} from '@angular/core/testing'; -import {AppComponent} from './app.component'; - -describe('AppComponent', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [AppComponent], - }).compileComponents(); - }); - - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }); - - it(`should have the 'frontend' title`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('frontend'); - }); - - it('should render title', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('h1')?.textContent).toContain('Hello, frontend'); - }); -}); diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index c09668c..1df471c 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -1,7 +1,7 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, inject, OnInit} from '@angular/core'; import {Meta, Title} from '@angular/platform-browser'; import {ALTITUDE_VERSION} from '@custom-types/constant'; -import {Router, RouterOutlet} from '@angular/router'; +import {RouterOutlet} from '@angular/router'; import {FooterComponent} from '@pages/footer/footer/footer.component'; @Component({ @@ -27,9 +27,8 @@ export class AppComponent implements OnInit { ALTITUDE_VERSION + ',altitude,alttd,play,join,find,friends,friendly,simple,private,whitelist,whitelisted,creative,' + 'worldedit' - constructor(private titleService: Title, private metaService: Meta, private router: Router) { - - } + private readonly titleService = inject(Title); + private readonly metaService = inject(Meta); ngOnInit(): void { this.titleService.setTitle(this.title) diff --git a/frontend/src/app/pages/footer/footer/footer.component.html b/frontend/src/app/pages/footer/footer/footer.component.html index fc9de2b..d00bc89 100644 --- a/frontend/src/app/pages/footer/footer/footer.component.html +++ b/frontend/src/app/pages/footer/footer/footer.component.html @@ -1,44 +1,49 @@ - + +} diff --git a/frontend/src/app/pages/footer/footer/footer.component.ts b/frontend/src/app/pages/footer/footer/footer.component.ts index 96ca5b3..7ddbdec 100644 --- a/frontend/src/app/pages/footer/footer/footer.component.ts +++ b/frontend/src/app/pages/footer/footer/footer.component.ts @@ -1,19 +1,21 @@ -import {Component} from '@angular/core'; +import {Component, computed, inject} from '@angular/core'; import {ALTITUDE_VERSION} from '@custom-types/constant'; -import { NgOptimizedImage } from '@angular/common'; +import {FooterService} from '@services/footer.service'; import {RouterLink} from '@angular/router'; @Component({ selector: 'app-footer', standalone: true, imports: [ - RouterLink, - NgOptimizedImage -], + RouterLink + ], templateUrl: './footer.component.html', styleUrl: './footer.component.scss' }) export class FooterComponent { + private readonly footerService: FooterService = inject(FooterService); + hideFooter = computed(() => (this.footerService.hideFooter())); + public getCurrentYear() { return new Date().getFullYear(); } diff --git a/frontend/src/app/pages/particles/components/frames/frames.component.html b/frontend/src/app/pages/particles/components/frames/frames.component.html index 26cb5ad..e4bc5d0 100644 --- a/frontend/src/app/pages/particles/components/frames/frames.component.html +++ b/frontend/src/app/pages/particles/components/frames/frames.component.html @@ -1,12 +1,27 @@
- - Frames + +
+ Frames +
+ + + +
+
+ (selectedIndexChange)="switchFrame(frames[$event])"> @for (frameId of frames; track frameId) {
@@ -33,21 +48,10 @@
}
-
- -
} -
- -
diff --git a/frontend/src/app/pages/particles/components/frames/frames.component.scss b/frontend/src/app/pages/particles/components/frames/frames.component.scss index ffb8834..876f093 100644 --- a/frontend/src/app/pages/particles/components/frames/frames.component.scss +++ b/frontend/src/app/pages/particles/components/frames/frames.component.scss @@ -6,6 +6,36 @@ padding: 15px; } +:host ::ng-deep .mat-mdc-card-header-text { + width: 90%; + text-align: center; +} + +.frame-header-row { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.frame-title-text { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.add-button { + color: green +} + +.can-delete { + color: red; +} + +.can-not-delete { + color: gray; +} + .particles-list { height: 550px; overflow-y: auto; diff --git a/frontend/src/app/pages/particles/components/frames/frames.component.spec.ts b/frontend/src/app/pages/particles/components/frames/frames.component.spec.ts deleted file mode 100644 index 5db801e..0000000 --- a/frontend/src/app/pages/particles/components/frames/frames.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { FramesComponent } from './frames.component'; - -describe('FramesComponent', () => { - let component: FramesComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [FramesComponent] - }) - .compileComponents(); - - fixture = TestBed.createComponent(FramesComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/pages/particles/components/frames/frames.component.ts b/frontend/src/app/pages/particles/components/frames/frames.component.ts index b1f806c..b8111b3 100644 --- a/frontend/src/app/pages/particles/components/frames/frames.component.ts +++ b/frontend/src/app/pages/particles/components/frames/frames.component.ts @@ -1,5 +1,5 @@ -import {Component} from '@angular/core'; -import {MatButton, MatIconButton} from "@angular/material/button"; +import {Component, inject} from '@angular/core'; +import {MatIconButton} from "@angular/material/button"; import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from "@angular/material/card"; import {MatTab, MatTabGroup} from "@angular/material/tabs"; @@ -7,11 +7,11 @@ import {ParticleData} from '../../models/particle.model'; import {MatIcon} from '@angular/material/icon'; import {ParticleManagerService} from '../../services/particle-manager.service'; import {FrameManagerService} from '../../services/frame-manager.service'; +import {MatTooltipModule} from '@angular/material/tooltip'; @Component({ selector: 'app-frames', imports: [ - MatButton, MatCard, MatCardContent, MatCardHeader, @@ -19,17 +19,15 @@ import {FrameManagerService} from '../../services/frame-manager.service'; MatIcon, MatIconButton, MatTab, - MatTabGroup -], + MatTabGroup, + MatTooltipModule, + ], templateUrl: './frames.component.html', styleUrl: './frames.component.scss' }) export class FramesComponent { - - constructor( - private particleManagerService: ParticleManagerService, - private frameManagerService: FrameManagerService) { - } + private particleManagerService = inject(ParticleManagerService); + private frameManagerService = inject(FrameManagerService); /** * Get the particle data diff --git a/frontend/src/app/pages/particles/particles.component.html b/frontend/src/app/pages/particles/particles.component.html index 17579b5..d32f2f8 100644 --- a/frontend/src/app/pages/particles/particles.component.html +++ b/frontend/src/app/pages/particles/particles.component.html @@ -6,35 +6,35 @@
-
-
-
-
-
- -
-
- -
- - - - - {{ planePosition }} offset from center + +
+
+
+
+
+
-
-
- - -
- +
+ +
+ + + + + {{ planePosition }} offset from center +
+
+
+ + + +
-
+
-
+
diff --git a/frontend/src/app/pages/particles/particles.component.spec.ts b/frontend/src/app/pages/particles/particles.component.spec.ts deleted file mode 100644 index 5566cab..0000000 --- a/frontend/src/app/pages/particles/particles.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ParticlesComponent } from './particles.component'; - -describe('ParticlesComponent', () => { - let component: ParticlesComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [ParticlesComponent] - }) - .compileComponents(); - - fixture = TestBed.createComponent(ParticlesComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/pages/particles/particles.component.ts b/frontend/src/app/pages/particles/particles.component.ts index 8c00767..f21f4c6 100644 --- a/frontend/src/app/pages/particles/particles.component.ts +++ b/frontend/src/app/pages/particles/particles.component.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, ViewChild} from '@angular/core'; +import {Component, ElementRef, inject, ViewChild} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; @@ -23,6 +23,8 @@ import {FramesComponent} from './components/frames/frames.component'; import {MatSnackBar} from '@angular/material/snack-bar'; import {RenderContainerComponent} from './components/render-container/render-container.component'; import {ParticlesService} from '@api'; +import {MatTooltipModule} from '@angular/material/tooltip'; +import {FullSizeComponent} from '@shared-components/full-size/full-size.component'; @Component({ selector: 'app-particles', @@ -43,21 +45,20 @@ import {ParticlesService} from '@api'; PropertiesComponent, ParticleComponent, FramesComponent, - RenderContainerComponent -], + RenderContainerComponent, + MatTooltipModule, + FullSizeComponent + ], templateUrl: './particles.component.html', styleUrl: './particles.component.scss' }) export class ParticlesComponent { @ViewChild('planeSlider') planeSlider!: ElementRef; - constructor( - private intersectionPlaneService: IntersectionPlaneService, - private particleManagerService: ParticleManagerService, - private matSnackBar: MatSnackBar, - private particlesService: ParticlesService, - ) { - } + private readonly intersectionPlaneService = inject(IntersectionPlaneService); + private readonly particleManagerService = inject(ParticleManagerService); + private readonly matSnackBar = inject(MatSnackBar); + private readonly particlesService = inject(ParticlesService); /** * Update plane position based on slider diff --git a/frontend/src/app/services/footer.service.ts b/frontend/src/app/services/footer.service.ts new file mode 100644 index 0000000..cc4fe7f --- /dev/null +++ b/frontend/src/app/services/footer.service.ts @@ -0,0 +1,10 @@ +import {Injectable, signal} from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class FooterService { + + public hideFooter = signal(false); + +} diff --git a/frontend/src/app/shared-components/full-size/full-size.component.ts b/frontend/src/app/shared-components/full-size/full-size.component.ts index 6ba74a9..11fe241 100644 --- a/frontend/src/app/shared-components/full-size/full-size.component.ts +++ b/frontend/src/app/shared-components/full-size/full-size.component.ts @@ -1,4 +1,5 @@ -import {AfterViewInit, Component, ElementRef, Input, OnDestroy, Renderer2} from '@angular/core'; +import {AfterViewInit, Component, ElementRef, inject, input, OnDestroy, OnInit, Renderer2} from '@angular/core'; +import {FooterService} from '@services/footer.service'; @Component({ selector: 'app-full-size', @@ -7,17 +8,20 @@ import {AfterViewInit, Component, ElementRef, Input, OnDestroy, Renderer2} from templateUrl: './full-size.component.html', styleUrl: './full-size.component.scss' }) -export class FullSizeComponent implements AfterViewInit, OnDestroy { +export class FullSizeComponent implements OnInit, AfterViewInit, OnDestroy { private resizeObserver: ResizeObserver | null = null; private boundHandleResize: any; // Optional extra offset in pixels to subtract from available height - @Input() extraOffset: number = 0; + extraOffset = input(0); + hideFooter = input(false); - constructor( - private elementRef: ElementRef, - private renderer: Renderer2 - ) { + private readonly elementRef = inject(ElementRef); + private readonly renderer = inject(Renderer2); + private readonly footerService = inject(FooterService); + + ngOnInit(): void { + this.footerService.hideFooter.set(this.hideFooter()); } ngAfterViewInit(): void { @@ -40,6 +44,8 @@ export class FullSizeComponent implements AfterViewInit, OnDestroy { if (this.boundHandleResize) { window.removeEventListener('resize', this.boundHandleResize); } + + this.footerService.hideFooter.set(false); } private handleResize() { @@ -70,9 +76,9 @@ export class FullSizeComponent implements AfterViewInit, OnDestroy { if (container) { const headerHeight = headerElement ? headerElement.getBoundingClientRect().height : 0; - const footerHeight = footerElement ? footerElement.getBoundingClientRect().height : 0; + const footerHeight = this.hideFooter() ? 0 : (footerElement ? footerElement.getBoundingClientRect().height : 0); - const totalOffset = headerHeight + footerHeight + (this.extraOffset || 0); + const totalOffset = headerHeight + footerHeight + (this.extraOffset() || 0); const calculatedHeight = `calc(100vh - ${totalOffset}px)`; this.renderer.setStyle(container, 'height', calculatedHeight); }