Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement Grayscale Mode in UpWindowAngular #18

Closed
lucasferreiralimax opened this issue Oct 17, 2024 · 0 comments · Fixed by #19
Closed

Implement Grayscale Mode in UpWindowAngular #18

lucasferreiralimax opened this issue Oct 17, 2024 · 0 comments · Fixed by #19
Assignees
Labels
enhancement New feature or request hacktoberfest

Comments

@lucasferreiralimax
Copy link
Member

Implement a feature in the UpWindowAngular component to allow the window to be displayed in grayscale mode.

  1. Input Property:

    • Add an @Input() property to the UpWindowAngular component:
      @Input() grayscale: boolean = false;
  2. CSS Styling:

    • Add a CSS class to apply the grayscale effect when the grayscale property is true:
      &.grayscale {
        backdrop-filter: grayscale(1);
      }
  3. Update Component Logic:

    • Modify the component logic to handle the grayscale state when opening the window. This should include:
      • A new state variable in the parent component to control the grayscale mode.
      • Updating the openWindowExample method to set this new state variable.

Acceptance Criteria

  • The grayscale property can be passed as an input to the UpWindowAngular component.
  • The window applies the grayscale effect when grayscale is set to true.
  • The feature works seamlessly with existing functionalities (e.g., blur, fullscreen, restrict).

Additional Notes

  • Ensure the grayscale effect is visually tested across different browsers.
  • Add unit tests to verify the functionality of the grayscale mode.

Screenshot 2024-10-17 052433

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request hacktoberfest
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant