Bug 1122829 - Tighten Firefox Account screens vertically. r=rnewman

========

72353409b5
Author: Nick Alexander <nalexander@mozilla.com>
Date:   Fri Jan 16 16:27:02 2015 -0800

    Bug 1122829 - Part 5: Tighten vertically yet further; start with error view hidden and animate it in/out on v11+.

========

779b280ad9
Author: Nick Alexander <nalexander@mozilla.com>
Date:   Fri Jan 16 11:58:04 2015 -0800

    Bug 1122829 - Part 4: Tighten Getting Started vertically, and animate the icon in.

========

b92693f004
Author: Nick Alexander <nalexander@mozilla.com>
Date:   Fri Jan 16 11:53:54 2015 -0800

    Bug 1122829 - Part 3: Don't fill text right to the edges of the entry fields.

    A little padding softens the edges, which looks better with the rounded
    corners.

========

4db0e9e642
Author: Nick Alexander <nalexander@mozilla.com>
Date:   Fri Jan 16 11:50:06 2015 -0800

    Bug 1122829 - Part 2: Lower text sizes.

========

fcd7fc33b4
Author: Nick Alexander <nalexander@mozilla.com>
Date:   Fri Jan 16 11:54:45 2015 -0800

    Bug 1122829 - Part 1: Don't animate back presses between activities.

    On modern devices (Android 4.4), this gives a smooth "click" back and
    forth between Sign Up and Sign In.
This commit is contained in:
Nick Alexander 2015-01-29 14:22:29 -08:00
Родитель a2a1c81c41
Коммит fefed07fc5
14 изменённых файлов: 141 добавлений и 69 удалений

Просмотреть файл

@ -4,12 +4,12 @@
package org.mozilla.gecko.fxa.activities;
import org.mozilla.gecko.Locales.LocaleAwareActivity;
import org.mozilla.gecko.background.common.log.Logger;
import org.mozilla.gecko.background.fxa.FxAccountAgeLockoutHelper;
import org.mozilla.gecko.fxa.FirefoxAccounts;
import org.mozilla.gecko.fxa.authenticator.AndroidFxAccount;
import org.mozilla.gecko.sync.setup.activities.ActivityUtils;
import org.mozilla.gecko.Locales.LocaleAwareActivity;
import android.accounts.Account;
import android.app.Activity;
@ -71,6 +71,12 @@ public abstract class FxAccountAbstractActivity extends LocaleAwareActivity {
redirectIfAppropriate();
}
@Override
public void onBackPressed() {
super.onBackPressed();
overridePendingTransition(0, 0);
}
protected void launchActivity(Class<? extends Activity> activityClass) {
Intent intent = new Intent(this, activityClass);
// Per http://stackoverflow.com/a/8992365, this triggers a known bug with

Просмотреть файл

@ -12,6 +12,7 @@ import java.util.HashSet;
import java.util.Map;
import java.util.Set;
import org.mozilla.gecko.AppConstants;
import org.mozilla.gecko.R;
import org.mozilla.gecko.background.common.log.Logger;
import org.mozilla.gecko.background.fxa.FxAccountClient10.RequestDelegate;
@ -34,6 +35,8 @@ import org.mozilla.gecko.sync.setup.activities.ActivityUtils;
import android.accounts.Account;
import android.accounts.AccountManager;
import android.animation.LayoutTransition;
import android.annotation.SuppressLint;
import android.content.Context;
import android.content.Intent;
import android.os.AsyncTask;
@ -50,6 +53,7 @@ import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnFocusChangeListener;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.Button;
@ -147,7 +151,14 @@ abstract public class FxAccountAbstractSetupActivity extends FxAccountAbstractAc
}
protected void hideRemoteError() {
remoteErrorTextView.setVisibility(View.INVISIBLE);
if (AppConstants.Versions.feature11Plus) {
// On v11+, we remove the view entirely, which triggers a smooth
// animation.
remoteErrorTextView.setVisibility(View.GONE);
} else {
// On earlier versions, we just hide the error.
remoteErrorTextView.setVisibility(View.INVISIBLE);
}
}
protected void showRemoteError(Exception e, int defaultResourceId) {
@ -428,6 +439,16 @@ abstract public class FxAccountAbstractSetupActivity extends FxAccountAbstractAc
super.onCreate(savedInstanceState);
}
@SuppressLint("NewApi")
protected void maybeEnableAnimations() {
// On v11+, we animate the error display being added and removed. This saves
// us some vertical space when we start the activity.
if (AppConstants.Versions.feature11Plus) {
final ViewGroup container = (ViewGroup) remoteErrorTextView.getParent();
container.setLayoutTransition(new LayoutTransition());
}
}
protected void updateFromIntentExtras() {
// Only set email/password in onCreate; we don't want to overwrite edited values onResume.
if (getIntent() != null && getIntent().getExtras() != null) {

Просмотреть файл

@ -83,6 +83,7 @@ public abstract class FxAccountAbstractUpdateCredentialsActivity extends FxAccou
ActivityUtils.linkTextView(view, R.string.fxaccount_sign_in_forgot_password, R.string.fxaccount_link_forgot_password);
updateFromIntentExtras();
maybeEnableAnimations();
}
protected class UpdateCredentialsDelegate implements RequestDelegate<LoginResponse> {

Просмотреть файл

@ -105,6 +105,7 @@ public class FxAccountCreateAccountActivity extends FxAccountAbstractSetupActivi
});
updateFromIntentExtras();
maybeEnableAnimations();
}
@Override

Просмотреть файл

@ -6,6 +6,7 @@ package org.mozilla.gecko.fxa.activities;
import java.util.Locale;
import org.mozilla.gecko.Locales;
import org.mozilla.gecko.R;
import org.mozilla.gecko.background.common.log.Logger;
import org.mozilla.gecko.background.fxa.FxAccountAgeLockoutHelper;
@ -13,7 +14,6 @@ import org.mozilla.gecko.background.fxa.FxAccountUtils;
import org.mozilla.gecko.fxa.FirefoxAccounts;
import org.mozilla.gecko.fxa.FxAccountConstants;
import org.mozilla.gecko.sync.setup.activities.ActivityUtils;
import org.mozilla.gecko.Locales;
import android.accounts.AccountAuthenticatorActivity;
import android.content.Intent;
@ -21,6 +21,10 @@ import android.os.Bundle;
import android.os.SystemClock;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.TranslateAnimation;
import android.widget.TextView;
/**
@ -58,6 +62,33 @@ public class FxAccountGetStartedActivity extends AccountAuthenticatorActivity {
startFlow(extras);
}
});
animateIconIn();
}
/**
* Float the icon up, starting from below and moving up to its final layout
* position. Also, fade the icon in.
* <p>
* We animate relative to the size of the icon rather than from the bottom of
* the containing view for two reasons: first, the distance from bottom could
* be large on tablets; two, animating with absolute values requires that
* measurement has happened first, which requires a (sometimes buggy)
* onPreDrawListener.
*/
protected void animateIconIn() {
final AlphaAnimation a = new AlphaAnimation(0.0f, 1.0f);
final TranslateAnimation t = new TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF, 2.0f, Animation.RELATIVE_TO_SELF, 0.0f);
final AnimationSet animationSet = new AnimationSet(true);
animationSet.setDuration(150 * 7); // Straight outta... fxa-content-server.
animationSet.addAnimation(a);
animationSet.addAnimation(t);
final View iconView = findViewById(R.id.icon);
iconView.startAnimation(animationSet);
}
protected void startFlow(Bundle extras) {

Просмотреть файл

@ -70,6 +70,7 @@ public class FxAccountSignInActivity extends FxAccountAbstractSetupActivity {
});
updateFromIntentExtras();
maybeEnableAnimations();
TextView view = (TextView) findViewById(R.id.forgot_password_link);
ActivityUtils.linkTextView(view, R.string.fxaccount_sign_in_forgot_password, R.string.fxaccount_link_forgot_password);

Просмотреть файл

@ -22,13 +22,17 @@
<include layout="@layout/fxaccount_custom_server_view" />
<TextView
android:id="@+id/remote_error"
style="@style/FxAccountErrorItem" />
<include layout="@layout/fxaccount_email_password_view" />
<TextView
style="@style/FxAccountTextItem"
android:layout_marginTop="10dp"
android:text="@string/fxaccount_create_account_password_length_restriction"
android:textColor="@color/fxaccount_textColorSubdued" />
android:textColor="@color/fxaccount_textColorSubdued"
android:textSize="12sp" />
<!-- Per http://stackoverflow.com/questions/2359176/android-edittext-onclicklistener, not allowing focus allows us to highjack the click. -->
@ -69,20 +73,6 @@
android:inputType="none" />
</LinearLayout>
<TextView
android:id="@+id/policy"
style="@style/FxAccountLinkifiedItem"
android:layout_marginBottom="0dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:text="@string/fxaccount_create_account_policy_text"
android:textColorLink="@color/fxaccount_linkified_textColorLinkSubdued" />
<TextView
android:id="@+id/remote_error"
style="@style/FxAccountErrorItem" />
<RelativeLayout
style="@style/FxAccountButtonLayout" >
@ -92,28 +82,29 @@
<Button
android:id="@+id/button"
style="@style/FxAccountButton"
style="@style/FxAccountProgressButton"
android:text="@string/fxaccount_create_account_button" />
</RelativeLayout>
<TextView
android:id="@+id/sign_in_instead_link"
style="@style/FxAccountLinkItem"
android:focusable="true"
android:layout_marginBottom="0dp"
android:text="@string/fxaccount_create_account_sign_in_instead" />
<CheckBox
android:id="@+id/choose_what_to_sync_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginBottom="0dp"
android:layout_marginBottom="10dp"
android:text="@string/fxaccount_create_account_choose_what_to_sync" />
<TextView
android:id="@+id/sign_in_instead_link"
style="@style/FxAccountLinkItem"
android:layout_marginBottom="20dp"
android:layout_marginTop="20dp"
android:focusable="true"
android:text="@string/fxaccount_create_account_sign_in_instead" />
android:id="@+id/policy"
style="@style/FxAccountPolicyItem"
android:text="@string/fxaccount_create_account_policy_text" />
<LinearLayout style="@style/FxAccountSpacer" />

Просмотреть файл

@ -8,6 +8,7 @@
<merge xmlns:android="http://schemas.android.com/apk/res/android" >
<LinearLayout
android:id="@+id/email_password_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
@ -27,6 +28,7 @@
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:orientation="horizontal" >
<EditText
@ -35,6 +37,7 @@
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginBottom="0dp"
android:background="@drawable/fxaccount_password_background"
android:ems="10"
android:hint="@string/fxaccount_password_hint"

Просмотреть файл

@ -22,17 +22,16 @@
<include layout="@layout/fxaccount_custom_server_view" />
<TextView
android:id="@+id/remote_error"
style="@style/FxAccountErrorItem" />
<include layout="@layout/fxaccount_email_password_view" />
<TextView
style="@style/FxAccountTextItem"
android:layout_marginTop="10dp"
android:text="@string/fxaccount_finish_migrating_description" />
<TextView
android:id="@+id/remote_error"
style="@style/FxAccountErrorItem" />
<RelativeLayout style="@style/FxAccountButtonLayout" >
<ProgressBar
@ -41,14 +40,13 @@
<Button
android:id="@+id/button"
style="@style/FxAccountButton"
style="@style/FxAccountProgressButton"
android:text="@string/fxaccount_finish_migrating_button_label" />
</RelativeLayout>
<TextView
android:id="@+id/forgot_password_link"
style="@style/FxAccountLinkifiedItem"
android:layout_marginTop="10dp"
android:text="@string/fxaccount_sign_in_forgot_password" />
<LinearLayout style="@style/FxAccountSpacer" />

Просмотреть файл

@ -9,8 +9,11 @@
android:layout_height="fill_parent"
android:fillViewport="true" >
<!-- In order to animate the icon from the bottom of the screen,
the icon needs to pass over the padding. -->
<LinearLayout
android:id="@+id/intro_view"
android:clipToPadding="false"
style="@style/FxAccountMiddle" >
<LinearLayout style="@style/FxAccountSpacer" />
@ -24,8 +27,8 @@
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="30dp"
android:layout_marginTop="30dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:contentDescription="@string/fxaccount_empty_contentDescription"
android:src="@drawable/fxaccount_intro" >
</ImageView>
@ -48,6 +51,7 @@
<LinearLayout style="@style/FxAccountSpacer" />
<ImageView
android:id="@+id/icon"
style="@style/FxAccountIcon"
android:contentDescription="@string/fxaccount_empty_contentDescription" />
</LinearLayout>

Просмотреть файл

@ -22,13 +22,14 @@
<include layout="@layout/fxaccount_custom_server_view" />
<include layout="@layout/fxaccount_email_password_view" />
<TextView
android:id="@+id/remote_error"
style="@style/FxAccountErrorItem" />
<RelativeLayout style="@style/FxAccountButtonLayout" >
<include layout="@layout/fxaccount_email_password_view" />
<RelativeLayout style="@style/FxAccountButtonLayout"
android:layout_marginTop="10dp" >
<ProgressBar
android:id="@+id/progress"
@ -36,14 +37,14 @@
<Button
android:id="@+id/button"
style="@style/FxAccountButton"
style="@style/FxAccountProgressButton"
android:text="@string/fxaccount_sign_in_button_label" />
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:orientation="horizontal" >
<TextView
@ -65,12 +66,8 @@
<TextView
android:id="@+id/policy"
style="@style/FxAccountLinkifiedItem"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:text="@string/fxaccount_create_account_policy_text"
android:textColorLink="@color/fxaccount_linkified_textColorLinkSubdued" />
style="@style/FxAccountPolicyItem"
android:text="@string/fxaccount_create_account_policy_text" />
<LinearLayout style="@style/FxAccountSpacer" />

Просмотреть файл

@ -22,12 +22,12 @@
<include layout="@layout/fxaccount_custom_server_view" />
<include layout="@layout/fxaccount_email_password_view" />
<TextView
android:id="@+id/remote_error"
style="@style/FxAccountErrorItem" />
<include layout="@layout/fxaccount_email_password_view" />
<RelativeLayout style="@style/FxAccountButtonLayout" >
<ProgressBar
@ -36,14 +36,13 @@
<Button
android:id="@+id/button"
style="@style/FxAccountButton"
style="@style/FxAccountProgressButton"
android:text="@string/fxaccount_update_credentials_button_label" />
</RelativeLayout>
<TextView
android:id="@+id/forgot_password_link"
style="@style/FxAccountLinkifiedItem"
android:layout_marginTop="10dp"
android:text="@string/fxaccount_sign_in_forgot_password" />
<LinearLayout style="@style/FxAccountSpacer" />

Просмотреть файл

@ -5,11 +5,11 @@
<resources>
<dimen name="fxaccount_stroke_width">1dp</dimen>
<dimen name="fxaccount_corner_radius">5dp</dimen>
<dimen name="fxaccount_corner_radius">3dp</dimen>
<!-- The amount of horizontal padding that appears inside the email,
password, etc input fields. -->
<dimen name="fxaccount_input_padding_horizontal">20dp</dimen>
<dimen name="fxaccount_input_padding_horizontal">10dp</dimen>
<!-- And the amount of vertical padding that appears inside input
fields. -->
<dimen name="fxaccount_input_padding_vertical">10dp</dimen>

Просмотреть файл

@ -19,10 +19,10 @@
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_weight">1</item>
<item name="android:paddingTop">30dp</item>
<item name="android:paddingTop">10dp</item>
<item name="android:paddingLeft">20dp</item>
<item name="android:paddingRight">20dp</item>
<item name="android:paddingBottom">30dp</item>
<item name="android:paddingBottom">10dp</item>
</style>
<style name="FxAccountSpacer">
@ -33,8 +33,10 @@
</style>
<style name="FxAccountHeaderItem" parent="@style/FxAccountTextItem">
<item name="android:textSize">28sp</item>
<item name="android:textSize">24sp</item>
<item name="android:layout_marginBottom">20dp</item>
<item name="android:layout_marginLeft">0dp</item>
<item name="android:layout_marginRight">0dp</item>
</style>
<style name="FxAccountTextItem" parent="@android:style/TextAppearance.Medium">
@ -42,8 +44,10 @@
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:textSize">16sp</item>
<item name="android:textSize">14sp</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:layout_marginLeft">10dp</item>
<item name="android:layout_marginRight">10dp</item>
</style>
<style name="FxAccountLinkItem" parent="@style/FxAccountTextItem">
@ -55,15 +59,23 @@
<style name="FxAccountButton" parent="@android:style/Widget.Button">
<item name="android:background">@drawable/fxaccount_button_background</item>
<item name="android:textColor">@drawable/fxaccount_button_color</item>
<item name="android:textSize">24sp</item>
<item name="android:padding">20dp</item>
<item name="android:textSize">20sp</item>
<item name="android:paddingTop">10dp</item>
<item name="android:paddingLeft">20dp</item>
<item name="android:paddingRight">20dp</item>
<item name="android:paddingBottom">10dp</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_marginBottom">10dp</item>
</style>
<!-- Use this in a FxAccountButtonLayout. -->
<style name="FxAccountProgressButton" parent="@style/FxAccountButton">
<item name="android:layout_marginBottom">0dp</item>
</style>
<style name="FxAccountEditItem" parent="@android:style/Widget.EditText">
<item name="android:textSize">20sp</item>
<item name="android:textSize">18sp</item>
<item name="android:paddingLeft">@dimen/fxaccount_input_padding_horizontal</item>
<item name="android:paddingRight">@dimen/fxaccount_input_padding_horizontal</item>
<item name="android:paddingTop">@dimen/fxaccount_input_padding_vertical</item>
@ -71,6 +83,7 @@
<item name="android:background">@drawable/fxaccount_textfield_background</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:singleLine">true</item>
<item name="android:textColor">@color/fxaccount_input_textColor</item>
<item name="android:textColorHint">@color/fxaccount_input_textColorHint</item>
@ -86,8 +99,13 @@
<item name="android:gravity">center</item>
</style>
<style name="FxAccountPolicyItem" parent="@style/FxAccountLinkifiedItem">
<item name="android:layout_marginBottom">20dp</item>
<item name="android:textColorLink">@color/fxaccount_linkified_textColorLinkSubdued</item>
<item name="android:textSize">12sp</item>
</style>
<style name="FxAccountIcon">
<item name="android:layout_marginTop">20dp</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_gravity">center_horizontal</item>
@ -97,7 +115,6 @@
<style name="FxAccountErrorItem">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:layout_marginTop">10dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:background">@drawable/fxaccount_textview_error_background</item>
@ -105,11 +122,11 @@
<item name="android:text">Error</item>
<item name="android:textColor">@android:color/white</item>
<item name="android:textColorLink">@android:color/white</item>
<item name="android:textSize">18sp</item>
<item name="android:textSize">14sp</item>
<item name="android:visibility">invisible</item>
</style>
<style name="FxAccountProgress">
<style name="FxAccountProgress" parent="@android:style/Widget.ProgressBar.Small">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_centerInParent">true</item>
@ -121,6 +138,8 @@
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">@drawable/fxaccount_button_background</item>
<item name="android:layout_marginTop">10dp</item>
<item name="android:layout_marginBottom">10dp</item>
</style>
<style name="FxAccountCheckBox">
@ -137,7 +156,7 @@
<item name="android:paddingLeft">@dimen/fxaccount_show_password_padding_horizontal</item>
<item name="android:paddingRight">@dimen/fxaccount_show_password_padding_horizontal</item>
<item name="android:textColor">@color/fxaccount_input_textColor</item>
<item name="android:textSize">20sp</item>
<item name="android:textSize">16sp</item>
</style>
</resources>
</resources>