sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-31 09:37:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feature/1407-Checkout'

Browse Source 
Conflicts:
	apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.html
This commit is contained in:
Andreas Schickinger
2021-03-03 11:08:40 +01:00
parent 9054d63ce9 1a96f9ed16
commit 6e84c116b6
17 changed files with 222 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/domain/availability/src/lib/availability.service.ts
View File

@@ -90,6 +90,7 @@ export class AvailabilityService {
isPrebooked: preferred?.isPrebooked,
estimatedShippingDate: preferred?.at,
price: preferred?.price,
inStock: preferred?.qty,
};
return availability;
}),

5
apps/page/checkout/src/lib/checkout-review/checkout-review.component.html
View File

@@ -1,7 +1,10 @@
<ng-container *ngIf="(groupedItems$ | async)?.length <= 0">
<div class="card stretch card-empty">
<div class="empty-message">
<!-- <ui-icon icon="shopping-cart-white"></ui-icon> -->
<span class="cart-icon">
<ui-icon icon="cart" size="16px"></ui-icon>
</span>
<h1>Ihr Warenkorb ist leer.</h1>
<p>
Sie haben alle Artikel aus dem<br />

12
apps/page/checkout/src/lib/checkout-review/checkout-review.component.scss
View File

@@ -39,6 +39,18 @@
@apply no-underline;
width: 50%;
}
.cart-icon {
@apply justify-center items-center ml-auto mr-auto bg-wild-blue-yonder text-white mb-px-10;
border-radius: 50%;
width: 32px;
height: 32px;
ui-icon {
@apply justify-center;
margin-top: 8px;
}
}
}
.cta-print-wrapper {

54
apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.html
View File

@@ -42,13 +42,17 @@
</div>
</div>
<div class="quantity">
<page-quantity-control
[showSpinner]="purchasingOptionsModalStore.selectFetchingAvailability | async"
[ngModel]="quantity$ | async"
(ngModelChange)="changeQuantity($event)"
></page-quantity-control>
<div class="row">
<page-quantity-control
#quantityControl
[showSpinner]="purchasingOptionsModalStore.selectFetchingAvailability | async"
[ngModel]="quantity$ | async"
(ngModelChange)="changeQuantity($event)"
></page-quantity-control>
<button *ngIf="!quantityControl?.customInput" (click)="backToSetOptions()" class="cta-modify">Ändern</button>
</div>
<div class="quantity-error" *ngIf="quantityError$ | async; let message">{{ message }}</div>
</div>
<button (click)="backToSetOptions()" class="cta-modify">Ändern</button>
</div>
<hr />
<div class="summary-row" *ngIf="quantity$ | async; let quantity">
@@ -60,29 +64,31 @@
</div>
</div>
<div class="actions" *ngIf="option$ | async; let option">
<button class="cta-continue-shopping" [disabled]="(canAdd$ | async) === false" (click)="continue(true)">
<ui-spinner [show]="activeSpinner && activeSpinner === 'continue-shopping'">
Weiter einkaufen
</ui-spinner>
</button>
<button *ngIf="option === 'take-away' && (canAdd$ | async) === true" class="cta-continue" (click)="continue()">
<ui-spinner [show]="activeSpinner && activeSpinner === 'continue'">
Reservieren
</ui-spinner>
</button>
<button *ngIf="option !== 'take-away' && (canAdd$ | async) === true" class="cta-continue" (click)="continue()">
<ui-spinner [show]="activeSpinner && activeSpinner === 'continue'">
Fortfahren
</ui-spinner>
<button
class="cta-continue-shopping"
[disabled]="(fetching$ | async) || (canContinueShopping$ | async) === false"
(click)="continue(true)"
>
Weiter einkaufen
</button>
<button
*ngIf="(option !== 'take-away' || option === 'take-away') && (canAdd$ | async) === false"
*ngIf="showTakeAwayButton$ | async"
[disabled]="(fetching$ | async) || (canAdd$ | async) === false"
class="cta-continue"
(click)="continue()"
>
<ui-spinner [show]="activeSpinner && activeSpinner === 'continue'">
Ohne Artikel Fortfahren
</ui-spinner>
Reservieren
</button>
<button
*ngIf="showDefaultContinueButton$ | async"
class="cta-continue"
(click)="continue()"
[disabled]="(fetching$ | async) || (canAdd$ | async) === false"
>
Fortfahren
</button>
<button *ngIf="showContinueWithoutAdding$ | async" class="cta-continue" (click)="continue()">
Ohne Artikel Fortfahren
</button>
</div>
</ng-container>

14
apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.scss
View File

@@ -67,7 +67,11 @@ img.thumbnail {
}
.quantity {
@apply self-end;
@apply self-end flex flex-col justify-end;
.row {
@apply flex flex-row justify-end;
}
}
.actions {
@@ -84,8 +88,16 @@ img.thumbnail {
.cta-continue {
@apply text-white bg-brand font-bold text-lg px-4 py-2 rounded-full border-none ml-4;
&:disabled {
@apply bg-inactive-branch;
}
}
.can-add-error {
@apply text-xl text-dark-goldenrod mt-2;
}
.quantity-error {
@apply text-brand font-bold text-sm mt-2;
}

59
apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.ts
View File

@@ -5,7 +5,8 @@ import { ApplicationService } from '@core/application';
import { DomainCheckoutService } from '@domain/checkout';
import { AddToShoppingCartDTO } from '@swagger/checkout';
import { UiModalRef } from '@ui/modal';
import { first, map, switchMap } from 'rxjs/operators';
import { combineLatest } from 'rxjs';
import { debounceTime, first, map, switchMap, throttleTime, withLatestFrom } from 'rxjs/operators';
import { PurchasingOptionsModalData } from './purchasing-options-modal.data';
import { PurchasingOptionsModalStore } from './purchasing-options-modal.store';
@@ -35,6 +36,59 @@ export class PurchasingOptionsModalComponent {
readonly branch$ = this.purchasingOptionsModalStore.selectBranch;
readonly canContinueShopping$ = this.purchasingOptionsModalStore.selectCanContinueShopping;
readonly canContinueShoppingIsLoading$ = this.purchasingOptionsModalStore.selectCanContinueShoppingIsLoading;
readonly quantityError$ = this.purchasingOptionsModalStore.selectQuantityError;
readonly showTakeAwayButton$ = combineLatest([
this.option$,
this.purchasingOptionsModalStore.selectFetchingAvailability,
this.purchasingOptionsModalStore.selectCheckingCanAdd,
this.canAdd$,
]).pipe(
map(([option, fetchingAvailability, checkingCanAdd, canAdd]) => {
if (option !== 'take-away') {
return false;
}
if (!fetchingAvailability && !checkingCanAdd && !canAdd) {
return false;
}
return true;
})
);
readonly showDefaultContinueButton$ = combineLatest([
this.option$,
this.purchasingOptionsModalStore.selectFetchingAvailability,
this.purchasingOptionsModalStore.selectCheckingCanAdd,
this.canAdd$,
]).pipe(
map(([option, fetchingAvailability, checkingCanAdd, canAdd]) => {
if (option === 'take-away') {
return false;
}
if (!fetchingAvailability && !checkingCanAdd && !canAdd) {
return false;
}
return true;
})
);
readonly showContinueWithoutAdding$ = combineLatest([this.showTakeAwayButton$, this.showDefaultContinueButton$]).pipe(
map(([showTakeAway, showDefault]) => !(showTakeAway || showDefault))
);
readonly fetching$ = combineLatest([
this.purchasingOptionsModalStore.selectFetchingAvailability,
this.purchasingOptionsModalStore.selectCheckingCanAdd,
]).pipe(map(([fetching, checking]) => fetching || checking));
customerFeatures$ = this.application.activatedProcessId$.pipe(
switchMap((processId) => this.checkoutService.getCustomerFeatures({ processId }))
);
@@ -94,8 +148,11 @@ export class PurchasingOptionsModalComponent {
promotion: { points: item.promoPoints },
};
newItem.product.catalogProductNumber = String(item.id);
switch (option) {
case 'take-away':
newItem.availability.supplierProductNumber = String(item.ids['dig']);
case 'pick-up':
newItem.destination = {
data: { target: 1, targetBranch: { id: branch.id } },

95
apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.store.ts
View File

@@ -6,7 +6,7 @@ import { ItemDTO } from '@swagger/cat';
import { AvailabilityDTO, BranchDTO, OLAAvailabilityDTO, ShoppingCartItemDTO } from '@swagger/checkout';
import { isBoolean, isNullOrUndefined, isString } from '@utils/common';
import { NEVER, Observable } from 'rxjs';
import { debounceTime, filter, switchMap, tap, withLatestFrom } from 'rxjs/operators';
import { debounceTime, delay, filter, switchMap, tap, throttleTime, withLatestFrom } from 'rxjs/operators';
export type PurchasingOptions = 'take-away' | 'pick-up' | 'delivery' | 'dig-delivery' | 'b2b-delivery' | 'download';
@@ -17,11 +17,12 @@ interface PurchasingOptionsModalState {
branchNo?: string;
branch?: BranchDTO;
processId?: number;
fetchingAvailability?: boolean;
fetchingAvailability: boolean;
availableOptions: PurchasingOptions[];
availableBranches: BranchDTO[];
quantity: number;
quantityError?: string;
maxQuantityError: boolean;
checkingCanAdd: boolean;
canAdd: boolean;
canAddError?: string;
filterResult?: BranchDTO[];
@@ -51,16 +52,18 @@ export class PurchasingOptionsModalStore extends ComponentStore<PurchasingOption
readonly selectAvailability = this.select((s) => s.availabilities[s.option]);
readonly selectAvailabilityIsValid = this.select((s) => s.availabilities[s.option]?.availabilityType === 1024);
readonly selectAvailabilityIsValid = this.select(this.selectAvailability, (availability) =>
this.availabilityService.isAvailable({ availability })
);
readonly selectAvailableOptions = this.select((s) => s.availableOptions);
readonly selectAvailableBranches = this.select((s) => s.availableBranches);
readonly selectQuantityError = this.select((s) => s.quantityError);
readonly selectProcessId = this.select((s) => s.processId);
readonly selectCheckingCanAdd = this.select((s) => s.checkingCanAdd);
readonly selectCanAdd = this.select((s) => s.canAdd);
readonly selectCanAddError = this.select((s) => s.canAddError);
@@ -69,6 +72,34 @@ export class PurchasingOptionsModalStore extends ComponentStore<PurchasingOption
readonly selectFetchingAvailability = this.select((s) => s.fetchingAvailability);
readonly selectMaxQuantityError = this.select((s) => s.maxQuantityError);
readonly selectQuantityError = this.select(
this.selectQuantity,
this.selectOption,
this.selectAvailability,
this.selectFetchingAvailability,
this.selectMaxQuantityError,
(quantity, option, availability, fetching, maxQuantityError) => {
if (!fetching) {
if (maxQuantityError) {
return `Achtung, Maximal 999 Exemplare bestellbar.`;
}
if (availability?.inStock < quantity) {
if (option === 'pick-up') {
return `${availability?.inStock} Exemplare sofort lieferbar.`;
}
if (option === 'take-away') {
return `${availability?.inStock} Exemplare sofort lieferbar.`;
}
}
}
return undefined;
}
);
readonly selectOlaAvailability = this.select(
(s): OLAAvailabilityDTO =>
this.availabilityService.mapToOlaAvailability({
@@ -78,6 +109,27 @@ export class PurchasingOptionsModalStore extends ComponentStore<PurchasingOption
})
);
readonly selectCanContinueShopping = this.select(
this.selectFetchingAvailability,
this.selectCanAdd,
this.selectOption,
this.selectQuantityError,
this.selectQuantity,
(fetching, canAdd, option, quantityError, quantity) => {
let hasError = !!quantityError;
if (option === 'pick-up' && quantity <= 999) {
hasError = false;
}
return !fetching && canAdd;
}
).pipe(delay(1));
readonly selectCanContinueShoppingIsLoading = this.select(this.selectFetchingAvailability, this.selectCanAdd, (fetching, canAdd) => {
return fetching;
});
constructor(private checkoutService: DomainCheckoutService, private availabilityService: AvailabilityService) {
super({
availableBranches: [],
@@ -85,6 +137,9 @@ export class PurchasingOptionsModalStore extends ComponentStore<PurchasingOption
quantity: 1,
canAdd: false,
availabilities: {},
checkingCanAdd: false,
fetchingAvailability: false,
maxQuantityError: false,
});
}
@@ -109,7 +164,6 @@ export class PurchasingOptionsModalStore extends ComponentStore<PurchasingOption
readonly setOption = this.updater((state, option: PurchasingOptions) => {
this.loadAvailability();
return {
...state,
option,
@@ -143,10 +197,7 @@ export class PurchasingOptionsModalStore extends ComponentStore<PurchasingOption
readonly setAvailability = this.updater(
(state, { availability, option }: { availability: AvailabilityDTO; option: PurchasingOptions }) => {
if (availability && availability.availabilityType === 1024) {
this.checkCanAdd();
}
this.checkCanAdd();
return {
...state,
availabilities: {
@@ -158,10 +209,18 @@ export class PurchasingOptionsModalStore extends ComponentStore<PurchasingOption
);
readonly setQuantity = this.updater((state, quantity: number = 1) => {
let qty = quantity;
if (quantity > 999) {
qty = 999;
this.patchState({ maxQuantityError: true });
} else {
this.patchState({ maxQuantityError: false });
}
this.loadAvailability();
return {
...state,
quantity,
quantity: qty,
canAdd: false,
canAddError: undefined,
};
@@ -197,12 +256,10 @@ export class PurchasingOptionsModalStore extends ComponentStore<PurchasingOption
}));
readonly setCanAdd = this.updater((state, canAdd: true | string) => {
console.log(isBoolean(canAdd) ? Boolean(canAdd) : false);
return { ...state, canAdd: isBoolean(canAdd) ? Boolean(canAdd) : false, canAddError: isString(canAdd) ? String(canAdd) : undefined };
});
readonly setAvailabilities = this.updater((state, availabilities: { [key: string]: AvailabilityDTO }) => {
console.log(availabilities);
return {
...state,
availabilities: {
@@ -256,7 +313,7 @@ export class PurchasingOptionsModalStore extends ComponentStore<PurchasingOption
loadAvailability = this.effect(($) =>
$.pipe(
debounceTime(250),
delay(10),
withLatestFrom(this.selectItem, this.selectQuantity, this.selectOption, this.selectBranch),
switchMap(([_, item, quantity, option, branch]) => {
let availability$: Observable<AvailabilityDTO> = NEVER;
@@ -307,11 +364,10 @@ export class PurchasingOptionsModalStore extends ComponentStore<PurchasingOption
checkCanAdd = this.effect(($) =>
$.pipe(
debounceTime(250),
delay(10),
withLatestFrom(this.selectOlaAvailability, this.selectProcessId, this.selectAvailabilityIsValid),
filter(([_, ava, proceessId, isValid]) => isValid),
switchMap(([_, availability, processId]) => {
console.log({ _, availability, processId });
this.patchState({ checkingCanAdd: true });
return this.checkoutService
.canAddItem({
processId,
@@ -321,7 +377,8 @@ export class PurchasingOptionsModalStore extends ComponentStore<PurchasingOption
tapResponse(
(canAdd) => this.setCanAdd(canAdd),
(error: Error) => this.setCanAdd(error?.message)
)
),
tap((_) => this.patchState({ checkingCanAdd: false }))
);
})
)

1
apps/page/checkout/src/lib/shared/quantity-control/quantity-control.component.ts
View File

@@ -19,6 +19,7 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
styleUrls: ['quantity-control.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => QuantityControlComponent), multi: true }],
exportAs: 'quantityControl',
})
export class QuantityControlComponent implements ControlValueAccessor {
@ViewChild('quantity', { read: ElementRef, static: false })

22
apps/page/customer/src/lib/pipes/address.pipe.ts
View File

@@ -30,18 +30,16 @@ export class AddressPipe implements PipeTransform {
async getResult() {
let result = undefined;
if (!!this.data?.address?.street && !!this.data?.address?.city && !!this.data?.address?.zipCode && !!this.data?.address?.country) {
let parts = [
this.data?.organisation?.name || '',
this.data?.organisation?.department || '',
[this.data?.lastName, this.data?.firstName].filter((f) => !!f).join(', '),
`${this.data?.address?.street || ''} ${this.data?.address?.streetNumber || ''}`,
`${this.data?.address?.zipCode || ''} ${this.data?.address?.city || ''}`,
]
.filter((value) => value != '')
.filter((value) => value.trim());
result = parts.join(' | ');
}
let parts = [
this.data?.organisation?.name || '',
this.data?.organisation?.department || '',
[this.data?.lastName, this.data?.firstName].filter((f) => !!f).join(', '),
`${this.data?.address?.street || ''} ${this.data?.address?.streetNumber || ''}`,
`${this.data?.address?.zipCode || ''} ${this.data?.address?.city || ''}`,
]
.filter((value) => value != '')
.filter((value) => value.trim());
result = parts.join(' | ');
if (result !== this.result) {
this.result = result;

2
apps/sales/src/app/core/store/selectors/shared.selectors.ts
View File

@@ -448,8 +448,6 @@ export class SharedSelectors {
let targetBranchName = '';
let targetBranchAddress = '';
console.log(currentProcess.finishedOrder);
if (orders && orders.displayOrder) {
orders.displayOrder.forEach((order: DisplayOrderDTO) => {
orderIds.push(order.orderNumber);

3
apps/sales/src/app/core/store/state/customer.state.ts
View File

@@ -365,7 +365,6 @@ export class CustomerState {
if (!state) {
return;
}
console.log({ customerId, invoiceAddress });
const currentCustomers = state.customers;
const address = { ...invoiceAddress, synced: true };
return this.customerService.addInvoiceAddress(customerId, address).pipe(
@@ -596,7 +595,7 @@ export class CustomerState {
company_name: address.organisation?.name,
company_department: address.organisation?.department,
};
console.log(customer.delivery_addres);
customers[action.payload.customerId] = customer;
ctx.patchState({

1
apps/sales/src/app/modules/cart/pages/cart-confirmation/cart-confirmation.component.ts
View File

@@ -85,7 +85,6 @@ export class CartConfirmationComponent implements OnInit, OnDestroy {
this.cartData$
.pipe(
takeUntil(this.destroy$),
tap((processCart) => console.log({ processCart })),
filter((data) => isArrayOfMinLengthDefined(data, 'cart', 0)),
distinctUntilChanged((prev, curr) => prev && curr && JSON.stringify(prev) === JSON.stringify(curr))
)

2
apps/sales/src/app/modules/cart/pages/cart-review/cart-review.component.ts
View File

@@ -377,7 +377,7 @@ export class CartReviewComponent implements OnInit, OnDestroy {
customerFeatures: undefined,
})
.toPromise();
console.log(response);
// No customer redirect to search
let newBread: Breadcrumb;
newBread = {

3
apps/sales/src/app/modules/remission/pages/remission-finish/remission-finish.component.ts
View File

@@ -331,8 +331,7 @@ export class RemissionFinishComponent implements OnInit, OnDestroy {
.startRemission({ remissionProcessId: this.remissionProcess.id })
.pipe(
filter((data) => !isNullOrUndefined(data)),
take(1),
tap((process) => console.log('[Remission Finished] Start Remission II', process))
take(1)
)
.subscribe((remissionProcess) => {
this.store.dispatch(new SetRemissionStarted(true));

10
apps/sales/src/assets/icons.svg
View File

@@ -168,13 +168,17 @@
<g id="refresh" transform="matrix(1.31148,0,0,1.31148,1.64663,1.31148)">
<path d="M5.575,2.774C6.226,2.929 6.706,3.513 6.706,4.2C6.706,5.003 6.05,5.666 5.23,5.666L1.42,5.666C0.601,5.666 -0.056,5.003 -0.056,4.2L-0.056,0.466C-0.056,-0.337 0.601,-1 1.42,-1C2.242,-1 2.897,-0.336 2.897,0.466L2.897,0.883C4.859,-0.34 7.134,-1 9.516,-1C12.832,-1 15.948,0.266 18.294,2.562L18.298,2.566C20.651,4.872 21.944,7.939 21.944,11.2C21.944,14.461 20.65,17.527 18.297,19.834C15.951,22.133 12.833,23.4 9.516,23.4C6.198,23.4 3.08,22.133 0.734,19.833C0.146,19.257 0.146,18.321 0.734,17.745C1.306,17.184 2.235,17.184 2.807,17.745C4.599,19.501 6.982,20.467 9.516,20.467C12.049,20.467 14.432,19.501 16.223,17.746C18.008,15.997 18.992,13.673 18.992,11.2C18.992,8.727 18.008,6.403 16.224,4.654C14.432,2.898 12.049,1.934 9.516,1.934C8.132,1.934 6.795,2.224 5.575,2.774Z"/>
</g>
<g id="trash" transform="matrix(1.03226,0,0,1.03226,-0.967742,-1.03226)">
<path d="M10.25,4L10.25,2.25C10.25,1.56 10.81,1 11.5,1L20.25,1C20.94,1 21.5,1.56 21.5,2.25L21.5,4L29.5,4C29.776,4 30,4.224 30,4.5L30,5.5C30,5.776 29.776,6 29.5,6L25.5,6L25.5,30.612C25.5,31.378 25.052,32 24.5,32L6.5,32C5.948,32 5.5,31.378 5.5,30.612L5.5,6L3.5,6C3.224,6 3,5.776 3,5.5L3,4.5C3,4.224 3.224,4 3.5,4L10.25,4ZM24.23,6L6.941,6L6.941,28.8C6.941,29.462 7.328,30 7.805,30L23.365,30C23.842,30 24.23,29.462 24.23,28.8L24.23,6ZM13.75,8.875C13.75,8.392 13.358,8 12.875,8L11.125,8C10.642,8 10.25,8.392 10.25,8.875L10.25,27.125C10.25,27.608 10.642,28 11.125,28L12.875,28C13.358,28 13.75,27.608 13.75,27.125L13.75,8.875ZM21.25,8.875C21.25,8.392 20.858,8 20.375,8L18.625,8C18.142,8 17.75,8.392 17.75,8.875L17.75,27.125C17.75,27.608 18.142,28 18.625,28L20.375,28C20.858,28 21.25,27.608 21.25,27.125L21.25,8.875ZM19.5,4L19.5,3.5C19.5,2.948 19.052,2.5 18.5,2.5L13.5,2.5C12.948,2.5 12.5,2.948 12.5,3.5L12.5,4L19.5,4Z"/>
</g>
<g id="shopping_bag" transform="matrix(0.889043,0,0,0.889043,2.66457,-0.716655)">
<path d="M6.726,9.965L6.726,9.136C6.726,4.485 10.464,0.75 15.035,0.75C19.606,0.75 23.343,4.485 23.343,9.136L23.343,9.965L27.913,9.965C28.505,9.973 29.08,10.357 29.219,10.951C29.249,11.075 29.255,11.202 29.245,11.329L29.243,11.347L29.243,33.581C29.243,35.337 27.821,36.8 26.024,36.8C26.024,36.8 3.969,36.8 3.969,36.8C2.213,36.8 0.75,35.379 0.75,33.581L0.75,11.372C0.75,10.575 1.36,9.965 2.157,9.965L6.726,9.965ZM6.726,12.74L3.563,12.74L3.563,33.542C3.563,33.789 3.761,33.986 4.007,33.986L26.062,33.986C26.309,33.986 26.506,33.789 26.506,33.542L26.506,12.74L23.343,12.74L23.343,16.539C23.343,17.336 22.734,17.945 21.937,17.945C21.139,17.945 20.53,17.336 20.53,16.539L20.53,12.74L9.54,12.74L9.54,16.539C9.54,17.336 8.93,17.945 8.133,17.945C7.336,17.945 6.726,17.336 6.726,16.539L6.726,12.74ZM20.53,9.927L20.53,9.097C20.53,6.035 18.06,3.525 15.035,3.525C12.01,3.525 9.54,6.035 9.54,9.097L9.54,9.927L20.53,9.927Z" style="fill-rule:nonzero;"/>
</g>
<g id="truck" transform="matrix(1.25986,0,0,1.25986,-1.0082,5.29122)">
<path d="M2.64,0.808L2.641,0.8L16.869,0.8C17.97,0.8 18.874,1.689 18.874,2.767L18.874,4.199L22.352,4.201C22.598,4.202 22.829,4.318 22.973,4.514L26,8.624C26.061,8.69 26.109,8.767 26.142,8.851L26.151,8.865L26.156,8.889C26.159,8.898 26.162,8.907 26.164,8.915C26.196,9.015 26.207,9.12 26.196,9.223L26.196,12.732C26.196,13.634 25.438,14.384 24.512,14.384L24.43,14.384C24.059,15.436 23.035,16.2 21.838,16.2C20.641,16.2 19.617,15.436 19.246,14.384L9.606,14.384C9.235,15.437 8.211,16.2 7.013,16.2C5.815,16.2 4.792,15.436 4.421,14.384L2.805,14.384C1.704,14.384 0.8,13.494 0.8,12.417L0.8,2.768C0.8,1.745 1.615,0.891 2.64,0.808ZM7.075,12.337L7.013,12.337C6.344,12.337 5.808,12.856 5.808,13.515C5.808,13.515 5.808,13.519 5.808,13.518C5.811,14.171 6.344,14.688 7.013,14.688C7.675,14.688 8.204,14.181 8.218,13.543L8.218,13.513C8.218,12.875 7.715,12.367 7.075,12.337ZM21.838,12.335C22.508,12.335 23.043,12.855 23.043,13.513C23.043,14.168 22.507,14.688 21.838,14.688C21.169,14.688 20.633,14.168 20.633,13.513C20.633,12.855 21.169,12.335 21.838,12.335ZM17.338,12.872L17.338,2.768C17.338,2.513 17.129,2.313 16.869,2.313L2.805,2.313C2.545,2.313 2.336,2.513 2.336,2.768C2.336,2.768 2.336,12.417 2.336,12.417C2.336,12.671 2.545,12.872 2.805,12.872L4.352,12.872C4.647,11.701 5.731,10.824 7.013,10.824C8.295,10.824 9.38,11.701 9.675,12.872L17.338,12.872ZM22.098,5.903L21.959,5.714L18.874,5.712L18.874,12.872L19.177,12.872C19.472,11.701 20.556,10.823 21.838,10.823C23.12,10.823 24.205,11.701 24.5,12.872L24.512,12.872C24.594,12.872 24.659,12.81 24.659,12.732L24.659,9.38L24.261,8.839C24.382,9.057 24.386,9.323 24.267,9.547C24.136,9.797 23.873,9.955 23.586,9.955C23.586,9.955 19.68,9.955 19.68,9.955C19.255,9.955 18.912,9.616 18.912,9.199C18.912,9.199 18.912,6.493 18.912,6.493C18.912,6.076 19.255,5.737 19.68,5.737L21.619,5.737C21.795,5.737 21.964,5.797 22.098,5.903ZM7.689,7.191C7.412,7.187 7.156,7.33 7.016,7.564C6.876,7.8 6.876,8.093 7.016,8.329C7.156,8.563 7.412,8.706 7.689,8.702C7.686,8.702 15.806,8.702 15.806,8.702C16.08,8.706 16.336,8.563 16.475,8.329C16.616,8.093 16.616,7.8 16.475,7.564C16.336,7.33 16.08,7.187 15.803,7.191C15.806,7.191 7.686,7.191 7.686,7.191L7.689,7.191ZM20.448,7.249L20.448,8.443L22.092,8.443L21.224,7.249L20.448,7.249ZM10.237,4.696C9.961,4.693 9.704,4.836 9.565,5.07C9.424,5.306 9.424,5.598 9.565,5.834C9.704,6.068 9.961,6.211 10.237,6.208C10.235,6.208 15.806,6.208 15.806,6.208C16.08,6.211 16.336,6.068 16.475,5.834C16.616,5.598 16.616,5.306 16.475,5.07C16.336,4.836 16.08,4.693 15.803,4.696C15.806,4.696 10.235,4.696 10.235,4.696L10.237,4.696Z"/>
</g>
<g id="cart" transform="matrix(2,0,0,2,-17,-16.1667)">
<path d="M11.242,10.397L8.5,10.397L8.5,8.5L12.077,8.5C12.55,8.5 12.953,8.841 13.022,9.323L13.126,10.295L23.551,10.295C24.093,10.295 24.5,10.701 24.5,11.244C24.5,11.244 24.5,15.667 24.5,15.667C24.5,16.157 24.15,16.507 23.73,16.577L23.75,16.573L13.645,18.686L13.489,19.077L22.288,19.077L22.288,19.142C23.5,19.17 24.5,20.187 24.5,21.404C24.5,22.638 23.471,23.667 22.237,23.667C21.003,23.667 19.974,22.638 19.974,21.404C19.974,21.269 19.987,21.136 20.01,21.006L13.887,21.006C13.911,21.136 13.923,21.269 13.923,21.404C13.923,22.638 12.895,23.667 11.66,23.667C10.426,23.667 9.397,22.638 9.397,21.404C9.397,20.241 10.311,19.26 11.449,19.151L12.016,17.713L11.242,10.397ZM22.237,21.006C22.45,21.006 22.635,21.177 22.635,21.404C22.635,21.631 22.464,21.801 22.237,21.801C22.01,21.801 21.84,21.631 21.84,21.404C21.84,21.177 22.024,21.006 22.237,21.006ZM11.66,21.006C11.873,21.006 12.058,21.177 12.058,21.404C12.058,21.631 11.887,21.801 11.66,21.801C11.433,21.801 11.263,21.631 11.263,21.404C11.263,21.177 11.447,21.006 11.66,21.006ZM12.423,20.233L12.329,20.077L12.159,20.077L12.152,20.096C12.247,20.132 12.338,20.178 12.423,20.233ZM13.33,12.192L13.816,16.725L22.603,14.907L22.603,12.192L13.33,12.192Z"/>
</g>
<path id="circle_cart" d="M16,0C24.831,0 32,7.169 32,16C32,24.831 24.831,32 16,32C7.169,32 0,24.831 0,16C0,7.169 7.169,0 16,0ZM24.336,16.565C24.812,16.478 25.206,16.078 25.206,15.52C25.206,15.52 25.206,10.43 25.206,10.43C25.206,9.807 24.739,9.339 24.115,9.339L12.117,9.339L11.997,8.22C11.918,7.665 11.454,7.273 10.91,7.273L6.794,7.273L6.794,9.457L9.949,9.457L10.839,17.875L10.187,19.531C8.877,19.656 7.826,20.784 7.826,22.123C7.826,23.543 9.01,24.727 10.43,24.727C11.851,24.727 13.034,23.543 13.034,22.123C13.034,21.967 13.02,21.814 12.993,21.666L20.04,21.666C20.012,21.814 19.998,21.967 19.998,22.123C19.998,23.543 21.182,24.727 22.602,24.727C24.023,24.727 25.206,23.543 25.206,22.123C25.206,20.722 24.055,19.552 22.661,19.52L22.661,19.445L12.534,19.445L12.715,18.995L24.336,16.565ZM22.602,21.666C22.847,21.666 23.06,21.862 23.06,22.123C23.06,22.384 22.864,22.58 22.602,22.58C22.341,22.58 22.145,22.384 22.145,22.123C22.145,21.862 22.357,21.666 22.602,21.666ZM10.43,21.666C10.675,21.666 10.888,21.862 10.888,22.123C10.888,22.384 10.692,22.58 10.43,22.58C10.169,22.58 9.973,22.384 9.973,22.123C9.973,21.862 10.185,21.666 10.43,21.666ZM11.309,20.775L11.201,20.596L11.004,20.596L10.996,20.617C11.106,20.659 11.211,20.712 11.309,20.775ZM12.352,11.522L12.911,16.738L23.023,14.646L23.023,11.522L12.352,11.522ZM24.336,16.565L24.32,16.568L24.343,16.563L24.336,16.565Z"/>
<g id="trash" transform="matrix(1.64696,0,0,1.64696,-1.89464,-1.23522)">
<path d="M18.967,3.729L19.006,3.48C19.545,3.514 19.979,3.954 19.981,4.494C19.981,5.069 19.54,5.51 18.965,5.51L17.965,5.51L17.965,17.889C17.965,19.149 16.933,20.18 15.674,20.18C15.674,20.18 6.057,20.18 6.057,20.18C4.796,20.18 3.766,19.148 3.766,17.889L3.766,5.511L2.766,5.511C2.19,5.511 1.75,5.07 1.75,4.495L1.75,4.48C1.784,3.947 2.217,3.513 2.75,3.48L6.521,3.48L6.521,3.041C6.521,1.78 7.552,0.75 8.812,0.75L12.944,0.75C14.205,0.75 15.235,1.782 15.235,3.041L15.235,3.479L18.99,3.479L18.96,3.729L18.967,3.729ZM15.96,5.51L5.822,5.51L5.822,17.888C5.822,18.031 5.939,18.148 6.082,18.148C6.082,18.148 15.674,18.148 15.674,18.148C15.817,18.148 15.934,18.031 15.934,17.888L15.96,5.51ZM7.567,15.177L7.567,8.27L7.567,8.254C7.601,7.711 8.047,7.277 8.59,7.306C9.161,7.31 9.598,7.749 9.598,8.322L9.598,15.183C9.598,15.675 9.275,16.068 8.822,16.172L8.83,16.218L8.516,16.198C7.973,16.164 7.538,15.72 7.567,15.177ZM13.167,16.198C12.595,16.195 12.158,15.756 12.16,15.184L12.16,8.322C12.16,7.746 12.6,7.306 13.175,7.306L13.241,7.306C13.784,7.34 14.218,7.786 14.19,8.327L14.19,15.235L14.189,15.25C14.156,15.794 13.709,16.228 13.167,16.198ZM13.204,3.479L13.204,3.04C13.204,2.897 13.087,2.78 12.944,2.78L8.812,2.78C8.669,2.78 8.552,2.897 8.552,3.04L8.552,3.479L13.204,3.479Z" style="fill-rule:nonzero;"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 89 KiB

After

Width:  |  Height:  |  Size: 92 KiB

BIN
assets/icons.afdesign
View File

Binary file not shown.

10
assets/icons.svg
View File

@@ -168,13 +168,17 @@
<g id="refresh" transform="matrix(1.31148,0,0,1.31148,1.64663,1.31148)">
<path d="M5.575,2.774C6.226,2.929 6.706,3.513 6.706,4.2C6.706,5.003 6.05,5.666 5.23,5.666L1.42,5.666C0.601,5.666 -0.056,5.003 -0.056,4.2L-0.056,0.466C-0.056,-0.337 0.601,-1 1.42,-1C2.242,-1 2.897,-0.336 2.897,0.466L2.897,0.883C4.859,-0.34 7.134,-1 9.516,-1C12.832,-1 15.948,0.266 18.294,2.562L18.298,2.566C20.651,4.872 21.944,7.939 21.944,11.2C21.944,14.461 20.65,17.527 18.297,19.834C15.951,22.133 12.833,23.4 9.516,23.4C6.198,23.4 3.08,22.133 0.734,19.833C0.146,19.257 0.146,18.321 0.734,17.745C1.306,17.184 2.235,17.184 2.807,17.745C4.599,19.501 6.982,20.467 9.516,20.467C12.049,20.467 14.432,19.501 16.223,17.746C18.008,15.997 18.992,13.673 18.992,11.2C18.992,8.727 18.008,6.403 16.224,4.654C14.432,2.898 12.049,1.934 9.516,1.934C8.132,1.934 6.795,2.224 5.575,2.774Z"/>
</g>
<g id="trash" transform="matrix(1.03226,0,0,1.03226,-0.967742,-1.03226)">
<path d="M10.25,4L10.25,2.25C10.25,1.56 10.81,1 11.5,1L20.25,1C20.94,1 21.5,1.56 21.5,2.25L21.5,4L29.5,4C29.776,4 30,4.224 30,4.5L30,5.5C30,5.776 29.776,6 29.5,6L25.5,6L25.5,30.612C25.5,31.378 25.052,32 24.5,32L6.5,32C5.948,32 5.5,31.378 5.5,30.612L5.5,6L3.5,6C3.224,6 3,5.776 3,5.5L3,4.5C3,4.224 3.224,4 3.5,4L10.25,4ZM24.23,6L6.941,6L6.941,28.8C6.941,29.462 7.328,30 7.805,30L23.365,30C23.842,30 24.23,29.462 24.23,28.8L24.23,6ZM13.75,8.875C13.75,8.392 13.358,8 12.875,8L11.125,8C10.642,8 10.25,8.392 10.25,8.875L10.25,27.125C10.25,27.608 10.642,28 11.125,28L12.875,28C13.358,28 13.75,27.608 13.75,27.125L13.75,8.875ZM21.25,8.875C21.25,8.392 20.858,8 20.375,8L18.625,8C18.142,8 17.75,8.392 17.75,8.875L17.75,27.125C17.75,27.608 18.142,28 18.625,28L20.375,28C20.858,28 21.25,27.608 21.25,27.125L21.25,8.875ZM19.5,4L19.5,3.5C19.5,2.948 19.052,2.5 18.5,2.5L13.5,2.5C12.948,2.5 12.5,2.948 12.5,3.5L12.5,4L19.5,4Z"/>
</g>
<g id="shopping_bag" transform="matrix(0.889043,0,0,0.889043,2.66457,-0.716655)">
<path d="M6.726,9.965L6.726,9.136C6.726,4.485 10.464,0.75 15.035,0.75C19.606,0.75 23.343,4.485 23.343,9.136L23.343,9.965L27.913,9.965C28.505,9.973 29.08,10.357 29.219,10.951C29.249,11.075 29.255,11.202 29.245,11.329L29.243,11.347L29.243,33.581C29.243,35.337 27.821,36.8 26.024,36.8C26.024,36.8 3.969,36.8 3.969,36.8C2.213,36.8 0.75,35.379 0.75,33.581L0.75,11.372C0.75,10.575 1.36,9.965 2.157,9.965L6.726,9.965ZM6.726,12.74L3.563,12.74L3.563,33.542C3.563,33.789 3.761,33.986 4.007,33.986L26.062,33.986C26.309,33.986 26.506,33.789 26.506,33.542L26.506,12.74L23.343,12.74L23.343,16.539C23.343,17.336 22.734,17.945 21.937,17.945C21.139,17.945 20.53,17.336 20.53,16.539L20.53,12.74L9.54,12.74L9.54,16.539C9.54,17.336 8.93,17.945 8.133,17.945C7.336,17.945 6.726,17.336 6.726,16.539L6.726,12.74ZM20.53,9.927L20.53,9.097C20.53,6.035 18.06,3.525 15.035,3.525C12.01,3.525 9.54,6.035 9.54,9.097L9.54,9.927L20.53,9.927Z" style="fill-rule:nonzero;"/>
</g>
<g id="truck" transform="matrix(1.25986,0,0,1.25986,-1.0082,5.29122)">
<path d="M2.64,0.808L2.641,0.8L16.869,0.8C17.97,0.8 18.874,1.689 18.874,2.767L18.874,4.199L22.352,4.201C22.598,4.202 22.829,4.318 22.973,4.514L26,8.624C26.061,8.69 26.109,8.767 26.142,8.851L26.151,8.865L26.156,8.889C26.159,8.898 26.162,8.907 26.164,8.915C26.196,9.015 26.207,9.12 26.196,9.223L26.196,12.732C26.196,13.634 25.438,14.384 24.512,14.384L24.43,14.384C24.059,15.436 23.035,16.2 21.838,16.2C20.641,16.2 19.617,15.436 19.246,14.384L9.606,14.384C9.235,15.437 8.211,16.2 7.013,16.2C5.815,16.2 4.792,15.436 4.421,14.384L2.805,14.384C1.704,14.384 0.8,13.494 0.8,12.417L0.8,2.768C0.8,1.745 1.615,0.891 2.64,0.808ZM7.075,12.337L7.013,12.337C6.344,12.337 5.808,12.856 5.808,13.515C5.808,13.515 5.808,13.519 5.808,13.518C5.811,14.171 6.344,14.688 7.013,14.688C7.675,14.688 8.204,14.181 8.218,13.543L8.218,13.513C8.218,12.875 7.715,12.367 7.075,12.337ZM21.838,12.335C22.508,12.335 23.043,12.855 23.043,13.513C23.043,14.168 22.507,14.688 21.838,14.688C21.169,14.688 20.633,14.168 20.633,13.513C20.633,12.855 21.169,12.335 21.838,12.335ZM17.338,12.872L17.338,2.768C17.338,2.513 17.129,2.313 16.869,2.313L2.805,2.313C2.545,2.313 2.336,2.513 2.336,2.768C2.336,2.768 2.336,12.417 2.336,12.417C2.336,12.671 2.545,12.872 2.805,12.872L4.352,12.872C4.647,11.701 5.731,10.824 7.013,10.824C8.295,10.824 9.38,11.701 9.675,12.872L17.338,12.872ZM22.098,5.903L21.959,5.714L18.874,5.712L18.874,12.872L19.177,12.872C19.472,11.701 20.556,10.823 21.838,10.823C23.12,10.823 24.205,11.701 24.5,12.872L24.512,12.872C24.594,12.872 24.659,12.81 24.659,12.732L24.659,9.38L24.261,8.839C24.382,9.057 24.386,9.323 24.267,9.547C24.136,9.797 23.873,9.955 23.586,9.955C23.586,9.955 19.68,9.955 19.68,9.955C19.255,9.955 18.912,9.616 18.912,9.199C18.912,9.199 18.912,6.493 18.912,6.493C18.912,6.076 19.255,5.737 19.68,5.737L21.619,5.737C21.795,5.737 21.964,5.797 22.098,5.903ZM7.689,7.191C7.412,7.187 7.156,7.33 7.016,7.564C6.876,7.8 6.876,8.093 7.016,8.329C7.156,8.563 7.412,8.706 7.689,8.702C7.686,8.702 15.806,8.702 15.806,8.702C16.08,8.706 16.336,8.563 16.475,8.329C16.616,8.093 16.616,7.8 16.475,7.564C16.336,7.33 16.08,7.187 15.803,7.191C15.806,7.191 7.686,7.191 7.686,7.191L7.689,7.191ZM20.448,7.249L20.448,8.443L22.092,8.443L21.224,7.249L20.448,7.249ZM10.237,4.696C9.961,4.693 9.704,4.836 9.565,5.07C9.424,5.306 9.424,5.598 9.565,5.834C9.704,6.068 9.961,6.211 10.237,6.208C10.235,6.208 15.806,6.208 15.806,6.208C16.08,6.211 16.336,6.068 16.475,5.834C16.616,5.598 16.616,5.306 16.475,5.07C16.336,4.836 16.08,4.693 15.803,4.696C15.806,4.696 10.235,4.696 10.235,4.696L10.237,4.696Z"/>
</g>
<g id="cart" transform="matrix(2,0,0,2,-17,-16.1667)">
<path d="M11.242,10.397L8.5,10.397L8.5,8.5L12.077,8.5C12.55,8.5 12.953,8.841 13.022,9.323L13.126,10.295L23.551,10.295C24.093,10.295 24.5,10.701 24.5,11.244C24.5,11.244 24.5,15.667 24.5,15.667C24.5,16.157 24.15,16.507 23.73,16.577L23.75,16.573L13.645,18.686L13.489,19.077L22.288,19.077L22.288,19.142C23.5,19.17 24.5,20.187 24.5,21.404C24.5,22.638 23.471,23.667 22.237,23.667C21.003,23.667 19.974,22.638 19.974,21.404C19.974,21.269 19.987,21.136 20.01,21.006L13.887,21.006C13.911,21.136 13.923,21.269 13.923,21.404C13.923,22.638 12.895,23.667 11.66,23.667C10.426,23.667 9.397,22.638 9.397,21.404C9.397,20.241 10.311,19.26 11.449,19.151L12.016,17.713L11.242,10.397ZM22.237,21.006C22.45,21.006 22.635,21.177 22.635,21.404C22.635,21.631 22.464,21.801 22.237,21.801C22.01,21.801 21.84,21.631 21.84,21.404C21.84,21.177 22.024,21.006 22.237,21.006ZM11.66,21.006C11.873,21.006 12.058,21.177 12.058,21.404C12.058,21.631 11.887,21.801 11.66,21.801C11.433,21.801 11.263,21.631 11.263,21.404C11.263,21.177 11.447,21.006 11.66,21.006ZM12.423,20.233L12.329,20.077L12.159,20.077L12.152,20.096C12.247,20.132 12.338,20.178 12.423,20.233ZM13.33,12.192L13.816,16.725L22.603,14.907L22.603,12.192L13.33,12.192Z"/>
</g>
<path id="circle_cart" d="M16,0C24.831,0 32,7.169 32,16C32,24.831 24.831,32 16,32C7.169,32 0,24.831 0,16C0,7.169 7.169,0 16,0ZM24.336,16.565C24.812,16.478 25.206,16.078 25.206,15.52C25.206,15.52 25.206,10.43 25.206,10.43C25.206,9.807 24.739,9.339 24.115,9.339L12.117,9.339L11.997,8.22C11.918,7.665 11.454,7.273 10.91,7.273L6.794,7.273L6.794,9.457L9.949,9.457L10.839,17.875L10.187,19.531C8.877,19.656 7.826,20.784 7.826,22.123C7.826,23.543 9.01,24.727 10.43,24.727C11.851,24.727 13.034,23.543 13.034,22.123C13.034,21.967 13.02,21.814 12.993,21.666L20.04,21.666C20.012,21.814 19.998,21.967 19.998,22.123C19.998,23.543 21.182,24.727 22.602,24.727C24.023,24.727 25.206,23.543 25.206,22.123C25.206,20.722 24.055,19.552 22.661,19.52L22.661,19.445L12.534,19.445L12.715,18.995L24.336,16.565ZM22.602,21.666C22.847,21.666 23.06,21.862 23.06,22.123C23.06,22.384 22.864,22.58 22.602,22.58C22.341,22.58 22.145,22.384 22.145,22.123C22.145,21.862 22.357,21.666 22.602,21.666ZM10.43,21.666C10.675,21.666 10.888,21.862 10.888,22.123C10.888,22.384 10.692,22.58 10.43,22.58C10.169,22.58 9.973,22.384 9.973,22.123C9.973,21.862 10.185,21.666 10.43,21.666ZM11.309,20.775L11.201,20.596L11.004,20.596L10.996,20.617C11.106,20.659 11.211,20.712 11.309,20.775ZM12.352,11.522L12.911,16.738L23.023,14.646L23.023,11.522L12.352,11.522ZM24.336,16.565L24.32,16.568L24.343,16.563L24.336,16.565Z"/>
<g id="trash" transform="matrix(1.64696,0,0,1.64696,-1.89464,-1.23522)">
<path d="M18.967,3.729L19.006,3.48C19.545,3.514 19.979,3.954 19.981,4.494C19.981,5.069 19.54,5.51 18.965,5.51L17.965,5.51L17.965,17.889C17.965,19.149 16.933,20.18 15.674,20.18C15.674,20.18 6.057,20.18 6.057,20.18C4.796,20.18 3.766,19.148 3.766,17.889L3.766,5.511L2.766,5.511C2.19,5.511 1.75,5.07 1.75,4.495L1.75,4.48C1.784,3.947 2.217,3.513 2.75,3.48L6.521,3.48L6.521,3.041C6.521,1.78 7.552,0.75 8.812,0.75L12.944,0.75C14.205,0.75 15.235,1.782 15.235,3.041L15.235,3.479L18.99,3.479L18.96,3.729L18.967,3.729ZM15.96,5.51L5.822,5.51L5.822,17.888C5.822,18.031 5.939,18.148 6.082,18.148C6.082,18.148 15.674,18.148 15.674,18.148C15.817,18.148 15.934,18.031 15.934,17.888L15.96,5.51ZM7.567,15.177L7.567,8.27L7.567,8.254C7.601,7.711 8.047,7.277 8.59,7.306C9.161,7.31 9.598,7.749 9.598,8.322L9.598,15.183C9.598,15.675 9.275,16.068 8.822,16.172L8.83,16.218L8.516,16.198C7.973,16.164 7.538,15.72 7.567,15.177ZM13.167,16.198C12.595,16.195 12.158,15.756 12.16,15.184L12.16,8.322C12.16,7.746 12.6,7.306 13.175,7.306L13.241,7.306C13.784,7.34 14.218,7.786 14.19,8.327L14.19,15.235L14.189,15.25C14.156,15.794 13.709,16.228 13.167,16.198ZM13.204,3.479L13.204,3.04C13.204,2.897 13.087,2.78 12.944,2.78L8.812,2.78C8.669,2.78 8.552,2.897 8.552,3.04L8.552,3.479L13.204,3.479Z" style="fill-rule:nonzero;"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 89 KiB

After

Width:  |  Height:  |  Size: 92 KiB