fix: Remove small pixel differences in diagram cache and complexity b…

…adge Small pixel differences led to small jumps when the diagram cache was loaded. It feels smoother now. Same applies to the model complexity badge.
DSD-DBS · Sep 16, 2024 · f421eb2 · f421eb2
1 parent bdf3557
commit f421eb2
Show file tree

Hide file tree

Showing 11 changed files with 54 additions and 107 deletions.
diff --git a/frontend/src/app/projects/models/choose-init/choose-init.component.html b/frontend/src/app/projects/models/choose-init/choose-init.component.html
@@ -4,13 +4,11 @@
  -->
 
 <div *ngIf="(projectService.project$ | async) && (modelService.model$ | async)">
-  <div class="flex-center">
-    <div class="field-separator"></div>
-    <button mat-raised-button (click)="modelInitSelection.emit('create-empty')">
-      <div class="button-content-wrapper">
-        <p class="option-title">Manually configure model</p>
-        <app-mat-icon size="70px">create_new_folder</app-mat-icon>
-      </div>
-    </button>
-  </div>
+  <div class="field-separator"></div>
+  <button mat-raised-button (click)="modelInitSelection.emit('create-empty')">
+    <div class="button-content-wrapper">
+      <p class="option-title">Manually configure model</p>
+      <app-mat-icon size="70px">create_new_folder</app-mat-icon>
+    </div>
+  </button>
 </div>
diff --git a/.../src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.css b/.../src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.css
diff --git a/...src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html b/...src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html
@@ -31,14 +31,16 @@ <h2 class="mb-5 text-xl font-medium">View diagrams</h2>
   @if (this.diagramMetadata?.diagrams?.length === 0) {
     Your model doesn't seem to contain diagrams.
   } @else if (filteredDiagrams === undefined) {
-    <div class="flex flex-wrap">
+    <span>Loading diagrams...</span>
+    <div class="flex flex-wrap gap-2">
       @for (_ of loaderArray; track $index) {
         <ngx-skeleton-loader
-          class="m-2 grow basis-[calc(30%-20px)]"
+          class="h-[338px] min-w-[250px] grow basis-[calc(1/3*(100%-1rem))]"
           [theme]="{
-            'border-radius': '5px',
-            height: '332px',
-            'min-width': '208px',
+            'border-radius': '10px',
+            height: '100%',
+            margin: '0px',
+            padding: '0px',
             border: '1px solid white',
           }"
         ></ngx-skeleton-loader>
@@ -59,12 +61,12 @@ <h2 class="mb-5 text-xl font-medium">View diagrams</h2>
           @if (diagram.success) {
             @if (!diagrams[diagram.uuid] || diagrams[diagram.uuid].loading) {
               <ngx-skeleton-loader
-                class="mb-2 w-full"
+                class="mb-2 h-[200px] w-full"
                 [theme]="{
                   'border-radius': '5px',
                   margin: 0,
                   padding: 0,
-                  height: '200px',
+                  height: '100%',
                   width: '100%',
                   border: '1px solid white',
                 }"
@@ -79,7 +81,9 @@ <h2 class="mb-5 text-xl font-medium">View diagrams</h2>
               </button>
             }
           } @else {
-            <div class="diagram-error">
+            <div
+              class="mb-2 flex h-[200px] flex-col items-center justify-center rounded border border-gray-400 py-[15px] text-center"
+            >
               <mat-icon class="scale-[2] text-red-900">error</mat-icon> <br />
               Diagram export has failed. <br />
               Please contact your diagram cache administrator.

diff --git a/...d/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.ts b/...d/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.ts
@@ -46,7 +46,6 @@ import { ModelDiagramCodeBlockComponent } from './model-diagram-code-block/model
 @Component({
   selector: 'app-model-diagram-dialog',
   templateUrl: './model-diagram-dialog.component.html',
-  styleUrls: ['./model-diagram-dialog.component.css'],
   standalone: true,
   imports: [
     ModelDiagramCodeBlockComponent,

diff --git a/...end/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.stories.ts b/...end/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.stories.ts
@@ -78,6 +78,10 @@ const diagrams: Diagrams =
   }
 
 export const Loading: Story = {
+  args: { diagramMetadata: undefined },
+};
+
+export const LoadingWithoutScroll: Story = {
   args: { diagramMetadata: undefined, loaderArray: Array(3).fill(0) },
 };
 

diff --git a/frontend/src/app/projects/models/model-description/model-description.component.html b/frontend/src/app/projects/models/model-description/model-description.component.html
@@ -3,7 +3,7 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<div class="wrapper flex-center flex">
+<div class="wrapper flex">
   <div *ngIf="modelService.model$ | async" class="collab-card grow basis-1">
     <form (submit)="onSubmit()" [formGroup]="form">
       <fieldset>

diff --git a/frontend/src/app/projects/models/model-restrictions/model-restrictions.component.html b/frontend/src/app/projects/models/model-restrictions/model-restrictions.component.html
@@ -3,7 +3,7 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<div class="wrapper flex-center">
+<div class="wrapper">
   <div class="collab-card" *ngIf="modelService.model$ | async">
     <h2>Restrictions for models</h2>
     <form

diff --git a/...project-detail/model-overview/model-complexity-badge/model-complexity-badge.component.css b/...project-detail/model-overview/model-complexity-badge/model-complexity-badge.component.css
diff --git a/...roject-detail/model-overview/model-complexity-badge/model-complexity-badge.component.html b/...roject-detail/model-overview/model-complexity-badge/model-complexity-badge.component.html
@@ -8,51 +8,47 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-@if (loadingComplexityBadge) {
-  <div class="model-complexity-badge-loader">
-    <ngx-skeleton-loader
-      [theme]="{
-        width: '100%',
-        height: '100%',
-        'border-radius': '5px',
-        border: '1px solid white',
-        margin: 0,
-      }"
-    ></ngx-skeleton-loader>
-  </div>
-} @else {
-  @if (errorCode === undefined) {
-    <div class="flex justify-center" *ngIf="complexityBadge">
+<div class="h-[106.336px]">
+  @if (loadingComplexityBadge) {
+    <div class="size-full text-center">
+      <ngx-skeleton-loader
+        class="h-full"
+        [theme]="{
+          width: '100%',
+          height: '100%',
+          'border-radius': '5px',
+          border: '1px solid white',
+          margin: 0,
+        }"
+      ></ngx-skeleton-loader>
+    </div>
+  } @else if (complexityBadge) {
+    <div class="flex justify-center">
       <img class="w-full" [src]="complexityBadge" />
     </div>
   } @else if (errorCode === "FILE_NOT_FOUND") {
     <div
       (click)="openModelComplexityBadgeDocs()"
-      class="model-complexity-error model-complexity-create"
+      class="flex size-full cursor-pointer items-center justify-between rounded border border-gray-400 p-2 text-center"
     >
-      <mat-icon class="model-complexity-error-icon">open_in_new</mat-icon>
-      <span class="model-complexity-error-text">
+      <mat-icon class="basis-[60px] scale-[2]">open_in_new</mat-icon>
+      <span class="basis-[calc(100%-60px)]">
         <b>Model complexity badge not found.</b><br />
         Click here to learn how to set up the model complexity badge for your
         model.
       </span>
     </div>
   } @else {
     <div
-      class="model-complexity-error"
-      *ngIf="
-        !loadingComplexityBadge &&
-        !complexityBadge &&
-        errorCode !== 'FILE_NOT_FOUND'
-      "
+      class="flex size-full items-center justify-between rounded border border-gray-400 p-2 text-center"
     >
-      <mat-icon class="model-complexity-error-icon">error</mat-icon>
-      <span class="model-complexity-error-text"
+      <mat-icon class="basis-[60px] scale-[2]">error</mat-icon>
+      <span class="basis-[calc(100%-60px)]"
         ><b>Error loading the complexity badge.</b> <br />{{
           errorMessage ||
             "Please ask your project administrator or global administrator for help."
         }}</span
       >
     </div>
   }
-}
+</div>
diff --git a/.../project-detail/model-overview/model-complexity-badge/model-complexity-badge.component.ts b/.../project-detail/model-overview/model-complexity-badge/model-complexity-badge.component.ts
@@ -23,7 +23,6 @@ import { environment } from 'src/environments/environment';
     MatSlideToggleModule,
   ],
   templateUrl: './model-complexity-badge.component.html',
-  styleUrls: ['./model-complexity-badge.component.css'],
 })
 @UntilDestroy()
 export class ModelComplexityBadgeComponent implements OnChanges {

diff --git a/...ts/project-detail/model-overview/model-complexity-badge/model-complexity-badge.stories.ts b/...ts/project-detail/model-overview/model-complexity-badge/model-complexity-badge.stories.ts
@@ -2,7 +2,7 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Meta, StoryObj } from '@storybook/angular';
+import { componentWrapperDecorator, Meta, StoryObj } from '@storybook/angular';
 import { base64ModelBadge } from 'src/storybook/model-badge';
 import { ModelComplexityBadgeComponent } from './model-complexity-badge.component';
 
@@ -19,6 +19,11 @@ const meta: Meta<ModelComplexityBadgeComponent> = {
       viewports: [],
     },
   },
+  decorators: [
+    componentWrapperDecorator(
+      (story) => `<div class="w-[475px]">${story}</div>`,
+    ),
+  ],
 };
 
 export default meta;