updated styling

ls1intum · Nov 16, 2024 · 6086403 · 6086403
1 parent 2987e00
commit 6086403
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 85 deletions.
diff --git a/...course-conversations/dialogs/forward-message-dialog/forward-message-dialog.component.html b/...course-conversations/dialogs/forward-message-dialog/forward-message-dialog.component.html
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <h4 class="modal-title">Forward this message</h4>
-    <button type="button" class="btn-close" aria-label="Close" (click)="({})"></button>
+    <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss()"></button>
 </div>
 <div class="modal-body">
     <div class="autocomplete-container mt-1 mb-2">
@@ -21,7 +21,7 @@ <h4 class="modal-title">Forward this message</h4>
                 #searchInput
                 type="text"
                 class="tag-input"
-                placeholder="Search channels or chats"
+                placeholder="Search channels or names"
                 [(ngModel)]="searchTerm"
                 (input)="filterItems($event)"
                 (focus)="onInputFocus()"
@@ -85,7 +85,7 @@ <h5>Add a message</h5>
                     style="margin-right: 0.2rem"
                 >
                 </jhi-profile-picture>
-                <span>{{ postToForward?.author?.name }}</span>
+                <span class="forwarded-message-author">{{ postToForward?.author?.name }}</span>
             </div>
             <div class="forwarded-message-body" [ngClass]="{ 'preserve-line-breaks': postToForward?.content?.includes('\n') }">
                 {{ postToForward?.content }}

diff --git a/...course-conversations/dialogs/forward-message-dialog/forward-message-dialog.component.scss b/...course-conversations/dialogs/forward-message-dialog/forward-message-dialog.component.scss
@@ -84,13 +84,17 @@
     font-size: 0.875rem;
 }
 
+.left-border-line {
+    background-color: var(--metis-gray);
+    width: 4px;
+    border-radius: 3px;
+    margin-right: 0.5rem;
+}
+
 .forwarded-message-container {
     display: flex;
-    padding-left: 0.7rem;
     padding-top: 0.3rem;
     padding-bottom: 0.3rem;
-    border-left: 4px solid var(--metis-blue);
-    background-color: #f9f9f9;
     border-radius: 5px;
     margin-top: 1rem;
 
@@ -102,14 +106,15 @@
 
     .forwarded-message-header {
         font-size: 0.9rem;
-        font-weight: bold;
-        color: #333;
         margin-bottom: 0.5rem;
     }
 
+    .forwarded-message-author {
+        font-weight: bold;
+    }
+
     .forwarded-message-body {
         font-size: 0.9rem;
-        color: #555;
         margin-bottom: 0.5rem;
     }
 

diff --git a/...w/course-conversations/dialogs/forward-message-dialog/forward-message-dialog.component.ts b/...w/course-conversations/dialogs/forward-message-dialog/forward-message-dialog.component.ts
@@ -84,7 +84,6 @@ export class ForwardMessageDialogComponent implements OnInit {
                 })),
         ];
 
-        this.showDropdown = true;
         this.filterOptions();
         this.focusInput();
     }

diff --git a/src/main/webapp/app/shared/metis/answer-post.service.ts b/src/main/webapp/app/shared/metis/answer-post.service.ts
@@ -3,7 +3,7 @@ import { HttpClient, HttpResponse } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { AnswerPost } from 'app/entities/metis/answer-post.model';
 import { PostingService } from 'app/shared/metis/posting.service';
-import { catchError, map, tap } from 'rxjs/operators';
+import { catchError, map } from 'rxjs/operators';
 import { throwError } from 'rxjs';
 
 type EntityResponseType = HttpResponse<AnswerPost>;
@@ -59,23 +59,12 @@ export class AnswerPostService extends PostingService<AnswerPost> {
      * @return {Observable<HttpResponse<void>>}
      */
     getAnswerPostById(courseId: number, answerPostId: number): Observable<EntityResponseType> {
-        console.log('API çağrısı yapılıyor:', `${this.resourceUrl}${courseId}/answer-messages/${answerPostId}`);
         return this.http.get<AnswerPost>(`${this.resourceUrl}${courseId}/answer-messages/${answerPostId}`, { observe: 'response' }).pipe(
             map((response) => {
-                console.log('Yanıt başarılı şekilde döndü:');
-                console.log('HTTP Durum Kodu:', response.status);
-                console.log('Yanıt Gövdesi (body):', response.body);
                 return response;
             }),
-            // Hata durumlarını loglamak için catchError ekliyoruz
             catchError((error) => {
-                console.error('HTTP isteği sırasında bir hata oluştu!');
-                console.error('Hata Detayları:', error);
-                return throwError(() => new Error(`Hata oluştu: ${error.message || error.statusText}`));
-            }),
-            // Son olarak tamamlanma durumunu loglayabilirsiniz
-            tap({
-                complete: () => console.log('HTTP isteği tamamlandı.'),
+                return throwError(() => new Error(`${error.message || error.statusText}`));
             }),
         );
     }

diff --git a/src/main/webapp/app/shared/metis/metis.service.ts b/src/main/webapp/app/shared/metis/metis.service.ts
@@ -662,14 +662,13 @@ export class MetisService implements OnDestroy {
     }
 
     getAnswerPostById(answerPostId: number | undefined) {
-        console.log('burda');
         if (answerPostId) return this.answerPostService.getAnswerPostById(this.courseId, answerPostId);
         else return;
     }
 
     /**
      * Creates new ForwardedMessages by first creating a new Post.
-     * @param originalPostIds The IDs of the original posts to be forwarded.
+     * @param originalPosts The original posts to be forwarded.
      * @param conversation The target conversation to forward the posts to.
      * @param newContent Optional new content for the forwarded posts.
      * @return {Observable<ForwardedMessage[]>} created ForwardedMessages
@@ -679,12 +678,9 @@ export class MetisService implements OnDestroy {
             throw new Error('Course ID is not set. Ensure that setCourse() is called before forwarding posts.');
         }
 
-        // Öncelikle yeni bir Post oluşturuyoruz
         const newPost: Post = {
-            // Yeni Post'un gerekli alanlarını burada doldurun
             content: newContent || '',
             conversation: targetConversation,
-            // Diğer alanlar...
         };
 
         let sourceType = SourceType.POST;
@@ -707,27 +703,25 @@ export class MetisService implements OnDestroy {
                     this.forwardedMessageService.createForwardedMessage(fm).pipe(map((res: HttpResponse<ForwardedMessage>) => res.body!)),
                 );
 
-                // Tüm ForwardedMessage'lar oluşturulduktan sonra sonuçları döndürüyoruz
                 return forkJoin(createForwardedMessageObservables).pipe(
                     tap((createdForwardedMessages: ForwardedMessage[]) => {
-                        // Yeni oluşturulan Post'u cache'lenmiş posts içerisinde ekliyoruz
-                        this.cachedPosts = [createdPostBody, ...this.cachedPosts];
-                        this.posts$.next(this.cachedPosts);
+                        if (targetConversation.id === this.currentConversation?.id) {
+                            this.cachedPosts = [createdPostBody, ...this.cachedPosts];
+                            this.posts$.next(this.cachedPosts);
 
-                        // Her bir ForwardedMessage'ı ilgili Post'a ekliyoruz
-                        createdForwardedMessages.forEach((fm) => {
-                            const postIndex = this.cachedPosts.findIndex((post) => post.id === fm.destinationPost?.id);
-                            if (postIndex > -1) {
-                                const post = this.cachedPosts[postIndex];
-                                if (!post.forwardedMessages) {
-                                    post.forwardedMessages = [];
+                            createdForwardedMessages.forEach((fm) => {
+                                const postIndex = this.cachedPosts.findIndex((post) => post.id === fm.destinationPost?.id);
+                                if (postIndex > -1) {
+                                    const post = this.cachedPosts[postIndex];
+                                    const updatedForwardedMessages = [...(post.forwardedMessages || []), fm];
+                                    const updatedPost = { ...post, forwardedMessages: updatedForwardedMessages };
+                                    this.cachedPosts[postIndex] = updatedPost;
                                 }
-                                post.forwardedMessages.push(fm);
-                                // Cache'i güncelliyoruz
-                                this.cachedPosts[postIndex] = { ...post };
-                            }
-                        });
-                        this.posts$.next(this.cachedPosts);
+                            });
+                            this.posts$.next(this.cachedPosts);
+                            this.cachedTotalNumberOfPosts += 1;
+                            this.totalNumberOfPosts$.next(this.cachedTotalNumberOfPosts);
+                        }
                     }),
                 );
             }),

diff --git a/src/main/webapp/app/shared/metis/post/post.component.html b/src/main/webapp/app/shared/metis/post/post.component.html
@@ -72,6 +72,10 @@
                             <div *ngIf="originalPostDetails" class="forwarded-message-container">
                                 <div class="left-border-line"></div>
                                 <div class="forwarded-message-content">
+                                    <span class="forwarded-message-channel fs-x-small">
+                                        <fa-icon [icon]="faShare" class="item-icon"></fa-icon>
+                                        Forwarded from {{ sourceName }}</span
+                                    >
                                     <div class="forwarded-message-header">
                                         <jhi-profile-picture
                                             imageSizeInRem="1.5"
@@ -85,24 +89,19 @@
                                         >
                                         </jhi-profile-picture>
                                         <span class="forwarded-message-author">{{ originalPostDetails?.author?.name }}</span>
+                                        <span class="post-header-date-separator">-</span>
+                                        <span class="post-header-date">
+                                            @if (postingIsOfToday) {
+                                                <span [jhiTranslate]="todayFlag ?? ''" id="today-flag" class="fs-small"></span>
+                                            }
+                                            <span class="fs-small" [disableTooltip]="postingIsOfToday" ngbTooltip="{{ posting.creationDate | artemisDate: 'time' }}">
+                                                {{ postingIsOfToday ? (posting.creationDate | artemisDate: 'time') : (posting.creationDate | artemisDate: 'short-date') }}
+                                            </span>
+                                        </span>
                                     </div>
                                     <div class="forwarded-message-body" [ngClass]="{ 'preserve-line-breaks': originalPostDetails?.content?.includes('\n') }">
                                         {{ originalPostDetails?.content }}
                                     </div>
-                                    <div class="forwarded-message-footer">
-                                        <span class="forwarded-message-channel fs-x-small">{{ sourceName }}</span>
-                                        @if (postingIsOfToday) {
-                                            <span [jhiTranslate]="todayFlag ?? ''" id="today-flag" class="fs-x-small"></span>,
-                                        }
-                                        <span
-                                            class="fs-x-small"
-                                            style="margin-right: 1rem"
-                                            [disableTooltip]="postingIsOfToday"
-                                            ngbTooltip="{{ posting.creationDate | artemisDate: 'time' }}"
-                                        >
-                                            {{ postingIsOfToday ? (posting.creationDate | artemisDate: 'time') : (posting.creationDate | artemisDate: 'short-date') }}
-                                        </span>
-                                    </div>
                                 </div>
                             </div>
                         }

diff --git a/src/main/webapp/app/shared/metis/post/post.component.scss b/src/main/webapp/app/shared/metis/post/post.component.scss
@@ -73,13 +73,18 @@
     background-color: var(--artemis-alert-warning-background);
 }
 
+.left-border-line {
+    background-color: var(--metis-gray);
+    width: 4px;
+    border-radius: 3px;
+    margin-right: 0.5rem;
+}
+
 .forwarded-message-container {
     display: flex;
-    padding-left: 0.7rem;
     padding-top: 0.3rem;
     padding-bottom: 0.3rem;
-    border-left: 4px solid var(--metis-gray);
-    border-radius: 1px;
+    position: relative;
 
     .forwarded-message-content {
         display: flex;
@@ -89,28 +94,16 @@
 
     .forwarded-message-header {
         font-size: 0.9rem;
-        font-weight: bold;
-        color: #333;
         margin-bottom: 0.5rem;
+        margin-top: 0.5rem;
+    }
+
+    .forwarded-message-author {
+        font-weight: bold;
     }
 
     .forwarded-message-body {
         font-size: 0.9rem;
-        color: #555;
         margin-bottom: 0.5rem;
     }
-
-    .forwarded-message-footer {
-        display: flex;
-        justify-content: flex-end;
-        font-size: 0.8rem;
-        color: #777;
-
-        .forwarded-message-channel {
-            margin-right: 1rem;
-        }
-
-        .forwarded-message-time {
-        }
-    }
 }
diff --git a/src/main/webapp/app/shared/metis/post/post.component.ts b/src/main/webapp/app/shared/metis/post/post.component.ts
@@ -188,27 +188,50 @@ export class PostComponent extends PostingDirective<Post> implements OnInit, OnC
         this.fetchForwardedPost();
     }
 
+    updateSourceName(post: Post | AnswerPost) {
+        let conversation = null;
+        if ('post' in post) {
+            conversation = post.post?.conversation;
+            if (conversation?.type?.valueOf() == 'channel') {
+                this.sourceName = 'a thread in #' + (conversation as any)?.name;
+            } else if (conversation?.type?.valueOf() == 'oneToOneChat') {
+                this.sourceName = 'a direct message';
+            } else {
+                this.sourceName = 'a group message';
+            }
+        } else {
+            conversation = (post as Post).conversation;
+            if (conversation?.type?.valueOf() == 'channel') {
+                this.sourceName = '#' + (conversation as any)?.name;
+            } else if (conversation?.type?.valueOf() == 'oneToOneChat') {
+                this.sourceName = 'a direct message';
+            } else {
+                this.sourceName = 'a group message';
+            }
+        }
+    }
+
     fetchForwardedPost(): void {
         if (this.posting.forwardedMessages && this.posting.forwardedMessages.length > 0) {
             const forwardedMessage = this.posting.forwardedMessages[0];
 
             if (forwardedMessage.sourceType?.valueOf() == 'POST') {
-                console.log('ifte');
                 this.metisService.getPostById(forwardedMessage.sourceId)!.subscribe(
                     (post) => {
-                        console.log('Forwarded Post Details:', post.body);
-                        this.originalPostDetails = post.body as Posting;
+                        //console.log('Forwarded Post Details:', post.body);
+                        this.originalPostDetails = post.body as Post;
+                        this.updateSourceName(post.body!);
                         this.changeDetector.markForCheck();
                     },
                     (error) => {
                         console.error('Failed to fetch forwarded post', error);
                     },
                 );
             } else if (forwardedMessage.sourceType?.valueOf() === 'ANSWER_POST') {
-                console.log('else de');
                 this.metisService.getAnswerPostById(forwardedMessage.sourceId)!.subscribe(
                     (answerPost) => {
                         this.originalPostDetails = answerPost.body as Posting;
+                        this.updateSourceName(answerPost.body!);
                         this.changeDetector.markForCheck();
                     },
                     (error) => {
@@ -228,6 +251,7 @@ export class PostComponent extends PostingDirective<Post> implements OnInit, OnC
         this.queryParams = this.metisService.getQueryParamsForPost(this.posting);
         this.showAnnouncementIcon = (getAsChannelDTO(this.posting.conversation)?.isAnnouncementChannel && this.showChannelReference) ?? false;
         this.sortAnswerPosts();
+        this.fetchForwardedPost();
     }
 
     /**

diff --git a/src/main/webapp/app/shared/metis/posting-reactions-bar/posting-reactions-bar.directive.ts b/src/main/webapp/app/shared/metis/posting-reactions-bar/posting-reactions-bar.directive.ts
@@ -131,7 +131,6 @@ export abstract class PostingsReactionsBarDirective<T extends Posting> implement
         if (!this.course()?.id) {
             return;
         }
-        console.log('open cagrildi mi');
         this.channels = [];
         this.chats = [];
 
@@ -180,7 +179,6 @@ export abstract class PostingsReactionsBarDirective<T extends Posting> implement
     }
 
     forwardPost(post: Posting, conversation: Conversation, content: string, isAnswer: boolean): void {
-        console.log('su an reaction forwardda');
         this.metisService.createForwardedMessages([post], conversation, isAnswer, content).subscribe({
             error: (error) => {
                 console.error('Error forwarding post:', error);