Skip to content

Commit

Permalink
feat(admin-ui): Improve styling of order/customer history timeline
Browse files Browse the repository at this point in the history
  • Loading branch information
@michaelbromley
michaelbromley committed Jan 18, 2024
1 parent 4a8b91a commit aeebbdd
Show file tree
Hide file tree
Showing 12 changed files with 165 additions and 52 deletions.
87 changes: 64 additions & 23 deletions .../admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,37 @@
@import 'variables';

:host {
display: block;

&:first-of-type {
.timeline {
&:before {
border-left-color: var(--color-timeline-thread);
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 {
display: flex;

&:not(.collapsed):hover {
background-color: var(--color-table-row-hover-bg);
}
}

.timeline {
border-inline-start: 2px solid var(--color-timeline-thread);
border-inline-start: 2px solid var(--color-weight-200);
padding-bottom: 8px;
position: relative;

Expand All @@ -27,70 +41,90 @@
width: 2px;
height: 32px;
left: -2px;
border-inline-start: 2px solid var(--color-timeline-thread);
border-inline-start: 2px solid var(--color-weight-200);
}

&:after {
content: '';
display: block;
border-radius: 50%;
width: 8px;
height: 8px;
background-color: var(--color-component-bg-200);
border: 1px solid var(--color-component-border-300);
background-color: var(--color-weight-100);
border: 1px solid var(--color-weight-300);
position: absolute;
left: -5px;
top: 32px;
top: 42%;
transition: top 0.2s;
cursor: pointer;
outline: 2px solid var(--color-card-bg);
}

.custom-icon {
position: absolute;
width: 32px;
height: 32px;
left: -17px;
top: 32px;
top: 30%;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--color-primary-700);
background-color: var(--color-component-bg-100);
border: 1px solid var(--color-component-border-200);
background-color: var(--color-weight-100);
border: 1px solid var(--color-weight-200);
outline: 7px solid var(--color-card-bg);
padding: 6px;
display: none;
}
}

.entry.has-custom-icon {
.timeline:after {
display: none;
}

.custom-icon {
display: flex;
}
}

.entry.last {
.timeline {
border-left-color: transparent;
}
}

.entry-body {
font-size: var(--font-size-xs);
flex: 1;
padding-top: 24px;
padding: 16px 0;
padding-inline-start: 12px;
line-height: 16px;
margin-inline-start: 12px;
color: var(--color-text-200);
overflow: visible;
max-height: 100px;
transition: max-height 0.2s, padding-top 0.2s, opacity 0.2s 0.2s;
@media screen and (min-width: $breakpoint-small) {
display: flex;
gap: var(--space-unit);
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
padding-inline-end: var(--space-unit);
}
}

.featured-entry ::ng-deep {
.title {
color: var(--color-text-100);
font-size: 16px;
font-size: var(--font-size-sm);
line-height: 26px;
display: flex;
align-items: center;
gap: var(--space-unit);
}

.note-text {
color: var(--color-text-100);
white-space: pre-wrap;
Expand All @@ -99,49 +133,54 @@

.detail {
display: flex;
gap: 12px;
color: var(--color-text-300);
font-size: 12px;
.time {
}
.name {
margin-inline-start: 12px;
font-size: var(--font-size-xs);
@media screen and (min-width: $breakpoint-small) {
flex-direction: row-reverse;
}
}


.muted {
.timeline, .timeline .custom-icon {
.timeline,
.timeline .custom-icon {
color: var(--color-text-300);
}
}

.success {
.timeline, .timeline .custom-icon {
.timeline,
.timeline .custom-icon {
color: var(--color-success-700);
}

.timeline:after {
background-color: var(--color-success-200);
border: 1px solid var(--color-success-400);
}
}

.error {
.timeline, .timeline .custom-icon {
.timeline,
.timeline .custom-icon {
color: var(--color-error-700);
}

.timeline:after {
background-color: var(--color-error-200);
border: 1px solid var(--color-error-400);
}
}

.warning {
.timeline, .timeline .custom-icon {
.timeline,
.timeline .custom-icon {
color: var(--color-warning-700);
}

.timeline:after {
background-color: var(--color-warning-200);
border: 1px solid var(--color-warning-400);
border: 1px solid var(--color-warning-600);
}
}

Expand All @@ -150,11 +189,13 @@
max-height: 0;
overflow: hidden;
opacity: 0;
padding-top: 0;
padding: 0;
}

.timeline {
border-left-color: transparent;
}

.timeline:after {
top: 0;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,5 @@
}

vdr-order-payment-card + vdr-order-payment-card {
margin-top: var(--space-unit);
margin-top: calc(var(--space-unit) * 2);
}
66 changes: 47 additions & 19 deletions packages/admin-ui/src/lib/order/src/components/order-history/order-history.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
<ng-template [ngIf]="entry.data.to !== 'Cancelled' && entry.data.to !== 'Delivered'">
{{
'order.history-order-transition'
| translate: { from: entry.data.from, to: entry.data.to }
| translate : { from: entry.data.from, to: entry.data.to }
}}
</ng-template>
</ng-container>
Expand All @@ -59,7 +59,7 @@
<ng-container *ngIf="getModification(entry.data.modificationId) as modification">
{{ 'order.modify-order-price-difference' | translate }}:
<strong>{{
modification.priceChange | localeCurrency: order.currencyCode
modification.priceChange | localeCurrency : order.currencyCode
}}</strong>
<vdr-chip colorType="success" *ngIf="modification.isSettled">{{
'order.modification-settled' | translate
Expand All @@ -80,13 +80,17 @@
<div class="title">
{{ 'order.history-payment-settled' | translate }}
</div>
{{ 'order.transaction-id' | translate }}: {{ getPayment(entry)?.transactionId }}
<vdr-history-entry-detail *ngIf="getPayment(entry) as payment">
<vdr-payment-detail
[payment]="payment"
[currencyCode]="order.currencyCode"
></vdr-payment-detail>
</vdr-history-entry-detail>
<div class="flex items-center">
<vdr-chip *ngIf="getPayment(entry) as payment" class="mr-1">{{
payment.amount | localeCurrency : order.currencyCode
}}</vdr-chip>
<vdr-history-entry-detail *ngIf="getPayment(entry) as payment">
<vdr-payment-detail
[payment]="payment"
[currencyCode]="order.currencyCode"
></vdr-payment-detail>
</vdr-history-entry-detail>
</div>
</ng-container>
<ng-template #regularPaymentTransition>
{{
Expand All @@ -101,18 +105,42 @@
</ng-template>
</ng-container>
<ng-container *ngSwitchCase="type.ORDER_REFUND_TRANSITION">
{{
'order.history-refund-transition'
| translate
: { from: entry.data.from, to: entry.data.to, id: entry.data.refundId }
}}
<ng-container *ngIf="entry.data.to === 'Settled'; else regularRefundTransition">
<ng-container *ngIf="getRefund(entry) as refund">
<div class="title">{{ 'order.refund' | translate }} #{{ refund.id }}</div>
<div class="flex items-center">
<vdr-chip colorType="warning" class="mr-1">{{
refund.total | localeCurrency : order.currencyCode
}}</vdr-chip>
<vdr-history-entry-detail>
<vdr-labeled-data [label]="'order.cancellation-reason' | translate">
{{ entry.data.reason }}
</vdr-labeled-data>
<vdr-labeled-data [label]="'order.contents' | translate">
<vdr-simple-item-list [items]="getCancelledItems(refund.lines)"></vdr-simple-item-list>
</vdr-labeled-data>
</vdr-history-entry-detail>
</div>
</ng-container>
</ng-container>
<ng-template #regularRefundTransition>
{{
'order.history-refund-transition'
| translate
: {
from: entry.data.from,
to: entry.data.to,
id: entry.data.refundId
}
}}
</ng-template>
</ng-container>
<ng-container *ngSwitchCase="type.ORDER_CANCELLATION">
{{
'order.history-items-cancelled'
| translate: { count: getCancelledQuantity(entry) }
| translate : { count: getCancelledQuantity(entry) }
}}
<vdr-history-entry-detail *ngIf="getCancelledItems(entry) as items">
<vdr-history-entry-detail *ngIf="getCancelledItems(entry.data.lines) as items">
<vdr-labeled-data [label]="'order.cancellation-reason' | translate">
{{ entry.data.reason }}
</vdr-labeled-data>
Expand Down Expand Up @@ -149,7 +177,7 @@
<ng-container *ngIf="entry.data.to !== 'Delivered' && entry.data.to !== 'Shipped'">
{{
'order.history-fulfillment-transition'
| translate: { from: entry.data.from, to: entry.data.to }
| translate : { from: entry.data.from, to: entry.data.to }
}}
</ng-container>
<vdr-history-entry-detail *ngIf="getFulfillment(entry) as fulfillment">
Expand All @@ -172,8 +200,8 @@
</div>
<div class="flex-spacer"></div>
<vdr-dropdown>
<button class="icon-button" vdrDropdownTrigger>
<clr-icon shape="ellipsis-vertical"></clr-icon>
<button class="button-small ml-1" vdrDropdownTrigger>
<clr-icon shape="ellipsis-vertical" size="12"></clr-icon>
</button>
<vdr-dropdown-menu vdrPosition="bottom-right">
<button
Expand Down
Loading

0 comments on commit aeebbdd

Please sign in to comment.