UX improvements (#275)

* Add icon for non-https transactions * Update secondary color to be more contrast * Simplify protocol resources setting
ChuckerTeam · Mar 19, 2020 · 73ddd2a · 73ddd2a
1 parent d14ed64
commit 73ddd2a
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 11 deletions.
diff --git a/library/src/main/java/com/chuckerteam/chucker/internal/ui/transaction/ProtocolResources.kt b/library/src/main/java/com/chuckerteam/chucker/internal/ui/transaction/ProtocolResources.kt
@@ -0,0 +1,10 @@
+package com.chuckerteam.chucker.internal.ui.transaction
+
+import androidx.annotation.ColorRes
+import androidx.annotation.DrawableRes
+import com.chuckerteam.chucker.R
+
+sealed class ProtocolResources(@DrawableRes val icon: Int, @ColorRes val color: Int) {
+ class Http : ProtocolResources(R.drawable.chucker_ic_http, R.color.chucker_color_error)
+ class Https : ProtocolResources(R.drawable.chucker_ic_https, R.color.chucker_color_primary)
+}
diff --git a/library/src/main/java/com/chuckerteam/chucker/internal/ui/transaction/TransactionAdapter.kt b/library/src/main/java/com/chuckerteam/chucker/internal/ui/transaction/TransactionAdapter.kt
@@ -2,10 +2,13 @@ package com.chuckerteam.chucker.internal.ui.transaction
 
 import android.annotation.SuppressLint
 import android.content.Context
+import android.content.res.ColorStateList
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import androidx.appcompat.content.res.AppCompatResources
 import androidx.core.content.ContextCompat
+import androidx.core.widget.ImageViewCompat
 import androidx.recyclerview.widget.RecyclerView
 import com.chuckerteam.chucker.R
 import com.chuckerteam.chucker.databinding.ChuckerListItemTransactionBinding
@@ -52,6 +55,12 @@ internal class TransactionAdapter internal constructor(
  itemView.setOnClickListener(this)
  }
 
+ override fun onClick(v: View?) {
+ transactionId?.let {
+ listener?.onTransactionClick(it, adapterPosition)
+ }
+ }
+
  @SuppressLint("SetTextI18n")
  fun bind(transaction: HttpTransactionTuple) {
  transactionId = transaction.id
@@ -60,7 +69,8 @@ internal class TransactionAdapter internal constructor(
  path.text = "${transaction.method} ${transaction.getFormattedPath(encode = false)}"
  host.text = transaction.host
  timeStart.text = DateFormat.getTimeInstance().format(transaction.requestDate)
- ssl.visibility = if (transaction.isSsl) View.VISIBLE else View.GONE
+
+ setProtocolImage(if (transaction.isSsl) ProtocolResources.Https() else ProtocolResources.Http())
 
  if (transaction.status === HttpTransaction.Status.Complete) {
  code.text = transaction.responseCode.toString()
@@ -79,10 +89,12 @@ internal class TransactionAdapter internal constructor(
  setStatusColor(transaction)
  }
 
- override fun onClick(v: View?) {
- transactionId?.let {
- listener?.onTransactionClick(it, adapterPosition)
- }
+ private fun setProtocolImage(resources: ProtocolResources) {
+ itemBinding.ssl.setImageDrawable(AppCompatResources.getDrawable(itemView.context, resources.icon))
+ ImageViewCompat.setImageTintList(
+ itemBinding.ssl,
+ ColorStateList.valueOf(ContextCompat.getColor(itemView.context, resources.color))
+ )
  }
 
  private fun setStatusColor(transaction: HttpTransactionTuple) {

diff --git a/library/src/main/res/drawable/chucker_ic_http.xml b/library/src/main/res/drawable/chucker_ic_http.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+ android:width="24dp"
+ android:height="24dp"
+ android:viewportWidth="24"
+ android:viewportHeight="24">
+ <path
+ android:fillColor="#fff"
+ android:pathData="M18 1C15.24 1 13 3.24 13 6V8H4C2.9 8 2 8.89 2 10V20C2 21.11 2.9 22 4 22H16C17.11 22 18 21.11 18 20V10C18 8.9 17.11 8 16 8H15V6C15 4.34 16.34 3 18 3C19.66 3 21 4.34 21 6V8H23V6C23 3.24 20.76 1 18 1M10 13C11.1 13 12 13.89 12 15C12 16.11 11.11 17 10 17C8.9 17 8 16.11 8 15C8 13.9 8.9 13 10 13Z" />
+</vector>
diff --git a/...res/drawable/chucker_ic_https_primary.xml → ...rc/main/res/drawable/chucker_ic_https.xml b/...res/drawable/chucker_ic_https_primary.xml → ...rc/main/res/drawable/chucker_ic_https.xml
diff --git a/library/src/main/res/layout/chucker_list_item_transaction.xml b/library/src/main/res/layout/chucker_list_item_transaction.xml
@@ -52,13 +52,10 @@
  android:layout_width="@dimen/chucker_doub_grid"
  android:layout_height="@dimen/chucker_doub_grid"
  android:contentDescription="@string/chucker_ssl"
- android:src="@drawable/chucker_ic_https_primary"
- android:tint="@color/chucker_color_primary"
- android:visibility="gone"
  app:layout_constraintStart_toStartOf="@+id/path"
  app:layout_constraintTop_toTopOf="@+id/host"
  app:layout_constraintBottom_toBottomOf="@id/host"
- tools:visibility="visible" />
+ tools:src="@drawable/chucker_ic_https" />
 
  <TextView
  android:id="@+id/timeStart"

diff --git a/library/src/main/res/values-night/colors.xml b/library/src/main/res/values-night/colors.xml
@@ -4,7 +4,7 @@
  <color name="chucker_color_primary_variant">#121212</color>
  <color name="chucker_color_background">#121212</color>
  <color name="chucker_color_surface">#121212</color>
- <color name="chucker_color_secondary">#69f0ae</color>
+ <color name="chucker_color_secondary">#59CC94</color>
  <color name="chucker_color_error">#cf6679</color>
  <color name="chucker_color_on_primary">#000000</color>
  <color name="chucker_color_on_secondary">#000000</color>

diff --git a/library/src/main/res/values/colors.xml b/library/src/main/res/values/colors.xml
@@ -4,7 +4,7 @@
  <color name="chucker_color_primary_variant">#002f6c</color>
  <color name="chucker_color_background">#ffffff</color>
  <color name="chucker_color_surface">#ffffff</color>
- <color name="chucker_color_secondary">#00e676</color>
+ <color name="chucker_color_secondary">#009E09</color>
  <color name="chucker_color_error">#F44336</color>
  <color name="chucker_color_on_primary">#ffffff</color>
  <color name="chucker_color_on_secondary">#000000</color>