From 5256e85641b8bbbdd0a9e6fd7e056680fd8a94de Mon Sep 17 00:00:00 2001
From: Phillip Thelen <phillip@habitica.com>
Date: Fri, 20 May 2022 10:51:32 +0200
Subject: [PATCH] Improve bottom sheet design and behaviour

---
 Habitica/res/layout/bottom_sheet_wrapper.xml  | 10 ++--
 Habitica/res/layout/menu_bottom_sheet.xml     |  9 ++-
 .../res/layout/menu_bottom_sheet_item.xml     |  5 +-
 Habitica/res/values/dimens.xml                |  2 +-
 Habitica/res/values/styles.xml                |  6 +-
 .../adapter/inventory/ItemRecyclerAdapter.kt  | 55 ++++++++++---------
 .../ui/fragments/tasks/TasksFragment.kt       |  4 +-
 .../habitica/ui/menu/BottomSheetMenu.kt       |  8 ++-
 .../habitica/ui/menu/BottomSheetMenuItem.kt   |  3 +-
 .../ui/viewHolders/MountViewHolder.kt         |  1 +
 .../habitica/ui/viewHolders/PetViewHolder.kt  |  1 +
 11 files changed, 68 insertions(+), 36 deletions(-)

diff --git a/Habitica/res/layout/bottom_sheet_wrapper.xml b/Habitica/res/layout/bottom_sheet_wrapper.xml
index 3f9dbdca8..b21f6ceb7 100644
--- a/Habitica/res/layout/bottom_sheet_wrapper.xml
+++ b/Habitica/res/layout/bottom_sheet_wrapper.xml
@@ -5,10 +5,12 @@
     android:orientation="vertical">
     <View
         android:id="@+id/grabber"
-        android:layout_width="40dp"
-        android:layout_height="4dp"
-        android:background="@drawable/layout_rounded_bg_gray"
-        android:layout_margin="@dimen/spacing_large"
+        android:layout_width="24dp"
+        android:layout_height="3dp"
+        android:background="@drawable/layout_rounded_bg"
+        android:backgroundTint="@color/offset_background"
+        android:layout_marginTop="@dimen/spacing_medium"
+        android:layout_marginBottom="@dimen/spacing_large"
         android:layout_gravity="center_horizontal"
         />
 <FrameLayout
diff --git a/Habitica/res/layout/menu_bottom_sheet.xml b/Habitica/res/layout/menu_bottom_sheet.xml
index 0be4f05a9..1f3f06556 100644
--- a/Habitica/res/layout/menu_bottom_sheet.xml
+++ b/Habitica/res/layout/menu_bottom_sheet.xml
@@ -15,9 +15,16 @@
         style="@style/Subheader1"
         android:background="@drawable/bottom_sheet_title"
         android:padding="8dp"/>
+    <com.habitrpg.android.habitica.ui.views.PixelArtView
+        android:id="@+id/icon_view"
+        android:layout_width="@dimen/shopitem_image_size"
+        android:layout_height="@dimen/shopitem_image_size"
+        android:layout_margin="@dimen/spacing_medium"
+        android:layout_gravity="center"
+        android:visibility="gone"/>
     <LinearLayout
         android:id="@+id/menu_items"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:orientation="vertical"/>
+        android:orientation="vertical" />
 </LinearLayout>
\ No newline at end of file
diff --git a/Habitica/res/layout/menu_bottom_sheet_item.xml b/Habitica/res/layout/menu_bottom_sheet_item.xml
index 2155670b1..2de3390b2 100644
--- a/Habitica/res/layout/menu_bottom_sheet_item.xml
+++ b/Habitica/res/layout/menu_bottom_sheet_item.xml
@@ -4,7 +4,10 @@
     android:orientation="vertical"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    style="@style/BottomMenuItem"
+    style="@style/HabiticaButton.Purple.Small"
+    android:background="@drawable/layout_rounded_bg"
+    android:layout_marginVertical="6dp"
+    android:layout_marginHorizontal="@dimen/spacing_large"
     android:clickable="true"
     android:focusable="true">
     <TextView
diff --git a/Habitica/res/values/dimens.xml b/Habitica/res/values/dimens.xml
index 894f505c0..9148b0462 100644
--- a/Habitica/res/values/dimens.xml
+++ b/Habitica/res/values/dimens.xml
@@ -110,7 +110,7 @@
     <dimen name="content_inset">21dp</dimen>
     <dimen name="header_border_spacing">16dp</dimen>
 
-    <dimen name="button_height">53dp</dimen>
+    <dimen name="button_height">50dp</dimen>
     <dimen name="button_height_small">24dp</dimen>
     <dimen name="alert_side_padding">26dp</dimen>
     <dimen name="downwards_drop_shadow_height">16dp</dimen>
diff --git a/Habitica/res/values/styles.xml b/Habitica/res/values/styles.xml
index cf6d639f1..f1faeba76 100644
--- a/Habitica/res/values/styles.xml
+++ b/Habitica/res/values/styles.xml
@@ -456,7 +456,11 @@
     </style>
 
     <style name="BottomMenuItemText">
-        <item name="android:textSize">@dimen/card_medium_text</item>
+        <item name="android:textColor">@color/white</item>
+        <item name="android:textSize">16sp</item>
+        <item name="android:letterSpacing">0.02</item>
+        <item name="android:fontFamily">@string/font_family_medium</item>
+        <item name="android:gravity">center</item>
     </style>
 
     <style name="GemPurchaseListItem">
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/adapter/inventory/ItemRecyclerAdapter.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/adapter/inventory/ItemRecyclerAdapter.kt
index 8a7786bb2..c90b777f2 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/adapter/inventory/ItemRecyclerAdapter.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/adapter/inventory/ItemRecyclerAdapter.kt
@@ -118,31 +118,10 @@ class ItemRecyclerAdapter(val context: Context, val user: User?) : BaseRecyclerV
             binding.titleTextView.text = item?.text ?: ownedItem.key
             binding.ownedTextView.text = ownedItem.numberOwned.toString()
 
-            var disabled = false
-            val imageName: String?
-            if (item is QuestContent) {
-                imageName = "inventory_quest_scroll_" + ownedItem.key
-            } else if (item is SpecialItem) {
-                if (item.key == "inventory_present") {
-                    val sdf = SimpleDateFormat("MM", Locale.getDefault())
-                    val month = sdf.format(Date())
-                    imageName = "inventory_present_$month"
-                } else {
-                    imageName = "shop_" + ownedItem.key
-                }
-            } else {
-                val type = when (ownedItem.itemType) {
-                    "eggs" -> "Egg"
-                    "food" -> "Food"
-                    "hatchingPotions" -> "HatchingPotion"
-                    else -> ""
-                }
-                imageName = "Pet_" + type + "_" + ownedItem.key
-
-                if (isHatching) {
-                    disabled = !this.canHatch
-                }
-            }
+            val disabled = if (isHatching) {
+                    !this.canHatch
+                } else false
+            val imageName = getImageName(item)
             binding.imageView.loadImage(imageName)
 
             var alpha = 1.0f
@@ -154,10 +133,36 @@ class ItemRecyclerAdapter(val context: Context, val user: User?) : BaseRecyclerV
             binding.ownedTextView.alpha = alpha
         }
 
+        private fun getImageName(
+            item: Item?,
+        ): String {
+            return if (item is QuestContent) {
+                "inventory_quest_scroll_" + item.key
+            } else if (item is SpecialItem) {
+                if (item.key == "inventory_present") {
+                    val sdf = SimpleDateFormat("MM", Locale.getDefault())
+                    val month = sdf.format(Date())
+                    "inventory_present_$month"
+                } else {
+                    "shop_" + item.key
+                }
+            } else {
+                val type = when (item?.type) {
+                    "eggs" -> "Egg"
+                    "food" -> "Food"
+                    "hatchingPotions" -> "HatchingPotion"
+                    else -> ""
+                }
+                "Pet_" + type + "_" + item?.key
+            }
+        }
+
         override fun onClick(v: View) {
             val context = context
             if (!isHatching && !isFeeding) {
                 val menu = BottomSheetMenu(context)
+                menu.setTitle(item?.text)
+                menu.setImage(getImageName(item))
                 if (item !is QuestContent && item !is SpecialItem) {
                     menu.addMenuItem(BottomSheetMenuItem(resources.getString(R.string.sell, item?.value), true))
                 }
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/tasks/TasksFragment.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/tasks/TasksFragment.kt
index 2969ad52f..0f2749cce 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/tasks/TasksFragment.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/tasks/TasksFragment.kt
@@ -419,7 +419,9 @@ class TasksFragment : BaseMainFragment<FragmentViewpagerBinding>(), SearchView.O
     }
 
     private fun updateBoardDisplay() {
-        activity?.title = viewModel.ownerTitle
+        if (viewModel.ownerTitle.isNotBlank()) {
+            activity?.title = viewModel.ownerTitle
+        }
         val isPersonalBoard = viewModel.isPersonalBoard
         bottomNavigation?.canAddTasks = isPersonalBoard
     }
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/menu/BottomSheetMenu.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/menu/BottomSheetMenu.kt
index a7dbbcf7c..592a4e3ce 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/menu/BottomSheetMenu.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/menu/BottomSheetMenu.kt
@@ -3,6 +3,7 @@ package com.habitrpg.android.habitica.ui.menu
 import android.content.Context
 import android.view.View
 import com.habitrpg.android.habitica.databinding.MenuBottomSheetBinding
+import com.habitrpg.android.habitica.ui.helpers.loadImage
 import com.habitrpg.android.habitica.ui.views.dialogs.HabiticaBottomSheetDialog
 
 class BottomSheetMenu(context: Context) : HabiticaBottomSheetDialog(context), View.OnClickListener {
@@ -21,7 +22,12 @@ class BottomSheetMenu(context: Context) : HabiticaBottomSheetDialog(context), Vi
     override fun setTitle(title: CharSequence?) {
         binding.titleView.text = title
         binding.titleView.visibility = View.VISIBLE
-        grabberVisibility = View.GONE
+        binding.titleView.background = null
+    }
+
+    fun setImage(url: String) {
+        binding.iconView.loadImage(url)
+        binding.iconView.visibility = View.VISIBLE
     }
 
     fun addMenuItem(menuItem: BottomSheetMenuItem) {
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/menu/BottomSheetMenuItem.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/menu/BottomSheetMenuItem.kt
index e03355a25..235742b71 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/menu/BottomSheetMenuItem.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/menu/BottomSheetMenuItem.kt
@@ -1,6 +1,7 @@
 package com.habitrpg.android.habitica.ui.menu
 
 import android.content.Context
+import android.content.res.ColorStateList
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
@@ -29,7 +30,7 @@ class BottomSheetMenuItem {
         val textView = menuItemView?.findViewById<TextView>(R.id.textView)
         textView?.text = this.title
         if (this.isDestructive == true) {
-            textView?.setTextColor(ContextCompat.getColor(context, R.color.red_50))
+            menuItemView?.backgroundTintList = ColorStateList.valueOf(ContextCompat.getColor(context, R.color.red_10))
         }
         return menuItemView ?: View(context)
     }
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/viewHolders/MountViewHolder.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/viewHolders/MountViewHolder.kt
index 7528584db..394d52687 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/viewHolders/MountViewHolder.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/viewHolders/MountViewHolder.kt
@@ -51,6 +51,7 @@ class MountViewHolder(parent: ViewGroup, private val equipEvents: PublishSubject
         }
         val menu = BottomSheetMenu(itemView.context)
         menu.setTitle(animal?.text)
+        menu.setImage("stable_Mount_Icon_" + animal?.animal + "-" + animal?.color)
 
         val hasCurrentMount = currentMount.equals(animal?.key)
         val labelId = if (hasCurrentMount) R.string.unequip else R.string.equip
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/viewHolders/PetViewHolder.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/viewHolders/PetViewHolder.kt
index e2113895a..35393e47f 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/viewHolders/PetViewHolder.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/viewHolders/PetViewHolder.kt
@@ -110,6 +110,7 @@ class PetViewHolder(
         val context = itemView.context
         val menu = BottomSheetMenu(context)
         menu.setTitle(animal?.text)
+        menu.setImage("stable_Pet-${animal?.animal}-${animal?.color}")
 
         val hasCurrentPet = currentPet.equals(animal?.key)
         val labelId = if (hasCurrentPet) R.string.unequip else R.string.equip