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

Notification UI/UX update #5970

Merged

Conversation

Waseem826
Copy link
Contributor

@Waseem826 Waseem826 commented May 16, 2023

What this PR does / why we need it:
This PR brings several changes to Notification UI/UX:

New Design

Success Notification:

screenshot-localhost_8000-2023 05 24-16_55_59

screenshot-localhost_8000-2023 05 24-16_55_36

Short Error Notification:
Error notifications now display a short headline above the actual error. In case its some HTTP error then HTTP error status will be displayed. Otherwise, it will default to Something went wrong.

screenshot-localhost_8000-2023 05 24-17_01_05

screenshot-localhost_8000-2023 05 24-17_01_26

Long Error Notification:
If error message is too long then it will be collapsed by default and user can expand it by clicking on down arrow icon.

Collapsed:

screenshot-localhost_8000-2023 05 24-17_04_58

Expanded:

screenshot-localhost_8000-2023 05 24-17_05_15

Notification Count

The bell icon in top nav bar now displays unread notifications count.

screenshot-localhost_8000-2023 05 17-23_14_27

screenshot-localhost_8000-2023 05 17-23_15_06

Other Changes

  • Notification is not dismissed when being hovered.
  • Notification position is updated to move it a bit below.
  • Notification width is increased.

Which issue(s) this PR fixes:

Fixes #4662

What type of PR is this?

/kind design

Special notes for your reviewer:

Does this PR introduce a user-facing change? Then add your Release Note here:

Update the notification design and improve user experience.

Documentation:

NONE

@kubermatic-bot kubermatic-bot added do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. kind/design Categorizes issue or PR as related to design. release-note-none Denotes a PR that doesn't merit a release note. docs/none Denotes a PR that doesn't need documentation (changes). dco-signoff: yes Denotes that all commits in the pull request have the valid DCO signoff message. labels May 16, 2023
@kubermatic-bot
Copy link
Contributor

Skipping CI for Draft Pull Request.
If you want CI signal for your change, please convert it to an actual PR.
You can still manually trigger a test run with /test all

@kubermatic-bot
Copy link
Contributor

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: Waseem826

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@kubermatic-bot kubermatic-bot added approved Indicates a PR has been approved by an approver from all required OWNERS files. size/L Denotes a PR that changes 100-499 lines, ignoring generated files. labels May 16, 2023
@Waseem826 Waseem826 force-pushed the 4662-notification-ui-ux-update branch 2 times, most recently from bb2c743 to 4fb3535 Compare May 24, 2023 08:18
@Waseem826 Waseem826 force-pushed the 4662-notification-ui-ux-update branch from 8a5659f to de9ed33 Compare May 24, 2023 11:31
@kubermatic-bot kubermatic-bot added release-note Denotes a PR that will be considered when it comes time to generate release notes. and removed release-note-none Denotes a PR that doesn't merit a release note. labels May 24, 2023
@Waseem826 Waseem826 force-pushed the 4662-notification-ui-ux-update branch from de9ed33 to f767f9b Compare May 24, 2023 12:18
@Waseem826 Waseem826 marked this pull request as ready for review May 24, 2023 12:21
@Waseem826 Waseem826 changed the title [WIP] Notification UI/UX update Notification UI/UX update May 24, 2023
@kubermatic-bot kubermatic-bot removed the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label May 24, 2023
@Waseem826 Waseem826 force-pushed the 4662-notification-ui-ux-update branch from f767f9b to d091404 Compare May 24, 2023 12:55
@ahmadhamzh
Copy link
Contributor

/lgtm

@kubermatic-bot kubermatic-bot added the lgtm Indicates that a PR is ready to be merged. label May 24, 2023
@kubermatic-bot
Copy link
Contributor

LGTM label has been added.

Git tree hash: fb3ac23c686cd53b538068e0d38f57336ea2433c

@kubermatic-bot kubermatic-bot merged commit 61408a3 into kubermatic:main May 24, 2023
10 checks passed
@kubermatic-bot kubermatic-bot added this to the KKP 2.23 milestone May 24, 2023
@Waseem826 Waseem826 deleted the 4662-notification-ui-ux-update branch May 24, 2023 15:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
approved Indicates a PR has been approved by an approver from all required OWNERS files. dco-signoff: yes Denotes that all commits in the pull request have the valid DCO signoff message. docs/none Denotes a PR that doesn't need documentation (changes). kind/design Categorizes issue or PR as related to design. lgtm Indicates that a PR is ready to be merged. release-note Denotes a PR that will be considered when it comes time to generate release notes. size/L Denotes a PR that changes 100-499 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Notification UI/UX Update
3 participants