-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: Improved animation for roll call and enabled swipe to skipp part…
…icipants (#1253) Co-authored-by: Simon <33730997+TheSlimvReal@users.noreply.github.com> Co-authored-by: Simon <therealslimv@yahoo.de>
- Loading branch information
3 people
authored
May 22, 2022
1 parent
fe46ab4
commit ec324bf
Showing
17 changed files
with
326 additions
and
121 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 8 additions & 0 deletions
8
...roject/attendance/add-day-attendance/roll-call/roll-call-tab/roll-call-tab.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <div [@translateTab]="{ | ||
| value: _position, | ||
| params: {animationDuration: '800ms'} | ||
| }" | ||
| style="width: 100%" | ||
| > | ||
| <ng-content></ng-content> | ||
| </div> |
26 changes: 26 additions & 0 deletions
26
...ect/attendance/add-day-attendance/roll-call/roll-call-tab/roll-call-tab.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { ComponentFixture, TestBed } from "@angular/core/testing"; | ||
|
|
||
| import { RollCallTabComponent } from "./roll-call-tab.component"; | ||
| import { NoopAnimationsModule } from "@angular/platform-browser/animations"; | ||
|
|
||
| describe("RollCallTabComponent", () => { | ||
| let component: RollCallTabComponent; | ||
| let fixture: ComponentFixture<RollCallTabComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| declarations: [RollCallTabComponent], | ||
| imports: [NoopAnimationsModule], | ||
| }).compileComponents(); | ||
| }); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(RollCallTabComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it("should create", () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
82 changes: 82 additions & 0 deletions
82
...-project/attendance/add-day-attendance/roll-call/roll-call-tab/roll-call-tab.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import { Component, Input } from "@angular/core"; | ||
| import { | ||
| animate, | ||
| state, | ||
| style, | ||
| transition, | ||
| trigger, | ||
| } from "@angular/animations"; | ||
|
|
||
| /** | ||
| * These position states are used internally as animation states for the tab body. Setting the | ||
| * position state to left, right, or center will transition the tab body from its current | ||
| * position to its respective state. If there is no current position (void, in the case of a new | ||
| * tab body), then there will be no transition animation to its state. | ||
| * | ||
| * In the case of a new tab body that should immediately be centered with an animating transition, | ||
| * then left-origin-center or right-origin-center can be used, which will use left or right as its | ||
| * pseudo-prior state. | ||
| */ | ||
| type PositionState = "left" | "center" | "right"; | ||
|
|
||
| @Component({ | ||
| selector: "app-roll-call-tab", | ||
| templateUrl: "./roll-call-tab.component.html", | ||
| animations: [ | ||
| trigger("translateTab", [ | ||
| // Transitions to `none` instead of 0, because some browsers might blur the content. | ||
| state("center, void", style({ transform: "none" })), | ||
|
|
||
| // If the tab is either on the left or right, we additionally add a `min-height` of 1px | ||
| // in order to ensure that the element has a height before its state changes. This is | ||
| // necessary because Chrome does seem to skip the transition in RTL mode if the element does | ||
| // not have a static height and is not rendered. See related issue: #9465 | ||
| state( | ||
| "left", | ||
| style({ | ||
| transform: "translate(-110%)", | ||
| minHeight: "1px", | ||
| visibility: "hidden", | ||
| }) | ||
| ), | ||
| state( | ||
| "right", | ||
| style({ | ||
| transform: "translate(110%)", | ||
| minHeight: "1px", | ||
| visibility: "hidden", | ||
| }) | ||
| ), | ||
|
|
||
| transition("void => *", []), | ||
| transition( | ||
| "* => left, * => right, left => center, right => center", | ||
| animate("{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)") | ||
| ), | ||
| ]), | ||
| ], | ||
| }) | ||
| export class RollCallTabComponent { | ||
| /** Current position of the tab-body in the tab-group. Zero means that the tab is visible. */ | ||
| private _positionIndex: number; | ||
|
|
||
| /** Tab body position state. Used by the animation trigger for the current state. */ | ||
| _position: PositionState; | ||
|
|
||
| @Input() | ||
| set position(position: number) { | ||
| this._positionIndex = position; | ||
| this._computePositionAnimationState(); | ||
| } | ||
|
|
||
| /** Computes the position state that will be used for the tab-body animation trigger. */ | ||
| private _computePositionAnimationState() { | ||
| if (this._positionIndex < 0) { | ||
| this._position = "left"; | ||
| } else if (this._positionIndex > 0) { | ||
| this._position = "right"; | ||
| } else { | ||
| this._position = "center"; | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.