refactor common components

frontend/src/app/components/footer/footer.component.html

@@ -5,9 +5,9 @@
       Made with
       <span class="material-icons-outlined heart"> favorite_border </span>
       by
-      <a class="link-unstyled" href="https://rubikscraft.nl" target="_blank"
-        >Rubikscraft</a
-      >
+      <a class="link-unstyled" href="https://rubikscraft.nl" target="_blank">
+        Rubikscraft
+      </a>
 
       {{ isDemo ? ' - Demo Version' : '' }}
     </span>
@@ -16,9 +16,9 @@
       &nbsp;-
       {{ version }}
       -
-      <a class="link-unstyled" href="https://github.com/rubikscraft/picsur"
-        >Source Code</a
-      >
+      <a class="link-unstyled" href="https://github.com/rubikscraft/picsur">
+        Source Code
+      </a>
     </span>
   </p>
 </footer>

frontend/src/app/components/footer/footer.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
 import { InfoService } from 'src/app/services/api/info.service';
 
@@ -6,9 +6,13 @@ import { InfoService } from 'src/app/services/api/info.service';
   selector: 'app-footer',
   templateUrl: './footer.component.html',
   styleUrls: ['./footer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FooterComponent implements OnInit {
-  constructor(private readonly infoService: InfoService) {}
+  constructor(
+    private readonly infoService: InfoService,
+    private readonly changeDetector: ChangeDetectorRef,
+  ) {}
 
   isDemo: boolean = false;
   version: string = 'Unkown Version';
@@ -22,6 +26,7 @@ export class FooterComponent implements OnInit {
     return this.infoService.live.subscribe((info) => {
       this.isDemo = info.demo;
       this.version = 'V' + info.version;
+      this.changeDetector.markForCheck();
     });
   }
 }

frontend/src/app/components/header/header.component.html

@@ -1,6 +1,6 @@
 <mat-toolbar color="primary">
   <button
-    *ngIf="enableHamburger"
+    *ngIf="_enableHamburger"
     class="me-3"
     mat-icon-button
     (click)="onHamburgerClick.emit()"
@@ -12,8 +12,12 @@
     <div class="svg-logo">
       <img src="/assets/branding/logo/picsur.svg" alt="Picsur" />
     </div>
-
-    <span class="ms-3 d-none d-sm-block">Picsur</span>
+    <div class="svg-logo-text">
+      <img
+        src="/assets/branding/text/picsur_light.svg"
+        class="ms-3 d-none d-sm-block"
+      />
+    </div>
   </a>
 
   <span class="spacer"></span>

frontend/src/app/components/header/header.component.scss

@@ -9,18 +9,29 @@
 
   display: flex;
   align-items: center;
+
+  img {
+    height: 48px;
+    width: 48px;
+    border-radius: 20%;
+  }
+}
+
+.svg-logo-text {
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+
+  img {
+    height: 32px;
+  }
 }
 
 .mat-menu-item[disabled] {
   color: inherit;
 }
 
-img {
-  height: 48px;
-  width: 48px;
-  border-radius: 20%;
-}
-
 h2 {
   margin: 0;
 }

frontend/src/app/components/header/header.component.ts

@@ -1,4 +1,12 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output
+} from '@angular/core';
 import { Router } from '@angular/router';
 import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
 import { Permission } from 'picsur-shared/dist/dto/permissions.enum';
@@ -13,9 +21,22 @@ import { UtilService } from 'src/app/util/util-module/util.service';
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HeaderComponent implements OnInit {
-  @Input('enableHamburger') enableHamburger: boolean = false;
+  constructor(
+    private readonly router: Router,
+    private readonly userService: UserService,
+    private readonly permissionService: PermissionService,
+    private readonly utilService: UtilService,
+    private readonly changeDetector: ChangeDetectorRef,
+  ) {}
+
+  @Input('enableHamburger') public set enableHamburger(value: boolean) {
+    this._enableHamburger = value;
+    this.changeDetector.markForCheck();
+  }
+  public _enableHamburger: boolean = true;
   @Output('onHamburgerClick') onHamburgerClick = new EventEmitter<void>();
 
   private currentUser: EUser | null = null;
@@ -33,13 +54,6 @@ export class HeaderComponent implements OnInit {
     return this.currentUser !== null;
   }
 
-  constructor(
-    private readonly router: Router,
-    private readonly userService: UserService,
-    private readonly permissionService: PermissionService,
-    private readonly utilService: UtilService,
-  ) {}
-
   ngOnInit(): void {
     this.subscribeUser();
     this.subscribePermissions();
@@ -49,6 +63,8 @@ export class HeaderComponent implements OnInit {
   subscribeUser() {
     return this.userService.live.subscribe((user) => {
       this.currentUser = user;
+
+      this.changeDetector.markForCheck();
     });
   }
 
@@ -59,6 +75,8 @@ export class HeaderComponent implements OnInit {
       this.canAccessSettings = permissions.includes(Permission.Settings);
       this.canUpload = permissions.includes(Permission.ImageUpload);
       this.canRegister = permissions.includes(Permission.UserRegister);
+
+      this.changeDetector.markForCheck();
     });
   }
 

frontend/src/app/components/masonry/masonry.component.html

@@ -2,5 +2,5 @@
 <div
   #column
   class="column"
-  *ngFor="let item of [].constructor(column_count); let i = index"
+  *ngFor="let item of [].constructor(_column_count); let i = index"
 ></div>

frontend/src/app/components/masonry/masonry.component.ts

@@ -1,12 +1,14 @@
 import {
   AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ContentChildren,
   ElementRef,
   Input,
   OnDestroy,
   QueryList,
-  ViewChildren,
+  ViewChildren
 } from '@angular/core';
 import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
 import { combineLatest, Subscription } from 'rxjs';
@@ -18,9 +20,16 @@ import { MasonryItemDirective } from './masonry-item.directive';
   selector: 'masonry',
   templateUrl: './masonry.component.html',
   styleUrls: ['./masonry.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MasonryComponent implements AfterViewInit, OnDestroy {
-  @Input('columns') column_count: number = 1;
+  constructor(private readonly changeDetector: ChangeDetectorRef) {}
+
+  @Input('columns') public set column_count(value: number) {
+    this._column_count = value;
+    this.changeDetector.markForCheck();
+  }
+  public _column_count = 1;
   @Input('update-speed') update_speed: number = 200;
 
   @ContentChildren(MasonryItemDirective)
@@ -55,6 +64,8 @@ export class MasonryComponent implements AfterViewInit, OnDestroy {
       });
 
     this.resortItems(items);
+
+    this.changeDetector.markForCheck();
   }
 
   private resortItems(items: QueryList<MasonryItemDirective>) {

frontend/src/app/components/paginator/paginator.module.ts

@@ -2,12 +2,12 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { RangeModule } from '../range/range.module';
+import { PipesModule } from 'src/app/pipes/pipes.module';
 import { PaginatorComponent } from './paginator.component';
 
 @NgModule({
   declarations: [PaginatorComponent],
-  imports: [CommonModule, MatIconModule, MatButtonModule, RangeModule],
+  imports: [CommonModule, MatIconModule, MatButtonModule, PipesModule],
   exports: [PaginatorComponent],
 })
 export class PaginatorModule {}

frontend/src/app/components/range/range.module.ts

@@ -1,10 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RangePipe } from './range.pipe';
-
-@NgModule({
-  declarations: [RangePipe],
-  imports: [CommonModule],
-  exports: [RangePipe],
-})
-export class RangeModule {}

frontend/src/app/pipes/pipes.module.ts

@@ -1,8 +1,9 @@
 import { NgModule } from '@angular/core';
+import { RangePipe } from './range.pipe';
 import { TruncatePipe } from './truncate.pipe';
 
 @NgModule({
-  declarations: [TruncatePipe],
-  exports: [TruncatePipe],
+  declarations: [TruncatePipe, RangePipe],
+  exports: [TruncatePipe, RangePipe],
 })
 export class PipesModule {}