feat: UI Refactoring (#359)

ls1intum · Feb 17, 2025 · 0e91470 · 0e91470
1 parent 1152898
commit 0e91470
Show file tree

Hide file tree

Showing 42 changed files with 1,049 additions and 457 deletions.
diff --git a/client/angular.json b/client/angular.json
@@ -20,7 +20,6 @@
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "css",
             "assets": [
-              "src/favicon.png",
               {
                 "glob": "**/*",
                 "input": "public"
@@ -92,4 +91,4 @@
   "cli": {
     "analytics": false
   }
-}
+}
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
diff --git a/client/src/favicon.png → client/public/favicon.png b/client/src/favicon.png → client/public/favicon.png
diff --git a/client/src/app/app.routes.ts b/client/src/app/app.routes.ts
@@ -6,22 +6,28 @@ import { maintainerGuard } from './core/routeGuards/maintainer.guard';
 export const routes: Routes = [
   {
     path: '',
-    pathMatch: 'full',
-    redirectTo: 'repo',
-  },
-  {
-    path: 'repo',
+    loadComponent: () => import('./pages/main-layout/main-layout.component').then(m => m.MainLayoutComponent),
     canActivateChild: [RepositoryFilterGuard],
     children: [
       {
         path: '',
         pathMatch: 'full',
-        redirectTo: 'list',
+        loadComponent: () => import('./pages/repository-overview/repository-overview.component').then(m => m.RepositoryOverviewComponent),
+      },
+      {
+        path: 'about',
+        loadComponent: () => import('./pages/about/about.component').then(m => m.AboutComponent),
+      },
+      {
+        path: 'privacy',
+        loadComponent: () => import('./pages/privacy/privacy.component').then(m => m.PrivacyComponent),
+      },
+      {
+        path: 'imprint',
+        loadComponent: () => import('./pages/imprint/imprint.component').then(m => m.ImprintComponent),
       },
-      { path: 'list', loadComponent: () => import('./pages/repository-overview/repository-overview.component').then(m => m.RepositoryOverviewComponent) },
       {
-        path: ':repositoryId',
-        loadComponent: () => import('./pages/main-layout/main-layout.component').then(m => m.MainLayoutComponent),
+        path: 'repo/:repositoryId',
         children: [
           { path: '', loadComponent: () => import('./pages/ci-cd/ci-cd.component').then(m => m.CiCdComponent) },
           {

diff --git a/client/src/app/components/connect-repo/connect-repo.component.html b/client/src/app/components/connect-repo/connect-repo.component.html
diff --git a/client/src/app/components/connect-repo/connect-repo.component.ts b/client/src/app/components/connect-repo/connect-repo.component.ts
diff --git a/client/src/app/components/environments/environment-list/environment-list-view.component.html b/client/src/app/components/environments/environment-list/environment-list-view.component.html
@@ -36,7 +36,7 @@
             </div>
             @if (environment.latestDeployment; as deployment) {
               <div class="flex gap-1 items-center text-sm mt-2">
-                <app-user-avatar [user]="environment?.latestDeployment?.user" />
+                <app-user-avatar [user]="environment?.latestDeployment?.user" tooltipPosition="top" />
                 @if (environment.latestDeployment.user?.name) {
                   {{ environment.latestDeployment.user?.name }} deployed
                 }
@@ -59,7 +59,7 @@
 
           @if (environment.locked) {
             <div class="flex gap-1 items-center">
-              <app-user-avatar [user]="environment.lockedBy" [toolTipText]="'Locked By'" />
+              <app-user-avatar [user]="environment.lockedBy" [toolTipText]="'Locked By'" tooltipPosition="top" />
             </div>
             @if (environment.lockedAt) {
               <app-lock-time [timeLockWillExpire]="environment.lockWillExpireAt"></app-lock-time>
@@ -83,7 +83,7 @@
 
           @if (userCanDeploy(environment)) {
             <button (click)="deployEnvironment(environment); $event.stopPropagation()" class="p-button p-button-secondary p-2">
-              <i-tabler name="cloud-upload" class="mr-1" />Deploy
+              <i-tabler name="cloud-upload" class="mr-1 flex-shrink-0" />Deploy
             </button>
           }
 
@@ -92,7 +92,11 @@
             @if (!environment.enabled) {
               <p-tag value="Disabled" severity="danger" rounded="true" />
             }
-            <a icon [routerLink]="'/repo/' + environment.repository?.id + '/environment/' + environment.id + '/edit'" class="p-button p-button-secondary p-2"
+            <a
+              icon
+              [routerLink]="'/repo/' + environment.repository?.id + '/environment/' + environment.id + '/edit'"
+              class="p-button p-button-secondary p-2"
+              (click)="$event.stopPropagation()"
               ><i-tabler name="pencil"
             /></a>
           }

diff --git a/client/src/app/components/footer/footer.component.html b/client/src/app/components/footer/footer.component.html
@@ -0,0 +1,10 @@
+<footer class="flex items-center justify-center h-6 bg-gray-100 border-t border-gray-200 text-xs text-gray-500">
+  <div class="flex items-center gap-2">
+    <a routerLink="/about" class="hover:text-gray-700 hover:underline">About</a>
+    <span class="text-gray-300">|</span>
+    <a routerLink="/privacy" class="hover:text-gray-700 hover:underline">Privacy Policy</a>
+    <span class="text-gray-300">|</span>
+    <a routerLink="/imprint" class="hover:text-gray-700 hover:underline">Imprint</a>
+    <span class="text-gray-300">|</span>
+  </div>
+</footer>
diff --git a/client/src/app/components/footer/footer.component.ts b/client/src/app/components/footer/footer.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-footer',
+  imports: [RouterLink],
+  templateUrl: './footer.component.html',
+})
+export class FooterComponent {}