From ce65b1d7a7aeb5d8f9cccf515759c7d59f5a079a Mon Sep 17 00:00:00 2001 From: vladimirpotekhin Date: Wed, 24 Jan 2024 14:50:33 +0300 Subject: [PATCH] chore: perspective --- .../swipe-action/examples/1/index.html | 45 +++++++++++++++++++ .../swipe-action/examples/1/index.less | 2 +- .../swipe-action/examples/2/index.less | 1 + .../swipe-action/swipe-actions.component.ts | 30 ++++--------- .../swipe-action/swipe-actions.style.less | 24 +++++++--- .../swipe-action/swipe-actions.template.html | 4 +- 6 files changed, 76 insertions(+), 30 deletions(-) diff --git a/projects/demo/src/modules/experimental/swipe-action/examples/1/index.html b/projects/demo/src/modules/experimental/swipe-action/examples/1/index.html index 01610649664e..1ab9b530b078 100644 --- a/projects/demo/src/modules/experimental/swipe-action/examples/1/index.html +++ b/projects/demo/src/modules/experimental/swipe-action/examples/1/index.html @@ -60,3 +60,48 @@ tuiSwipeAction > + + + + + + + + + diff --git a/projects/demo/src/modules/experimental/swipe-action/examples/1/index.less b/projects/demo/src/modules/experimental/swipe-action/examples/1/index.less index 7af487e1846e..aaacb995c6c1 100644 --- a/projects/demo/src/modules/experimental/swipe-action/examples/1/index.less +++ b/projects/demo/src/modules/experimental/swipe-action/examples/1/index.less @@ -1,7 +1,7 @@ .surface { margin: 1.5rem 1rem; min-width: 17rem; - padding: 0.75rem 1rem; + padding: 1rem; box-shadow: var(--tui-shadow); &:active { diff --git a/projects/demo/src/modules/experimental/swipe-action/examples/2/index.less b/projects/demo/src/modules/experimental/swipe-action/examples/2/index.less index 7b4ddc8b5f9a..ac4b0429b2a0 100644 --- a/projects/demo/src/modules/experimental/swipe-action/examples/2/index.less +++ b/projects/demo/src/modules/experimental/swipe-action/examples/2/index.less @@ -13,6 +13,7 @@ justify-content: space-between; align-items: center; color: var(--tui-text-01-night); + z-index: 1; &:before { backdrop-filter: blur(1rem); diff --git a/projects/experimental/components/swipe-action/swipe-actions.component.ts b/projects/experimental/components/swipe-action/swipe-actions.component.ts index 1b1a2daa1aea..c35573d6b65c 100644 --- a/projects/experimental/components/swipe-action/swipe-actions.component.ts +++ b/projects/experimental/components/swipe-action/swipe-actions.component.ts @@ -1,6 +1,4 @@ -import {ChangeDetectionStrategy, Component, ElementRef, ViewChild} from '@angular/core'; -import {animationFrameScheduler, Subject} from 'rxjs'; -import {map, throttleTime} from 'rxjs/operators'; +import {ChangeDetectionStrategy, Component} from '@angular/core'; @Component({ selector: 'tui-swipe-actions', @@ -8,29 +6,19 @@ import {map, throttleTime} from 'rxjs/operators'; styleUrls: ['./swipe-actions.style.less'], changeDetection: ChangeDetectionStrategy.OnPush, host: { - '[style.width.px]': 'width', - '[$.style.--t-swiped]': 'swiped$', - '($.style.--t-swiped)': '0', - '(scroll.silent)': 'onScroll($event.target)', + '[style.--t-actions-width]': 'actionsWidth', + '[style.--t-content-width]': 'contentWidth', }, }) export class TuiSwipeActionsComponent { - private readonly swiped$$ = new Subject(); + actionsWidth = 0; + contentWidth = 0; - @ViewChild('actions', {read: ElementRef}) - actions?: ElementRef; - - width = 0; - swiped$ = this.swiped$$.pipe( - throttleTime(0, animationFrameScheduler), - map(el => el.scrollLeft / (this.actions?.nativeElement.offsetWidth || 0) - 1), - ); - - onScroll(element: HTMLElement): void { - this.swiped$$.next(element); + onResizeContent(event: ResizeObserverEntry): void { + this.contentWidth = event.target.clientWidth; } - onResize(event: ResizeObserverEntry): void { - this.width = event.contentRect.width; + onResizeActions(event: ResizeObserverEntry): void { + this.actionsWidth = event.target.clientWidth; } } diff --git a/projects/experimental/components/swipe-action/swipe-actions.style.less b/projects/experimental/components/swipe-action/swipe-actions.style.less index 5bed03cb1149..46c73ee8c27e 100644 --- a/projects/experimental/components/swipe-action/swipe-actions.style.less +++ b/projects/experimental/components/swipe-action/swipe-actions.style.less @@ -2,11 +2,19 @@ :host { .scrollbar-hidden(); - --t-action-gap: 1.5rem; + --t-action-gap: 24; + --t-actions-padding: 0.5rem; + --t-item-size: 44; + display: inline-flex; + width: calc(1px * var(--t-content-width)); align-items: center; overflow: scroll; scroll-snap-type: x mandatory; + perspective: 1px; + perspective-origin: calc( + calc(1px * var(--t-content-width)) + calc(1px * var(--t-item-size) / 2) + var(--t-actions-padding) + ); } .t-content { @@ -16,10 +24,11 @@ .t-actions { display: inline-flex; - gap: var(--t-action-gap); - padding: 0 1rem 0 0.5rem; + gap: calc(1px * var(--t-action-gap)); + padding: 0 1rem 0 var(--t-actions-padding); scroll-snap-align: start; align-items: center; + transform-style: preserve-3d; ::ng-deep & > * { .loop(6); @@ -29,8 +38,11 @@ .loop (@i) when (@i > 1) { .loop(@i - 1); &:nth-child(@{i}) { - transform: ~'translate3d(calc(var(--t-swiped) * ((@{i} - 1) * 100%)), 0, 0)'; - backface-visibility: hidden; - will-change: transform; + --t-distance: ~'calc(var(--t-item-size) + var(--t-action-gap)) * calc(@{i} - 1)'; + --t-factor: calc((var(--t-actions-width) - var(--t-distance)) / var(--t-actions-width)); + --t-scale: calc(1 / var(--t-factor)); + --t-translate: calc(1px * (1 - 1 / var(--t-factor))); + transform: ~'translate3d(calc(calc((-100% - calc(1px * var(--t-action-gap))) * (@{i} - 1)) / var(--t-scale)), 0, var(--t-translate))'; + scale: var(--t-scale); } } diff --git a/projects/experimental/components/swipe-action/swipe-actions.template.html b/projects/experimental/components/swipe-action/swipe-actions.template.html index a5598a50d0e5..fbfc29197afc 100644 --- a/projects/experimental/components/swipe-action/swipe-actions.template.html +++ b/projects/experimental/components/swipe-action/swipe-actions.template.html @@ -1,13 +1,13 @@