Iris: Fix the about page (#10016)

ls1intum · Dec 20, 2024 · 19b5f7c · 19b5f7c
1 parent 9436717
commit 19b5f7c
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 29 deletions.
diff --git a/src/main/webapp/app/app-routing.module.ts b/src/main/webapp/app/app-routing.module.ts
@@ -182,6 +182,9 @@ const LAYOUT_ROUTES: Routes = [navbarRoute, ...errorRoute];
                     path: 'about-iris',
                     pathMatch: 'full',
                     loadComponent: () => import('./iris/about-iris/about-iris.component').then((m) => m.AboutIrisComponent),
+                    data: {
+                        pageTitle: 'artemisApp.exerciseChatbot.title',
+                    },
                 },
             ],
             { enableTracing: false, onSameUrlNavigation: 'reload' },

diff --git a/src/main/webapp/app/iris/about-iris/about-iris.component.ts b/src/main/webapp/app/iris/about-iris/about-iris.component.ts
@@ -1,11 +1,15 @@
 import { Component } from '@angular/core';
 import { faRobot } from '@fortawesome/free-solid-svg-icons';
-import { IrisLogoSize } from '../iris-logo/iris-logo.component';
+import { IrisLogoComponent, IrisLogoSize } from '../iris-logo/iris-logo.component';
+import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 @Component({
     selector: 'jhi-about-iris',
     templateUrl: './about-iris.component.html',
     styleUrls: ['about-iris.component.scss'],
+    standalone: true,
+    imports: [IrisLogoComponent, ArtemisTranslatePipe, TranslateDirective],
 })
 export class AboutIrisComponent {
     faRobot = faRobot;

diff --git a/src/main/webapp/app/iris/iris-logo/iris-logo.component.html b/src/main/webapp/app/iris/iris-logo/iris-logo.component.html
@@ -1 +1 @@
-<img [src]="this.logoUrl" alt="Iris Logo" [classList]="'iris-logo ' + this.classList" />
+<img [src]="logoUrl()" alt="Iris Logo" [classList]="'iris-logo ' + classList()" />
diff --git a/src/main/webapp/app/iris/iris-logo/iris-logo.component.ts b/src/main/webapp/app/iris/iris-logo/iris-logo.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
 
 export enum IrisLogoSize {
     FLUID = 'fluid',
@@ -16,30 +16,31 @@ export enum IrisLogoLookDirection {
     selector: 'jhi-iris-logo',
     templateUrl: './iris-logo.component.html',
     styleUrls: ['./iris-logo.component.scss'],
+    standalone: true,
 })
-export class IrisLogoComponent implements OnInit {
-    @Input()
-    size: IrisLogoSize | number = IrisLogoSize.BIG;
+export class IrisLogoComponent {
+    size = input<IrisLogoSize | number>(IrisLogoSize.BIG);
+    look = input<IrisLogoLookDirection>(IrisLogoLookDirection.RIGHT);
 
-    @Input()
-    look: IrisLogoLookDirection = IrisLogoLookDirection.RIGHT;
-
-    logoUrl: string;
-    classList: string;
+    logoUrl = computed(() => {
+        if (this.size() === IrisLogoSize.SMALL) {
+            return 'public/images/iris/iris-logo-small.png';
+        }
+        return `public/images/iris/iris-logo-big-${this.look()}.png`;
+    });
 
-    ngOnInit() {
-        if (this.size === IrisLogoSize.SMALL) {
-            this.logoUrl = 'public/images/iris/iris-logo-small.png';
-            this.classList = 'small';
-        } else if (this.size === IrisLogoSize.MEDIUM) {
-            this.logoUrl = `public/images/iris/iris-logo-big-${this.look}.png`;
-            this.classList = 'medium';
-        } else if (this.size === IrisLogoSize.BIG) {
-            this.logoUrl = `public/images/iris/iris-logo-big-${this.look}.png`;
-            this.classList = 'big img-fluid';
-        } else if (this.size === IrisLogoSize.FLUID) {
-            this.logoUrl = `public/images/iris/iris-logo-big-${this.look}.png`;
-            this.classList = 'fluid';
+    classList = computed(() => {
+        switch (this.size()) {
+            case IrisLogoSize.SMALL:
+                return 'small';
+            case IrisLogoSize.MEDIUM:
+                return 'medium';
+            case IrisLogoSize.BIG:
+                return 'big img-fluid';
+            case IrisLogoSize.FLUID:
+                return 'fluid';
+            default:
+                return '';
         }
-    }
+    });
 }
diff --git a/src/main/webapp/app/iris/iris.module.ts b/src/main/webapp/app/iris/iris.module.ts
@@ -5,15 +5,13 @@ import { FormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { ArtemisMarkdownModule } from 'app/shared/markdown.module';
-import { AboutIrisComponent } from 'app/iris/about-iris/about-iris.component';
 import { RouterModule } from '@angular/router';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 import { IrisSettingsUpdateComponent } from './settings/iris-settings-update/iris-settings-update.component';
 import { IrisGlobalSettingsUpdateComponent } from './settings/iris-global-settings-update/iris-global-settings-update.component';
 import { IrisCommonSubSettingsUpdateComponent } from './settings/iris-settings-update/iris-common-sub-settings-update/iris-common-sub-settings-update.component';
 import { IrisCourseSettingsUpdateComponent } from 'app/iris/settings/iris-course-settings-update/iris-course-settings-update.component';
 import { IrisExerciseSettingsUpdateComponent } from 'app/iris/settings/iris-exercise-settings-update/iris-exercise-settings-update.component';
-import { IrisLogoComponent } from './iris-logo/iris-logo.component';
 import { IrisExerciseChatbotButtonComponent } from 'app/iris/exercise-chatbot/exercise-chatbot-button.component';
 import { IrisChatbotWidgetComponent } from 'app/iris/exercise-chatbot/widget/chatbot-widget.component';
 import { IrisEnabledComponent } from 'app/iris/settings/shared/iris-enabled.component';
@@ -22,19 +20,18 @@ import { FeatureToggleModule } from 'app/shared/feature-toggle/feature-toggle.mo
 import { IrisBaseChatbotComponent } from 'app/iris/base-chatbot/iris-base-chatbot.component';
 import { ChatStatusBarComponent } from 'app/iris/base-chatbot/chat-status-bar/chat-status-bar.component';
 import { CourseChatbotComponent } from 'app/iris/course-chatbot/course-chatbot.component';
+import { IrisLogoComponent } from 'app/iris/iris-logo/iris-logo.component';
 
 @NgModule({
     declarations: [
         IrisBaseChatbotComponent,
         IrisChatbotWidgetComponent,
         IrisExerciseChatbotButtonComponent,
-        AboutIrisComponent,
         IrisSettingsUpdateComponent,
         IrisGlobalSettingsUpdateComponent,
         IrisCourseSettingsUpdateComponent,
         IrisExerciseSettingsUpdateComponent,
         IrisCommonSubSettingsUpdateComponent,
-        IrisLogoComponent,
         IrisEnabledComponent,
         ChatStatusBarComponent,
         IrisLogoButtonComponent,
@@ -50,6 +47,7 @@ import { CourseChatbotComponent } from 'app/iris/course-chatbot/course-chatbot.c
         ArtemisSharedComponentModule,
         RouterModule,
         FeatureToggleModule,
+        IrisLogoComponent,
     ],
     exports: [IrisExerciseChatbotButtonComponent, IrisEnabledComponent, IrisLogoButtonComponent, IrisBaseChatbotComponent, CourseChatbotComponent],
 })
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<img [src]="this.logoUrl" alt="Iris Logo" [classList]="'iris-logo ' + this.classList" />
		<img [src]="logoUrl()" alt="Iris Logo" [classList]="'iris-logo ' + classList()" />