Skip to content

Commit

Permalink
Merge pull request #11 from criar-art/blur-feature
Browse files Browse the repository at this point in the history
Add Blur Effect Option to Modal Background
  • Loading branch information
lucasferreiralimax authored Oct 15, 2024
2 parents 4aa46b7 + 0bcd787 commit c297548
Show file tree
Hide file tree
Showing 6 changed files with 43 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
#modal
class="overlay"
[class.active]="isOpen()"
[class.blur]="blur"
role="dialog"
aria-labelledby="dialog-title"
aria-describedby="dialog-description"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@
display: flex;
opacity: 1;
}

&.blur {
backdrop-filter: blur(6px);
}
}

.up-window {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -167,4 +167,20 @@ describe('UpWindowAngularComponent', () => {
const windowElement = fixture.debugElement.query(By.css('.up-window'));
expect(windowElement.classes['fullscreen']).toBeFalsy();
});

it('should apply blur class when blur input is true', () => {
component.blur = true;
fixture.detectChanges();

const overlayElement = fixture.debugElement.query(By.css('.overlay'));
expect(overlayElement.classes['blur']).toBeTrue();
});

it('should not apply blur class when blur input is false', () => {
component.blur = false;
fixture.detectChanges();

const overlayElement = fixture.debugElement.query(By.css('.overlay'));
expect(overlayElement.classes['blur']).toBeFalsy();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export class UpWindowAngularComponent implements OnInit, OnDestroy {
@Input() animation: string = 'fade';
@Input() restrictMode: boolean = false;
@Input() fullScreen: boolean = false;
@Input() blur: boolean = false;
@Input() confirmText: string = 'Confirm';
@Input() cancelText: string = 'Cancel';
@Input() confirmType: string = 'primary';
Expand Down Expand Up @@ -147,6 +148,7 @@ export class UpWindowAngularComponent implements OnInit, OnDestroy {
[`${this.animation}-out`]: this.closingAnimation,
shake: this.shakeAnimation,
fullscreen: this.fullScreen,
blur: this.blur,
};
}

Expand Down
15 changes: 15 additions & 0 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,21 @@ <h2 class="content-title">Mode</h2>
>
Mode FullScreen content!
</up-window-angular>
<button
class="button-modal-example"
type="button"
(click)="openWindowExample('blur')"
>
<span class="material-symbols-outlined"> deblur </span> Blur
</button>
<up-window-angular
[isOpen]="isWindowOpenBlur"
title="Blur Window"
subtitle="This window mode Blur."
[blur]="true"
>
Mode Blur content!
</up-window-angular>
</div>
</div>
</main>
Expand Down
5 changes: 5 additions & 0 deletions src/app/app.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export class AppComponent {
isWindowOpenScale: WritableSignal<boolean> = signal(false);
isWindowOpenRestrict: WritableSignal<boolean> = signal(false);
isWindowOpenFullScreen: WritableSignal<boolean> = signal(false);
isWindowOpenBlur: WritableSignal<boolean> = signal(false);

openWindowExample(type: string) {
this.isWindowOpenFade.set(false);
Expand All @@ -46,6 +47,7 @@ export class AppComponent {
this.isWindowOpenScale.set(false);
this.isWindowOpenRestrict.set(false);
this.isWindowOpenFullScreen.set(false);
this.isWindowOpenBlur.set(false);

switch (type) {
case 'fade':
Expand All @@ -72,6 +74,9 @@ export class AppComponent {
case 'fullscreen':
this.isWindowOpenFullScreen.set(true);
break;
case 'blur':
this.isWindowOpenBlur.set(true);
break;
}
}

Expand Down

0 comments on commit c297548

Please sign in to comment.