efb4f5ff-1298-471a-8973-3d47447115dc
commented
4 months ago Cool idea. Something like this could be used for multiple purposes like https://github.com/FreeTubeApp/FreeTube/issues/4157
Open pkrasicki opened 4 months ago
efb4f5ff-1298-471a-8973-3d47447115dc
commented
4 months ago Cool idea. Something like this could be used for multiple purposes like https://github.com/FreeTubeApp/FreeTube/issues/4157
pkrasicki
commented
4 months ago Cool idea. Something like this could be used for multiple purposes like #4157
In that case the button should always be visible and it should display a list of all notifications. That's a little bit more complicated, but if you are going to have more notifications, it would make sense to implement the necessary changes now instead of having to rewrite things later.
Guidelines
Problem Description
As I mentioned in a comment for #5294, the current notification banner takes up a lot of space and the user has to close it each time they run an outdated version. We want to notify users that an update is available, but we shouldn't inconvenience them, because people don't always want to update right away. The notification should be easier to ignore.
Proposed Solution
Replace the old banner with a smaller, absolutely positioned popup and display an icon button with a small red (primary or secondary color) dot in the nav bar. The popup will be displayed when the app is launched, but it will disappear as soon as the user clicks on anything else or clicks the close button or presses the escape key. The notification button will remain though and the user can bring back the popup by clicking it. Clicking the link will open FreeTube's website. The notification button won't have any other use (at least right now), so if the app is up-to-date, it will not be shown at all. The size of the close button was increased to 15px to make the popup easier to close. The colors for the popup will have to be adjusted for each theme.
The notification button should toggle the popup. The red dot should go away only when the user clicks the notification button or interacts with the popup.
On desktop:
Light theme:
On mobile:
Alternatives Considered
None.
Issue Labels
visual improvement
Additional Information
The design is based on 0.20.0, but it should work just as well in 0.21.0.
Icons used:
bell,circle-exclamationwith 75% opacity andxmarkwith 60% opacity (90% in light theme).The box-shadow style for the popup is the same as "More Options" menu for each video.