fix(admin-ui): Fix layout of custom timeline entries

vendure-ecommerce · Jun 12, 2024 · 3e075aa · 3e075aa
1 parent ac29e25
commit 3e075aa
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 23 deletions.
diff --git a/.../admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.html b/.../admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.html
@@ -3,6 +3,7 @@
     [class.has-custom-icon]="!!iconShape"
     class="entry"
     [class.last]="isLast === true"
+    [class.first]="isFirst === true"
     [class.collapsed]="collapsed"
 >
     <div class="timeline" (click)="expandClick.emit()" [title]="timelineTitle | translate">

diff --git a/.../admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.scss b/.../admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.scss
@@ -2,24 +2,24 @@
 
 :host {
     display: block;
+}
 
-    &:first-of-type {
-        .timeline {
-            &:before {
-                border-left-color: var(--color-weight-200);
-            }
+.first {
+    .timeline {
+        &:before {
+            border-left-color: var(--color-weight-200);
         }
+    }
 
-        .entry-body {
-            max-height: initial;
-            @media screen and (min-width: $breakpoint-small) {
-                flex-direction: column;
-            }
-        }
-        .featured-entry {
-            width: 100%;
+    .entry-body {
+        max-height: initial;
+        @media screen and (min-width: $breakpoint-small) {
+            flex-direction: column;
         }
     }
+    .featured-entry {
+        width: 100%;
+    }
 }
 
 .entry {

diff --git a/...es/admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.ts b/...es/admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.ts
@@ -23,6 +23,7 @@ export class TimelineEntryComponent {
     @Input() name: string;
     @Input() featured: boolean;
     @Input() iconShape?: string | [string, string];
+    @Input() isFirst?: boolean;
     @Input() isLast?: boolean;
     @HostBinding('class.collapsed')
     @Input()

diff --git a/...admin-ui/src/lib/customer/src/components/customer-history/customer-history.component.html b/...admin-ui/src/lib/customer/src/components/customer-history/customer-history.component.html
@@ -1,5 +1,6 @@
 <div class="entry-list">
-    <vdr-timeline-entry iconShape="note" displayType="muted" [featured]="true" *vdrIfPermissions="'UpdateCustomer'">
+    <vdr-timeline-entry iconShape="note" displayType="muted" [featured]="true" *vdrIfPermissions="'UpdateCustomer'"
+                        [isFirst]="true">
         <div class="note-entry">
             <textarea [(ngModel)]="note" name="note" class="note"></textarea>
             <button class="btn btn-secondary" [disabled]="!note" (click)="addNoteToCustomer()">
@@ -105,11 +106,13 @@
                             {{ 'customer.history-customer-email-update-requested' | translate }}
                             <vdr-history-entry-detail>
                                 <vdr-labeled-data [label]="'customer.old-email-address' | translate">{{
-                                    entry.data.oldEmailAddress
-                                }}</vdr-labeled-data>
+                                        entry.data.oldEmailAddress
+                                    }}
+                                </vdr-labeled-data>
                                 <vdr-labeled-data [label]="'customer.new-email-address' | translate">{{
-                                    entry.data.newEmailAddress
-                                }}</vdr-labeled-data>
+                                        entry.data.newEmailAddress
+                                    }}
+                                </vdr-labeled-data>
                             </vdr-history-entry-detail>
                         </div>
                     </ng-container>
@@ -118,11 +121,13 @@
                             {{ 'customer.history-customer-email-update-verified' | translate }}
                             <vdr-history-entry-detail>
                                 <vdr-labeled-data [label]="'customer.old-email-address' | translate">{{
-                                    entry.data.oldEmailAddress
-                                }}</vdr-labeled-data>
+                                        entry.data.oldEmailAddress
+                                    }}
+                                </vdr-labeled-data>
                                 <vdr-labeled-data [label]="'customer.new-email-address' | translate">{{
-                                    entry.data.newEmailAddress
-                                }}</vdr-labeled-data>
+                                        entry.data.newEmailAddress
+                                    }}
+                                </vdr-labeled-data>
                             </vdr-history-entry-detail>
                         </div>
                     </ng-container>

diff --git a/packages/admin-ui/src/lib/order/src/components/order-history/order-history.component.html b/packages/admin-ui/src/lib/order/src/components/order-history/order-history.component.html
@@ -1,5 +1,5 @@
 <div class="entry-list" [class.expanded]="expanded">
-    <vdr-timeline-entry iconShape="note" displayType="muted" [featured]="true">
+    <vdr-timeline-entry iconShape="note" displayType="muted" [featured]="true" [isFirst]="true">
         <div class="note-entry">
             <textarea [(ngModel)]="note" name="note" class="note"></textarea>
             <button class="btn btn-secondary" [disabled]="!note" (click)="addNoteToOrder()">