From dea8cf323bd1d5cbfeed3b67fcb8879f81fdf134 Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Tue, 23 Apr 2024 13:22:59 +0200
Subject: [PATCH] OZG-5010-OZG-5577 Fix bug on wrong icons in attachments
---
.../binary-file2/binary-file2.component.html | 6 +++++-
.../binary-file2/binary-file2.component.ts | 5 +++++
.../src/lib/attachment/attachment.component.html | 2 +-
.../src/lib/icon/icon.component.html | 2 +-
.../design-system/src/lib/icon/icon.component.ts | 16 ++++++++++++++++
.../src/lib/tailwind-preset/root.css | 1 +
.../src/lib/tailwind-preset/tailwind.config.js | 5 +++++
7 files changed, 34 insertions(+), 3 deletions(-)
diff --git a/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.html b/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.html
index d1a2d88d2e..654a479021 100644
--- a/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.html
+++ b/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.html
@@ -5,7 +5,11 @@
[attr.aria-label]="'Anhang: Dateiname: ' + file.name"
>
<ods-spinner-icon spinner *ngIf="isLoading" class="mr-3 size-10" />
- <ods-icon icon name="file-pdf" class="mr-3 size-10 fill-primary"></ods-icon>
+ <ods-icon
+ icon
+ [name]="'file-' + getIconType(file.contentType)"
+ class="mr-3 size-10 fill-primary"
+ ></ods-icon>
<button
close
*ngIf="deletable"
diff --git a/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.ts b/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.ts
index 6f1998b266..753c84cb67 100644
--- a/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.ts
+++ b/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.ts
@@ -34,6 +34,11 @@ export class BinaryFile2Component {
return isNil(this.stateResource) ? createEmptyStateResource<Resource>() : this.stateResource;
}
+ getIconType(type: string): string {
+ if (type.startsWith('image')) return 'image';
+ return type.split('/')[1];
+ }
+
downloadFile(): void {
this.startDownload.emit(this.file);
}
diff --git a/alfa-client/libs/design-system/src/lib/attachment/attachment.component.html b/alfa-client/libs/design-system/src/lib/attachment/attachment.component.html
index c19e0ec5a9..e966b625ce 100644
--- a/alfa-client/libs/design-system/src/lib/attachment/attachment.component.html
+++ b/alfa-client/libs/design-system/src/lib/attachment/attachment.component.html
@@ -4,7 +4,7 @@
<ng-content select="[spinner]"></ng-content>
<ng-content select="[icon]"></ng-content>
<div class="flex w-full flex-col items-start">
- <p class="text-sm">{{ documentName }}</p>
+ <p class="text-sm text-start">{{ documentName }}</p>
<p class="text-xs text-ozggray-600">{{ description }}</p>
</div>
<ng-content select="[close]"></ng-content>
diff --git a/alfa-client/libs/design-system/src/lib/icon/icon.component.html b/alfa-client/libs/design-system/src/lib/icon/icon.component.html
index 11003f7f8d..620b50bea9 100644
--- a/alfa-client/libs/design-system/src/lib/icon/icon.component.html
+++ b/alfa-client/libs/design-system/src/lib/icon/icon.component.html
@@ -91,7 +91,7 @@
viewBox="0 0 32 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
- class="fill-pdf"
+ [ngClass]="getFileIconFill(name)"
>
<path
d="M32 12L20 0H4C1.8 0 0.0200005 1.8 0.0200005 4L0 36C0 38.2 1.78 40 3.98 40H28C30.2 40 32 38.2 32 36V12ZM28 36H4V4H18V14H28V36Z"
diff --git a/alfa-client/libs/design-system/src/lib/icon/icon.component.ts b/alfa-client/libs/design-system/src/lib/icon/icon.component.ts
index 769f8b82fc..e0dbf17fed 100644
--- a/alfa-client/libs/design-system/src/lib/icon/icon.component.ts
+++ b/alfa-client/libs/design-system/src/lib/icon/icon.component.ts
@@ -11,4 +11,20 @@ export class IconComponent {
@Input() name!: string;
@Input() fillColor: string = 'black';
@Input() size: string = '100%';
+
+ getFileIconFill(type: string): string {
+ switch (type.split('-')[1]) {
+ case 'pdf':
+ case 'exclamation':
+ case 'generate':
+ case 'upload':
+ return 'fill-pdf';
+ case 'doc':
+ case 'docx':
+ return 'fill-doc';
+ case 'image':
+ return 'fill-ozggray-800';
+ }
+ return 'fill-ozggray-300';
+ }
}
diff --git a/alfa-client/libs/design-system/src/lib/tailwind-preset/root.css b/alfa-client/libs/design-system/src/lib/tailwind-preset/root.css
index 3954976c5b..62ac309ea6 100644
--- a/alfa-client/libs/design-system/src/lib/tailwind-preset/root.css
+++ b/alfa-client/libs/design-system/src/lib/tailwind-preset/root.css
@@ -24,6 +24,7 @@
--color-abgelehnt-500: 0 100% 60%;
--color-pdf: 4 62% 63%;
+ --color-doc: 219 63% 54%;
}
.dark {
diff --git a/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js b/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
index 12d6bbb461..52c2c0698c 100644
--- a/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
+++ b/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
@@ -51,8 +51,10 @@ module.exports = {
ozggray: {
100: 'hsl(0, 0%, 92%)',
200: 'hsla(0, 0%, 94%)',
+ 300: 'hsla(0, 0%, 77%)',
600: 'hsla(0, 0%, 0%, 0.4)',
700: 'hsl(213, 27%, 84%)',
+ 800: 'hsl(0, 0%, 43%)',
DEFAULT: 'hsl(0, 0%, 98%)',
},
background: {
@@ -74,6 +76,9 @@ module.exports = {
pdf: {
DEFAULT: 'hsl(var(--color-pdf) / <alpha-value>)',
},
+ doc: {
+ DEFAULT: 'hsl(var(--color-doc) / <alpha-value>)',
+ },
mainbg: 'hsl(var(--color-mainbg) / <alpha-value>)',
primary: {
600: 'hsl(var(--color-primary-600) / <alpha-value>)',
--
GitLab