Allow collapsing and expanding the tunnel info

2 files changed, 54 insertions, 11 deletions

diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/LocationInfo.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/LocationInfo.kt
index 5c47257f86..b6f2aaa9e9 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/LocationInfo.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/LocationInfo.kt
@@ -12,13 +12,16 @@ import net.mullvad.mullvadvpn.model.TunnelState
 class LocationInfo(val parentView: View, val context: Context) {
     private val country: TextView = parentView.findViewById(R.id.country)
     private val city: TextView = parentView.findViewById(R.id.city)
+    private val tunnelInfo: View = parentView.findViewById(R.id.tunnel_info)
     private val hostname: TextView = parentView.findViewById(R.id.hostname)
+    private val chevron: View = parentView.findViewById(R.id.chevron)
     private val protocol: TextView = parentView.findViewById(R.id.tunnel_protocol)
     private val inAddress: TextView = parentView.findViewById(R.id.in_address)
     private val outAddress: TextView = parentView.findViewById(R.id.out_address)
 
     private var endpoint: Endpoint? = null
     private var isTunnelInfoVisible = false
+    private var isTunnelInfoExpanded = false
 
     var location: GeoIpLocation? = null
         set(value) {
@@ -51,6 +54,15 @@ class LocationInfo(val parentView: View, val context: Context) {
             updateTunnelInfo()
         }
 
+    init {
+        tunnelInfo.setOnClickListener { toggleTunnelInfo() }
+    }
+
+    private fun toggleTunnelInfo() {
+        isTunnelInfoExpanded = !isTunnelInfoExpanded
+        updateTunnelInfo()
+    }
+
     private fun updateTunnelInfo() {
         if (isTunnelInfoVisible) {
             showTunnelInfo()
@@ -60,15 +72,27 @@ class LocationInfo(val parentView: View, val context: Context) {
     }
 
     private fun hideTunnelInfo() {
+        chevron.visibility = View.INVISIBLE
+
         protocol.text = ""
         inAddress.text = ""
         outAddress.text = ""
     }
 
     private fun showTunnelInfo() {
-        protocol.setText(R.string.wireguard)
-        showInAddress(endpoint)
-        updateOutAddress(location)
+        chevron.visibility = View.VISIBLE
+
+        if (isTunnelInfoExpanded) {
+            chevron.rotation = 180.0F
+            protocol.setText(R.string.wireguard)
+            showInAddress(endpoint)
+            updateOutAddress(location)
+        } else {
+            chevron.rotation = 0.0F
+            protocol.text = ""
+            inAddress.text = ""
+            outAddress.text = ""
+        }
     }
 
     private fun showInAddress(endpoint: Endpoint?) {
@@ -92,7 +116,7 @@ class LocationInfo(val parentView: View, val context: Context) {
     private fun updateOutAddress(location: GeoIpLocation?) {
         val addressAvailable = location != null && (location.ipv4 != null || location.ipv6 != null)
 
-        if (isTunnelInfoVisible && addressAvailable) {
+        if (isTunnelInfoVisible && addressAvailable && isTunnelInfoExpanded) {
             val ipv4 = location!!.ipv4
             val ipv6 = location.ipv6
             val ipAddress: String
diff --git a/android/src/main/res/layout/connect.xml b/android/src/main/res/layout/connect.xml
index f891b704f5..579e3c6a4e 100644
--- a/android/src/main/res/layout/connect.xml
+++ b/android/src/main/res/layout/connect.xml
@@ -137,13 +137,13 @@
             android:layout_height="wrap_content"
             android:layout_weight="0"
             android:orientation="vertical"
-            android:paddingHorizontal="24dp"
             android:gravity="start"
             >
         <TextView android:id="@+id/connection_status"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_marginBottom="4dp"
+                android:layout_marginHorizontal="24dp"
                 android:textColor="@color/red"
                 android:textSize="16sp"
                 android:textStyle="bold"
@@ -153,6 +153,7 @@
         <TextView android:id="@+id/country"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
+                android:layout_marginHorizontal="24dp"
                 android:textColor="@color/white"
                 android:textSize="34sp"
                 android:textStyle="bold"
@@ -161,6 +162,7 @@
         <TextView android:id="@+id/city"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
+                android:layout_marginHorizontal="24dp"
                 android:textColor="@color/white"
                 android:textSize="34sp"
                 android:textStyle="bold"
@@ -172,16 +174,33 @@
                 android:layout_height="wrap_content"
                 android:layout_weight="0"
                 android:orientation="vertical"
+                android:paddingHorizontal="24dp"
                 android:gravity="start"
+                android:clickable="true"
+                android:background="?android:attr/selectableItemBackground"
                 >
-            <TextView android:id="@+id/hostname"
+            <LinearLayout
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
-                    android:textColor="@color/white"
-                    android:textSize="16sp"
-                    android:textStyle="bold"
-                    android:text=""
-                    />
+                    android:orientation="horizontal"
+                    >
+                <TextView android:id="@+id/hostname"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:textColor="@color/white"
+                        android:textSize="16sp"
+                        android:textStyle="bold"
+                        android:text=""
+                        />
+                <ImageView android:id="@+id/chevron"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_marginHorizontal="5dp"
+                        android:alpha="0.4"
+                        android:src="@drawable/icon_chevron_expand"
+                        />
+            </LinearLayout>
+
             <TextView android:id="@+id/tunnel_protocol"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"