#172 Fix several minor UI issues

VernissageApp · Jan 15, 2025 · 19bfabf · 19bfabf
1 parent 77e70ab
commit 19bfabf
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 12 deletions.
diff --git a/src/app/components/widgets/follow-buttons-section/follow-buttons-section.component.ts b/src/app/components/widgets/follow-buttons-section/follow-buttons-section.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, input, OnInit, output, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, input, OnInit, output, signal } from '@angular/core';
 import { MatButtonToggleChange } from '@angular/material/button-toggle';
 import { MatDialog } from '@angular/material/dialog';
 import { fadeInAnimation } from 'src/app/animations/fade-in.animation';
@@ -54,7 +54,15 @@ export class FollowButtonsSectionComponent implements OnInit {
         private followRequestsService: FollowRequestsService,
         private reportsService: ReportsService,
         private windowService: WindowService,
-        private dialog: MatDialog) {
+        private dialog: MatDialog
+    ) {
+        effect(() => {
+            // After changing relationship from parent we have to rebuild the components.
+            const newRelationships = this.relationship();
+            this.relationshipAfterAction.set(newRelationships);
+
+            this.recalculateRelationship();
+        });
     }
 
     ngOnInit(): void {
@@ -82,7 +90,7 @@ export class FollowButtonsSectionComponent implements OnInit {
 
                     if (internalUser.userName) {
                         const downloadedRelationship = await this.usersService.mute(internalUser.userName, result);
-                        this.relationshipAfterAction.set(downloadedRelationship)
+                        this.relationshipAfterAction.set(downloadedRelationship);
                         this.recalculateRelationship();
 
                         this.relationChanged.emit(this.updatedRelationship());

diff --git a/src/app/pages/notifications/notifications.page.scss b/src/app/pages/notifications/notifications.page.scss
@@ -40,6 +40,7 @@
                 width: 64px;
                 height: 64px;
                 border-radius: 5%;
+                object-fit: cover;
             }
         }
 

diff --git a/src/app/pages/profile/profile.page.ts b/src/app/pages/profile/profile.page.ts
@@ -249,13 +249,17 @@ export class ProfilePage extends ResponsiveComponent implements OnInit, OnDestro
         if (this.following()) {
             if (internalFollowing.data.length > 0) {
                 this.following.update((value) => {
+                    const result = new LinkableResult<User>();
+                    result.minId = internalFollowing.minId;
+                    result.maxId = internalFollowing.maxId;
+
                     if (value) {
-                        value.data.push(...internalFollowing.data);
-                        value.minId = internalFollowing.minId;
-                        value.maxId = internalFollowing.maxId;
+                        result.data = [...value.data, ...internalFollowing.data];
+                    } else {
+                        result.data = [...internalFollowing.data];
                     }
 
-                    return value;
+                    return result;
                 });
 
 
@@ -285,13 +289,17 @@ export class ProfilePage extends ResponsiveComponent implements OnInit, OnDestro
         if (this.followers()) {
             if (internalFollowers.data.length > 0) {
                 this.followers.update((value) => {
+                    const result = new LinkableResult<User>();
+                    result.minId = internalFollowers.minId;
+                    result.maxId = internalFollowers.maxId;
+
                     if (value) {
-                        value.data.push(...internalFollowers.data);
-                        value.minId = internalFollowers.minId;
-                        value.maxId = internalFollowers.maxId;
+                        result.data = [...value.data, ...internalFollowers.data];
+                    } else {
+                        result.data = [...internalFollowers.data];
                     }
 
-                    return value;
+                    return result;
                 });
 
             } else {

diff --git a/src/app/pages/status/status.page.html b/src/app/pages/status/status.page.html
@@ -330,7 +330,9 @@
                                                 <div>
                                                     <span class="fw-400 fs-90 text-muted">&#64;{{ comment.status.user?.userName }}</span>
                                                 </div>
-                                                <div [innerHTML]="comment.status.noteHtml"></div>
+                                                <div class="comment-text">
+                                                    <div [innerHTML]="comment.status.noteHtml"></div>
+                                                </div>
                                             </div>
 
                                             @if (signedInUser()) {

diff --git a/src/app/pages/status/status.page.scss b/src/app/pages/status/status.page.scss
@@ -101,6 +101,14 @@
     display:table;
 }
 
+.note {
+    word-break: break-word;
+
+    a {
+        word-break: break-all;
+    }
+}
+
 .category {
     mat-icon {
         transform: scale(1.6);
@@ -191,6 +199,14 @@
             transform: scale(0.6);
         }
     }
+
+    .comment-text {
+        word-break: break-word;
+
+        a {
+            word-break: break-all;
+        }
+    }
 }
 
 .replies {