@colijnit/transaction 12.1.21 → 12.1.24

package/lib/component/avatar/avatar.component.d.ts

@@ -1,15 +1,23 @@
+import { AfterViewInit } from "@angular/core";
 import { TransactionService } from "../../service/transaction.service";
 import { RelationListObject } from "@colijnit/transactionapi/build/model/relation-list-object.bo";
 import { SharedService } from "../../service/shared.service";
-export declare class AvatarComponent {
+import { CoDocument } from "@colijnit/transactionapi/build/model/co-document";
+export declare class AvatarComponent implements AfterViewInit {
     private _transactionService;
     private _sharedService;
+    set image(value: CoDocument);
+    get image(): CoDocument;
     set relationId(value: number);
     get relationId(): number;
     relation: RelationListObject;
     showClass(): boolean;
-    image: string;
+    imageSrc: string;
+    initials: string;
     private _relationId;
+    private _image;
     constructor(_transactionService: TransactionService, _sharedService: SharedService);
+    ngAfterViewInit(): void;
     private _getRelation;
+    private _getImageSrcFromCoDocument;
 }

package/lib/component/avatar/style/_layout.scss

@@ -17,5 +17,16 @@
         fill: white;
       }
     }
+
+    .co-image-display {
+      width: 30px;
+      height: 30px;
+      overflow: hidden;
+      border-radius: 50px;
+
+      .image {
+        object-fit: cover;
+      }
+    }
   }
 }

package/lib/component/checkout/style/_layout.scss

@@ -10,7 +10,6 @@
       padding: $tp-checkout-padding;
     }
     .co-stepper-step {
-      display: flex;
       flex-basis: 60%;
       flex-grow: 1;
       flex-shrink: 1;

package/lib/component/core/image-display/style/_layout.scss

@@ -37,6 +37,7 @@
       }
       .no-image-label {
         font-size: $tp-image-display-no-image-label-font-size;
+        text-align: center;
       }
     }
 

package/lib/component/payment-qr-code/style/_layout.scss

@@ -4,6 +4,9 @@
     height: 100%;
     width: 100%;
     .payment-qr-code-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       height: 100%;
       img {
         max-height: 100%;

package/lib/component/status-bar/status-bar.component.d.ts

@@ -0,0 +1,8 @@
+import { Icon } from "../../enum/icon.enum";
+import { IconCacheService } from "../../service/icon-cache.service";
+export declare class StatusBarComponent {
+    iconCacheService: IconCacheService;
+    readonly icons: typeof Icon;
+    showClass(): boolean;
+    constructor(iconCacheService: IconCacheService);
+}

package/lib/component/status-bar/status-bar.module.d.ts

@@ -0,0 +1,2 @@
+export declare class StatusBarModule {
+}

package/lib/component/status-bar/style/_layout.scss

@@ -0,0 +1,14 @@
+@include export-module('cc-status-bar-layout') {
+  .co-status-bar {
+    .status-bar-icons-wrapper {
+      display: flex;
+      flex-direction: row;
+      column-gap: 2px;
+    }
+
+    co-icon {
+      height: $tp-status-bar-icon-height;
+      width: $tp-status-bar-icon-width;
+    }
+  }
+}

package/lib/component/status-bar/style/_material-definition.scss

@@ -0,0 +1,5 @@
+$tp-status-bar-icon-width: 0.8rem !default;
+$tp-status-bar-icon-height: 0.8rem !default;
+$tp-status-bar-icon-color: $tp-color-grey !default;
+$tp-status-bar-icon-active-color: $tp-color-active-light !default;
+$tp-status-bar-icon-warning-color: $tp-color-warning !default;

package/lib/component/status-bar/style/_theme.scss

@@ -0,0 +1,15 @@
+@include export-module('cc-status-bar-theme') {
+  .co-status-bar {
+    co-icon {
+      fill: $tp-status-bar-icon-color;
+
+      &.color-green {
+        fill: $tp-status-bar-icon-active-color;
+      }
+
+      &.color-orange {
+        fill: $tp-status-bar-icon-warning-color;
+      }
+    }
+  }
+}

package/lib/component/status-bar/style/material.scss

@@ -0,0 +1,3 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";

package/lib/component/transaction/style/_layout.scss

@@ -28,5 +28,23 @@
         justify-content: space-between;
       }
     }
+    .transaction-tiles-wrapper {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      grid-column-gap: 5px;
+      grid-row-gap: 5px;
+
+      @media(max-width: 1500px) {
+        grid-template-columns: repeat(3, 1fr);
+      }
+
+      @media(max-width: 1200px) {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      @media(max-width: 900px) {
+        grid-template-columns: repeat(1, 1fr);
+      }
+    }
   }
 }

package/lib/component/transaction-grid/transaction-history-grid/style/_layout.scss

@@ -11,5 +11,19 @@
       display: flex;
       justify-content: flex-end;
     }
+
+    .row-container {
+      display: flex;
+      flex-direction: column;
+
+      .row {
+
+      }
+
+      .correction {
+        margin-top: 8px;
+        color: #DB2C2C ;
+      }
+    }
   }
 }

package/lib/component/transaction-header/transaction-header-payment/style/_layout.scss

@@ -13,6 +13,8 @@
       padding: $tp-transaction-header-block-payment-balance-padding;
       .payment-icon {
         margin-right: 10px;
+        height: $tp-transaction-header-block-payment-balance-icon-size;
+        width: $tp-transaction-header-block-payment-balance-icon-size;
       }
     }
   }

package/lib/component/transaction-header/transaction-header-payment/style/_material-definition.scss

@@ -5,3 +5,4 @@ $tp-transaction-header-block-payment-balance-border-color: $tp-color-font !defau
 $tp-transaction-header-block-payment-balance-border-width: 1px !default;
 $tp-transaction-header-block-payment-balance-border-radius: 10px !default;
 $tp-transaction-header-block-payment-balance-to-pay-color: #FF4141 !default;
+$tp-transaction-header-block-payment-balance-icon-size: 20px !default;

package/lib/component/transaction-receiving-goods-history/style/_layout.scss

@@ -3,5 +3,18 @@
 @include export-module('co-transaction-receiving-goods-history') {
   .co-transaction-receiving-goods-history {
 
+    .row-container {
+      display: flex;
+      flex-direction: column;
+
+      .row {
+
+      }
+
+      .correction {
+        margin-top: 8px;
+        color: #DB2C2C;
+      }
+    }
   }
 }

package/lib/component/transaction-search/style/_layout.scss

@@ -12,7 +12,7 @@
       //overflow: hidden;
 
       &.fullscreen {
-        width: 100vw;
+        width: 100%;
         transition: width 0.2s ease-in-out;
       }
 

package/lib/component/transaction-search/style/_material-definition.scss

@@ -47,8 +47,9 @@ $tp-co-transaction-search-filter-button-size: 50px !default;
 $tp-co-transaction-search-filter-button-border-radius: 5px !default;
 
 $tp-co-transaction-search-result-width: 100% !default;
-$tp-co-transaction-search-result-wrapper-padding: 10px !default;
+$tp-co-transaction-search-result-wrapper-padding: 0 10px !default;
 $tp-co-transaction-search-result-upper-header-padding-left: 27px !default;
+$tp-co-transaction-search-result-upper-header-height: 20px !default;
 $tp-co-transaction-search-result-header-buttons-wrapper-padding: 0 27px !default;
 $tp-co-transaction-search-result-header-sidebar-button-size: 21px !default;
 
@@ -58,6 +59,9 @@ $tp-co-transaction-search-input-text-label-margin-left: 5% !default;
 
 $tp-co-transaction-search-view-modes-wrapper-padding: 0 35px !default;
 
+$tp-transaction-tile-background-color: $tp-color-light  !default;
+$tp-transaction-tile-background-color-hover: $tp-color-less-light !default;
+$tp-transaction-tile-background-color-selected: #F0F5FF !default;
 $tp-transaction-tiles-wrapper-padding: 20px !default;
 $tp-transaction-tiles-wrapper-row-gap: 5px !default;
 $tp-transaction-tiles-wrapper-width: 100% !default;
@@ -65,8 +69,10 @@ $tp-transaction-tiles-wrapper-height: 100% !default;
 $tp-transaction-tiles-wrapper-column-gap: 5px !default;
 $tp-transaction-tile-font-family: $tp-font-family !default;
 $tp-transaction-tile-font-size: $tp-font-size !default;
-$tp-transaction-tile-height: 150px !default;
+$tp-transaction-tile-height: 170px !default;
+$tp-transaction-tile-body-height: 100px !default;
 $tp-transaction-tile-width: 300px !default;
+$tp-transaction-tile-width-mobile: 85 vw !default;
 $tp-transaction-tile-padding: 10px 15px !default;
 $tp-transaction-tile-row-gap: 10px !default;
 $tp-transaction-tile-column-gap: 10px !default;
@@ -77,6 +83,8 @@ $tp-transaction-tile-header-font-size: $tp-font-size !default;
 $tp-transaction-tile-header-font-weight: bold !default;
 $tp-transaction-tile-header-font-color: $tp-color-font !default;
 $tp-transaction-tile-footer-border-color: $tp-transaction-tile-font-color !default;
+$tp-transaction-tile-footer-padding: 10px 0 !default;
+$tp-transaction-tile-footer-middle-section-padding: 0 15px !default;
 $tp-transaction-tile-value-height: 20px !default;
 $tp-transaction-tile-border-color: $tp-color-border !default;
 $tp-transaction-tile-button-color: $tp-color-active-light !default;
@@ -91,7 +99,4 @@ $tp-transaction-tile-icon-height: 1.2rem !default;
 $tp-transaction-tile-icon-active-color: $tp-color-active !default;
 $tp-transaction-tile-icon-inactive-color: $tp-color-font !default;
 
-$tp-transaction-tile-background-color: $tp-color-light  !default;
-$tp-transaction-tile-hover-background-color: $tp-color-less-light !default;
-$tp-transaction-tile-selected-background-color: #F0F5FF !default;
 

package/lib/component/transaction-search/transaction-search-header/style/_layout.scss

@@ -9,6 +9,7 @@
     .upper-header {
       display: flex;
       justify-content: flex-end;
+      height: $tp-co-transaction-search-result-upper-header-height;
       padding-left: $tp-co-transaction-search-result-upper-header-padding-left;
 
       .header-buttons-wrapper {

package/lib/component/transaction-search/transaction-search-tile/transaction-search-tile/style/_layout.scss

@@ -2,23 +2,18 @@
   .co-transaction-search-tile {
     .co-transaction-search-tile-content {
       display: flex;
-      flex-direction: column;
-      justify-content: space-between;
       height: $tp-transaction-tile-height;
 
       @media(max-width: 600px) {
-        width: 85vw;
+        width: $tp-transaction-tile-width-mobile;
       }
 
       @media(min-width: 601px) {
         width: $tp-transaction-tile-width;
       }
+
       border-radius: $tp-tile-border-radius;
       padding: $tp-transaction-tile-padding;
-      row-gap: $tp-transaction-tile-row-gap;
-
-      font-family: $tp-transaction-tile-font-family;
-      font-size: $tp-transaction-tile-font-size;
 
       .transaction-tile-wrapper {
         cursor: pointer;
@@ -31,78 +26,117 @@
         font-size: $tp-transaction-tile-header-font-size;
       }
 
-      .transaction-tile-body {
-        display: flex;
-        justify-content: space-between;
-        column-gap: $tp-transaction-tile-column-gap;
-        height: 80px;
+      co-avatar {
+        width: $tp-transaction-tile-avatar-width;
+        height: $tp-transaction-tile-avatar-height;
+      }
 
-        co-avatar {
-          width: $tp-transaction-tile-avatar-width;
-          height: $tp-transaction-tile-avatar-height;
-        }
+      .label {
+        font-size: $tp-transaction-tile-font-size-small;
+      }
 
-        .transaction-tile-seller-info {
-          display: flex;
-          flex-direction: column;
-          row-gap: $tp-transaction-tile-row-gap;
-          max-width: 50%;
+      .value {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-end;
+        min-width: max-content;
+        font-size: $tp-transaction-tile-font-size-small;
+        height: $tp-transaction-tile-value-height;
+
+        co-icon {
+          height: $tp-transaction-tile-icon-height;
+          width: $tp-transaction-tile-icon-width;
+
+          svg {
+            position: relative;
+            top: 0.22em;
+          }
         }
+      }
 
-        .transaction-tile-order-summary {
-          display: flex;
-          flex-direction: column;
-          align-items: flex-end;
 
-          co-button {
-            font-weight: $tp-transaction-tile-button-font-weight;
-            margin-top: $tp-transaction-tile-button-margin-top;
-            border-radius: $tp-transaction-tile-button-border-radius;
-            height: $tp-transaction-tile-button-height;
-          }
-        }
+      //grid
+      .tile {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1.5fr 1.5fr 1fr;
+        gap: 10px 10px;
+      }
+
+      .tile-header {
+        display: grid;
+        grid-template-columns: 0.4fr 1.3fr 1.3fr;
+        grid-template-rows: 1.5fr;
+        gap: 0 10px;
+        grid-area: 1 / 1 / 2 / 2;
+      }
+
+      .tile-upper-left {
+        grid-area: 1 / 1 / 2 / 2;
       }
 
-      .transaction-tile-footer {
+      .tile-upper-middle {
+        grid-area: 1 / 2 / 2 / 3;
         display: flex;
-        justify-content: space-between;
-        padding: 10px 0;
+        flex-direction: column;
+        row-gap: 3px;
+      }
 
-        .order-info-section {
-          width: fit-content;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
+      .tile-upper-right {
+        grid-area: 1 / 3 / 2 / 4;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        row-gap: 3px;
+      }
 
-          &:nth-child(2) {
-            padding: 0 15px;
-          }
 
-          .label {
-            font-size: $tp-transaction-tile-font-size-small;
-          }
+      .tile-body {
+        display: grid;
+        grid-template-columns: 0.4fr 2.6fr 0fr;
+        grid-template-rows: 1.5fr;
+        gap: 0 10px;
+        grid-area: 2 / 1 / 3 / 2;
+      }
 
-          .value {
-            display: flex;
-            flex-direction: row;
-            align-items: flex-end;
-            min-width: fit-content;
-            font-size: $tp-transaction-tile-font-size-small;
-            height: $tp-transaction-tile-value-height;
-
-            co-icon {
-              height: $tp-transaction-tile-icon-height;
-              width: $tp-transaction-tile-icon-width;
-
-              svg {
-                position: relative;
-                top: 0.22em;
-              }
-            }
-          }
-        }
+      .tile-middle-left {
+        grid-area: 1 / 1 / 2 / 2;
       }
-    }
 
+      .tile-middle-middle {
+        grid-area: 1 / 2 / 2 / 3;
+        overflow: hidden;
+      }
+
+      .tile-middle-right {
+        grid-area: 1 / 3 / 2 / 4;
+      }
+
+      .tile-footer {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-template-rows: 1fr;
+        gap: 0 15px;
+        grid-area: 3 / 1 / 4 / 2;
+      }
+
+      .tile-bottom-left {
+        grid-area: 1 / 1 / 2 / 2;
+      }
+
+      .tile-bottom-middle {
+        grid-area: 1 / 2 / 2 / 3;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      .tile-bottom-right {
+        grid-area: 1 / 3 / 2 / 4;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+      }
+    }
   }
 }

package/lib/component/transaction-search/transaction-search-tile/transaction-search-tile/style/_theme.scss

@@ -12,27 +12,29 @@
         color: $tp-transaction-tile-font-color;
       }
 
-      .transaction-tile-footer {
-        .order-info-section {
-          &:nth-child(2) {
-            border-left: 0.5px solid  $tp-transaction-tile-border-color;
-            border-right: 0.5px solid  $tp-transaction-tile-border-color;
-          }
 
-          .label {
-            color: $tp-transaction-tile-font-color;
-          }
+      .tile-bottom-left {
+        border-right: 1px solid $tp-transaction-tile-border-color;
+      }
+
+      .tile-bottom-right {
+        border-left: 1px solid $tp-transaction-tile-border-color;
+      }
+
+      .order-info-section {
+        .label {
+          color: $tp-transaction-tile-font-color;
+        }
 
-          .value {
-            color: $tp-transaction-tile-font-color-dark;
+        .value {
+          color: $tp-transaction-tile-font-color-dark;
 
-            .lock-icon [fill] {
-              fill: $tp-transaction-tile-icon-active-color;
-            }
+          .lock-icon [fill] {
+            fill: $tp-transaction-tile-icon-active-color;
+          }
 
-            .unlock-icon [fill] {
-              fill: $tp-transaction-tile-icon-inactive-color;
-            }
+          .unlock-icon [fill] {
+            fill: $tp-transaction-tile-icon-inactive-color;
           }
         }
       }
@@ -40,13 +42,13 @@
 
     &:hover {
       .co-transaction-search-tile-content {
-        background-color: $tp-transaction-tile-hover-background-color;
+        background-color: $tp-transaction-tile-background-color-hover;
       }
     }
 
     &.selected {
       .co-transaction-search-tile-content {
-        background-color:$tp-transaction-tile-selected-background-color;
+        background-color: $tp-transaction-tile-background-color-selected;
       }
     }
   }