feat(admin-ui): Make order history collapsible

packages/admin-ui/i18n-coverage.json

@@ -1,39 +1,39 @@
 {
-  "generatedOn": "2020-09-15T15:16:07.529Z",
-  "lastCommit": "8232ddce0b03f8f1b30e8d02563d5fe2d5f5ebe8",
+  "generatedOn": "2020-09-16T09:31:41.452Z",
+  "lastCommit": "7883a7ac3175bffdfc97891edd23ab8a1dfb7d0a",
   "translationStatus": {
     "de": {
-      "tokenCount": 670,
+      "tokenCount": 672,
       "translatedCount": 609,
       "percentage": 91
     },
     "en": {
-      "tokenCount": 670,
-      "translatedCount": 669,
+      "tokenCount": 672,
+      "translatedCount": 670,
       "percentage": 100
     },
     "es": {
-      "tokenCount": 670,
+      "tokenCount": 672,
       "translatedCount": 466,
-      "percentage": 70
+      "percentage": 69
     },
     "pl": {
-      "tokenCount": 669,
+      "tokenCount": 672,
       "translatedCount": 564,
       "percentage": 84
     },
     "pt_BR": {
-      "tokenCount": 669,
+      "tokenCount": 672,
       "translatedCount": 655,
-      "percentage": 98
+      "percentage": 97
     },
     "zh_Hans": {
-      "tokenCount": 669,
+      "tokenCount": 672,
       "translatedCount": 548,
       "percentage": 82
     },
     "zh_Hant": {
-      "tokenCount": 669,
+      "tokenCount": 672,
       "translatedCount": 548,
       "percentage": 82
     }

packages/admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.html

@@ -1,8 +1,14 @@
-<div [ngClass]="displayType" [class.has-custom-icon]="!!iconShape" class="entry" [class.last]="isLast === true">
-    <div class="timeline">
+<div
+    [ngClass]="displayType"
+    [class.has-custom-icon]="!!iconShape"
+    class="entry"
+    [class.last]="isLast === true"
+    [class.collapsed]="collapsed"
+>
+    <div class="timeline" (click)="expandClick.emit()" [title]="timelineTitle | translate">
         <div class="custom-icon">
             <clr-icon
-                *ngIf="iconShape"
+                *ngIf="iconShape && !collapsed"
                 [attr.shape]="getIconShape()"
                 [ngClass]="getIconClass()"
                 size="24"

packages/admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.scss

@@ -1,18 +1,32 @@
 @import "variables";
 
+:host {
+    display: block;
+
+    &:first-of-type {
+        .timeline {
+            &:before {
+                border-left-color: $color-grey-100;
+            }
+        }
+        .entry-body {
+            max-height: initial;
+        }
+    }
+}
 .entry {
     display: flex;
 }
 .timeline {
     border-left: 2px solid $color-primary-100;
-    padding-bottom: 24px;
+    padding-bottom: 8px;
     position: relative;
 
     &:before {
         content: '';
         position: absolute;
         width: 2px;
-        height: 10px;
+        height: 32px;
         left: -2px;
         border-left: 2px solid $color-primary-100;
     }
@@ -26,7 +40,9 @@
         border: 1px solid $color-grey-400;
         position: absolute;
         left: -5px;
-        top: 4px;
+        top: 32px;
+        transition: top 0.2s;
+        cursor: pointer;
     }
 
     .custom-icon {
@@ -34,7 +50,7 @@
         width: 32px;
         height: 32px;
         left: -17px;
-        top: -4px;
+        top: 32px;
         align-items: center;
         justify-content: center;
         border-radius: 50%;
@@ -60,11 +76,14 @@
 
 .entry-body {
     flex: 1;
-    padding-bottom: 24px;
+    padding-top: 24px;
     padding-left: 12px;
     line-height: 16px;
     margin-left: 12px;
     color: $color-grey-500;
+    overflow: visible;
+    max-height: 100px;
+    transition: max-height 0.2s, padding-top 0.2s, opacity 0.2s 0.2s;
 }
 
 .featured-entry ::ng-deep {
@@ -126,3 +145,18 @@
         border: 1px solid $color-warning-400;
     }
 }
+
+.collapsed {
+    .entry-body {
+        max-height: 0;
+        overflow: hidden;
+        opacity: 0;
+        padding-top: 0;
+    }
+    .timeline {
+        border-left-color: transparent;
+    }
+    .timeline:after {
+        top: 0;
+    }
+}

packages/admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.ts

@@ -1,4 +1,13 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    EventEmitter,
+    HostBinding,
+    Input,
+    OnInit,
+    Output,
+} from '@angular/core';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 export type TimelineDisplayType = 'success' | 'error' | 'warning' | 'default' | 'muted';
 
@@ -15,6 +24,14 @@ export class TimelineEntryComponent {
     @Input() featured: boolean;
     @Input() iconShape?: string | [string, string];
     @Input() isLast?: boolean;
+    @HostBinding('class.collapsed')
+    @Input()
+    collapsed = false;
+    @Output() expandClick = new EventEmitter();
+
+    get timelineTitle(): string {
+        return this.collapsed ? _('common.expand-entries') : _('common.collapse-entries');
+    }
 
     getIconShape() {
         if (this.iconShape) {

packages/admin-ui/src/lib/order/src/components/order-history/order-history.component.html

@@ -1,6 +1,6 @@
 <h4>{{ 'order.order-history' | translate }}</h4>
-<div class="entry-list">
-    <vdr-timeline-entry iconShape="note" displayType="muted">
+<div class="entry-list" [class.expanded]="expanded">
+    <vdr-timeline-entry iconShape="note" displayType="muted" [featured]="true">
         <div class="note-entry">
             <textarea [(ngModel)]="note" name="note" class="note"></textarea>
             <button class="btn btn-secondary" [disabled]="!note" (click)="addNoteToOrder()">
@@ -27,6 +27,8 @@
         [createdAt]="entry.createdAt"
         [name]="getName(entry)"
         [featured]="isFeatured(entry)"
+        [collapsed]="!expanded && !isFeatured(entry)"
+        (expandClick)="expanded = !expanded"
     >
         <ng-container [ngSwitch]="entry.type">
             <ng-container *ngSwitchCase="type.ORDER_STATE_TRANSITION">

packages/admin-ui/src/lib/order/src/components/order-history/order-history.component.ts

@@ -22,6 +22,7 @@ export class OrderHistoryComponent {
     @Output() deleteNote = new EventEmitter<HistoryEntry>();
     note = '';
     noteIsPrivate = true;
+    expanded = false;
     readonly type = HistoryEntryType;
 
     getDisplayType(entry: GetOrderHistory.Items): TimelineDisplayType {

packages/admin-ui/src/lib/static/i18n-messages/de.json

@@ -144,6 +144,7 @@
     "channel": "Kanal",
     "channels": "Kanäle",
     "code": "Code",
+    "collapse-entries": "",
     "confirm": "",
     "confirm-delete-note": "",
     "confirm-navigation": "Navigation bestätigen",
@@ -162,6 +163,7 @@
     "edit-field": "Feld bearbeiten",
     "edit-note": "",
     "enabled": "Aktiviert",
+    "expand-entries": "",
     "extension-running-in-separate-window": "Die Erweiterung läuft in einem separaten Fenster",
     "guest": "Gast",
     "hide-custom-fields": "Benutzerdefinierte Felder ausblenden",

packages/admin-ui/src/lib/static/i18n-messages/en.json

@@ -144,6 +144,7 @@
     "channel": "Channel",
     "channels": "Channels",
     "code": "Code",
+    "collapse-entries": "Collapse entries",
     "confirm": "Confirm",
     "confirm-delete-note": "Delete note?",
     "confirm-navigation": "Confirm navigation",
@@ -162,6 +163,7 @@
     "edit-field": "Edit field",
     "edit-note": "Edit note",
     "enabled": "Enabled",
+    "expand-entries": "Expand entries",
     "extension-running-in-separate-window": "Extension is running in a separate window",
     "guest": "Guest",
     "hide-custom-fields": "Hide custom fields",

packages/admin-ui/src/lib/static/i18n-messages/es.json

@@ -144,6 +144,7 @@
     "channel": "Canal de ventas",
     "channels": "Canales de ventas",
     "code": "Código",
+    "collapse-entries": "",
     "confirm": "Confirmar",
     "confirm-delete-note": "¿Eliminar nota?",
     "confirm-navigation": "Confirmar navegación",
@@ -162,6 +163,7 @@
     "edit-field": "Editar campo",
     "edit-note": "Editar nota",
     "enabled": "Habilitado",
+    "expand-entries": "",
     "extension-running-in-separate-window": "La extensión se está ejecutando en una nueva ventana",
     "guest": "Invitado",
     "hide-custom-fields": "Ocultar campos personalizados",

packages/admin-ui/src/lib/static/i18n-messages/pl.json

@@ -144,6 +144,7 @@
     "channel": "Kanał",
     "channels": "Kanały",
     "code": "Kod",
+    "collapse-entries": "",
     "confirm": "",
     "confirm-delete-note": "",
     "confirm-navigation": "Potwierdź nawigacje",
@@ -162,6 +163,7 @@
     "edit-field": "Edytuj pole",
     "edit-note": "",
     "enabled": "Aktywny",
+    "expand-entries": "",
     "extension-running-in-separate-window": "Rozszerzenie jest włączone w innym oknie",
     "guest": "Gość",
     "hide-custom-fields": "Ukryj pola dodatkowe",
@@ -538,6 +540,7 @@
     "fulfillment-method": "Metoda realizacji",
     "history-coupon-code-applied": "Użyto kodu rabatowego",
     "history-coupon-code-removed": "Usunięto kod rabatowy",
+    "history-fulfillment-created": "",
     "history-fulfillment-delivered": "",
     "history-fulfillment-shipped": "",
     "history-fulfillment-transition": "",

packages/admin-ui/src/lib/static/i18n-messages/pt_BR.json

@@ -144,6 +144,7 @@
     "channel": "Canal",
     "channels": "Canais",
     "code": "Código",
+    "collapse-entries": "",
     "confirm": "Confirme",
     "confirm-delete-note": "Excluir nota?",
     "confirm-navigation": "Confrme navegação",
@@ -162,6 +163,7 @@
     "edit-field": "Editar campo",
     "edit-note": "Editar nota",
     "enabled": "Habilitado",
+    "expand-entries": "",
     "extension-running-in-separate-window": "A extensão está sendo executada em uma janela separada",
     "guest": "Convidado",
     "hide-custom-fields": "Ocultar campos personalizados",
@@ -538,6 +540,7 @@
     "fulfillment-method": "Método de execução",
     "history-coupon-code-applied": "Código de cupom aplicado",
     "history-coupon-code-removed": "Código de cupom excluído",
+    "history-fulfillment-created": "",
     "history-fulfillment-delivered": "",
     "history-fulfillment-shipped": "",
     "history-fulfillment-transition": "",

packages/admin-ui/src/lib/static/i18n-messages/zh_Hans.json

@@ -144,6 +144,7 @@
     "channel": "销售渠道",
     "channels": "销售渠道",
     "code": "编码",
+    "collapse-entries": "",
     "confirm": "",
     "confirm-delete-note": "",
     "confirm-navigation": "导航确认",
@@ -162,6 +163,7 @@
     "edit-field": "编辑域",
     "edit-note": "",
     "enabled": "启用",
+    "expand-entries": "",
     "extension-running-in-separate-window": "扩展已在另一个窗口启动",
     "guest": "游客",
     "hide-custom-fields": "隐藏客户化字段",
@@ -538,6 +540,7 @@
     "fulfillment-method": "配货方式",
     "history-coupon-code-applied": "优惠卷已使用",
     "history-coupon-code-removed": "优惠卷已移除",
+    "history-fulfillment-created": "",
     "history-fulfillment-delivered": "",
     "history-fulfillment-shipped": "",
     "history-fulfillment-transition": "",

packages/admin-ui/src/lib/static/i18n-messages/zh_Hant.json

@@ -144,6 +144,7 @@
     "channel": "渠道",
     "channels": "渠道",
     "code": "編碼",
+    "collapse-entries": "",
     "confirm": "",
     "confirm-delete-note": "",
     "confirm-navigation": "導航確認",
@@ -162,6 +163,7 @@
     "edit-field": "編辑域",
     "edit-note": "",
     "enabled": "启用",
+    "expand-entries": "",
     "extension-running-in-separate-window": "扩展已在另一個窗口启動",
     "guest": "游客",
     "hide-custom-fields": "隱藏客戶自訂欄位",
@@ -538,6 +540,7 @@
     "fulfillment-method": "配貨方式",
     "history-coupon-code-applied": "優惠卷已使用",
     "history-coupon-code-removed": "優惠卷已移除",
+    "history-fulfillment-created": "",
     "history-fulfillment-delivered": "",
     "history-fulfillment-shipped": "",
     "history-fulfillment-transition": "",