Merge branch 'create-header-bar-widget'

11 files changed, 125 insertions, 182 deletions

diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/ConnectFragment.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/ConnectFragment.kt
index 22ed6c3d39..30794f0eec 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/ConnectFragment.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/ConnectFragment.kt
@@ -4,7 +4,6 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
-import android.widget.ImageButton
 import kotlinx.coroutines.delay
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.model.TunnelState
@@ -12,6 +11,7 @@ import net.mullvad.mullvadvpn.ui.notification.AccountExpiryNotification
 import net.mullvad.mullvadvpn.ui.notification.KeyStatusNotification
 import net.mullvad.mullvadvpn.ui.notification.TunnelStateNotification
 import net.mullvad.mullvadvpn.ui.notification.VersionInfoNotification
+import net.mullvad.mullvadvpn.ui.widget.HeaderBar
 import net.mullvad.mullvadvpn.ui.widget.NotificationBanner
 import org.joda.time.DateTime
 
@@ -42,12 +42,10 @@ class ConnectFragment : ServiceDependentFragment(OnNoService.GoToLaunchScreen) {
         val view = inflater.inflate(R.layout.connect, container, false)
         val resources = parentActivity.resources
 
-        view.findViewById<ImageButton>(R.id.settings).setOnClickListener {
-            parentActivity.openSettings()
+        headerBar = view.findViewById<HeaderBar>(R.id.header_bar).apply {
+            tunnelState = TunnelState.Disconnected()
         }
 
-        headerBar = HeaderBar(view, parentActivity)
-
         notificationBanner = view.findViewById<NotificationBanner>(R.id.notification_banner).apply {
             notifications.apply {
                 register(TunnelStateNotification(parentActivity, connectionProxy))
@@ -132,7 +130,7 @@ class ConnectFragment : ServiceDependentFragment(OnNoService.GoToLaunchScreen) {
 
     private fun updateTunnelState(uiState: TunnelState, realState: TunnelState) {
         locationInfo.state = realState
-        headerBar.setState(realState)
+        headerBar.tunnelState = realState
         status.setState(realState)
 
         actionButton.tunnelState = uiState
diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/HeaderBar.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/HeaderBar.kt
deleted file mode 100644
index 0b2c0f849a..0000000000
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/HeaderBar.kt
+++ /dev/null
@@ -1,37 +0,0 @@
-package net.mullvad.mullvadvpn.ui
-
-import android.content.Context
-import android.view.View
-import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.model.TunnelState
-
-class HeaderBar(val parentView: View, context: Context) {
-    private val headerBar: View = parentView.findViewById(R.id.header_bar)
-
-    private val securedColor = context.getColor(R.color.green)
-    private val unsecuredColor = context.getColor(R.color.red)
-
-    fun setState(state: TunnelState) {
-        when (state) {
-            is TunnelState.Disconnected -> unsecured()
-            is TunnelState.Connecting -> secured()
-            is TunnelState.Connected -> secured()
-            is TunnelState.Disconnecting -> secured()
-            is TunnelState.Error -> {
-                if (state.errorState.isBlocking) {
-                    secured()
-                } else {
-                    unsecured()
-                }
-            }
-        }
-    }
-
-    private fun unsecured() {
-        headerBar.setBackgroundColor(unsecuredColor)
-    }
-
-    private fun secured() {
-        headerBar.setBackgroundColor(securedColor)
-    }
-}
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 8cc64918f5..5d103918d1 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/LoginFragment.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/LoginFragment.kt
@@ -40,8 +40,6 @@ class LoginFragment : ServiceDependentFragment(OnNoService.GoToLaunchScreen) {
     ): View {
         val view = inflater.inflate(R.layout.login, container, false)
 
-        view.findViewById<View>(R.id.settings).setOnClickListener { parentActivity.openSettings() }
-
         title = view.findViewById(R.id.title)
         subtitle = view.findViewById(R.id.subtitle)
         loggingInStatus = view.findViewById(R.id.logging_in_status)
diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/OutOfTimeFragment.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/OutOfTimeFragment.kt
index 7835cd56a8..85b25e74ee 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/OutOfTimeFragment.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/OutOfTimeFragment.kt
@@ -5,10 +5,12 @@ import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import android.widget.TextView
+import kotlin.properties.Delegates.observable
 import kotlinx.coroutines.delay
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.model.TunnelState
 import net.mullvad.mullvadvpn.ui.widget.Button
+import net.mullvad.mullvadvpn.ui.widget.HeaderBar
 import net.mullvad.mullvadvpn.ui.widget.UrlButton
 import net.mullvad.talpid.tunnel.ActionAfterDisconnect
 import org.joda.time.DateTime
@@ -20,13 +22,11 @@ class OutOfTimeFragment : ServiceDependentFragment(OnNoService.GoToLaunchScreen)
     private lateinit var disconnectButton: Button
     private lateinit var redeemButton: Button
 
-    private var tunnelState: TunnelState = TunnelState.Disconnected()
-        set(value) {
-            field = value
-            updateDisconnectButton()
-            updateBuyButtons()
-            headerBar.setState(value)
-        }
+    private var tunnelState by observable<TunnelState>(TunnelState.Disconnected()) { _, _, state ->
+        updateDisconnectButton()
+        updateBuyButtons()
+        headerBar.tunnelState = state
+    }
 
     override fun onSafelyCreateView(
         inflater: LayoutInflater,
@@ -35,12 +35,10 @@ class OutOfTimeFragment : ServiceDependentFragment(OnNoService.GoToLaunchScreen)
     ): View {
         val view = inflater.inflate(R.layout.out_of_time, container, false)
 
-        view.findViewById<View>(R.id.settings).setOnClickListener {
-            parentActivity.openSettings()
+        headerBar = view.findViewById<HeaderBar>(R.id.header_bar).apply {
+            tunnelState = this@OutOfTimeFragment.tunnelState
         }
 
-        headerBar = HeaderBar(view, parentActivity)
-
         view.findViewById<TextView>(R.id.no_more_vpn_time_left).text =
             parentActivity.getString(R.string.no_more_vpn_time_left) + " " +
             parentActivity.getString(R.string.add_time_to_account)
diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/WelcomeFragment.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/WelcomeFragment.kt
index 261630e784..7c19f02098 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/WelcomeFragment.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/WelcomeFragment.kt
@@ -11,7 +11,9 @@ import android.widget.TextView
 import android.widget.Toast
 import kotlinx.coroutines.delay
 import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.model.TunnelState
 import net.mullvad.mullvadvpn.ui.widget.Button
+import net.mullvad.mullvadvpn.ui.widget.HeaderBar
 import net.mullvad.mullvadvpn.ui.widget.UrlButton
 import org.joda.time.DateTime
 
@@ -27,8 +29,8 @@ class WelcomeFragment : ServiceDependentFragment(OnNoService.GoToLaunchScreen) {
     ): View {
         val view = inflater.inflate(R.layout.welcome, container, false)
 
-        view.findViewById<View>(R.id.settings).setOnClickListener {
-            parentActivity.openSettings()
+        view.findViewById<HeaderBar>(R.id.header_bar).apply {
+            tunnelState = TunnelState.Disconnected()
         }
 
         accountLabel = view.findViewById<TextView>(R.id.account_number).apply {
diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/HeaderBar.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/HeaderBar.kt
new file mode 100644
index 0000000000..dbe09ff34b
--- /dev/null
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/HeaderBar.kt
@@ -0,0 +1,70 @@
+package net.mullvad.mullvadvpn.ui.widget
+
+import android.content.Context
+import android.util.AttributeSet
+import android.view.Gravity
+import android.view.LayoutInflater
+import android.view.View
+import android.widget.LinearLayout
+import kotlin.properties.Delegates.observable
+import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.model.TunnelState
+import net.mullvad.mullvadvpn.ui.MainActivity
+
+class HeaderBar : LinearLayout {
+    private val container =
+        context.getSystemService(Context.LAYOUT_INFLATER_SERVICE).let { service ->
+            val inflater = service as LayoutInflater
+
+            inflater.inflate(R.layout.header_bar, this)
+        }
+
+    private val disabledColor = context.getColor(android.R.color.transparent)
+    private val securedColor = context.getColor(R.color.green)
+    private val unsecuredColor = context.getColor(R.color.red)
+
+    var tunnelState by observable<TunnelState?>(null) { _, _, state ->
+        val backgroundColor = when (state) {
+            null -> disabledColor
+            is TunnelState.Disconnected -> unsecuredColor
+            is TunnelState.Connecting -> securedColor
+            is TunnelState.Connected -> securedColor
+            is TunnelState.Disconnecting -> securedColor
+            is TunnelState.Error -> {
+                if (state.errorState.isBlocking) {
+                    securedColor
+                } else {
+                    unsecuredColor
+                }
+            }
+        }
+
+        container.setBackgroundColor(backgroundColor)
+    }
+
+    constructor(context: Context) : super(context) {}
+
+    constructor(context: Context, attributes: AttributeSet) : super(context, attributes) {}
+
+    constructor(
+        context: Context,
+        attributes: AttributeSet,
+        defaultStyleAttribute: Int
+    ) : super(context, attributes, defaultStyleAttribute) {}
+
+    constructor(
+        context: Context,
+        attributes: AttributeSet,
+        defaultStyleAttribute: Int,
+        defaultStyleResource: Int
+    ) : super(context, attributes, defaultStyleAttribute, defaultStyleResource) {}
+
+    init {
+        gravity = Gravity.CENTER_VERTICAL
+        orientation = HORIZONTAL
+
+        findViewById<View>(R.id.settings).setOnClickListener {
+            (context as? MainActivity)?.openSettings()
+        }
+    }
+}
diff --git a/android/src/main/res/layout/connect.xml b/android/src/main/res/layout/connect.xml
index 2d7877cf2b..789f82e6da 100644
--- a/android/src/main/res/layout/connect.xml
+++ b/android/src/main/res/layout/connect.xml
@@ -3,37 +3,10 @@
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:orientation="vertical">
-    <LinearLayout android:id="@+id/header_bar"
-                  android:layout_width="match_parent"
-                  android:layout_height="wrap_content"
-                  android:orientation="horizontal"
-                  android:gravity="center_vertical"
-                  android:background="@color/red"
-                  android:elevation="0.5dp">
-        <ImageView android:layout_width="50dp"
-                   android:layout_height="50dp"
-                   android:layout_marginLeft="12dp"
-                   android:layout_marginVertical="12dp"
-                   android:layout_weight="0"
-                   android:src="@drawable/logo_icon" />
-        <TextView android:layout_width="wrap_content"
-                  android:layout_height="wrap_content"
-                  android:layout_marginHorizontal="8dp"
-                  android:layout_marginVertical="12dp"
-                  android:layout_weight="1"
-                  android:textColor="@color/white80"
-                  android:textSize="24sp"
-                  android:textStyle="bold"
-                  android:text="@string/app_name"
-                  android:textAllCaps="true" />
-        <ImageButton android:id="@+id/settings"
-                     android:layout_width="wrap_content"
-                     android:layout_height="match_parent"
-                     android:layout_weight="0"
-                     android:paddingHorizontal="12dp"
-                     android:background="?android:attr/selectableItemBackground"
-                     android:src="@drawable/icon_settings" />
-    </LinearLayout>
+    <net.mullvad.mullvadvpn.ui.widget.HeaderBar android:id="@+id/header_bar"
+                                                android:layout_width="match_parent"
+                                                android:layout_height="wrap_content"
+                                                android:elevation="0.5dp" />
     <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent"
                                                      android:layout_height="match_parent">
         <net.mullvad.mullvadvpn.ui.widget.NotificationBanner android:id="@+id/notification_banner"
diff --git a/android/src/main/res/layout/header_bar.xml b/android/src/main/res/layout/header_bar.xml
new file mode 100644
index 0000000000..9963893abf
--- /dev/null
+++ b/android/src/main/res/layout/header_bar.xml
@@ -0,0 +1,25 @@
+<merge xmlns:android="http://schemas.android.com/apk/res/android">
+    <ImageView android:layout_width="50dp"
+               android:layout_height="50dp"
+               android:layout_marginLeft="12dp"
+               android:layout_marginVertical="12dp"
+               android:layout_weight="0"
+               android:src="@drawable/logo_icon" />
+    <TextView android:layout_width="wrap_content"
+              android:layout_height="wrap_content"
+              android:layout_marginHorizontal="8dp"
+              android:layout_marginVertical="12dp"
+              android:layout_weight="1"
+              android:textColor="@color/white80"
+              android:textSize="24sp"
+              android:textStyle="bold"
+              android:text="@string/app_name"
+              android:textAllCaps="true" />
+    <ImageButton android:id="@+id/settings"
+                 android:layout_width="wrap_content"
+                 android:layout_height="match_parent"
+                 android:layout_weight="0"
+                 android:paddingHorizontal="12dp"
+                 android:background="?android:attr/selectableItemBackground"
+                 android:src="@drawable/icon_settings" />
+</merge>
diff --git a/android/src/main/res/layout/login.xml b/android/src/main/res/layout/login.xml
index 0c4cd93fdb..fa96ddf91c 100644
--- a/android/src/main/res/layout/login.xml
+++ b/android/src/main/res/layout/login.xml
@@ -7,35 +7,9 @@
     <LinearLayout android:layout_width="match_parent"
                   android:layout_height="match_parent"
                   android:orientation="vertical">
-        <LinearLayout android:layout_width="match_parent"
-                      android:layout_height="wrap_content"
-                      android:layout_weight="0"
-                      android:orientation="horizontal"
-                      android:gravity="center_vertical">
-            <ImageView android:layout_width="50dp"
-                       android:layout_height="50dp"
-                       android:layout_weight="0"
-                       android:layout_marginLeft="12dp"
-                       android:layout_marginVertical="12dp"
-                       android:src="@drawable/logo_icon" />
-            <TextView android:layout_width="wrap_content"
-                      android:layout_height="wrap_content"
-                      android:layout_weight="1"
-                      android:layout_marginHorizontal="8dp"
-                      android:layout_marginVertical="12dp"
-                      android:textColor="@color/white60"
-                      android:textSize="24sp"
-                      android:textStyle="bold"
-                      android:text="@string/app_name"
-                      android:textAllCaps="true" />
-            <ImageButton android:id="@+id/settings"
-                         android:layout_width="wrap_content"
-                         android:layout_height="match_parent"
-                         android:layout_weight="0"
-                         android:paddingHorizontal="12dp"
-                         android:background="?android:attr/selectableItemBackground"
-                         android:src="@drawable/icon_settings" />
-        </LinearLayout>
+        <net.mullvad.mullvadvpn.ui.widget.HeaderBar android:id="@+id/header_bar"
+                                                    android:layout_width="match_parent"
+                                                    android:layout_height="wrap_content" />
         <LinearLayout android:layout_width="match_parent"
                       android:layout_height="wrap_content"
                       android:layout_weight="1"
diff --git a/android/src/main/res/layout/out_of_time.xml b/android/src/main/res/layout/out_of_time.xml
index 150a86787e..6fda6d9be0 100644
--- a/android/src/main/res/layout/out_of_time.xml
+++ b/android/src/main/res/layout/out_of_time.xml
@@ -2,38 +2,9 @@
                 xmlns:mullvad="http://schemas.android.com/apk/res-auto"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent">
-    <LinearLayout android:id="@+id/header_bar"
-                  android:layout_width="match_parent"
-                  android:layout_height="wrap_content"
-                  android:layout_weight="0"
-                  android:orientation="horizontal"
-                  android:gravity="center_vertical"
-                  android:background="@color/red"
-                  android:elevation="0.5dp">
-        <ImageView android:layout_width="50dp"
-                   android:layout_height="50dp"
-                   android:layout_marginLeft="12dp"
-                   android:layout_marginVertical="12dp"
-                   android:layout_weight="0"
-                   android:src="@drawable/logo_icon" />
-        <TextView android:layout_width="wrap_content"
-                  android:layout_height="wrap_content"
-                  android:layout_marginHorizontal="8dp"
-                  android:layout_marginVertical="12dp"
-                  android:layout_weight="1"
-                  android:textColor="@color/white80"
-                  android:textSize="24sp"
-                  android:textStyle="bold"
-                  android:text="@string/app_name"
-                  android:textAllCaps="true" />
-        <ImageButton android:id="@+id/settings"
-                     android:layout_width="wrap_content"
-                     android:layout_height="match_parent"
-                     android:layout_weight="0"
-                     android:paddingHorizontal="12dp"
-                     android:background="?android:attr/selectableItemBackground"
-                     android:src="@drawable/icon_settings" />
-    </LinearLayout>
+    <net.mullvad.mullvadvpn.ui.widget.HeaderBar android:id="@+id/header_bar"
+                                                android:layout_width="match_parent"
+                                                android:layout_height="wrap_content" />
     <ScrollView android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:layout_alignParentBottom="true"
diff --git a/android/src/main/res/layout/welcome.xml b/android/src/main/res/layout/welcome.xml
index 147e0b3294..5ce39f65a9 100644
--- a/android/src/main/res/layout/welcome.xml
+++ b/android/src/main/res/layout/welcome.xml
@@ -2,38 +2,9 @@
                 xmlns:mullvad="http://schemas.android.com/apk/res-auto"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent">
-    <LinearLayout android:id="@+id/header_bar"
-                  android:layout_width="match_parent"
-                  android:layout_height="wrap_content"
-                  android:layout_alignParentTop="true"
-                  android:orientation="horizontal"
-                  android:gravity="center_vertical"
-                  android:background="@color/red"
-                  android:elevation="0.5dp">
-        <ImageView android:layout_width="50dp"
-                   android:layout_height="50dp"
-                   android:layout_marginLeft="12dp"
-                   android:layout_marginVertical="12dp"
-                   android:layout_weight="0"
-                   android:src="@drawable/logo_icon" />
-        <TextView android:layout_width="wrap_content"
-                  android:layout_height="wrap_content"
-                  android:layout_marginHorizontal="8dp"
-                  android:layout_marginVertical="12dp"
-                  android:layout_weight="1"
-                  android:textColor="@color/white80"
-                  android:textSize="24sp"
-                  android:textStyle="bold"
-                  android:text="@string/app_name"
-                  android:textAllCaps="true" />
-        <ImageButton android:id="@+id/settings"
-                     android:layout_width="wrap_content"
-                     android:layout_height="match_parent"
-                     android:layout_weight="0"
-                     android:paddingHorizontal="12dp"
-                     android:background="?android:attr/selectableItemBackground"
-                     android:src="@drawable/icon_settings" />
-    </LinearLayout>
+    <net.mullvad.mullvadvpn.ui.widget.HeaderBar android:id="@+id/header_bar"
+                                                android:layout_width="match_parent"
+                                                android:layout_height="wrap_content" />
     <ScrollView android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:layout_alignParentBottom="true"