[MGNLUI-2514] Refine visual design of alerts Created: 10/Dec/13  Updated: 02/May/14  Resolved: 18/Apr/14

Status: Closed
Project: Magnolia UI
Component/s: design, dialogs
Affects Version/s: 5.0.4, 5.1, 5.2
Fix Version/s: 5.2.4

Type: Improvement Priority: Critical
Reporter: Andreas Weder Assignee: Mikaël Geljić
Resolution: Fixed Votes: 0
Labels: next, support, usability, ux
Remaining Estimate: 3d
Time Spent: Not Specified
Original Estimate: 3d

Attachments: PNG File Issue 1 - Wrong position.png     PNG File Issue 2 - Scroll with title.png     PNG File Issue 3 - Icon chopped off.png     JPEG File Screen Shot 2014-04-18 at 08.20.40.jpg     PNG File confirm-dialog-html.png    
Issue Links:
dependency
is depended upon by MGNLUI-2671 Ensure consistent button order in ale... Closed
relation
is related to MGNLUI-2797 Show clear focus and hover states on ... Closed
is related to MGNLUI-2672 Orange default button color not clear... Closed
is related to MGNLUI-2718 Change default button in delete confi... Closed
supersession
supersedes MGNLUI-1975 Refine visual design of Alerts, Notif... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:
Sprint: 5.1 Beta1- Frontend
Story Points: 3

 Description   

Ensure that the appearance of alerts matches the visual design.

http://wiki.magnolia-cms.com/display/UX/Style+guides+for+message+banners%2C+alerts+and+notes#Styleguidesformessagebannersalertsandnotes-Alertsformodalmessages

This not only affects CSS. Since the group of buttons will be aligned with the right edge as a result, the button order has to be reversed as well since the default button then has to move to the right edge.



 Comments   
Comment by Andreas Weder [ 28/Feb/14 ]

I'm raising this to critical as it affects usability now as well and started to become related to several other issues.

Comment by Mikaël Geljić [ 03/Apr/14 ]

BTW, due to poor Jira-Git integration again, check out the following branch for review:
https://git.magnolia-cms.com/gitweb/?p=magnolia_ui.git;a=shortlog;h=refs/heads/confirm-dialogs-5.2.4

Buttons hover and focus styles have to be reviewed to complete the picture though.

Comment by Andreas Weder [ 15/Apr/14 ]

I'm re-opening this issue as I've found a set of problems during my review of the visual design still.

Comment by Andreas Weder [ 15/Apr/14 ]

I've updated the style guides to include the latest designs and color definitions.

http://wiki.magnolia-cms.com/display/UX/Style+guides+for+message+banners%2C+alerts+and+notes#Styleguidesformessagebannersalertsandnotes-Alertsformodalmessages

Here's the list of issues I've found still:

  • The position of alerts is wrong. They are too high up. They should be centered in the browser window (not the panel) actually - see this image from the style guide.
  • The height of an alert doesn't seem to grow with its content. It should up to a max height of probably (browser window - 2*40px)/2 .
  • The title scrolls with the text of the alert. It should stay where it is (see currently light dialog implementation for a possible solution).
  • The icon might be slightly chopped off. It seems to miss one, max. two pixels.
  • The drop shadow seems too light. If it's darker, the dialogs appear more crisp. I'd go with box-shadow: 6px 6px 6px rgba(66,66,66,0.5); .
Comment by Daniel Lipp [ 18/Apr/14 ]

Looks like latest changes introduced a new prob: when deleting a page the confirmation dialog doesn't properly cope with the html any more. See attached screenshot.

Comment by Mikaël Geljić [ 18/Apr/14 ]

Viel besser... O:)

Generated at Mon Feb 12 08:57:24 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.