Tim Guan-tin Chien [:timdream] (please needinfo) Assignee
	Description • 9 years ago

Our built-in keyboard occupies too much space when it popup. Let me try to propose a fix here...

	Tim Guan-tin Chien [:timdream] (please needinfo) Assignee
	Comment 1 • 9 years ago

Adjusting the height is a bit tricky so I would like to get an UX approval before actual deliver a proper fix.

My proposal is to reduce the height of the keys only when there is a black suggestion bars -- and the reduction will happen to be the size of the bar (30px). So that's from 43px to 35.4px. I do not want to change the size of the key without the suggestion bar, because some layout like PIN keypad will have small sub scripts that will have no space to fit into -- and arguably it is already short enough w/o the bar.

Tori, are you in charge? If not please redirect for me thanks.

	Tim Guan-tin Chien [:timdream] (please needinfo) Assignee
	Comment 2 • 9 years ago

FYI on the original heights. The Zhuyin layout completely occupied the screen when placed horizontally.

	Jan Jongboom [:janjongboom] (inactive)
	Comment 3 • 9 years ago

If we're changing it I think we should change it regardless of the suggestion bar. At least on Android I type almost blind because the key position is in my muscle memory. Re the suggestion in Comment 1 I'd be very very confused.

	Tim Guan-tin Chien [:timdream] (please needinfo) Assignee
	Comment 4 • 9 years ago

(In reply to Jan Jongboom [:janjongboom] (Telenor) from comment #3)
> If we're changing it I think we should change it regardless of the
> suggestion bar. At least on Android I type almost blind because the key
> position is in my muscle memory. Re the suggestion in Comment 1 I'd be very
> very confused.

Make sense. How about let's reduce the height for all layouts *except* number layouts; these layout already have a CSS class "big-key" set.

(reminder for myself: make sure label of keys in some language like Arabic are not cut off)

	Tori Chen [:tori]
	Comment 5 • 9 years ago

> How about let's reduce the height for all layouts *except*
> number layouts; these layout already have a CSS class "big-key" set.

reduce the height for all layouts -> partly agreed, can we set a guildeline for max height of landscape/portrait keyboard? And let's fix the keyboard exceed the guideline.

(+visual designer Carol)

	Carol Huang [:Carol]
	Comment 6 • 9 years ago

I agree to reduce the height for all layout except number layouts in landscape.
My suggestion for max keyboard height(with black suggestion bar) of landscape is the 3/5 height of screen height.
thanks!

	Tim Guan-tin Chien [:timdream] (please needinfo) Assignee
	Comment 7 • 9 years ago

So the Zhuyin layout on hoz mode have to further reduced to 288px since the height of the screen is 480px.

Let me figure out how we could do this...

	Tim Guan-tin Chien [:timdream] (please needinfo) Assignee
	Comment 9 • 9 years ago

Comment on attachment 8660654 [details]
[gaia] timdream:keyboard-height > mozilla-b2g:master

This is f**king complex than it needs to be because people who previously work on this part of code did not clean up old bits from the CSS and html. There are a lot of not needed styles and border lines.

This is further complicated by the fact we need to get the height in JavaScript before the layout engine decide the real height.

Anyway, I've pay the debt here ...

	Tim Guan-tin Chien [:timdream] (please needinfo) Assignee
	Comment 10 • 9 years ago

Comment on attachment 8660654 [details]
[gaia] timdream:keyboard-height > mozilla-b2g:master

To clarify:

- There was an one pixel top border, but it is covered by the dark candidate panel (when there is one), or it is not visible because it is of the same color of the background color of the first row.
- Same goes to dark borders of the candidate panels -- they are of the same color of the background color of the candidate panel itself ...

So to make the height calculation easier, I've removed both. It doesn't make sense to keep these styles and shot us in the foot.


Carol, could you help me UI review this? I can help you load the patch into the phone...

	Jan Jongboom [:janjongboom] (inactive)
	Comment 11 • 9 years ago

Comment on attachment 8660654 [details]
[gaia] timdream:keyboard-height > mozilla-b2g:master

1. Why do I see 1px of background in the image top left corner (bbc in landscape)? Somewhere there's still a mistake re: height handling.

Probably a bug in system though.

Re: JS files, I'm pretty confident that this won't regress, but there's no way to oversee the consequences in the CSS.

Errors I found after this patch:

- Th locale, last row has red background (indicative that something is wrong according to your patch :-))
- Dz locale, when you tap the left bottom key, switch to alt layout, some keys do not fit vertically

Other issues I found:

- my locale, keys don't fit in uppercase (although mostly a horizontal issue, they almost fall out vertically too)
- te locale, keys overlap all the time (first row key 5, 6 are not identifiable)
- Chinese locale, when tapping the 'alternatives' button, there is a bottom border which is not necessary (because bottom of screen anyway).
- Dz, on first row key 4&5 don't fit
- Small typo in github

	Tim Guan-tin Chien [:timdream] (please needinfo) Assignee
	Comment 12 • 9 years ago

Thanks for the review; sorry about not getting this thoroughly checked.

	Tim Guan-tin Chien [:timdream] (please needinfo) Assignee
	Comment 13 • 9 years ago

Comment on attachment 8660654 [details]
[gaia] timdream:keyboard-height > mozilla-b2g:master

Thanks for the quick review.

I ended up going through all layouts and adjust CSS accordingly. We should not have overflow button label anymore.

	Jan Jongboom [:janjongboom] (inactive)
	Comment 14 • 9 years ago

Comment on attachment 8660654 [details]
[gaia] timdream:keyboard-height > mozilla-b2g:master

r=me, thanks

	Tim Guan-tin Chien [:timdream] (please needinfo) Assignee
	Comment 15 • 9 years ago

Comment on attachment 8660654 [details]
[gaia] timdream:keyboard-height > mozilla-b2g:master

Discussed offline and UX/Visual decided it's better if we could keep the total height of 5-row and 4-row layout the same.

	Tim Guan-tin Chien [:timdream] (please needinfo) Assignee
	Comment 16 • 9 years ago

Comment on attachment 8660654 [details]
[gaia] timdream:keyboard-height > mozilla-b2g:master

UX changed their mind -- they would like to keep the 4 rows layouts roughly the same height and shorten the 5 rows layouts. The numbers are carefully and manually adjusted to ensure that.

Jan, could you take a quick look at the second commit? It's just a simple rule change according to above.

	Tim Guan-tin Chien [:timdream] (please needinfo) Assignee
	Comment 17 • 9 years ago

Comment on attachment 8660654 [details]
[gaia] timdream:keyboard-height > mozilla-b2g:master

It's been two weeks, so I guess I should just merge this with my additional follow-up without waiting further...

	Tim Guan-tin Chien [:timdream] (please needinfo) Assignee
	Comment 18 • 9 years ago

master: https://github.com/mozilla-b2g/gaia/commit/c43bf99d61a8379627952c8cad63123bb65a5840