nf-tower icon indicating copy to clipboard operation
nf-tower copied to clipboard

Implement a better error feedback mechanism

Open pditommaso opened this issue 5 years ago • 23 comments

Backend error should be visualised with error/warning box appearing just below the nav bar instead of a popup.

It should last more (configurable via an application setting) and there should be a cross icon (top-left corner) to close it.

Screenshot 2019-05-29 at 11 12 59

pditommaso avatar May 29 '19 09:05 pditommaso

Hi Paolo. I find Bootstrap toasts a good fit for this. Are you ok with them?

tcrespog avatar Jun 06 '19 05:06 tcrespog

What about using an alert with a dismissing icon?

pditommaso avatar Jun 06 '19 06:06 pditommaso

I'll check if it's possible to show an alert as a toast. I'll try to do that in order to leverage the builtin mechanism to hide the toast automatically after a configurable delay. If not, I'll implement a custom mechanism to show alerts in a toast-like manner.

tcrespog avatar Jun 06 '19 06:06 tcrespog

What's special with a toast? Let's jump on gitter if you want.

pditommaso avatar Jun 06 '19 06:06 pditommaso

The Bootstrap toasts have options to specify the fading behavior. Don't worry I sense an alert can be integrated with a toast without many problems.

tcrespog avatar Jun 06 '19 07:06 tcrespog

My point is that I would like to avoid the popup or dialog effect. For this reason, I was suggesting the alert.

pditommaso avatar Jun 06 '19 07:06 pditommaso

Yes, I know. I was thinking as you. In this case the toast would be like an invisible carrier for the alert.

tcrespog avatar Jun 06 '19 07:06 tcrespog

OK

pditommaso avatar Jun 06 '19 07:06 pditommaso

Done.

tcrespog avatar Jun 06 '19 11:06 tcrespog

Has this change merged? I still see errors appear into a small red popup as the one in the top comment.

pditommaso avatar Aug 25 '19 23:08 pditommaso

I haven't made any progress regarding the last change you proposed about this Paolo (the one with the error appearing in full width). My "Done" comment on 6 Jun was in fact the implementation of the current popup version.

tcrespog avatar Aug 26 '19 05:08 tcrespog

OK, the idea here is to show a red rectangle on top of the page instead of a small toast/popup. The error should be visualised until the user navigate away, make another action (maybe using http interceptor?) or click a dismiss icon.

The bootstrap alert could serve as inspiration.

pditommaso avatar Aug 26 '19 07:08 pditommaso

Some questions:

  • Should the position of the notification be fixed (like the navbar)?
  • I assume the position is below the navbar, but, should the position in the landing page change?

tcrespog avatar Sep 12 '19 12:09 tcrespog

was thinking at this, would not be possible to define error areas (basically a two divs), one when showing the main page. If does not exists fallback in a top one for the landing?

pditommaso avatar Sep 12 '19 12:09 pditommaso

Do you mean having the current mechanism when the landing page is being shown and the new one otherwise?

tcrespog avatar Sep 12 '19 12:09 tcrespog

I'm imagining a red box on top of the page (as a navbar) in case of the landing, and just below the navbar once logged.

pditommaso avatar Sep 12 '19 12:09 pditommaso

Something like this? Screenshot 2019-09-12 at 14 59 24 And this? Screenshot 2019-09-12 at 15 00 25

tcrespog avatar Sep 12 '19 13:09 tcrespog

Yes! text centred, thansk!

pditommaso avatar Sep 12 '19 13:09 pditommaso

Ok, but fixed? Scrolls along with the content (like the navbar)?

tcrespog avatar Sep 12 '19 13:09 tcrespog

umm, yes let's fixed as the navbar .. otherwise it could popup while the page is scrolled down and the user won't see it.

pditommaso avatar Sep 12 '19 13:09 pditommaso

Done in branch notification_refactor.

tcrespog avatar Sep 13 '19 07:09 tcrespog

By the way, success messages (like the one showed when the user profile is saved) are also shown this way for consistency, but in this case they fade away after a specified time. You can do this per error basis in case you want to fade a specific error message but no others. Have a look at the code and let me know if you have any questions.

tcrespog avatar Sep 13 '19 07:09 tcrespog

Makes sense. I'll check it out.

pditommaso avatar Sep 13 '19 07:09 pditommaso