Bug 1063765 - Part 1: Style Remote Tabs static panels for tablets and portrait phones. r=mcomella

This patch does several things:

1) It wraps static panel content in a ScrollView.

2) It tightens the static panels vertically.  We can fit landscape on
many high-end phones by reducing the space before the header and between
the header and the body text slightly.

3) It makes the body text just a little narrower than the button.  The
idea is for the call to action button to dominate the page horizontally.

4) It caps the maximum width of the content in the ScrollView.  I would
have used maxWidth, but that doesn't exist for LinearLayouts (or
ScrollViews).  Instead, I set a maxWidth for every RemoteTabsPanelItem,
which combined with wrap_content on the containing LinearLayout achieves
the same goal.  It's what I intended to do on tablets.
This commit is contained in:
Nick Alexander 2014-09-16 15:41:05 -07:00
parent b374dfd9c1
commit cc9b703884
5 changed files with 100 additions and 84 deletions

View File

@ -5,28 +5,30 @@
- file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="@style/RemoteTabsPanelFrame"
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
style="@style/RemoteTabsPanelItem.TextAppearance.Header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/home_remote_tabs_unable_to_connect" />
<LinearLayout style="@style/RemoteTabsPanelFrame" >
<TextView
style="@style/RemoteTabsPanelItem.TextAppearance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/home_remote_tabs_need_to_sign_in" />
<TextView
style="@style/RemoteTabsPanelItem.TextAppearance.Header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/home_remote_tabs_unable_to_connect" />
<Button
android:id="@+id/remote_tabs_needs_password_sign_in"
style="@style/RemoteTabsPanelItem.Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/fxaccount_sign_in_button_label" />
<TextView
style="@style/RemoteTabsPanelItem.TextAppearance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/home_remote_tabs_need_to_sign_in" />
</LinearLayout>
<Button
android:id="@+id/remote_tabs_needs_password_sign_in"
style="@style/RemoteTabsPanelItem.Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/fxaccount_sign_in_button_label" />
</LinearLayout>
</ScrollView>

View File

@ -5,21 +5,23 @@
- file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="@style/RemoteTabsPanelFrame"
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
style="@style/RemoteTabsPanelItem.TextAppearance.Header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/home_remote_tabs_unable_to_connect" />
<LinearLayout style="@style/RemoteTabsPanelFrame" >
<TextView
style="@style/RemoteTabsPanelItem.TextAppearance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/fxaccount_status_needs_upgrade" />
<TextView
style="@style/RemoteTabsPanelItem.TextAppearance.Header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/home_remote_tabs_unable_to_connect" />
</LinearLayout>
<TextView
style="@style/RemoteTabsPanelItem.TextAppearance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/fxaccount_status_needs_upgrade" />
</LinearLayout>
</ScrollView>

View File

@ -4,35 +4,37 @@
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="@style/RemoteTabsPanelFrame"
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
style="@style/RemoteTabsPanelItem.TextAppearance.Header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/fxaccount_confirm_account_header" />
<LinearLayout style="@style/RemoteTabsPanelFrame" >
<TextView
style="@style/RemoteTabsPanelItem.TextAppearance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/home_remote_tabs_need_to_verify" />
<TextView
style="@style/RemoteTabsPanelItem.TextAppearance.Header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/fxaccount_confirm_account_header" />
<Button
android:id="@+id/remote_tabs_needs_verification_resend_email"
style="@style/RemoteTabsPanelItem.Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/fxaccount_confirm_account_resend_email" />
<TextView
style="@style/RemoteTabsPanelItem.TextAppearance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/home_remote_tabs_need_to_verify" />
<TextView
android:id="@+id/remote_tabs_needs_verification_help"
style="@style/RemoteTabsPanelItem.TextAppearance.Linkified"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/home_remote_tabs_trouble_verifying" />
<Button
android:id="@+id/remote_tabs_needs_verification_resend_email"
style="@style/RemoteTabsPanelItem.Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/fxaccount_confirm_account_resend_email" />
</LinearLayout>
<TextView
android:id="@+id/remote_tabs_needs_verification_help"
style="@style/RemoteTabsPanelItem.TextAppearance.Linkified"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/home_remote_tabs_trouble_verifying" />
</LinearLayout>
</ScrollView>

View File

@ -5,35 +5,38 @@
- file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="@style/RemoteTabsPanelFrame"
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
style="@style/RemoteTabsPanelItem.TextAppearance.Header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/fxaccount_getting_started_welcome_to_sync" />
<LinearLayout
style="@style/RemoteTabsPanelFrame">
<TextView
style="@style/RemoteTabsPanelItem.TextAppearance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/fxaccount_getting_started_description" />
<TextView
style="@style/RemoteTabsPanelItem.TextAppearance.Header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/fxaccount_getting_started_welcome_to_sync" />
<Button
android:id="@+id/remote_tabs_setup_get_started"
style="@style/RemoteTabsPanelItem.Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/fxaccount_getting_started_get_started" />
<TextView
style="@style/RemoteTabsPanelItem.TextAppearance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/fxaccount_getting_started_description" />
<TextView
android:id="@+id/remote_tabs_setup_old_sync_link"
style="@style/RemoteTabsPanelItem.TextAppearance.Linkified"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/fxaccount_getting_started_old_firefox" />
<Button
android:id="@+id/remote_tabs_setup_get_started"
style="@style/RemoteTabsPanelItem.Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/fxaccount_getting_started_get_started" />
</LinearLayout>
<TextView
android:id="@+id/remote_tabs_setup_old_sync_link"
style="@style/RemoteTabsPanelItem.TextAppearance.Linkified"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/fxaccount_getting_started_old_firefox" />
</LinearLayout>
</ScrollView>

View File

@ -820,25 +820,32 @@
<style name="RemoteTabsPanelFrame">
<item name="android:paddingLeft">32dp</item>
<item name="android:paddingRight">32dp</item>
<item name="android:paddingTop">48dp</item>
<item name="android:paddingTop">16dp</item>
<item name="android:orientation">vertical</item>
<item name="android:layout_gravity">center_horizontal</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="RemoteTabsPanelItem">
<item name="android:layout_gravity">center</item>
<item name="android:gravity">center</item>
<item name="android:layout_marginBottom">16dp</item>
<item name="android:maxWidth">320dp</item>
</style>
<style name="RemoteTabsPanelItem.TextAppearance">
<item name="android:textColor">#777777</item>
<item name="android:textSize">16sp</item>
<item name="android:lineSpacingMultiplier">1.35</item>
<item name="android:lineSpacingMultiplier">1.25</item>
<item name="android:layout_marginLeft">8dp</item>
<item name="android:layout_marginRight">8dp</item>
</style>
<style name="RemoteTabsPanelItem.TextAppearance.Header">
<item name="android:textColor">#222222</item>
<item name="android:textSize">20sp</item>
<item name="android:layout_marginBottom">8dp</item>
</style>
<style name="RemoteTabsPanelItem.TextAppearance.Linkified">