Migration of first components into signals

VernissageApp · Jan 3, 2025 · fc73fad · fc73fad
1 parent 770f8df
commit fc73fad
Show file tree

Hide file tree

Showing 29 changed files with 908 additions and 843 deletions.
diff --git a/src/app/components/core/header/header.component.html b/src/app/components/core/header/header.component.html
@@ -123,7 +123,7 @@
             }
 
             <button mat-icon-button color="primary" [routerLink]="['/notifications']" aria-label="Notifications">
-                <mat-icon *ngIf="notificationCounter" [matBadge]="notificationCounter" matBadgeColor="warn" matBadgeSize="small">notifications_none</mat-icon>
+                <mat-icon *ngIf="notificationCounter" [matBadge]="notificationCounter" matBadgeColor="warn" matBadgeSize="small" aria-hidden="false">notifications_none</mat-icon>
                 <mat-icon *ngIf="!notificationCounter">notifications_none</mat-icon>
             </button>
 

diff --git a/src/app/components/core/header/header.component.scss b/src/app/components/core/header/header.component.scss
@@ -28,6 +28,7 @@ a.logo {
         height: 44px;    
         background-image: url('/assets/logo-light.svg');
         background-size: 116px 44px;
+        background-repeat: no-repeat;
     }
 
     .beta {
@@ -39,6 +40,7 @@ a.logo {
         top: -22px;
         background-image: url('/assets/beta-light.png');
         background-size: 30px 15px;
+        background-repeat: no-repeat;
     }
 }
 

diff --git a/src/app/components/widgets/avatar/avatar.component.html b/src/app/components/widgets/avatar/avatar.component.html
@@ -1,6 +1,6 @@
 <img
-    [ngSrc]="user?.avatarUrl ?? 'assets/avatar.svg'"
+    [ngSrc]="user()?.avatarUrl ?? 'assets/avatar.svg'"
     width="600"
     height="600"
-    [ngClass]="{ 'circle': isCircle, 'rectangle': !isCircle, 'huge': size === avatarSize.huge, 'big': size === avatarSize.big, 'medium': size === avatarSize.medium, 'small': size === avatarSize.small, 'verysmall': size === avatarSize.verysmall}"
+    [ngClass]="{ 'circle': isCircle(), 'rectangle': !isCircle(), 'huge': size() === avatarSize.huge, 'big': size() === avatarSize.big, 'medium': size() === avatarSize.medium, 'small': size() === avatarSize.small, 'verysmall': size() === avatarSize.verysmall}"
     alt="Avatar" />
diff --git a/src/app/components/widgets/avatar/avatar.component.ts b/src/app/components/widgets/avatar/avatar.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, input, OnInit, signal } from '@angular/core';
 import { User } from 'src/app/models/user';
 import { AvatarSize } from './avatar-size';
 import { PreferencesService } from 'src/app/services/common/preferences.service';
@@ -10,17 +10,16 @@ import { PreferencesService } from 'src/app/services/common/preferences.service'
     standalone: false
 })
 export class AvatarComponent implements OnInit {
-    readonly avatarSize = AvatarSize;
+    public user = input.required<User | undefined>();
+    public size = input<AvatarSize>(AvatarSize.huge);
 
-    @Input() user?: User;
-    @Input() size: AvatarSize = AvatarSize.huge;
-
-    isCircle = false;
+    protected readonly avatarSize = AvatarSize;
+    protected isCircle = signal(false);
 
     constructor(private preferencesService: PreferencesService) {
     }
 
     ngOnInit(): void {
-        this.isCircle = this.preferencesService.isCircleAvatar;
+        this.isCircle.set(this.preferencesService.isCircleAvatar);
     }
 }
diff --git a/src/app/components/widgets/blurhash-image/blurhash-image.component.html b/src/app/components/widgets/blurhash-image/blurhash-image.component.html
@@ -1,31 +1,37 @@
 <div class="blurhash-container">
 
-    <div class="text">{{ text }}</div>
+    <div class="content-warning">{{ contentWarning() }}</div>
     <canvas class="blurhash" #canvas width="32" height="32"></canvas>
-    <img class="image-item" [ngClass]="{ 'img-vertical': !horizontal, 'img-horizontal': horizontal }" [src]="imageSrc" alt="Status image" />
+    <img class="image-item" [ngClass]="{ 'img-vertical': !horizontal(), 'img-horizontal': horizontal() }" [src]="imageSrc()" alt="Status image" />
 
-    @if (canvasIsLoaded) {
-        @if(showAvatar && user) {
-            <div class="avatar" [satPopoverAnchor]="popover" (mouseenter)="mouseenter.next()" (mouseleave)="mouseleave.next()">
-                <app-mini-user-card [user]="user" [showUserName]="false" [whiteLink]="true" [size]="avatarSize.verysmall"></app-mini-user-card>
-            </div>
-
-            <sat-popover #popover [autoFocus]="false" verticalAlign="below">
-                <div class="popover" (mouseenter)="mouseenter.next()" (mouseleave)="mouseleave.next()">
-                    <app-user-popover [user]="user" [relationship]="relationship"></app-user-popover>
+    @if (canvasIsLoaded()) {
+        @if (showAvatar()) {
+            @if (user(); as userObject) {
+                <div class="avatar" [satPopoverAnchor]="popover" (mouseenter)="mouseenter.next()" (mouseleave)="mouseleave.next()">
+                    <app-mini-user-card [user]="userObject" [showUserName]="false" [whiteLink]="true" [size]="avatarSize.verysmall"></app-mini-user-card>
                 </div>
-            </sat-popover>
+
+                <sat-popover #popover [autoFocus]="false" verticalAlign="below">
+                    <div class="popover" (mouseenter)="mouseenter.next()" (mouseleave)="mouseleave.next()">
+                        <app-user-popover [user]="userObject" [relationship]="relationship()"></app-user-popover>
+                    </div>
+                </sat-popover>
+            }
         }
 
-        @if (signedInUser && showFavourites) {
-            <div class="favourite" (click)="favouriteToggle(); $event.preventDefault(); $event.stopPropagation();" (keydown.enter)="favouriteToggle(); $event.preventDefault(); $event.stopPropagation();" tabindex="0">
-                <mat-icon *ngIf="!getMainStatus()?.favourited" class="outline-symbol">grade</mat-icon>
-                <mat-icon *ngIf="getMainStatus()?.favourited" class="fill-symbol">grade</mat-icon>
-            </div>
+        @if(showAltIcon() && alt()) {
+            <div class="alt" [matTooltip]="alt()" matTooltipPosition="above">ALT</div>
         }
 
-        @if(showAltIcon && alt) {
-            <div class="alt" [matTooltip]="alt" matTooltipPosition="above">ALT</div>
+        @if (signedInUser() && showFavourites()) {
+            <div class="favourite" (click)="favouriteToggle(); $event.preventDefault(); $event.stopPropagation();" (keydown.enter)="favouriteToggle(); $event.preventDefault(); $event.stopPropagation();" tabindex="0">
+                @if (isFavourited()) {
+                    <mat-icon class="fill-symbol">grade</mat-icon>
+                }
+                @else {
+                    <mat-icon class="outline-symbol">grade</mat-icon>
+                }
+            </div>
         }
     }
 </div>
diff --git a/src/app/components/widgets/blurhash-image/blurhash-image.component.scss b/src/app/components/widgets/blurhash-image/blurhash-image.component.scss
@@ -8,7 +8,7 @@
         z-index: 100;
     }
 
-    .text {
+    .content-warning {
         position: absolute;
         top:45%;
         width: 100%;
@@ -21,7 +21,7 @@
     }
 
     @media only screen and (max-width: 768px) {
-        .text {
+        .content-warning {
             font-size: 0.6em;
         }
     }
@@ -52,16 +52,25 @@
     .favourite {
         position: absolute;
         bottom: 10px;
-        left: 4px;
-        transform: scale(0.7);
-        color: rgba(255, 255, 255, 0.6);
+        right: 4px;
         z-index: 103;
+        width: 60px;
+        height: 60px;
+
+        mat-icon {
+            position: relative;
+            top: 38px;
+            left: 36px;
+            transform: scale(0.8);
+            color: rgba(255, 255, 255, 0.8);
+            text-shadow: rgb(0, 0, 0, 0.6) 1px 0 6px;
+        }
     }
 
     .alt {
         position: absolute;
         bottom: 10px;
-        right: 4px;
+        left: 4px;
         background-color: rgba(0, 0, 0, 0.6);
         padding-left: 10px;
         padding-right: 10px;