Merge branch 'change-account-history-animation'

9 files changed, 136 insertions, 85 deletions

diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/LoginFragment.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/LoginFragment.kt
index 0deaff3ed8..85f2da5e61 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/LoginFragment.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/LoginFragment.kt
@@ -55,6 +55,10 @@ class LoginFragment : ServiceDependentFragment(OnNoService.GoToLaunchScreen) {
 
         scrollArea = view.findViewById(R.id.scroll_area)
 
+        view.findViewById<View>(R.id.contents).setOnClickListener {
+            accountLogin.clearFocus()
+        }
+
         fetchHistory()
         scrollToShow(accountLogin)
 
diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountLogin.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountLogin.kt
index c2acd6a924..131d9c0c65 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountLogin.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountLogin.kt
@@ -1,9 +1,14 @@
 package net.mullvad.mullvadvpn.ui.widget
 
+import android.animation.ValueAnimator
+import android.app.Activity
 import android.content.Context
 import android.util.AttributeSet
 import android.view.LayoutInflater
 import android.view.View
+import android.view.View.OnLayoutChangeListener
+import android.view.ViewGroup.MarginLayoutParams
+import android.view.inputmethod.InputMethodManager
 import android.widget.ArrayAdapter
 import android.widget.ListView
 import android.widget.RelativeLayout
@@ -24,40 +29,68 @@ class AccountLogin : RelativeLayout {
     private val accountHistoryList: ListView = container.findViewById(R.id.history)
     private val input: AccountInput = container.findViewById(R.id.input)
 
-    private var shouldShowAccountHistory = false
-        set(value) {
-            synchronized(this) {
-                field = value
-                updateAccountHistory()
-            }
+    private val dividerHeight = resources.getDimensionPixelSize(R.dimen.account_history_divider)
+    private val historyEntryHeight =
+        resources.getDimensionPixelSize(R.dimen.account_history_entry_height)
+
+    private val historyAnimation = ValueAnimator.ofInt(0, 0).apply {
+        addUpdateListener { animation ->
+            updateHeight(animation.animatedValue as Int)
+        }
+
+        duration = 350
+    }
+
+    private val expandedHeight: Int
+        get() = collapsedHeight + historyHeight
+
+    private var historyHeight by observable(0) { _, oldHistoryHeight, newHistoryHeight ->
+        if (newHistoryHeight != oldHistoryHeight) {
+            historyAnimation.setIntValues(collapsedHeight, expandedHeight)
+            reposition()
+        }
+    }
+
+    private var collapsedHeight by observable(0) { _, oldCollapsedHeight, newCollapsedHeight ->
+        if (newCollapsedHeight != oldCollapsedHeight) {
+            historyAnimation.setIntValues(newCollapsedHeight, expandedHeight)
+            reposition()
         }
+    }
 
     private var inputHasFocus by observable(false) { _, _, hasFocus ->
         updateBorder()
+        shouldShowAccountHistory = hasFocus
 
-        if (hasFocus) {
-            shouldShowAccountHistory = true
+        if (!hasFocus) {
+            hideKeyboard()
         }
     }
 
-    var accountHistory: ArrayList<String>? = null
-        set(value) {
-            synchronized(this) {
-                field = value
-                updateAccountHistory()
+    private var shouldShowAccountHistory by observable(false) { _, isShown, show ->
+        if (isShown != show) {
+            if (show) {
+                historyAnimation.start()
+            } else {
+                historyAnimation.reverse()
             }
         }
+    }
+
+    var accountHistory by observable<ArrayList<String>?>(null) { _, _, history ->
+        val entryCount = history?.size ?: 0
+
+        historyHeight = entryCount * (historyEntryHeight + dividerHeight)
+        updateAccountHistory()
+    }
 
     var state: LoginState by observable(LoginState.Initial) { _, _, newState ->
         input.loginState = newState
 
         updateBorder()
 
-        when (newState) {
-            LoginState.Initial -> {}
-            LoginState.InProgress -> loggingInState()
-            LoginState.Success -> successState()
-            LoginState.Failure -> {}
+        if (newState == LoginState.Success) {
+            visibility = View.INVISIBLE
         }
     }
 
@@ -81,6 +114,8 @@ class AccountLogin : RelativeLayout {
     }
 
     init {
+        border.elevation = elevation + 0.1f
+
         input.apply {
             onFocusChanged.subscribe(this) { hasFocus ->
                 inputHasFocus = hasFocus
@@ -91,6 +126,12 @@ class AccountLogin : RelativeLayout {
                     state = LoginState.Initial
                 }
             }
+
+            addOnLayoutChangeListener(
+                OnLayoutChangeListener { _, _, top, _, bottom, _, _, _, _ ->
+                    collapsedHeight = bottom - top
+                }
+            )
         }
     }
 
@@ -99,14 +140,6 @@ class AccountLogin : RelativeLayout {
         input.onTextChanged.unsubscribe(this)
     }
 
-    private fun loggingInState() {
-        accountHistoryList.visibility = View.INVISIBLE
-    }
-
-    private fun successState() {
-        visibility = View.INVISIBLE
-    }
-
     private fun updateAccountHistory() {
         accountHistory?.let { history ->
             accountHistoryList.apply {
@@ -123,12 +156,6 @@ class AccountLogin : RelativeLayout {
                     input.loginWith(history[idx])
                 }
             }
-
-            if (shouldShowAccountHistory && accountHistoryList.visibility != View.VISIBLE) {
-                accountHistoryList.visibility = View.VISIBLE
-                accountHistoryList.translationY = -accountHistoryList.height.toFloat()
-                accountHistoryList.animate().translationY(0.0F).setDuration(350).start()
-            }
         }
     }
 
@@ -141,4 +168,30 @@ class AccountLogin : RelativeLayout {
             border.borderState = BorderState.UNFOCUSED
         }
     }
+
+    private fun updateHeight(height: Int) {
+        val layoutParams = container.layoutParams as MarginLayoutParams
+
+        layoutParams.height = height
+        layoutParams.bottomMargin = expandedHeight - height
+
+        container.layoutParams = layoutParams
+    }
+
+    private fun reposition() {
+        historyAnimation.end()
+
+        if (shouldShowAccountHistory) {
+            updateHeight(expandedHeight)
+        } else {
+            updateHeight(collapsedHeight)
+        }
+    }
+
+    private fun hideKeyboard() {
+        val inputManagerId = Activity.INPUT_METHOD_SERVICE
+        val inputManager = context.getSystemService(inputManagerId) as InputMethodManager
+
+        inputManager.hideSoftInputFromWindow(windowToken, 0)
+    }
 }
diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountLoginBorder.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountLoginBorder.kt
index ee29ef9be0..e5ee732e08 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountLoginBorder.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountLoginBorder.kt
@@ -72,20 +72,6 @@ class AccountLoginBorder : RelativeLayout {
             }
         }
 
-    init {
-        val borderElevation = elevation + 0.1f
-
-        topLeftCorner.elevation = borderElevation
-        topRightCorner.elevation = borderElevation
-        bottomLeftCorner.elevation = borderElevation
-        bottomRightCorner.elevation = borderElevation
-
-        topBorder.elevation = borderElevation
-        leftBorder.elevation = borderElevation
-        rightBorder.elevation = borderElevation
-        bottomBorder.elevation = borderElevation
-    }
-
     constructor(context: Context) : super(context) {}
 
     constructor(context: Context, attributes: AttributeSet) : super(context, attributes) {}
diff --git a/android/src/main/res/drawable/account_history_background.xml b/android/src/main/res/drawable/account_history_background.xml
deleted file mode 100644
index 596eb2d43d..0000000000
--- a/android/src/main/res/drawable/account_history_background.xml
+++ /dev/null
@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-    <item>
-        <shape xmlns:android="http://schemas.android.com/apk/res/android">
-            <corners android:radius="@dimen/account_login_corner_radius" />
-            <solid android:color="@color/darkBlue" />
-        </shape>
-    </item>
-    <item android:top="0dp"
-          android:right="1dp"
-          android:bottom="1dp"
-          android:left="1dp">
-        <shape xmlns:android="http://schemas.android.com/apk/res/android">
-            <corners android:radius="@dimen/account_login_corner_radius" />
-            <solid android:color="@color/white" />
-        </shape>
-    </item>
-</layer-list>
diff --git a/android/src/main/res/drawable/account_history_entry_background.xml b/android/src/main/res/drawable/account_history_entry_background.xml
new file mode 100644
index 0000000000..ea25d2b72a
--- /dev/null
+++ b/android/src/main/res/drawable/account_history_entry_background.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android"
+          android:shape="rectangle">
+    <item android:state_pressed="false"
+          android:state_focused="false">
+        <shape android:shape="rectangle">
+            <solid android:color="@color/white60" />
+        </shape>
+    </item>
+    <item android:state_pressed="true">
+        <shape android:shape="rectangle">
+            <solid android:color="@color/white40" />
+        </shape>
+    </item>
+    <item android:state_focused="true">
+        <shape android:shape="rectangle">
+            <solid android:color="@color/white40" />
+        </shape>
+    </item>
+</selector>
diff --git a/android/src/main/res/layout/account_history_entry.xml b/android/src/main/res/layout/account_history_entry.xml
index 1860a96262..440cce957d 100644
--- a/android/src/main/res/layout/account_history_entry.xml
+++ b/android/src/main/res/layout/account_history_entry.xml
@@ -1,12 +1,14 @@
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
               android:layout_width="match_parent"
-              android:layout_height="wrap_content"
+              android:layout_height="@dimen/account_history_entry_height"
               android:orientation="vertical">
     <TextView android:id="@+id/account_history_entry_text_view"
-              android:layout_width="fill_parent"
-              android:layout_height="wrap_content"
-              android:textColor="@color/blue"
-              android:padding="10dip"
-              android:textSize="@dimen/text_medium"
+              android:layout_width="match_parent"
+              android:layout_height="match_parent"
+              android:background="@drawable/account_history_entry_background"
+              android:paddingHorizontal="12dp"
+              android:gravity="center_vertical"
+              android:textColor="@color/blue80"
+              android:textSize="@dimen/text_medium_plus"
               android:textStyle="bold" />
 </LinearLayout>
diff --git a/android/src/main/res/layout/account_login.xml b/android/src/main/res/layout/account_login.xml
index b64a52d6e6..43d76c89e6 100644
--- a/android/src/main/res/layout/account_login.xml
+++ b/android/src/main/res/layout/account_login.xml
@@ -1,20 +1,18 @@
 <merge xmlns:android="http://schemas.android.com/apk/res/android">
     <net.mullvad.mullvadvpn.ui.widget.AccountLoginBorder android:id="@+id/border"
                                                          android:layout_width="match_parent"
-                                                         android:layout_height="48dp"
-                                                         android:layout_alignParentTop="true">
-        <net.mullvad.mullvadvpn.ui.widget.AccountInput android:id="@+id/input"
-                                                       android:layout_width="match_parent"
-                                                       android:layout_height="48dp"
-                                                       android:layout_alignParentTop="true"
-                                                       android:orientation="horizontal" />
-    </net.mullvad.mullvadvpn.ui.widget.AccountLoginBorder>
+                                                         android:layout_height="wrap_content"
+                                                         android:layout_alignParentTop="true"
+                                                         android:layout_alignParentBottom="true" />
+    <net.mullvad.mullvadvpn.ui.widget.AccountInput android:id="@+id/input"
+                                                   android:layout_width="match_parent"
+                                                   android:layout_height="48dp"
+                                                   android:layout_alignParentTop="true"
+                                                   android:orientation="horizontal" />
     <ListView android:id="@+id/history"
               android:layout_width="fill_parent"
               android:layout_height="wrap_content"
-              android:layout_below="@id/border"
+              android:layout_below="@id/input"
               android:divider="@drawable/account_history_list_divider"
-              android:dividerHeight="1dp"
-              android:visibility="invisible"
-              android:background="@drawable/account_history_background" />
+              android:dividerHeight="@dimen/account_history_divider" />
 </merge>
diff --git a/android/src/main/res/layout/login.xml b/android/src/main/res/layout/login.xml
index 4510d0c627..0f34a409c6 100644
--- a/android/src/main/res/layout/login.xml
+++ b/android/src/main/res/layout/login.xml
@@ -4,9 +4,13 @@
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:fillViewport="true">
-    <LinearLayout android:layout_width="match_parent"
+    <LinearLayout android:id="@+id/contents"
+                  android:layout_width="match_parent"
                   android:layout_height="match_parent"
-                  android:orientation="vertical">
+                  android:orientation="vertical"
+                  android:focusable="true"
+                  android:focusableInTouchMode="true"
+                  android:descendantFocusability="beforeDescendants">
         <net.mullvad.mullvadvpn.ui.widget.HeaderBar android:id="@+id/header_bar"
                                                     android:layout_width="match_parent"
                                                     android:layout_height="wrap_content" />
@@ -66,7 +70,7 @@
                       android:text="@string/login_description" />
             <net.mullvad.mullvadvpn.ui.widget.AccountLogin android:id="@+id/account_login"
                                                            android:layout_width="match_parent"
-                                                           android:layout_height="wrap_content" />
+                                                           android:layout_height="@dimen/account_history_entry_height" />
             <Space android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="3" />
diff --git a/android/src/main/res/values/dimensions.xml b/android/src/main/res/values/dimensions.xml
index 692fba86e4..235c3d94b3 100644
--- a/android/src/main/res/values/dimensions.xml
+++ b/android/src/main/res/values/dimensions.xml
@@ -6,6 +6,8 @@
     <dimen name="dialog_margin">14dp</dimen>
     <dimen name="account_login_corner_radius">4dp</dimen>
     <dimen name="account_login_border_width">2dp</dimen>
+    <dimen name="account_history_divider">1dp</dimen>
+    <dimen name="account_history_entry_height">48dp</dimen>
     <dimen name="edit_text_corner_radius">4dp</dimen>
     <dimen name="button_height">44dp</dimen>
     <dimen name="cell_switch_border_radius">16dp</dimen>