Merge branch 'account-input-border-color'

6 files changed, 108 insertions, 12 deletions

diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/AccountInput.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/AccountInput.kt
index b46913790d..eb666dc649 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/AccountInput.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/AccountInput.kt
@@ -2,6 +2,7 @@ package net.mullvad.mullvadvpn
 
 import android.content.Context
 import android.view.View
+import android.view.View.OnFocusChangeListener
 import android.text.Editable
 import android.text.TextWatcher
 import android.widget.EditText
@@ -16,6 +17,10 @@ class AccountInput(val parentView: View, val context: Context) {
     private val enabledTextColor = context.getColor(R.color.blue)
     private val errorTextColor = context.getColor(R.color.red)
 
+    private val resources = context.resources
+    private val focusedBorder = resources.getDrawable(R.drawable.account_input_border_focused, null)
+    private val errorBorder = resources.getDrawable(R.drawable.account_input_border_error, null)
+
     private var usingErrorColor = false
 
     var state = LoginState.Initial
@@ -28,17 +33,24 @@ class AccountInput(val parentView: View, val context: Context) {
             }
         }
 
+    val container: View = parentView.findViewById(R.id.account_input_container)
     val input: EditText = parentView.findViewById(R.id.account_input)
     val button: ImageButton = parentView.findViewById(R.id.login_button)
 
     var onLogin: ((String) -> Unit)? = null
 
     init {
-        input.addTextChangedListener(InputWatcher())
         button.setOnClickListener { onLogin?.invoke(input.text.toString()) }
         setButtonEnabled(false)
 
-        parentView.findViewById<View>(R.id.account_input_container)?.apply {
+        input.apply {
+            addTextChangedListener(InputWatcher())
+            onFocusChangeListener = OnFocusChangeListener { view, hasFocus ->
+                updateBorder(hasFocus && view.isEnabled())
+            }
+        }
+
+        container.apply {
             clipToOutline = true
             outlineProvider = AccountInputOutlineProvider(context)
         }
@@ -49,7 +61,6 @@ class AccountInput(val parentView: View, val context: Context) {
         button.visibility = View.VISIBLE
 
         input.apply {
-            setBackgroundColor(enabledBackgroundColor)
             setTextColor(enabledTextColor)
             setEnabled(true)
             visibility = View.VISIBLE
@@ -61,10 +72,10 @@ class AccountInput(val parentView: View, val context: Context) {
         button.visibility = View.GONE
 
         input.apply {
-            setBackgroundColor(disabledBackgroundColor)
             setTextColor(disabledTextColor)
             setEnabled(false)
             visibility = View.VISIBLE
+            clearFocus()
         }
     }
 
@@ -79,13 +90,14 @@ class AccountInput(val parentView: View, val context: Context) {
         button.visibility = View.VISIBLE
 
         input.apply {
-            setBackgroundColor(enabledBackgroundColor)
+            findFocus()
             setTextColor(errorTextColor)
             setEnabled(true)
             visibility = View.VISIBLE
         }
 
         usingErrorColor = true
+        updateBorder(false)
     }
 
     private fun setButtonEnabled(enabled: Boolean) {
@@ -98,6 +110,18 @@ class AccountInput(val parentView: View, val context: Context) {
         }
     }
 
+    private fun updateBorder(inputHasFocus: Boolean) {
+        if (usingErrorColor) {
+            container.foreground = errorBorder
+        } else {
+            if (inputHasFocus) {
+                container.foreground = focusedBorder
+            } else {
+                container.foreground = null
+            }
+        }
+    }
+
     inner class InputWatcher : TextWatcher {
         override fun beforeTextChanged(text: CharSequence, start: Int, count: Int, after: Int) {}
 
@@ -109,6 +133,7 @@ class AccountInput(val parentView: View, val context: Context) {
             if (usingErrorColor) {
                 input.setTextColor(enabledTextColor)
                 usingErrorColor = false
+                updateBorder(true)
             }
         }
     }
diff --git a/android/src/main/res/drawable/account_input_background.xml b/android/src/main/res/drawable/account_input_background.xml
new file mode 100644
index 0000000000..506f6ae64e
--- /dev/null
+++ b/android/src/main/res/drawable/account_input_background.xml
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector
+        xmlns:android="http://schemas.android.com/apk/res/android"
+        android:shape="rectangle"
+        >
+    <item android:state_enabled="false">
+        <inset
+                android:insetTop="1dp"
+                android:insetBottom="1dp"
+                android:insetLeft="1dp"
+                android:insetRight="1dp"
+                >
+            <shape android:shape="rectangle">
+                <corners android:radius="@dimen/account_input_corner_radius"/>
+                <solid android:color="@color/white20"/>
+            </shape>
+        </inset>
+    </item>
+
+    <item android:state_enabled="true">
+        <inset
+                android:insetTop="1dp"
+                android:insetBottom="1dp"
+                android:insetLeft="1dp"
+                >
+            <shape android:shape="rectangle">
+                <corners
+                        android:bottomLeftRadius="@dimen/account_input_corner_radius"
+                        android:topLeftRadius="@dimen/account_input_corner_radius"
+                        />
+                <solid android:color="@color/white"/>
+            </shape>
+        </inset>
+    </item>
+</selector>
diff --git a/android/src/main/res/drawable/account_input_border_error.xml b/android/src/main/res/drawable/account_input_border_error.xml
new file mode 100644
index 0000000000..33afc1d30c
--- /dev/null
+++ b/android/src/main/res/drawable/account_input_border_error.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape
+        xmlns:android="http://schemas.android.com/apk/res/android"
+        android:shape="rectangle"
+        >
+    <corners android:radius="@dimen/account_input_corner_radius"/>
+    <stroke android:width="2dp" android:color="@color/red"/>
+</shape>
diff --git a/android/src/main/res/drawable/account_input_border_focused.xml b/android/src/main/res/drawable/account_input_border_focused.xml
new file mode 100644
index 0000000000..2bab472ac1
--- /dev/null
+++ b/android/src/main/res/drawable/account_input_border_focused.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape
+        xmlns:android="http://schemas.android.com/apk/res/android"
+        android:shape="rectangle"
+        >
+    <corners android:radius="@dimen/account_input_corner_radius"/>
+    <stroke android:width="2dp" android:color="@color/darkBlue"/>
+</shape>
diff --git a/android/src/main/res/drawable/login_button_background.xml b/android/src/main/res/drawable/login_button_background.xml
index 8622392653..1fa396c74b 100644
--- a/android/src/main/res/drawable/login_button_background.xml
+++ b/android/src/main/res/drawable/login_button_background.xml
@@ -4,14 +4,34 @@
         android:shape="rectangle"
         >
     <item android:state_enabled="false">
-        <shape>
-            <solid android:color="@color/white"/>
-        </shape>
+        <inset
+                android:insetTop="1dp"
+                android:insetBottom="1dp"
+                android:insetRight="1dp"
+                >
+            <shape android:shape="rectangle">
+                <corners
+                        android:bottomRightRadius="@dimen/account_input_corner_radius"
+                        android:topRightRadius="@dimen/account_input_corner_radius"
+                        />
+                <solid android:color="@color/white"/>
+            </shape>
+        </inset>
     </item>
 
     <item android:state_enabled="true">
-        <shape>
-            <solid android:color="@color/green"/>
-        </shape>
+        <inset
+                android:insetTop="1dp"
+                android:insetBottom="1dp"
+                android:insetRight="1dp"
+                >
+            <shape android:shape="rectangle">
+                <corners
+                        android:bottomRightRadius="@dimen/account_input_corner_radius"
+                        android:topRightRadius="@dimen/account_input_corner_radius"
+                        />
+                <solid android:color="@color/green"/>
+            </shape>
+        </inset>
     </item>
 </selector>
diff --git a/android/src/main/res/layout/login.xml b/android/src/main/res/layout/login.xml
index 9c8896024b..c5e59ee407 100644
--- a/android/src/main/res/layout/login.xml
+++ b/android/src/main/res/layout/login.xml
@@ -106,7 +106,7 @@
                     android:layout_height="match_parent"
                     android:layout_weight="1"
                     android:paddingHorizontal="12dp"
-                    android:background="@color/white"
+                    android:background="@drawable/account_input_background"
                     android:inputType="number"
                     android:singleLine="true"
                     android:imeOptions="flagNoPersonalizedLearning"