feat: switch icons and increase emphasis after feedback with S.K.

sovity · Jul 4, 2023 · 8402ee7 · 8402ee7
1 parent 11079e2
commit 8402ee7
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 22 deletions.
diff --git a/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.component.html b/src/app/component-library/catalog/asset-detail-dialog/asset-detail-dialog.component.html
@@ -101,6 +101,7 @@
         "
         mat-raised-button
         color="primary"
+        [matTooltip]="data.contractAgreement?.statusTooltipText ?? ''"
         [disabled]="!data.contractAgreement?.canTransfer"
         (click)="onTransferClick()">
         Transfer

diff --git a/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts b/src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts
@@ -6,25 +6,21 @@ import {Policy} from '../../../core/services/api/legacy-managent-api-client';
 import {AssetProperties} from '../../../core/services/asset-properties';
 import {Asset} from '../../../core/services/models/asset';
 import {BrokerDataOffer} from '../../../routes/broker-ui/catalog-page/catalog-page/mapping/broker-data-offer';
-import {
-  ContractAgreementCardMapped
-} from '../../../routes/connector-ui/contract-agreement-page/contract-agreement-cards/contract-agreement-card-mapped';
+import {ContractAgreementCardMapped} from '../../../routes/connector-ui/contract-agreement-page/contract-agreement-cards/contract-agreement-card-mapped';
 import {JsonDialogComponent} from '../../json-dialog/json-dialog/json-dialog.component';
 import {JsonDialogData} from '../../json-dialog/json-dialog/json-dialog.data';
 import {PropertyGridGroup} from '../../property-grid/property-grid-group/property-grid-group';
 import {PropertyGridField} from '../../property-grid/property-grid/property-grid-field';
 import {PropertyGridFieldService} from '../../property-grid/property-grid/property-grid-field.service';
 import {formatDateAgo} from '../../ui-elements/ago/formatDateAgo';
 
-
 @Injectable()
 export class AssetPropertyGridGroupBuilder {
   constructor(
     private matDialog: MatDialog,
     private activeFeatureSet: ActiveFeatureSet,
     private propertyGridUtils: PropertyGridFieldService,
-  ) {
-  }
+  ) {}
 
   buildAssetPropertiesGroup(
     asset: Asset,
@@ -294,10 +290,12 @@ export class AssetPropertyGridGroupBuilder {
 
     if (contractAgreement.isConsumingLimitsEnforced) {
       properties.push({
-        icon: 'info',
+        icon: contractAgreement.canTransfer ? 'sync' : 'sync_disabled',
         label: 'Status',
         tooltip: contractAgreement.statusTooltipText,
-        ...this.propertyGridUtils.guessValue(contractAgreement.statusText),
+        textIconAfter: contractAgreement.statusTooltipText ? 'help' : null,
+        text: contractAgreement.statusText,
+        additionalClasses: 'text-warn',
       });
     }
 

diff --git a/src/app/component-library/property-grid/property-grid/property-grid-field.ts b/src/app/component-library/property-grid/property-grid/property-grid-field.ts
@@ -22,4 +22,5 @@ export interface PropertyGridField {
 
   copyButton?: boolean;
   tooltip?: string | null;
+  textIconAfter?: string | null;
 }
diff --git a/src/app/component-library/property-grid/property-grid/property-grid.component.html b/src/app/component-library/property-grid/property-grid/property-grid.component.html
@@ -3,21 +3,21 @@
   class=""
   emptyMessage="No properties."></empty-state>
 <div
-  *ngFor="let prop of props"
+  *ngFor="let prop of props; trackBy: trackByIndex"
   class="flex flex-row space-x-[10px] overflow-hidden"
   [style.width]="'calc(100% / ' + columns + ' - ' + (columns - 1) * 10 + 'px)'">
   <!-- Property Icon -->
   <mat-icon
     style="flex-shrink: 0; margin-top: 6px"
-   [matTooltip]="prop.tooltip!"
+    [matTooltip]="prop.tooltip!"
     [attr.title]="prop.labelTitle"
     >{{ prop.icon }}</mat-icon
   >
   <div class="flex flex-col">
     <!-- Property Label -->
     <div
       class="uppercase text-slate text-sm break-all"
-     [matTooltip]="prop.tooltip!"
+      [matTooltip]="prop.tooltip!"
       [attr.title]="prop.labelTitle">
       {{ prop.label }}
     </div>
@@ -46,13 +46,13 @@
     <!-- Property Value (Text) with tooltip -->
     <span
       *ngIf="!(prop.url || prop.onclick)"
-     [matTooltip]="prop.tooltip!"
+      [matTooltip]="prop.tooltip!"
       [ngClass]="prop.additionalClasses"
       >{{ prop.text }}
-      <mat-icon *ngIf="prop.tooltip" class="mat-icon-[10px]"
-        >{{prop.icon}}
-      </mat-icon></span
-    >
+      <mat-icon *ngIf="prop.textIconAfter" class="mat-icon-[12px]">
+        {{ prop.textIconAfter }}
+      </mat-icon>
+    </span>
   </div>
   <button
     *ngIf="prop.copyButton"

diff --git a/src/app/component-library/property-grid/property-grid/property-grid.component.ts b/src/app/component-library/property-grid/property-grid/property-grid.component.ts
@@ -1,4 +1,4 @@
-import {Component, HostBinding, Input} from '@angular/core';
+import {Component, HostBinding, Input, TrackByFunction} from '@angular/core';
 import {PropertyGridField} from './property-grid-field';
 
 @Component({
@@ -17,4 +17,6 @@ export class PropertyGridComponent {
   @HostBinding('class.gap-[10px]')
   @HostBinding('class.justify-start')
   cls = true;
+
+  trackByIndex: TrackByFunction<any> = (index: number) => index;
 }
diff --git a/.../contract-agreement-page/contract-agreement-cards/contract-agreement-cards.component.html b/.../contract-agreement-page/contract-agreement-cards/contract-agreement-cards.component.html
@@ -80,12 +80,10 @@
           <div class="text-slate text-sm uppercase tracking-wider text-right">
             Status
           </div>
-          <div class="text-right">
+          <div class="text-right" [class.text-warn]="!card.canTransfer">
             {{ card.statusText }}
-            <mat-icon
-              *ngIf="!card.canTransfer"
-              class="mat-icon-[10px]"
-              >info
+            <mat-icon *ngIf="!card.canTransfer" class="mat-icon-[12px]">
+              help
             </mat-icon>
           </div>
         </div>

diff --git a/src/styles.scss b/src/styles.scss
@@ -146,6 +146,13 @@ body {
   line-height: 10px !important;
 }
 
+.mat-icon-\[12px\] {
+  font-size: 12px !important;
+  width: 12px !important;
+  height: 12px !important;
+  line-height: 12px !important;
+}
+
 .mat-icon-\[28px\] {
   font-size: 28px !important;
   width: 28px !important;