Closed Bug 908309 Opened 7 years ago Closed 2 years ago

[Settings] Add second line of text if truncation exits

Categories

(Firefox OS Graveyard :: Gaia::Settings, defect, P1)

All
Other
defect

Tracking

(blocking-b2g:-)

RESOLVED WONTFIX
blocking-b2g -

People

(Reporter: epang, Assigned: pivanov)

References

Details

(Whiteboard: visual-refresh)

Attachments

(1 file)

Ismael,

In settings it's been brought to our attention that there is not enough space to fit all translations into 1 line. (See bug 892778).

I've attached a proposed solution to allow text to wrap to more lines if needed.  Can this be added to the building blocks?

This should only be done when no other translation can be provided.
Component: Gaia → Gaia::Settings
Hi Arnau, I wanted to check with you to see if this something that we can add to the building block to have the issue of truncated text.  thx!
Flags: needinfo?(arnau)
AFAIK we cannot truncate text using CSS only for multiple lines of text, we would need some additional javascript. That means we cannot do it in the Building Blocks.
Flags: needinfo?(arnau)
Hi Tim, since this cannot be part of the building blocks is this something you can help us with?
Flags: needinfo?(timdream)
Well, we can just add a "max-height" then everything below that size will be hidden, but we will not be able to add ellpisis just with CSS.

A/ CSS ellipsis for single-line strings
B/ CSS multi-line text (only 2 lines) w/o ellipsis

Anything outside that, requires JS
(In reply to Ismael Gonzalez [:basiclines] from comment #4)
> Well, we can just add a "max-height" then everything below that size will be
> hidden, but we will not be able to add ellpisis just with CSS.
> 
> A/ CSS ellipsis for single-line strings
> B/ CSS multi-line text (only 2 lines) w/o ellipsis
> 
> Anything outside that, requires JS

With this bug we are trying to avoid truncation and the use of ellipses.  If needed we can most likely have a max of 3-4 lines to avoid this having truncated text.  Would something like this be possible?
Flags: needinfo?(igonzaleznicolas)
We can go with B/ but with the desired amount of lines (i put 2 as an example, it may be 3 or 4 or whatever)
Flags: needinfo?(igonzaleznicolas)
If we put 3 or 4 lines (just for safe measure) and there's only 1-2 lines of text will empty spaces be shown?  Or will the extra lines only show up an needed?
(In reply to Eric Pang [:epang] from comment #5)
> (In reply to Ismael Gonzalez [:basiclines] from comment #4)
> > Well, we can just add a "max-height" then everything below that size will be
> > hidden, but we will not be able to add ellpisis just with CSS.
> > 
> > A/ CSS ellipsis for single-line strings
> > B/ CSS multi-line text (only 2 lines) w/o ellipsis
> > 
> > Anything outside that, requires JS
> 
> With this bug we are trying to avoid truncation and the use of ellipses.  If
> needed we can most likely have a max of 3-4 lines to avoid this having
> truncated text.  Would something like this be possible?

I'm a little bit worried about this. You mean we may have headers with 4 line titles?
(In reply to Sergi from comment #8)
> (In reply to Eric Pang [:epang] from comment #5)
> > (In reply to Ismael Gonzalez [:basiclines] from comment #4)
> > > Well, we can just add a "max-height" then everything below that size will be
> > > hidden, but we will not be able to add ellpisis just with CSS.
> > > 
> > > A/ CSS ellipsis for single-line strings
> > > B/ CSS multi-line text (only 2 lines) w/o ellipsis
> > > 
> > > Anything outside that, requires JS
> > 
> > With this bug we are trying to avoid truncation and the use of ellipses.  If
> > needed we can most likely have a max of 3-4 lines to avoid this having
> > truncated text.  Would something like this be possible?
> 
> I'm a little bit worried about this. You mean we may have headers with 4
> line titles?

Hey Sergi, ideally we don't want this going anywhere past 2 lines.  But some localizations are really long so it might make sense to have the option.  But I agree that going over too lines starts looking really messy.  Maybe for now it might make sense to stick to a max of two lines.  It's a pretty generous amount of space, but if a translation cannot fit then we'll deal with it on an individual basis.  What do you think?
Flags: needinfo?(sergiov)
IMHO using 2 lines of text would be the best approach. I mean, leaving open the possibility of adding 4 lines of text would make people use that extra space instead of looking for a better and/or shorter translation.  

Thanks for the clarification Eric!
Flags: needinfo?(sergiov)
The best choice would be: 
B/ CSS multi-line text (only 2 lines) w/o ellipsis

Ismael, can you look into implementing this?
Flags: needinfo?(igonzaleznicolas)
Is this a Building Block lists.css default behaviour, or do we only need it for Settings app?
If it is a BB lists.css default's, is it something we need "now" or can we add it to the Building Blocks refactor?
If it is just a Settings app thing, i think i can go for it!
Flags: needinfo?(igonzaleznicolas)
This is totally doable in Building Block in CSS as Ismael had said.
Flags: needinfo?(timdream)
(In reply to Ismael Gonzalez [:basiclines] from comment #12)
> Is this a Building Block lists.css default behaviour, or do we only need it
> for Settings app?
> If it is a BB lists.css default's, is it something we need "now" or can we
> add it to the Building Blocks refactor?
> If it is just a Settings app thing, i think i can go for it!

I think this can be just for the settings app (but does this include the settings for other apps such as email, calendar, etc?).  I don't think we want this happening in places such as the media apps.  Would be great if this can get in by the 16th for v1.2.
Flags: needinfo?(igonzaleznicolas)
I'll take care of it right now so!
Flags: needinfo?(igonzaleznicolas)
Guys i will not be able to keep working on this, anyway this is the branch where i've been working for this: https://github.com/basiclines/gaia/tree/settings-ui-bugfixing
Assignee: igonzaleznicolas → arnau
(In reply to Ismael Gonzalez [:basiclines] from comment #16)
> Guys i will not be able to keep working on this, anyway this is the branch
> where i've been working for this:
> https://github.com/basiclines/gaia/tree/settings-ui-bugfixing

Hey Arnau, have you had a chance to look into this bug?

I'm also flagging as 1.3 since this fix will help us with future truncation issues in settings.

Thanks!
blocking-b2g: --- → 1.3?
Whiteboard: visual design, visual-tracking → visual design, visual-tracking, jian
(In reply to Eric Pang [:epang] from comment #17)
> (In reply to Ismael Gonzalez [:basiclines] from comment #16)
> > Guys i will not be able to keep working on this, anyway this is the branch
> > where i've been working for this:
> > https://github.com/basiclines/gaia/tree/settings-ui-bugfixing
> 
> Hey Arnau, have you had a chance to look into this bug?
> 
> I'm also flagging as 1.3 since this fix will help us with future truncation
> issues in settings.
> 
> Thanks!

I don't think that argues to block - that argues for wanting to fix something, but not arguing it's a blocker. A product blocker is what blocks the release.
Blocks: 892700
(In reply to Eric Pang [:epang] from comment #17)
> (In reply to Ismael Gonzalez [:basiclines] from comment #16)
> > Guys i will not be able to keep working on this, anyway this is the branch
> > where i've been working for this:
> > https://github.com/basiclines/gaia/tree/settings-ui-bugfixing
> 
> Hey Arnau, have you had a chance to look into this bug?
> 
> I'm also flagging as 1.3 since this fix will help us with future truncation
> issues in settings.
> 
> Thanks!


Hey Arnau, just realized I didn't ni you on this!  Have you had a chance to look into this?  Seems like there's a lot of truncation issues coming in that would really benefit when this fix lands! Thanks!
Flags: needinfo?(arnau)
We could achieve a two line truncated text using javascript, but another issue is how do we center the text when we only have one line. An easy way to do that would be using flex box, but in order to use flex we should first fix this: https://bugzilla.mozilla.org/show_bug.cgi?id=914892
Flags: needinfo?(arnau)
This shouldn't be a release blocker, but if it lands before 1.3 FC we can take it.
blocking-b2g: 1.3? → -
Blocks: 932140
Hey Arnau, looks like bug 914892 is close to landing :).  Once landed can you work on this bug when you have time?  Thanks!
Flags: needinfo?(arnau)
Blocks: 930291
Blocks: 932403
Blocks: SysFE
Whiteboard: visual design, visual-tracking, jian → visual design, visual-tracking, bokken
Is this intended for 1.4? Trying to assess the localization issues this may or may not be able to help with.
Flags: needinfo?(padamczyk)
Yes, we want to have it done ASAP, so hopefully v.1.4
Flags: needinfo?(padamczyk)
Hello Eric, 
Do you know about the situation of this bug right now?
Is anybody working on this?
thank you!
Flags: needinfo?(epang)
Hey Carol, I believe Arnau was working on it last.

Arnau, I remember you were working on this bug a while back, can you let us know what the status of this is?  Can we have this ready for 1.4?  Thanks!
Flags: needinfo?(epang)
This bug depends on https://bugzilla.mozilla.org/show_bug.cgi?id=940355, which I believe Joan will have ready this week.
Flags: needinfo?(arnau)
Blocks: 977330
Flagging Casey so he is aware of this in the context of bug #979483, bug #979478 and bug #908300. Casey, I'm wondering if we may also want to add this to the special branch you do and treat it in the same manner as bug #908300?
Flags: needinfo?(kyee)
Flagging Patryk to set a Target Milestone on this above.
Flags: needinfo?(padamczyk)
Flags: needinfo?(padamczyk)
Target Milestone: --- → 1.5 S1 (9may)
Blocks: 983812
No longer blocks: 983812
Whiteboard: visual design, visual-tracking, bokken → visual-refresh
Target Milestone: 2.0 S1 (9may) → ---
What is the status of this, as we start the last week of 2.0? Is anyone working on this? It's noted as blocking the Sys FE Visual Refresh for 2.0.
Flags: needinfo?(kyee) → needinfo?(bhuang)
Also flagging Arnau for an implementation update. Thanks!
Flags: needinfo?(arnau)
This bug is blocked by bug 940355, where we need to redo how list layouts are done.
I would move that to 2.1
Flags: needinfo?(arnau)
We agreed that for 2.0 we would not selectively move items to 2.1. This is important to L10N. Who else is a candidate to take this?
Flags: needinfo?(arnau)
Pavel will be working on that.
Sorry for not getting into this before, as this bug had the target milestone removed on 2014-05-08
Flags: needinfo?(arnau)
Assigned to Pavel. Pavel, your other bugs are higher priority than this, though. Let me know if you have questions. Thanks for the update, Arnau!
Assignee: nobody → pivanov
Flags: needinfo?(bhuang)
Hey Eric,
we have a lot of comments and proposals here, can you summarize the final needs of this one? :)
Flags: needinfo?(epang)
(In reply to Pavel Ivanov [:ivanovpavel] from comment #36)
> Hey Eric,
> we have a lot of comments and proposals here, can you summarize the final
> needs of this one? :)

Hey Pavel, you can still follow the attached spec for line spacing.  Looks like you'll have to land bug 940355 (from Arnau's comment 32) first.  Let me know if you have any other questions, thanks!
Flags: needinfo?(epang)
Firefox OS is not being worked on
Status: NEW → RESOLVED
Closed: 2 years ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.