Increase min-width of tab-modal prompts to match mockups

RESOLVED INCOMPLETE

Status

defect
RESOLVED INCOMPLETE
6 years ago
2 years ago

People

(Reporter: kjozwiak, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [defect] p=0)

Attachments

(1 attachment)

Reporter

Description

6 years ago
Posted image Alignment Issue
When clearing private data from the "Settings" flyout, the "Clear Private Data" modal window looks really unaligned. Buttons are aligned in the middle but all of the other text is being aligned to the left margin.

- Attached a screenshot to illustrate the issue

Steps to reproduce the issue:

1) Open Firefox Metro
2) Slide in the Windows Charm and select "Settings -> Options"
3) Once in the "Settings" flyout, select "Clear". You'll notice the modal window isn't aligned correctly

Current Behavior:

- Modal window is not correctly aligned and looks a bit off as the buttons are centered but the text is aligned to the left

Expected Behavior:

- Everything should be aligned in the center and look even and clean
Whiteboard: feature=defect c=Settings_pane_options_and_about u=metro_firefox_user p=0 → [triage] feature=defect c=Settings_pane_options_and_about u=metro_firefox_user p=0
Requesting feedback from rsilveira, curious if this layout match the theme that we had for this, if so this can be resolved wontfix.
Flags: needinfo?(rsilveira)
Yeah that matches the layout we have since bug 801187. Title and text aligned to the left and buttons aligned to the right. Maybe we can increase the minimum width so it will look cleaner. What do you think Yuan? Maybe the min-width should look like your "are you sure?" snapped view example at https://bugzilla.mozilla.org/attachment.cgi?id=790558
Flags: needinfo?(rsilveira) → needinfo?(ywang)
Reporter

Comment 3

6 years ago
I wasn't really sure there was a document that outlined the UX layout, I will definitely go through it so I know what to expect when testing. I think the problem is that there really isn't a lot of text being displayed to the user so the entire prompt just looks really big and unaligned as opposed to some of the examples in the document that have a lot more text/information being displayed.

I agree with Rodrigo, I think it would look a lot better if it looked like the "Are you sure" window outlined in the document.
Thanks for filing this Kamil.

I agree the size of window needs a little tweaks to match the mockup.

Rodrigo, can you also update the strings?
1. Make the header lower case. Use "Clear private data".
2. Update the stings under the header. Use: This will permanently delete the private data you have selected in “Options”. 

Thank you.
Flags: needinfo?(ywang)
Morphed this bug to handle tab-modal prompt polish and opened bug 941454 for the strings.
Summary: Defect - Modal window for "Clear Private Data" not aligned correctly → Defect - Increase min-width of tab-modal prompts to match mockups
Depends on: 941454
Blocks: metrobacklog
No longer blocks: metrov1backlog
Whiteboard: [triage] feature=defect c=Settings_pane_options_and_about u=metro_firefox_user p=0 → feature=defect c=Settings_pane_options_and_about u=metro_firefox_user p=0
Summary: Defect - Increase min-width of tab-modal prompts to match mockups → Increase min-width of tab-modal prompts to match mockups
Whiteboard: feature=defect c=Settings_pane_options_and_about u=metro_firefox_user p=0 → [defect] p=0
Mass close of bugs in obsolete product https://bugzilla.mozilla.org/show_bug.cgi?id=1350354
Status: NEW → RESOLVED
Closed: 2 years ago
Resolution: --- → INCOMPLETE
You need to log in before you can comment on or make changes to this bug.