Working on the updated ToastNotification

[israel-dryer]

I'm currently working through the updates to the custom widgets. One of those is the toast notification. The current version 1 implementation is a very much a "Windows" style. In version 2, I'm trying to move the visuals to a more universal bootstrap look and feel.

What do you think so far on this one? Still working on the scaling. So, things will likely change in the final form. But, this will generally be the look I'm working for.

The great thing about this new implementation is that you'll have access to actual icons instead of just font characters.

ttkbootstrap implementation

bootstrap (from the website example)

This is the actual toast from the bootstrap website for comparison:

Styling

You'll noticed that I've got rounded edges on the toplevel after stripping off the chrome. This was accomplished with a bit of a hack that is mostly effective. I've created a custom layout for the frame, and then I've set the background to magenta. I've also set the background of the toplevel to magenta and then set that as the transparent color. This works more-or-less. It's not perfect, but not too bad either for tkinter. The option to use rounded corners will likely be an option I'll expose in the constructor.

[israel-dryer]

With action buttons.

[TheDemonGuard]

@israel-dryer
Thank you, from the screenshot, the new look and feel looks good to me.

• Regarding the transparency, yes. I agree giving feature to change the transparency might be good.

• Regarding the rounded corner (border radius), there is a discussion Thinking about new feature I could help with, but not sure how to do it #389.
  I was looking into about this, but it seems bit difficult to implement rounded corner (with user given radius) for all the widgets available.
  As from my finding we might need to have Canvas as the container around the widget, where the Canvas offers some option to specify the radius.
  This means rewriting the widgets to have a Canvas as the container or implement a base class which is a Canvas or has a Canvas. And make this base class as the base class for all the UI widgets.
  But going back to the "Toast Notification", the screenshot look nice 👍

To be honest I am not a UI designer, so there are things I do not notice unless this was mentioned or pointed out. :D

I'm currently working through the updates to the custom widgets. One of those is the toast notification. The current version 1 implementation is a very much a "Windows" style. In version 2, I'm trying to move the visuals to a more universal bootstrap look and feel.

What do you think so far on this one? Still working on the scaling. So, things will likely change in the final form. But, this will generally be the look I'm working for.

The great thing about this new implementation is that you'll have access to actual icons instead of just font characters.

ttkbootstrap implementation

## bootstrap (from the website example)

This is the actual toast from the bootstrap website for comparison:

Styling

You'll noticed that I've got rounded edges on the toplevel after stripping off the chrome. This was accomplished with a bit of a hack that is mostly effective. I've created a custom layout for the frame, and then I've set the background to magenta. I've also set the background of the toplevel to magenta and then set that as the transparent color. This works more-or-less. It's not perfect, but not too bad either for tkinter. The option to use rounded corners will likely be an option I'll expose in the constructor.

[israel-dryer]

yeah, honestly, after working with it a bit, I'm not sure that it's worth the effort for rounded corners on the toasts. It would be nice obviously, but the result is only just "ok" and getting a truly cross platform solution is not easy. Essentially a lot of effort for a few pixels, and I don't think it's going to be a game-changer. I'm thinking I'll just stick with the square corners on the tooltips and toasts.

[israel-dryer]

With alternate background colors

[israel-dryer]

message only

[israel-dryer]

text wrapping