Closed Bug 1091826 Opened 6 years ago Closed 4 years ago

Unify "empty state" layout for our panels UI

Categories

(Firefox for Android :: Theme and Visual Design, defect)

x86
Android
defect
Not set
normal

Tracking

()

RESOLVED FIXED

People

(Reporter: antlam, Unassigned, Mentored)

References

(Blocks 2 open bugs)

Details

(Whiteboard: [good next bug][lang=xml])

Attachments

(5 files)

We have a couple panels now and I think they could use some basic clean up in terms of unifying the padding and margins.

I see that we made some progress on this in bug 907852 but now that we have more work being done on them, it seems like we need to do another pass of updates :)

Things that I am looking to unify: (suggestions welcome!, some of these might already be done)

 - Style of Reading list tip, History tip, future tips!
 - Typography: line-height, font size, color, etc
 - Fixing the top margin and in-between padding 

Panels to pay attention to: (list any I forgot!)

 - History
 - Reading list
 - Recent tabs
 - Bookmarks

 - Sync
 - etc (?)

I've separated Sync here because there's a sign up button that takes a lot of attention and space in the layout. To my knowledge, no other panel has that type of CTA yet. Since it's more of a special case, we should call it out and make sure we're aware of when we do make special cases.
Duplicate of this bug: 1091856
Lucas, sorry for the bug bounce - no need to do a real feedback for this bug, but I am a little curious (as is mcomella, apparently) about what you would suggest for this approach. Copied the comment below [1]:

> Part 2: Improved empty layout
> 
> Hey Lucas, we are back to empty layouts again! mcomella about this posed the
> question of whether there was some other way to do this layout without the
> two extra "spacer views". Simply centering the two views doesn't work
> because we want the empty layout to be higher than center (if there is
> space).
> 
> Here were a few things we considered:
> - Adding extra margin to the bottom view. This is a little problematic
> because the bottom view is now the contextual hint, which is now "gone," so
> the padding may not always be present. This might also cut off the content
> on smaller screens.
> - Adding a scrollview, and adding the bottom margin. This might cause
> screens to have a scrollview even if all the content can be squished on the
> screen - I didn't like it because it makes the empty view seem too heavy.
> 
> Anyways, could you think on this briefly, and let me know if you come up
> with any other solutions that don't need the two extra views? A
> RelativeLayout would be possible, but I'm not sure if it would cost less
> perf-wise than a LinearLayout with two weighted filler views.

[1] https://bugzilla.mozilla.org/show_bug.cgi?id=1089810#c8
Flags: needinfo?(lucasr.at.mozilla)
Anthony, do you have any mocks for this? This could be a good collection of [good-first-bug] for new contributors.
Flags: needinfo?(lucasr.at.mozilla) → needinfo?(alam)
Wanted to leave a note in here... for the time being the latest empty states are in bug 1101746 (Empty about:passwords) and bug 1014994 (sync tabs panel design).

Hopefully I can start pooling them together soon. Next steps would be to consolidate these designs across all the panels. Specs shouldn't change much from those aforementioned bugs.
Finally got to spend some time on this. Minimal changes mostly, takes a lot from the empty state of Sync Panels as well as First Run, and Empty about:pages as well to keep things consistent.
Flags: needinfo?(alam)
Here's a shot of what they'd basically look like next to each other.
Attaching icons.
Mentor: liuche
Whiteboard: [good next bug][lang=java]
No longer depends on: onboarding-defaults
I'd like to work on this.
(In reply to Alex Johnson (:alex_johnson) from comment #8)
> I'd like to work on this.

Sounds good Alex!

But, looking at the design now, the icon size seems to be spec'd a bit too large. Keeping everything else in comment 5 the same, can we update the icon size to be 60 dp squared instead of 80 dp squared?

Some screenshots would be great - thanks!
Assignee: nobody → me
Status: NEW → ASSIGNED
Whiteboard: [good next bug][lang=java] → [good next bug][lang=xml]
How's it going? Are you still planning to work on this? Let us know if you need any help!
Flags: needinfo?(me)
I will be busy for the next few weeks because of finals.  I'm going to go ahead and unassign it and work on it later if it's still not taken.
Assignee: me → nobody
Status: ASSIGNED → NEW
Flags: needinfo?(me)
Blocks: fennec-polish
No longer blocks: 1063058
I'd love to work on this one! At first glance it seems like it's mostly about tweaking the corresponding layout files, correct?
Flags: needinfo?(liuche)
This is a pretty old bug, so let's make sure the mocks are still up to date. (There have been a lot of changes, because some of these empty states no longer exist anymore because we've removed the panels themselves.)

Anthony, can you take a look at these mocks and see if they match what we currently want?
Flags: needinfo?(liuche) → needinfo?(alam)
(In reply to amol1994mane from comment #12)
> I'd love to work on this one! At first glance it seems like it's mostly
> about tweaking the corresponding layout files, correct?

Hi, amol. We generally recommend having one bug at a time for new contributors. It looks like you've been making progress in bug 1262285 – would you also like to look at bug 1081437? Comment in that bug if you'd like to try it.

Anthony, feel free to close this bug if it's no longer relevant.
(In reply to Chenxia Liu [:liuche] from comment #13)
> This is a pretty old bug, so let's make sure the mocks are still up to date.
> (There have been a lot of changes, because some of these empty states no
> longer exist anymore because we've removed the panels themselves.)
> 
> Anthony, can you take a look at these mocks and see if they match what we
> currently want?

I think we should close this bug and file new ones as we need since we've done a bunch of work around our panels already.
Flags: needinfo?(alam)
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → INVALID
Resolution: INVALID → FIXED
You need to log in before you can comment on or make changes to this bug.